# Design Language for gamelicens.ing

## Aesthetics and Tone

gamelicens.ing is the dark, hushed back-office of the play industry — the place where contracts, royalties, and IP are negotiated under low lamplight while champions battle in the rooms above. The visual direction is **dark-mode authoritative**: a serious, lawyerly hush that absorbs the eye, punctured by soft pastel halos that read like screen glow leaking under a door. Imagine a Tokyo legal tower at 2 AM where a senior counsel reviews a fighting-game tournament licensing deck — the air is cool, the windows reflect the city, and the only color comes from the coffee, the soft monitor wash, and a small water cooler bubbling rhythmically in the corner.

The palette is intentionally pastel inside the darkness — peach, lilac, mint, butter — because licensing is the soft layer between hard parties: between developer and publisher, publisher and platform, platform and player. Pastels here are not playful; they are the gentle, expensive colors of high-spec OLED dashboards rendered at low brightness. The water bubbles are the heartbeat: imagery of slowly rising bubbles inside a tall office water cooler, each bubble a contract clause traveling up through years of precedent.

The tone is **authoritative without being cold**. The copy reads like a senior partner who has done this for thirty years and wants you to understand exactly what you are signing. Sentences are calm, complete, slightly long. Headlines do not shout. The site never sells; it explains, with the quiet confidence of someone who has the receipts. Cultural motifs from East Asian licensing culture — the *hanko* seal, the *meishi* (business card) ritual, the *renpan* signature stack of a Korean publisher's contract — appear as decorative anchors, situating the site in the global capital of game IP without becoming a costume.

The mood the user should leave with: *this is the grown-up room*. Tournaments and trailers happen elsewhere; here, the rights are settled.

## Layout Motifs and Structure

The site is built on a **timeline-vertical** spine — a single, central, dimly luminous axis running the full document, lit like a fiber-optic cable that pulses softly when scrolled. Every section is a **timeline node** docked to one side of this spine, and the entire document reads as a chronological dossier of how a single hypothetical license — *Kingfisher Combo Vol. III, JP→Global, 2026–2031* — moves from first contact to executed agreement to renewal.

**Spine specification:**
- 2px central column at viewport center (desktop) or 24px from left edge (mobile), color `#3a3550` baseline
- A 20% opacity inner glow `#c4b5fd` running the full length
- A single bright traveling pulse (`#fde68a`, 8px, 60s loop) drifts slowly upward through the entire spine — like a single bubble in the water cooler — causing each timeline node to softly bloom for 600ms as the pulse passes through it
- Spine has small horizontal "tick" branches every 80vh, each labeled with a date stamp in mono (e.g. `2026.04.18 — DUE DILIGENCE OPEN`)

**Node staggering** (the assigned `stagger` motion pattern is realized spatially as well as temporally): nodes alternate left-right with deliberate asymmetry — not a strict zig-zag, but a 1-2-1-1-2-1 rhythm where occasional double-left or double-right runs create reading clusters. Each cluster represents a "phase" of the licensing process: Discovery, Negotiation, Diligence, Drafting, Execution, Renewal. On scroll-into-view, child elements within a node stagger-fade in with a 80ms cascade delay, weighted from the spine outward (closer-to-spine first).

**Node anatomy (each timeline entry):**
1. **Marker bead** — a 16px circle on the spine, default state lilac (`#c4b5fd`), filled with a smaller white-pastel core; on the active node, the marker becomes a slow-bubbling animated SVG (a literal water bubble, vertically rising loop, 3s)
2. **Date stamp** — small mono caps, sits at the marker line
3. **Phase title** — large rounded sans, weight 600, in butter-pastel (`#fde68a`)
4. **Body card** — rounded 14px corners, glass-translucent dark slab (`#1c1830` at 80% opacity, `backdrop-filter: blur(20px)`), 1px lilac inner border, 32px padding
5. **Clause excerpts** — quoted contract language in serif italic, set inside soft mint speech-bubble shapes that look like rising water droplets

**Macro structure:**
- **0–100vh: The Vault Door** — full-viewport dark scene, the spine starts as a vertical seam in a closed brushed-steel vault door (CSS gradient + noise). The pulse rises, the seam widens, and the door slides apart to reveal the timeline beneath. A *hanko* seal in cinnabar pastel (`#f9a8a8`) presses into the page from the right, leaving a stamp impression that becomes the page's logo lockup.
- **Phase I: Discovery** — three nodes, left-clustered, introducing parties, IP scope, territory
- **Phase II: Negotiation** — five nodes, alternating, introducing royalty stacks, MFN clauses, sublicense rights
- **Phase III: Diligence** — two double-clustered nodes for chain-of-title, IP audits
- **Phase IV: Drafting** — four nodes, the longest phase, where each node opens a small *hanko-stamped* sub-document inline
- **Phase V: Execution** — one tall, central node — the only one centered on the spine instead of beside it — containing the full signature block in *renpan* style with stacked seals from each party
- **Phase VI: Renewal & Aftermarket** — three nodes fading downward, gradually growing dimmer until the spine dissolves into a quiet footer
- **Footer / Cooler** — a tall, narrow, pastel-tinted illustrated water cooler in the lower-right corner, bubbles rising at real-time (every ~1.2s a new bubble), each bubble carrying a tiny glyph: a yen sign, a copyright, a registered mark, a torii-shaped IP badge

The structure deliberately rejects card-grid, hero-dominant, and CTA-heavy patterns. There are no pricing tables, no stat counters, no "Get Started" buttons. The only call-to-action is a single, embossed *meishi* card at the very end that flips on hover to reveal contact details.

## Typography and Palette

**Typography (rounded-sans family, all from Google Fonts):**

- **Display & headlines**: **"Nunito"** (Google Fonts), weight 700–900, used at clamp(2.25rem, 5vw, 5.5rem). Nunito's softly rounded terminals feel legal-but-humane — the corporate sans of a firm that wants you to actually read the contract. Tracking tightened to `-0.01em` at large sizes.
- **Body & long-form**: **"Quicksand"** (Google Fonts), weight 400–500, set at 17px / 1.7 line-height. Quicksand keeps the rounded vocabulary at body size without becoming childlike — its slightly geometric construction reads as deliberate, not casual. Used for all paragraph text and node body cards.
- **Date stamps & labels**: **"DM Mono"** (Google Fonts), weight 500, 12px, ALL CAPS, letter-spacing `0.18em`. The mono provides the exhibit-stamp authority that makes timeline ticks feel like docketed events.
- **Contract excerpts (italic blockquotes)**: **"Fraunces"** (Google Fonts), italic, weight 400, optical size set to `144`. Fraunces in italic provides the only serif accent on the site — a single typographic register reserved exclusively for verbatim quoted clause language. It signals: *these words are from the document itself.*
- **Hanko / seal text**: **"M PLUS Rounded 1c"** (Google Fonts), weight 800, used inside circular SVG seals. Its CJK-ready rounded forms make Latin and Japanese characters share the same visual register inside seals.

**Palette (pastel-on-deep, dark-mode authoritative):**

- `#0d0a1a` — *Vault Black*, primary background, a near-black with a 4% violet shift so it never reads as truly neutral
- `#1c1830` — *Office Twilight*, surface color for body cards and translucent slabs
- `#2a2440` — *Brushed Steel*, raised surface for the vault door and hanko sub-documents
- `#3a3550` — *Spine Baseline*, the inert color of the timeline column when un-pulsed
- `#c4b5fd` — *Lilac Glow*, the primary pastel accent — lit borders, marker beads, link underlines
- `#a7f3d0` — *Mint Filing*, secondary pastel — used for clause-excerpt droplets and the "filed/executed" success state
- `#fde68a` — *Butter Seal*, headline color and the pulse traveling up the spine
- `#fbcfe8` — *Sakura Wash*, tertiary pastel for hover states and decorative motif elements
- `#f9a8a8` — *Cinnabar Stamp*, reserved exclusively for hanko seals — the only warm color, used sparingly as a punctuation
- `#e8e3f0` — *Document Cream*, the rare "paper" surface used inside opened sub-documents (drafting phase only)

The palette obeys a strict rule: **warm tones (butter, cinnabar, sakura) appear only at moments of agreement, signature, or emphasis.** The default reading state is cool — lilac, mint, vault black. Warmth is earned, the way a stamp is earned at the end of a negotiation.

## Imagery and Motifs

**Water bubbles (primary imagery motif):**

The water-bubble image runs through the entire site as a unifying metaphor: contracts are *fluid* until signed, and clauses *rise* to the surface through deliberation. Specific implementations:

- **Footer water cooler**: A custom SVG illustration of a tall, slender office water cooler in pastel-tinted line work. Bubbles inside are real DOM elements, animated upward via CSS transforms with sinusoidal lateral wobble. Each bubble carries a tiny embedded glyph (¥, ©, ®, ™, a torii, a controller silhouette, a hanko mark). New bubble spawns every 1.0–1.4s with randomized size (8–18px) and rise duration (4–7s).
- **Spine pulse**: A single large bubble travels the entire spine column once per minute, illuminating each node as it passes. This is the site's metronome.
- **Clause droplets**: Every quoted contract excerpt sits inside a vertically-elongated bubble shape (CSS `border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%`) tinted mint. These are static at rest but very subtly bob (translateY ±2px, 4s ease-in-out infinite) when within viewport.
- **Hover ripples**: When the cursor enters a node, three concentric pastel rings ripple outward from the spine's marker bead and fade — a still-water ripple, slow (1.4s), not splashy.
- **Loading & state-change**: When a sub-document opens, it does so with a column of bubbles rising rapidly inside its container, then settling. When it closes, bubbles drain.

**Cultural motifs (used with restraint):**

- **Hanko seal SVGs**: Five distinct hanko illustrations, each representing a party type — Developer (a small controller pictogram), Publisher (a stack of books), Platform (a hexagon), Distributor (a globe with longitude lines), and Talent (a microphone icon). Rendered as red-circle stamps in cinnabar pastel with the party name in M PLUS Rounded 1c inside. Each stamp has a slightly imperfect ink-bleed edge (CSS `filter: url(#roughen)` referencing an SVG turbulence filter) so they look hand-pressed.
- **Meishi card**: The closing contact element is a single business card, rendered front-and-back, with a CSS 3D flip on hover. The front holds the firm name in Nunito; the back holds details in Quicksand and a hanko in the corner.
- **Renpan signature stack**: The Execution node displays a vertical column of six hanko stamps, one beneath the other, in the Korean *renpan* tradition where signatories sign in order of seniority. Each stamp lands with a 200ms delay cascade on scroll-in.
- **Tatami grid undertone**: At the very lowest layer of the spine, a near-invisible (`opacity: 0.04`) tatami-mat grid pattern runs the full document height — straw-cream lines on the vault-black ground. Visible only when the user lingers; a quiet acknowledgment of the cultural lineage of the document form.
- **Torii bookmark**: Each phase boundary is marked by a small torii-gate SVG floating beside the spine, lilac-glow outlined. Five phases, five torii. They function as table-of-contents anchors.

**Decorative tertiary elements:**

- **Watermark legalese**: At 4% opacity in the deep background of every body card, a vertical strip of micro-printed boilerplate in DM Mono (real licensing language: *"This Agreement shall be governed by and construed in accordance with..."*) — an authentic legal artifact rather than placeholder filler text
- **Margin annotations**: Hand-set Quicksand notes in the outer margin of select nodes, in lilac, prefixed with a small `※` (komejirushi reference mark) — these are the senior partner's marginalia
- **Ream stack**: At the top of the page, three offset rectangles in escalating pastels suggest a stack of paper documents — a subtle skeuomorphic anchor

## Prompts for Implementation

**Narrative arc:** The site is a single, scrollable case file. The user is not a customer browsing services; they are a junior associate being walked through the lifecycle of a real licensing deal. Every scroll click is the partner turning a page. Implementation must preserve this from start to finish.

1. **Vault Door entrance (0–100vh):**
   - Page loads to a full-dark viewport with a single faint vertical seam at center (the future spine)
   - After 600ms, a butter-yellow pulse appears at the bottom of the seam and rises to the top over 1.4s with `cubic-bezier(0.22, 1, 0.36, 1)` easing
   - As the pulse arrives at the top, the seam widens via two sliding `clip-path: polygon()` halves (the vault door opening), revealing the timeline behind
   - Concurrently, a hanko in cinnabar slides in from the right edge and presses onto the page (scale: 1.4 → 1.0, opacity: 0 → 1, rotation: -8deg → 0deg, 700ms ease-out), settling beside the wordmark "GAME LICENSING — A FIELD MANUAL"
   - Below, the first DM Mono date stamp fades in: `2026.04.18 — FILE OPENED`

2. **Scroll choreography:**
   - The spine pulse loops continuously at 60s/cycle, independent of scroll — the metronome of the site
   - Scroll triggers two layers: (a) viewport-based stagger reveals on each node's children (`IntersectionObserver`, threshold 0.2, 80ms cascade), and (b) a *progress fill* on the spine that brightens the column from top down to the user's current scroll position, in lilac
   - Section dwellings: when a node is centered in viewport for >2s, its marker bead transitions from static lilac to an animated bubble SVG, signaling "active study"

3. **Sub-document interactions (Drafting phase):**
   - Each drafting node has a "Open exhibit" affordance — not a button, but a torii-shaped underline beneath a phrase like "see Exhibit C — Royalty Stack"
   - Clicking spawns an inline expansion: a Document Cream (`#e8e3f0`) panel grows downward inside the node (height: 0 → auto, 600ms), rising bubbles fill the new space briefly, and the actual exhibit content fades in inside
   - The sub-document is stamped in its corner with the Publisher hanko, slightly off-axis (rotate: -3deg)
   - Closing reverses the bubble fill (drain animation) before collapse

4. **The Execution node (climactic moment):**
   - This single node sits centered on the spine instead of offset. Its body card is wider than others.
   - On scroll-into-view, the renpan signature stack assembles: six hanko stamps drop in vertically with 220ms cascade, each one accompanied by a soft, low-frequency "press" sound (optional, off by default; toggle in the corner respects user preference)
   - After all six land, the entire stack subtly glows butter-yellow for 1.2s and a date stamp materializes: `2031.04.18 — EXECUTED`
   - The spine's traveling pulse, when next passing this node, doubles in size for the duration of its transit through the node — the deal is now part of the heartbeat

5. **Footer water cooler:**
   - Persistent illustrated cooler in lower-right, fixed during footer scroll
   - Spawns bubbles continuously regardless of scroll position once user has scrolled past 30% of document
   - Hovering a bubble in flight pauses it and reveals its glyph's meaning in a small lilac tooltip (`®` → "Registered trademark — see Phase II §4")
   - The cooler itself can be clicked to scroll back to top via a "REWIND THE FILE" affordance — all bubbles momentarily reverse direction during the scroll

6. **Cursor and micro-interactions:**
   - Default cursor on body: standard
   - Over interactive elements: a custom cursor of a fountain pen nib (16x16 SVG, lilac fill) — subtle, not gimmicky
   - Over a hanko or signature element: the cursor becomes a small red ink dot with a lilac trail
   - Link underlines draw on with `path-draw-svg` (256ms), lilac to butter on hover
   - All transitions default to `cubic-bezier(0.22, 1, 0.36, 1)` (a slow, weighted ease-out — paperwork settles, doesn't snap)

7. **Margin annotations:**
   - These appear as marginalia in the outer column. Implement as absolutely-positioned `aside` elements in lilac Quicksand. Each annotation fades in 200ms after its parent node has fully entered viewport. They stay anchored as the user scrolls, pinned to their associated paragraph.

8. **Storytelling tone in copy:**
   - Headlines: declarative, dry. "Phase II — Negotiation," not "Let's Make a Deal!"
   - Body: long-form, complete sentences, partner-voice. Avoid bullet-point listicles in main copy; reserve bullets only for clause structures inside quoted exhibits.
   - Microcopy on stamps and badges: terse, official. `EXECUTED`, `IN ESCROW`, `MFN ACTIVE`, `SUBLICENSE PERMITTED`.

9. **Avoid (explicitly):**
   - No CTA bar, no "Book a demo," no signup forms
   - No pricing block, no plan comparison, no stat-grid ("10,000 deals closed")
   - No card-grid layout — the timeline spine is the only organizing structure
   - No hero with a giant headline and a button — the Vault Door is the hero
   - No carousel, no testimonials, no client logo wall
   - No light mode toggle — this site lives in twilight

10. **Performance/feel target:** Scrolling must feel *weighted*. A small inertia on scroll is acceptable (CSS `scroll-behavior: smooth` is fine; do not implement custom scroll-jacking). The bubble animations, marker pulses, and pulse traveler must be GPU-composited (`transform`, `opacity` only — no width/height animations). The site should feel like reading a heavy file in a quiet room.

## Uniqueness Notes

**Differentiators from other designs:**

1. **License-as-timeline metaphor:** The site's structure literally maps to the lifecycle of a video game licensing deal — Discovery, Negotiation, Diligence, Drafting, Execution, Renewal. No other design in the registry uses a domain's actual industry workflow as the spine of its information architecture. Visitors don't read about licensing; they walk through one. The spine *is* the deal.

2. **Pastels in pure dark mode (rare combination):** Frequency analysis shows `pastel` palette at 2% and `dark-mode` aesthetic at 5% — their intersection is essentially unrepresented. Combining a low-luminance violet-black ground with carefully calibrated pastel accents (lilac, mint, butter, sakura, cinnabar) creates a register no other site occupies — a luxury-OLED-after-dark feel that's authoritative without being grim.

3. **Cultural motifs as functional UI, not decoration:** The hanko, renpan stack, meishi card, torii section markers, and tatami undertone are not pasted-on aesthetic flourishes — each plays a structural role. Hanko marks party types. Renpan composes the signature climax. Meishi is the contact card. Torii are TOC anchors. Tatami is the substrate. Cultural motif (3% frequency) used as IA, not ornament.

4. **Water bubbles as a literal site metronome:** The water-bubble imagery (1% frequency in registry) is realized not as a decorative background but as a functioning timepiece — a single bubble traverses the spine every 60 seconds, syncing every node's lit state to a slow, calming pulse. The footer water cooler is the site's "always on" companion. This goes beyond bubble decoration into bubble-as-temporal-architecture.

5. **Stagger pattern realized spatially as well as temporally:** The assigned `stagger` motion pattern (22% common as motion) is doubled here as a *layout* rhythm — the 1-2-1-1-2-1 left-right cluster pacing of nodes. Stagger is used as both a transition system and a compositional grammar, which is uncommon.

6. **Authoritative tone (4% frequency) without coldness:** The senior-partner voice is rare in the registry — most designs default to mysterious-moody (27%) or scholarly-intellectual (13%). Here authoritative is humanized via rounded-sans typography and pastel warmth, producing "warm authority" — a register suited to legal advisory but rarely seen in web design.

7. **Timeline-vertical as the entire architecture:** Timeline-vertical is at 8% frequency, but most uses confine it to a "history" or "roadmap" section. Here the timeline IS the entire site — every section, every interaction, every visual element hangs off the central spine. The commitment to the metaphor is total.

8. **No CTAs, no pricing, no stat-grids — by deliberate omission:** In an industry where licensing platforms typically front-load aggressive sales pitches, the absence of any commercial pressure is itself the brand position. The single contact moment is a flip-card *meishi* at the very bottom — a quiet exchange, not a funnel.

**Documented chosen seed:** aesthetic: `dark-mode`, layout: `timeline-vertical`, typography: `rounded-sans`, palette: `pastel`, patterns: `stagger`, imagery: `water-bubbles`, motifs: `cultural`, tone: `authoritative`.

**Avoided patterns (per frequency analysis):**
- AVOIDED `corporate` aesthetic (42%) — chose `dark-mode` (5%) instead
- AVOIDED `card-grid` layout (45%) and `centered` (43%) — committed to `timeline-vertical` (8%) as the whole structure
- AVOIDED `mono` typography as primary (44%) — used `rounded-sans` (Nunito/Quicksand) as the dominant register; mono limited to date stamps and watermark legalese only
- AVOIDED `gradient` palette (46%) and `warm` (46%) — chose `pastel` (2%) on a violet-shifted black, with warm tones reserved as earned punctuation
- AVOIDED `photography` imagery (45%) entirely — committed to custom SVG illustration (water cooler, hanko seals, torii, meishi) and procedural bubble animation
- AVOIDED `mysterious-moody` tone (27%) and `scholarly-intellectual` (13%) — chose `authoritative` (4%) executed warmly via rounded type
- AVOIDED `scroll-triggered` reveal (43%) as the centerpiece pattern — used `stagger` (22%) as both motion *and* layout grammar, with scroll-triggered relegated to a supporting role
- AVOIDED `nature` motifs (11%) — chose `cultural` (3%), specifically East Asian licensing/legal culture (hanko, renpan, meishi, torii, tatami) used functionally rather than decoratively
<!-- DESIGN STAMP
  timestamp: 2026-05-01T16:42:00
  seed: seed:
  aesthetic: gamelicens.ing is the dark, hushed back-office of the play industry — the place ...
  content_hash: d40c66cddda3
-->