Space & radius
A 4px base with deliberate gaps at the top end. Density is a separate axis: it does not touch the space scale, only the six tokens that control how tall things are.
Space
2
--sp-1
4
--sp-2
6
--sp-3
8
--sp-4
12
--sp-5
16
--sp-6
20
--sp-7
24
--sp-8
32
--sp-9
40
--sp-10
48
--sp-11
64
--sp-12
80
--sp-13
96
--sp-14
128
--sp-15
Radius
4
--r-xs
6
--r-sm
9
--r-md
12
--r-lg
16
--r-xl
20
--r-2xl
28
--r-3xl
pill
--r-pill
Density
Compact is not a smaller copy of the theme — it changes six tokens and nothing else. Type sizes, colours and the space scale stay put, so a dense table gets tighter without the interface getting harder to read. Flip the density control in the header and watch only the right-hand column apply.
TokenComfortableCompact
--row-hTable row height44px32px--field-hDefault control height40px32px--field-h-smSmall control32px28px--field-h-lgLarge control48px38px--pad-cardCard padding20px16px--pad-fieldControl inner padding12px8px