nav.synthwave-hud-bar · HUD bar

A nav 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="nav.synthwave-hud-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Four HUD zones: logo 1–3, a mono status line 4–7, numbered links 8–12.
Slots
siteName, tagline, pages
Grid areas
logo 1-3 · status 4-7 · links 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 2

Pattern notes

  • Four HUD zones on one baseline: wordmark 1–3, a mono status line 4–7 (e.g. "SYS ONLINE · 23:59 PST", hidden on phone), numbered links 8–12 in mono.
Northfold

Strategy and design for companies that make things

  • 01Services
  • 02Work
  • 03About
  • 04Contact