Visual Identity
Typography
Font families
Signifier Light
Display / large headings (h1, h2, h3)
Signifier-Light, serifHonest folks doing honest work.
Used automatically on h1, h2, and h3. Sets the editorial tone of the brand — never used at body text sizes. Available as `font-serif` token but rarely needed manually since the CSS base layer applies it.
Light 300
PP Mori
Sub-headings, body, UI
PP Mori, sans-serifHonest folks doing honest work.
Default font everywhere except h1/h2/h3. Auto-applied — never add `font-sans` to body text or sub-headings.
Light 300Regular 400Medium 500SemiBold 600Bold 700
Type scale
| Name | Size | Line height | Weight | Font |
|---|---|---|---|---|
| h1 (desktop) | 120px | 1.1 | 300 | Signifier Light |
| h1 (mobile) | 50px | 1.1 | 500 | Signifier Light |
| h2 (desktop) | 85px | 1.094 | 300 | Signifier Light |
| h2 (mobile) | 32px | 1.094 | 500 | Signifier Light |
| h3 (desktop) | 50px | 1.21 | 300 | Signifier Light |
| h3 (mobile) | 28px | 1.21 | 500 | Signifier Light |
| h4 (desktop) | 40px | 1em | 400 | PP Mori |
| h4 (mobile) | 18px | 1em | 600 | PP Mori |
| h5 (desktop) | 30px | 1.36 | 400 | PP Mori |
| h5 (mobile) | 20px | 1.36 | 700 | PP Mori |
| h6 | 26px | 1em | 600 | PP Mori |
| p (desktop) | 24px | 1.5 | 400 | PP Mori |
| p (mobile) | 18px | 1.6 | 300 | PP Mori |
| p-sm | 18px | 1.58 | 300 | Signifier Light |
| p-xs | 12px | 1em | — | PP Mori |
Rules
- Use semantic HTML tags. Don't add sizing classes — the CSS base layer handles all responsive font sizing automatically inside .tailwind-scope.
- Never add `font-sans` to body or sub-headings, never add `font-serif` to h1/h2/h3 — both are auto-applied.
- Display overrides (.display-h1, .display-h2, .display-h3) exist for visual hierarchy without breaking heading order. Never use them to skip levels.
- When Figma shows a size that doesn't match a token, use the closest semantic heading level rather than an arbitrary text-[Xpx] class.