hero.synthwave-vhs-tape · VHS tape

A hero pattern from Synthwave Retro-Future, 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.synthwave-vhs-tape". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A VHS readout row (REC dot and timecode in mono) over a full-width 16:9 video in a neon frame; the chrome headline on 1–8 and the action on 9–12 below; a marquee tape label closes it.
Slots
meta, eyebrow, heroImage, headline, subhead, cta, tagline
Grid areas
readout 1-12 · video 1-12 · headline 1-8 · action 9-12 · tape full (12-column grid, 1-based inclusive spans)
Notes
Overlay faint scanlines (2 px repeating gradient at 6% opacity) on the video; the REC dot pulses unless reduced motion is set.
Tokens
bg #0E0B1F · text #EDE6FF · heading #FFFFFF · accent #FE2D6D · accent2 #00A59F · Orbitron / Space Grotesk · radius 2px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A readout row: "● REC" in mono link colour on the left, a mono timecode/tape speed in muted on the right. Then a full-width 16:9 video (or still) in a 2 px neon frame with scanlines. Below: the chrome headline (h1, step 5) on 1–8 and, bottom-aligned on 9–12, a small subhead and a primary button. A full-bleed marquee tape label in accent2 closes the hero.

Booking projects from June 2026

Brand & product studio

● 0:42

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