Spacing scale · base unit 4px
space-14pxHairline gaps · icon-text
space-28pxTight inline groups
space-312pxForm-field internal padding
space-416pxDefault gap · paragraph margins
space-624pxCard internal padding · stack
space-832pxComponent group separation
space-1040pxSection internal padding
space-1248pxCard / page outer padding
space-1664pxSection vertical rhythm
space-2080pxHero · page-top breathing room
space-2496pxMajor page section breaks
Radii
radius-sm
4px
Tags, dense table cells
radius-md ★
6px
Buttons, inputs · default
radius-lg
10px
Cards, panels
radius-xl
16px
Modals, hero containers
radius-pill
999px
Status pills, chip filters
Shadows · cobalt-tinted, never neutral grey
shadow-1
0 1px 2px rgba(33,70,139,.08)
shadow-2
0 2px 8px rgba(33,70,139,.10)
shadow-3
0 8px 24px rgba(33,70,139,.12)
Hex shapes · always pointy-top
Filled, cobalt
Avatars, primary status,
kernel hex on diagrams.
Outlined
Empty-state slots,
placeholder app icons.
Pastel face
Hex-prism category face
on illustrations.
Cluster
App ecosystem, diagrams,
illustration scaffolds.
Density patterns · spacing in context
Form stack · gap space-3 (12px)
Article stack · gap space-4 (16px)
Card grid · gap space-5 (20px)
Section break · gap space-16 (64px)