Layout & templates
Layout is composition. The grid is the score; the page is the performance. Spacing tokens give us the cadence – the work here is deciding which container holds the words, where the columns split, and which of the four shells the page belongs to.
Breakpoints in practice
Six breakpoints, tuned for editorial reading. The full token table lives on Spacing – this page covers what each breakpoint actually changes in a layout.
The grid collapses progressively – 12 columns at lg and up, 6 at md, 4 at sm, a single stacked column below. Gutters and margins ride the same scale: tight on phones, generous on desktops, tied to --es-grid-gutter and --es-grid-margin so any change propagates everywhere.
Containers
Four widths, each with one job. Don’t invent a fifth.
Containers nest – a wide shell can hold a prose body for the article text, with full-bleed images breaking out to the parent. The body never inherits the parent’s width without a deliberate reason.
The 12-column grid
The grid is twelve equal columns, separated by a gutter that scales from 16 px on phones to 32 px at desktop. Margins on either side run from 24 px to 48 px. Most editorial spreads use two or three column blocks – the grid is the discipline, not the decoration.
The four canonical splits – 6 / 6, 8 / 4, 4 / 4 / 4, 3 / 9 – cover almost everything. A 7 / 5 or 5 / 7 split is permissible for asymmetric editorial moments; anything finer-grained (like 5 / 4 / 3) is a sign the grid has stopped helping.
Page shells
Four templates. Every page on the site is one of these – the system stays sharp because the catalogue is short.
Article
When to use — every editorial feature, interview, essay, and long-read. Must contain — issue + section overline, serif headline, standfirst, byline, hero image, prose body capped at 65 ch, end-mark. Must not contain — sidebar, in-body CTA, marketing module, secondary hero. The article is the read.
Marketing landing
When to use — subscription, issue index, about, partner pages, any page that converts. Must contain — single hero with one primary CTA, alternating cream / paper section blocks, subscribe form before the footer. Must not contain — sidebar, second hero, three competing CTAs, prose body wider than 65 ch.
Member portal
When to use — logged-in dashboard, account settings, saved-article views.
Must contain — sticky sidebar (3 cols at lg), main pane with content panes capped at narrow (768) inside the wide shell, top-level account chip in the header.
Must not contain — marketing CTAs, full-bleed editorial imagery, prose-width long reads (link out to the article shell instead).
Issue cover
When to use — the index of a single issue. One per issue, no exceptions. Must contain — full-bleed cover image, issue number + month overline, contents list with section anchors, page numbers (the magazine signature). Must not contain — subscribe form (link to the marketing landing), preview of the next issue, advert.
Header chrome
The global nav. Logo left, primary nav centre, account / subscribe right. Sticky on scroll, a hairline scroll-shadow appears once content moves underneath. The bar never grows or shrinks – only the shadow changes.
—es-color-paperz-index: 1040 Footer chrome
The lightest element on the page. Cream ground, hairline dividers, three columns of links: issues, secondary nav, social. A copyright line carries the current year and the latest issue number – a small editorial signature.
A footer CTA may be present – the subscribe link – but it must never out-shout the body’s primary action. If the page already converts above the fold, the footer carries a quieter version of the same offer.
Vertical rhythm
Section spacing is the only place where a designer should feel they’re “tuning” the page. Four section-scale tokens, picked by relationship – not by feel.
Below md (768 px) every section-scale collapses one step – xl becomes lg, lg becomes md, and so on. The page stays composed without dragging the reader through three screens of empty cream.
Composition rules
One hero, one primary CTA, one entry point. The reader never has to choose between two competing openings.
Two heroes split the reader’s attention. Demote one to a section header or move it lower down the page.
Body prose stays within --es-container-prose (65ch). Even when a sidebar is present, the body width does not stretch.
Long lines are tiring to read. The grid being wide is no reason to fill it with body text.
A full-bleed image earns its width when it carries the story – a portrait, a place, a cover. Reserve it for moments.
Centred paragraphs stay below 30 ch. Above that the eye loses the start of each line on the return.
Centred copy beyond 30 ch becomes a search exercise. Either left-align it or trim it.
The sticky header stays at one height, with one hairline shadow on scroll. It frames the content without competing.
Headers that fatten on scroll feel like a 2014 brochure site. The chrome is not the experience.
Cream background, small type, hairline dividers. The footer closes the page – it doesn’t try to reopen it.
A footer louder than the page above is a sign the page above didn’t do its job.
Sidebars belong in the member portal and in deep listing views. They serve navigation, not decoration.
Articles read better without distractions. Move related reads, share buttons, and prompts below the end-mark.
Use the --es-grid-margin token. Margins breathe up at desktop and tighten on phones automatically.
Hard-coding a single margin loses the rhythm at every other breakpoint. Always go through the token.
A specimen
A full article page rendered at desktop, with the grid, prose container, and section rhythm called out.
The grid is the score. The shells are the movements. Pick the shell first; let the rest follow from the tokens.