hero.type-ticker · Ticker type bands

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.type-ticker". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A slim intro row (h1 at step 3 in 1–6, subhead 7–10, CTA 11–12) above three full-bleed marquee bands of huge type: an accent band, a plain band and a surface band, alternating direction.
Slots
headline, subhead, cta, tagline, statement, meta
Grid areas
headline 1-6 · subhead 7-10 · cta 11-12 · bands full (12-column grid, 1-based inclusive spans)
Notes
The h1 is the small intro line (real heading for SEO and screen readers); the bands are aria-hidden decoration repeating 3–6 short phrases. Bands scroll in alternating directions at different speeds; pause on hover and stop entirely 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

Do

  • Keep the real h1 small (step 3) in the intro row; the marquee bands are decorative and aria-hidden.
  • Run three full-bleed bands: accent (onAccent text), page colour, surface — in that order.
  • Alternate band direction and vary speed (e.g. 40 s, 55 s, 70 s per loop).
  • Pause the bands on hover and stop them under prefers-reduced-motion (show them static).

Don't

  • Don't put links or the only copy of important information in a band.
  • Don't run more than three bands or use more than six phrases per band.
  • Don't animate anything else in the hero.

Phone width

  • Stack the intro row: h1, subhead, full-width CTA.
  • Keep the bands full-bleed and scale their type to step 5–6.

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
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.We work with a few clients a year, deeply, and stay on after launch.Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.We work with a few clients a year, deeply, and stay on after launch.Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.We work with a few clients a year, deeply, and stay on after launch.Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.We work with a few clients a year, deeply, and stay on after launch.
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