Design Tokens
Tokens are the named decisions the system is built from, in three tiers. Base tokens are the raw palette and scales. Semantic tokens say what a value is for, and they're what components read. Component tokens hold a component's own departures. This page lists the semantic tokens.
For the theory behind them (the tiers, the naming grammar and how the colour ramps work), read thetoken documentation.
Borders separate content and mark edges. A divider uses the default border, which is quiet (1.53:1). A control's edge uses the input border, which is at least 3:1, so it shows where the control is. There is one near-black focus ring. Radius matches the size of the object: small controls, cards, then modals.
How to choose border tokensBorder
| Token Name | Value | Usage | Example |
|---|---|---|---|
| border.default | 0.0625rem solid #d1d1d1 | Hairline in the default border colour: dividers and decorative outlines, such as Breadcrumbs, CodeBlock and Divider. 1.53:1 on white, so never a control edge (decision 0025). | Sample |
| border.focus | 0.125rem solid #222222 | The focus ring every component draws, with border.focusOffset; never blue (decision 0029). | Sample |
| border.focusOffset | 0.125rem | Gap between an element and its focus ring; negate it to inset the ring inside the element. | Sample |
| border.input-hover | 0.0625rem solid #636363 | Firm hairline that must read as a boundary, such as a hovered text input. | Sample |
Radius
| Token Name | Value | Example |
|---|---|---|
| radius.none | 0 | Sample |
| radius.xs | 0.125rem | Sample |
| radius.sm | 0.25rem | Sample |
| radius.md | 0.5rem | Sample |
| radius.lg | 0.75rem | Sample |
| radius.xl | 1rem | Sample |
| radius.2xl | 1.5rem | Sample |
| radius.3xl | 2rem | Sample |
| radius.full | 10rem | Sample |