nav.collage-ransom-bar · Ransom bar

A nav pattern from Maximalist Collage, 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.collage-ransom-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Monogram in 1–2, numbered links in 3–9, and a tilted mono tagline sticker on accent2 in 10–12.
Slots
siteName, pages, tagline
Grid areas
logo 1-2 · links 3-9 · tag 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5A1F · accent2 #00B671 · Abril Fatface / Syne · radius 4px · space unit 6px (full list in design/tokens.json)
Section
vertical padding step 2

Pattern notes

  • Monogram in 1–2, numbered links in 3–9 (scroll horizontally on phones), and a mono uppercase tagline sticker on accent2 tilted 3° in 10–12 (hidden on phones).
N
  • 01Services
  • 02Work
  • 03About
  • 04Contact