# Design Language for karmabadge.com

## Aesthetics and Tone

karmabadge.com is a **cyberpunk reputation registry rendered as a faded scout-troop ledger** — the conceit being that in some near-future vernacular, "karma" is no longer a metaphysical bookkeeping concept but a literal civic currency, and the badges that prove it have been issued by the same fictitious organisation since 1947. The site is therefore the digital storefront of **The Cooperative Bureau of Comportment, Local 88-Δ** — a clandestine pseudo-municipal body that mints embroidered, holographic, and now blockchain-stamped *karma badges* for individuals whose moral ledgers can be quantified.

The visual world is a deliberate collision: **glowing HUD telemetry stuck onto sun-bleached merit-badge pamphlets**. Imagine if the inventory screen of a 1990s cyberpunk RPG had been printed on coffee-stained card-stock by a 1960s scoutmaster, then photographed, then re-projected at 240Hz. Cathode-ray scanlines bleed through tea-stained foxing. A Helvetica-cut HUD reticle hovers over a hand-tipped letterpress engraving of a kingfisher. The diagnostic readouts are real (frame counts, geo-coords, badge issuance timestamps) — but they are typeset over the watermark of a defunct paper mill.

The tone is **whimsical-creative** with a wry, slightly-too-earnest documentary deadpan. The Bureau takes itself extremely seriously. The visitor is treated as either a candidate, a re-certifying member, or an auditor — never a "user." Copy is bureaucratic, ceremonious, and faintly silly: "Form 88-Δ-vii: Petition for Restitution of the Lost-and-Found Sub-Badge." The site never winks at the joke; the joke is the rigor with which the conceit is maintained.

The undertone is **cyberpunk** — not the neon-Tokyo-skyline kind, but the **Bruce Sterling / Neal Stephenson lower-stakes cyberpunk** where the future is unevenly distributed, retrofitted onto small institutions, and held together with grommets and cron jobs. Surveillance is present but cozy. The HUD is friendly. Karma is being measured, but by people who still mail you a paper certificate.

## Layout Motifs and Structure

The site is built on a **modular-blocks** grid — explicitly named, explicitly numbered, explicitly catalogued. Every block has a stencilled designation in the upper-left corner (`BLOCK-04 · CATALOG REF 88Δ-VII-2026`), a faint rivet at each of its four corners, and a perforated tear-line border that visually suggests the block could be separated from the page like a postage stamp. The grid is a **12-column substrate** but blocks freely span 3, 4, 5, 7, 8, or 12 columns, never collapsing into the boring rhythm of equal thirds.

**Primary structure (top to bottom):**

1. **The Frontispiece** (full-bleed, single block, 100vh)
   A dossier cover. Cream-paper background with foxing. Massive typeset title `KARMA · BADGE` set in eclectic-hybrid letterforms — see Typography. Beneath the title, a HUD reticle the size of a saucer is *drawn live* over a hand-engraved illustration of a peregrine falcon clutching a nine-pointed star. Around the reticle: live telemetry (`LAT 37.5665 · LON 126.9780 · KARMA-FLUX +0.034 σ · LEDGER-INTEGRITY ✓`). The telemetry is real; the falcon is faded; the contradiction is the point. A faint **path-draw underline** animates beneath the word `BADGE` on entrance, sketched as if by a draftsman's pen.

2. **The Schedule of Badges** (modular-blocks grid, ~6 blocks, asymmetric)
   The catalogue. Each block represents a single badge category — Civic Diligence, Anonymous Charity, Long Patience, Refused Bribery, Returned Cart, etc. Each block contains: a numbered sigil (top-left), a hand-drawn engraving of the badge's emblem (centered, slightly off-axis), a short bureaucratic description in mono, a HUD strip across the bottom showing `ISSUANCES THIS QUARTER · 142,887 · MEDIAN HOLD-TIME · 11.4 yr`, and a hover-state where the entire block tilts back 4° on the X-axis revealing the badge's reverse side (a wax-seal stamp).

3. **The Mechanism** (split modular-blocks, two large blocks side-by-side)
   How karma is *measured*. Left block: a hand-illustrated diagram of "the apparatus" — a Rube-Goldberg-meets-circuit-board contraption with brass gauges, vacuum tubes, ledger paper, and a single fiber-optic cable. Right block: a live HUD readout of the apparatus running, with dials and oscilloscope-style traces drawing themselves. The illustration is paper-aged; the HUD is sharp glass. A horizontal underline-draw animation connects the two blocks like a wire when the section enters viewport.

4. **The Roll of Recipients** (full-width modular-blocks ribbon, horizontally scrolling)
   A ledger of fictional past badge-holders. Each entry is a small block (260×340px) styled as a vintage ID card: sepia portrait silhouette, embossed serial number, badge type, year, and a single quoted citation ("for returning a wallet without consulting its contents"). The ribbon scrolls horizontally with a **counter-animate** parallax — names drift faster than portraits, badges drift slower, creating a sense of physical depth in a flat catalog.

5. **The Petition Form** (single centered block, ~7 columns wide)
   The "submit yourself for badge consideration" interface, presented as a paper form *literally lying on the page*, slightly rotated (1.4°), with a fountain-pen icon in the margin. Form fields are letterpress-bordered. On focus, a HUD bracket animates around the active field with a soft underline-draw. Submit button is a wax-seal stamp.

6. **The Colophon** (modular footer, 12-column, dense small-type)
   Bureau statutes, issuance dates, fictional staff names (the Comportment Inspector, the Engraver-in-Residence, the Telemetry Custodian), printer's marks, and a single line of mono-typed live telemetry that never stops updating: `LEDGER LAST RECONCILED · 02-MAY-2026 · 14:08:33 KST`.

**Spatial system.** All blocks sit on a 8px baseline grid. Margins are generous (the page breathes like an old broadsheet). Block backgrounds vary subtly: some are slightly more cream, some slightly more grey-tea, some have a single corner darkened as if water-damaged. The HUD overlays sit *above* the paper layer in z-space, with a 0.5px chromatic-aberration offset that suggests glass-on-paper.

## Typography and Palette

**Typography is deliberately eclectic-hybrid.** Five faces, each doing one job, carefully kept in their lanes — the visual collision IS the brand.

- **Display Title (the Frontispiece masthead):** **"Bodoni Moda"** (Google Fonts), Black 900, italic-roman pairing. Used at clamp(6rem, 14vw, 18rem) with letter-spacing -0.02em. This is the antique broadsheet voice. The letter `K` and `B` get drop-shadow as if printed twice with mis-registration (a 1.5px cyan ghost behind a 1px magenta ghost — chromatic-aberration as homage to bad offset printing AND CRT phosphors).
- **Secondary Headings (block titles, section markers):** **"DM Serif Display"** (Google Fonts), regular, used at 2.4–3.2rem. Carries the merit-badge-pamphlet warmth — high-contrast, slightly old-fashioned.
- **Editorial Body (descriptions, citations, statutes):** **"Cormorant Garamond"** (Google Fonts), 400 italic and 500 roman. The voice of the Bureau's secretarial pool. Used at 1.05rem with line-height 1.7.
- **HUD / Telemetry / Mono:** **"JetBrains Mono"** (Google Fonts), 400 and 700, used uppercase with letter-spacing 0.12em. Every readout, coordinate, timestamp, and serial number is set in this. It is the *technological* voice — sharp, precise, recent.
- **Stencil / Block Designation Numbers:** **"Big Shoulders Stencil Display"** (Google Fonts), Black 900, used at small caps for block headers like `BLOCK-04`. This is the warehouse-paint voice — between the old paper and the new HUD lives the institutional stencil.

**Palette: muted-vintage anchors, with two cyber-accents that puncture the page.**

| Role | Name | Hex | Usage |
|---|---|---|---|
| Page substrate | Bureau Cream | `#EDE4D1` | The paper. Default page background. Slightly warm. |
| Foxed cream | Tea-Stain | `#D9CCB1` | Background for "older" blocks; foxing edges. |
| Ink primary | Ledger Walnut | `#3A2A1F` | Body text, illustrations, block borders. |
| Ink secondary | Faded Sepia | `#7A5C44` | Secondary text, captions, foxing shadows. |
| Verdigris | Wax-Seal Verdigris | `#4F6B5C` | Wax-seals, accent borders, the Bureau's official mark. |
| Oxblood | Stamp Oxblood | `#8B3A2F` | Stamps, "RECEIVED" marks, the underline-draw stroke. |
| Cyber accent A | Phosphor Cyan | `#7CE7E1` | HUD readouts, telemetry, reticle strokes. The single cool accent. |
| Cyber accent B | Phosphor Amber | `#E6B341` | HUD active states, hover highlights. The single warm accent. |
| Deep void | Cathode Black | `#0E0F12` | HUD background panels, deep shadows under the paper. |

The page is **80% paper, 20% glass**: cream-to-walnut occupies the entire substrate, and the two phosphor accents only ever appear *inside HUD overlay frames* — they never bleed onto the paper itself. This rule is the whole palette's discipline.

## Imagery and Motifs

**Core imagery: paper-aged engravings + sci-fi-hud overlays, sharing the page with rigorous discipline.**

1. **The Engravings.** Each badge category, illustrative diagram, and decorative ornament is rendered as a **stippled steel-engraving in Ledger Walnut on Bureau Cream**. The style references 19th-century scientific plates and 1950s scouting handbook illustrations. Subjects: a falcon clutching a star, a hand returning a wallet, an anvil with a sprig of laurel, a brass apparatus with vacuum tubes, an open ledger book with a feather quill, an extinguished candle, a surveyor's transit, a dovetailed joint. All illustrations are slightly off-register (a 1px walnut shadow behind the line art), as if printed on a tired press.

2. **The Foxing.** Every block has a procedurally-suggested foxing pattern — small rust-colored speckles concentrated at corners and along edges — implemented via SVG noise filters with `feTurbulence` and a sepia colormatrix. Foxing is denser on "older" blocks. This is the paper-aged signature.

3. **The HUD Reticles.** A library of six sci-fi-hud overlay primitives: (a) the corner-bracket frame `⌐ ¬ ⌐ ¬`, (b) the saucer-reticle (concentric circles with crosshair and tick marks), (c) the telemetry-strip (a thin horizontal bar with values that count up/down), (d) the oscilloscope-trace (a sine-derived squiggle drawn live), (e) the gauge-arc (a partial ring with a needle), (f) the bracket-pair `[  ]` for active form fields. All reticles are stroked in Phosphor Cyan, 1px, with a 0.5px Phosphor Amber ghost offset 1px right (chromatic-aberration). All HUD elements have a subtle scanline texture (1px horizontal lines at 6% black, 4px stride) to read as *projected glass*, not *printed paper*.

4. **The Stamps.** Three rubber-stamp impressions, used sparingly: `RECEIVED`, `ARCHIVED`, `IN-PROCESS`. Stamped at 8°–12° rotations in Stamp Oxblood at 60% opacity, with broken edges (SVG mask of speckle noise). Used to mark sections of the catalog as the user scrolls past them — a counter-animate companion to scroll position.

5. **Wax-Seal Marks.** A small (24px) circular wax-seal in Wax-Seal Verdigris at the corner of each block, embossed with the Bureau's mark (a stylized `BΔ` ligature). On hover the seal subtly *cracks* with a 2-frame SVG morph.

6. **The Underline-Draw, ritualised.** Every link, every active form-field label, every section-title gets a hand-drawn underline animation on entrance/hover — but the underline isn't a clean SVG line, it's an *ink-pen sketch* with slight pressure variation (achieved via SVG path with `stroke-linecap: round` and a hand-irregular `d` attribute). The underline draws left-to-right over 480ms with a custom cubic-bezier(0.7, 0.04, 0.34, 1.0), then *settles* with a tiny 4px overshoot rebound. It is the connective tissue between paper and HUD: the underline is always in **Stamp Oxblood**, the paper-world's accent, even when underlining HUD text.

7. **Perforation borders.** Block edges optionally rendered as postage-stamp perforations — 1.2mm punched circles at 3mm intervals — so blocks read as *issued, removable certificates* rather than as web cards.

## Prompts for Implementation

**Implementation philosophy.** Build karmabadge.com as a single long-scrolling document organised into named modular blocks. The page should feel like leafing through a heavy, slightly-damp catalogue while wearing a HUD-equipped pair of glasses. Every paper element is hand-crafted; every glass element is computed live. **Never let the two layers blend** — the chromatic-aberration offset on HUD overlays is non-negotiable, because it's what tells the eye "this is projected, that is printed."

**HTML structure.**
- One `<main>` containing six `<section>` elements, one per layout movement.
- Each `<section>` contains explicit `<article class="block" data-block-id="04">` elements with their `data-block-id` rendered as the stencilled designation in the corner via CSS counter / `::before`.
- The HUD overlay is a SECOND DOM layer: `<aside class="hud-layer">` positioned `fixed` and pointer-events:none, where reticles and telemetry strips are rendered via SVG and animated via requestAnimationFrame. Critical: the HUD-layer must NEVER share parent containers with paper content; the separation is structural, not just visual.

**CSS techniques.**
- Use CSS custom properties for the entire palette so theme-switching (e.g., a "night patrol" mode where the cream darkens to Cathode Black and the HUD intensifies) is one variable swap.
- Background paper texture: a single tiled SVG with `feTurbulence` baseFrequency=0.85, numOctaves=2, then a sepia color-matrix and 12% opacity, layered over a solid Bureau Cream.
- Foxing per-block: a per-block SVG mask with randomised `feTurbulence` seed, applied as a `::before` pseudo-element with mix-blend-mode: multiply.
- HUD scanlines: `repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,0.06) 3px 4px)` over HUD frames.
- Chromatic aberration on HUD strokes: stack two SVGs, the back one in Phosphor Amber translated 1px right, the front one in Phosphor Cyan. No filter() — explicit duplication, because it must remain pixel-crisp at any zoom.
- Block tear-line / perforation border: SVG mask with circular punches, applied via `mask-image`.

**Animation priorities (in this order — implement top-to-bottom, ship anything below the line if budget tight).**

1. **Underline-draw, everywhere.** Every link, every section title, every active form field. SVG path with stroke-dasharray animation. Slight overshoot on settle. This is the brand.
2. **HUD reticle telemetry.** Live counters (LAT/LON/KARMA-FLUX) updating every 100–400ms with subtle counter-animate. Numbers should *jitter* the last decimal place to feel alive but not chaotic.
3. **Block tilt-on-hover** (4° X-axis rotation revealing the badge reverse). transform-style: preserve-3d on the block, two children at z=1px and z=-1px.
4. **Path-draw on the engravings.** When a block enters the viewport (IntersectionObserver, threshold 0.3), the engraving's outline strokes itself in over 1.2s, then the stipple-fill fades in over 600ms. This makes the catalogue feel like it's being drawn live, in real-time, by the Bureau's draftsman.
5. **Stamp impression on scroll-past.** When a block scrolls 60% past the viewport top, a `RECEIVED` stamp slams onto its corner with a 1-frame appearance + 80ms settle. Stagger-delay siblings.
6. **Horizontal counter-animate parallax** on the Roll of Recipients.
7. **Wax-seal hover-crack** (2-frame SVG morph).
8. **The Apparatus oscilloscope trace** drawing live (sine + small noise) on the Mechanism section.

**Storytelling priorities.**

- **The page is a published document.** Treat the visitor as someone who has been mailed a copy. There is no marketing-funnel pacing, no "Get Started" hero CTA, no pricing table. The Bureau does not sell; it issues.
- **Every block is signed.** Each block's bottom-right corner has a tiny mono `— attested · K. Yoon · Comportment Inspector` style attribution, with the inspector's name rotating across a fixed cast of six fictional staff. This is the connective tissue that builds the world.
- **Telemetry is canon.** The numbers in the HUD are not decorative — they are part of the fiction. The "KARMA-FLUX +0.034 σ" reading is the Bureau's live measurement of the visitor's own karmic field. It should subtly respond to user behavior (mouse stillness → "patience += 0.001"; rapid scroll → "haste detected").
- **Avoid all conventional landing-page scaffolding.** No "Features / Pricing / Testimonials." Instead: Schedule, Mechanism, Roll, Petition, Colophon. The IA itself is the story.

**Content guidance.** Copy should be written by an imagined Bureau secretary in 1962 who has been forced to use a 2026 stylebook. Sentences are formal, slightly long, never breathless. Use Oxford commas. Refer to the visitor as "the candidate" or "the bearer." Number every list (i, ii, iii). Cite fictional statutes ("§88-Δ-vii.4"). Avoid contractions. Permit one (1) joke per page; let it land deadpan.

## Uniqueness Notes

**Differentiators from other designs in the batch:**

1. **Cyberpunk via merit-badge ledger, not via neon-Tokyo.** The vast majority of cyberpunk designs reach for Blade-Runner-streetscape signifiers — neon, rain, kanji, skyline. karmabadge.com runs the genre through a **scout-troop-handbook filter**: the future is bureaucratic, polite, and printed on cream paper. The cyber elements are confined to a HUD overlay layer that is structurally and chromatically segregated from the paper layer. This is cyberpunk as cosy stationery.

2. **Two-substrate compositing as a brand discipline.** Most sites have ONE visual world. karmabadge.com has two — paper and glass — and the entire design system is built around their non-mixing. Phosphor Cyan/Amber appear ONLY inside HUD frames. Stamp Oxblood appears ONLY on the paper layer. The HUD always carries chromatic aberration; the paper never does. This rule produces an unmistakable signature: the eye instantly knows which layer it's reading.

3. **Eclectic-hybrid typography, with each face cast in a specific role.** Five typefaces (Bodoni Moda, DM Serif Display, Cormorant Garamond, JetBrains Mono, Big Shoulders Stencil Display) — each tied to a *voice* in the Bureau's fiction (broadsheet masthead / pamphlet / secretarial / technological / institutional-stencil). This is opposite to the dominant pattern in the batch (mono + humanist sans, used everywhere). The collision is the brand.

4. **The Bureau as IA.** The site's information architecture (Frontispiece → Schedule of Badges → Mechanism → Roll of Recipients → Petition → Colophon) is taken from the anatomy of a 19th-century institutional catalogue, not from any standard SaaS template. There are no Features/Pricing/About sections.

5. **Live, narrative telemetry.** The HUD readouts are not chrome — they are diegetic. KARMA-FLUX, LEDGER-INTEGRITY, and the live timestamps participate in the fiction. They subtly react to the visitor's behaviour. Most "HUD" treatments in the batch are static decoration; this one is a tiny game.

6. **Underline-draw as connective tissue.** Underline-draw (a 7%-frequency pattern in the batch — neither overused nor exotic) is elevated to the site's signature interaction primitive: every link, every form field, every section title. Always in Stamp Oxblood (a paper-layer color), always with the same hand-irregular pressure-varied stroke and 4px overshoot rebound. It is the one motion that crosses the paper/glass divide.

7. **Modular-blocks with explicit catalogue numbering.** Modular-blocks (9% in the batch) is taken seriously — every block is a numbered, perforated, signed, sealed catalogue entry with attribution and a wax mark. Blocks are not "cards"; they are *certificates*. This is structurally different from the bento-box / card-grid use of modular layouts elsewhere.

**Avoided patterns (per frequency analysis):**

- **AVOID `gradient`** (96% of designs). The site uses zero gradients. All color is flat, layered, or stamped — never blended.
- **AVOID `mysterious-moody` tone** (94%). The tone here is whimsical-creative documentary deadpan, not mood-board melancholy.
- **AVOID `centered` layout default** (92%). Blocks are deliberately asymmetric across a 12-column grid; the Frontispiece itself sits with its title weighted to upper-left, not centered.
- **AVOID `mono` typography as the only voice** (93%). Mono is here, but it's one of FIVE faces, each in its own lane.
- **AVOID `corporate` aesthetic** (92%). The Bureau is many things; corporate is not one.
- **AVOID `parallax`** (68%) and `counter-animate` everywhere (91%) as default-on tics. counter-animate is used purposefully (telemetry, stamp impressions, recipient ribbon) but not reflexively.

**Chosen seed:** aesthetic: cyberpunk, layout: modular-blocks, typography: eclectic-hybrid, palette: muted-vintage, patterns: underline-draw, imagery: paper-aged, motifs: sci-fi-hud, tone: whimsical-creative.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T12:54:17
  domain: karmabadge.com
  seed: seed:
  aesthetic: karmabadge.com is a **cyberpunk reputation registry rendered as a faded scout-tr...
  content_hash: 8d44d4bb4d61
-->