Catalyst Systems · Design System

One clear line, through the noise.

Everything you need to build the Catalyst website — the mark and its assets, the palette, the type system, and the components, all from a single source of truth.

02

Color

A warm terracotta on a cool slate ground — deliberately not a tech palette. Cool does the work; one warm point is the payoff. No teal, no blue-purple, no gradients.

Base
#15171A
--c-base
Surface
#1C2025
--c-surface
Signal · text
#EEF0F2
--c-signal
Slate · faint
#383F47
--c-slate-deep
Slate · field
#535C66
--c-slate
Slate · bright
#7C8791
--c-subtle
Terracotta · accent
#E86A33
--c-accent
Ember-ink
#A8431A
--c-accent-ink
Muted · text
#AEB6BD
--c-muted
03

Typography

Display & gravity
Fraunces

High-contrast serif for headlines and the editorial voice. Use roman for weight; italic terracotta for the turn of phrase.

Wordmark & UI
Manrope

Clean modern sans for the wordmark, UI, and body. Medium weight, slightly tight tracking.

DisplayFraunces · clamp 48–84px
Your best people carry what the organisation can't.
LeadFraunces · 24–34px
We move it into a system that remembers what happened, and learns what matters.
H2Manrope 700 · 30–40px

Intelligence as infrastructure

BodyManrope 400 · 18px / 1.6

The history and context that run your business live in people's heads. Catalyst moves it into a system that remembers what happened, learns what matters, and gives every decision better evidence.

EyebrowManrope 700 · 13px · .28em
Intelligence as infrastructure
04

Spacing, radius & elevation

Spacing scale
Radius
8
12
16
pill
Elevation
shadow-1
shadow-2
shadow-3
05

Components

Buttons
Badges
New Beta Intelligence as infrastructure
Form field
We'll only use this to book your first call.
Card

Remembers what happened

A surface for content, with a subtle lift on hover. Built from .card + .card--hover.

06

Visual language

The mark is a system, not a one-off. Three primitives — broken dashes (fragments), the solid throughline (Clearly), and the warm point (the human) — recombine to picture every idea in the story. Reuse them in decks and on the site. Click any diagram to download its SVG — they live in brand/concepts/.

A clear path back

Relief — being capable shouldn't mean carrying everything.

Remembers · learns · routes

The structure becomes a system that sharpens.

Clearly

The mark — one clear line through it all.

People forget

Fragments fade until the memory is gone.

The bottleneck

Everything lands on one overloaded head.

Fragmented vs connected

Scattered pieces against one line.

Memory holds

The throughline runs through the gaps.

The load lifts

The weight comes off the point.

Signal through noise

One bold line through a busy field.

Sharper over time

Each pass cleaner, brighter, longer.

Evidence everywhere

Carries what matters to every decision.

Everyone on one line

Many resolve onto one shared line.

It compounds

Value grows the further it runs.

07

Patterns

Compositions assembled from the system — drop-in for the site.

Intelligence as infrastructure
Your best people carry what the organisation can't. We make sure it can.

The history and context that run your business live in people's heads. Catalyst moves it into a system that learns what matters.

The shift

See everything. Clearly.

The same system on a light surface — the mark switches to ember-ink so the warm point still holds its contrast.