# Design Language for karmabadge.com ## Aesthetics and Tone karmabadge.com is a **deep-sea reliquary for a single living emblem** — the Karma Badge: a holographic sigil that hovers in dark water, breathing, re-shaping itself with every good and bad act it remembers. The aesthetic is **seapunk**, but the muscular, electric strain of it — not the soft pastel-mermaid version. Think 1993 rave flyer printed on wet vinyl, dolphin-chrome and Hokusai foam, a Roman bust dropped into a fiber-optic aquarium. The badge is the only character. It is not a logo waiting for a tagline; it is a creature that pulses cyan when you do right and bruises magenta when you do wrong, with kelp-tendrils and coral-flowers unfurling from its rim as it earns trust. The mood is **energetic** — fast, glittering, slightly feverish, like a tide that keeps coming in. Every section is a *held breath underwater*: huge calm darkness, then a sudden bioluminescent bloom of motion. The tone never lectures, never sells. It dares you to keep watching the badge change. Inspirations: Lisa Frank dolphins rendered in oil-slick chrome; the brushed-metal nameplates of 90s arcade cabinets; a leather diving-glove gripping a glowing pearl; Art Nouveau iron grilles regrown as deep-water coral; the chromatic shimmer of a CRT demoscene intro left running on the seabed. ## Layout Motifs and Structure The page is built on **ma — negative space as the primary structural material**. Roughly **70% of every viewport is empty dark water**: deep teal-black with the faintest current-grain. Content is not "placed in a grid"; it is **released into the void like a bubble** and allowed to rise alone. There is no top navigation bar, no hamburger, no logo lockup cluster, no footer columns, no card grid. There is exactly one persistent element: a small **leather badge-tab pinned to the right margin** — a stitched oxblood-leather rectangle the size of a guitar pick, holding a 6mm cyan pearl, which slowly slides down the margin as you scroll (a depth gauge: surface → abyss). The composition is a **single vertical descent through seven pressure-zones**, each one a near-empty screen with one luminous event: 1. **Zone 0 — The Surface.** Full-black. Center-screen, the Karma Badge materializes from a ring of foam-particles: a circular emblem, ~360px, chrome rim, holographic glass center. Below it, in tiny tracked caps, only the word `karmabadge`. Vast emptiness above and below. 2. **Zone 1 — First Bloom.** The badge has drifted to the upper-left third. From its rim, three coral-flowers unfurl into the empty right two-thirds — botanical line-art in neon outline. One short line of text floats in the negative space at lower-right. 3. **Zone 2 — The Ledger Tide.** The badge sits small, far right. A slow horizontal river of glyphs (deeds remembered) drifts left-to-right across the dark middle band, most of the screen still empty above and below the river. 4. **Zone 3 — The Bruise.** Full-black again — maximal ma. The badge, centered and large, slowly **morphs**: rim warps, glass center shifts from cyan to magenta and back, kelp-tendrils thrash once. No text at all for a full screen-height. Just the creature. 5. **Zone 4 — The Grille.** The badge anchors bottom-left. An Art-Nouveau-meets-coral wrought-iron arch grows up the left edge into open darkness; a few words of text are caught in the ironwork like a tide-pool. 6. **Zone 5 — The Pearl Vault.** The leather badge-tab from the margin "opens" into the page: a single large oxblood-leather panel, off-center, holding the pearl. Around it, 80% void. 7. **Zone 6 — The Deep.** Near-total black. The badge is a tiny distant glow far below center, still pulsing. One last line of tracked caps. The leather depth-gauge pearl has reached the bottom of the margin. Whitespace (water-space) is load-bearing: the eye is meant to *drift* between zones, and the silence between blooms is the design. Asymmetry is the rule — the badge is almost never centered except in the two maximal-ma zones (0 and 3), where centering becomes the dramatic exception. ## Typography and Palette **Type system (Google Fonts only):** - **Primary / structural face — `Commissioner`** (variable, weights 200–900, plus its width and slant axes). Commissioner is the *versatile* low-contrast humanist sans built to behave in extreme conditions — it stays legible at 9px tracked caps and turns sculptural at 900-weight 200px display. Used everywhere structural: the `karmabadge` wordmark (900 weight, +0.18em tracking, all caps), zone headlines (300 weight, large, loose), and micro-labels on the leather tab (700 weight, +0.22em, 9px, uppercase). One typeface, many voices — that is the point. - **Atmospheric / glyph face — `Major Mono Display`** — used *only* for the drifting "ledger tide" of remembered-deed glyphs in Zone 2 and for the depth readout on the pearl gauge. Its skeletal monospaced capitals read like sonar pings. - **Body / rare prose face — `Spline Sans`** — for the few short sentences that float in negative space. Set at 17px, 1.65 line-height, weight 400, with generous letter-spacing (+0.01em). It is the calm human exhale between the chrome. **Palette (dark-neon):** - `#04060B` — Abyss Black — base background of every zone (the water). - `#0A1A22` — Trench Teal — subtle gradient pool behind the badge, current-grain tint. - `#00F0D2` — Bio-Cyan — the badge's "good karma" glow, primary neon, link underlines, coral-flower outlines. - `#FF2EA6` — Bruise Magenta — the "bad karma" shift, the warp state in Zone 3, secondary neon accent. - `#7C5CFF` — Plasma Violet — the holographic mid-tone where cyan and magenta bleed; gradient stops, particle trails. - `#E9F6F4` — Foam White — text on dark, the pearl's core highlight, micro-labels. - `#5A1C22` — Oxblood Leather — the margin badge-tab and the Pearl Vault panel (the one warm, matte, organic surface in the whole palette). - `#C8924A` — Brass Stitch — the leather's stitching and rivet, the badge's chrome rim warm-reflection. Gradients are always **oil-slick triads** — cyan → violet → magenta swept diagonally — never two-stop pastels. The leather oxblood is the deliberate dissonance: a single dry, warm, hand-made thing in an ocean of cold electric light. ## Imagery and Motifs **The Karma Badge itself (the hero creature, redrawn per zone as inline SVG):** - A circular emblem: outer **chrome rim** (radial brass-to-cyan gradient with a hard specular hotspot that tracks the cursor), an inner **holographic glass disc** (animated conic-gradient of cyan/violet/magenta, very slow rotation), and a **floating center motif** — a stylized hand holding a pearl, abstracted to a few confident bezier strokes. - From the rim grow **floral-botanical sea-forms**: coral-flowers and kelp-fronds drawn as single-weight neon outline strokes, in the Art-Nouveau "whiplash" curve language but unmistakably underwater (bulbous polyp tips, branching like staghorn coral, anemone-fringe petals). They *unfurl on scroll* via SVG path-draw-then-bloom, and one frond always **morphs** between a closed bud and an open flower on a slow loop. - In the "bruise" state the entire badge **morphs**: rim ovals out and back, glass disc desaturates toward magenta, kelp-tendrils snap once like a flinch, then everything eases home. This morph IS the site's signature motion. **Recurring decorative elements:** - **Foam-particle fields** — tiny Hokusai-style foam curls and rising bubble-strings, sparse, drifting upward at parallax-varied speeds; denser near a bloom, almost absent in the maximal-ma zones. - **Wrought-coral ironwork** — an Art-Nouveau gate motif (Zone 4) where every iron curl terminates in a coral polyp or anemone; rendered as a single neon stroke against the void. - **The leather badge-tab** — a stitched oxblood rectangle with two brass rivets and a visible saddle-stitch, holding a 6mm cyan pearl; pinned to the right margin as a scroll-depth gauge, then "unfolded" large in Zone 5. Subtle grain, soft inner shadow — the only skeuomorphic, tactile object. - **Sonar rings** — faint concentric circles that ping outward from the badge once when a new zone enters view. - **Current-grain** — an extremely subtle animated noise/flow texture over the whole background, like light filtering through deep water; never loud enough to read as "grunge," just enough to keep the black alive. **Deliberately absent:** stock photography, photographic textures of any kind, gradient-mesh blobs, glassmorphic UI cards, isometric icon sets, chart/data-viz, flat-design illustration crowds. ## Prompts for Implementation Build karmabadge.com as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The whole experience is a **90-second descent** past one breathing emblem. There is **no CTA button, no pricing table, no stats grid, no testimonials, no logo wall, no email capture, no contact form, no FAQ accordion, no cookie banner, no newsletter, no chatbot**. The badge is the product; watching it change is the entire interaction. **Storytelling structure (seven pressure-zones, vertical scroll, morph-driven):** 1. **Zone 0 — The Surface.** Black screen. On load, ~120 foam particles converge from the edges and *form* the Karma Badge at center over ~1.4s (staggered, eased). The chrome rim's specular hotspot then begins tracking the cursor (a single radial-gradient highlight that follows pointer position with spring damping). Tiny `karmabadge` caps fade in 200px below. Hold. Massive empty space above and below — let the user sit in it. 2. **Zone 1 — First Bloom.** As this zone scrolls in, the badge eases to the upper-left third. Three coral-flower paths draw themselves out from the rim into the empty right two-thirds (SVG `stroke-dashoffset` path-draw, ~1s each, staggered 250ms), then their petals "bloom" — a path `d` morph from bud to open via a CSS/JS interpolation. One sentence of Spline Sans fades up in the lower-right negative space. 3. **Zone 2 — The Ledger Tide.** Badge shrinks and parks far right. A horizontal marquee of Major Mono Display glyph-clusters (abstract "remembered deeds") drifts left across the dark mid-band on an infinite, very slow translateX; characters fade at the band edges with a mask-gradient. 75% of the screen stays empty. No headline — let the river be the content. 4. **Zone 3 — The Bruise.** Snap back to a full-black, badge-centered, *large* (480px+) screen with zero text. Triggered when this zone is ≥60% in view: run the **signature morph** — rim ellipse-warp + glass-disc hue rotation toward `#FF2EA6` + a single kelp-tendril "flinch" path-morph + a sonar-ring ping — total ~1.8s, then ease all the way home over ~1.2s. It can loop slowly while the zone is in view. This is the emotional center: a creature wincing at its own bad memory, then recovering. Resist the urge to add any copy here. 5. **Zone 4 — The Grille.** Badge anchors bottom-left. A wrought-coral iron arch path-draws up the left viewport edge (~1.4s), every curl ending in a coral polyp that does a tiny scale-pulse. A few words of Commissioner 300-weight are caught inside the ironwork like a tide-pool. Open darkness fills the rest. 6. **Zone 5 — The Pearl Vault.** The margin leather badge-tab visually "unfolds" into the page (a CSS 3D rotateY flip plus scale-up, ~0.9s) into a single large oxblood-leather panel, placed off-center. It holds the cyan pearl with a slow specular sweep; the brass saddle-stitch path-draws around its border. ~80% of the zone is empty water. One short Spline Sans line beside it. 7. **Zone 6 — The Deep.** Near-total black. The badge is now a tiny distant glow far below center, still doing its slow cyan↔magenta breath. The leather depth-gauge pearl in the right margin has reached the bottom. One final line of `Commissioner` 700-weight tracked caps fades in. Then stillness — let the page end on water, not a button. **Motion & interaction notes:** - Scroll-driven everything: IntersectionObserver per zone, with a smoothed scroll-progress value driving the badge's position interpolation, the margin pearl's vertical travel, and parallax speeds (background grain slowest, foam particles mid, badge fastest). - The **morph** is the through-line — make at least the badge rim, one coral frond, and the Zone-3 bruise all literal SVG path-`d` interpolations, not just transforms. Reuse one small lerp-the-path utility. - Cursor-reactive: the chrome rim's hotspot follows the pointer with spring physics; coral-flowers tilt very slightly toward the cursor (a few degrees max); the pearl gives a soft bloom on hover. - Honor the ma: between zones, *do not animate anything* — let the empty water be silent. The blooms only fire when a zone crosses its threshold. Quiet, then burst, then quiet. - Color logic: cyan = good, magenta = bad, violet = the holographic in-between. Let those three colors do almost all the work; oxblood leather + brass are the only warm exceptions and they belong only to the badge-tab and Pearl Vault. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Seapunk rendered as a single breathing creature in a void, not a pattern wallpaper.** Most aquatic/seapunk-adjacent work tiles dolphins and bubbles edge-to-edge or builds bubble-playful card grids. Here there is one emblem-creature, ~70% empty dark water around it at all times, and the design literally IS that creature changing. Maximal ma fused with maximal-energy seapunk — an unusual collision. 2. **Cold electric ocean punctured by exactly one warm hand-made object.** Every other surface is `#00F0D2`/`#FF2EA6`/`#7C5CFF` neon on `#04060B` black; the lone oxblood-leather badge-tab with brass saddle-stitching (`#5A1C22` + `#C8924A`) is the single tactile, matte, organic thing — and it doubles as a functional scroll-depth gauge. Leather-texture imagery (a 3% rarity) used as a deliberate dissonant accent, not the theme. 3. **Morph as the literal core motion, not a hover garnish.** The badge's rim, a coral frond, and the Zone-3 "bruise" are all real SVG path-`d` interpolations driven by scroll/state — the whole site is one shape that won't hold still — rather than the usual transform-only `morph` tag (11% of the corpus, almost always trivial blob-jiggle). 4. **One typeface family doing every job via its variable axes.** `Commissioner` carries the 900-weight tracked-caps wordmark, the airy 300-weight zone headlines, and the 9px micro-labels — flexing weight, width, and slant instead of stacking a display + body + accent trio. Commissioner-versatile (3% rarity) used as a genuine single-family system, with only Major Mono Display (sonar glyphs) and Spline Sans (rare human exhale) as bit-players. 5. **No conversion furniture at all — the page ends on darkness.** Seven near-empty pressure-zones, zero CTAs/pricing/stats/testimonials/forms, and a closing screen that is mostly black water with a tiny distant glow. The "content" is the silence between blooms. **Avoided patterns from frequency analysis:** no `card-grid`/`centered`/`full-bleed` default layout (using `ma-negative-space`, 6% rarity, with asymmetric badge placement); no `glassmorphism` UI cards or `hand-drawn` illustration; no `photography`/`gradient-mesh` imagery; no `warm`/`gradient`/`pastel` palette default (using `dark-neon`, 5% rarity, in cold oil-slick triads); no `mono` body type as the workhorse — mono is confined to sonar glyphs only. **Chosen seed:** aesthetic: seapunk, layout: ma-negative-space, typography: commissioner-versatile, palette: dark-neon, patterns: morph, imagery: leather-texture, motifs: floral-botanical, tone: energetic