hero.sport-ticker-split · Ticker split

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.sport-ticker-split". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Marquee tickers above and below; between them an accent2 block in 1–5 with eyebrow, a stacked italic headline and the CTA, beside a full-height photo filling 6–12.
Slots
tagline, eyebrow, headline, subhead, cta, heroImage, meta
Grid areas
block 1-5 · photo 6-12 (12-column grid, 1-based inclusive spans)
Notes
Tickers read like a live scoreboard (results, dates); they stop under prefers-reduced-motion.
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
full-bleed · vertical padding step 0

Pattern notes

  • Full-bleed. An accent ticker (h3 size, onAccent) on top. Then, at ≥80 vh: an accent2 block in 1–5 with the eyebrow at the top, the headline at step 7 (≤8 ch, so it stacks into two or three words per line) in the middle and the subhead plus a secondary button at the bottom, all onAccent2; a photo filling 6–12 edge to edge. A second ticker (label size) at the bottom running the other way.
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites

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 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026