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

Key takeaway

Sits at the top of a long-form article as a one-sentence TL;DR. Hairline border, 3px lime left stripe, kicker in lime, body in fg.

padding 24/28 · radius 4px · border 1px rgba(15,42,12,.16) · border-left 3px --earl-lime · kicker 10/500 uppercase

Callout

In-body note for "why this matters now" moments. Hairline border on subtle tint. warn variant adds a 3px lime left stripe; info and note drop it.

padding 24/28 · radius 4px · border 1px rgba(15,42,12,.16) · title 10/500 uppercase in --earl-lime · body 15/450

Pull-quote

Inline editorial quote. Hairline border with 3px lime left stripe. Display type. Attribution underneath is optional.

The contract may use the word ownership. The operating reality will not.
Neil Kent Founder, Earl
padding 28/32 · radius 4px · border 1px hairline · border-left 3px --earl-lime · Funnel clamp(24px, 2.8vw, 34px) / 700

Inline CTA card

Closing CTA inside an article. Distinct from the standalone pill button (above) and the full-width page-end CTA band. Always the last thing in the article. Nothing renders below it.

padding 36 · radius 4px · dark surface · pill button at 100px radius with hairline border

Divider

A pause between sections. Centred 80×1px hairline, 3px lime square sitting 8px above it.

80×1px hairline in --earl-border · 3×3px filled square in --earl-lime 8px above

Figure

Image with caption inside the article body. Image radius --r-md. Caption centred beneath. Images stay within the body column. Never full bleed.

img radius 6px · caption 13/450 in --c-sub · text-align center · margin-top 12px

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