Spacing & radius
A 4px spacing grid, four control heights, five radius tiers and three elevation steps.
Spacing
Tailwind's default 4px grid (p-1 = 4px). Use the scale steps below; avoid arbitrary values such as p-[3px].
14px1.56px28px312px416px520px624px832px1040px1248px- Inside controls: gap-1.5 between icon and label, px-2.5.
- Inside cards and sheets: p-4; between stacked fields: gap-4.
- Between page sections: mb-12; page header: py-10.
Control sizes and density
The system is compact by default (32px controls). That meets WCAG 2.2 AA target size (24px). On touch-first screens use the lg size, or add pointer-coarse:h-10 to raise targets toward 44px for coarse pointers only.
size="xs"h-6 · 24pxDense toolbars, inline table actionssize="sm"h-7 · 28pxSecondary actions, filterssize="default"h-8 · 32pxButtons, inputs, menu triggerssize="lg"h-9 · 36pxPrimary page actions, touch-first screensRadius
Every tier is derived from --radius (0.5rem = the lg tier), so changing that one value rescales the whole system. Pick the tier by component role, not by size.
rounded-smSmall inner details (kbd, checkbox)
rounded-mdInner items: menu items, tab triggers, tooltips
rounded-lgControls: buttons, inputs, menu and popover panels
rounded-xlContainers: cards, dialogs, inset panels
rounded-fullAvatars, pill badges, status dots
Nested corners: an inner element's radius should be one tier below its container (a rounded-md item inside a rounded-lg menu).
Elevation
Three steps. In dark mode shadows are hard to see, so elevation comes from surface lightness first (background → card → popover) and the shadow only reinforces it. Cards rest flat with a border; they get no shadow.
shadow-smRaised in place: active tab, inset panel
shadow-mdFloating: dropdown menus, popovers, tooltips
shadow-lgOverlays: sheets, dialogs, toasts
Layers (z-index)
Only three values are used. Don't add new ones; portal the element instead.
z-10Sticky elements inside the page (desktop sidebar, avatar badge)z-20Sidebar railz-50Portalled layers: menus, tooltips, sheets and their overlay. Later-opened layers sit on top by DOM order.