Living Styleguide — Layout & Grid

01

Containers — four widths by job

Four container widths, picked by what the page does. Wide for marketing, standard as the default, reading for prose, narrow for forms. All centered in 32px side padding. Structure can go wide; text inside always respects the reading measure.

wide1240px · marketing

standard1160px · default

reading720px · prose

narrow560px · forms

Containers

Four widths

wide 1240 — marketing, full pages

standard 1160 — the default

reading 720 — prose measure

narrow 560 — forms, focused

--container-wide:1240px;
--container:1160px;
--reading:720px;
--narrow:560px;
--pad:32px;

02

Spacing scale — pick from the ladder

Every gap, margin, and padding comes from one 8px-based scale. Reusing the same handful of values is what makes spacing feel rhythmic instead of random. A one-off 13px or 27px is the thing this prevents.

4

8

12

16

24

32

40

56

80

96

Spacing scale

8px base

All spacing from one ladder. Reuse creates rhythm.

4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80 · 96

Never a one-off 13px or 27px. Snap to the scale.

--s2:8px;  --s4:16px;
--s5:24px; --s6:32px;
--s8:56px; --s9:80px;

03

The 12-column grid

Twelve columns because it divides cleanly into halves, thirds, and quarters — which is exactly why the three-across feature rows and the two-across splits work. Structural layout snaps to column spans; the gap comes from the spacing scale.

1

2

3

4

5

6

7

8

9

10

11

12

span 4 · third

span 6 · half

12-column grid

Halves, thirds, quarters

12 divides cleanly. 3-across = span 4, split = span 6, full = span 12.

Feature/pricing/how-it-works rows are all span-4 thirds.

Collapses to 1 column at 900px.

grid-template-columns:
  repeat(12,1fr);
gap:24px;

04

Breakpoints — where it reflows

Three breakpoints, set by where the layout actually needs to change, not by device names. 900 is the major reflow, 720 collapses the nav, 560 is the tightest squeeze. The content decides where it breaks — a two-column split breaks earlier than a text block.

≥ 900px

full multi-column layouts

900px

major: multi-column → stacked

720px

nav collapses, 3-col → 1-col

560px

tightest: padding shrinks to 28px

Breakpoints

Three reflow points

900 — the big one, columns stack

720 — nav collapses

560 — padding shrinks

Content decides the break, not device names. Mobile-first intent.

05

The reading measure

Body text caps at about 65–75 characters per line. Wider than that and the eye struggles to find the start of the next line. This is why prose sits in the 720px reading container, and why ledes carry their own max-width even inside a wide hero.

This line is held to about 66 characters. Your eye finds the start of each new line without effort, and the rhythm of reading stays comfortable all the way down a long block.

This line is allowed to run the full width with no measure cap, which means that by the time your eye reaches the end of a line it has to travel a long way back across the page to find the beginning of the next one, and on a wide screen that return trip is exactly where readers lose their place and start skimming instead of reading.

Measure

65–75 characters

The readability sweet spot for line length.

Prose lives in the 720 container. Ledes cap ~600–620px inside wide heroes.

Structure width ≠ text width. A wide page still holds narrow text.

max-width:66ch;
/* or the 720 reading
   container */

06

The demo · spec split

The layout these styleguide pages are built from is itself a pattern worth documenting: a fluid live-component column beside a fixed spec panel, stacking on small screens. Any "show the thing, explain the thing" content can reuse it — you're looking at it right now.

live component · 1fr

spec · 330px fixed

Demo · spec

Show & explain

Fluid component column + fixed spec panel. The layout of this whole manual.

1fr live left, 330px spec right, stacks at 860.

grid-template-columns:
  1fr 330px;
/* stacks @860 */

The Living Styleguide