Typography
StableFont families, size scale, weights, line heights, and semantic text styles.
Overview
The type system uses Inter as the primary UI font, with Geist Mono for code. All type decisions are captured as tokens and bound to Figma text styles.
Font families
| Token | Value | Description |
|---|
Font weights
| Token | Value | Description |
|---|
Size scale
| Token | Value | Description |
|---|
Line heights
| Token | Value | Description |
|---|
Letter spacing
| Token | Value | Description |
|---|
Semantic text styles
16 text styles bound to variables in Figma. All styles reference primitive tokens via the Typography collection.
| Style | Size | Weight | Line height | Letter spacing |
|---|---|---|---|---|
| Heading/XL | 32px | Semi Bold | 40px | 0 |
| Heading/LG | 28px | Semi Bold | 32px | -1% |
| Heading/MD | 24px | Semi Bold | 32px | -1% |
| Heading/SM | 20px | Semi Bold | 28px | 0 |
| Body/LG | 16px | Regular | 24px | 0 |
| Body/MD | 14px | Regular | 20px | 0 |
| Body/SM | 12px | Regular | 16px | 0 |
| Label/MD | 14px | Medium | 20px | 0 |
| Label/SM | 12px | Medium | 16px | 0 |
| Button/SM | 14px | Medium | 20px | 0 |
| Button/MD | 14px | Medium | 20px | 0 |
| Button/LG | 16px | Medium | 24px | 0 |
| Caption | 12px | Regular | 16px | 0 |
| Price/LG | 24px | Semi Bold | 32px | -1% |
| Price/MD | 20px | Semi Bold | 28px | -1% |
| Price/SM | 16px | Semi Bold | 24px | -1% |
Token naming convention
Typography tokens follow the pattern {category}/{property}/{scale}:
font/family/sans— font familyfont/weight/semibold— weight variantfont/size/16— size in pxfont/line-height/24— line height in pxfont/letter-spacing/tight— named spacing step
Semantic styles compose these as: heading/xl/family, heading/xl/size, heading/xl/line-height, etc.