Hero
heromarketingOpening statement for a page: eyebrow, headline, lede, actions.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, because 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#6f685c
- --ink-inverse#f2efe8
Accent
- --accent#b94218
- --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 and 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-pillElevation
--shadow-soft--shadow-raisedMotion
--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.
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.Gallery
gallerymediaA grid of images with optional captions.Pull quote
quotecontentA large serif quotation with attribution.A quotation that earns its serif italics, one sentence someone actually said.
Stat row
statscontentA row of large numbers with labels.- 98%
- First metric
- 3×
- Second metric
- 12
- Third metric
Process steps
stepscontentA numbered sequence showing 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.
Fox Sports · Product design
Adding live streaming to Fox League and Fox Footy
Live streaming needed to fit alongside scores, stories and the existing sports experience. I mapped the affected journeys, facilitated stakeholder sketching and tested a prototype with eight internal participants before the project was deprioritised.
- Information architecture
- Co-design
- Prototype testing
Read the case study
Kaos · Exploratory research
Exploring trust in a modelling marketplace
An early product exploration examined how models and photographers find work and assess the people they might work with. Research themes, feature comparisons and journey mapping helped frame the questions a new service would need to answer.
- Exploratory research
- Trust
- Journey mapping
Read the case study
Call to action
ctamarketingA full-width banner with one action.Ready to start your project?
Get in touchContact
contactmarketingContact details with an optional enquiry form.Tell us about your project
Profile card
profilemarketingPhoto, short bio, profile links and a resume download.Divider
dividerlayoutBreathing room: a rule or plain space between sections.Chapter navigation
chapterNavlayoutSticky links to chapters in a long case study.Chapter heading
chapterlayoutA numbered chapter with a linkable heading and introduction.Chapter
Supporting detail
disclosurecontentExpandable notes for technical detail or evidence.