RESPIRA CENTER STUDIO
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. rendered in IBM Plex Mono, weight 500, uppercase, letter-spacing 0.18em. the slash carries the lineage between parent and service.

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

the favicon

a single filled dot. dark chrome · light chrome.

do not render it any other way.

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

— 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 — but 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.

€1,500 · €3,000 · 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