Shape
Spacing, radius, and border tokens.
Spacing
Core spacing steps used for layout and components.
| Preview | Token | Used for | Value |
|---|---|---|---|
| sp-1 | --sp-1 |
Space step 1 | — |
| sp-2 | --sp-2 |
Space step 2 | — |
| sp-3 | --sp-3 |
Space step 3 | — |
| sp-4 | --sp-4 |
Space step 4 | — |
| sp-6 | --sp-6 |
Common section gap | — |
| sp-8 | --sp-8 |
Common page gap | — |
Radius
Corner radius tokens used across controls, cards, buttons, pills, and larger emphasis surfaces.
| Preview | Token | Used for | Value |
|---|---|---|---|
--sp-radius-1 |
Tight corners for compact checks and radios. | — |
|
--sp-radius-2 |
Default field and control corners: inputs, nav items, swatches, and small controls. | — |
|
--sp-radius-3 |
Primary component corners: cards, buttons, badges, tabs, and drawers. | — |
|
--sp-radius-4 |
Larger emphasis corners, such as large button sizing. | — |
|
--sp-radius-round |
Fully rounded pills and switches. | — |
Borders
Border colors (and optional widths) used for outlines and separators.
| Preview | Token | Used for | Value |
|---|---|---|---|
| border | --sp-border |
Border color | — |
| strong | --sp-border-strong |
Strong border color | — |
| w-1 | --sp-border-w-1 |
Border width 1 (if defined) | — |
| w-2 | --sp-border-w-2 |
Border width 2 (if defined) | — |