# Design Language for gamelicen.se ## Aesthetics and Tone This site treats game licensing not as a legal transaction but as the act of pressing a memory into wax. The aesthetic is **grainy-textured nostalgia** — every surface dusted with the photographic grain of a 1978 manual scanned at 600 dpi, every edge softened by the cardboard fuzz of a long-boxed PC game pulled out of an attic. The mood is the half-second you spend lifting the lid of a NES cartridge and smelling the faint plastic-and-time of a childhood not quite your own. It is **dreamy-ethereal**, but the dream is specifically of a shareware folder on a shared family computer, of a CD-ROM caddy with a smudged inkjet label, of a license sticker peeling at one corner. Tonal anchors: - **Sun-faded museum glass.** Imagine a glass display case in a regional video-game museum where the light has slowly cooked the manuals into a uniform tobacco-amber. - **The slow shutter of remembering.** Pages do not snap into place; they bloom in like a Polaroid developing — soft, with a halation glow at every hard edge. - **Reverence without irony.** This is not "retro vibes." It is the licensing portal a small, serious institute would build if it preserved games the way the British Library preserves manuscripts. The voice is hushed and curatorial: short slab-set captions accompany every artifact, the way a museum places a 4x6 card beside a fossil. ## Layout Motifs and Structure The page is built as a **stack of translucent stratigraphic layers** — a cross-section of geologic time where each rock band is a decade of game licensing. Six fixed Z-planes compose every view: 1. **Plane −3 (z: −400px):** Coarse sepia paper grain, slightly out of focus, drifting at 0.05× scroll speed. 2. **Plane −2 (z: −200px):** Faint blueprint-style ledger grids, the cells filled with serial numbers and EULA fragments rendered at 28% opacity. 3. **Plane −1 (z: −80px):** Floating typographic dust — orphaned slab-serif glyphs, license-key fragments, copyright glyphs (©, ®, ℗) drifting like motes in a sunbeam. 4. **Plane 0 (the page proper):** The primary editorial column, set on a 7-column ledger grid with a fat 11rem outer margin on the right that holds marginalia. 5. **Plane +1 (z: +120px):** Foreground "license cards" — slightly oversized index-card objects that lift on cursor proximity, casting a peach-tinted drop shadow on the page beneath. 6. **Plane +2 (z: +260px):** A persistent vellum-overlay vignette that darkens the corners of the viewport like an old photograph mounted in a leather album. The **cursor is a flashlight in the archive**: a soft 320px radial sepia hotspot follows the pointer, lifting grain and revealing slightly higher-contrast type beneath; outside the spot, the page settles into deeper shade. Sections do not have hard breaks — the reader **descends through laminae**, each scroll-snap triggering a parallax dolly where back planes slide upward at 0.3× and foreground planes glide at 1.3×, producing the sense of tilting a Viewmaster reel. There is no header. Navigation lives as **hand-typed tab indices** along the right gutter: tiny slab-serif numerals (01, 02, 03…) with a draftsman's leader-line that draws on hover. ## Typography and Palette **Type stack (Google Fonts only):** - **Display & headlines:** *Roboto Slab* (variable, 800 weight) — tightly tracked at -0.02em, set in oversized cuts (clamp(4rem, 9vw, 9.5rem)) for section titles such as "01 — Provenance" and "Custodial Rights." Letterforms are filled with a sepia paper-noise mask so every glyph holds its own micro-texture. - **Editorial body:** *Bitter* — a slab with humanist warmth, 18px / 1.7 line-height, set on the 7-column ledger grid. Used for the main archival prose. - **Marginalia & captions:** *Zilla Slab* at 13px, in italic, sitting in the right-hand 11rem gutter beside every paragraph it annotates — small museum cards. - **Numerals & ledger fragments:** *Special Elite* (typewriter slab) for serial numbers, license keys, and the floating dust glyphs on Plane −1 — strikes are slightly misregistered for an authentic IBM Selectric feel. **Palette — Sepia Nostalgic:** - `#F4E9D2` *Vellum* — the base page color; the inside of an old technical manual. - `#E8D5A8` *Foxed Paper* — the shaded margin tint where age has crept in. - `#C9A574` *Amber Glass* — primary accent; the color of a beer-bottle museum case under tungsten light. - `#8B6B3D` *Tobacco Ink* — secondary accent and rule lines; the brown of a fountain-pen inscription on the inside cover. - `#3B2A1A` *Burnt Umber* — primary type color; reads as "ink-black on aged paper" without ever touching pure black. - `#6E2A1F` *Library Stamp Red* — reserved exclusively for license stamps and the single-pixel ©/® symbols that punctuate the page. - `#1F2D2B` *Archival Teal* — used only in the margin ledger grid lines on Plane −2, sitting in soft contrast against the warm field. A persistent fixed-position SVG noise filter (`feTurbulence` baseFrequency 0.85, octaves 2) layered at 14% opacity over the entire viewport ensures **no pixel ever appears flat**. Color values shift ±3% randomly per page-load via CSS custom properties, simulating slightly different scans of the same manual. ## Imagery and Motifs This site is **icon-heavy** rather than photo-heavy. The imagery reads as the iconographic alphabet of a private archivist: - **Hand-drawn slab-style icons** (custom SVG, 1.5px stroke in Tobacco Ink) for every license category: a winding ribbon for *Personal Use*, a crossed quill-and-controller for *Authored Works*, a circle-of-keys for *Site License*, a sealed envelope for *Transfer of Rights*, a magnifying glass over a checksum for *Provenance Verification*. Each icon is rendered twice — once on Plane 0 sharp, once on Plane −1 enlarged 4× and blurred 16px as a ghost echo behind it. - **Layered ephemera** behind the editorial column: scanned graph-paper, foxing stains shaped like continents, the corner of a 1985 invoice, a coffee ring, a punched sprocket strip from an old card deck. Each element is a real PNG with grain baked in, set to `mix-blend-mode: multiply` against the Vellum base. - **License stamps** as decorative motifs: octagonal "REGISTERED" cartouches, oval "FOR ARCHIVAL USE" seals, perforated edge strips. These are the only objects allowed to use Library Stamp Red. - **Floating ribbons** rendered in SVG with a slow sine-wave breathing animation (8s loop, 4px amplitude), inscribed with Latin license clauses ("Licet conservare, non vendere") in Roboto Slab small caps. - **Dust and motes:** a JS canvas particle field of ~80 amber specks drifts diagonally across Plane −1 at 6px/sec, parallaxed against the cursor, like sunbeam particulate seen through a bay window. There is no photography. There are no avatars. There are no screenshots of games. The archive **describes** the games it licenses; it never displays them, the way a card catalog describes books without reproducing their pages. ## Prompts for Implementation This is a full-screen, scroll-as-descent narrative experience. There are no pricing tiers, no comparison tables, no testimonial grids, no "Get Started" CTA banners. The only interactive surfaces are: (1) the cursor-follow archive flashlight, (2) hover-lifted license cards, and (3) a single concluding form titled *Request a License Imprint* set as a typewriter-style dialogue at the very bottom. **HTML/CSS/JS guidance:** - **Six-plane parallax** via `transform: translate3d(0, calc(var(--scroll) * var(--depth)), 0)` on each layer; depths from −0.6 (Plane −3) through +0.4 (Plane +2). Use `will-change: transform` and a single rAF loop. - **Cursor flashlight:** a fixed `radial-gradient(circle 320px at var(--mx) var(--my), transparent 0%, rgba(59,42,26,0.18) 70%)` overlay on Plane +2, with `--mx`/`--my` updated via pointermove. Inside the radius, sibling layers receive a subtle `filter: contrast(1.08) brightness(1.05)` via a CSS mask aligned to the same coordinates — so the flashlight literally reveals crisper grain. - **Page-bloom load:** on first paint, the entire document begins at `filter: blur(14px) sepia(0.6)` and animates to `filter: blur(0) sepia(0.18)` over 1400ms with a custom Polaroid-developing easing (`cubic-bezier(0.16, 1, 0.3, 1)`). Each layer staggered 80ms apart so depth resolves last. - **Section transitions:** scroll into a section triggers (a) marginalia in the right gutter to draw its leader-line via SVG `stroke-dasharray` animation, then (b) the slab numeral to fade-up while a faint stamp-ink bleed (`box-shadow: 0 0 0 0 → 0 0 30px 4px` Library Stamp Red at 12%) blooms once and decays. - **License cards** lift on cursor proximity (within 180px) using a magnetic spring (k=0.06, damping=0.82) — they tilt up to 6deg around their X axis and 4deg around Y, with shadow lengthening proportionally. Lifting a card reveals an underlying *card pocket* — a darker Foxed-Paper rectangle with the card's serial number stenciled inside. - **Typography breathing:** every Roboto Slab display heading has its variable weight axis animated subtly (785 → 815 over 6s sine) via `font-variation-settings`, so titles inhale and exhale on the page. - **Storytelling structure:** the page is a single long descent through six chapters — *Provenance*, *Custodial Rights*, *Imprint & Seal*, *Transfer*, *Renewal*, *The Archive Itself*. Each chapter is roughly one viewport tall, with the cross-section sidebar marking your descent like a stratigraphic column. - **Audio (optional, default off):** a toggle in the right gutter labeled `[ ambient.archive ]` plays a 30s loop of a microfilm reader and distant page-turning, very low. Toggle is a hand-drawn slab-icon switch. - **No flashy reveals.** All motion is slow (≥600ms), eased toward stillness, and never bouncy. The site should feel like turning the leaves of an old folio, not opening an app. **AVOID strictly:** CTA-heavy hero stacks, pricing comparison blocks, statistic dashboards, customer-logo strips, "Trusted by" rows, testimonial carousels, FAQ accordions styled as cards, chatbot bubbles, gradient buttons. ## Uniqueness Notes **Differentiators from the existing 200-design corpus:** 1. **Six-plane stratigraphic Z-stack with a flashlight cursor.** Layered-depth as a layout + motif appears in only ~10% of designs, and almost none combine it with a cursor-revealed contrast mask that literally illuminates grain texture under the pointer. The page is read by descent through sediment, not by scrolling through cards. 2. **Grain as first-class material.** Grainy-textured aesthetic is at 1% adoption. Here grain is not a CSS noise overlay applied at the end — it is masked into glyph fills, multiplied through ephemera, randomized ±3% per page-load, and lifted/dampened by the cursor. Grain is the medium. 3. **Icon-only iconography (no photography, no screenshots).** Photography sits at 99% of designs; this site goes the other direction entirely with custom hand-drawn slab-style SVG icons (icon-heavy is at 1%) and a strict no-photo rule. The archive describes what it preserves — it never displays it. 4. **Slab typography pushed to expressive extremes.** Slab-serif typography is at only 5% adoption. This design uses *four* distinct slabs (Roboto Slab display, Bitter body, Zilla Slab marginalia, Special Elite typewriter) layered like instruments in an orchestra, with variable-axis breathing on the display weight. 5. **Sepia-Nostalgic palette with a single ritual accent.** Sepia-nostalgic appears in 3% of designs; this build commits fully and reserves Library Stamp Red exclusively for licensing-stamp glyphs — no buttons, no links, no hover states. The accent is sacred. 6. **Curatorial marginalia as primary navigation.** Replaces the conventional top header with a right-gutter ledger of slab-serif numerals and leader-lines that draw on scroll. No design in the reviewed corpus uses museum-card marginalia as the navigation system. **Chosen seed (from assignment):** `aesthetic: grainy-textured, layout: layered-depth, typography: slab-serif, palette: sepia-nostalgic, patterns: cursor-follow, imagery: icon-heavy, motifs: layered-depth, tone: dreamy-ethereal` **Patterns intentionally avoided based on frequency analysis:** - *hand-drawn aesthetic* (96%) — replaced with grainy-textured archival. - *photography imagery* (99%) — replaced with icon-only custom SVG. - *full-bleed / card-grid / centered layout* (93/84/83%) — replaced with stratigraphic layered-depth. - *mono typography* (95%) — replaced with a four-slab orchestra. - *warm + gradient palette* (97/97%) — palette is warm but flat, no gradients; only multiplied paper textures. - *parallax/spring/stagger/magnetic* (95/83/78/77%) are present but used only in service of the descent metaphor, never as garnish. - *pastoral-romantic tone* (35%) — explicitly avoided in favor of dreamy-ethereal-curatorial.