Radius & Shadows

The surface foundation. Radius is driven by a single --radius knob, so the whole scale re-rounds from one value. Shadows carry per-theme values so dark surfaces stay legible.

Radius#

The scale is relative to --radius (1rem / 16px), so rounded-lg = the knob itself. Quarter-step multipliers keep every value on the 4px grid; px below are resolved at a 16px root.

rounded-sm8px · 0.5rem · 0.5×

rounded-md12px · 0.75rem · 0.75×

rounded-lg16px · 1rem · 1×

rounded-xl20px · 1.25rem · 1.25×

rounded-2xl24px · 1.5rem · 1.5×

rounded-3xl28px · 1.75rem · 1.75×

rounded-4xl32px · 2rem · 2×

Shadows / elevation#

Switch to a dark theme in the header - the shadows shift to heavier, cooler values automatically.

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl