hero.synthwave-chrome-split · Chrome split

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

Rule
The chrome headline block on 1–7; on 8–12 a neon-framed duotone portrait; a cyan triangle points into the gap at 7–8.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage
Grid areas
text 1-7 · pointer 7-8 · frame 8-12 (12-column grid, 1-based inclusive spans)
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 8

Pattern notes

  • Columns 1–7, vertically centred: mono eyebrow, chrome headline at step 6 (max ~12 ch), lead subhead, primary + ghost buttons. A cyan triangle (accent2, rotated 90° so it points right) sits at the top of 7–8 and hides on phone. Columns 8–12: a 3:4 duotone portrait inside a neon frame (surfaceAlt fill, 2 px border, 8 px inner padding).

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