# Design Language for mybadge.id ## Aesthetics and Tone `mybadge.id` is a **chrome-clad credential altar** — the digital intersection where street-art audacity meets institutional gravitas. Picture the inner sanctum of a graffiti writer who has been hired by a sovereign government: the walls are tagged in luminous silver-chrome spray paint, but the documents on the desk are notarized, embossed, and stamped with the weight of centuries. The site embodies the paradox of **identity as both rebellion and authority** — a badge is at once a street tag and an official seal. The aesthetic vocabulary draws from three converging sources: the metallic sheen of fresh chrome spray-paint on a midnight tunnel wall, the typographic severity of classical Baskerville letterforms, and the blinding lens-flare of a camera catching a polished badge in direct sunlight. The result is a site that reads like a *certified graffiti mural* — street-born but notarized, raw but unmistakable. **Mood:** Authoritative without formality. Bold without noise. The site does not shout — it declares. Like a mayor's signature rendered in spray paint on concrete: official, indelible, permanent. **Tone register:** Commanding declarations. Short sentences that land like rubber stamps. No hedging, no softening — every word earns its place like a hallmark on silver. **Three unique differentiators:** 1. Chrome-metallic graffiti lettering that reads like a gang tag but carries the weight of a government seal — the typography does double duty as both vandalism and validation. 2. Crystalline fracture patterns emanating from the badge center — every credential shatters the background with prismatic authority, like a diamond pressed into concrete. 3. Lens-flare orchestration tied to scroll position — as the visitor descends, the flare angle rotates and bleeds across section breaks, turning the reading experience into a slow-motion flashbulb revelation. ## Layout Motifs and Structure The layout is a **single immersive descending scroll** — one continuous vertical reveal with no traditional navigation, no grid, no cards. The page is architecturally monolithic: a single cylindrical column of experience with a diameter of 100vw, depth established through layered parallax strata. **Structural composition:** - **Viewport-locked hero** (100vh, 100vw): The badge materializes at center screen — raw chrome on black void. The badge is not a logo; it is the *subject*. Behind it, a fractured crystalline wall catches and refracts a single blazing lens-flare that creeps across the opening 3 seconds of load. The wordmark `mybadge.id` is set beneath in Baskerville, as if engraved by a court clerk who tags tunnels at night. - **Dissolution layer** (transition zone, 40vh): As the visitor begins scrolling, the badge *does not leave* — it scales, rotates 4°, and bleeds into the background. The crystalline fracture pattern erupts outward from the badge's edges, filling the screen with angular shards. The lens-flare migrates toward the upper-right corner and dims. - **Content strata** (3 to 5 sections): Each section is full-bleed (100vw, min-height 100vh), differentiated not by color blocks but by *chrome density* — lighter chrome in early sections deepens to near-black mercury by section 3 or 4. No section has borders; they bleed into each other through scroll-triggered opacity shifts. - **Deep anchor** (final CTA zone, 100vh): The screen goes darkest here — near-black with only the faintest chrome sheen. The badge reappears at 20% scale, top-left, like a watermark. One line of Baskerville italic, centered, 48px, sets the command. No buttons — only a single fingerprint-shaped ripple interactive element: tap/click sends a ripple pulse outward and triggers the form flow. **Spatial rules:** - No horizontal splits; the page is strictly one-column narrative - Left margin: fluid 6vw; right margin: fluid 6vw; max-content-width: 880px centered - Section padding: 120px top/bottom on desktop, 64px on mobile - The badge motif appears at 4 scale levels across the page (100%, 60%, 30%, 20%) — each echoing the previous, receding like a reflection in polished metal ## Typography and Palette **Primary display — `Libre Baskerville`** (Google Fonts, wght 400 and 700, with italic). Used for all headings H1–H3 and the wordmark `mybadge.id`. H1 at 88px/1.05 line-height on desktop (clamp(3rem, 9vw, 5.5rem) on fluid), letter-spacing -0.02em, color: #E8EAF0 (near-white chrome). The italics appear exclusively in pull-quotes and declarations — never in body text. The weight differential (400 body, 700 display) creates a visual authority gradient. **Secondary body — `Source Serif 4`** (Google Fonts, variable weight 200–900, optical size axis). Used for body paragraphs, captions, and metadata at 18px/1.75 line-height. Set at wght 360, opsz 16 for reading text; wght 550 for lead paragraphs. Color: #C8CAD0 at 85% opacity on dark backgrounds. **Accent mono — `Space Mono`** (Google Fonts, wght 400 and 700). Used for badge IDs, credential numbers, timestamps, and technical micro-labels. 13px, letter-spacing +0.08em, color: #9FA4B0 — a muted chrome midtone. Appears in uppercase only. **Chrome-Metallic Palette:** - `#0A0B0E` — Void black (page background, deepest layer) - `#1C1F26` — Deep chrome shadow (section backgrounds, alt layers) - `#3A3F4D` — Mid-chrome gunmetal (card backgrounds, subtle dividers) - `#7A8399` — Chrome midtone (body text, secondary UI elements) - `#B8BFCC` — Polished chrome (subheadings, active states) - `#E8EAF0` — Near-white chrome (primary display text, highlights) - `#F5F7FF` — Lens-flare white (flare core, maximum brightness) - `#C8A84B` — Badge gold (accent — used sparingly: seal ring, stamp marks, the single decorative line beneath H1) - `#4A5568` — Storm steel (borders, subtle separators, inactive states) **Gradient vocabulary:** - Chrome sweep: `linear-gradient(135deg, #3A3F4D 0%, #7A8399 40%, #E8EAF0 55%, #7A8399 70%, #3A3F4D 100%)` — for the badge surface and metallic text fills - Void-to-chrome: `linear-gradient(180deg, #0A0B0E 0%, #1C1F26 100%)` — section backgrounds - Lens-flare: `radial-gradient(ellipse 200px 80px at var(--flare-x) var(--flare-y), rgba(245,247,255,0.9) 0%, rgba(200,168,75,0.3) 35%, transparent 75%)` — dynamic, position animated via CSS custom properties ## Imagery and Motifs **No photography.** The imagery vocabulary is entirely generative, geometric, and metallic. **The Badge:** The central motif is an octagonal badge rendered in pure SVG with a chrome-gradient fill, a fine engraved border (2px stroke, dashed at 4px intervals with #C8A84B), and a beveled inner ring. The badge face holds the domain name in Libre Baskerville at the top arc, a crystalline star-burst at center, and a serial number in Space Mono at the bottom arc. The badge is not decorative — it is the site's primary information carrier. **Crystalline fracture pattern:** Irregular Voronoi-tessellated shards that radiate from the badge center outward. Each shard face catches a slightly different shade of chrome from the palette — #1C1F26 to #3A3F4D — creating a faceted mineral depth. Shard edges are sharp, 1px strokes at #7A8399. The pattern occupies the full viewport behind the badge hero, generated via inline SVG with ~200 polygon elements. On scroll, shards nearest the badge *pivot* around their shared vertices (CSS transform rotate, ±2–4°) as if the metal is flexing. **Lens-flare system:** Three layered radial/elliptical gradients composited at different blend modes (screen, overlay) at a single origin point (--flare-x, --flare-y). The flare consists of: 1. A blazing white core (radial, 40px radius, #F5F7FF at full opacity) 2. A gold-haloed mid-ring (radial, 120px radius, #C8A84B at 40% opacity) 3. A streak arm (elliptical, 600×4px, rotated to 30°, rgba(245,247,255,0.15)) The flare origin is controlled by a CSS custom property updated on scroll via requestAnimationFrame — it migrates from center-screen at load to upper-right at 50% scroll depth, then fades. **Ripple interaction motif:** The primary interactive element — replacing a conventional CTA button — is a circular pulse origin point. On hover or touch, it emits 3 concentric chrome rings that expand outward at 0.3s intervals, each ring starting at 100% opacity and ending at 0 at full radius. Ring color: #B8BFCC. Maximum ring radius: 160px. The pulse triggers the credential claim flow. **Graffiti tag accents:** Precisely 3 "tag" elements appear on the page — rendered as SVG paths that mimic a spray-painted bubble letter, but the letter is always a single character (the first letter of a section's key term). Tags appear at ≤40px, slightly rotated (–3° to +5°), in the chrome midtone (#7A8399) at 30% opacity. They are *easter eggs*, not navigation — discoverable only to careful readers. **Chrome spray-drip borders:** Section transitions include a single horizontal rule rendered as an SVG drip pattern — 3–5 downward chrome drips of varying width (4–12px) and height (20–40px), positioned pseudo-randomly across the rule. Color: #3A3F4D. This signals the graffiti DNA without dominating. ## Prompts for Implementation Build `mybadge.id` as a **single-page immersive descent** — one unbroken scroll journey from badge reveal to credential claim. The visitor should feel as though they are *descending into the badge* — the deeper they scroll, the more intimate and authoritative the experience becomes. **Section blueprint (top to bottom):** 1. **VOID INTRO** (0–100vh): Black screen. After 400ms, the badge SVG fades in at center via opacity 0→1 over 800ms (ease-out). Simultaneously, the crystalline fracture pattern erupts outward using a clip-path expanding from 0% to 100% over 1.2s. The lens-flare fires at badge center after 1.0s, then slowly migrates upward-right over the next 3 seconds. The wordmark `mybadge.id` in Libre Baskerville 700 italic, 88px, traces in via SVG stroke-dashoffset animation (1.5s, ease-in-out) below the badge. No navigation bar — only a hairline chrome line at the very top of the viewport. 2. **DECLARATION** (100–200vh): The badge scales to 60% and shifts to upper-left as a content column fades in right-of-center. Three declarative lines in Libre Baskerville 400, 32px: short, stamped sentences that define what a mybadge.id credential means. A chrome-drip SVG rule separates this from the next section. 3. **CREDENTIAL ARCHITECTURE** (200–320vh): Full-bleed dark section (#1C1F26 background). Three feature descriptions arranged as stacked horizontal rows (not cards) — each row is an icon (SVG badge fragment, 40×40px) + heading (Libre Baskerville 700, 24px, #E8EAF0) + body (Source Serif 4, 18px, #C8CAD0). As each row enters the viewport, a ripple pulse emanates from its icon. The crystalline pattern reappears at 15% opacity as a background texture. 4. **AUTHORITY PROOF** (320–440vh): The page deepens to #0A0B0E. A single large pull-quote in Libre Baskerville 400 italic, 40px, centered — a declaration of trust and permanence. Beneath it: three credential metadata lines in Space Mono uppercase, 13px, letter-spacing +0.08em — rendered like a badge serial number block. The badge gold accent (#C8A84B) appears here for the first time as the color of the pull-quote's opening guillemet. 5. **CLAIM PORTAL** (440–540vh): Darkest section. The badge reappears at 20% scale, top-left, watermark opacity (15%). Centered vertically and horizontally: one sentence in Libre Baskerville 700, 48px, #E8EAF0. Below it: the ripple pulse origin point — a 48px circle, #B8BFCC at 60% opacity, with a `+` glyph in Space Mono at center. On hover: the ripple fires, the background briefly brightens to #1C1F26, and the credential claim form slides up from the bottom (transform: translateY(100%) → 0) over 400ms. The form itself uses the chrome palette exclusively — no white boxes, no standard inputs. Text inputs are borderless bottom-line-only, background transparent, text #E8EAF0, placeholder #4A5568. **Animation system:** - All scroll-triggered animations use IntersectionObserver with threshold 0.2 - CSS custom property `--scroll-depth` (0–1) updated via requestAnimationFrame drives flare position and chrome density shifts - Crystalline shard pivot uses CSS transform on individual `` elements; pivots triggered by IntersectionObserver on the hero section - Ripple pulses: pure CSS `@keyframes` scale + opacity on pseudo-elements; JS only sets the origin coordinates on click/tap **Avoid:** - Any CTA block with a button-in-box design — the ripple is the only interactive call-to-action - Pricing tables, stat grids, feature comparison matrices - Light backgrounds (no section should be brighter than #1C1F26 except for lens-flare moments) - Standard nav bars — navigation is scroll-only with a hairline progress indicator at top ## Uniqueness Notes Seed: aesthetic: graffiti, layout: immersive-scroll, typography: baskerville-refined, palette: chrome-metallic, patterns: ripple, imagery: lens-flare, motifs: crystalline, tone: authoritative - **Chrome-graffiti tension:** No other site in the registry combines Baskerville-weight typography with graffiti spray-drip accents and metallic crystalline geometry — this is an unmapped intersection. - **Ripple-as-CTA:** Replacing the conventional button with a touch-sensitive ripple pulse removes every affordance borrowed from form UI conventions — the interaction is haptic-first, gesture-native. - **Scroll-animated lens-flare:** The flare's migration from badge center to viewport corner is a cinematic move not found in any current registry design; it turns the page itself into a slow-exposure photograph of authority being revealed. - **Crystalline-fracture hero:** Using Voronoi shards as the primary background treatment (rather than gradients, particles, or photography) at full SVG resolution gives the site a handcrafted mineral quality — expensive-looking without a single raster image. - **Baskerville + Space Mono pairing:** The serif/mono duality carries the site's thematic split (institutional/digital, analog/cryptographic) through every paragraph without requiring explanation.