space

scale

every gap, padding and size is a step on the 4 px base.

1. 4
2. 8
3. 12
4. 16
5. 24
6. 32
7. 48
8. 64
9. 96

rows

three row heights, each with a 1 px rule under it.

• boarda board's rows56 px
• tablea table's rows48 px
• nava nav item32 px

breakpoints

four widths where the layout changes, each a max-width.

shape

no radius anywhere: every corner is square and every edge is 1 px. a control shows focus as a 2 px ring in plum, 2 px outside it. a field thickens its own edge to 2 px inside, so focus never draws a second frame.

elevation

one light from the upper left, so shadows fall right and down and grow with the lift. in light, on stock, a layer's contact edge prints as a 50 percent screen, 3px right and 2px below. in dark the shadow is black and heavier, the contact stays soft, and a 1 px raised edge draws the layer's frame.