Slopless Design

nav.editorial-magazine-masthead · Masthead

A nav pattern from Editorial Magazine, drawn alone below with this design's tokens and sample copy. Used in this design on: every page, as the nav. Give the section root data-pattern="nav.editorial-magazine-masthead". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A three-part top line (date 1–3, nameplate 4–9, subscribe link 10–12), then the section links in one line between two hairlines.

Slots

meta, siteName, cta, pages

Grid areas

date 1-4 · nameplate 5-8 · subscribe 9-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #9B2234 · accent2 #D26F74 · Playfair Display / Source Serif 4 · radius 0px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

Top line: the date or issue in small uppercase on 1–4 (one line); the nameplate (wordmark in the display serif, large, centred in its span — the one centred element of the style) on 5–8; an underlined "Subscribe" link right-aligned on 9–12. Below: a hairline, the section links in small uppercase tracked body face in one row, and a second hairline (a double rule). At phone width the date hides and the links scroll horizontally.

Northfold

Start a project

Services
Work
About
Contact