hero.y2k-chrome-ticker-stack · Ticker stack

A hero pattern from Y2K Chrome, 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.y2k-chrome-ticker-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two pixel-font marquee bands (accent, then accent2) sandwich a centred chrome headline at step 8 flanked by sparkle stars, with the lead and pill buttons on 4–9.
Slots
tagline, headline, subhead, cta, cta2, meta
Grid areas
starLeft 1-2 · headline 2-11 · starRight 12-12 · copy 4-9 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Pattern notes

  • Bleed edge to edge. Top: a marquee band in accent with pixel-font uppercase text in onAccent. Middle: a star on 1–2, the headline centred on 2–11 at step 8, weight 700, uppercase, chrome fill, and a smaller star on 12; then the lead centred on 4–9 and a centred row of pill buttons. Bottom: a second marquee in accent2 running the other way. Marquees pause under prefers-reduced-motion. At phone width the stars hide and the headline drops to step 5.
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites

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 projectRead case studies
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