# Design Language for gamelicensor.com ## Aesthetics and Tone gamelicensor.com is a street-level authority -- a graffiti-tagged wall that doubles as an official licensing bureau, where spray-painted murals frame glassmorphic permit cards and the raw energy of street art collides with bureaucratic legitimacy. The graffiti aesthetic brings unauthorized visual power: drip effects, spray-fade gradients, stencil-cut type, and the fearless color usage of artists who paint without permission. But this energy serves institutional content -- game licensing -- creating a paradox of rebellion and regulation. The tone is raw-authentic -- unpolished, direct, speaking the language of the street rather than the boardroom. The site acknowledges that game licensing is often inaccessible and bureaucratic, then deliberately presents it in the most accessible, street-level visual language possible. This is licensing for everyone, painted on every wall. Visual inspiration: Banksy's stencil work applied to legal documents; the colorful chaos of a Brooklyn warehouse turned art gallery; the glassmorphic UI cards of modern fintech overlaid on concrete-texture walls; the hand-painted game shop signs of Akihabara's back streets. ## Layout Motifs and Structure The layout uses a **hero-dominant** structure -- an enormous hero section that establishes the graffiti atmosphere, followed by progressively structured content sections that represent the transition from street to office. **Hero-Dominant Architecture:** - Hero: 100vh, full-width, with a concrete/brick texture background - Below: content becomes increasingly organized (from scattered to gridded), representing the licensing process -- chaos to order - Max-width: 1080px for content sections **Section Flow:** 1. **The Wall (Hero):** 100vh. Concrete texture background. "GAMELICENSOR" in serif-revival stencil-style type (letterforms with gaps suggesting spray-through). ".COM" smaller, dripping paint effect (SVG drip paths below the letters). Glassmorphic cards float over the wall with key statements. 2. **The Tags:** Semi-organized content -- glassmorphic cards at various angles (rotated 1-5deg), each containing a licensing concept. The cards overlap slightly, as if pinned to the wall at hasty angles. 3. **The Mural:** A full-width section with a single large statement in candy-bright type, surrounded by spray-fade gradient effects (radial gradients mimicking spray paint). 4. **The Permit Office:** Content becomes gridded -- clean rows of glassmorphic cards with no rotation, representing the formal side of licensing. The graffiti elements fade but don't disappear. 5. **The Signature:** Domain name with a spray-paint drip effect, nature motif (leaf stencil) beside it. ## Typography and Palette **Typography:** - **Display / Headlines:** "Roboto Slab" (Google Fonts) -- a bold slab serif that reads as stencil-cut when combined with strategic letter gaps and heavy weight. Used at 4rem-8rem for hero text. Weight: 700. The geometric foundations of Roboto Slab create letterforms that feel engineered from concrete, while the slab serifs give the stencil-cut quality essential to the graffiti aesthetic. - **Body / Content:** "Source Sans 3" (Google Fonts) -- a clean, modern sans-serif designed for clarity and readability at all sizes. Used at 16px/1.6 for glassmorphic card text. Weight: 400 for body, 700 for headings. The neutral clarity of Source Sans contrasts with the raw, heavy display type, creating the tension between street chaos and institutional legibility. - **Accent / Labels:** "Permanent Marker" (Google Fonts) -- a hand-painted marker typeface used sparingly at 14px for graffiti-style annotations and labels. Paired with Source Sans for readability, Permanent Marker appears at most 5 instances across the site to prevent readability degradation. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Concrete Base | Grey-brown | #4a4440 | Hero background texture base | | Brick Warm | Red-brown | #6a4438 | Texture variation in hero | | Candy Pink | Spray paint pink | #ff44aa | Primary graffiti accent, drip effects | | Candy Yellow | Spray paint yellow | #ffdd33 | Secondary graffiti accent, highlight tags | | Candy Cyan | Spray paint teal | #33ddcc | Tertiary graffiti accent, card borders | | Glass Surface | Frosted white | rgba(255, 255, 255, 0.12) | Glassmorphic card backgrounds | | Glass Border | Semi-visible | rgba(255, 255, 255, 0.2) | Glassmorphic card borders | | Text on Glass | Near white | #f0f0f0 | Text inside glassmorphic cards | | Text on Concrete | Chalk white | #e0dcd8 | Text on concrete backgrounds | | Nature Green | Stencil leaf | #44aa66 | Nature motif stencil color | The palette is candy-bright on concrete -- vivid spray-paint colors against raw grey-brown surfaces. The glassmorphic cards add a translucent layer that softens the graffiti energy for readable content areas. ## Imagery and Motifs **Glassmorphic Cards:** Content is presented in glassmorphic-cards: - Background: rgba(255, 255, 255, 0.12) with backdrop-filter: blur(20px) - Border: 1px solid rgba(255, 255, 255, 0.2) - Border-radius: 16px - These cards float over the concrete/graffiti background, creating a layer of institutional order above street-level chaos **Nature Motifs as Stencil Art:** Nature motifs appear as graffiti stencils: - Leaf silhouettes spray-painted in nature green (#44aa66) on the concrete background - A tree-branch stencil along the left edge of the hero section - These nature elements are rendered as if spray-painted through a cut stencil: hard edges, slight spray-over at boundaries - CSS implementation: SVG clip-path shapes with radial-gradient fills that have soft edges **Fade-Reveal Animation:** Content sections fade into visibility on scroll: - Elements begin at opacity: 0 and transition to opacity: 1 over 600ms - The hero's glassmorphic cards fade in with a 200ms stagger - Graffiti elements (drips, spray-fades) appear 300ms after the text they accompany - The fade-reveal is subtle, not dramatic -- content appears as if being illuminated by a passing headlight ## Prompts for Implementation **Full-Screen Narrative Experience:** The progression from raw graffiti wall (hero) to increasingly organized content (cards, then grid) represents the licensing journey itself: from unauthorized creation to official legitimacy. The glassmorphic cards are permits floating above the street. **Concrete Texture:** Hero background: #4a4440 base with SVG feTurbulence (baseFrequency: "0.9 0.6", numOctaves: 4) at 12% opacity. Add a brick-pattern overlay using CSS repeating-linear-gradient for horizontal mortar lines. **Spray-Paint Drip Effect:** Below hero text, SVG paths representing paint drips: irregular vertical paths with slight curves, filled with candy pink (#ff44aa). Each drip is 2-6px wide and 30-80px long. 3-5 drips per word, positioned at the bottom of random letterforms. **Responsive Behavior:** On mobile (below 640px), glassmorphic cards go full-width. Hero text scales to 3rem. Stencil nature elements scale down. The graffiti-to-order progression is maintained. Card rotations reduce to 0. **AVOID:** Corporate photography, clean geometric layouts, muted colors, cookie consent popups, anything sterile or institutional-looking. ## Uniqueness Notes **Differentiators from other designs:** 1. **Graffiti aesthetic (5% frequency):** One of the rarest aesthetics, and the only design that uses spray-paint visual language for institutional licensing content. 2. **Glassmorphic cards on concrete texture:** The collision of modern glassmorphism (5%) with raw concrete graffiti creates a unique layered aesthetic -- permits floating above the street. 3. **Progression from chaos to order as visual narrative:** The hero-dominant layout (5%) is used to create a visual journey from street art to institutional grid, unique in the collection. 4. **Nature motifs as graffiti stencils:** Nature (22%) is typically presented organically. Here, nature elements are spray-painted stencils on concrete -- street-art ecology. 5. **Candy-bright palette on concrete (7% for candy):** The specific combination of vivid spray-paint colors on grey-brown concrete is unique in the collection. **Documented Seed/Style:** aesthetic: graffiti, layout: hero-dominant, typography: serif-revival, palette: candy-bright, patterns: fade-reveal, imagery: glassmorphic-cards, motifs: nature, tone: raw-authentic **Avoided Overused Patterns:** - corporate aesthetic (62%) -- graffiti (5%) instead - asymmetric layout (94%) -- hero-dominant (5%) instead - warm palette (100%) -- candy-bright (7%) instead - parallax patterns (98%) -- fade-reveal (3%) instead - mono typography (98%) -- serif-revival (9%) instead - tech motifs (96%) -- nature (22%) instead - friendly tone (64%) -- raw-authentic (1%) instead - minimal imagery (94%) -- glassmorphic-cards (5%) instead