Foundations
Spacing & radius
Everything sits on a 4-point grid. Eight spacing steps cover the app – from hairline gaps inside chips to the breathing room around screen titles. If a layout needs a value that isn’t here, the layout is usually wrong.
Spacing scale
Each bar is drawn at 7× the token for legibility; the labels are the real values.
xs
4px
sm
8px
md
12px
lg
16px
xl
20px
xxl
24px
3xl
32px
4xl
48px
Corner radius
Radii step with the size of the element – small radii for chips, generous ones for cards and wells, and the pill for anything a thumb presses. Shapes below are capped at 44px so the larger tokens stay readable.
xs
6px · chips, badges
sm
8px · swatch chips
md
12px · inputs, small buttons
lg
14px · task cards
xl
16px · cards, sheets
xxl
22px · icon wells, header buttons
3xl
56px · oversized wells
card
14px · alias of lg – the default card
pill
pill (999) · buttons, chips, pills