Numbered Card

A numbered step or point — an open column under one hairline, not a box. Used for every 01/02/03 list on the site (the services path, the UX audit process, the thank-you next steps) and for case-study points (a problem to solve, an assumption that didn’t hold, a change for next time), authored in Sanity as a “Numbered cards” block. Case studies use the card appearance (a flat tonal card, no index); everything else is open. Styling lives in .card-numbered in globals.css.

Card — case-study points

One product, not four

Add each partner without the portal splitting into separate mini-products.

Keep paying simple

More choice at the payment step can't turn into a slower or harder payment.

Ready for the next one

Build it so the fifth partner costs a fraction of what the first one did.

tsx

<NumberedCard appearance="card" index={1} title="One product, not four" body="…" />

Open — steps

One product, not four

Add each partner without the portal splitting into separate mini-products.

Keep paying simple

More choice at the payment step can't turn into a slower or harder payment.

Ready for the next one

Build it so the fifth partner costs a fraction of what the first one did.

tsx

<NumberedCard index={1} title="One product, not four" body="…" />

Assumption — amber

I assumed what we designed could be built.

Feasibility came back from engineering, not from us. Knowing early beat defending a design that couldn't ship.

I assumed decisions would move at our pace.

Decisions moved at the speed of two organisations agreeing, not at the speed of the design.

tsx

<NumberedCard variant="assumption" index={1} title="…" body="…" />

Change — red

Engineering in the room from the first exploration

I'd have the platform's constraints on the table before the first concept, not after it.

One decision forum across both companies

I'd agree a single joint forum, and who can say yes in it, at kickoff.

tsx

<NumberedCard variant="change" index={1} title="…" body="…" />

Props

Prop	Type	Default	Description
`index`*	`number`	-	1-based position, rendered zero-padded ("01").
`title`*	`string`	-	The point itself, one line.
`body`	`string`	-	A short paragraph expanding the point.
`variant`	`"default" \| "assumption" \| "change"`	`"default"`	Accent blue, orange for “what I assumed”, red for “what I’d change now”. Colours the index in the open appearance, and tints the card fill in the card appearance.
`appearance`	`"open" \| "card"`	`"open"`	Open: a column under one hairline led by its 01/02/03 index, for step lists where the order matters. Card: a flat tonal card with no index, for case-study points — unordered sets the section heading already frames.