Use pre-configured text styles for consistency. For text colors, use tokens.
| Token | Tailwind | CSS | Value |
|---|
font.archivo | font-archivo | --font-archivo | Archivo |
| Token | Tailwind | CSS | Size | Weight | Line Height |
|---|
heading.5xl | heading-5xl | --heading-5xl | 56px | 600 | 64px |
heading.4xl | heading-4xl | --heading-4xl | 48px | 600 | 56px |
heading.3xl | heading-3xl | --heading-3xl | 36px | 600 | 40px |
heading.2xl | heading-2xl | --heading-2xl | 32px | 600 | 32px |
heading.xl | heading-xl | --heading-xl | 24px | 600 | 28px |
heading.lg | heading-lg | --heading-lg | 20px | 600 | 24px |
heading.md | heading-md | --heading-md | 16px | 600 | 20px |
heading.sm | heading-sm | --heading-sm | 14px | 600 | 16px |
heading.xs | heading-xs | --heading-xs | 12px | 600 | 14px |
| Token | Tailwind | CSS | Size | Weight | Line Height |
|---|
body.lg | body-lg | --body-lg | 16px | 400 | 24px |
body.md | body-md | --body-md | 14px | 400 | 20px |
body.sm | body-sm | --body-sm | 12px | 400 | 16px |
| Token | Tailwind | CSS | Value |
|---|
font.weight.regular | font-regular | --font-weight-regular | 400 |
font.weight.medium | font-medium | --font-weight-medium | 500 |
font.weight.semibold | font-semibold | --font-weight-semibold | 600 |
font.weight.bold | font-bold | --font-weight-bold | 700 |
Use only when text styles don't fit your needs.
| Token | Tailwind | CSS | Value |
|---|
text.xs | text-xs | --text-xs | 0.75rem (12px) |
text.sm | text-sm | --text-sm | 0.875rem (14px) |
text.md | text-md | --text-md | 1rem (16px) |
text.lg | text-lg | --text-lg | 1.25rem (20px) |
text.xl | text-xl | --text-xl | 1.5rem (24px) |
text.2xl | text-2xl | --text-2xl | 2rem (32px) |
text.3xl | text-3xl | --text-3xl | 2.25rem (36px) |
text.4xl | text-4xl | --text-4xl | 3rem (48px) |
text.5xl | text-5xl | --text-5xl | 3.5rem (56px) |
| Token | Tailwind | CSS | Value |
|---|
leading.1 | leading-1 | --leading-1 | 14px |
leading.2 | leading-2 | --leading-2 | 16px |
leading.3 | leading-3 | --leading-3 | 20px |
leading.4 | leading-4 | --leading-4 | 24px |
leading.5 | leading-5 | --leading-5 | 28px |
leading.6 | leading-6 | --leading-6 | 32px |
leading.7 | leading-7 | --leading-7 | 36px |
leading.8 | leading-8 | --leading-8 | 40px |
leading.9 | leading-9 | --leading-9 | 56px |
leading.10 | leading-10 | --leading-10 | 64px |
leading.none | leading-none | --leading-none | normal |
Use semantic HTML headings (<h1> through <h6>) in order. One <h1> per page.
| Element | Typical style | Purpose |
|---|
<h1> | heading-2xl | Page title |
<h2> | heading-xl | Major sections |
<h3> | heading-lg | Subsections |
<h4> | heading-md | Group titles |
| Do | Don't |
|---|
Use text styles (heading-lg, body-md) | Combine primitives when styles exist |
Use body.lg (16px) for paragraphs | Default to smaller text sizes |
Follow heading hierarchy (h1 → h2) | Skip heading levels |
See the design specs in Figma (link coming soon).
