hero.athletic-starting-line · Starting line

A hero pattern from Athletic Sport, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.athletic-starting-line". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Bottom-anchored: lane numbers run across the top, then the eyebrow, a step-8 italic headline, two stripes (8 px and 2 px) and a base line with subhead 1–5, CTA 7–9 and meta 10–12.
Slots
items[4..8], eyebrow, headline, subhead, cta, meta
Grid areas
subhead 1-5 · cta 7-9 · meta 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • At least 85 vh, content anchored to the bottom. At the top, a row of four to eight lane numbers (mono italic, each with a 4 px left rule). At the bottom: the italic caps eyebrow in the link colour, the headline at step 8 (≤12 ch), an 8 px stripe and a 2 px stripe, then the base line — subhead in 1–5, a large primary button in 7–9, an italic caps meta right-aligned in 10–12.

01

02

03

04

05

06

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026