# Design Language for badge.bar ## Aesthetics and Tone badge.bar is a **Swiss-grid punk speakeasy** — a place that looks, on first glance, like a 1962 Helmut Schmid pharmaceutical poster, but the second you blink it has been hijacked by a teenage cooperative running a pirate radio station out of the basement. The domain reads two ways at once: **`badge`** (a small sigil of authority — Boy Scouts, sheriff stars, FedEx couriers, GitHub repo verification, the little pin on a parking valet's lapel) and **`.bar`** (the smoky room you go to when you stop caring whether the authorities approved you). The site fuses those two readings into a single contradiction: **a Swiss-rationalist visual system delivering anti-authoritarian content**. Every grid line is a Müller-Brockmann grid line. Every color inside the grid is candy. Every word inside the color is a manifesto. The mood is **edgy-rebellious** in the most precise way — not graffiti-rebellious, not torn-flyer-rebellious, but **rebellious-by-discipline**: like a cooperative anarchist commune that runs on Swiss railway timetables; like Jenny Holzer truisms set in 12pt Akzidenz-Grotesk on a candy-pink background; like a riot squad that arrives in Bauhaus uniforms and carries fluorescent gel-pens instead of batons. The reference image in my head is impossible but I will name it anyway: it is **a Josef Müller-Brockmann concert poster (1958)** redrawn in 2026 at a Berlin warehouse rave by someone who only had highlighter pens — magenta, lemon, lime, and tangerine — and a strict ruler. It is calm and angry. It is empty and loud. It is courteous and dangerous. The bar is open. Show your badge or make one. The narrative arc the visitor walks through is: **arrive at a closed door (the hero), present the badge (interactive scanner block), enter the bar (the minimal-navigation reveal), drink one of seven candy-bright cocktails (the badge gallery), and leave with their own pin sealed in wax (the colophon).** No purchase. No signup. No funnel. The whole site is a single ritual of admission. ## Layout Motifs and Structure The composition uses **minimal-navigation** as a structural rule, not a stylistic choice — and minimal-navigation is at 1% in the corpus, so this site fully owns the pattern. **There is no header bar, no hamburger, no logo-in-the-corner.** Navigation is encoded into the rhythm of the page itself: the visitor scrolls, and waypoints are small fluorescent tick-marks in the right margin (8px squares, magenta, with two-character labels: `01`, `02`, `03`, `..`, `07`, `XX`). Clicking a tick scrolls smoothly to its section with an elastic ease. That is the entire navigation system. No links. No dropdown. No "menu" word. The site rejects nav-as-furniture and replaces it with **nav-as-margin-marginalia** — like the running heads in a Swiss railway timetable. Underneath the candy is a **rigorous 12-column Swiss grid** with a baseline rhythm of 24px and a vertical column gutter of 1.5rem. The grid is not hidden — it is **drawn on the page in pale 1px lines** (`#FFE9F4` over `#FFFCFC`), visible at all times like graph paper showing through a watercolor. Type sits on the baseline. Images snap to columns. Nothing floats freely. This is the Swiss skeleton. **Macro structure (seven plates plus a colophon, all on one long page):** 1. **`00 / DOOR`** — full-viewport opening: just the wordmark `badge.bar` set in oversized variable type at the page's top-left at column 1, with a single fluorescent-magenta wave-form running across columns 6–12 at the baseline of the wordmark. Below, a single sentence: *"This is a private bar for unauthorized achievements."* Nothing else. No CTA. No scroll-hint (the elastic page bounce hints for itself). 2. **`01 / SCANNER`** — interactive panel. A grid-aligned rectangle (columns 3–10) with a slowly looping gradient-mesh inside it, candy colors swirling as if in a glass cocktail shaker. Hovering anywhere over the panel makes the mesh "scan" toward the cursor; clicking issues a one-of-a-kind generative badge (drawn live in SVG) that the user can drag into the right margin to "pin" it. It is the only "interaction" on the site. 3. **`02 / MANIFESTO`** — three columns of text in a long single-page tract, set in tight Swiss style but written in the voice of a punk zine. Pull-quotes set in oversized variable-fluid italics that breathe (font-variation-settings animate with scroll velocity). One paragraph in pure inverted block — magenta page, white type — to interrupt the rhythm. 4. **`03 / SEVEN`** — the badge gallery: seven gradient-mesh medallions on a 7-column row, each labeled with a one-word title (CIVIL · WILD · QUIET · LATE · LOST · LIT · KIND). Hovering a medallion makes it elastically "swell" 1.06× and emit a sub-3-second wave-form ripple that travels across the row. The medallions are not products. Nothing is for sale. 5. **`04 / WAVE`** — a full-bleed band that breaks the grid: a single fluorescent wave-form rendered in SVG, animated as a slow horizontal sine, occupying 25vh. The only text in this band is the timestamp of the visitor's session, set in 6vw variable-fluid mono. 6. **`05 / RULES`** — twelve numbered rules of the bar, set as a Swiss tabular list with hairline rules between rows. Rules 1, 7, and 12 are inverted to candy-pink blocks. Rules are short (≤9 words each), declarative, anti-corporate. 7. **`06 / GUEST BOOK`** — a static SVG that looks like a page from a Swiss appointment ledger, with hand-set candy-fluorescent annotations laid into the grid, signed "the previous twenty visitors" in fictional initials. 8. **`XX / COLOPHON`** — the closing plate: technical credits set in 11px Swiss style, with a wax-seal SVG at the bottom-right corner stamped with the visitor's session timestamp. **Negative space is as important as the marks.** Roughly **62% of every viewport is uncolored** (`#FFFCFC` near-white). The candy colors are punctuation, not flooding. The grid's emptiness *is* the rebellion: the site refuses to fill its real estate with growth-hacked engagement, and the void is where the punk ethos lives. **Spatial rhythm.** Each plate is exactly 100vh tall with internal padding tuned so the dominant element lands on the third or fifth horizontal grid line — the eye is never centered, but is also never disoriented. The whole document scrolls with **elastic overscroll** at top and bottom (CSS `overscroll-behavior: contain` plus a JS-driven rubber-band on the wordmark wave) so that when the visitor reaches the door or the colophon, the page subtly bounces and the magenta wave-forms recoil and snap back into shape. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display (variable-fluid):** [`Roboto Flex`](https://fonts.google.com/specimen/Roboto+Flex) — the most expressively variable Google font available, with axes for weight (100–1000), width (25–151), grade (-200–150), slant (0 to -10), optical size (8–144), x-height, ascender, descender, counter, and figure widths. The wordmark `badge.bar` uses this font's *full* axis space simultaneously: `font-variation-settings: "wght" 920, "wdth" 60, "GRAD" -120, "slnt" -6, "opsz" 144, "XHGT" 720`. As the visitor scrolls, scroll velocity is mapped through a JS controller into the `wdth` axis (60 ↔ 151) and the `wght` axis (920 ↔ 100), so the wordmark **breathes wider/thinner** with the page's motion. This is what variable-fluid is for, and the corpus uses it at 3% — this site uses it as the central visual hook. - **Sub-display:** [`Big Shoulders Display`](https://fonts.google.com/specimen/Big+Shoulders+Display) — Patrick Griffin's industrial Chicago condensed, used for plate numerals (`00 / DOOR`, `01 / SCANNER`, etc.) at clamp(2.4rem, 4.4vw, 4.8rem) ExtraBold, all-caps, tracked +60. Big Shoulders has the muscular, working-class Swiss feel without veering Helvetica-vanilla. - **Body:** [`Inter`](https://fonts.google.com/specimen/Inter) — the contemporary humanist neo-grotesque that serves as the genuine Swiss heir without licensing Akzidenz-Grotesk. Weight 400 at 1rem with 1.55 line-height. Tabular figures on for any numerical content. Slashed zero. Tabular punctuation. - **Manifesto pull-quotes:** [`Inter`](https://fonts.google.com/specimen/Inter) at weight 900 italic, clamp(1.6rem, 3.2vw, 3.4rem), `font-variation-settings: "opsz" 32, "slnt" -10`. The manifesto's pull-quotes are set in the same family as body, but cranked to 900/-10 so they read as Inter-shouting-back-at-you. - **Marginalia / nav ticks / wax seal:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) at 11px, weight 600, used only for the right-margin tick labels (`01`, `02`…`XX`), the rules numerals, and the colophon timestamps. Mono is at 96% in the corpus — the corpus default — so the use here is sparing and disciplined: it appears only as machine-stamped tags, never as long-form body. **Palette (candy-bright over Swiss white, 10% in corpus):** - **`#FFFCFC` PAPER** — near-white background, ~98% lightness, the tiniest blush of magenta. The page's ground. - **`#0E0E10` INK** — near-black, with 1° magenta tilt away from neutral. Used for body text, grid rules at strong emphasis, and hairlines. - **`#FF2E88` PUNK MAGENTA** — the primary candy: a fluorescent hot magenta, dialed slightly cooler than process magenta. Used for the wordmark wave-form, the tick markers, the inverted manifesto block, and the gradient-mesh hot spots. - **`#FFE600` HIGHLIGHTER LEMON** — a saturated chrome yellow, the second candy. Used for one rule, two pull-quote underlines, and one of the seven medallions (the `LIT` badge). - **`#39FF6A` CIVIC LIME** — fluorescent acid-green, the third candy. Used for one rule, the right-margin "you-are-here" tick, and the `WILD` medallion gradient. - **`#FF7A2D` SAFETY TANGERINE** — a traffic-cone orange, the fourth candy. Used for the `LATE` medallion, error-state animation flashes, and one inverted block in the rules. - **`#7BD3FF` BAR CYAN** — sky-pool cyan, the fifth candy. Used for the `QUIET` and `KIND` medallions, and as the calm point in the gradient-mesh. - **`#FFE9F4` GRAPH-PAPER PINK** — the visible-grid color, 1px lines at 24px baseline rhythm; just barely chromatic, but enough to read as pink-on-paper not gray-on-paper. The Swiss grid never goes neutral here — even the structure has a candy tilt. The candy palette deliberately uses **fluorescent values that exceed standard sRGB safety** — specifically the magenta (#FF2E88), lemon (#FFE600), and lime (#39FF6A) push close to gamut edges, so on P3-capable displays they actually glow. The Swiss aesthetic in the corpus skews "warm" (98%) and "muted" (23%); this site refuses both — it is the rare Swiss design that is **cool, raw, and fluorescent**, like a 1990s rave flyer printed by a Bauhaus alumnus. ## Imagery and Motifs **No photography.** No stock. No icon fonts. **All imagery is gradient-mesh and wave-forms**, both rendered live in SVG/CSS. Photography is at 94% in the corpus — abstaining is itself the design choice. **Gradient-mesh (10% in corpus):** The seven medallions and the scanner panel are the site's signature use of gradient-mesh. Each medallion is a 240×240 SVG with **a 4×4 control-point mesh gradient** (rendered using SVG `` with `feTurbulence` + `feDisplacementMap` over a flat candy-color base, plus a clipped circular boundary). The control points drift on a 6-second sine loop, giving each medallion the look of liquid candy slowly stirring inside a glass coin. Each of the seven medallions has its own dominant candy color and one secondary; the secondary always belongs to its semantic neighbor (CIVIC = magenta+lemon, WILD = lime+magenta, QUIET = cyan+paper, LATE = tangerine+lemon, LOST = ink+cyan, LIT = lemon+tangerine, KIND = cyan+lime). The result reads as **a row of seven candy "drinks" lined up on a Swiss bartop**. **Wave-forms (3% in corpus, rare):** Wave-forms are the site's recurring motif and the most "punk" element in the visual language. They appear as: - **The wordmark wave** — a single 4px-stroke fluorescent magenta sine running through the wordmark's baseline, rendered in SVG with `stroke-dasharray` so it can also "draw in" on first paint. - **Section transitions** — between every plate, a single thin candy-colored wave runs horizontally across the full viewport and the next plate slides up beneath it; the wave is rendered with two layered SVGs offset by 12px to give a CMYK-misregistration "double print" feel. - **The big wave plate (`04 / WAVE`)** — a 25vh fluorescent wave that animates as a slow horizontal sine, with a second smaller wave traveling against it at 1.6× frequency. The two waves intersect to form **standing-wave nodes** that pulse in time with the elastic scroll energy. This is the site's most expressive single drawing. - **Hover ripples on the medallions** — when hovered, a medallion emits a 3-second sub-cycle wave that travels across the medallion row, displacing the neighbors elastically. The wave is the structural metaphor for *connection between badges*. - **Right-margin wave** — a 1px-stroke micro-wave running vertically down the right margin, ticking past each nav marker as the visitor scrolls. This is the navigation's "live oscilloscope." **Other motifs:** - **The wax seal (colophon).** A custom SVG: an octagonal wax blot in punk-magenta, with the visitor's timestamp embossed in JetBrains Mono. The seal "drips" when first painted (a 1.4s SVG `` morph with elastic easing). Unique per-session. - **The grid-as-graph-paper.** The visible Swiss grid (24px × 12-column) is itself a motif. The grid is drawn behind everything in `#FFE9F4` and is *interrupted* by candy elements — wherever a medallion or a wave-form sits, the grid appears subtly displaced, like ink bleeding into wet paper. This is achieved via a single SVG mask layer. - **The elastic ruler.** The right-margin nav-ticks are connected by a faint dotted line; on scroll, the dotted line behaves like an **elastic rope** — it stretches when the scroll velocity exceeds a threshold and snaps back with a damped oscillation. Pure CSS `@property` + JS scroll listener. - **No photographs of people.** No avatars. No mascots. No emoji. The site refuses representational imagery in favor of pure typographic and geometric statement. ## Prompts for Implementation **The story to tell.** A visitor lands on what looks like a plain Swiss page — three colors, a grid, and a wordmark. They scroll, and the wordmark *breathes* with their motion (variable-fluid axes mapped to scroll velocity). They reach a panel labeled SCANNER and a candy-mesh inside it churns toward their cursor. They click; a unique badge is generated, and they can drag it into the right margin to keep it (the entire badge fits in 64×64 SVG and is encoded in the URL hash so it survives refresh). They keep scrolling. The page declares its manifesto in three quiet columns interrupted by one violently candy-magenta inverted block. They reach the seven badges and discover they are not for sale — they are *named virtues* in punk shorthand (CIVIL, WILD, QUIET, LATE, LOST, LIT, KIND). They scroll past the wave plate, where a single fluorescent sine breathes for 25vh of viewport. They read the twelve rules, three of which are inverted candy blocks. They reach the colophon. A wax seal drips down with their session's timestamp. They close the tab having bought nothing, signed up for nothing, and witnessed a piece of design that took itself completely seriously while refusing to be useful. **Build approach.** - **Single HTML file**, semantic landmarks: `
` for the wordmark plate, `
` containing seven `
` plates plus `