# Design Language for gamelicensor.com ## Aesthetics and Tone gamelicensor.com is staged as a **cinematic dossier** -- the visual analogue of a 35mm rights-clearance ledger smuggled out of a back-lot legal department, bound in an oxblood cover and shot under sodium streetlights. The site occupies the rare intersection where licensing law meets cultural production: contracts that decide who gets to stamp Mario on a Happy Meal, who can ship a Resident Evil remake on a Nintendo handheld, who owns the rights to the word "Tetris." That story should not feel corporate. It should feel like a film. A long, patient film with a slow dolly shot. The **tone is raw-authentic** in the documentary sense -- closer to a Frederick Wiseman edit than to a SaaS landing page. Nothing is gilded. There are no glassmorphic cards, no friendly mascots, no startup gradients pretending to be sunsets. The mood is that of a city at 3 a.m.: deal closed in a cab, taillights bleeding across wet asphalt, fluorescent neon reflected in the chrome trim of a side-door handle. The viewer should feel like they have been let into a meeting that was already in progress -- the camera caught them mid-sentence, and now they must catch up. The **cinematic aesthetic** manifests as deliberate constraint. Wide letterboxing with **2.39:1 aspect bars** that genuinely letterbox the viewport at section transitions. Title cards rendered as actual title cards, with the kerning and tracking of Saul Bass main-on-end credits. Type that knows it is being filmed. Color that knows the lights have just been adjusted by a gaffer somewhere off-screen. The palette steals from neo-noir Tokyo and from the practical neon of Wong Kar-wai exteriors -- but the underlying paper of the site is matte and serious, like a 1970s contract typed on an IBM Selectric and then photographed under a tungsten bulb. The unifying instruction for every micro-decision: **"Would this fit in the title sequence of a David Fincher procedural about IP attorneys?"** If yes, ship it. If it veers toward Webflow-template polish or Stripe-checkout cleanliness, throw it out and shoot it again. ## Layout Motifs and Structure The site is a **vertical timeline** -- not the limp scrolljacking variety, but a true narrative spine running from the dawn of arcade royalty agreements (1972, Magnavox v. Atari) to the present-day complexities of cross-platform DLC clearance. The viewport's left edge holds a **persistent 64px gutter** containing a thin vermilion timeline rail with engraved year markers in micro-typography (10px Baskerville italic small caps), advancing as the user scrolls. This rail is not decoration; it is the structural backbone of the entire document, and every section anchors to a specific milestone on it. **Letterbox composition.** Each major section opens with a fully-bled cinematic frame that briefly applies horizontal black bars (8vh top and bottom) to the viewport using a transform on a fixed-position overlay, holds for 1.2 seconds while the section title fades in centered between the bars, then releases the bars by sliding them off-screen as the body content reveals beneath. This is repeated, inviolably, at every major chapter transition. The site teaches you that it has chapters, and then keeps the promise. **The body grid is a 12-column asymmetric ledger** based on golden-section divisions: the leftmost 4 columns hold prose (justified, hyphenated, set in Baskerville Display at 17px with 28px leading), and the rightmost 7 columns hold case material -- excerpts of contracts, photographs of licensed merchandise, redacted clauses, time-stamp metadata. Column 8 is the seam: it is intentionally left empty, a vertical stripe of negative space that runs floor-to-ceiling and acts as the **center cut** between editorial commentary on the left and visual evidence on the right. The eye learns this seam early and the rest of the site rewards it. Sections are **viewport-height "reels"** -- each one occupies exactly 100vh on first paint, then unfurls additional content as the user scrolls within it (a soft sticky behavior, where the section header pins for 60% of the section's scroll length before releasing). This produces the rhythm of a film: a clean cut, then a long take, then another clean cut. Twelve reels in total, corresponding to twelve epochs of game licensing history. The transition between reels is marked by a **cinema slate** -- a small graphic in the bottom-right corner that briefly displays "REEL 04 / TAKE 01 / 1989" before fading. The **navigation is a contact sheet**. Toggling the menu does not produce a typical overlay; it slides the entire page down 80vh on the y-axis to reveal a contact sheet of 12 thumbnails, each a still frame from a different reel, with the year and chapter title beneath in 11px monospace. Click a thumbnail to dolly back into that reel. There is no search bar. There is no "products" mega-menu. The site refuses the conventions of commerce because it is not a commerce site -- it is a record. ## Typography and Palette **Typography:** - **Display / Body Serif**: **Libre Baskerville** (Google Fonts) -- a refined revival of John Baskerville's transitional serif, with high stroke contrast, sharp serifs, and the slightly wide proportions that mark the original 18th-century Birmingham cuts. Used everywhere prose lives. Body copy at 17px / 28px line-height, with old-style figures and discretionary ligatures enabled (`font-feature-settings: "onum", "dlig", "liga"`). Section titles use Libre Baskerville at clamp(3rem, 8vw, 7.5rem) in the regular weight (never bold -- bold Baskerville is a sin), with letter-spacing tightened to -0.02em and leading collapsed to 0.92. - **Title-Card Display**: **Playfair Display** (Google Fonts) -- reserved exclusively for the cinema-style title cards that open each reel. Set in Italic at oversized weights, all caps, tracked at +180 (0.18em letter-spacing). Title cards always render at 9.6vw, vertically centered between the letterbox bars. - **Metadata / Slate**: **JetBrains Mono** (Google Fonts) -- used for timestamps, contract reference numbers, redaction codes, slate text ("REEL 04 / TAKE 01 / 1989"), and footnote markers. Set at 11px with extra letter-spacing (+0.08em), uppercase, color-shifted toward the vermilion accent. - **Marginalia / Annotation**: **EB Garamond** Italic (Google Fonts) -- only for inline scholarly annotations, footnotes, and the occasional pull quote that wants to feel like a hand-lettered margin note. Italic only. Never roman. The typographic logic: serif for the historical record, monospace for the bureaucratic apparatus, italic Garamond for the human voice in the margins. Three voices, three jobs, no overlap. **Palette:** The palette executes a **dopamine-neon** strike against a deeply matte, almost asphalt-toned base. The base layer is sober and analog; the accent layer is electric and pharmaceutical. They are never blended -- they collide. - `#0e0d10` -- **Carbon Black**: the page ground. Not pure black; warmed by a microscopic shift toward umber, so it reads as printed ink rather than as void. - `#1a1620` -- **Asphalt**: the slightly elevated surface for letterbox bars and section seams. Used at 96% opacity over the base. - `#e8e2d4` -- **Bone Paper**: the off-white of contract paper, the color of every prose paragraph. Warm, slightly aged. Never `#ffffff`. - `#ff2e63` -- **Hot-Wire Magenta**: the principal dopamine-neon accent. Used for the timeline rail, hover states, scale-hover glow, and any element that wants to detonate. Borrowed directly from a Hong Kong neon sign at 2 a.m. - `#3afff0` -- **Cyan Burn**: the secondary neon, used sparingly for hyperlinks, focus rings, and the chrome reflection on title-card glyphs. Pairs with magenta to produce the wet-pavement look of a city at night. - `#f5d300` -- **Caution Yellow**: the third dopamine accent, restricted entirely to redaction blocks, timestamps that contain warnings, and the cinema-slate "TAKE" digit. Never used in body copy. Never used on backgrounds. - `#7a3a4d` -- **Oxblood**: a deep desaturated red that grounds the magenta and ties it back to the analog ledger metaphor. Used for the bound-cover background of the contact-sheet menu and for the section-divider tick marks. - `#3a3540` -- **Smoke**: a warm gray for secondary metadata text, footnote chrome, and the "shutter open" rectangle that frames each photograph. Color mathematics: the base + bone form an analog duotone (warm dark / warm light); the magenta + cyan + yellow form a neon triadic that sits on top, occupying less than 8% of any given viewport at any moment. The rule of thumb: **for every square inch of neon, there must be a square foot of carbon.** Restraint is what makes the dopamine read. ## Imagery and Motifs **Core visual motif: the city as ledger.** Every decorative element derives from two intersecting domains -- the **urban night** (storefronts, neon signage, fire escapes, wet streets, tower-block silhouettes, vending machines, payphones, street-vendor stalls) and the **legal artifact** (contract pages, redaction bars, stamp impressions, signature lines, reference numbers, exhibit labels). The site argues, without ever stating, that game licensing is a fundamentally urban activity -- it happens in cities, between cities, across cities, in offices that look out on cities. **Specific motifs:** - **Abstract city silhouettes as section punctuation.** Between reels, a low horizontal band (height: 18vh) renders an *abstracted* skyline -- not a literal photograph but a vector drawing in pure black against magenta, where towers are reduced to **sharp rectangles and slivers of negative space**. These skylines are not famous skylines (no Tokyo, no New York identifiable). They are platonic skylines: the idea of a city seen at 5 a.m. Each skyline rotates slowly through a 4-degree arc on scroll, suggesting the camera mounted on a slow-moving car. - **Abstract shapes as material evidence.** Photographs are forbidden as primary content. In their place: **flat geometric compositions** that stand in for the things being licensed. A licensed character becomes an oxblood circle inside a magenta square. A licensed soundtrack becomes three vertical bone-paper rectangles, each at a different height, like a stripped-down equalizer. A licensed engine becomes a single cyan line bisecting an asphalt panel at a 23-degree angle. The user is forced to read these as glyphs. The legend, when finally provided in the footer, is satisfyingly anticlimactic. - **Redaction as ornament.** Black redaction bars (the official kind, with the slight pixel-blur of a fax-scanned document) appear throughout body text as a structural decoration. They cover words that the contract genuinely cannot disclose -- "the licensee shall not [REDACTED] the territory of [REDACTED] without written consent" -- but also, occasionally, ornament headings purely for the cadence of the bar shape against the prose. Each redaction bar has a tiny serial number rendered in caution-yellow JetBrains Mono inside it, in 8px, legible only on inspection. - **The slate.** A small (180px wide) cinema-slate graphic, hand-drawn in vector, lives in the bottom-right of the viewport at all times. It updates as the user scrolls: REEL number ticks up, TAKE number resets, year advances. Its hinges click (a 60ms scale animation) when the number changes. This is the most expensive single element on the site in terms of attention-per-pixel. It earns it. - **Wet-pavement reflections.** At the bottom of each reel's title block, the title text reflects downward into a 40%-opacity vertical mirror, blurred 8px and tinted with a gradient that fades from magenta at the top to carbon at the bottom. This produces, without ever showing a literal puddle, the impression of a wet street under a neon sign. - **The marginal annotation.** Pulled from the typographic apparatus: small Garamond Italic notes in oxblood appear in the right gutter at 11px, offset 4px above the line they annotate. They contain editorial asides ("the original Atari-Magnavox settlement is, in this respect, a kind of urtext"). They are sparse. Maybe 3-5 per reel. They reward a slow reader. - **Signature lines.** At the very end of each reel, a single horizontal line in oxblood, 280px wide, with an "X" in caution-yellow at its left end and a faint pencil-textured signature scrawl in cyan. This stands in for the contract being signed, the licensing transaction being closed. It is the punctuation mark at the end of a reel. ## Prompts for Implementation **Narrative structure**: The site reads as a feature-length documentary about the legal architecture of game licensing, organized as twelve reels (chapters) progressing chronologically from 1972 to the present. The user's scroll is the camera dolly. There is no signup form. There is no "schedule a call" button. There is no pricing page. The site exists to be watched -- the same way a Wiseman documentary exists to be watched, not to convert. 1. **Opening sequence (The Cold Open, 0-100vh)**: On first paint, the viewport is pure `#0e0d10`. After 600ms, the cinema letterbox bars slide in from above and below (8vh each, animated over 1.0s with `cubic-bezier(0.65, 0, 0.35, 1)`). At 1.6s the title "GAME / LICENSOR" fades up in Playfair Display Italic, all caps, 9.6vw, in bone paper, tracked at 0.18em, centered. Beneath it, in JetBrains Mono 11px tracked at 0.08em: "A FIELD GUIDE TO THE LEGAL ARCHITECTURE OF INTERACTIVE ENTERTAINMENT, 1972 -- PRESENT." After 3.5s the bars retract and the timeline rail draws itself down the left gutter using `path-draw-svg` (vermilion, 1.2s with stagger), depositing the year markers as it goes. 2. **The reels (100vh -- 1300vh, twelve sections)**: Each reel is a self-contained chapter on a specific epoch (Reel 01: The Magnavox Atari Settlement; Reel 02: The Nintendo Seal of Quality; Reel 03: Sony's Third-Party Licensing Doctrine; Reel 04: PC Engine Royalty Mathematics; Reel 05: The id Software / Apogee Shareware Loophole; etc.). Each begins with the cinema-slate intercut (REEL XX / TAKE 01 / YEAR) and the letterbox bar transition. Within the reel, prose flows in the left-4-column field, and abstract evidence panels populate the right-7-column field, separated by the central seam. 3. **The scroll behavior**: Use `IntersectionObserver` and a custom scroll-pin (sticky positioning + transform offset) to implement the reel pinning. The reel header pins for 60% of the reel's scroll length, then unpins and lets the body content scroll up beneath it. Avoid GSAP ScrollTrigger if possible -- raw `position: sticky` plus a small JS layer should suffice. If a library is necessary, prefer Lenis for smooth scroll. 4. **The hover system (`scale-hover`)**: Every interactive element -- timeline year markers, contact-sheet thumbnails, marginal annotations, the cinema slate -- responds to hover with a scale transformation: `scale(1.04)` over 220ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` (a subtle elastic overshoot). On hover, an additional **magenta neon glow** ignites: `box-shadow: 0 0 28px rgba(255, 46, 99, 0.45)` rising from 0 to 0.45 opacity over 180ms. The combination of scale + glow is the *single hover signature* across the entire site. It must feel mechanical and deliberate -- the way a film projector's shutter feels mechanical. 5. **The contact-sheet menu**: When the user activates the menu (a thin "INDEX" link in the top-right gutter, 11px JetBrains Mono), the entire page slides down 80vh over 700ms (eased), revealing a 4x3 grid of reel thumbnails beneath. Each thumbnail is a 240x135 abstract composition (the section's geometric "evidence panel" rendered at thumbnail scale) with the year and chapter title in 11px mono beneath. Click a thumbnail and the page dollies back into that reel using a smooth-scroll-to-target. 6. **The slate**: A persistent SVG element in the bottom-right corner. As the user crosses reel boundaries, animate the REEL digit by performing a clockwise 90-degree flap of the slate's hinged top, then update the digit during the flap, then close it. Total duration: 380ms. The TAKE digit resets to 01 on each reel boundary. The YEAR ticks continuously based on scroll position within the reel, interpolating from the reel's start year to its end year. 7. **The redaction reveal**: On hover over a `[REDACTED]` block, do *not* reveal the underlying word. Instead, the bar briefly twitches (4px horizontal jitter, 180ms) and the serial number inside it becomes briefly legible (caution-yellow opacity rising from 0.2 to 1.0). The user is reminded that the redaction is real, not a parlor trick. 8. **The skyline interludes**: Between reels, the 18vh-tall abstract skyline band scrolls at 0.3x parallax against the rest of the page. As it crosses the viewport, it rotates smoothly through a 4-degree arc using CSS `transform: rotate()` driven by scroll position. The skyline is rendered as inline SVG with about 24 rectangle elements, all in `#0e0d10` against a `#ff2e63` background -- a pure silhouette, no detail. 9. **The closing reel (after Reel 12)**: The site ends with a single full-bleed frame: pure carbon background, the bone-paper signature line in the center, with "X" in caution-yellow at its left and a cyan pencil-scrawl signature animating itself in over 2.4s using a `path-draw-svg` reveal. Beneath it, in JetBrains Mono 11px: "EXHIBIT 2026.01 / FILED IN THE MATTER OF GAME LICENSOR DOT COM." The page does not scroll past this. No footer. No social links. The film is over. 10. **Sound (optional, off by default)**: A muted toggle in the corner. When activated, the site pipes in a barely-audible loop of ambient city noise -- distant traffic, a single payphone ring, a low hum -- mixed at -32dB. This is purely atmospheric and never plays without explicit user activation. 11. **Performance theatrics**: The site should *feel* slow in the way a film feels slow. Page transitions should not be snappy. Hover responses should have weight (220ms is the minimum hover transition, not the maximum). The user should never feel rushed. This is the opposite of a SaaS dashboard. This is a long take. **What this site does NOT contain**: - No CTA buttons. None. The word "Get Started" appears nowhere. - No pricing tiers. No "Enterprise / Pro / Free" comparison tables. - No stat-grid (no "10,000 contracts processed" / "$4B in licensing revenue"). - No testimonial cards. - No FAQ accordion. - No newsletter modal. - No cookie banner styled like the rest of the site (the cookie banner, if legally required, looks like an actual fax notice in the top-right -- monospace, oxblood border, dismissible). - No mobile hamburger that mimics desktop. On mobile, the contact sheet is the *primary* navigation; on first paint of the mobile viewport, the contact sheet *is* the homepage, and the user taps a thumbnail to enter a reel. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **Cinema-as-architecture, not cinema-as-decoration.** Many sites in the corpus use "cinematic" loosely to mean "dark mode with letterboxing." gamelicensor.com instead embeds the actual grammar of cinema -- the slate, the reel, the take, the cold open, the title card, the cut, the long take, the dolly -- as the *literal* organizing principle of the site's structure. The site is not styled like a film; it is *edited* like one. 2. **Abstract shapes as content, not as background.** Where other designs use abstract shapes as ornamental backgrounds behind real photographic content, this site replaces all photography with abstract geometric compositions that stand in for licensed properties. The shapes *are* the evidence. This forces the user into a glyph-reading mode rare in commercial web design. 3. **City-urban motif executed as silhouette, not as photo.** Other sites that touch urban themes default to lens-flare photography of glass towers. Here the city is reduced to its platonic skeleton -- pure rectangular silhouettes against neon -- which keeps the dopamine-neon palette legible without the visual noise of literal photography. 4. **Persistent slate as scroll position indicator.** The cinema-slate that updates with reel/take/year as the user scrolls is a navigational metaphor used nowhere else in the corpus. It replaces the conventional "scroll progress bar" with a diegetic film-production object that earns its screen real estate by carrying both narrative and informational load. 5. **Twelve reels, not "sections."** The chapter system is named, structured, and animated as film reels rather than as web "sections." Reel boundaries trigger letterbox bars, slate updates, and skyline interludes. The vocabulary of the site is borrowed wholesale from celluloid. 6. **Refusal of conversion mechanics.** The site contains zero CTAs, zero pricing blocks, zero stat-grids -- patterns explicitly avoided per design guidance. It is not a funnel. It is a record. This is a structural commitment, not a stylistic one. 7. **Baskerville at title-card scale.** While serif typography is moderately common in the corpus, the specific use of Libre Baskerville with `font-feature-settings: "onum", "dlig"` at clamp(3rem, 8vw, 7.5rem) for section heads -- combined with Playfair Display Italic at 9.6vw for cinema title cards -- is a baskerville-refined treatment used nowhere else. Bold weight is forbidden. **Chosen seed:** - aesthetic: **cinematic** - layout: **timeline-vertical** - typography: **baskerville-refined** - palette: **dopamine-neon** - patterns: **scale-hover** - imagery: **abstract-shapes** - motifs: **city-urban** - tone: **raw-authentic** **Frequency-analysis-aware avoidances:** - AVOIDED: `corporate` aesthetic (42% -- the dominant default). This site is the antithesis of corporate. - AVOIDED: `card-grid` and `centered` layouts (45% / 43% -- the two most overused layouts). Replaced with the timeline-vertical spine and the asymmetric ledger grid. - AVOIDED: `photography` imagery (45% -- the most overused imagery type). Replaced wholesale with abstract geometric evidence panels. - AVOIDED: `gradient` and `warm` palettes (46% / 46% -- the two dominant palette modes). Replaced with the carbon-base + dopamine-neon collision. - AVOIDED: `mono` typography as primary (44% -- overused as body type). Mono is used here only for metadata; the primary voice is Baskerville serif. - AVOIDED: `scroll-triggered` and `parallax` as primary animation modes (43% / 33% -- overused). Replaced with `scale-hover` (2%, severely underused) as the dominant interaction signature, plus the bespoke letterbox-bar reel-transition and slate-flap mechanics. - AVOIDED: `mysterious-moody` tone (27% -- overused). Replaced with `raw-authentic` (1%, severely underused) -- the documentary register, not the noir-pastiche register. - PREFERRED: `city-urban` motifs (0%, unused), `abstract-shapes` imagery (0%, unused), `dopamine-neon` palette (1%, severely underused), `baskerville-refined` typography (effectively unused), `cinematic` aesthetic (5%, moderately underused), `timeline-vertical` layout (8%, underused), `raw-authentic` tone (1%, severely underused), `scale-hover` patterns (2%, severely underused). The site is composed almost entirely of underused vocabulary, intentionally.