`list.memphis-zigzag-steps` · Zig-zag steps

A list pattern from Memphis, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3. Give the section root data-pattern="list.memphis-zigzag-steps". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule: Steps run down the page as a ladder: a giant accent numeral on 1–3 beside an outlined box on 4–9 whose fill cycles surfaceAlt → accent → accent2, with a small outlined shape on 11–12 cycling triangle, circle, square.
Slots: title, items[3..6]
Grid areas: number 1-3 · box 4-9 · shape 11-12 (12-column grid, 1-based inclusive spans)
Notes: The cycling fills and shapes give each step its own colour; the numerals stay in one column so the steps read in order. At phone width the numeral sits above its box and the shapes hide.
Tokens: bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)

Pattern notes

Title (h2, heaviest weight) first. Then three to six steps with 48 px between them, each on the same ladder: the numeral at step 7, heaviest weight, accent with a 3 px black text outline, on 1–3; an outlined box on 4–9 with the title (h3) and paragraph, its fill cycling surfaceAlt, accent, accent2 (text in the matching on-colour); and a small outlined shape on 11–12 cycling triangle, circle, square, tilted a few degrees. At phone width the numeral sits above its box, left-aligned, and the shapes hide.

Services

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

Positioning workshop

A day with your leadership to agree on one story.

Identity design

Logo, type, colour, motion and a working toolkit.

Website

Strategy, copy, design and build in Webflow or Next.js.