# Design Language for badge.bar ## Aesthetics and Tone badge.bar is conceived as **the Salon des Médailles** — a grand, hushed chamber inside an imagined Bureau of Honors circa 1929, where every badge, medallion, sigil and cachet ever awarded is preserved in velvet-lined mahogany drawers and displayed on guilloché plinths. The aesthetic is uncompromisingly **art-deco ornate luxury** filtered through the tactile memory of a master engraver's workshop: crisp sunburst geometry, stepped ziggurat silhouettes, meticulous chevron inlay, and the particular cold-warmth of champlevé enamel nested inside mirror-polished brass. The tone is **opulent-grand** and **elegant-sophisticated** — but never austere. This is the grandeur of a Norman Bel Geddes cocktail lounge at 2 a.m., when the room has emptied and the barman is still polishing a single commemorative coin under a single green-shaded pharmacy lamp. Gilt is present but not ostentatious; it is the gilt of a well-used fountain-pen nib, not of costume jewelry. Surfaces carry the faint haze of an eighty-year-old lacquer, the micro-scratches of respectful handling. The site should feel like it was *struck* — not typed, not rendered, but pressed between two steel dies with a satisfying, unrepeatable clap. Where most sites in this cohort lean toward the mysterious-moody or the scholarly-intellectual, badge.bar instead inhabits a confident, ceremonial register: the hush before the medal is pinned. There is ritual here. There is craft. There is the slight vanity of a thing that knows it is beautifully made. **Emotional arc the visitor should trace:** 1. Arrival — awe at a vitrine lit from below 2. Approach — reverent examination of engraved detail 3. Recognition — the realization that each badge encodes a small, serious story 4. Departure — the quiet pride of having witnessed something formal ## Layout Motifs and Structure The site abandons the card-grid convention almost entirely (card-grid is at 94% saturation in the cohort) in favor of a **magazine-spread** macro-structure crossed with a **ma-negative-space** breathing rhythm. The viewport is treated as a pair of facing folio pages — a double-truck spread — with a visible central "gutter" seam that runs from top to bottom of every section. The left folio carries the ceremonial object (the badge, the medallion, the monogram) and the right folio carries its inscription, the *tituli* in refined serif paragraphs. **Primary structure — the Six Plates:** - **Plate I — The Vitrine (opening spread):** A full-bleed viewport divided exactly on the spine. Left half is a dark velvet plane (#0E0B07) with a single enormous badge motif centered, rendered in layered SVG with guilloché engine-turning (the hypnotic cycloidal pattern found on banknote backs and Patek Philippe dials, generated procedurally with JS trigonometric functions). Right half is aged parchment (#F2ECDC) with the site wordmark set in an art-deco display face at the optical center, with a single horizontal rule above and below drawn in warm gilt. The spine is a 2px chased-brass gradient line. - **Plate II — The Catalogue Raisonné:** A vertical enfilade of entry-cards, each one occupying a full viewport-height but constructed as a *magazine spread* rather than a card. Image-plate left, text-block right. Instead of rounded corners and soft shadows, each plate has mitred deco corner-brackets (small L-shaped chevrons in gilt, 14px tall) at the four corners, as if the content were matted under glass. - **Plate III — The Index (a true non-grid):** An asymmetric, almost-broken arrangement reminiscent of a 1927 auction catalogue endpaper. Items float at precise but unpredictable positions, each one rotated by a small degree (−3deg, +2deg, −1deg) to suggest hand-placement. A thin tissue-guard overlay (2% opacity cream) sits between the reader and the index, which the cursor "lifts" on hover. - **Plate IV — The Monogram Study:** A single centered composition on an otherwise empty spread. Enormous whitespace (ma) surrounds a small, perfect object. This is the quiet movement in the symphony — intentionally anti-dense. - **Plate V — The Inscription:** An editorial-flow essay section, a single measured column (max-width: 52ch) set in refined serif, with decorative drop-caps three lines tall, each drop-cap a miniature hand-set capital in its own inlaid box with gilt border. - **Plate VI — The Colophon:** A footer that reads like the final page of a 1930s limited-edition print run. "Printed in an edition of one. Set in the types as named. Pressed at the Bureau." **Spine gutter:** Every plate carries the central vertical spine line. On scroll, a tiny typographic ornament (fleuron, ❦) slides smoothly down the spine, acting as the only progress indicator — replacing conventional scroll bars, progress dots, or breadcrumbs. **No conventional navigation.** No top nav bar. No hamburger. No sidebar. The spine *is* the navigation: click the fleuron and it jumps to the next plate with a page-turn animation (a 3D rotateY flip across the spine axis, 0.9s, cubic-bezier(.72,.02,.26,1)). ## Typography and Palette **Typography (all Google Fonts):** - **Deco Display (wordmark, plate titles):** **"Poiret One"** — the quintessential art-deco geometric display face, with its perfect circles, exaggerated thin strokes, and that unmistakable 1920s Paris-metro confidence. Used at massive sizes only: `clamp(3rem, 9vw, 9rem)`, weight 400 (the only weight), letter-spacing `0.18em`, uppercase, occasionally set vertically along the spine with `writing-mode: vertical-rl`. - **Deco Support (sub-display, section labels, small capitals):** **"Limelight"** — a theatrical marquee-style deco face with high-contrast thicks and thins. Used for running-head labels ("PLATE II / THE CATALOGUE") at 14px, letter-spacing `0.32em`, weight 400. - **Editorial Body (inscription paragraphs, the right-folio tituli):** **"Cormorant Garamond"** — an elegant high-contrast old-style serif with a calligraphic memory. Weights 300 for body (16px, leading 1.7), 600 for occasional emphasis, 300-italic for captions. The thin strokes at small sizes evoke fine engraved-plate script. - **Didone Number Display (catalogue numbers, dates, medal years):** **"Abril Fatface"** — a dramatic modern-display serif with razor-thin serifs and plump bowls. Used exclusively for numerics: catalogue numbers (№ 0014), years (MCMXXIX), edition counts. - **Micro-caps (metadata, provenance lines):** **"IM Fell English SC"** — a small-caps revival of an 18th-century type, used for provenance notes below each badge image at 11px with very wide tracking (`0.22em`). It provides a hand-struck counterpoint to the otherwise machined feel. - **No monospace anywhere.** Mono is 90% saturated in the cohort; this site refuses it on principle. If code must appear, it is set in **Cormorant italic** like a Latin quotation. **Palette — "Chased Brass & Oxblood Velvet":** Nine colors, treated as a hand-mixed lacquer set. Each has a ceremonial name: | Swatch | Hex | Role | |---|---|---| | Velvet Noir | `#0E0B07` | primary background (left folio, vitrine interior) | | Oxblood Liqueur | `#6B1F2A` | accent, drop-caps, spine ornaments | | Aged Parchment | `#F2ECDC` | right-folio background, body surface | | Tissue Cream | `#E8DFC8` | secondary surface, tissue-guard overlays | | Chased Brass | `#B89254` | primary gilt, hairlines, brackets | | Polished Gilt | `#D4AF5E` | highlight gilt, on-hover gleams | | Enamel Teal | `#2F5A5E` | champlevé enamel inlay accent | | Smoke Grey | `#3B3530` | body text on parchment | | Ink Midnight | `#120F24` | body text in vitrine, deep shadow | **Rules of pairing:** Gilt (Chased Brass) only ever sits on Velvet Noir or Ink Midnight — never on parchment. Oxblood only appears as a punctuation color (drop-caps, rule-terminal ornaments), never as a background. Enamel Teal appears only inside circular or lozenge-shaped frames, mimicking actual enamel inlay — never as text, never as a flat fill exceeding 120px². **Guilloché gradients (engine-turned surfaces):** The signature "metallic" look is achieved not with a simple linear gradient but with a stack of 3–5 radial and conic gradients at different angles and opacities, layered to produce a visible moiré of fine concentric rings — the CSS equivalent of a rose-engine lathe. Each major gilt surface carries its own guilloché signature, generated procedurally so no two are identical. ## Imagery and Motifs **No photography.** (Photography is at 94% cohort saturation. Avoid completely.) Every visual element is drawn in SVG or constructed in CSS. **Core motif: The Badge-as-Character.** Each badge showcased on the site is a bespoke SVG composition built from the same formal vocabulary — sunburst rays, laurel sprigs, stepped plinths, ribbon cartouches, monogram cyphers — but recombined so that every badge feels both sibling and individual. The badges are not icons. They are *portraits of ideas*. **Recurring visual vocabulary:** - **Sunburst Ray (deco sunrise):** A fan of 24 tapered isosceles triangles radiating from a common focus. Appears at three scales: as the primary ornament on the opening vitrine (420px diameter), as a section-break at quarter size, as a cursor-follower at 28px. - **Guilloché Engine Turning:** Procedural cycloidal patterns drawn on `` using parametric equations (x = (R−r)·cos(t) + d·cos((R−r)·t/r), y = (R−r)·sin(t) − d·sin((R−r)·t/r)). Each refresh generates new R, r, d parameters — the pattern is alive but always in-character. - **Mitred Chevron Brackets:** L-shaped corner ornaments in Chased Brass, 14–28px, at the four corners of every content plate. These are the only "borders" the site uses — there are no full rectangular frames. The eye completes them. - **Laurel Sprig:** A symmetrical pair of stylized laurel branches, drawn in a single stroke width, deployed only around the wordmark and the colophon signature. Used sparingly, as laurels should be. - **Stepped Ziggurat Plinth:** A three-step deco plinth shape (reminiscent of the Chrysler Building crown or the WPA-era post office reliefs) used as the pedestal under each featured badge. Rendered in SVG with a subtle shadow-gradient to suggest depth without 3D. - **Ribbon Cartouche:** A flowing ribbon shape carrying section numerals (I, II, III, IV, V, VI). Drawn with a curved path and a subtle fold-highlight in Polished Gilt. Animates on scroll-into-view with a 1.1s unfurl (stroke-dashoffset animation along the ribbon's centerline path). - **Fleuron (❦) & Pilcrow (¶):** Typographic ornaments used as the scroll indicator and as section terminators. The fleuron slides down the spine; the pilcrow ends each inscription paragraph in Oxblood Liqueur. - **Monogram Cypher:** An interwoven BB ligature (for badge.bar) designed as a two-letter cypher in the deco manner — the two Bs sharing a spine, with the counters filled in Enamel Teal. Appears at the footer and as a favicon. **Texture overlays:** - **Fine-grain noise (2% opacity)** across the parchment folio — hand-laid paper texture. - **Vertical micro-scratches (1.5% opacity)** across gilt surfaces — the marks of polishing cloth. - **Subtle paper fold-crease** down the spine gutter — a 1px gradient that brightens to +3% on either side and darkens to −4% at the exact spine, suggesting the physical fold of a double-page spread. **No icons, no emoji, no stock imagery.** The vocabulary is strict. ## Prompts for Implementation **Full-screen ceremonial experience.** Each of the six Plates occupies 100vh. The site is not a "page" — it is a *struck edition*. Do not include conventional UI chrome: no top navigation bar, no sticky header, no floating CTA, no cookie banner styled as a card, no pricing block, no stat-grid, no testimonial carousel. If legal/meta text is required, set it in the colophon (Plate VI) as justified marginalia. **The Spine & the Fleuron.** Implement the central vertical spine as a single `
` with a background gradient that reads as fold-and-brass. The fleuron is an SVG that is positioned with `position: fixed` and updated via a scroll listener (throttled with `requestAnimationFrame`). As scroll progresses from 0–100%, the fleuron's `top` moves from `8vh` to `92vh`. Clicking the fleuron jumps to the nearest plate. On click, the spine performs a page-turn flip (`rotateY` of the active plate from 0deg to −180deg with `transform-origin: left center` or `right center` depending on direction; the incoming plate is pre-rotated at +180deg and flips in simultaneously). Duration 0.9s, `cubic-bezier(.72,.02,.26,1)`. **Guilloché generator (JS).** Write a function `guilloche(ctx, params)` that renders an engine-turned pattern on an HTML `` element using epitrochoid/hypotrochoid parametric equations. Parameters: outer radius R, inner radius r, pen offset d, stroke color (Chased Brass at 35% alpha), stroke width 0.4px, number of passes 1800–2400. Each major gilt surface calls this generator once on load with randomized (but constrained) parameters, so that every rendered page has a unique guilloché signature — a nod to the anti-counterfeiting tradition of banknote engraving. **Struck-Die entrance animation.** When a badge enters the viewport, it should "strike" into position: start at `scale(1.18)` with `filter: blur(6px)` and 0 opacity, then snap to `scale(1)`, blur 0, opacity 1 over 180ms with a custom `steps()`-based easing that mimics the double-bounce of a coin press (a two-step `cubic-bezier` composition). Simultaneously play a short muted "clap" via CSS: the drop-shadow momentarily expands from 0px to 24px and back to 6px in the same 180ms. The effect should feel like a physical impact, not a graceful fade. **Fountain-pen inscription reveal.** Body paragraphs in Plate V (The Inscription) reveal character-by-character as if being inked. Use an SVG filter (`feTurbulence` + `feDisplacementMap`) applied only during reveal to introduce a faint ink-bleed wobble at the leading edge. 28ms per character, paused on punctuation for 140ms. This replaces the overused typewriter-effect (16% cohort) with something more appropriate to the period. **Cursor — the engraver's burin.** Hide the default cursor. Replace it with a custom SVG cursor: a tiny diamond-point engraving tool (a lozenge with a sharpened tip) that leaves a 240ms trailing hairline behind it (a single SVG `` with `stroke-dasharray` animation, Chased Brass at 60% alpha) as the pointer moves. On hover over a badge, the burin scales to 1.6× and rotates +12deg as if positioning to strike. **Scroll-triggered ribbon unfurl.** The Ribbon Cartouche carrying each plate's numeral (I–VI) unfurls from the spine as the plate enters the viewport. Implemented with SVG `` and `stroke-dashoffset` animation over 1.1s. Pair with a subtle ribbon-shadow that grows from 0 to 8px as the unfurl progresses. **Palette rules enforced in CSS custom properties.** Define the nine palette colors as CSS variables at `:root`. Write utility classes that enforce the pairing rules (e.g. `.surface-velvet` can only contain `.text-parchment`, `.text-brass`, or `.text-gilt` — a linter comment documents this; a Stylelint rule could verify it). **Storytelling imperative.** Each plate advances a small narrative: the arrival at the Bureau, the opening of the vitrine, the examination of the specimen, the reading of the inscription, the recording in the colophon. Copy on each plate must be written as if transcribed from a conservator's field journal, in present tense, unhurried, with occasional parenthetical marginalia set in Cormorant italic. Never use marketing voice. Never say "empower," "leverage," "seamless," "cutting-edge." Say "struck," "inscribed," "matriculated," "recorded," "kept." **Avoid explicitly:** CTA stacks, pricing tiers, feature grids, stat counters, testimonial carousels, team photo grids, blog preview cards, newsletter signup bars, chat bubble widgets, cookie popups styled as modals, gradient button with icon, "Trusted by" logo row, hero with centered H1+subhead+primary-CTA+secondary-CTA — every one of these is banned from this design. **Prefer:** Wide margins. Single-column text. Ornamental rules. Ceremonial numerals (Roman where appropriate — MCMXXIX, not 1929). Unhurried transitions. Sound of silence. The sense that a real object with mass and provenance is on display. ## Uniqueness Notes **Differentiators from other designs in the cohort:** 1. **Art-deco as a literal, not decorative, language.** Where other designs borrow one or two deco gestures as surface decoration, badge.bar is constructed *inside* the deco idiom — its layout grammar (the magazine-spread with visible spine), its ornaments (chevron brackets, sunburst rays, stepped ziggurat plinths, guilloché engine-turning), its typography stack (Poiret One + Limelight + Abril Fatface + IM Fell SC), and its rhythm (the ceremonial pause, the struck-die entrance) all derive from the same 1925–1935 design vocabulary. The aesthetic category "art-deco" appears at 0% in the cohort's frequency analysis; this site claims it cleanly. 2. **Magazine-spread as the entire macro-layout with a visible spine gutter.** The cohort is 94% card-grid and 88% centered. badge.bar refuses both. Every plate is a *folio* with a visible central fold-line and asymmetric left/right pages. The spine is not a visual flourish — it *is* the navigation (via the sliding fleuron and the page-turn flip on click). No other site in the cohort uses a folio-spread with functional spine. 3. **Procedural guilloché generator as a first-class visual element.** No other design uses procedurally generated engine-turned patterns drawn with trigonometric parametric equations. The pattern is alive — every page load produces a unique guilloché signature, echoing the anti-counterfeiting tradition of banknote and medal engraving. This is the site's signature visual and it exists nowhere else in the cohort. 4. **Zero monospace, zero photography, zero card-grid.** Three of the cohort's most saturated patterns (mono 90%, photography 94%, card-grid 94%) are all refused categorically. This is a deliberate act of distinction. 5. **Ceremonial numerals (Roman) as a running motif.** Plate numbers are I–VI, not 1–6. Dates are MCMXXIX, not 1929. Catalogue numbers are set in Abril Fatface Didone with a preceding № glyph. This is a tiny but continuous signal that the site operates in a different register from its sibling designs. 6. **Engraver's-burin cursor with trailing hairline.** The cursor-follow pattern is at 22% in the cohort, but always implemented as a soft disc or magnetic blob. badge.bar's cursor is a diamond-point engraving tool that leaves a fine brass hairline trail — it *inscribes*. No other cohort design uses cursor motion as a mark-making act. 7. **Strict palette pairing rules.** The nine-color palette has explicit pairing constraints (Gilt never on parchment, Oxblood never as ground, Enamel Teal only inside circular/lozenge frames under 120px²). These rules are enforced in CSS and will not be relaxed. Most designs in the cohort treat their palette as a loose suggestion; badge.bar treats it as a lacquer set with specific intended uses. 8. **The Colophon.** Instead of a conventional footer with links, the site closes on a 1930s limited-edition-style colophon naming the types, the edition size (one), and the "press." This closure frames the entire site as a struck artifact. **Chosen seed/style:** `art-deco ornate luxury` (from `seeds.json`). Aesthetic vocabulary lock: `art-deco` + `luxury-premium`. Tone lock: `opulent-grand` + `elegant-sophisticated`. Layout lock: `magazine-spread` + `ma-negative-space`. Palette lock: `gold-black-luxury` + `deep-burgundy` (custom blend named "Chased Brass & Oxblood Velvet"). Typography lock: `art-deco-display` + `elegant-serif`. Motifs lock: `marble-classical` + `crystalline` (reinterpreted as engine-turned metal rather than gem). **Avoided patterns from frequency analysis:** card-grid (94%), centered (88%), gradient (98%), warm (96%), scroll-triggered (94%) implemented only in restrained ceremonial mode, photography (94%), mono (90%), corporate (90%), mysterious-moody tone (42%), hand-drawn (30%), full-bleed as generic hero (52%), parallax (56%), stagger (38%), spring (36%), typewriter-effect (16%) replaced with fountain-pen ink reveal. The site consciously refuses the cohort's center of gravity and stakes out unused territory.