Twelve columns. One rail. Press G.

A 1440px container, twelve fluid columns, and an editorial rail that owns the first two. Every layout on this site resolves to this grid — press G anywhere to see it.

01 / SpecThe numbers

Container, margin, gutter, columns.

MAX1440pxContainer. Centered; content never exceeds it, full-bleed sections may.

MARGINclamp(20px, 4vw, 56px)Page margin, both sides, all breakpoints.

GUTTERclamp(12px, 1.6vw, 24px)Column gap · var(--g-gap). Fixed row gaps come from the spacing scale.

COLSrepeat(12, minmax(0, 1fr)).g12 with .cs-1…12 spans and .co-1…12 starts. Columns collapse 12 → 6 → 1.

02 / RailEditorial column

The rail owns columns 1–2. Content owns 3–12.

The signature Atlas move — a numbered mono rail beside every argument. .row and .sec-head are fixed-rail shorthands for the same geometry, so retrofit is a class swap, not a redesign.

RAIL · 1–2

CONTENT · 3–12

RAIL

PROSE · 3–8

FIGURE · 9–12

CARD · 3

CAPThe three canonical layouts: rail + content, rail + prose + figure, and quarter cards. Anything else needs a reason.

03 / Spacing8px base

Ten steps on an 8px rhythm.

Vertical rhythm comes from the scale, not the grid: components use 1–6, sections use 7–10.

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

--space-996px

--space-10144px

04 / BreakpointsFour stops

Columns collapse in two moves.

≥ 981px12 columnsFull grid. Rail beside content.

≤ 980px6-col behavior3–4-col spans pair up; 5+ spans go full width. Sticky stages release.

≤ 800pxRail stacks.row and .sec-head drop to one column; the rail becomes a header.

≤ 560px1 columnEverything spans 12. Type scale floors hold legibility.