Elevation
Four shadow tokens plus the radius scale.
Elevation is carried by shadow tokens on light surfaces and by surface-tint deltas on dark ones. Four steps cover every case: from chip-level hairlines up to modal-over-page lifts. Pair each shadow with an appropriate radius — they're read together.
Source: packages/tokens/src/shadow.tokens.json and packages/tokens/src/radius.tokens.json.
Shadow scale
0 1px 2px rgba(0,0,0,0.05)0 4px 6px -1px rgba(0,0,0,0.1)0 10px 15px -3px rgba(0,0,0,0.1)0 20px 25px -5px rgba(0,0,0,0.1)When to use which
sm— inline chips, tag pills, subtle definition on hover of a flat element. Barely-there.md— cards at rest. The default "this thing is a surface" shadow.lg— floating surfaces that overlay content: dropdowns, popovers, select menus.xl— dialogs, drawers, modal overlays. The heaviest lift in the system; reserved for page-level interruptions.
On dark surfaces shadows read less — a black-on-black shadow does no work. Dark-mode elevation relies on tinting the surface a step lighter (stone.900 over stone.950) and using a subtle stone.800 border instead. Shadow tokens are still emitted; components apply them unconditionally and let the renderer decide how visible they read.
Radius scale
Seven steps. Every rounded corner in the system picks from this list.
| Token | Value | Typical use |
|---|---|---|
radius.none | 0px | Full-bleed edges, table cells. |
radius.sm | 4px | Tight chips, small badges. |
radius.md | 6px | Inputs, buttons. The default. |
radius.lg | 8px | Cards, tiles. |
radius.xl | 12px | Featured cards, media tiles. |
radius.2xl | 16px | Hero blocks, marketing surfaces. |
radius.full | 9999px | Pills, avatars, circular icon buttons. |
Pairing
Shadow and radius are chosen together. A larger surface reads right with a larger radius and a stronger shadow; an inline chip uses sm for both. Don't mix xl shadow with sm radius — the lift and the softness must match.