Style guide

The design tokens and components this site is built from. Internal reference — not indexed, and not linked from the site.

Colour

Transcribed from the Webflow :root. Defined once in globals.css under @theme — never hardcoded in a component.

brand-coral
--main-100 · primary
brand-coral-button
what the live buttons render
brand-coral-hover
primary, hover
brand-forest
--green-110 · footer
brand-teal-900
--green-100 · nav, dark bands
brand-teal-700
--green-90
brand-teal-500
--green-80 · hero panel
surface-azure
tinted sections
surface-mint
nav links
surface-rule
hairlines
ink
headings
ink-body
body copy
ink-muted
secondary copy
ink-meta
meta text

Type

Raleway for headings and UI, self-hosted via next/font; body copy is the system UI font stack. Sizes are fluid; the desktop values match the original.

text-display: Display — hero
text-h1: Heading 1
text-h2: Heading 2
text-h3: Heading 3
text-h4: Heading 4
text-lead: Lead paragraph
text-body: Body copy
text-eyebrow: Eyebrow

Buttons

Two families, deliberately. The hero/section CTAs are pills from the "Walsh" template; the nav CTAs are 8px-radius rectangles from Untitled UI. The original uses both, so both are reproduced.

Section CTAs

Nav CTAs

Job Board Hire A Trainee

Accordion

Native <details>, so it opens without JavaScript. Questions are real headings and the list emits FAQPage structured data — the original does neither.

Is this the real component?

Yes — the same component the hire pages and about page use, so this page cannot drift from what ships.

Why is schema disabled here?

FAQPage structured data on a style guide would describe questions no visitor asked. The prop exists for exactly this case.

Layout

container-site: 80rem — the standard page width
container-medium: 64rem — article-width sections
container-small: 48rem — long-form reading width
padding-global: 1.25rem, 2.5rem from 768px
section-sm / md / lg: 2/3rem · 3/5rem · 4/8rem vertical rhythm
Breakpoints: 480 / 768 / 992 / 1280 / 1440 — pinned to Webflow's