list.isometric-spec-table · Isometric spec table

A list pattern from Isometric Line, 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.isometric-spec-table". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Dense explainer: title in 1–6 and a line in 7–12; a 4:3 drawing in a hairline frame in 1–5 beside six to eight spec cells in a ruled two-column grid across 6–12.
Slots
label, title, body, diagram, items[6..8]
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • The dense explainer. Mono label and h2 at step 5 in 1–6, a muted line in 7–12. Then a framed 4:3 drawing in 1–5, vertically centred beside six or eight spec cells (20 × 16 px padding) in a ruled two-column grid across 6–12: mono number and mono meta on one row, title at step 1, a muted line.

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.

01

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

1 day

Positioning workshop

A day with your leadership to agree on one story.

03

8 weeks

Identity design

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

04

10 weeks

Website

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

05

4 weeks

Launch support

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

06

Ongoing

Retainer

A senior designer embedded two days a week.