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: Signal light and Signal dark. Every colour, shadow and surface below is a variable, not a fixed value, so it switches with the theme toggle in the header.

Colour

Signal light, Signal dark. Light uses a clean cool-white paper with a cobalt and coral accent pair; dark uses a deep navy surface with a text-safe cobalt and a sun-yellow accent doing the second job.

Paper --paper · #f7f8fc
Paper deep --paper-deep · #eef0f8
Surface --surface · #ffffff
Ink --ink · #0d1030
Ink soft --ink-soft · #3b3f63
Ink faint --ink-faint · #5a5e80
Accent, cobalt --accent · #2d4bff
Accent 2, coral --accent-2 · #c2381f
Border --border · #dde0ee

Dark equivalents (same tokens, resolved under data-theme="dark"): Paper#0d1030, Paper deep#121640, Surface#161a46, Ink#eef0ff, Ink soft#c9ccf0, Ink faint#9ca1c8, Accent, cobalt#8a9bff, Accent 2, sun#ffd23f, Borderrgba(255,255,255,.10).

Type

Two families only. Space Grotesk (display) carries headings, pull quotes and big statistics, set bold and tight. Inter (sans) carries body and UI text. A marked word inside a heading takes the accent colour, the one recurring signature move.

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

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

Editorial marks

Three small pieces of furniture recur on every page: the eyebrow, the kicker and the pull quote.

Eyebrow

Uppercase sun pill with ink text. Opens a page or intro block.

Section kicker

The same sun pill. Opens a section.

Backup is a copy. DR is a capability.

Bold Space Grotesk 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

One flat surface with a 24px radius, a soft shadow and no border. White in light, deep navy in dark. A featured card goes solid cobalt with white text and a coral circle bleeding off one corner.

Specimen

Card title sits in Space Grotesk

Card meta, 19 Jul 2026
Stats

The track-record statistic: a big Space Grotesk figure on a flat card, with an uppercase caption below.

18 Years, UK & GCC
10 Years owning pricing and portfolio
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 24px
  • Stat card, CTA block 20px
  • Media frame 16px
  • 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 cobalt ring.
  • Button shadow A coloured shadow under the primary button, tinted cobalt.
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.