Foundations

Space, radius, depth

A 4px rhythm, a radius scale where inner corners are always smaller than outer ones, and depth made from light and soft shadows.

Spacing scale

Steps of the 4px grid (2px only for hairline gaps). Density “compact” shrinks control heights, not this scale.

--s-1

--s-2

--s-3

--s-4

--s-5

--s-6

--s-7

--s-8

--s-9

--s-10

--s-11

--s-12

The fixed distances that make every page feel the same.

Outer containers round the most; things inside round less. Inside corner = outside corner − the gap.

--r-xs · Badges

--r-bar · Chart bars

--r-sm · Menu items, thumbs

--r-chip · Chips, fields, rows

--r-seg · Segmented track

--r-md · Sidebar items, tooltips

--r-pop · Menus, popovers

--r-lg · KPI cards · phone cards

--r-xl · Cards, panels, sheets

--r-pill · Primary buttons, status

26px card14px chip inside 12px padding

Three shadows. Cards rest, menus float, lifted cards respond to the pointer.

--sh-cardCards at rest

--sh-popMenus, tooltips, toasts

--sh-liftClickable card on hover

Everything stacks in this order. Only these values are used for z-index.