Pro is the default — adult, precise, sans-serif. Studio is the hybrid — warm Fraunces headlines for teens and creative professionals. Playful rounds everything off for kids. Light/dark modes and three densities stack on top.
Each card below is its own scoped data-theme root — you're seeing the tokens apply live.
Light mode stacks on any theme via data-mode="light". Surface and text scales invert; accent stays warm.
Three densities stack on top of any theme. Compact is for dashboards and data-dense grids. Comfy is the default. Spacious is for marketing pages and executive summaries.
Tightens spacing 3–8 by ~33%, nav 248→220, base text 13→12. For tables and grids.
Standard reading rhythm. Used everywhere unless a surface has a specific reason to differ.
Loosens spacing 3–8 by ~33%, nav 248→272, base text 13→14. For landings and narrative.
| Token | Pro | Studio | Playful |
|---|---|---|---|
| --font-heading | Inter Tight | Fraunces | Nunito |
| --font-body | Inter Tight | Inter Tight | Nunito |
| --hero-weight | 500 | 400 | 800 |
| --radius-default | 10px | 14px | 20px |
| --radius-card | 14px | 20px | 28px |
| --radius-button | 10px | 14px | 999px |
| --color-accent | #d97757 | #d97757 | #f08a5d |
| --color-surface-base | #15110d | #17120c | #1c1712 |