Foundations

Spacing & Layout

Every gap is a step on a 4px base scale — a rhythm shared by brand pages and dense consoles alike. Layout is assembled from four primitives (Container, Section, Grid, Stack) so spacing is never improvised.

The 4px scale

Bars below are drawn at each token’s real width.

space-1 · 4

space-2 · 8

space-3 · 12

space-4 · 16

space-5 · 20

space-6 · 24

space-8 · 32

space-10 · 40

space-12 · 48

space-14 · 56

space-16 · 64

space-24 · 96

Rhythm tokens

Named steps carry the layout’s cadence so pages compose consistently.

--pds-gutter

56px

Horizontal page padding — the Container inset.

--pds-section-y

120px

Vertical rhythm between major Sections.

--pds-card-pad

34px

Internal padding of a Card / Tile.

--pds-grid-gap

18px

Default gap between cards in a Grid.

--pds-content-max

1240px

Max content width, centered.

Container

Container centers content within the brand max-width and applies the gutter as inline padding. The outlined band below is a live Container.

Container · size="lg" · max 1240px

Grid

Grid lays out either a fixed column count or a responsive auto-fit track with a token-scaled gap.

cell 1

cell 2

cell 3

cell 4

Section

Section is a full-bleed vertical rhythm band; tight halves its block padding and surface fills it with a hairline-framed surface.

Section · tight · surface

Density axis

data-density="compact" tightens control heights and rhythm for data-dense consoles — from one attribute, the whole scale steps down. The panels force each density locally.

density · default

density · compact