# Design Language for gamelicensor.pro ## Aesthetics and Tone gamelicensor.pro is the **institutional voice of intellectual-property authority in interactive entertainment** — a licensing body that does not ask for your attention, it commands it. The aesthetic is **maximalist power botany**: dense, layered, and self-assured, as if a Victorian collection chamber of rare ferns had been requisitioned by a media-rights tribunal and fitted with a dark-oak argument structure. Every surface carries weight. Nothing is decorative — every layer of visual material is a statement of jurisdiction. The tone is authoritative without arrogance: the measured cadence of a general counsel who has already won every case and simply documents the record. Ink on vellum; dense legalese typeset in variable-width display type that breathes as the user scrolls; forest canopies rendered as gradient-mesh colour fields behind contractual language set at 18 vw. The mood board is: rainforest canopy seen through contract glass, emerald stain on parchment, the silence of a licensing chamber at 9 a.m. before the session begins. ## Layout Motifs and Structure The macro structure is a **radically asymmetric three-column chassis** that never resolves into balance — it is held in deliberate tension throughout the entire page. - **Column A (narrow, 18 vw):** A fixed vertical rail on the left, dark forest-green (#0D1F15), carrying only the domain wordmark and a slow-scrolling roster of jurisdiction abbreviations (EU, US, JP, AU, CA, KR …). This column never scrolls with the content — it is an anchor. It bears a subtle repeating wave-form SVG border on its right edge, 2 px thick, #4A8C5C. - **Column B (wide, 54 vw):** The narrative body. Long-form declarative sentences — licensor obligations, rights frameworks, IP taxonomy — in variable-weight display type. This column scrolls on its own z-plane, slightly ahead of column C (5–10 px parallax-free offset via `position: sticky` staggering, NOT parallax). Section breaks are full-bleed horizontal lines in #4A8C5C. - **Column C (medium, 28 vw):** The gradient-mesh canvas. Each screen height generates a new colour field in forest-green harmonics (#0D1F15, #1A3D25, #2E6644, #4A8C5C, #83C99A, #C8EDD5). Wave-form shapes drift across this canvas at 0.3 px/frame — never obviously animated, always subtly alive. **Section cadence:** Each chapter of the page is one full viewport height. There are seven chapters: Jurisdiction, Rights Taxonomy, Licensing Tiers, Platform Index, Compliance Record, Case Archive, Contact Nexus. Each chapter is a distinct asymmetric composition — columns B and C swap dominant width at chapters 3 and 6, maintaining asymmetry but rotating its axis. **Wave-form motif as structural divider:** SVG sinusoidal wave-forms (frequency 0.4 Hz equivalent, amplitude 24 px) separate every chapter at the section boundary. The wave is not a decoration; it is the document's official section-break glyph, stamped in #4A8C5C on #0D1F15. ## Typography and Palette **Primary palette — forest-green authority:** | Role | Hex | Use | |------|-----|-----| | Void Ground | #0B1810 | Full page background | | Deep Forest | #0D1F15 | Column A, card surfaces | | Canopy Mid | #1A3D25 | Chapter panels | | Moss Active | #2E6644 | Interactive borders, accents | | Fern Highlight | #4A8C5C | Wave-forms, rule lines | | Pale Canopy | #83C99A | Subheadings, secondary text | | Frost Vellum | #C8EDD5 | Body copy on dark | | Paper White | #F2F7F4 | Primary body copy on mid-tone | | Ink Absolute | #060E09 | Display type drop-shadows | **Typography — expressive-variable, Google Fonts only:** - **Display (declarative voice):** [Fraunces](https://fonts.google.com/specimen/Fraunces) — a variable font with `wght 100-900` and `SOFT 0-100` and `WONK 0-1` axes. Used at 10–18 vw for chapter headlines. As the user scrolls toward each chapter, the weight axis animates from 300 to 800 in 600 ms using `@property` and `transition`. The SOFT axis moves inversely — at 300 weight SOFT is 100 (round, organic), at 800 weight SOFT is 0 (sharp, judicial). This is the page's primary kinetic signature. - **Body (legal record voice):** [DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display) at 1.1–1.4 rem for chapter-body paragraphs. Tracked at +0.01 em. Line-height 1.72. Colour #F2F7F4 on dark, #0D1F15 on #C8EDD5 panels. - **Monospaced (jurisdiction record):** [Space Mono](https://fonts.google.com/specimen/Space+Mono) for all jurisdiction codes, article numbers, version strings, and the column-A scroll ticker. 0.75 rem, letter-spacing 0.12 em, colour #4A8C5C. - **Label / caption:** [Inter](https://fonts.google.com/specimen/Inter) variable (`wght 100-900`) at 0.7 rem. Used for table headers, footnotes, chapter index numbers. Weight 400 default, 700 on hover. **Variable-font animation rules:** - All Fraunces `wght` transitions: `transition: font-variation-settings 600ms cubic-bezier(0.16, 1, 0.3, 1)` (spring ease-out) - Trigger: `IntersectionObserver` at 30% viewport entry - No transitions on body copy — only on display type ## Imagery and Motifs **Gradient-mesh fields (primary imagery):** Column C and chapter-break panels are rendered as CSS gradient-mesh compositions — multiple overlapping `radial-gradient` layers at different positions and radii, animating their centre-points at 0.2 px/frame on independent `requestAnimationFrame` loops. Each chapter's mesh uses a distinct but harmonically related green-spectrum composition: - Chapter 1 (Jurisdiction): Dense, overlapping radials from #0D1F15 to #4A8C5C, suggesting a canopy photographed from below. - Chapter 3 (Licensing Tiers): Elongated horizontal radials in #2E6644/#83C99A suggesting a horizon seen through rain-speckled glass. - Chapter 5 (Compliance Record): Single large central radial in #1A3D25 expanding to #C8EDD5 at edges, like parchment illuminated from behind. - Chapter 7 (Contact Nexus): All radials converge to a single vertical gradient, #4A8C5C to #0B1810, like a corridor at the end of a session. **Wave-form motif (structural and decorative):** SVG sinusoidal wave-forms appear in three scales: 1. **Section boundary waves:** Full-width, 3 px stroke, #4A8C5C, between every chapter. 2. **Column A border wave:** Continuous repeating path, 2 px stroke, #4A8C5C, on the right edge of column A. Uses `stroke-dashoffset` animation at 20 s loop — the wave appears to travel downward at all times, reinforcing the scroll direction. 3. **Micro-wave underlines:** Chapter subheadings receive a 1 px wave-form underline (12 px amplitude, SVG ``) drawn on hover via `stroke-dashoffset` from 0 to full length in 400 ms. **Blur-focus depth pattern:** The gradient-mesh canvas in column C is rendered with a CSS `filter: blur(0px)` by default. As the user's cursor moves over column B, the mesh in column C blurs to `blur(8px)` over 800 ms. When the cursor returns to column C, it snaps back to `blur(0px)` in 200 ms. This creates a constant depth-of-field tension between the legal record and the natural world it governs. Additionally, each Fraunces headline begins blurred at `blur(4px)` when out-of-viewport and clears to `blur(0)` as it enters — the `IntersectionObserver` trigger that fires the weight animation also fires the blur-to-sharp transition simultaneously. **No photography. No icons. No illustrations outside SVG wave-forms.** ## Prompts for Implementation Build gamelicensor.pro as a **single declarative scroll through a licensing record** — not a marketing page, not a product pitch, not a feature grid. The page is a document that happens to be rendered in a browser. Every interaction supports the act of reading, not the act of converting. **Macro narrative arc (seven chapters, each `100svh`):** 1. **Chapter 0 — Jurisdiction Opening.** The page loads into pure #0B1810. Column A fades in first, jurisdiction codes ascending from bottom in Space Mono, one per 80 ms. Then the Fraunces headline `GAME LICENSING AUTHORITY` resolves from `font-weight: 100, blur(4px)` to `font-weight: 800, blur(0px)` over 1 200 ms with a spring ease. No scroll required for this transition — it is the page's opening statement. 2. **Chapter 1 — Rights Taxonomy.** Column B carries a structured breakdown of game licensing rights categories (distribution, derivative works, in-game assets, tournament rights, esports broadcast, platform ports). Each category is a Fraunces line at 5–6 vw, weight 400, animating to 700 on `IntersectionObserver` entry. Column C carries the first gradient-mesh canopy. A full-width wave-form in #4A8C5C separates this chapter from the next. 3. **Chapter 2 — Licensing Tiers.** The asymmetric axis rotates: Column B narrows to 38 vw, Column C expands to 44 vw. The gradient-mesh shows the horizon-through-rain composition. Column B presents a three-tier license structure rendered as three DM Serif Display blocks, each preceded by a Space Mono tier code (TIER-A, TIER-B, TIER-C). No pricing. No bullets. Declarative paragraphs only. 4. **Chapter 3 — Platform Index.** A horizontal-scroll sub-rail within column B lists platform jurisdiction entries (PC, Console, Mobile, Cloud, AR/VR, Arcade) as Fraunces labels at 8 vw, each on its own staggered scroll row. The user can drag horizontally within this rail; the rest of the page scrolls vertically. Column C shows a static moss-green radial. 5. **Chapter 4 — Compliance Record.** Column layout returns to 54/28 split. DM Serif Display body text describes the compliance reporting architecture. Column C shows the parchment-illuminated radial. Column A's wave-form border is now rendered at 3x weight (6 px) for this chapter only, marking it as the document's legal core. 6. **Chapter 5 — Case Archive.** A text-dense two-panel within column B: left panel shows archived case titles in Space Mono (case number, platform, year); right panel shows Fraunces display quotation from each case's holding. Column C swaps to show a dense multi-radial that pulses at 4 s intervals, barely perceptibly (±3% opacity). The wave-form between this chapter and the next is the widest on the page: 48 px amplitude. 7. **Chapter 6 — Contact Nexus.** The corridor gradient in column C. Column B shows the authority's contact structure in DM Serif Display. Column A's jurisdiction ticker slows to one code per 400 ms instead of 120 ms — the page is closing its session. Fraunces headline `SUBMIT INQUIRY` animates from weight 200 to 600 on hover only, not on scroll. **CSS architecture notes:** - Use `@property --blur-amount: ` for the blur-focus transitions to enable GPU compositing. - Use `font-variation-settings` on a `@property` custom property for all Fraunces transitions. - Column C mesh: `background: radial-gradient(circle at var(--x1) var(--y1), ...), radial-gradient(...)` where `--x1`, `--y1` are animated via JS `requestAnimationFrame` at 0.2 px/frame delta. - Column A wave: inline SVG with `stroke-dasharray` equal to path length, `stroke-dashoffset` animated from 0 to `-pathLength` in 20 s loop. - `IntersectionObserver` thresholds: 0.3 for chapter entry, 0.05 for chapter exit (reverse animations). - NO parallax transforms. Depth illusion is achieved via column-stagger scroll timing and blur-focus transitions only. ## Uniqueness Notes 1. **Three-column permanently asymmetric chassis with rotating dominant axis.** Most asymmetric layouts are asymmetric at chapter level; gamelicensor.pro maintains a fixed asymmetric column structure that never resolves into balance, and swaps the dominant column at chapters 3 and 6, creating a slow rotation of visual authority across the page. This is not present in any of the 131 analysed designs. 2. **Fraunces SOFT axis as judicial temperature gauge.** Using the SOFT variable axis — not just weight — to encode the page's legal authority level is a typographic strategy unique in the registry. Low-weight headlines are soft (organic, botanical) and high-weight headlines are sharp (judicial, conclusive). The variable font performs the argument's emotional register, not just its volume. 3. **Blur-focus depth-of-field between law text and nature canvas.** The constant tension between column B (sharp legal record) and column C (living gradient-mesh) dramatised through blur transitions is not a pattern observed in any existing design. `blur-focus` sits at 1% usage; here it is the page's central experiential mechanism, not an incidental hover state. 4. **Wave-form as official section-break glyph.** Rather than decorative, the sinusoidal wave is the document's typographic separator — the equivalent of a ruled line in a legal brief — present at every chapter boundary, scaled in amplitude to signal the chapter's significance within the record. `wave-forms` are underused at sub-5%; gamelicensor.pro builds its entire structural grammar around them. 5. **Chosen seed:** `aesthetic: maximalist, layout: asymmetric, typography: expressive-variable, palette: forest-green, patterns: blur-focus, imagery: gradient-mesh, motifs: wave-forms, tone: authoritative` 6. **Avoided patterns from frequency analysis:** parallax (90% — not used), warm palette (93% — actively avoided; all hues are cool-green), gradient imagery used as CSS radial-gradient mesh not as static decoration (gradient at 87% but gradient-mesh as living canvas is distinct), hand-drawn (67% — not used; all shapes are mathematical SVG), centered layout (91% — three-column asymmetric only).