The studio is where the design system gets continuously tested against itself. Every theme switch is a regression check; every new component a chance to surface drift.
1. Typography
Hierarchy, tracking, leading, composition, and whitespace — the four levers that separate clean type from cramped or formless.
Hierarchy with intent
Display headline
Section heading
Subsection
Body — primary reading text. The quick brown fox jumps over the lazy dog.
Secondary — de-emphasized body. The quick brown fox jumps over the lazy dog.
Caption — supporting hints, timestamps, meta.
Section label
Tracking (letter-spacing)
Tracking covaries with size and case. Tighten as size grows (display copy looks loose at neutral). Widen for small uppercase (caps read as a blob without space).
- Design Hub
- Design Hub
- Design Hub
- Design Hub
- Design Hub
- Design Hub
Leading (line-height)
Same paragraph, four leadings. Body sits at 1.5; tight is for display headlines; relaxed is for long-form reading.
The studio is where the design system gets continuously tested against itself. Every theme switch is a regression check; every new component a chance to surface drift.
The studio is where the design system gets continuously tested against itself. Every theme switch is a regression check; every new component a chance to surface drift.
The studio is where the design system gets continuously tested against itself. Every theme switch is a regression check; every new component a chance to surface drift.
Composition
All four levers together. Line length capped at 70ch — eyes stop tracking cleanly past ~80 characters per line.
Field notes
A design system speaks in restraint
Good typography on screen isn't about variety. It's about predictability — a small, consistent set of sizes and weights, paired to leading and tracking that respect the eye.
The temptation when starting a system is to give every level of hierarchy its own size. By the third tier the differences start to feel arbitrary; by the fifth, the reader can no longer tell levels apart.
Three sizes, then weight
Three heading sizes — display, section, subsection — cover almost every screen UI need. Anything beyond that should reach for font-weight before reaching for a new size token.
Whitespace and attention
Same content, two rhythms. Generous whitespace around an element isolates it; isolation directs attention. The right card reads as "the thing that matters." The left reads as noise.
Cramped
Compile this method?
Workflow will be generated and validated.
Breathing
Compile this method?
Workflow will be generated and validated.
Component typography
Typography in a real UI lives inside components, not in isolation. A button isn't "14px medium" — it's a button, and the button variant owns its own typography. The consumer picks a variant, not a size.
Each row renders the element live and documents its typography. Use as a cheat sheet — or as a regression check against your own implementations.
| Element | Class | Size · Weight | Color | Extras |
|---|---|---|---|---|
| Buttons | ||||
| .btn-sm | 12 · 500 | text-on-primary | line-height: 1 | |
| .btn-md (default) | 14 · 500 | text-on-primary | line-height: 1 | |
| .btn-lg | 16 · 500 | text-on-primary | line-height: 1 | |
| .btn-subtle | 12 · 500 | text-muted → text-primary on hover | height: 28px | |
| Form fields | ||||
| .form-label | 14 · 500 | text-primary | — | |
| .form-input | 14 · 400 | text-primary | height: 36px | |
| .form-input::placeholder | 14 · 400 | text-muted | — | |
| We'll never share your email. | .form-help | 12 · 400 | text-muted | — |
| Email format is invalid. | .form-error | 12 · 400 | error | — |
| Tables | ||||
| NAME | .table th | 12 · 600 | text-muted | +0.04em, uppercase |
| Plate-A03 | .table td | 14 · 400 | text-primary | — |
| Cards | ||||
| Workflow | .card-header | 16 · 600 | text-primary | — |
| Author and compile workflows. | .card-body | 14 (inherits) · 400 | text-secondary | line-height: 1.5 |
| Status & chrome | ||||
| Ready | .badge | 10 · 500 | varies by color | line-height: 1, pill |
| Beta | .tag | 10 · 500 | varies by color | line-height: 1, rounded-rect |
| .tab (active) | 14 · 500 | text-primary | underline 2px primary | |
| .tab (inactive) | 14 · 500 | text-muted | — | |
| Stats & metrics | ||||
| 42 | stat value | 32 · 700 | primary | line-height: 1 |
| plates / hr | stat label | 12 · 400 | text-muted | +0.05em, uppercase |