Skip to content
SloplessTry the picker

Base style · 1970s-1980s · balanced

Synthwave Retro-Future

An 80s night drive: neon pink and cyan on deep indigo, a striped sun sinking into a perspective grid horizon, chrome capitals and arcade-style scoreboards in mono.

Moods
retro, futuristic, bold, playful
Suits
music, gaming, events, media, agency, ai
Type
Orbitron + Space Grotesk

Principles

  • Stage every key screen on the horizon: a striped sun sinking into a perspective grid floor
  • Centre the big moments symmetrically, like a cassette inlay; supporting content sits in neon-outlined frames
  • Set headlines in wide upright display capitals with a chrome or neon gradient fill
  • Glow, don't shadow: neon lines are 2 px with a coloured outer glow on deep indigo
  • Use mono for every number, date, time and label, set like an arcade readout

Hard rules

  • No white backgrounds in the base and dark variants; no flat grey UI.
  • No soft drop shadows, no glass blur, no rounded cards over 4 px radius.
  • No lowercase display headlines, no serif type, no thin weights in headlines.
  • No more than two neon colours on one screen (accent + accent2); purple borders don't count.
  • No photography without the duotone treatment; no stock "neon city" clichés with visible text.
  • No body copy in the display face; body stays in the body sans at 17 px.

Full page preview with sample copy, rendered from the same tokens and layout the agent receives.

For coding agents

Rules and live patterns

Every pattern Synthwave Retro-Future owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.

Do

  • Use the dark palette as the default: `bg` (deep indigo) for pages, `surface`/`surfaceAlt` for framed panels and bands, `accent` (neon pink) and `accent2` (cyan) for lines, sun, buttons and glow.
  • Draw the horizon motif in at least the hero and one more section: a half-circle sun with 4–6 horizontal stripes cut out of its lower half (bg colour), resting on a perspective grid floor (lines in accent and accent2, converging to a vanishing point at the sun's centre).
  • Set display headlines in the heading face, uppercase, upright, at its heaviest weight, with a chrome fill: `background: linear-gradient(180deg, #FFFFFF 0%, var(--accent2) 48%, var(--surfaceAlt) 50%, var(--accent) 100%); -webkit-background-clip: text; color: transparent;` plus a solid `heading` fallback.
  • Outline frames with a 2 px border in `border` (purple) or `accent`, radius 2 px, and a glow: `box-shadow: 0 0 0 1px var(--accent), 0 0 24px -4px var(--accent)`.
  • Set every number, date, time, score, price and small label in the mono face, uppercase, tracking wide — like an arcade or VCR readout.
  • Centre the hero, the CTA and scoreboards symmetrically on the grid; lists, forms and tracklists stay flush left inside their frames.
  • Treat photos as duotone (accent2 shadows, accent highlights) with faint scanlines (2 px repeating gradient at 6% opacity).
  • Animate with intent: the grid floor scrolls toward the viewer, the sun's stripes drift, buttons glow brighter on hover (240 ms). Under `prefers-reduced-motion`, freeze everything and keep the glow.
  • At 375 px keep the sun and grid floor in the hero (scaled down), keep headlines uppercase at step 4 minimum, and stack framed panels full width.

Don't

  • No white backgrounds in the base and dark variants; no flat grey UI.
  • No soft drop shadows, no glass blur, no rounded cards over 4 px radius.
  • No lowercase display headlines, no serif type, no thin weights in headlines.
  • No more than two neon colours on one screen (accent + accent2); purple borders don't count.
  • No photography without the duotone treatment; no stock "neon city" clichés with visible text.
  • No body copy in the display face; body stays in the body sans at 17 px.
  • No glow on body text — glow is for lines, frames, buttons and the sun.
  • No three plain cards in a row; plan cards are "level select" frames with mono tags, features are cassette cards two per row.

Heroes (4)

Sunset horizon

hero.synthwave-sunset-horizon · hero

Rule
Symmetric poster: the centred text stack (eyebrow, chrome headline, subhead, buttons) on top, then a striped neon sun on the centre columns 4–9, sinking into a full-width perspective grid floor.
Slots
eyebrow, headline, subhead, cta, cta2
Grid
title 1-12 · sun 4-9 · floor 1-12
Notes
Text never sits on the sun. The accent sun (~320 px circle) sinks half behind the floor: a 2 px accent horizon, then cyan lines whose spacing grows toward the viewer, crossed by border-colour verticals converging on the sun. Cut 4–6 bg stripes through the visible sun. Phone keeps the composition, scaled.

Full-bleed, symmetric, read top to bottom like a poster. Row 1: the text stack centred across 1–12: mono eyebrow (link colour), chrome headline at step 7 (max ~14 ch), lead subhead (max 48 ch), and a centred row of a large glowing primary button and a large outlined secondary button. Row 2: the sun (accent circle, ~320 px) centred, its lower half hidden behind the floor so it sinks into the horizon. The floor starts with a 2 px accent horizon line, then 2 px cyan (accent2) lines whose spacing grows toward the viewer (about 40, 48, 64, 80, 96, 128 px), crossed lower down by border-colour verticals (in the build, converge them on the sun's centre). Cut 4–6 bg-coloured stripes through the visible half of the sun. Text never sits on the sun. Phone keeps the same composition, scaled (sun ~190 px).

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
Desktop

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
Phone, 390 px

Arcade cabinet

hero.synthwave-arcade-cabinet · hero

Rule
A neon-outlined cabinet panel on 2–11 holds a three-score readout, the chrome headline, the subhead and a PRESS START button; vertical mono labels run up columns 1 and 12.
Slots
eyebrow, meta, stats[3..3], headline, subhead, cta
Grid
left 1-1 · cabinet 2-11 · right 12-12
Notes
The cabinet border is 2 px accent with an accent glow; the score figures are mono at step 2. The PRESS START button may blink (1 s steps) unless reduced motion is set.

A neon-outlined cabinet (surface fill, 2 px accent border + glow) on 2–11 holds: three score readouts in a row (mono label over a mono figure at step 2, centred), a 2 px neon rule, the chrome headline at step 6 (centred), the body subhead centred, and a large primary "press start" button. Vertical mono labels run up column 1 (rotated −90°) and down column 12 (rotated 90°) in the link colour; both hide on phone.

Brand & product studio

launches shipped

140+

years independent

12

clients return

9 of 10

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 2026

Desktop

launches shipped

140+

years independent

12

clients return

9 of 10

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
Phone, 390 px

Chrome split

hero.synthwave-chrome-split · hero

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
text 1-7 · pointer 7-8 · frame 8-12

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
Desktop

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
Phone, 390 px

VHS tape

hero.synthwave-vhs-tape · hero

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
readout 1-12 · video 1-12 · headline 1-8 · action 9-12 · tape full
Notes
Overlay faint scanlines (2 px repeating gradient at 6% opacity) on the video; the REC dot pulses unless reduced motion is set.

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
Desktop

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
Phone, 390 px

Navigation (2)

Content blocks (12)

Cassette grid

features.synthwave-cassette-grid · features

Rule
A centred mono label and chrome title, then features as neon-outlined cassette cards two per row: side/track label and a reel dot, a neon rule, the title and a line.
Slots
sectionLabel, title, features[4..6]
Grid
header 1-12 · cassettes 1-12

A centred mono label and chrome h2 (step 4). Then 4–6 cassette cards two per row: neon-outlined surface panels with a top row of a mono side/track label ("SIDE A · 01") and a small cyan reel dot, a 1 px rule, an uppercase h3 (700) and a muted small paragraph.

What you get

What we do

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

05

Product naming

Names that survive trademark search and a noisy trade show.

06

Brand governance

Guidelines as a living site, not a forgotten PDF.

Desktop

What you get

What we do

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

05

Product naming

Names that survive trademark search and a noisy trade show.

06

Brand governance

Guidelines as a living site, not a forgotten PDF.

Phone, 390 px

Tracklist

list.synthwave-tracklist · list

Rule
A square duotone cover with the label and title on 1–4; the tracklist on 6–12: mono number, uppercase title and mono duration per ruled row.
Slots
sectionLabel, title, image, items[5..10]
Grid
cover 1-4 · tracks 6-12

Columns 1–4: mono label, chrome h2, and a square duotone cover in a neon frame. Columns 6–12: 5–10 ruled rows, each with a mono number (link colour), the uppercase track title (h4, 700) and a mono duration (muted) right-aligned. Works as a menu or agenda too.

Index

Services

01

Discovery sprint

2 weeks

02

Positioning workshop

1 day

03

Identity design

8 weeks

04

Website

10 weeks

05

Launch support

4 weeks

06

Retainer

Ongoing

Desktop

Index

Services

01

Discovery sprint

2 weeks

02

Positioning workshop

1 day

03

Identity design

8 weeks

04

Website

10 weeks

05

Launch support

4 weeks

06

Retainer

Ongoing

Phone, 390 px

Hi-score board

stats.synthwave-hiscore-board · stats

Rule
A centred neon-outlined scoreboard on 3–10: HIGH SCORES title, then ranked rows of rank, name and a right-aligned mono score.
Slots
title, stats[3..5]
Grid
board 3-10 · rank 1-2 · name 3-8 · score 9-12
Notes
Rows inside the board use their own 12-column grid. The first row's score may glow in accent.

A neon-outlined board centred on 3–10: a chrome "high scores" h3 centred, then 3–5 ruled rows, each one line on every width: the mono rank/tag (link colour) stacked over the mono name on the left, the mono score right-aligned at step 3. The top score may glow.

Twelve years in numbers

Since 2014

launches shipped

140+

2025

years independent

12

Audited

clients return

9 of 10

Last 12 months

average lift in demo requests

31%

Desktop

Twelve years in numbers

Since 2014

launches shipped

140+

2025

years independent

12

Audited

clients return

9 of 10

Last 12 months

average lift in demo requests

31%

Phone, 390 px

CRT wall

gallery.synthwave-crt-wall · gallery

Rule
A chrome title, then a wall of neon-framed duotone screens four per row, each with a mono channel label.
Slots
title, items[4..8]
Grid
title 1-12 · wall 1-12
Notes
Add scanlines and a faint vignette to each screen; on hover a screen flickers once (not under reduced motion).

A chrome h2, then 4–8 screens four per row: each a 4:3 duotone image inside a surfaceAlt frame with a 2 px border, scanlines and a vignette, and a muted mono channel label under it ("CH 03").

Selected work

Corvid Robotics — identity

Fieldstack — website

Tidewater Labs — naming

Arklow — trade show

Desktop

Selected work

Corvid Robotics — identity

Fieldstack — website

Tidewater Labs — naming

Arklow — trade show

Phone, 390 px

Transmission

testimonial.synthwave-transmission · testimonial

Rule
A neon-outlined panel on 2–11: an INCOMING TRANSMISSION mono header with a pulsing dot, the quote in caps, a rule, then the sender in mono.
Slots
sectionLabel, quote, author, role
Grid
panel 2-11

A neon-outlined panel on 2–11: a header row with "incoming transmission" in mono link colour and a pulsing accent dot, the quote in uppercase at step 3 (max 40 ch), a 1 px rule, then a row with the sender's name and role in mono.

Kind words

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Desktop

Kind words

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Phone, 390 px

Insert coin

cta.synthwave-insert-coin · cta

Rule
Centred on an indigo band: a blinking INSERT COIN label, the chrome headline, a large glowing button, then the perspective grid floor runs to the band's edges.
Slots
eyebrow, headline, cta
Grid
stack full

A full-bleed surfaceAlt band, centred: a blinking mono "insert coin" label (link colour), the chrome h2 at step 5, a large glowing primary button with arrow, then the grid floor (accent horizon, cyan lines widening toward the viewer, 1 px accent verticals) running to the band's bottom edge. No sun here: the footer owns it.

Brand & product studio

Have a hard thing to explain?

Start a project
Desktop

Brand & product studio

Have a hard thing to explain?

Start a project
Phone, 390 px

Dialog boxes

faq.synthwave-dialog-boxes · faq

Rule
A chrome title, then questions as RPG dialog boxes two per row: a neon outline, the question in uppercase accent, the answer below.
Slots
title, faqs[4..8]
Grid
title 1-12 · dialogs 1-12

A chrome h2, then 4–8 questions as RPG dialog boxes two per row: neon-outlined surface panels with the question in uppercase link colour (h4, 700) and the answer in small body text.

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Desktop

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Phone, 390 px

Level select

pricing.synthwave-level-select · pricing

Rule
A centred SELECT YOUR LEVEL title, then two or three neon-outlined level cards: mono level tag, uppercase name, a mono price, a line and a button.
Slots
title, plans[2..3]
Grid
title 1-12 · levels 1-12
Notes
The recommended level glows (accent outline + accent glow); others use the purple border role.

A centred chrome h2 ("select your level"), then 2–3 level cards in a row, each a neon-outlined panel with centred content: mono level tag, uppercase plan name, mono price at step 5, a muted line and a primary button. The recommended level has the accent border and glow; others use the purple border.

Engagements

For starting out

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Most popular

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

For larger teams

Partner

€14k/mo

A standing team for product launches and campaigns.

Choose Partner
Desktop

Engagements

For starting out

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Most popular

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

For larger teams

Partner

€14k/mo

A standing team for product launches and campaigns.

Choose Partner
Phone, 390 px

Tour dates

list.synthwave-tour-dates · list

Rule
Dates as ruled rows: mono date 1–2, city in chrome caps 3–7, venue 8–10, a small outlined ticket button 11–12.
Slots
sectionLabel, title, events[4..8]
Grid
date 1-2 · city 3-7 · venue 8-10 · ticket 11-12

A header row with the chrome h2 and a mono label. Then 4–8 ruled rows: mono date (1–2, link colour), city in uppercase (h3, 800) on 3–7, muted venue on 8–10, a small outlined ticket button on 11–12.

Services

Index

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

View

1 day

Positioning workshop

A day with your leadership to agree on one story.

View

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

View

10 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

View

4 weeks

Launch support

Training, templates and a month of on-call design.

View

Ongoing

Retainer

A senior designer embedded two days a week.

View
Desktop

Services

Index

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

View

1 day

Positioning workshop

A day with your leadership to agree on one story.

View

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

View

10 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

View

4 weeks

Launch support

Training, templates and a month of on-call design.

View

Ongoing

Retainer

A senior designer embedded two days a week.

View
Phone, 390 px

Signal form

contact.synthwave-signal-form · contact

Rule
Title, a line and mono contact readouts on 1–5; the form in a neon-outlined TRANSMIT panel on 7–12.
Slots
title, body, email, address, sectionLabel, contact
Grid
details 1-5 · panel 7-12

Columns 1–5: chrome h2, a paragraph, the email as a mono link readout, the address in muted mono. Columns 7–12: a neon-outlined "transmit" panel with a mono label and the form; fields have 2 px purple borders that glow accent on focus.

Start a conversation

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

hello@northfold.com

Rua da Boavista 72, 1200-066 Lisboa

Contact

Name
Your name
Email
you@example.com
Message
Tell us a little about your project…
Send message
Desktop

Start a conversation

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

hello@northfold.com

Rua da Boavista 72, 1200-066 Lisboa

Contact

Name
Your name
Email
you@example.com
Message
Tell us a little about your project…
Send message
Phone, 390 px

Dispatch list

blog.synthwave-dispatch-list · blog

Rule
Dispatches three per row: a neon-framed 16:9 duotone still, a mono timestamp and an uppercase title.
Slots
title, posts[3..6]
Grid
title 1-12 · posts 1-12

A chrome h2, then 3–6 dispatches three per row: a 16:9 duotone still in a neon frame, a mono timestamp (link colour) and an uppercase h4 title. No excerpt.

Field notes

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

Mar 1, 2026 · 5 min

The case against the brand book

Jan 22, 2026 · 6 min

Naming a product in 2026

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Desktop

Field notes

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

Mar 1, 2026 · 5 min

The case against the brand book

Jan 22, 2026 · 6 min

Naming a product in 2026

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Phone, 390 px

Sponsor credits

logos.synthwave-sponsor-marquee · logos

Rule
A centred mono label, then sponsor names as wide chrome-white capitals in a centred 4-up credits grid (2-up on phone), like the sponsor card at the end of a VHS tape.
Slots
sectionLabel, clients[4..8]
Grid
marquee full

Sponsor credits: a centred muted mono label, then 4–8 sponsor or partner names as wide-tracked uppercase h4 (700) in a centred 4-up grid (2-up on phone), like the sponsor card at the end of a VHS tape. Names only, no logos boxes.

Trusted by

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Kestrel Freight

Desktop

Trusted by

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Kestrel Freight

Phone, 390 px

Footers (2)

Horizon base

footer.synthwave-horizon-base · footer

Rule
A half sun sinks into a strip of grid floor, then boxed logo 1–3, slash links 5–9 and mono legal 10–12 on one line.
Slots
siteName, pages, legal
Grid
sun full · logo 1-3 · links 5-9 · legal 10-12

Inside the content width: a small sun (accent circle, ~180 px) centred, its lower half hidden behind a short strip of floor (accent horizon + two cyan lines), then one line: boxed logo 1–3, slash links in mono 5–9, muted mono legal 10–12.

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop
Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Credits roll

footer.synthwave-credits-roll · footer

Rule
A centred end-credits column: wordmark, links stacked, mono legal — like the end of a tape.
Slots
siteName, pages, legal
Grid
credits 4-9

A centred column on 4–9 like end credits: the wordmark, links stacked and centred, the legal line in muted mono.

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop
Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Hero library heroes that suit Synthwave Retro-Future

Giant wordmarkhero.giant-wordmark · oversized-typeThe site name runs edge to edge at the largest step, sitting on the bottom of the hero; a three-zone strip above it carries eyebrow (1–4), headline + subhead (5–9) and CTA (11–12).Outline + fill typehero.type-outline-fill · oversized-typeTwo display lines at step 6: the first solid across 1–12, the second outlined (stroke only) and indented to start at column 3; subhead + CTA sit under them in 1–4, meta bottom-right.Full-screen video with bandhero.video-fullscreen · videoA muted looping video fills the viewport; a pause control sits top-right; a solid accent band across the bottom carries the headline (1–8) and one CTA (10–12).Interactive 3D objecthero.interactive-3d-object · interactiveA draggable 3D object fills 6–12 for the full hero height; eyebrow top-left; subhead + CTA mid-left in 1–4; the display headline sits bottom-left in 1–5, running up to the object's edge; a 'drag to rotate' hint bottom-right.Full-bleed duotone in an accent fieldhero.fullbleed-duotone · full-bleedThe hero is an accent-coloured field: headline at step 5 in onAccent across 1–10, subhead + CTA under it, then a duotone photo (accent × ink) running edge to edge at 21:9.Photo crossed by a marquee bandhero.marquee-band · collageHeadline (1–8) and subhead + CTA (10–12) above a full-bleed 21:9 photo; an accent marquee band runs across the middle of the photo, edge to edge.Split with vertical videohero.video-split · videoCopy in 1–6 with a 3–4 row chapter list (timestamp + title); a 9:16 vertical video in 8–11 with a small 'now playing' caption under it.Interactive terminalhero.interactive-terminal · interactiveCopy in 1–5 (mono eyebrow, headline, subhead, CTA, install line); a tall terminal window in 6–12 on surfaceAlt: a ruled title bar with the path, 4–7 mono prompt/output rows that type themselves, and a block cursor in the accent.Ticker type bandshero.type-ticker · oversized-typeA 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.