# Design Language for mybadge.id ## Aesthetics and Tone mybadge.id channels a graffiti aesthetic — the raw, expressive energy of street art applied to a digital badge and identity platform. The site feels like walking through an underground gallery where every credential is a tag, every achievement a mural, and every user profile a wall of personal expression. Inspiration draws from Banksy's subversive installations, the typographic chaos of vintage concert posters, the layered textures of urban walls, and the vibrant identity of skateboard deck art. The tone is playful — irreverent, witty language that makes digital identity feel like self-expression rather than bureaucracy. ## Layout Motifs and Structure The layout uses an **organic-flow** architecture — content arranged in natural, flowing compositions that echo the unpredictable placement of street art on urban surfaces. **Organic Flow Architecture:** - Content blocks positioned with organic spacing (margin variations 24-64px) - Elements flow around each other with CSS shape-outside for text wrapping - No rigid grid — blocks overlap slightly at edges (negative margins -8px to -16px) - Feature sections break free of containment with overflow: visible - Container: max-width: 960px centered with 32px padding **Section Sequence:** 1. **Tag:** Hero with eclectic-hybrid title sprayed across earth-tone gradient, candle-atmospheric glow effects, minimal vector badge icon 2. **Wall:** Badge gallery in organic-flow layout — counter-animate interactive badge cards with spray-paint texture borders 3. **Crew:** Community section with overlapping profile blocks and graffiti-style name treatments 4. **Stash:** Badge collection display in loose organic arrangement with candle-atmospheric accent lighting 5. **Peace:** Footer as artist sign-off — playful closing with spray-can flourish and community tag ## Typography and Palette **Typography:** - **Headlines:** Mixed "Bebas Neue" (Google Fonts) condensed sans at 3rem weight 400 with "Caveat" (Google Fonts) handwritten at 1.2rem weight 700 — the eclectic hybrid creates street-art energy meeting bold statement. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Caveat" at 1.5rem, weight 400 for badge descriptions and tags. - **Labels:** "Bebas Neue" at 0.75rem, weight 400, uppercase, letter-spacing 0.1em. **Color Palette:** - **Clay Brown:** #6b4c3b — warm earth brown for primary surfaces - **Ochre Gold:** #c8a040 — rich ochre for primary accent - **Rust Red:** #b84830 — warm rust for secondary accent - **Sage Dust:** #8a9878 — dusty sage for tertiary accent - **Cream Wall:** #f0e8d8 — warm cream for light backgrounds - **Charcoal:** #1a1814 — warm charcoal for dark sections - **Text Earth:** #2a2420 — earth-toned near-black for body text - **Border Dust:** #c8b898 — dusty border color ## Imagery and Motifs **Minimal Badge Icons:** Achievement badges rendered as simple geometric SVG icons (32-48px) — circles, shields, stars with thin strokes (1.5px) in Ochre Gold and Rust Red. Each badge a clean symbol suggesting spray-stencil simplicity rather than elaborate illustration. **Counter-Animate Badge Reveals:** Badge cards feature counter-animated number displays — achievement counts roll up from 0 using CSS counter animation (counter-reset, counter-increment with @keyframes). Numbers appear to spray onto cards character by character over 600ms with ease-out timing. **Candle-Atmospheric Glow Effects:** Warm glowing spots (radial-gradient in Ochre Gold at 0.06 opacity, 200-400px radius) placed behind key content areas. The candlelight quality creates intimate gallery lighting against the raw street aesthetic — like viewing graffiti by warm lamplight. **Earth-Tone Spray Textures:** Section backgrounds use layered earth-tone gradients — linear-gradient(160deg, rgba(107,76,59,0.04), rgba(200,160,64,0.03)) with subtle noise texture (background-image: url() with SVG noise filter at 0.02 opacity). The texture suggests weathered urban walls. **Organic Overlap Compositions:** Content blocks positioned with slight overlaps — margin-top: -12px on alternating elements, with z-index layering creating depth. Box shadows (0 4px 16px rgba(26,24,20,0.08)) lift foreground elements off the background wall. ## Prompts for Implementation Build the page as a graffiti badge gallery. Container: max-width: 960px, margin: 0 auto, padding: 60px 32px. Organic flow: vary margins between sections (40-80px). Counter-animate: .badge-count { animation: countUp 600ms ease-out forwards; } @keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } Candle glow: .glow-spot { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(200,160,64,0.06), transparent 70%); pointer-events: none; } Organic overlap: .badge-card { margin-top: var(--offset, 0px); position: relative; z-index: var(--z, 1); } .badge-card:nth-child(even) { margin-top: -12px; } Earth texture: .section-earth { background: linear-gradient(160deg, rgba(107,76,59,0.04), rgba(200,160,64,0.03)); } AVOID: Corporate badge platforms, gamified achievement dashboards, and sterile credential displays. Let graffiti expressiveness and playful irreverence create a badge platform where identity feels like personal street art. ## Uniqueness Notes 1. **Graffiti for digital identity:** Street art energy transforms credential display into personal expression and self-styled identity. 2. **Organic-flow as urban wall:** Non-grid compositions recreate the unpredictable, layered quality of street art placement. 3. **Counter-animate as spray reveal:** Rolling number animations suggest the dynamic process of tagging and marking achievements. 4. **Candle-atmospheric as gallery lighting:** Warm glowing spots create intimate viewing conditions for the raw street aesthetic. 5. **Earth-tone palette as urban surface:** Warm browns, ochres, and rusts ground the platform in the materiality of weathered walls. **Seed/Style:** aesthetic: graffiti, layout: organic-flow, typography: eclectic-hybrid, palette: earth-tones, patterns: counter-animate, imagery: minimal, motifs: candle-atmospheric, tone: playful **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 graffiti aesthetic, organic-flow layout, earth-tones palette, minimal imagery, and playful tone.