Components

Canonical surfaces lifted directly from the design system. Specimens here are static. Treat them as the reference, copy the markup into production code.

Pill buttons

Every CTA is a pill at border-radius: 100px, Funnel Display 17/500. Lime fill on dark surfaces. Dark fill on lime surfaces. Hover lifts 2px and casts a long soft shadow.

Start a conversation
Work with Earl
15px / 30px padding · 17/500 · radius 100px

Nav CTA

A smaller variant for the nav bar. Lime fill, 12/24 padding, 16/500.

Start with Earl
12px / 24px padding · 16/500 · radius 100px · min-height 44px

Tag pills

Category and status tags for news cards. 6/14 padding, 10/500, 0.2em letter-spacing, uppercase.

PR Sport AI Financial AI Labs
Background uses the category accent at 14% alpha · text uses the accent at full

Eyebrow label

Section kicker. 11/500 with 0.22em letter-spacing, uppercase, prefixed with a 20px hairline. Sits above an H2.

What we do Who we serve Why now
font-size 11px · tracking 0.22em · prefixed by 20×1px line in currentColor

Stat block

Three columns separated by 1px hairlines. Number is Funnel Display 64/800. Label is 10/500 uppercase at 55% alpha.

10×
Return on investment
22%
Lift in non-matchday revenue
£3.6m
Year 1 value
3-column grid · hairline 1px rgba(15,42,12,.16)

Pillar card

The "What we do" card. Hairline border, oversized faded number, small uppercase tag, bold display heading, 13.5px body at 60% alpha.

01
Embedded AI

Using AI
to gain the edge.

We build AI tools and systems that sit inside your commercial stack, integrated with your sales, marketing and comms teams.

padding 32 · radius 4px · border 1px rgba(15,42,12,.16) · pillar-num 54/800 at 16% alpha

Trusted by

A row of partner logos with a short kicker. Sits on a lime panel inside the hero, or stacked compactly on mobile. Logos are mono and inherit the surface foreground.

Built with experience

PARTNER ONE PARTNER TWO PARTNER THREE
Logo SVGs sit at 36px height inline, 24px in the compact mobile variant

Spacing rhythm

Page padding and section rhythm tokens. Mobile values come into play under 768px.

--pad-x-mob24px
--pad-x52px
--section-pad-mob80px
--section-pad128px
--section-pad-lg160px
grid gap (cards)24px
grid gap (mission)80px
--max-w1200px

Corner radii

Six radius tokens. Pills are reserved for buttons, never used on cards or fields.

card · 3px · --r-xs
tinted · 4px · --r-sm
image · 6px · --r-md
field · 8px · --r-lg
nav, card · 12px · --r-card
button · 100px · --r-pill