Typography
Type tokens grouped by heading, body, label, numbers, and code families.
Heading
Display and hierarchy titles across pages and sections.
| Aa Example | Class name |
|---|---|
Make something people want | --openui-text-heading-xl |
Make something people want | --openui-text-heading-lg |
Make something people want | --openui-text-heading-md |
Make something people want | --openui-text-heading-sm |
Make something people want | --openui-text-heading-xs |
Body
Long-form and supporting copy styles for content readability.
| Aa Example | Class name |
|---|---|
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-lg |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-lg-heavy |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-default |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-default-heavy |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-sm |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-sm-heavy |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-xs |
Body copy should stay comfortable to scan on long paragraphs and dense content surfaces. | --openui-text-body-xs-heavy |
Label
Compact labels for form controls, badges, and field metadata.
| Aa Example | Class name |
|---|---|
Label Large | --openui-text-label-lg |
Label Large Heavy | --openui-text-label-lg-heavy |
Label | --openui-text-label-default |
Label Heavy | --openui-text-label-default-heavy |
Label Small | --openui-text-label-sm |
Label Small Heavy | --openui-text-label-sm-heavy |
Label Extra Small | --openui-text-label-xs |
Label Extra Small Heavy | --openui-text-label-xs-heavy |
Numbers
Numerical values for stats, metrics, and tabular data.
| Aa Example | Class name |
|---|---|
12,345,678.90 | --openui-text-numbers-lg |
9,876.54 | --openui-text-numbers-lg-heavy |
345,678.12 | --openui-text-numbers-default |
123,456.78 | --openui-text-numbers-default-heavy |
78,901.23 | --openui-text-numbers-sm |
56,789.01 | --openui-text-numbers-sm-heavy |
34,567.89 | --openui-text-numbers-xs |
12,345.67 | --openui-text-numbers-xs-heavy |
Code
Monospace styles for snippets, tokens, and command text.
| Aa Example | Class name |
|---|---|
<Button variant='secondary' /> | --openui-text-code-default |
pnpm run build && pnpm run start | --openui-text-code-default-heavy |
const tokenName = '--openui-text-code-sm'; | --openui-text-code-sm |
const tokenName = '--openui-text-code-sm-heavy'; | --openui-text-code-sm-heavy |