Foundations
Borders and radii
Two border widths, a focus ring with its own width and offset, and a corner scale from square to fully rounded that controls and cards read through their own roles.
Border widths
| Token | Value |
|---|---|
border.width.default | 1px |
border.width.strong | 2px |
focus.width | 2px |
focus.offset | 2px |
Border roles
color.border.strong draws control boundaries and reaches 3:1 against the surfaces controls sit on; color.focus.ring reaches 3:1 against the surface around it.
| Role | Light | Dark | Use |
|---|---|---|---|
color.border.default | #d9d8e1 | #555368 | Dividers / control borders (3:1) |
color.border.strong | #868997 | #858395 | Dividers / control borders (3:1) |
color.focus.ring | #6250e8 | #b4a8ff | Links; 2 px focus ring at 2 px offset |
Corner radii
| Token | Value | Sample |
|---|---|---|
radius.none | 0 | |
radius.xs | 0.125rem | |
radius.sm | 0.25rem | |
radius.md | 0.5rem | |
radius.lg | 0.75rem | |
radius.xl | 1rem | |
radius.2xl | 1.5rem | |
radius.full | 9999px |
Component mappings
| Role | Reads | Value |
|---|---|---|
card.radius | {radius.lg} | 0.75rem |
control.radius | {radius.md} | 0.5rem |