# Design Language for mybadge.page ## Aesthetics and Tone mybadge.page channels a goblincore aesthetic — the celebration of the overlooked, the mossy, the imperfect, and the wonderfully strange applied to a badge display and portfolio page platform. The site embraces the beauty of collected oddities — badges presented like treasures in a moss-covered cabinet of curiosities, each one a peculiar find worth examining closely. Inspiration draws from fairy-tale illustration traditions, the cluttered charm of curiosity shops, the dark whimsy of Guillermo del Toro's visual worlds, and the cottage-in-the-woods aesthetic of Dark Souls concept art. The tone is dreamy-ethereal — soft, wonderstruck language that finds magic in the mundane details of digital achievement. ## Layout Motifs and Structure The layout uses a **modular-blocks** architecture — content organized in distinct, irregularly-sized blocks that feel like display cases in a curiosity cabinet. **Modular Blocks Architecture:** - CSS Grid with auto-fill columns: repeat(auto-fill, minmax(280px, 1fr)) - Blocks vary in padding (20-36px) and background intensity - Feature blocks span 2 columns on desktop - Gap: 14px between blocks - Container: max-width: 1000px centered - Each block feels like a separate specimen drawer **Section Sequence:** 1. **Burrow:** Hero with frutiger-clean title emerging from dark-neon gradient, custom illustrations of mushrooms and moss, tropical-fish decorative elements swimming through shadows 2. **Hoard:** Badge collection in modular blocks — counter-animate interactive displays with custom goblincore illustrations 3. **Findings:** Featured badges in oversized blocks with detailed custom illustrations and specimen-label styling 4. **Forest:** Category navigation through moss-themed modular blocks with tropical-fish accent swimmers 5. **Twilight:** Footer as forest floor — dreamy-ethereal closing with mushroom illustration and soft neon glow sign-off ## Typography and Palette **Typography:** - **Headlines:** "Albert Sans" (Google Fonts) — clean Frutiger-inspired sans at 2rem-2.5rem, weight 700. Its Swiss precision creates deliberate contrast with the organic goblincore visual chaos. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.75. - **Accent:** "Nunito" at 0.85rem, weight 600, italic for specimen descriptions. - **Labels:** "Albert Sans" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Deep Loam:** #0a0c08 — near-black with green tint for dark backgrounds - **Moss Panel:** #141810 — dark mossy green for panels - **Neon Spore:** #60e070 — bright neon green for primary accent - **Neon Fungi:** #d048c0 — neon magenta-purple for secondary accent - **Neon Amber:** #e0a830 — warm neon amber for tertiary accent - **Pale Lichen:** #d8e0c8 — pale green-cream for light text - **Bark Brown:** #2a2018 — warm brown for borders - **Shadow Moss:** #182010 — deep moss for card backgrounds ## Imagery and Motifs **Custom Goblincore Illustrations:** Badge categories illustrated as hand-drawn-style SVG illustrations — mushrooms, crystals, snails, moss patches, and gnarled roots (40-64px). Thin strokes (1.5px) in Neon Spore and Neon Fungi with semi-transparent fills (0.15 opacity). Each illustration captures the peculiar beauty of forest-floor treasures. **Counter-Animate Specimen Numbers:** Badge counts animate as specimen catalog numbers — digits roll sequentially using CSS @keyframes with staggered delays (100ms per digit). Font: monospace styling. The counting creates the cataloging sensation of numbering specimens in a naturalist's journal. **Tropical-Fish Shadow Swimmers:** Small tropical fish (SVG, 18-28px) in Neon Spore and Neon Fungi at 0.06 opacity positioned at the edges of modular blocks and in section margins. Slight rotation (3-12deg). They suggest creatures glimpsed in murky forest pools — present but barely visible. **Dark-Neon Forest Atmosphere:** Dark backgrounds with neon bio-luminescent highlights — radial-gradient(at 40% 30%, rgba(96,224,112,0.04), transparent 50%), radial-gradient(at 60% 70%, rgba(208,72,192,0.03), transparent 50%) on Deep Loam backgrounds. The neon-on-dark creates the bioluminescent quality of a magical forest at night. **Specimen Label Styling:** Each modular block features a small label header — "Albert Sans" at 0.65rem, uppercase, Pale Lichen at 0.5 opacity, with a thin bottom border (1px solid rgba(96,224,112,0.1)). Labels read like museum specimen tags for digital treasures. ## Prompts for Implementation Build the page as a goblincore specimen cabinet. Grid: display: grid, grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)), gap: 14px. Blocks: background: #141810, border: 1px solid rgba(96,224,112,0.08), border-radius: 8px, padding: 24px. Counter-animate: .specimen-count span { display: inline-block; animation: rollIn 400ms ease-out forwards; animation-delay: calc(var(--i) * 100ms); opacity: 0; } @keyframes rollIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } Tropical fish: .fish-shadow { position: absolute; opacity: 0.06; transform: rotate(var(--angle, 6deg)); } Bioluminescent glow: .section-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 40% 30%, rgba(96,224,112,0.04), transparent 50%), radial-gradient(at 60% 70%, rgba(208,72,192,0.03), transparent 50%); pointer-events: none; } Specimen labels: .block-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(216,224,200,0.5); border-bottom: 1px solid rgba(96,224,112,0.1); padding-bottom: 8px; margin-bottom: 16px; } AVOID: Clean portfolio platforms, modern badge dashboards, and sleek credential displays. Let goblincore wonder and dreamy-ethereal language create a badge page where achievements feel like magical specimens in a forest curiosity cabinet. ## Uniqueness Notes 1. **Goblincore for badge display:** Celebrating the overlooked transforms digital badges into precious found treasures worth examining. 2. **Modular-blocks as specimen cabinet:** Irregularly-sized display cases recreate the curious charm of a naturalist's collection drawer. 3. **Counter-animate as specimen cataloging:** Rolling number displays evoke the systematic wonder of numbering forest-floor finds. 4. **Dark-neon as bioluminescence:** Neon accents on deep dark backgrounds create the magical glow of a forest at night. 5. **Tropical-fish as pool creatures:** Barely-visible fish silhouettes suggest hidden life in the murky depths of forest pools. **Seed/Style:** aesthetic: goblincore, layout: modular-blocks, typography: frutiger-clean, palette: dark-neon, patterns: counter-animate, imagery: custom-illustration, motifs: tropical-fish, tone: dreamy-ethereal **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses goblincore aesthetic, modular-blocks layout, dark-neon palette, custom-illustration imagery, and dreamy-ethereal tone.