Foundation

The 6 Structural Layout Primitives

These are the only primitive building blocks allowed for composing higher-order patterns.

1. Container

Controls readable width and horizontal centering.

Contract: section > container > layout Eleventy class: pr-container

maxWidth	1200px
paddingInline	24px mobile / 32px desktop
alignment	center

maxWidth

1200px

paddingInline

24px mobile / 32px desktop

alignment

center

2. Stack

Controls vertical flow with consistent gaps.

Contract: children in vertical sequence Eleventy class: pr-stack

display	flex
direction	column
gap	24px

display

flex

direction

column

gap

24px

3. Grid

Defines multi-column layout for repeated items.

Contract: grid > items Eleventy class: pr-grid

columns	12-col or auto-fit
gap	32px

columns

12-col or auto-fit

gap

32px

4. Split

Two-column layout for text and media relationships.

Contract: left | right Eleventy class: pr-split

ratios	50/50, 40/60, 60/40
mobile	single column
desktop	two columns

ratios

50/50, 40/60, 60/40

mobile

single column

desktop

two columns

5. Cluster

Groups small horizontal items with wrap behavior.

Contract: inline group with wrap Eleventy class: pr-cluster

gap	12px
wrap	true
align	center

gap

12px

wrap

true

align

center

6. Cover

Vertical centering with high-viewport sections.

Contract: large height region with centered content Eleventy class: pr-cover

minHeight	80vh
alignment	vertical center
commonUse	hero and empty states

minHeight

80vh

alignment

vertical center

commonUse

hero and empty states