list.midcentury-dotted-steps · Dotted steps

A list pattern from Mid-Century Modern, 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.midcentury-dotted-steps". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Three or four steps in one row across the grid: a big orange numeral, a 2px rule, an uppercase title and a short paragraph.
Slots
sectionLabel, title, items[3..4]
Grid areas
header 1-7 · steps 1-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F3E9D6 · text #2B231B · heading #2B231B · accent #C9552A · accent2 #0099BE · League Spartan / Jost · radius 20px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The label and title (step 4) on 1–7. Then three or four steps in one row across 1–12: a big orange numeral (step 5, heaviest weight), a 2 px rule, an uppercase h4 title and a short paragraph. At phone width the steps stack.

Index

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.