Guidelines / Geometry & Motion
Borders & Cards
Hairline, Dashed, Emphasis. Square Corners, No Shadows
01 Preview
02 Rule
1px hairlines everywhere, dashed for secondary, 2px for emphasis. Square corners; 2px radius on small inset elements only — chips, code blocks, and the radio box. The one circle in the system is the amber dot inside a checked radio.
03 Tokens
| Token | Value |
|---|---|
| --radius-0 | 0px |
| --radius-1 | 2px |
| --border-w | 1px |
| --border-w-strong | 2px |
| --shadow-overlay | 0 0 0 1px var(--line-2), 0 16px 48px rgba(0, 0, 0, 0.6) |
| --dash-hairline | 1px dashed var(--line-2) |
Defined in src/tokens/borders.css. Use these via var(--name) rather than literal values — npm run lint enforces it wherever a token holds the value.