COLOUR

A dark green room, lit with clay.

Most of the site sits on a deep green. Paper carries the words, and a single warm orange does the pointing — so when something is orange, it is worth looking at. These are the exact values the site and the logo are drawn with. Select any hex to copy it.

The mark

The five colours the logo is drawn with. Nothing else appears in the artwork.

ClayThe letter faces.

CocoaShading inside each letter.

TealThe cursor.

InkThe extruded shadow.

PaperThe outline around every piece.

Core interface

What the site is built from. Night carries most pages, with paper and orange doing the talking.

NightThe page ground on every branded page.

InkBody text on light panels.

PanelCards sitting on night.

Panel deepFull-width bands between sections.

Panel raisedA card lifted above another card.

PaperText on night, and light cards.

MutedSecondary text on night.

OrangePrimary buttons and links.

AccentThe highlighted half of a headline.

LabelSmall capitalised section labels.

Light grounds

Used full-width or as large panels to break up a run of dark sections.

ShellThe contact block and offer panel.

OatThe process section.

MossQuieter light panels.

SandSmall inset notes.

Project tones

One per portfolio piece, behind the laptop in each preview. They tint, they do not brand.

Clay toneVanosTuning.

Sage toneLet’s Strutt.

Sand toneMarket Cars.

Mint toneTextTheCaller.

Reading it

The combinations the site relies on, with their WCAG contrast ratio. Anything at 4.5 or above is safe for body text; 3.0 and above is fine for large headings only.
Pairing	Sample	Ratio	Body text
Paper on night Body copy on every dark page.	The quick brown fox	15.5:1	Passes AA
Muted on night Secondary copy and captions.	The quick brown fox	9.3:1	Passes AA
Accent on night The highlighted half of a headline.	The quick brown fox	8.4:1	Passes AA
Label on night Small capitalised labels.	The quick brown fox	7.7:1	Passes AA
Night on orange Primary button text.	The quick brown fox	5.1:1	Passes AA
Ink on shell Body copy on light panels.	The quick brown fox	13.3:1	Passes AA

The logo’s clay is #C57C4C and the interface orange is #C67C4C — one value apart, from the artwork and the stylesheet being picked separately. They are close enough to sit together, but use the interface value for anything on screen.