# Design Language for mybadge.page ## Aesthetics and Tone **mybadge.page** is the place where identity meets craft — a personal badge-maker, a collector's showcase, a micro-credential display. The aesthetic is **warm glassmorphism draped in jewel-tone velvet**: imagine a Victorian-era jeweler's cabinet where every drawer front is frosted glass, backlit from within by deep amethyst, sapphire, and garnet light. The feeling is not the cold blue frosted glass of SaaS dashboards — it is the warm amber-tinged frosted glass of a 1920s apothecary window at dusk, with rich gem colors burning softly beneath translucent panes. The mood is **warm-inviting** — a collector's joy rather than a product pitch. Visitors are badge-creators and badge-wearers, people who care about tiny squares of meaning pinned to their digital self. The site rewards lingering: hover states that breathe, glass panels that catch imaginary light, subtle paper-grain texture that makes every badge feel like a real physical object worth collecting. **Retro-pattern layering** plays the role of depth: Art Nouveau-adjacent arabesques, fine interlocking hexagonal meshes, and half-drop diamond grids — all rendered as 3–6% opacity SVG fills beneath the glass panels — evoke the printed lining papers inside old wooden display cases. Nothing is kitsch. Everything is quiet and confident. The **duotone-photo** treatment is applied exclusively to background imagery (blurred workshop tableaux, velvet display trays, jeweler's loupe close-ups), color-mapped to two hues from the palette — always Deep Amethyst (#3D1A6B) as shadow and Warm Topaz (#E8A45A) as highlight — giving photographs the look of old bichromate gum prints. This is rare in the registry (2%) and very specific to mybadge.page's collector-artisan persona. --- ## Layout Motifs and Structure The primary layout is a **masonry grid** — but interpreted as a **shadow-box display cabinet**, not a Pinterest feed. Columns are 3 on desktop (280px each, 24px gutters), 2 on tablet, 1 on mobile. Cards in the masonry are of deliberately varied heights (badge cards: ~200px, collection showcases: ~380px, feature spotlights: ~300px) to make the cabinet feel naturally arranged rather than algorithmically sorted. **Macro composition:** Full-viewport hero with centered vertical axis. Beneath the hero, the masonry grid fills the page in three passes: 1. **Hero zone** (100vh): Large frosted glass card centered, badge-builder UI hint, duotone-treated background photograph, headline large and warm. 2. **Gallery zone** (masonry): The showcase — user-created badges rendered in the masonry cabinet. Cards at different heights, each a frosted glass panel with a glowing gem-colored badge inside. 3. **Story zone** (editorial single-column, 640px max-width, centered): How it works — three steps, each in a warm glass card, separated by ornamental dividers drawn from the retro-pattern vocabulary. **No full-width horizontal rules.** Separators are SVG ornamental breaks — thin double lines with a small hexagonal medallion at center, drawn from the retro-patterns motif library. These are used sparingly (max 2 per page). **Spatial logic:** Cards float at Z=0. The grid background (cabinet lining) is at Z=-1. Glass panels have `backdrop-filter: blur(14px) saturate(1.4)`, white noise grain texture at 4% opacity, and a 1px inset highlight on the top and left edges — the jeweler's cabinet glass edge catching light. **No sticky nav, no mega-menu.** A minimal floating pill-nav anchored 32px from top, centered. Pill uses the same frosted glass treatment (blur 20px, border 1px rgba(255,255,255,0.2)), fits 4 links max. --- ## Typography and Palette ### Typefaces (all Google Fonts, verified available) - **Display / Wordmark / Hero Headline:** [Commissioner](https://fonts.google.com/specimen/Commissioner) — weight 300 for the hero subhead, weight 600 for the wordmark and primary CTA. Commissioner is a variable sans with humanist roots; at large sizes its low-contrast strokes and open apertures read as warm and approachable without the sweetness of rounded fonts. Set wordmark at clamp(3.5rem, 8vw, 7rem), letter-spacing -0.02em. - **Card Titles / Badge Names:** [Commissioner](https://fonts.google.com/specimen/Commissioner) weight 500, 1.1rem–1.4rem. Consistent with display for a clean single-family system. - **Body / Descriptions / Step Text:** [Lora](https://fonts.google.com/specimen/Lora) — weight 400 italic for pull-quotes and accent phrases, weight 400 upright for body. Lora's contemporary serifs inject warmth and a faint vintage breath without going full Victorian. Body size: 1rem / 1.7 line-height. - **Badge Labels / UI Micro-text:** [Commissioner](https://fonts.google.com/specimen/Commissioner) weight 400, 0.75rem, letter-spacing 0.06em, uppercase — used for category tags and badge metadata. ### Palette | Role | Name | Hex | |------|------|-----| | Background | Velvet Night | `#1A0D2E` | | Surface (glass base) | Deep Plum | `#2D1552` | | Primary Jewel | Amethyst | `#7B3FBF` | | Accent Jewel | Sapphire Glow | `#2E6DBF` | | Warm Accent | Warm Topaz | `#E8A45A` | | Duotone Shadow | Deep Amethyst | `#3D1A6B` | | Duotone Highlight | Topaz Cream | `#F5D7A3` | | Text Primary | Pale Linen | `#F0EAE0` | | Text Secondary | Dusty Mauve | `#C4A8D4` | | Glass Border | Frosted Edge | `rgba(255,255,255,0.14)` | | Glass Inner Highlight | Specular Line | `rgba(255,255,255,0.22)` | | Gem Garnet | Garnet | `#BF3F5A` | **Color logic:** The dark velvet base (#1A0D2E) anchors everything in deep night. Glass panels sit above it catching Amethyst (#7B3FBF) and Sapphire (#2E6DBF) as inner glow sources (radial gradients at card corners, 35% opacity). The Warm Topaz (#E8A45A) and Topaz Cream (#F5D7A3) are reserved for interactive states, hover glows, and the duotone highlight channel — they warm an otherwise cool-purple palette just enough to feel inviting. --- ## Imagery and Motifs ### Photography All background photography uses the **duotone-photo** treatment: source images are desaturated, then remapped using CSS `mix-blend-mode: color` + two overlay layers — Deep Amethyst (#3D1A6B) at 60% opacity on multiply, Warm Topaz (#E8A45A) at 30% on screen. The resulting images look like bichromate gum prints. Subject matter: close-up velvet trays holding small enamel badges, hands fastening a pin to a jacket lapel, a jeweler's loupe resting on dark cloth. All images are blurred (blur(2px)) and scaled to cover behind glass panels — never shown as crisp standalone photographs. ### Retro-Pattern Library (SVG fills) Three tiling patterns used as low-opacity fills (3–5% opacity, `#C4A8D4` stroke): 1. **Hexagonal mesh** — interlocking regular hexagons at 32px cell size. Used as the cabinet-lining background beneath the masonry grid. 2. **Art Nouveau arabesque** — symmetrical foliage scroll repeating at 80px×80px. Used in hero section side margins and the story-zone card backgrounds. 3. **Half-drop diamond** — 24px diamonds in a half-drop arrangement. Used exclusively on the floating pill-nav backdrop. All three are inline SVG `` elements, never raster images. Stroke only, no fill. Color always `#C4A8D4` (Dusty Mauve) at 4% opacity — subtle enough to read as texture rather than decoration. ### Badge Cards (Core Motif) Each badge in the masonry is rendered as a **frosted glass card with gem-glow inner light**. The badge itself sits centered in the card, surrounded by 24px padding. Behind the badge (still inside the glass card) a radial gradient emits from the badge's dominant color toward the card edges — simulating the glow of a backlit gem in a display case. Badge shapes are square with 12px radius, always displayed at 80×80px or 120×120px. ### Ripple Interaction Pattern The **ripple** pattern is used in one specific, non-generic way: every badge card emits a **jewel ripple** on hover — not a Material Design ink ripple, but a slow expanding ring that looks like a gemstone dropped into still water. The ripple ring uses the badge's dominant color, starts at 0.4 opacity and fades to 0 as it expands to 1.5× the card width. Duration: 800ms ease-out. Only one ripple per hover entry. On tap (mobile), the ripple triggers on touchstart. ### Ornamental Dividers Two SVG ornamental dividers per page max. Each is a 240px-wide centered motif: a pair of thin horizontal rules (1px, `#7B3FBF` at 30% opacity) with a 14×14px hexagonal medallion at center (stroke `#E8A45A`, no fill). The medallion is not decorative empty space — it contains a tiny six-pointed asterisk that echoes badge shapes. --- ## Prompts for Implementation **The story to tell:** A visitor arrives at mybadge.page feeling the same anticipation as opening a new box of enamel pins. The page is their jeweler's cabinet — velvet-dark, glass-fronted, glowing warmly from within. They see badges arranged as if someone has been collecting them for years. The frosted glass breathes. Jewel colors pulse softly. They want to make their own badge immediately — not because a CTA button told them to, but because the cabinet made them feel that their own collection is incomplete. **Hero implementation:** - Full-viewport dark velvet background (#1A0D2E) with the hexagonal-mesh SVG pattern at 4% opacity. - Duotone-treated photograph of a velvet badge tray, positioned as a blurred backdrop (blur 3px, scale 1.05 to hide edges). - Centered large frosted glass card (max-width: 680px, height: auto), padding 48px, with Art Nouveau arabesque pattern at 3% opacity inside. The glass card contains: wordmark "mybadge.page" in Commissioner 600 weight, subheadline in Commissioner 300, and three sample badge thumbnails arranged in a horizontal strip with gem-glow beneath each. - On scroll, the hero card slides up 20px and fades slightly (opacity 0.85), the masonry grid below rises into view. **Masonry grid implementation:** - CSS `columns: 3` on desktop, 2 on tablet, 1 on mobile. No JavaScript masonry library needed. - Each card: `break-inside: avoid`, `border-radius: 16px`, `backdrop-filter: blur(14px) saturate(1.4)`, `background: rgba(45,21,82,0.55)`, `border: 1px solid rgba(255,255,255,0.14)`, `box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 32px rgba(0,0,0,0.4)`. - Corner radial gradients: `::before` pseudo-element with `background: radial-gradient(circle at top-right, rgba(123,63,191,0.35) 0%, transparent 60%)`. - Gem ripple: JavaScript `mouseover` → create absolutely-positioned ring element inside card → animate with CSS keyframes `@keyframes gem-ripple { from { transform: scale(0.2); opacity: 0.4; } to { transform: scale(1.5); opacity: 0; } }`. **Story zone implementation:** - Single centered column, 640px max-width. - Three glass cards (same treatment as masonry cards) stacked vertically with 32px gaps. - Each card: one step number (Commissioner 600, 4rem, Amethyst color, position: absolute top-left), step title (Commissioner 600, 1.4rem), step body (Lora 400, 1rem). - Ornamental divider between cards 1→2 and 2→3. **Animation budget:** Exactly four animation types, no more: 1. Gem ripple on badge card hover (defined above). 2. Glass card lift on hover: `transform: translateY(-4px)` + box-shadow deepens, 200ms ease-out. 3. Hero scroll parallax: background photo at 0.4× scroll speed (CSS scroll-driven animation or simple JS). 4. Masonry entry: cards fade+slide up (translateY 20px → 0, opacity 0 → 1) on IntersectionObserver, staggered 60ms per card, 400ms ease-out. No loop, fires once. **AVOID:** any CTA button that says "Get Started," "Sign Up Free," pricing tables, testimonial grids, feature comparison charts, stat counters, logo bars, footer nav mega-columns. The page is a gallery, not a sales funnel. --- ## Uniqueness Notes 1. **Jewel-tones palette at 1% registry frequency, combined with glassmorphism in a non-SaaS context.** Glassmorphism appears in 21% of registry designs — almost always as cold-blue SaaS UI. mybadge.page repurposes glassmorphism as a Victorian jeweler's cabinet aesthetic with warm amethyst-topaz coloring. No other registry entry uses glass + jewel-tones + collector framing together. 2. **Gem-ripple hover as the sole interactive animation.** The registry uses ripple at 11% but always as Material Design ink spread or water-surface effects. mybadge.page's gem-ripple is a slow, single expanding ring with the badge's own dominant color — conceptually it is a gemstone dropped into dark velvet water, not an ink spread. The interaction is tied to the collector-cabinet metaphor throughout. 3. **Duotone-photo treatment mapped to Deep Amethyst + Warm Topaz.** The registry has duotone-photo at only 2%. Here it is applied specifically as a bichromate gum-print simulation, using exactly the amethyst-topaz duotone pair that matches the jewel-tones palette — making photography feel like it belongs to the collection rather than being a stock background. 4. **Three retro-pattern SVG fills as low-opacity cabinet-lining textures.** Retro-patterns appear at 3% in the registry. Using them as near-invisible depth cues (3–5% opacity) rather than visible decorative elements is uncommon — they read as luxury material texture (velvet weave, cabinet lining) rather than retro decoration. 5. **Commissioner as the sole display and UI font.** Commissioner-versatile appears at only 2% in the registry. Using it exclusively for both headline and UI text (no secondary display face) while pairing it with Lora for body creates a deliberately calm single-axis typographic system that lets the jewel colors and glass effects carry the visual weight.