Radius
From sys.radius.* only. Never rounded-[2px] or Tailwind's rounded-md.
swatch
2px
Legend swatches, tiny chips, inline dots.
control
8px
Buttons, inputs, and chart marks (bars, segments).
field
8px
Inputs and field-like surfaces.
card
12px
Feature cards and metric tiles only.
pill
full
Pills, badges, value chips.
Border
Width from sys.border.*; colour always neutral (outline / outline-strong), never a hue. No arbitrary in-between (no border-[2.5px]).
hairline
1px
Every divider, card border, keyline. The Tailwind border.
emphasis
2px
Focus rings, a mark's dot ring. The Tailwind border-2.
Elevation
From sys.elevation.*. Restrained, warm shadows; reach for the lowest step that reads.
elevation-0
elevation-1
elevation-2
elevation-3
Affordances
Two shape tokens carry meaning beyond structure: the accent hover halo and the chart mark keyline.
Button
accent-halo
A soft accent ring on hover (main.50). The one sanctioned line-like use of the accent.
chart.mark-edge
A keyline under a pale chart mark so it clears WCAG 3:1 (rule 9), fill stays light.