# Design Language for badge.bar

## Aesthetics and Tone

badge.bar is a **late-Showa enamel-pin counter run by a daydreaming clerk** — a single quiet bar-counter, viewed from the customer-side stool, where every product is a hand-painted *kinen badge* (a commemorative pin) waiting to be picked up, turned over, and pinned to your collar. The aesthetic is **retro** filtered through *creamy-pastel custom illustration*: not the high-contrast kitsch retro of arcade-flyer reds and saturated mustards, but the softer retro of 1968–1974 stationery shops, train-station kiosk badges, and tea-house matchbox illustration — the specific period when Japanese commercial design had absorbed Bauhaus geometry but still drew everything by hand on slightly off-white kraft, in milky pinks and butter creams that seem to glow under fluorescent counter-lights.

The tone is **playfully ceremonial**. The clerk (the site's voice) treats every pin like a small ritual object: there is a *correct way* to admire each one, a *correct order* to lay them on the velvet pad, a *correct angle* to hold them to the lamp. The voice is short, warm, slightly silly, never breathless. No hype, no exclamation marks, no "elevate your wardrobe." Sentences carry the rhythm of someone enjoying their job: "this one has a friend." "this one was lonely on the shelf." "this one rolls if you tip it." The entire site reads like a counter-side conversation that meanders, rather than a product catalog that converts.

This is not a *shop*. It is a **counter where badges live**, and the visitor is invited to admire — purchase is incidental, almost an afterthought, mentioned only in tiny secondary text.

## Layout Motifs and Structure

The site is built around the **minimal-navigation layout** at only 5% in the registry — but radicalised: there is **no nav bar, no hamburger, no logo-link, no sticky header**. Navigation happens entirely through **pinning**. The visitor literally pins the badge they want to see to a small "current-counter" anchor at the bottom-left of the viewport; the rest of the screen rearranges to focus on that pin. The site has *one* persistent UI element — a small circular felt pad in the bottom-left corner labelled `今、ここ` ("imanokoko" — *right now, right here*) — and that is the entire navigation system.

The composition is **a single horizontal counter-strip occupying 78vh**, with a deep cream upper field above it (the "wall" — empty, breathing room, where headline text floats like steam over a kettle) and a thin maroon *carpet-line* below (the "floor"). The counter itself is rendered in custom illustration: warm milky resin laminate with the soft sheen of a 1971 izakaya bar, a row of seven hand-drawn velvet display pads, and on each pad a single oversized pin, drawn at roughly 20–28cm of apparent size, far too large to be realistic. The over-scaling is the point: each pin is the *protagonist* of a panel.

Spatial relationships:

- **Vertical tripartite division**: 14vh wall / 78vh counter / 8vh carpet. No section breaks, no scroll-snap shelves, no "fold" — the counter scrolls horizontally as the dominant axis.
- **Horizontal scroll is *gestural, not infinite*.** The seven pads are laid out across roughly 3.4 viewport widths. Beyond the seventh pad: a small swept-broom illustration and the word `しまい` (*shimai* — "the end of the day"). The site has a literal closing.
- **No grid, no card-grid, no bento-box, no full-bleed.** Every element sits on the counter-strip, including text. Headlines are written *on the wall above the counter* in pencil-style hand-script; product blurbs sit *on the velvet pads beside* each pin, like museum placards.
- **The pin-pad layout is not card-grid** — pads are unevenly spaced, slightly tilted (each at a different rotation between -2.4° and +3.1°), and visually overlap by 6–10% so that the row reads as *a counter someone arranged by hand*, not a CSS grid.
- **Mobile**: the counter rotates 90° and becomes a vertical apothecary-shelf scroll, but the same seven pads, same rotations, same cream-and-maroon. No reflow into stacked cards. The shelf metaphor is preserved.

The deliberate avoidance of card-grid (67% in registry), centered (81%), and full-bleed (87%) is structural — this layout is **a single-axis horizontal counter-walk**, which appears in 0% of the existing 80 designs.

## Typography and Palette

**Fonts (Google Fonts only):**

- **`Commissioner` (variable axis: wght 100–900, slnt 0)** — the site's primary voice, used for *every* English/Latin character on the page: badge titles, blurbs, the clerk's marginalia, and the tiny disclaimer copy at the very bottom. Commissioner is at only 2% in the registry. It is used here because Commissioner is a *humanist sans with a low x-height and unusually soft terminals* — it reads as a font that could plausibly have been hand-drawn for a 1972 stationery catalogue. Set at 17.5px on desktop body, line-height 1.62, tracking -0.005em. Headline weight axis is pulled to **wght 220** (a near-thin) for the wall-text, and **wght 540** for the placard captions on each pad. The variable slant axis is unused; the soft terminals carry the friendliness without italicizing.
- **`Klee One` (regular 400 and semi-bold 600)** — used *only* for the four fixed Japanese phrases on the page: `今、ここ` (the felt-pad indicator), `しまい` (end-of-counter mark), `ばじ・ばー` (the site's name written in hiragana, appearing exactly once in 8px at the very bottom), and the small handwritten clerk-margin notes scribbled diagonally beside three of the seven pads. Klee One is a Japanese textbook hand-writing font; it carries the right slightly-uncertain pencil-character without becoming twee.
- **`Caveat` (regular 400)** — used **once and only once**, for the four characters of the site's English wordmark `badge.bar` written across the upper-left wall in deliberately childish script. It is the only place Caveat appears. Its purpose is to undercut the otherwise composed typography with a single moment of sincere amateurishness — as if the clerk wrote the shop's name on the wall in coloured pencil before opening on the first day.

No mono font (96% of the corpus uses mono — this site refuses). No serif. No display face. The hierarchy is built from *weight and size within a single humanist family*, not from contrasting families.

**Palette (8 named colours, all with hex):**

- `#FBF1E2` **kinari-cream** — the wall, the body background, the upper field. A milky off-white with a faint yellow undertone. Used at 100% opacity for the wall, 96% for any cream surface that needs to seem closer to the viewer.
- `#F4D9CC` **sakura-milk** — the dominant pin background. The "creamy-pastel" anchor. A blush-cream that reads as pink only when adjacent to cream. The first, fourth, and sixth velvet pads are this colour.
- `#E8C7B5` **mochi-peach** — the second pin pad's velvet. A dustier peach-cream, slightly more saturated than sakura-milk, with the warmth of a 1969 shopping-bag illustration.
- `#D4E2D4` **mint-blanket** — the third and seventh pads. A pale tea-mint that exists in the palette to break the warm progression and let the eye breathe; it appears twice and only twice.
- `#F8E5A8` **butter-yellow** — the fifth pad and the lamp-glow halo around the pinned-current badge. A soft butter, never a saturated yellow.
- `#7E2A2A` **maroon-carpet** — the lower carpet-strip, the line under the counter, and the felt of the `今、ここ` pad. A deep brown-red that appears nowhere else; it is the structural "floor" colour.
- `#3A2418` **walnut-counter** — used for all body text, all line-art on illustrations, and the counter's edge-rim. Not pure black; a warm coffee-brown that reads as text-dark against cream.
- `#9A8A6B` **bronze-stem** — the colour of every pin's metal stem and post. Drawn as a dull patina-bronze, never gold, never silver. Anchors the illustrations to the same metallic vocabulary.

**Critical rule:** the palette uses **no gradients** (95% of corpus uses gradients — this site refuses) and **no high-contrast pairings** (no pure black, no pure white). Every adjacency is a soft-creamy hand-off. The single permitted "contrast" is walnut-counter on kinari-cream, which is the typographic baseline.

## Imagery and Motifs

The imagery is **custom-illustration only** — at 0% in the existing registry. No photography, no 3D, no stock, no AI-raster. Every visible element other than typography is a hand-drawn SVG, drawn in the same illustrative voice as a 1971 *Heibon Punch* magazine spot — soft outlines, slight stroke-pressure variation, 2-3 colour fills with a single highlight per object, no gradients inside fills.

**The seven pin-protagonists (each is the page's hero in turn):**

`PAD 01 — THE BATHHOUSE PIN` (sakura-milk velvet)
A round 1971-style *sentou* (public bathhouse) commemorative pin, illustrated as a ceramic-glazed tile with a wavy water-line, a Mt. Fuji crescent, and the kanji `湯` (hot water) hand-drawn in the centre. The clerk's blurb: *"this one was made for a bathhouse in Tachikawa that closed in 1981. it remembers the tiled floor."*

`PAD 02 — THE TROLLEY-CAR PIN` (mochi-peach velvet)
A small rectangular tin-litho pin showing a green-and-cream trolley car with a single passenger silhouette in the window. A faint registration-misprint halo around the trolley (the third-colour offset by 0.4mm) — drawn deliberately as a printing-defect motif. Clerk's blurb: *"the printer's hand was tired. this one is the only one with the cream off-set."*

`PAD 03 — THE ONIGIRI PIN` (mint-blanket velvet)
A triangular enamel pin shaped like an *onigiri* (rice ball), with a single nori-strip across the bottom and two sesame-seed dots drawn as tiny dimensional bumps. Clerk's blurb: *"this one is hungry. don't lay it next to the others — it tilts toward them."*

`PAD 04 — THE CAT-WHISKER PIN` (sakura-milk velvet)
A small oval pin showing a *maneki-neko*-derived calico cat, but only the whisker-region — chin, two whiskers, and a single half-closed eye. The rest of the cat is implied past the pin's edge. Clerk's blurb: *"a fragment. the rest of the cat is on a different counter."*

`PAD 05 — THE LANTERN PIN` (butter-yellow velvet, the *halo* pad)
A vertical *chochin* (paper lantern) pin in red-orange bands with the single character `祭` (*matsuri* — festival) glowing in the centre. This pin is illustrated with a soft halo of butter-yellow extending 22% beyond the pin's edge — as if the pin itself is glowing from within. Clerk's blurb: *"this one stays warm. you can hold it in winter."*

`PAD 06 — THE BAMBOO-NOTE PIN` (sakura-milk velvet)
A long thin rectangular pin shaped like a *tanzaku* (paper wishing-strip from Tanabata), with a hand-drawn poem of three vertical kana characters illegible at small scale, legible only on hover-zoom. Clerk's blurb: *"the wish on this one is private. you may read it if you lean close."*

`PAD 07 — THE COUNTER-BELL PIN` (mint-blanket velvet)
A small round pin shaped like the brass bell that sits on bar-counters in cafés to call the clerk. A single sound-line drawn rising from the bell's apex. Clerk's blurb: *"if you click this one, it rings. only the seventh one rings."*

**Decorative motifs (cultural, at 3% in registry):**

- **Hanko-style stamp seals**: in the lower-right corner of every pad, a tiny vermillion (`#A53A2C`) circular *hanko* seal with the pad number in archaic kanji (一, 二, 三, 四, 五, 六, 七). Hand-drawn, slightly off-centre.
- **Kraft-paper texture**: the wall and counter surface carry a faint hand-painted noise — not a tiled pattern, an irregular SVG-fill stipple drawn at 0.8% opacity, suggesting absorbent paper rather than digital surface.
- **Pencil-margin doodles**: three of the seven pads have a small clerk-doodle in the cream margin — a coffee-cup ring on pad 02, a tally-mark `正` half-finished on pad 04, and an arrow drawn back toward the counter-bell on pad 07.
- **The closing-broom**: at the end of the horizontal scroll, a small hand-drawn straw broom leans against the wall with three dust-puffs settling around it. The image is the page's literal terminus.

**Motifs explicitly rejected:** no leaves, no flowers (the *botanical* motif is overrepresented), no circuits, no grids, no geometric-shapes, no vintage-photography (vintage is at 25% — this design is not "vintage-stock-photo retro"; it is *new illustration of old objects*). No icons, no logos, no pictograms.

## Prompts for Implementation

Build badge.bar as **one HTML file, one CSS file, one ES module, and a single `pins/` directory of seven SVG files plus one `broom.svg` and one `counter.svg`**. No framework, no bundler, no build step. No Lottie. No WebGL. No canvas. All animation is CSS or small inline JS.

**Document structure:**

```
<body>
  <main class="counter-room">
    <div class="wall">
      <h1 class="wordmark">badge.bar</h1>     <!-- Caveat, child-script -->
      <p class="opener">a counter where seven pins live, today.</p>
    </div>
    <div class="counter" id="counter">
      <article class="pad pad-01" data-pin="bathhouse" style="--rot:-1.6deg;">
        <img class="pin" src="pins/bathhouse.svg" alt="bathhouse pin">
        <p class="placard">…</p>
        <span class="hanko">一</span>
      </article>
      <!-- pad-02 through pad-07 -->
      <div class="closing">
        <img src="pins/broom.svg" alt="broom">
        <p class="shimai">しまい</p>
      </div>
    </div>
    <div class="carpet"></div>
    <button class="imanokoko" aria-label="current pin pad">
      <span class="felt"></span><span class="label">今、ここ</span>
    </button>
  </main>
</body>
```

**Storytelling and narrative:**

The page is **a guided counter-walk**, not a portfolio. The narrative arc is:

1. The visitor lands; only the first pad is sharply lit. The other six are dimmed to 64% opacity.
2. As the visitor scrolls horizontally (or arrow-keys, or swipes), the lamp-light *follows* — only the centred pad is at full opacity, neighbouring pads fade smoothly.
3. The `今、ここ` felt-pad in the bottom-left displays the current pin's number `一` through `七` in the small Klee One face.
4. Reaching the seventh pad: the counter-bell pin is interactive — clicking it triggers a tiny hand-drawn ring animation (a single SVG path stroke-draw of a sound-line, accompanied by a 220ms `<audio>` chime, kinari-cream UI flash). This is the page's **single Easter-egg interaction**.
5. Past the seventh pad: the broom and the word `しまい`. The page ends. There is no next page, no sitemap, no footer-links.

**Animation budget — exclusively `micro-interactions` at 6% in the registry:**

- **Pin breath**: each pin has a barely-perceptible 4.2s sinusoidal scale (1.000 → 1.008 → 1.000), staggered across the seven pads with a 600ms phase offset, so the row "breathes" like sleeping cats. Pure CSS keyframes.
- **Pad lamp-follow**: when a pad enters the centre 32% of viewport horizontally, its opacity transitions from 0.64 → 1.0 over 380ms with `cubic-bezier(.2,.8,.3,1)`, and its drop-shadow `filter` goes from `blur(0px)` to a soft 18px walnut-counter cast. No parallax (parallax is at 92% — refuse).
- **Hover-tilt-and-lift**: hovering a pin slightly tilts it (max 3.4° toward the cursor on the X-axis only, never both axes) and floats it upward 6px from its velvet pad with a soft shadow. Spring, not ease — but a gentle 380-stiffness spring that settles in ~280ms, never bouncy.
- **Hanko ink-bleed**: hovering a pad causes the small vermillion hanko to *darken from `#A53A2C` to `#7E2A2A`* over 220ms, as if ink is just now seeping into paper. A single CSS transition.
- **Counter-bell ring**: clicking the seventh pin triggers an SVG `<path>` `stroke-dasharray` draw on a sound-line glyph above the bell, 460ms; the bell-pin itself shakes with a 6° wobble decay over 520ms. This is the only audio on the site.
- **Cursor-companion (subtle)**: a small custom cursor — a tiny illustrated *fingertip* (12×12 SVG) — replaces the system cursor over the counter strip. No cursor-trail, no magnetic snap (magnetic is at 53% — refuse). Just the fingertip drawing.
- **Page-load reveal**: on first load, the seven pins fade-in with a 90ms stagger — pad 01 first, pad 07 last — over 720ms total. After the reveal, the lamp settles on pad 01.

**Refused patterns** (deliberately omitted, since each is overused in the corpus):

- No parallax (92%)
- No stagger-as-grand-entrance beyond the modest pin reveal (70%)
- No cursor-follow trail (67%)
- No magnetic buttons (53%)
- No card-flip (10%)
- No typewriter (10%)
- No counter-animate stat numbers (11%)
- No path-draw-svg as decoration (22%) — the only path-draw is the seventh-pin sound-line, *purposeful, not decorative*

**Refused page elements:**

- **NO navigation bar, NO footer, NO sitemap.**
- **NO call-to-action button, NO "shop now," NO pricing, NO add-to-cart, NO cart icon.**
- **NO testimonial, NO review-stars, NO logo-wall.**
- **NO email capture, NO newsletter, NO popup, NO cookie banner, NO chatbot.**
- **NO FAQ accordion, NO feature comparison, NO stat grid, NO "as seen in," NO "trusted by."**
- **NO hero headline-and-subhead pair.** The wall-text is a single sentence: *"a counter where seven pins live, today."*
- **NO dark mode toggle.** The counter is always at golden-hour cream.

**Storytelling priorities:**

The page must feel like *a place visited, not a product sold*. The clerk's marginalia is the soul; design every line of CSS to preserve the hand-drawn unevenness. If something looks too clean, add a 0.4° rotation or a 1px stroke-jitter. The pins are protagonists; the layout is a stage; the typography is a whisper.

Build for desktop first (the horizontal counter-walk only makes sense at 1280px+). On tablets the counter rotates 90° to a vertical shelf-walk. On mobile it becomes a single-column scroll where each pin occupies one viewport-screen, and the felt-pad indicator slides up from the bottom corner as a small fixed nub.

## Uniqueness Notes

This design's deliberate departures from the 80 designs already in the registry, and from the seed's defaults:

1. **Retro filtered through *Showa stationery*, not American mid-century or Y2K-chrome retro.** Retro at 12% in the registry overwhelmingly clusters into either *vaporwave-grid synth* or *mid-century mod furniture* or *80s arcade-flyer*. badge.bar locates retro specifically in **1968–1974 Japanese commercial illustration** — the off-white hand-drawn era of train-station kiosks, *Heibon Punch* spot art, and bathhouse memorabilia. None of the existing designs occupy this micro-period; the closest neighbours (cottagecore, vintage) are European-pastoral or sepia-photographic, not Showa-illustrative.

2. **Minimal-navigation taken to "no navigation at all."** Minimal-navigation sits at 5% in the registry, but those examples still carry a logo, a link-row, or a hamburger. badge.bar has *zero* persistent navigation chrome — the entire wayfinding is one circular felt-pad indicator showing only the current pad's number in archaic kanji. This is not "minimal nav"; it is **navigation-replaced-by-a-felt-pad**, which appears in 0% of the corpus.

3. **Commissioner-versatile as a *hand-drawn-feeling humanist sans*, not a corporate humanist.** Commissioner appears in 2% of the registry. Where it exists it tends to be used as a clean modern body face for SaaS or editorial contexts. badge.bar *characterises* Commissioner — pulls the variable weight axis to a near-thin 220 for wall-text, treats its soft humanist terminals as if they were the artefact of a 1972 letterer's brush. The font is recast from "modern editorial" to "lettering inside an illustrated counter scene."

4. **Custom-illustration as the *only* imagery.** Custom-illustration is so rare it does not appear in the imagery frequency table (effectively 0%). The dominant imagery in the registry is photography (97%). badge.bar refuses photography entirely; every visible non-text element is a hand-drawn SVG. This is structural, not stylistic.

5. **Cultural motifs at the level of *specific Showa objects*, not "Asian-inspired pattern."** Cultural motifs sit at 3%. Where they appear elsewhere they tend to be generic — temple silhouettes, cherry blossoms, calligraphy gestures. badge.bar grounds *cultural* in seven *named* artefacts of mid-Showa daily life: bathhouses, trolley cars, onigiri, *maneki-neko* fragments, *chochin* lanterns, *tanzaku* wishing-strips, counter-bells. Each is a specific cultural object with a specific clerk-anecdote, not a decorative gesture.

6. **Creamy-pastel without a single gradient.** Creamy-pastel sits at 3% in the registry, but every existing pastel design in the corpus uses gradients (95% of all designs use gradients). badge.bar refuses gradients categorically. Every colour is flat-fill. The "softness" of creamy-pastel is achieved through **palette adjacency**, not through hue-blending — sakura-milk against kinari-cream against mochi-peach across a single counter is the design's only "gradient," and it is composed of three discrete fills.

7. **Micro-interactions as the *only* animation pattern.** Micro-interactions sit at 6% — and where they appear elsewhere they coexist with parallax (92%), stagger (70%), magnetic (53%), and cursor-follow trails (67%). badge.bar uses *only* micro-interactions: pin breath, hover-tilt, hanko ink-bleed, the seventh-bell ring, lamp-follow. Every other animation pattern in the registry's top ten is explicitly refused.

8. **Playful tone as *quiet ceremonial play*, not exclamation-mark energy.** Playful sits at 21% in the aesthetic frequency. The vast majority of "playful" designs in the corpus lean energetic, bouncy, exclamation-rich, dopamine-coded. badge.bar's playfulness is **the playfulness of a clerk who is delighted by their inventory** — meandering, slightly silly, never breathless. Sentences are short and warm; there are no exclamation marks anywhere on the site.

9. **The page literally ends.** A small straw broom and the word `しまい` close the horizontal scroll. There is no next page, no related-products carousel, no "explore more" rail. The corpus universally extends pages with footer-link-rails or "you may also like" sections; badge.bar has a literal terminus, which is a structural rejection of infinite-scroll-shop convention.

10. **A single Easter-egg interaction with audio.** Almost no designs in the corpus carry sound. badge.bar contains exactly one 220ms chime — the seventh pin's bell — triggered by a single click. Every other interaction is silent. This is intentional auditory restraint.

**Chosen seed (from assignment):** `aesthetic: retro, layout: minimal-navigation, typography: commissioner-versatile, palette: creamy-pastel, patterns: micro-interactions, imagery: custom-illustration, motifs: cultural, tone: playful`

**Avoided patterns from frequency analysis:** photography (97%), gradient (95%), warm-as-default-temperature (93%), parallax (92%), full-bleed (87%), centered-as-default (81%), card-grid (67%), mono typography (96%), glassmorphism (70%), stagger-as-grand-entrance (70%), cursor-follow-trail (67%), magnetic buttons (53%). None of these appear in badge.bar.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:03:51
  domain: badge.bar
  seed: seed
  aesthetic: badge.bar is a **late-Showa enamel-pin counter run by a daydreaming clerk** — a ...
  content_hash: 8b1379389296
-->