Foundation

Spacing

Compact spacing steps for dense but legible composition.

Prefer smaller repeated steps over bespoke gaps; pressure comes from composition density.
layout
DOM renderImage render
SpacingDefault
Spacing scale4px base increments
space-14
space-28
space-312
space-416
space-520
space-624
space-832
space-1040
space-1248
space-1664

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Compact spacing steps that scale from controls to editorial rhythm.
Spacing scale4px base increments
space-14
space-28
space-312
space-416
space-520
space-624
space-832
space-1040
space-1248
space-1664
Render state

Density

Pressure changes by composition density, not by primitive-specific props.
Density bandsComposition pressure
Productdense rows and controls
Generative UIfocused generated panels
Educationaldiagram frames
Editorialreading rhythm
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription