Stay on the grid until the work asks you to leave.
Three breakpoints, one logic. Content never runs wider than 1360 px; images may. Toggle the overlay to check any page against the 12-column grid.
1440
12 columns
Margin 40 · Gutter 24 · Max 1360
1024
8 columns
Margin 32 · Gutter 20
390
4 columns
Margin 20 · Gutter 16
Breaks are deliberate and documented. Each one has a job; if it has no job, stay on the grid.
Full bleed
Hero work and chapter openers run edge to edge. Captions return to the grid.
Offset caption
Image on columns 1–8, caption hangs in 10–12, aligned to the image foot.
Hanging headline
Display type starts one column into the margin so the optical edge aligns.
Overlap
A detail image crosses the section rule by one row. One per page, maximum.
Each preset brings its own layout mode. The underlying 12/8/4 grid stays the same; modes decide how work sits on it.
Editorial columns
Asymmetric 7/5 splits, generous text columns.
White cube
One work per wall, wide margins, centered.
Strict grid
Zero gutter, ruled cells, everything on a line.
Collage
Tilted frames, overlaps, stickers allowed.
Full bleed
Letterboxed 2.39:1 frames, text over black.
Five ratios cover every placement. Each image stores a focal point; crops keep it in frame and art direction swaps the ratio per breakpoint.
work · 3:2
3:2
Default work frame, contact sheet
work · 4:5
4:5
Portraits, posters, product
work · 16:9
16:9
Video, case-study chapters
work · 2.39:1
2.39:1
Cinematic heroes, letterbox
Focal point · art direction
focal: { x: 0.62, y: 0.42 } → object-position: 62% 42%
A 4-pt scale from 4 to 192. Small steps inside components, large steps between chapters.
--s-14 px
--s-28 px
--s-312 px
--s-416 px
--s-624 px
--s-832 px
--s-1248 px
--s-1664 px
--s-2496 px
--s-32128 px
--s-48192 px
Print heritage: square corners, hairlines and crop marks. Playful is the only preset that softens.
Radius 0
Default for every preset but one.
Soft 14 px
Playful only: cards, buttons, frames.
1 px hairlines
Ink for structure, line token for rows.
Crop marks
14 px marks, 8 px outside the trim.
Paper grain
Studio only, 5% max, never on work.