# Design Language for gamelicense.info ## Aesthetics and Tone gamelicense.info is the brutalist arcade lobby of the post-streaming era -- a public information desk for the question "who actually owns this game?" reimagined as a concrete plaza painted with neon traffic-paint, where every signpost is a slab of raw material and every wayfinding arrow glows like a 24-hour bowling alley sign at 3 AM. The aesthetic is uncompromisingly **brutalist** in its structural honesty (exposed grids, unvarnished sans-serif numbering, declarative signage) yet riotously **dopamine-neon** in its surface treatment: the building is bare cast concrete, but the interior signage is electric tangerine, sour-apple green, hot-magenta, and saturated lemon, painted directly onto the slab with no finesse and no apology. The tone is **warm-inviting** in spite of (and because of) the brutalism. This is not the frigid concrete-and-typewriter aesthetic of trad neubrutalism. It is more like a community recreation center designed by a graphic-design student who loves both Aldo Rossi and Lisa Frank: the bones are heavy, the labels are loud, the welcome is real. Inspirations include the wayfinding system of the 1972 Munich Olympics, Brazilian roadside hand-painted lottery booths, the original arcade marquee aesthetic of Tokyo's Shinjuku game-center alleys around 1985, the lottery-ticket-Riso-print color theory of Risograph zines, and the unselfconscious blocky exuberance of a child's wooden block tower painted in primary fluorescents. The site exists to demystify game licensing -- ROM rights, emulation legality, regional license transfers, IP chain-of-custody, abandonware status -- a topic that is genuinely intricate and frequently obfuscated by lawyers. The brutalist frame says "we are telling you the structure plainly." The dopamine palette says "this can actually be enjoyable." The wave-form motif (running banners, flag-like ribbons, sine-wave underscores) says "this is alive, not paper." ## Layout Motifs and Structure The layout is governed by **diagonal-sections** -- the page is sliced from upper-left to lower-right (and occasionally counter-diagonally) by hard, unmistakable concrete-slab boundaries set at a fixed 12-degree rake. These diagonals are NOT decorative trim; they are load-bearing. Each diagonal panel is its own colored concrete wall, and content sits on the wall as if hand-painted, with type rotated to the panel's normal axis (not the page's), so reading the site feels like walking through an open-air pavilion where you turn your head from one signboard to the next. **Primary structural units (top to bottom):** - **Slab 00 -- The Entrance Marquee (0-100vh):** A single full-bleed concrete wall in cool gray (#cfcdc7) sliced diagonally at 12deg. The upper triangle is bare slab; the lower triangle is a saturated **Acid Lime** (#c4ff3d) panel with the wordmark "GAMELICENSE.INFO" set in geometric-sans at clamp(4rem, 14vw, 11rem), letter-spacing -0.04em, painted directly onto the slab in **Ink Black** (#0a0a0a). A slow slide-reveal pulls each letter in from below the diagonal seam, as though stenciled by a passing roller. Beneath the wordmark, a single line of **Hot Tangerine** (#ff5a1f) wave-form ribbon scrolls horizontally with the running text "PUBLIC LICENSING DESK -- OPEN 24H -- BRING THE CARTRIDGE -- BRING THE CONTRACT". - **Slab 01 -- The Index of Concerns (100-200vh):** Counter-diagonal slice at -12deg. The page splits into a **Magenta Brick** (#ff2e88) upper triangle and a **Sodium Yellow** (#ffd60a) lower triangle. On each, an oversized numbered list of seven concerns ("01 / WHO HOLDS THE TRADEMARK", "02 / IS THE ROM ABANDONED", "03 / DOES YOUR REGION GRANT EXEMPTION", ...) painted in Ink Black geometric-sans, where the numerals are roughly 4x the size of the labels. The numbers themselves are framed by hand-drawn-style chunky concrete-frame outlines (4px solid Ink Black, no rounding, slight rotation per item between -3deg and +3deg). - **Slab 02 -- The License Spectrum (200-320vh):** A diagonal panel in **Cobalt Slab** (#0046ff) running edge-to-edge, on which a horizontal wave-form chart (sine-wave undulation) maps license states left-to-right: PUBLIC DOMAIN -> CREATIVE COMMONS -> ABANDONWARE-DE-FACTO -> EXPIRED-COPYRIGHT-ZONE -> ACTIVELY-LICENSED -> DRM-LOCKED. Each phase is a vertical concrete pillar with its label rotated 90deg, and the wave runs above them like a power cable. As the user scrolls, a slide-reveal exposes each pillar successively, and the wave re-draws using path-draw-svg with stagger delay 120ms per segment. - **Slab 03 -- The Cartridge Wall (320-440vh):** Diagonal at +12deg, upper triangle bare gray slab, lower triangle a **Bone Cream** (#f5efe2) panel. Across it, vector-art line-illustrations of generic cartridge silhouettes (NES-shape, SNES-shape, Genesis-shape, Game-Boy-shape, GBA-shape, DS-shape, MD-shape, abstract-disc-shape) are arranged in a broken horizontal queue, each labeled with its typical licensing cliff (year in which most titles fall into de-facto abandonware). Each cartridge slides in from the panel's diagonal edge with a slide-reveal masked behind the seam. - **Slab 04 -- Regional Doctrine (440-560vh):** Counter-diagonal panel split into three colored bands -- **Mint Cathode** (#3ddc97) for North America, **Hot Tangerine** for EU/EEA, **Magenta Brick** for JP/APAC -- each band rotated to the diagonal's normal so the labels read perpendicular to the seam. Inside each band, dense ASCII-style geometric-sans paragraphs explain the regional doctrine differences in plain language, with numbered margin annotations in Ink Black on Bone Cream sticker-blocks. - **Slab 05 -- The Decision Lane (560-660vh):** A full-bleed diagonal stripe of **Acid Lime** under a giant flowchart. The flowchart is drawn as concrete slabs connected by thick wave-form pipes (not arrows -- pipes), with each decision node a small concrete cube label. The reader's choice path lights up in **Sodium Yellow** as a slide-reveal. - **Slab 06 -- The Public Notice Board (660-740vh):** Bare gray concrete slab tilted to canonical horizontal, on which appear hand-set-style notices (recent license-status changes, new public-domain entries, court rulings, takedown trends). Each notice is its own slightly rotated concrete tile (rotation between -2deg and +3deg), with a Riso-style two-color overprint where the second color is registered intentionally 2px off. - **Slab 07 -- The Footer Plaza (740-820vh):** A massive diagonal **Ink Black** wedge with the wordmark reprised in **Acid Lime** at half the entrance scale, and a wave-form running ribbon that crosses the wedge from corner to corner saying "INFORMATION ONLY -- NOT LEGAL ADVICE -- CONSULT JURISDICTIONAL COUNSEL". The grid beneath all of this is a **24-column raked grid**: standard 24 columns, but the entire grid origin is rotated 12deg from horizontal so every flush-left element sits on the diagonal axis of its slab. Horizontal containers are visually flush to the page edge; diagonal containers are flush to the slab edge. There is no central column of safety. There is no bento. There is no hero card. The reader walks through walls. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Slab Headlines:** "Archivo Black" -- a geometric-sans display face with industrial weight and zero ornament, used at extreme sizes (clamp(3.5rem, 12vw, 10rem)) for slab numbers, wordmarks, and section markers. Letter-spacing tightens to -0.04em at display sizes, allowing the letters to compress into a structural mass like rebar-bound concrete. Always set in Ink Black or in a single brand color, never gradient, never outlined except in the chunky 4px concrete-frame treatment described below. - **Headings / Item Titles:** "Space Grotesk" weight 700 -- a geometric-sans with subtle warm humanist correction (open apertures on the lowercase 'a', 'e', 's') that prevents the brutalism from feeling cold. Used at clamp(1.4rem, 2.6vw, 2.4rem), letter-spacing 0em, line-height 1.05. This is the workhorse face for the seven-concern index, the regional doctrine band labels, and the flowchart node titles. - **Body / Explanatory Text:** "Space Grotesk" weight 400, set at 18px / line-height 1.5 / max-width 62ch. The body text consciously uses a sans for warmth-through-clarity rather than a serif for authority. Body text on colored panels never goes lighter than weight 500 to maintain contrast on dopamine-saturated grounds. - **Numerals & Annotations:** "JetBrains Mono" weight 500 for inline numerical references (year ranges, statute numbers, regional codes), giving documentary credibility without becoming a tech-mono pastiche. Tabular figures forced via `font-variant-numeric: tabular-nums`. - **Wave-form Ribbon Text:** "Archivo Black" at 1.4rem, letter-spacing 0.08em, set in uppercase and run as an infinite horizontal scroll along sine-wave path using SVG ``. **Palette (the dopamine-neon set, unapologetically saturated):** - **Ink Black:** `#0a0a0a` -- structural ink, all primary type, all hard borders. Never fully `#000` because true black on warm hues reads as a hole; this near-black warms imperceptibly. - **Concrete Gray:** `#cfcdc7` -- the bare slab. Slightly warm, slightly dusted, with a 1.2% noise-texture overlay to read as cast concrete rather than flat fill. - **Bone Cream:** `#f5efe2` -- the secondary slab, used as paper/poster ground for the cartridge wall and notice board. Warm enough to feel inviting against the saturated panels. - **Acid Lime:** `#c4ff3d` -- the entrance color. Functions as the site's primary "this is on" signal. - **Hot Tangerine:** `#ff5a1f` -- wayfinding accent, used for ribbons and active-state markers. - **Magenta Brick:** `#ff2e88` -- for emphatic blocks (regional doctrine APAC band, urgent-notice tiles). - **Sodium Yellow:** `#ffd60a` -- the "decision path" color, used to light up the active flowchart route. - **Cobalt Slab:** `#0046ff` -- structural blue, used only as full-panel ground for the License Spectrum. - **Mint Cathode:** `#3ddc97` -- North-America-band color, also used for "public domain confirmed" indicators. The palette deliberately avoids the muted/gradient cluster (49% gradient, 49% warm in the corpus). Every color is flat, opaque, fluorescent-painted. Color transitions happen at hard slab edges only -- never as gradients, never as fades. The dopamine-neon palette is at 1% in the corpus, making it a deliberate underused selection. ## Imagery and Motifs **Imagery philosophy: zero photography, zero stock 3D, zero generative-art noise.** Every visual element is **vector-art** -- hand-authored SVG with thick uniform strokes, flat fills, no gradients, no shadows, executed in a Risograph-print spirit (one or two flat color layers with intentional 2px misregistration on the second pass). **Core motifs:** - **The Cartridge Lexicon:** A custom set of 12 vector-art cartridge silhouettes (NES, SNES, Genesis, Saturn, N64, Game Boy, Game Boy Color, GBA, DS, PSP, MD, abstract-disc) drawn in 3px Ink Black stroke on flat color fills. Each is intentionally simplified to a license-symbol level of abstraction -- recognizable but legally generic. These are the site's iconographic grammar; they appear in the cartridge wall, in inline references throughout the body text (as `` glyphs the height of a cap-line), and as enormous slab-spanning decorations on the regional doctrine panel. - **Wave-Form Ribbons:** Horizontal sine-wave bands that carry the site's loud public-address text. They are rendered as SVG `` with `` for the running letters, drawn in 4px-stroke flat color, animating left-to-right at constant velocity (8 seconds per loop, no easing -- mechanical motion). The wave amplitude is tuned to roughly the cap-height of the text inside, so the text undulates dramatically as it scrolls. Wave-forms appear at the entrance marquee, between every two slabs as a divider, and across the footer wedge. - **Concrete-Frame Outlines:** Every numbered concern, every callout box, every license-status tile is wrapped in a chunky 4px Ink Black outline with a 2px Ink Black drop offset (no blur, hard offset only) at +4px / +4px, producing the unmistakable "neubrutalist sticker" silhouette but rotated +/-3deg per element so the wall feels hand-applied, not CAD-laid. - **Riso Misregistration:** On Bone Cream and Concrete Gray panels, decorative shapes are duplicated in two color passes where the second pass is intentionally offset by (2px, -1px), producing the registration-error charm of Risograph printing. This is applied to all decorative geometric-shape ornament and to the cartridge silhouettes on the notice board. - **Stencil-Cut Numerals:** The slab numbers (00 through 07) are not typed -- they are vector-art stencils with the bridges (the inner slivers connecting counter-shapes to the surround) deliberately preserved, evoking spray-painted municipal stenciling. Set at clamp(8rem, 22vw, 16rem), one per slab, anchored to the diagonal seam. - **Hand-Painted Pictograms:** Where icons appear (jurisdiction flags, decision-flowchart nodes, status-light indicators), they are drawn in a fat-stroke vector-art style reminiscent of Otl Aicher's 1972 Munich pictograms but rendered in dopamine fluorescents. Bold, blocky, legible at a glance from across a plaza. - **No photography. No stock. No 3D render. No gradient mesh. No noise-texture overlay larger than 1.5% opacity.** The Concrete Gray slab gets a gentle noise-texture (1.2% opacity, monochrome) to read as cast material, but every other surface is flat fluorescent paint on flat slab. ## Prompts for Implementation **Full-screen narrative architecture -- the plaza walk.** Build the site as eight diagonal slab panels (Slab 00 through Slab 07), each `min-height: 100vh` with `scroll-snap-align: start` on a parent container with `scroll-snap-type: y mandatory`. The user's experience must feel like stepping from one painted concrete wall to the next. Resist any temptation to introduce conventional CTA-heavy hero blocks, pricing tiers, or stat-grids; this is an information plaza, not a SaaS sales page. **Animation philosophy -- slide-reveal as the load-bearing pattern.** The frequency analysis does not list `slide-reveal` among the top patterns (it is well below the 46% scroll-triggered / 35% parallax cluster), making it a deliberate underused choice. Implement slide-reveal as the dominant transition: every text block, every numbered concern, every cartridge silhouette, every flowchart node enters by sliding from one edge of its slab toward the slab's interior, masked behind the diagonal seam. Use CSS `clip-path` polygon masks aligned to the 12deg diagonal so content appears to be "pulled" out from behind the concrete edge as the slab scrolls into view. Pair with `transform: translate(...)` on the inner content for a parallax differential of approximately 18%, so the slab and its content arrive at slightly different speeds, giving the painted-on-concrete illusion when they finally lock together at the rest position. **Diagonal CSS implementation:** Use CSS variables `--rake: 12deg` and `--rake-cos: 0.978` and `--rake-sin: 0.208` to compute slab edge offsets. Each slab is a `
` with `clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rake-offset)), 0 100%)` for +rake and the mirrored polygon for -rake. The inner content uses a counter-rotation (`transform: rotate(calc(var(--rake) * -1))` on a stabilizer wrapper, then `transform: rotate(var(--rake))` on the painted content) so headlines paint flush to the diagonal axis without distorting the type itself. Critically, the page must NOT visually skew the typography -- type is upright relative to the slab axis, slabs are diagonal relative to the page. **Wave-form ribbon implementation:** SVG `` repeated to span 4x viewport width. `` carries the running text. Animate `startOffset` from 0% to 100% over 8000ms with `linear` easing, infinite. Use `pointer-events: none` so ribbons never intercept clicks. Ensure the ribbon's color is flat fluorescent stroke with no filter effects. **Cartridge wall implementation:** Each cartridge SVG is wrapped in a `
` with `clip-path` aligned to the slab's diagonal. On scroll-into-view (IntersectionObserver, threshold 0.4), apply a stagger of 90ms per cartridge, sliding each from `translateX(-40%)` to `translateX(0)` with `cubic-bezier(0.16, 1, 0.3, 1)` over 700ms. The line-art draw is implemented via `stroke-dasharray` set to total path length and `stroke-dashoffset` animating from full-length to 0 over the same 700ms. **Noise and texture:** Apply `filter: url(#riso-noise)` only to the Concrete Gray slabs. The filter is an `` composited at very low alpha (1.2%) over the slab fill. Do NOT apply noise to the dopamine-saturated panels -- those must read as flat fluorescent paint, not textured. **Cursor behavior:** Replace the default cursor on diagonal slabs with a custom 24x24 SVG cursor: a small Ink Black filled square rotated to the slab's rake angle, becoming a small Acid Lime filled square on hover over interactive elements. The cursor is a tiny brick laid along the diagonal grid -- it reinforces the structural metaphor. **Type animation:** When slab headlines enter the viewport, run a stagger-by-letter slide-reveal where each glyph translates from `translateY(110%)` clipped behind a horizontal mask. Stagger delay 28ms per glyph. Use `font-variation-settings` if available, but the static "Archivo Black" weight is sufficient -- this is not a kinetic-typography piece; the motion is structural, not expressive. **Storytelling discipline:** The narrative is "we walk you through the licensing landscape, slab by slab, plain-spoken." Every slab answers one structural question. There is no upsell, no email capture in the body, no trust badges, no "as featured in" logo bars, no testimonials. The only conversion event the site cares about is the reader leaving with a clearer mental model of who owns the cartridge in their drawer. The footer's "INFORMATION ONLY -- NOT LEGAL ADVICE" ribbon is the only form of self-disclaimer, and it is prominent, structural, and matter-of-fact. **Reduced-motion fallback:** If `prefers-reduced-motion: reduce`, all slide-reveals collapse to instant opacity transitions, the wave-form ribbons stop scrolling and become static decorative arcs, and the diagonal slabs remain (the geometry is structural, not motion). The brutalist character is preserved without the kinetic dopamine. **Sound (optional, off by default):** A single muted toggle in the corner offers a 24-bit-style synthesized chime when each slab snaps into view -- a small "page-turn" arcade beep. Off by default, persists in localStorage. ## Uniqueness Notes **Differentiators from other designs in the corpus:** 1. **Brutalist + dopamine-neon coupling is essentially absent.** Frequency analysis shows `brutalist` aesthetic at 4% and `dopamine-neon` palette at 1%; their intersection is functionally zero. The corpus's brutalist designs lean toward terminal/dark-mode/monochrome cluster, while the dopamine work tends to land in playful/maximalist territory. gamelicense.info argues that brutalism's structural honesty and dopamine's saturated optimism are natural collaborators when the goal is plain-spoken public information about a complex topic. Concrete bones, neon paint. 2. **Diagonal-sections as the entire structural metaphor, not as decorative trim.** `diagonal-sections` is at 6% in the corpus, and where it appears it is typically a single hero accent, not the page's governing geometry. Here, the 12deg rake is the load-bearing skeleton; every slab is sliced, every alignment is flush to the diagonal, the cursor itself is rotated to match. The reader physically walks across non-orthogonal walls. 3. **Slide-reveal as the dominant motion pattern in deliberate avoidance of the scroll-triggered/parallax (46%/35%) cluster.** Slide-reveal does not appear in the top motion patterns. By making it the load-bearing animation -- masked by diagonal clip-paths -- the site refuses the "fade-up-on-scroll" cliche that dominates the corpus. 4. **Vector-art only, zero photography.** Photography is at 48% in the corpus, vector-art at 1%. By rejecting photography entirely and committing to a Riso-print vector-art lexicon (12 cartridge silhouettes, wave-form ribbons, stencil-cut numerals, fat-stroke pictograms), the site presents itself as a printed public-information broadside, not a marketing landing page. This also obviates licensing complications around game imagery -- a self-aware choice for a site about game licensing. 5. **Geometric-sans typography (7% in corpus) using "Archivo Black" + "Space Grotesk" rather than the dominant mono (47%) or humanist (20%) families.** The choice rejects both the tech-bro mono cliche and the mid-2010s humanist neutrality, positioning the site in the heavier industrial-display lineage of Munich-Olympics signage. 6. **Wave-form motif (3% in corpus) deployed as functional wayfinding rather than ambient decoration.** The wave-form is not a hero background; it is the load-bearing public-address device, carrying running text along the diagonal seams between slabs. It is the site's voice, literally -- the part that announces itself. 7. **Warm-inviting tone (1% in corpus) on a brutalist substrate.** The corpus's warm-inviting designs cluster heavily with cottagecore/scandinavian/handwritten aesthetics. Pairing it with brutalist concrete is a deliberate inversion -- the welcome comes from clarity and color, not from softness or curve. **Chosen seed (from assignment):** aesthetic: brutalist, layout: diagonal-sections, typography: geometric-sans, palette: dopamine-neon, patterns: slide-reveal, imagery: vector-art, motifs: wave-forms, tone: warm-inviting **Avoided patterns flagged by frequency analysis:** - AVOIDED: corporate (45%), hand-drawn (27%), editorial (15%) aesthetics - AVOIDED: photography (48%), minimal (19%) imagery - AVOIDED: card-grid (48%), centered (45%), full-bleed (30%) layouts - AVOIDED: gradient (49%), warm (49%), muted (28%) palettes - AVOIDED: scroll-triggered (46%), parallax (35%), stagger (24%) as primary motion - AVOIDED: mono (47%), humanist (20%), handwritten (17%) typography - AVOIDED: mysterious-moody (30%), scholarly-intellectual (14%) tone - PREFERRED (underused): brutalist aesthetic, dopamine-neon palette, diagonal-sections layout, vector-art imagery, wave-forms motif, geometric-sans typography, slide-reveal pattern, warm-inviting tone -- the assigned seed is, in aggregate, one of the least-used vocabulary intersections in the entire corpus.