Slopless Design

nav.risograph-masthead · Masthead

A nav pattern from Risograph Print, 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.risograph-masthead". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A zine masthead: mono issue line on the left, the boxed wordmark in the middle, an underlined CTA flush right; slash-separated links on the next line and a 4 px ink rule under everything.

Slots

meta, siteName, cta, pages

Grid areas

issue 1-3 · logo 6-7 · cta 11-12 (12-column grid, 1-based inclusive spans)

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 2

Pattern notes

Row one, spread edge to edge: a mono issue/date line on the left (hidden on phones), the boxed wordmark (2 px border) in the middle, an underlined CTA flush right. Row two: slash-separated page links. A 4 px ink rule closes the masthead.

NorthfoldStart a project

Services
/
Work
/
About
/
Contact