Typography
Two families, one scale of sizes and a separate scale for controls. The second one exists because a button and a paragraph do not share a rhythm: text is read, a control is aimed at, and their sizes answer different questions.
Typography: font families
| Token | Value |
|---|---|
--gr-font-ui--gr-font-ui | Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif |
--gr-font-mono--gr-font-mono | 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace |
Typography: font sizes
| Token | Value |
|---|---|
--gr-text-2xs--gr-text-2xs | 10px |
--gr-text-xs--gr-text-xs | 12px |
--gr-text-sm--gr-text-sm | 14px |
--gr-text-base--gr-text-base | 16px |
--gr-text-lg--gr-text-lg | 18px |
--gr-text-xl--gr-text-xl | 20px |
--gr-text-2xl--gr-text-2xl | 24px |
--gr-text-3xl--gr-text-3xl | 30px |
--gr-text-4xl--gr-text-4xl | 36px |
Typography: control scale
| Token | Value |
|---|---|
--gr-control-text-3xs--gr-control-text-3xs | 10px |
--gr-control-text-2xs--gr-control-text-2xs | 11px |
--gr-control-text-xs--gr-control-text-xs | 12px |
--gr-control-text-sm--gr-control-text-sm | 13px |
--gr-control-text-md--gr-control-text-md | 14px |
--gr-control-text-lg--gr-control-text-lg | 16px |
Typography: line heights
| Token | Value |
|---|---|
--gr-leading-2xs--gr-leading-2xs | 0.875rem |
--gr-leading-xs--gr-leading-xs | 1rem |
--gr-leading-sm--gr-leading-sm | 1.25rem |
--gr-leading-base--gr-leading-base | 1.5rem |
--gr-leading-lg--gr-leading-lg | 1.625rem |
--gr-leading-xl--gr-leading-xl | 1.75rem |
--gr-leading-3xl--gr-leading-3xl | 2.25rem |
--gr-control-leading-3xs--gr-control-leading-3xs | 14px |
--gr-control-leading-2xs--gr-control-leading-2xs | 16px |
--gr-control-leading-xs--gr-control-leading-xs | 16px |
--gr-control-leading-sm--gr-control-leading-sm | 18px |
--gr-control-leading-md--gr-control-leading-md | 20px |
--gr-control-leading-lg--gr-control-leading-lg | 24px |
--gr-leading-tight--gr-leading-tight | 1.25 |
--gr-leading-normal--gr-leading-normal | 1.5 |
--gr-leading-relaxed--gr-leading-relaxed | 1.625 |
Typography: font weights
| Token | Value |
|---|---|
--gr-font-regular--gr-font-regular | 400 |
--gr-font-medium--gr-font-medium | 500 |
--gr-font-semibold--gr-font-semibold | 600 |
--gr-font-bold--gr-font-bold | 700 |
Role descriptions ship with the package in Russian and are not shown here yet. Translating them is a decision of its own — see ADR-0003.
Source: @feugene/granularity 0.41.0, tokens/*.json