Slopless Design

nav.deco-crest-symmetric · Symmetric crest

A nav pattern from Art Deco, drawn alone below with this design's tokens and sample copy. Used in this design on: every page, as the nav. Give the section root data-pattern="nav.deco-crest-symmetric". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Links on the left (1–5), a monogram crest at the exact centre (6–7), a ghost CTA on the right (10–12); a double hairline closes the bar.

Slots

siteName, pages, cta

Grid areas

links 1-5 · crest 6-7 · cta 10-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #0E0D0B · text #E8E0CB · heading #E6C676 · accent #C9A24B · accent2 #88660B · Limelight / Josefin Sans · radius 0px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

One row: page links on the left (1–5, spaced capitals), a monogram crest at the exact centre (6–7), a small ghost button flush right (10–12). Two 1 px hairlines one unit apart close the bar (a double rule). At phone width the bar stays one row: a small menu toggle on the left, the crest at the centre, the button hidden. Diamond-and-hairline ornaments stay horizontal at every width.

MenuN