hero.risograph-zine-spread · Zine spread

A hero pattern from Risograph Print, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.risograph-zine-spread". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
An opened zine: the left page (1–6) holds a giant issue number and the uppercase headline; a vertical rule in column 7 is the spine; the right page (8–12) holds a duotone 3:4 photo, subhead and CTA.
Slots
index, headline, meta, heroImage, subhead, cta
Grid areas
left 1-6 · spine 7-7 · right 8-12 (12-column grid, 1-based inclusive spans)
Notes
Both pages are the same height; the issue number is in the link colour at step 8. The spine hides at phone width and the pages stack.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF48B0 · accent2 #00B790 · Bricolage Grotesque / Work Sans · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • An open zine: left page 1–6 holds the issue number (step 8, link colour), the uppercase h1 (step 6, ≤12 ch) and a mono meta line, spaced top to bottom; column 7 holds a 2 px vertical rule as the spine; the right page 8–12 holds a duotone 3:4 photograph, the subhead and a secondary button. Both pages are the same height. Phone: the spine hides, pages stack.

06

We make complicated companies simple to choose

Booking projects from June 2026

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project