Typography
Fifteen named roles for dense financial screens, set through Text.
Each variant sets size, leading, weight and tracking together through one utility (text-body-md). Headings tighten tracking; captions widen it. Numeric roles add tabular numerals.
| Variant | Sample | Size / leading | Weight / tracking |
|---|---|---|---|
| display-lg | The quick brown fox settles the invoice | 1.875rem / 2.25rem | 600 / -0.02em |
| display-md | The quick brown fox settles the invoice | 1.5rem / 2rem | 600 / -0.02em |
| heading-lg | The quick brown fox settles the invoice | 1.25rem / 1.75rem | 600 / -0.01em |
| heading-md | The quick brown fox settles the invoice | 1rem / 1.5rem | 600 / -0.01em |
| heading-sm | The quick brown fox settles the invoice | 0.875rem / 1.25rem | 600 / 0em |
| body-lg | The quick brown fox settles the invoice | 1rem / 1.5rem | 400 / 0em |
| body-md | The quick brown fox settles the invoice | 0.875rem / 1.25rem | 400 / 0em |
| body-sm | The quick brown fox settles the invoice | 0.8125rem / 1.125rem | 400 / 0em |
| label-md | The quick brown fox settles the invoice | 0.875rem / 1.25rem | 500 / 0em |
| label-sm | The quick brown fox settles the invoice | 0.75rem / 1rem | 500 / 0em |
| caption | The quick brown fox settles the invoice | 0.6875rem / 1rem | 400 / 0.04em |
| numeric-lg | $12,480.00 | 1.5rem / 2rem | 600 / -0.01em |
| numeric-md | $12,480.00 | 0.875rem / 1.25rem | 500 / 0em |
| numeric-sm | $12,480.00 | 0.75rem / 1rem | 500 / 0em |
| code | txn_1Nv2hZ · acct_4421 | 0.8125rem / 1.25rem | 400 / 0em |