list.seventies-rainbow-steps · Rainbow steps

A list pattern from Seventies Psychedelic, 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="list.seventies-rainbow-steps". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Steps as rows, each opened by a wavy rule: an orange dot in column 1, a fat numeral 2–3, the title 4–7, the paragraph 8–12.
Slots
title, items[3..5]
Grid areas
dot 1-1 · number 2-3 · title 4-7 · body 8-12 (12-column grid, 1-based inclusive spans)
Notes
The 8 px divider above each step is drawn as the style's wavy rule; there are no straight rules between steps.
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The title tilted −3° at step 5, then steps as rows, each opened by a wavy divider: an orange dot in column 1, a fat numeral (step 6, orange link colour) in 2–3, the title in 4–7 and the paragraph in 8–12, vertically centred.

Services

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

Positioning workshop

A day with your leadership to agree on one story.

03

Identity design

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

04

Website

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