Design system

Two worlds, one system.

This page is built entirely from the tokens and classes that already run the rest of the site. One structural skeleton, two skins: a warm editorial light theme and a dark studio theme. Every colour, shadow and surface below is a variable, not a fixed value, so it switches with the theme toggle in the header.

Colour

Warm Editorial Luxury in light, Dark Studio in dark. Light uses a warm bone paper with pine and brass accents; dark uses near-black surfaces with a single luminous mint accent doing both jobs.

Paper --paper · #f6f2ea
Paper deep --paper-deep · #efe9dd
Surface --surface · #fffdf8
Ink --ink · #221d17
Ink soft --ink-soft · #5b5346
Ink faint --ink-faint · #8a8272
Accent, pine --accent · #1f5c4d
Accent 2, brass --accent-2 · #a9772f
Border --border · #e0d8c8

Dark equivalents (same tokens, resolved under data-theme="dark"): Paper#0c0d10, Paper deep#111318, Surfacergba(255,255,255,.03), Ink#e9eaee, Ink soft#9aa0a8, Ink faint#7b818a, Accent, mint#5fd4b4, Accent 2, mint#5fd4b4, Borderrgba(255,255,255,.08).

Type

Two families only. Fraunces (serif display) carries headings, folios, pull quotes and big statistics. Geist (sans) carries body and UI text. An italic word inside a heading takes the accent colour, the one recurring signature move.

Where did that number come from? Hero headline · Fraunces · clamp(2.4rem, 5.4vw, 4.5rem)
Where did that number come from? H1 · Fraunces · clamp(2rem, 5vw, 2.9rem)
Where did that number come from? H2 · Fraunces · clamp(1.5rem, 3vw, 2.2rem)
Where did that number come from? H3 · Fraunces · 1.25rem
A vendor's number is a starting point, not an answer. Lead · Geist · 1.2rem / 1.6
A vendor's number is a starting point, not an answer. Body · Geist · 1.05rem / 1.65
A vendor's number is a starting point, not an answer. Meta · Geist · 0.78rem
A vendor's number is a starting point, not an answer. Eyebrow / pill label · Geist · 0.72rem, uppercase

The signature: an ordinary heading with one italic word in it.

Editorial marks

Three small pieces of furniture give every page a print-magazine rhythm: the eyebrow, the kicker, and the pull quote.

Eyebrow

Uppercase brass label with a leading rule. Opens a page or intro block.

Section kicker

Italic folio with a fading rule. Opens a section.

Backup is a copy. DR is a capability.

Italic Fraunces pull quote with an accent left border.

Buttons

Fully rounded pills. Primary is a solid fill with a circular arrow disc; secondary is a hairline outline that borrows the accent on hover.

Primary action Secondary action
Badges

The pill marks a category on a card. The tag is a neutral chip for topics or a tech stack; on a post page a linked tag carries a small accent dot.

Category pill
Cards

The signature surface. In light, a double bezel: a recessed paper shell wrapping an inset cream core. In dark, the shell disappears and the core becomes a single glass card. One markup, the difference is entirely tokens.

Specimen

Card title sits in Fraunces

Card meta, 19 Jul 2026
Stats

The track-record statistic: a big Fraunces figure, a short brass tick above it, and a caption below in small caps.

17+ Years, EMEA & GCC
£35M Portfolio across 5 brands
411K Transactions in production
2 Themes, one skeleton
Spacing, radii, elevation

Spacing

  • Gutter (--pad) clamp(1.25rem, 4vw, 2.5rem)
  • Section rhythm clamp(4rem, 8vw, 7rem)
  • Page intro clamp(7rem, 11vw, 9.5rem)
  • Card gap 1.6rem
  • Actions gap 1rem

Radii

  • Pill / button 999px
  • Card shell (light) 20px
  • Card core (light) / card (dark) 15px / 18px
  • Media frame, CTA block 16px / 20px
  • Focus outline 4px

Elevation

  • Shadow Soft, long, low-opacity resting shadow beneath cards and the CTA block.
  • Shadow, hover Deepens on hover or lift; dark theme adds a faint mint ring.
  • Button shadow A coloured shadow under the primary button, tinted pine or mint.
Motion

One easing curve runs the whole site, cubic-bezier(0.32, 0.72, 0, 1), a fast-out, long-settle feel used on every hover and press. Cards and buttons lift a few pixels on hover; the primary button dips slightly on press.

Content reveals on scroll by un-blurring and rising into place, staggered a little per element, the same effect used to bring in each section on this page. It is disabled entirely under prefers-reduced-motion.