Design system

The system this site runs on.

Not a styleguide that drifts: the swatches are read from the token file at build time, and every block below is the real renderer fed its real defaults from the CMS registry. When the system changes, this page follows — it has no content of its own.

Colour tokens

Surfaces

--surface-page#f6f4ef
--surface-raised#fdfcfa
--surface-sunken#eeebe3
--surface-inverse#171511

Ink

--ink-strong#171511
--ink#2b2822
--ink-muted#605a4e
--ink-faint#8d8677
--ink-inverse#f2efe8

Accent

--accent#cc4b1d
--accent-hover#b23f16
--accent-ink#fff6f1
--accent-softcolor-mix(in srgb, var(--accent) 9%, transparent)

Lines

--linecolor-mix(in srgb, var(--ink-strong) 13%, transparent)
--line-strongcolor-mix(in srgb, var(--ink-strong) 28%, transparent)

Both themes define the same names, so components are theme-unaware — flip the toggle in the header and every swatch above re-resolves. Tailwind’s stock palette is deleted at the theme boundary; if a colour isn’t listed here, no utility for it exists.

Type scale

Fraunces for display, Inter for text, Geist Mono for labels — all variable, all self-hosted. Sizes are fluid clamps, not breakpoints.

Display XL--text-display-xl: clamp(2.85rem, 1.65rem + 5vw, 5.6rem)
Back them up.
Display L--text-display-l: clamp(2.25rem, 1.55rem + 3vw, 4rem)
Research first, then build.
Display M--text-display-m: clamp(1.8rem, 1.4rem + 1.7vw, 2.8rem)
How a project runs
Display S--text-display-s: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem)
The architecture decision
Lede--text-lede: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem)
Before anything gets built, the real problem gets found.

Shape, elevation, motion

Radius

--radius-s

--radius-m

--radius-l

--radius-xl

--radius-pill

Elevation

--shadow-soft

--shadow-raised

Motion

--duration-fast: 140ms
--duration-base: 240ms
--duration-slow: 480ms
--duration-reveal: 700ms
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1)
--ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1)

Scroll reveals honour prefers-reduced-motion and disable entirely without JavaScript.

Primitives

An eyebrow label

The full set is deliberately small — Button, Container, Section, Heading, Eyebrow, Prose, SmartImage. Anything larger is a block.

The block library

Every content block the CMS can place, in registry order. Each specimen is the production renderer fed the same defaults the “Add block” button uses — one source of truth, three consumers: the site, the admin, and this page.

Hero

heromarketingOpening statement for a page: eyebrow, headline, lede, actions.

A headline that earns its size

Article header

articleHeadercontentCase-study opener: title, standfirst, project facts, cover image.

Case study

Untitled case study

A one-paragraph summary that sits under the title and earns the read.

Client: Client name
Role: Design & build

Prose

prosecontentLong-form markdown on the reading measure.

A section heading

Body copy on the reading measure, with emphasis, a link, and room to breathe.

A list item
Another list item

A supporting quotation, when the argument needs one.

Figure

figuremediaA single image with an optional caption.

New contact section with clear CTAs and full footer — Specimen — the first image in the media library.

Gallery

gallerymediaA grid of images with optional captions.

Old contact section with minimal information on dark background

New services page with imagery and detailed cards

Pull quote

quotecontentA large serif quotation with attribution.

A quotation that earns its serif italics — one sentence someone actually said.

Their Name · Their role

Stat row

statscontentA row of large numbers with labels.

98%
First metric: 3×
Second metric: 12
Third metric

Process steps

stepscontentA numbered sequence — how a project runs.

How it works

01
First step
What happens first, in a sentence or two.
02
Second step
What follows, and why it matters.

Project showcase

projectsmarketingCurated project cards with imagery, stack tags and outcome metrics.

Selected work

Stack · Discipline

A project title

One paragraph on what was built and what changed because of it.

2×
Headline result

Page collection

collectioncontentAutomatic listing of pages under a path, from their card metadata.

Specimen

A live collection

Rendered from real published pages under research/ — not fixture data.

UX Research & Usability Testing

Woolworths Mobile

A brief to “show promotions better” became a research-led redesign. Six user interviews, usability testing and three rounds of prototype testing that reached 100% task completion.

100%
Task completion: 6
Interviews: 3
Test rounds

A large annotated decision tree mapping the registration and login logic across Woolworths and Rewards accounts

UX Research & Service Design

One Login

Two accounts customers thought were one, driving thousands of support calls a week. The research, alignment and validation behind a single sign-on for Woolworths and Rewards.

1,000s
Calls targeted: 12
Account states mapped: 2
Releases

Call to action

ctamarketingA full-width banner with one action.

Ready to start your project?

Get in touch

Contact

contactmarketingContact details with an optional enquiry form.

Tell us about your project

Divider

dividerlayoutBreathing room — a rule or plain space between sections.