Space & shape

Spacing

Compact, 4px base. Most UI gaps 6-12px; section breaks 24-40px.

• sp00pxNo gap.
• sp12pxHairline nudges; the 2px press translate.
• sp24pxBase unit: icon-to-label gaps, inline code padding.
• sp36pxTight sibling gap; material row padding.
• sp48pxDefault sibling gap; button vertical padding.
• sp512pxField and banner padding; material bar padding.
• sp616pxCard padding (16-24px); pre padding.
• sp720pxRoomy card padding.
• sp824pxGroup gap; hr margin.
• sp932pxSection break.
• sp1040pxLarge section break.
• sp1156pxHero spacing.
• sp1280pxPage-level spacing.

Radius

Square. Two softenings allowed; pills only for badges and dots.

• radius.none0Default for everything: buttons, cards, fields, menus.
• radius.hairline1pxA hairline softening, rarely used.
• radius.sm2pxMaximum softening, for inputs that absolutely need it.
• radius.pill999pxPills and dots only (badges, counts). Never buttons.

Shadows

Letterpress, not glow. No blur.

• vars.shadow.stamp2px 2px 0 0 + border colourThe signature elevation: hard 2px ink offset on cards, menus and primary buttons. Collapses to 0 on press while the element translates 2px.
• vars.shadow.stampLg4px 4px 0 0 + border colourLarge stamp for material objects and featured panels.
• vars.shadow.pressinset 0 1px 0 rgba(20,19,15,0.18) · dark: inset 0 1px 0 rgba(232,223,200,0.10)Pressed buttons and sunken fields; the press state of controls without a stamp.
• vars.shadow.soft0 1px 0 rgba(20,19,15,0.12), 0 0 0 1px rgba(20,19,15,0.04) · dark: 0 1px 0 rgba(0,0,0,0.6), 0 0 0 1px rgba(232,223,200,0.05)Faint lift where a stamp is too loud.

Layers