list.neobrutal-checklist · Checklist

A list pattern from Neo-Brutalism, 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.neobrutal-checklist". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Intro block on 1–5; on 6–12 a stack of separate bordered rows, each with a filled checkbox square, a bold title and a mono tag.
Slots
sectionLabel, title, body, cta, items[4..7]
Grid areas
intro 1-5 · rows 6-12 (12-column grid, 1-based inclusive spans)
Notes
Rows are separate bordered boxes with a gap, not a ruled table. The checkbox is a filled square in accent2.
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Columns 1–5: eyebrow, h2 (step 4), a short paragraph and a primary button. Columns 6–12: 4–7 separate bordered rows with gaps between them; each row holds a filled accent2 square (the checkbox), a bold h4 title with a small line under it, and a mono tag on the right (hidden on phone). Works for menus, feature lists and agendas.

Index

Services

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

2 weeks

Positioning workshop

A day with your leadership to agree on one story.

1 day

Identity design

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

8 weeks

Website

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

10 weeks

Launch support

Training, templates and a month of on-call design.

4 weeks