Foundations

Radii & elevation

Subtle corners, restrained shadows. We use elevation to signal layering and focus, not to invent visual richness.

Radii

none
0
Tables, hard dividers
xs
2px
Tight chips
sm
4px
Inputs, badges
md
6px
Default · buttons, cards
lg
8px
Containers
xl
12px
Modals, large cards
2xl
16px
Hero panels
full
9999px
Pills, avatars

Elevation

Five steps from flat to floating. Use sparingly — flat is usually correct in dense tools.

xs
--shadow-xs
Hairline lift
sm
--shadow-sm
Cards on bg
md
--shadow-md
Dropdowns, popovers
lg
--shadow-lg
Modals
xl
--shadow-xl
Toasts, focused dialogs

Semantic elevation (recommended)

Prefer the semantic --elevation-N alias over picking a shadow by name. The semantic version expresses intent ("level 2 elevation") rather than implementation; if the shadow scale ever shifts (e.g., we tighten for a denser theme), every consumer follows automatically.

0
--elevation-0
Flat · in-flow content
1
--elevation-1
Hairline lift · cards
2
--elevation-2
Raised surface
3
--elevation-3
Dropdowns, popovers
4
--elevation-4
Modals
5
--elevation-5
Toasts, floating panels

Focus ring

Decomposed so components can build their own focus expression. The default --shadow-focus shorthand stays in scope for back-compat; new components should compose from these primitives instead.

TokenValueUsage
--ring-color
var(--ring) → sky-600
Default focus indicator color
--ring-color-danger
danger-500
Destructive control focus
--ring-color-success
success-500
Confirm / approve focus
--ring-width
3px
Ring thickness
--ring-offset
2px
Gap between control and ring
--ring-color
--ring-color-danger
--ring-color-success

Scrim & backdrop

Three opacity tiers for overlays. --backdrop is the default for modal dialogs and aliases --scrim-medium.

scrim-light
scrim-medium · backdrop
scrim-strong