Tokens
Typography
Font families, sizes, weights, line heights and letter spacing. Shown at a 16px root.
Families
| Specimen | Token | Value | Use |
|---|---|---|---|
| Build a 12-week strength program for Sara | font-family/latin | Plus Jakarta Sans, system-ui, sans-serif"Plus Jakarta Sans", system-ui, sans-serif | font-latin |
| صمّم برنامج قوة لمدة 12 أسبوعًا لسارة | font-family/arabic | IBM Plex Sans Arabic, system-ui, sans-serif"IBM Plex Sans Arabic", system-ui, sans-serif | font-arabic |
| --secondary: var(--lime-300); | font-family/monofrom tokens/globals.css | ui-monospace, SFMono-Regular, Menlo, monospace | font-mono |
Sizes
| Specimen | Token | Value | Use |
|---|---|---|---|
| Check-in due today | font-size/xs | 12px0.75rem | text-xs |
| Check-in due today | font-size/sm | 14px0.875rem | text-sm |
| Check-in due today | font-size/base | 16px1rem | text-base |
| Check-in due today | font-size/lg | 18px1.125rem | text-lg |
| Check-in due today | font-size/xl | 20px1.25rem | text-xl |
| Check-in due today | font-size/2xl | 24px1.5rem | text-2xl |
| Check-in due today | font-size/3xl | 30px1.875rem | text-3xl |
| Check-in due today | font-size/4xl | 36px2.25rem | text-4xl |
Weights
| Specimen | Token | Value | Use |
|---|---|---|---|
| Upper body · Week 3 | font-weight/light | 300 | font-light |
| Upper body · Week 3 | font-weight/regular | 400 | font-regular |
| Upper body · Week 3 | font-weight/medium | 500 | font-medium |
| Upper body · Week 3 | font-weight/semibold | 600 | font-semibold |
| Upper body · Week 3 | font-weight/bold | 700 | font-bold |
Line height
| Specimen | Token | Value | Use |
|---|---|---|---|
| Log every set, then add a note on how the last rep felt. | line-height/none | 1 | leading-none |
| Log every set, then add a note on how the last rep felt. | line-height/tight | 1.25 | leading-tight |
| Log every set, then add a note on how the last rep felt. | line-height/snug | 1.375 | leading-snug |
| Log every set, then add a note on how the last rep felt. | line-height/normal | 1.5 | leading-normal |
Letter spacing
| Specimen | Token | Value | Use |
|---|---|---|---|
| Next session | letter-spacing/tight | -0.02em | tracking-tight |
| Next session | letter-spacing/normal | 0em | tracking-normal |
| Next session | letter-spacing/wide | 0.04em | tracking-wide |