# Design Language for mybadge.page ## Aesthetics and Tone mybadge.page is **a master engraver's workbench rendered as an Art Deco medallion atelier** — picture the back room of a 1931 Parisian *graveur* who struck commemorative medals for the Exposition Coloniale, except the medals being struck are *yours*: the achievements, memberships, and milestones a person collects across a digital life. The mood is **opulent-grand but hushed** — the reverent quiet of a vault where mint dies are stored in velvet drawers, lit by a single brass desk lamp throwing a warm cone over a circular die-press. Nothing here is "earned" with a confetti burst; a badge is *struck* — pressed into existence under tonnage, the metal flowing into the recessed relief, the rim milled, the surface either left matte or burnished to a mirror by hand. The aesthetic is **art-deco ornate luxury** filtered through the iconography of *minting and heraldry* rather than the usual jazz-age skyscraper-and-sunburst clichés. Think: guilloché engine-turning (the hypnotic interwoven lattice on the back of pocket watches and banknotes), sunray relief, fluted reeding, laurel and oak-leaf wreaths, the strict geometric symmetry of a coin's field. The tone of voice is that of a credentialing house with three centuries of provenance: it does not shout that it is prestigious; it simply *is*, the way a hallmark stamped into silver is. Visitors should feel they have walked into somewhere that takes the weight of a badge seriously — that a badge here is a small monument, not a sticker. This is deliberately the **anti-gamification** badge site. No XP bars, no streak flames, no neon "LEVEL UP." The dopamine is replaced by *gravitas*: the slow descent of a press, the cooling glow of fresh strike, the soft click of a medallion settling into its case. ## Layout Motifs and Structure The spine of the page is a **hexagonal-honeycomb lattice** (only 2% of designs use this — claiming that empty room). Every badge, every section marker, every navigational node is a regular hexagon — the shape of a die-collar, the shape of an honor-comb of medals laid in a presentation tray. Hexagons tessellate edge-to-edge with a 2px brass keyline between cells. The honeycomb is **not** a card-grid: cells are different sizes (a featured badge spans a "super-hex" of seven fused cells), the comb flows organically around a central axis, and empty cells are not empty — they hold faint guilloché engine-turning, like un-struck planchets waiting in the tray. The page reads as **five chambers of the atelier**, scrolled vertically as a single immersive route — no top nav bar, no footer link-farm, no CTA banner: - **Chamber I — The Vault Door.** Full-bleed black field. Dead center, a single colossal hexagon slowly rotating 0.5°/sec, its face a mirror-burnished gold disc carrying nothing but the wordmark *mybadge* engraved in incuse (recessed) Art Deco capitals. Around it, a ring of twelve small dark hexagons, each holding a dim guilloché pattern. As the cursor approaches the central hex, the brass desk-lamp cone (a radial gradient) tilts to follow — *magnetic light*, not magnetic button. There is no instruction. The only affordance is the scroll, which reads as *lowering yourself toward the workbench*. - **Chamber II — The Planchet Tray.** The honeycomb fans open: dozens of blank hexagonal planchets in matte champagne-gold, arranged in a slightly curved comb that bows toward the viewer. Each, on hover, lifts 4px and its guilloché lattice begins to *spin* in place (a slow rotary engine-turn). This is the "what a badge can be" gallery — but the badges are still blank, still potential. - **Chamber III — The Strike.** The dominant chamber. A single super-hex (seven fused cells) centered on screen, holding a blank planchet. As the visitor scrolls *into* it, the chamber darkens at the edges (vignette closes like a press housing descending), a SVG die-face draws itself stroke-by-stroke above the planchet (path-draw, 1.8s), then *descends* — the planchet's surface morphs: the relief rises, the rim mills itself with a ring of reeding marks drawn one tick at a time, a laurel wreath unfurls around the field via stroke-draw. On completion the new badge flares with a brief specular sweep (a diagonal band of white moving across the gold) and settles. This is the centerpiece interaction: a badge being *minted* in front of you. - **Chamber IV — The Presentation Case.** The freshly struck badge drops into a honeycomb of velvet-lined hexagonal recesses — a French jeweller's tray. Other badges already rest there. Hovering a recess raises its badge slightly and rotates it ~12° so the raking light catches the relief. This chamber tells the *collection* story — a life's worth of small monuments in one case. - **Chamber V — The Hallmark.** Quiet coda. The honeycomb collapses to a single tiny hexagon bottom-center holding an engraved hallmark cartouche (the way silver carries an assay mark). Above it, one line of incuse Deco capitals. The brass lamp dims to a coal. End of route. Composition rules: strict bilateral symmetry within each hexagon's interior (coins are symmetric); the overall comb may be asymmetric in flow but every individual cell is a perfect mirror. A persistent 0.5px brass hairline frames the entire viewport like the milled edge of a coin. Vertical rhythm is measured in "strikes" — each chamber transition is one press-stroke down. ## Typography and Palette **Fonts — all Google Fonts, three voices, never blended:** - **Display, wordmark & chamber numerals — *Poiret One*** (Google Fonts). A genuine Art Deco geometric capital — hairline strokes, perfect circles, the elongated elegance of 1920s travel-poster lettering. Used at large sizes for "mybadge", chamber titles (set as Roman numerals: I, II, III, IV, V), and rendered as **incuse** type: dark text with an inner shadow so it reads as *pressed into* the gold rather than printed on it. Tracked very wide (0.25em) — the spacing of engraved monumental lettering. - **Engraved labels & badge inscriptions — *Cinzel*** (Google Fonts). A serif modeled on Roman inscriptional capitals — exactly the lettering you find running around the rim of a commemorative medal. Used for the text that lives *on* a badge: "MEMBER", "FOUNDING COHORT", years, mottoes. Always all-caps, always curved along the hexagon's inner edge where possible, weight 400–600. - **Body & atelier annotations — *Cormorant Garamond*** (Google Fonts), weight 400 with 500 italic for asides. The rare paragraphs of running text (the engraver's notes, the provenance descriptions) are set in this old-style serif at generous 1.7 leading, narrow measure (52ch max), the way a connoisseur's catalogue entry reads. **Palette — gold-black-luxury, the field of a struck medal:** - `#0A0907` — *vault black*. The dominant ground. Not pure black — a warm near-black, like the inside of a velvet case. - `#1C1814` — *die steel*. Slightly raised panels, the press housing, recessed hex cells. - `#C9A227` — *struck gold*. The primary metallic — the burnished face of a fresh strike. Used for incuse type fills, keylines, the wordmark disc. - `#E8D08B` — *champagne planchet*. The pale, matte, un-burnished gold of a blank planchet and of highlights catching raking light. - `#8C6A1A` — *aged bronze*. Deep shadow tone within metallic relief, the recesses of guilloché engraving. - `#F4ECD8` — *ivory cartouche*. Near-white, used sparingly — the hallmark cartouche background, the specular sweep, the single brightest text. - `#6E1414` — *seal red*. The lone non-metallic accent: a deep oxblood lacquer, used like a wax seal — for the active-state dot, the seal-red ribbon on a featured badge, never more than ~2% of the screen. Gradients are **conic and radial only** (the geometry of coins and lamplight), never linear top-to-bottom: conic gradients sweeping `champagne planchet → struck gold → aged bronze → struck gold` around a hexagon's center to fake metallic rotation; a radial `#C9A227` at 8% → transparent for the desk-lamp cone. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Every visual is hand-built SVG and CSS** — appropriate for a domain about engraving, where the line *is* the artifact. - **Guilloché engine-turning.** The signature texture: interlaced rosette curves (hypocycloid / spirograph math) drawn as fine SVG paths in `aged bronze` on `die steel`, at ~0.4px stroke. Every blank planchet, every empty hex cell, the page background's faint watermark. On hover, the rosette *rotates* — a real `rotate()` animation around the cell center, 8s per revolution, conveying the spin of a rose-engine lathe. This is the design's hero motif and it appears on essentially every surface at varying opacity (3%–100%). - **Reeding / milled rim.** Hexagon borders aren't plain strokes — they're rows of tiny radial ticks (the milled edge of a coin), drawn via `path-draw-svg` one tick at a time when a cell activates. The mint-mark detail nobody else has. - **Laurel & oak wreaths.** Around featured badges, a wreath of leaves drawn in `struck gold` line-art, unfurling via stroke-draw (`stroke-dashoffset` animation) — leaves appearing one pair at a time from the bottom, meeting at a `seal red` ribbon knot at top. - **Sunray relief.** Behind the central wordmark disc and behind a freshly struck badge: a fan of thin radiating gold lines (the classic Deco sunburst, but executed as *engraved relief* — alternating raised/recessed via paired light/dark lines), expanding outward on a `morph`/`scale` ease. - **Heraldic field divisions.** Section dividers borrow shield-heraldry: a hexagon "party per fess" or "per pale" — split into two metallic tones along a precise geometric line, the way a coat-of-arms field is quartered. - **Specular sweep.** The "freshly minted" signal: a narrow diagonal band of `ivory cartouche` at low opacity slides across a gold surface once, then never repeats for that badge — the catch of light on metal that just left the press. - **Hallmark cartouches.** Small lozenge/oval frames containing tiny assay-style marks (a stylized hex, a year, a maker's punch) — the way real silver is hallmarked. Used as the site's "signature" in the final chamber. - **The brass lamp cone.** A single warm radial gradient, the only "lighting" in the scene, that subtly tracks the cursor (magnetic light) — never harsh, ~8% peak opacity, blend-mode `screen` over the vault black. ## Prompts for Implementation Build mybadge.page as **a single-route, vertically scrolled, five-chamber atelier** — one HTML file, one CSS file, one JS module. Treat the scroll as a slow descent toward an engraver's workbench, then a walk through five rooms where blank metal becomes a struck monument. The whole experience should run ~75–90 seconds at a calm scroll pace and feel like handling something heavy and valuable. **Hard biases for the engineer:** - **No CTA. No pricing block. No stat-grid. No testimonial row. No email-capture bar. No top navigation, no mega-footer.** The page does not "convert" — it *demonstrates the act of minting a badge*. The only affordance on first load is scrolling. Do not add a "Get Started" button. Do not explain the interface. - **The Strike (Chamber III) is the soul of the build.** Invest the most engineering here. Sequence on scroll-into-view: (1) edge vignette closes 0→1 like a press housing descending; (2) an SVG die-face draws itself above the planchet via `stroke-dashoffset` over ~1.8s; (3) the die "descends" (translateY + scale) and on contact the planchet's relief rises — use stacked SVG layers with light/shadow line-pairs that go from coincident to offset to simulate emboss depth; (4) the milled rim draws tick-by-tick; (5) a laurel wreath unfurls leaf-pair by leaf-pair; (6) a single `ivory cartouche` specular band sweeps across once; (7) the badge settles with a tiny `spring` overshoot and a 0.3°/sec idle rotation begins. If you build only one thing well, build this. - **Guilloché is non-negotiable and must be real.** Generate the engine-turned rosettes procedurally in JS (parametric hypocycloid curves → SVG ``), not as a flat image. Render them on every blank planchet and empty hex cell. On hover, rotate the rosette group around its center, 8s/rev. Vary the rosette's lobe-count per cell so no two look identical (seeded by cell index). - **Honeycomb layout via real geometry.** Hexagons positioned with offset rows (`clip-path: polygon(...)` for the hex shape, CSS grid or absolute math for the comb). The featured "super-hex" is seven hexes fused — render it as one large hex, not a faked group. Cells must be different sizes; this is not a uniform card grid. - **Motion vocabulary:** `path-draw-svg` (die-face, milled rim, wreath, sunray relief) is the primary technique — lean on it heavily (it's only 39% used and most underused for *ornamental* engraving rather than icons). Add `morph` for the relief rising, `spring` for badges settling into the case, `magnetic` applied to the *lamp light cone* and to badges (not buttons), `tilt-3d` (~12°) when hovering a badge in the presentation case so raking light catches the relief, `border-animate` for the milled rim. **Avoid `cursor-follow` cursors, `card-flip`, `typewriter-effect`, and confetti/`bounce-enter` entirely** — they cheapen the gravitas. - **Lighting model:** the page has exactly one light source — the brass desk lamp (a radial gradient that lerps toward the cursor with heavy damping). Metallic surfaces get their "shine" from conic gradients rotating relative to that implied light, never from baked highlights. Vault black everywhere else. - **Sound is optional** but if added: a single low *chunk* of a press striking on Chamber III completion, nothing else. Respect `prefers-reduced-motion` — rosettes hold still, the strike sequence becomes a 2-step crossfade (blank → struck), the lamp stays centered. - **Typography in metal:** render `Poiret One` headings as *incuse* — dark text fill with an inset text-shadow (or a light "rim" pseudo-element offset 1px) so type reads as pressed into gold. `Cinzel` inscriptions should curve along hexagon inner edges using SVG `` on a hexagonal path wherever a badge carries a rim legend. ## Uniqueness Notes Differentiators from every other site in the batch: 1. **Minting/engraving as the entire interaction grammar.** A badge here is *struck under a press*, not "unlocked" — the centerpiece is a die descending onto a planchet with relief rising, milled rim drawn tick-by-tick, wreath unfurling, specular sweep. No gamification site in the batch treats achievement as *numismatics*. The honeycomb is a presentation tray of medals, not a card grid. 2. **Procedural guilloché engine-turning as the hero texture.** Real parametric rosette curves generated in JS and rotated like a rose-engine lathe, on every surface. This is a craft-specific texture (banknotes, pocket watches, medals) that no template carries — and it directly mirrors the domain (engraving) rather than being decorative wallpaper. 3. **Single-light-source "vault" rendering.** The whole page lit by one cursor-tracking brass-lamp radial gradient over warm near-black, with all metallic shine faked via *rotating conic gradients relative to that implied light* — never baked highlights. A coherent physical lighting model rather than flat-design or glassmorphic blur. 4. **Aggressively anti-dopamine, anti-photography, anti-CTA.** Five-chamber immersive scroll, zero buttons/pricing/stats/testimonials/email-capture, zero photography or 3D renders — 100% hand-built SVG/CSS, in deliberate opposition to the 98%-photography / 78%-glassmorphism / 96%-hand-drawn norms in the frequency analysis. 5. **Art Deco rendered as *monumental engraving*, not jazz-age skyscrapers.** Poiret One incuse capitals, Cinzel inscriptional rim-legends, hallmark cartouches, heraldic field divisions, laurel/oak wreaths, fluted reeding — the credentialing-house provenance vocabulary, not the usual sunburst-and-chevron Deco shorthand. Chosen seed/style: **art-deco ornate luxury** — *aesthetic: art-deco; layout: hexagonal-honeycomb; typography: art-deco-display (Poiret One) + Cinzel inscriptional; palette: gold-black-luxury; patterns: path-draw-svg + morph + spring + magnetic + tilt-3d + border-animate; imagery: vector-art / line-illustration (procedural guilloché); motifs: marble-classical / sharp-angles (heraldic, numismatic); tone: opulent-grand.* Avoided overused patterns from the frequency analysis: no `photography` (98%), no `glassmorphism` (78%), no `hand-drawn` (96%), no `card-grid` (90%), no `centered`-only generic layout, no `cursor-follow` custom cursor (89%), no `card-flip` (11%), no `typewriter-effect` (12%), no linear gradients in the dominant `gradient` (95%) sense — conic/radial only. Claimed the underused `hexagonal-honeycomb` layout (2%), `diagonal`/`heraldic` field divisions, and ornamental (not iconographic) `path-draw-svg`.