CENTER STUDIO Respira
DESIGN SYSTEM

00 / THIS PAGE

a working artifact.

every token that carries the site. theme-aware. keep it open while you work.

01 / THE LOCKUP

the brand is typography.

always locked. always visible. the service name holds the weight; the parent brand whispers behind it. three parts, two typefaces, one line.

CENTER STUDIO Respira LG · 1rem · header
CENTER STUDIO Respira MD · 0.875rem · /ui, hero
CENTER STUDIO Respira SM · 0.75rem · footer

anatomy.

  1. 01 CENTER STUDIO IBM Plex Mono · 500 · uppercase · track 0.18em
  2. 02 by IBM Plex Sans · 400 · italic · lowercase · 0.92em
  3. 03 Respira Alan Sans · 700 · sentence case · track 0

the favicon

a single filled dot. dark chrome · light chrome.

do not render it any other way.

  • Respira / Studio Center mixed case
  • RESPIRA — CENTER STUDIO em-dash
  • RESPIRA | CENTER STUDIO pipe
  • RESPIRA · CENTER STUDIO middle-dot
  • RESPIRA CENTER STUDIO no separator
  • R / CS abbreviated
  • CENTER STUDIO BY RESPIRA 'by' in caps
  • CENTER STUDIO by RESPIRA parent in caps

02 / TYPOGRAPHY

IBM Plex Sans. IBM Plex Mono. nothing else.

Plex Sans 300 · clamp(3.75→7.5rem) · lh 0.98 · track -0.035em

already speaking.

.cs-display
Plex Sans 300 · clamp(2.5→4rem) · lh 1.08 · track -0.025em

nine things. all included.

.cs-h1
Plex Sans 400 · clamp(1.75→2.5rem) · lh 1.15 · track -0.015em

if this feels right, let's talk.

.cs-h2
Plex Sans 500 · 1.25rem · lh 1.3 · track -0.005em

stephanie canavesio

.cs-h3
Plex Sans 400 · clamp(1.1→1.3rem) · lh 1.55

everything your client does happens inside one space.

.cs-body-lg
Plex Sans 400 · 1rem · lh 1.55

CENTER STUDIO installs a practice operating system on your own domain.

.body (default)
Plex Sans 400 · 0.875rem · lh 1.5

thirty days of included adjustments.

.cs-small
Plex Sans 400 · 0.75rem · lh 1.4

logos used with permission.

.cs-caption
Plex Mono 400 · 0.75rem · track 0.15em (caps)

PAYMENTS · SCHEDULING · FORMS

.cs-mono-small cs-caps

03 / COLOR TOKENS

two positions. not inversions.

DARK

  • --cs-ink #0e0d0b
  • --cs-surface #161411
  • --cs-surface-2 #1f1c18
  • --cs-paper #f5f0e6
  • --cs-paper-dim #c9c2b4
  • --cs-paper-low #8a867e
  • --cs-rule #2a2620
  • --cs-rule-strong #3a342c
  • --cs-accent #c9a86a
  • --cs-accent-dim #8a6d2b

LIGHT

  • --cs-ink #fafaf7
  • --cs-surface #f4f3ee
  • --cs-surface-2 #ebe9e1
  • --cs-paper #1c1b18
  • --cs-paper-dim #4a463f
  • --cs-paper-low #7a746a
  • --cs-rule #d5d1c6
  • --cs-rule-strong #b5afa1
  • --cs-accent #1c1b18
  • --cs-accent-signal #c9a86a
  • --cs-accent-dim #5a554b

in light mode: graphite is the accent. gold is reserved for the one signal dot at the center of the journey diagram.

04 / SPACING

whitespace is structural.

  • --cs-space-1 4px
  • --cs-space-2 8px
  • --cs-space-3 12px
  • --cs-space-4 16px
  • --cs-space-6 24px
  • --cs-space-8 32px
  • --cs-space-12 48px
  • --cs-space-16 64px
  • --cs-space-24 96px
  • --cs-space-32 128px

05 / SHAPE

barely-there radii.

--cs-radius-sm · 2px --cs-radius-md · 3px --cs-radius-lg · 4px

06 / PRIMITIVES

buttons, fields, links, badges.

INLINE LINK → LABEL

07 / STRUCTURE

hairlines and dotted grids.

1px · --cs-rule
1px · --cs-rule-strong
1.5px dots · 40px gap · --cs-paper-low @ 10–12% opacity

connector treatments

the tech stack uses three hairline treatments to encode integration depth. no legend appears on the marketing page. the per-logo annotations carry the meaning. the treatments are documented here as internal reference.

  • BIDIRECTIONAL both sides reads & writes
  • ONE-WAY FLOW weaker side: webhook-only / partial
  • INHERITED / SELF-SERVICE weaker side: alternate rail or via-another-tool

08 / NUMERALS & PUNCTUATION

the studio manual.

€3,000 · +€1,500 · 0123456789

tabular on pricing, roadmap, diagram labels. proportional in flowing prose.

 & · — · – · … · ¶

ampersand, em-dash, en-dash, ellipsis, pilcrow. use the real glyph, not two hyphens.

← BACK TO THE SITE