# Design Language for gamelicensor.info

## Aesthetics and Tone

gamelicensor.info is **a hushed kyoto tokonoma alcove rebuilt inside a 1929 Shanghai art-deco vault, where the brass-rimmed ledgers of a game-licensing intermediary float as soft 3D-rendered bubbles inside lacquered burgundy compartments**. The domain reads three ways at once. *Game* — the bounded, rule-shaped artefact whose moral weight is the right-to-distribute. *Licensor* — the patient figure on the granting side of the contract, whose currency is permission, signature, territory, and time. *.info* — the modest, almanac-register top-level domain that promises *reference, not pitch*. The site's tone resolves all three: **a quiet ledger room kept by an art-deco-trained archivist who happens to be a zen monk**, where each licensing fact is presented as a small, perfectly-pressured bubble of cream-coloured air rising through a vat of burgundy sumi-ink.

The contradiction at the centre — **zen austerity inside art-deco ornament inside playful 3D bubbles** — is the design's whole point. Most licensing-info sites perform two failure-modes: either the chrome-blue corporate dashboard (untrustworthy because it tries too hard to look serious), or the law-firm gold-and-navy (untrustworthy because it is selling a posture, not information). This site refuses both. It performs **the third register, the rarest one in commerce: the librarian's register** — a tone that says *this is the catalogue, not the storefront; the archive does not need to convince you*. Art-deco supplies the *binding*: the brass corner-rule, the lacquer tray, the chevron-bordered colophon. Zen supplies the *interior*: the long, deliberate breath between bento compartments, the willingness to leave one panel in five completely empty. 3D-rendered bubbles supply the *humility*: a reminder that even the most consequential licensing clause is, in the end, **a small fragile sphere of agreed-upon meaning floating between two parties who could pop it at any time**.

The mood is **late-afternoon ledger light, the kind that falls through a single rice-paper screen onto a burgundy lacquer tabletop at 4:43 PM in November**. Cream-coloured paper. The faint warm reflection of a brass desk-lamp. A single 3D bubble, slightly translucent, holding a contract reference inside it. A small horizontal sumi-stroke beneath a key term. No urgency. No exclamation. No "Get Started Today." The site behaves like **a reading room in a private licensing library** — the kind that gives you a cotton glove before handing you the folio.

The voice is **minimal-tone calibrated to scholarly-intermediary**: short declarative sentences, footnoted with territorial codes (US/EU/JP/KR), comfortable with the word *grant* and the word *recoup*, allergic to the word *unleash*. When the page must explain something complicated — a sub-license cascade, a perpetuity carve-out — it does so in **the rhythm of a single brushstroke followed by a long pause**, not in the rhythm of a sales deck. Every sentence ends a beat earlier than the reader expects, leaving negative space for the reader's own thought to enter. This is the *ma* of the site: not silence, but **the room that silence makes for understanding**.

## Layout Motifs and Structure

The page is a **vertical bento tray of nine lacquered compartments**, arranged on a 12-column grid that has been *quartered, not divided* — meaning the dividing rules are visible as fine hairline gold-leaf seams at exactly 0.5px, never as hard borders. Bento here is not the dashboard-trend bento of cluttered SaaS landing pages; it is **the literal Japanese lacquered bento**, where each compartment is sized to the dignity of its content, not to the obligation of filling the frame. A compartment containing a single bubble may be twice the size of a compartment containing five lines of dense type. The asymmetry is the point — and it is *quiet* asymmetry, not bauhaus-loud asymmetry.

**The nine compartments, in fixed reading order, with their proportional weights:**

1. **Colophon Tray (top-left, 4 cols × 1 row)** — The site's identity. The wordmark *gamelicensor.info* set in art-deco display caps, with a single brass-thin chevron beneath. A 3D-rendered cream bubble, ~38mm diameter, floats slightly above the baseline. Inside the bubble: a small embossed *L* in burgundy. The bubble has a subtle parallax — it rises 4px when the cursor is anywhere in the colophon tray, and descends slowly (800ms ease-out) when the cursor leaves.

2. **Definition Panel (top-centre, 5 cols × 1 row)** — A single-paragraph definition of *what a game licensor is and is not*. Cream background. Burgundy text. Two key terms — *grant of rights* and *territorial scope* — receive the **underline-draw** treatment on first viewport entry: a 0.6mm burgundy hairline draws itself left-to-right beneath each term in 720ms, staggered 200ms apart.

3. **Clear Compartment (top-right, 3 cols × 1 row)** — Deliberately empty. This is the zen tile. It contains *one* element: a small 3D-rendered bubble, ~22mm, drifting slowly along a Lissajous figure inside the compartment, never touching the edges. The bubble carries no label. It is the page's breath.

4. **Catalogue Spine (middle-left, 3 cols × 2 rows)** — A vertical art-deco-bordered list of licensing categories: *Mechanical, Synchronisation, Print, Digital, Streaming, Tournament, Merchandise, Adaptation*. Each entry's underline draws in on hover. The spine is bordered top-and-bottom by a thin brass-leaf chevron-pattern frieze, ~6px tall, repeated horizontally.

5. **Reading Field (middle-centre, 6 cols × 2 rows)** — The largest compartment, holding the page's longest reading passage: an essay-length explanation of *how to read a game-licensing memorandum*. The text sits on a slightly warmer cream (#F4E9DA) than the surrounding tray. A vertical hairline of burgundy runs down the left margin of this compartment only — a single thin column-rule, like the binding-edge of a book's interior page.

6. **Bubble Cluster (middle-right, 3 cols × 2 rows)** — A loosely-arranged 3D-rendered cluster of seven bubbles of varying sizes (18mm to 44mm), each labelled with a single licensing-territory code: *US, EU, UK, JP, KR, BR, IN*. The bubbles drift on independent slow paths. On click, a bubble enlarges to fill the compartment and reveals a one-paragraph note on that territory's rights peculiarities.

7. **Footnote Strip (bottom-left, 4 cols × 1 row)** — A horizontal strip of art-deco-display *territory codes* and *date stamps*, set in tracked-out small caps, separated by tall thin gold-leaf rules. The whole strip is itself a kind of vintage colophon footer.

8. **Long Pause (bottom-centre, 5 cols × 1 row)** — Mostly empty cream. Holds a single sentence, set centred in art-deco-display: *"A licence is the small bubble of agreed meaning between two patient parties."* That is all. The compartment is 80% negative space.

9. **Contact Slip (bottom-right, 3 cols × 1 row)** — A single email link, set as a brass-rimmed rectangular plaque. The plaque has a 1px gold-leaf chevron-border. The email address has the **underline-draw** treatment on hover, drawing in over 360ms.

**Spatial language:** the gaps between compartments are *unequal* — 24px horizontal, 32px vertical — and the gaps themselves are filled with the same cream as the page background, so the compartments appear to *float* on the cream rather than sit on a darker mat. This is critical: the bento tray is **a bright cream sea, not a dark grid**. Burgundy is reserved for *content interior* (text, frames, brushstrokes), never for the negative space.

**Scroll behaviour:** there is no infinite scroll, no parallax narrative, no second viewport. **The page is one bento tray, full stop.** This is rare and deliberate. A licensing-info site that fits in a single viewport rewards the reader's attention rather than demanding more of it. On screens shorter than 900px, the bento reflows to a single column with the same proportional weights preserved.

## Typography and Palette

**Type stack (all Google Fonts):**

- **Display** — *Limelight* (Google Fonts). Used at 48–72px for the wordmark, the long-pause sentence, and the territory-code footnote strip. Limelight is a true 1920s art-deco display face — high-waist, narrow apertures, geometric *O*'s — and it carries the deco-vault inheritance without becoming costume. Tracking is set wide (+80 to +120 in CSS letter-spacing terms) to preserve the *lacquer-room breathing* feel.
- **Subhead** — *Cormorant Garamond* (Google Fonts), italic at 18–24px. Used for compartment subheads and the catalogue-spine entries. The italic Cormorant has a slight calligraphic warmth that softens the deco hardness above. Pairs the way ink softens lacquer.
- **Body** — *Inter* (Google Fonts), 15.5px / 26px line-height, weight 380 (variable). Used for the reading-field essay and the definition panel. Inter is chosen for its *invisibility* — at the body register, the page must not perform; it must read. Weight 380 (slightly under the standard 400) gives the cream page a faintly aged, sumi-blotted quality.
- **Footnote / Caption** — *Inter* tracked out at +60 letter-spacing, 11.5px, all small-caps via CSS, used for territory codes, date stamps, and the bubble labels.

**Palette (eleven values, burgundy-cream system):**

- **Lacquer Burgundy** `#5A1A23` — primary text, primary frame, primary brushstroke. Deep oxblood with a faint mineral undertone. Avoid pure black at all costs; this site has no `#000000`.
- **Vault Burgundy** `#3F1018` — used only for the deepest interior shadow on a 3D bubble or for the brass-plaque inset shadow.
- **Plum-Ink** `#7A2A33` — secondary burgundy, for hover states on the catalogue spine and for the sumi underline-draw.
- **Cream Page** `#F8EFE0` — the bento sea. The dominant page colour.
- **Cream Tray** `#F4E9DA` — the warmer cream of the reading-field compartment only. ~3 lightness-points below Cream Page.
- **Cream Bubble Highlight** `#FCF7EE` — the specular highlight on 3D-rendered bubbles. Used only inside SVG/canvas bubble renders.
- **Brass Leaf** `#B8893A` — the hairline rules, the chevron friezes, the plaque edge. Used at 0.5–1px only; never as a fill.
- **Brass Antique** `#8E6A2C` — the second tone of the brass-leaf chevron-pattern, alternating with Brass Leaf in the friezes for a *two-tone deco gilt* effect.
- **Sumi Trace** `#2A1014` — used only for the *thinnest* hairlines and for the bubble's contact shadow on the cream tray. ~85% opacity.
- **Lichen Whisper** `#A39C7A` — a single muted khaki used *exactly once* on the page: as the inner ring of the colophon tray's primary bubble. A small colour secret.
- **Translucent Bubble Cream** `rgba(248, 239, 224, 0.62)` — the bubble's body fill in the 3D-render; cream with 38% transparency to the burgundy compartment beneath.

**Colour rules (strict):**
- The page has *no* gradient backgrounds at any scale. The 3D bubbles are the only objects on the page that contain gradient information, and their gradients are tightly contained inside the bubble silhouette.
- Burgundy never appears as a large fill (>20% of any compartment area). It is a *line and ink* colour, not a *block* colour. The single exception: the bottom 4px of the page, which is a thin burgundy bar acting as the bento tray's lacquer underside.
- Brass leaf appears only at hairline weight. There are no brass-filled shapes.
- The cream sea must never drop below 60% of total page area.

## Imagery and Motifs

The visual vocabulary is **3D-rendered cream bubbles inside an art-deco lacquer cabinet, under reading-room light**. There are no photographs. No icons in the FontAwesome sense. No stock illustrations. The page contains exactly four classes of visual artefact:

**1. The Bubbles (primary motif).** Soft-shaded 3D spheres rendered with a single warm key-light from the upper-left at ~32° elevation, a cool fill from the lower-right at ~15% intensity, and a subtle internal subsurface scatter that suggests the bubble is filled with *air, not glass*. Each bubble has:
   - A high specular highlight at upper-left (Cream Bubble Highlight `#FCF7EE`).
   - A thin equatorial reflection band at ~32% opacity.
   - A soft contact shadow on the cream tray (Sumi Trace `#2A1014` at 18% opacity, 12px blur).
   - A 0.5px Brass Leaf rim-light along the lower-right crescent — *this is the deco signature*; it makes the bubble read as if it had a delicate brass meridian.
   The bubbles must feel **breathable, not glassy** — not the chrome-glass spheres of Y2K-futurism, not the gummy-toy 3D of inflated-3d aesthetic. The reference is **a soap bubble drifting through a lacquer-warm room**, not a Pixar prop.

**2. The Art-Deco Friezes.** Horizontal chevron-and-stepped-fan friezes, ~6px tall, used as compartment dividers and as the colophon's underline. The frieze pattern is: chevron, dot, chevron, stepped-fan, chevron, dot — repeating. Rendered in alternating Brass Leaf and Brass Antique, on the cream sea. The friezes carry the 1929-Shanghai-vault inheritance without quoting it directly.

**3. The Sumi Brushstrokes.** Hand-drawn-feeling but SVG-precise burgundy underlines and column-rules. Each brushstroke has a slight *taper* at both ends (start at 0.4mm, swell to 0.7mm at midpoint, return to 0.3mm at end) and a faint *grain texture* baked into the SVG via a noise filter. The brushstrokes appear under the two key terms in the definition panel, down the reading field's binding-edge, and beneath every catalogue-spine entry on hover.

**4. The Brass Plaques.** The contact slip at bottom-right is a single brass-leaf-edged rectangular plaque, with an inset shadow of Vault Burgundy at 24% opacity, 4px blur, inside-only. The plaque carries the email address. There is exactly one plaque on the page.

**Motifs (what they mean and where they sit):**

- **bubble-playful** — every bubble carries a single licensing-meaning (a territory, a category, a definition), and the playfulness is in the reader's discovery that *the licence itself is the bubble*. Click a bubble, see its meaning. The motif is not decorative; it is **the page's metaphor for licensing as fragile, agreed-upon meaning**.
- The art-deco frieze, the brass meridian on each bubble, the chevron-bordered plaque, and the high-waist Limelight wordmark are the **deco vault inheritance** — they make the cream room feel *bound, archived, official*.
- The single empty compartment (Clear Compartment, top-right) is the **zen inheritance** — it is *ma*, the negative-space room. It is the reason the page never feels like a dashboard.
- The minimal-tone copy and the no-CTA discipline are the **librarian's-register inheritance** — they make the site *informational*, not *promotional*, in the literal almanac-register sense of `.info`.

**No-go list (visual):**
- No photography of any kind, including stock licensing/contract photography.
- No animated 3D scenes — bubbles drift, but the page does not perform a cinematic sequence.
- No glass-morphism on the cream tray itself; the tray is *opaque cream*, not frosted-translucent.
- No icons-set glyphs (no Heroicons, no FontAwesome). The page uses *type, brushstrokes, and bubbles* exclusively.
- No charts, no statistics, no counter-animations. This is a reading room, not a dashboard.

## Prompts for Implementation

**Page architecture (HTML/CSS).**
- Use a single `<main>` element holding a CSS grid of 12 columns × 4 rows on viewports ≥ 1200px, reflowing to single-column at < 900px. Compartment grid-areas are named (`colophon`, `definition`, `clear`, `spine`, `field`, `cluster`, `footnote`, `pause`, `contact`).
- The page background is `#F8EFE0` (Cream Page). The reading-field compartment uses `#F4E9DA` (Cream Tray) as a subtle elevation cue.
- All compartment "borders" are achieved by negative space, not by `border:` rules. The only real borders are: the 1px brass-leaf hairline on the contact-slip plaque, the 0.5px brass-leaf chevron-frieze top-and-bottom of the catalogue spine, and the 4px burgundy lacquer bar along the bottom of the page.

**The 3D bubbles.**
- Implement bubbles as inline SVG, *not* canvas/WebGL. SVG keeps the page light, scalable, and screen-readable. Each bubble is a `<g>` containing: a base circle filled with a radial gradient (Translucent Bubble Cream → Cream Page), a specular highlight ellipse at upper-left, an equatorial reflection band, a brass-leaf rim-light arc on the lower-right, and a contact shadow on the parent compartment. The radial gradient must use `gradientUnits="userSpaceOnUse"` with the centre offset 22% up-left of the bubble centre, simulating the warm key-light.
- Bubbles drift via CSS `@keyframes` using a *Lissajous-like* combination of two transforms: `translate3d(...)` on a 14-second loop and a perpendicular `translate3d(...)` on an 11-second loop. The two periods are intentionally non-harmonic, so no two bubbles ever return to the same relative position — the cluster never repeats.
- On hover, a bubble's drift animation pauses and the bubble scales 1.04 with a 320ms cubic-bezier(0.2, 0.8, 0.3, 1.0) easing. On click, the bubble expands to fill its compartment using FLIP technique (First-Last-Invert-Play), revealing the hidden territory note. This is the page's *only* expand/reveal interaction.

**The underline-draw pattern.**
- Apply to: the two key terms in the definition panel (on viewport-entry, staggered), every catalogue-spine entry (on hover), and the contact-slip email link (on hover).
- Implementation: an inline SVG `<path>` with `pathLength="1"`, `stroke-dasharray="1"`, `stroke-dashoffset="1"` initially, animated to `stroke-dashoffset: 0` over 720ms (viewport-entry) or 360ms (hover) with `cubic-bezier(0.65, 0, 0.35, 1)`. Each path must have *real taper* — not a uniform stroke. Achieve taper by stacking three SVG `<path>`s: a thin one (0.3mm) drawn first, a thick one (0.7mm) drawn second from 15% to 85% of the path, and the thin one again at the end. The visible result is the sumi-brush taper described in the imagery section.
- Use `prefers-reduced-motion: reduce` to set the underline to its drawn state instantly with no animation.

**The art-deco frieze.**
- Render as an SVG `<pattern>` with `patternUnits="userSpaceOnUse"`, width = 24px, height = 6px, repeating horizontally. The pattern unit is: `chevron(4px) gap(2px) dot(2px) gap(2px) chevron(4px) gap(2px) stepped-fan(6px) gap(2px)`. Alternate fills: Brass Leaf and Brass Antique. The frieze sits above and below the catalogue spine and beneath the colophon wordmark.

**The reading field.**
- Set `max-width: 62ch` for the essay text. Use Inter at weight 380, 15.5px / 26px. The vertical column-rule on the binding-edge is a 1px Sumi Trace line at 28% opacity, running the full compartment height.
- The two key terms in the definition panel get `<span>`s with a `data-underline` attribute; the underline-draw script targets `[data-underline]` and animates on `IntersectionObserver` entry with `threshold: 0.6`.

**The Clear Compartment (zen tile).**
- Contains exactly one bubble, ~22mm, drifting on a slow 18-second Lissajous. The compartment has no other content. Resist every temptation to fill this tile. **It is the page's lung.**

**Storytelling order (top-to-bottom reading).**
The visitor enters and reads, in order: *what we are* (colophon), *what a licensor is* (definition), *breathe* (clear compartment), *what categories of licence exist* (catalogue spine), *how to read a memorandum* (reading field), *across what territories* (bubble cluster), *footnoted timestamp* (footnote strip), *the philosophical sentence* (long pause), *how to reach us* (contact slip). Nine beats. No CTA, no upsell, no pricing, no testimonial, no logo-wall, no signup, no newsletter capture. **The page closes with a single email plaque and a long held breath.**

**Motion philosophy.**
- The page has exactly three animations on initial load: (1) the underline-draw under *grant of rights* and *territorial scope*, staggered, total duration ~1.6s; (2) the bubble drift, looping infinitely; (3) the colophon bubble's gentle parallax-on-cursor.
- No counter-animations, no scroll-triggered storytelling, no parallax-on-scroll backgrounds, no kinetic typography, no marquee. The motion should feel **like the air in a reading room**: slow, continuous, not addressed to the reader.
- All durations are in the 320–720ms band, easing `cubic-bezier(0.2, 0.8, 0.3, 1.0)` for hover and `cubic-bezier(0.65, 0, 0.35, 1)` for entry. Bubble drift uses linear interpolation across two non-harmonic periods.

**Copywriting voice prompt for any future content addition:**
> Write as a librarian-archivist who has read every game-licensing memorandum since the 1980s and finds them quietly beautiful. Use short declarative sentences. Footnote with territory codes (US/EU/JP/KR). Use *grant*, *recoup*, *carve-out*, *perpetuity*, *most-favoured-nation*. Refuse *unleash*, *empower*, *transform*, *revolutionize*. End every paragraph one sentence earlier than the reader expects.

**What this page must never become:**
- A SaaS landing page with a hero CTA, three feature cards, a pricing block, a testimonial slider, and a stat-grid. **None of these patterns exist on this page.**
- A law-firm site with marble-photography backgrounds and a navy-and-gold colour scheme. **The vault here is brass-and-cream, not navy-and-gold, on purpose.**
- A directory listing of game licensors with logos and search filters. The *.info* register is reference-essay, not directory-app.

## Uniqueness Notes

**Five differentiators from the rest of the corpus:**

1. **Single-viewport bento with 11% empty by design** — the corpus's bento-box layouts (14% of the corpus) all use bento as a *dashboard-density* device with every tile filled. This site's Clear Compartment (top-right, 9% of total area) is *deliberately empty except for one drifting bubble*, and the Long Pause (bottom-centre, 11% of total area) is 80% negative space. **Roughly 18–20% of the visible page is intentional ma.** No other bento site in the corpus does this.

2. **Three-tradition collision: zen + art-deco + bubble-playful, held by burgundy-cream** — zen aesthetic is rare (4% of the corpus), art-deco-display typography is rare (4%), bubble-playful motif is rare (3%), and burgundy-cream palette is the rarest palette on the entire corpus (1%). The combination of all four, plus 3D-render imagery (which barely registers in the imagery frequency table), is **almost certainly unique to this site**. The synthesis is non-obvious: zen austerity *holds* the art-deco ornament from becoming costume, and the playful bubbles *humanise* the deco severity. None of the three traditions wins.

3. **3D-render used as a single, restrained motif — not as a hero scene** — most sites that use 3D render it cinematically: a hero spline, a webgl scene, a parallaxing 3D logo. This site uses 3D-rendered bubbles as **typographic-scale objects** (18mm to 44mm), inline in SVG, never larger than a typographic capital. The 3D is a quiet rim-light on a cream sphere, not a dramatic scene. This is unusual.

4. **No CTA, no pricing, no testimonials, no stats, no logo-wall, no newsletter, no signup** — the corpus's most common failure mode is to retain at least one CTA-shaped object even in editorial designs. This page has *exactly one interactive element* (the email plaque) and *zero* persuasion-shaped objects. It is **a reading room masquerading as a website**, in the most literal sense.

5. **Burgundy is a line colour, not a block colour** — most burgundy/oxblood designs in the corpus (and the wider web) use burgundy as a large background fill, often with cream type. This site inverts that: burgundy is *only* type, frame, and brushstroke; cream is the entire field. The burgundy never exceeds 20% of any compartment's area. **The page reads as cream-with-burgundy-ink, not burgundy-with-cream-text** — and that single inversion is the difference between a wine-bar site and a librarian's reading room.

**Chosen seed (from assignment):**
*aesthetic: zen, layout: bento-box, typography: art-deco-display, palette: burgundy-cream, patterns: underline-draw, imagery: 3d-render, motifs: bubble-playful, tone: minimal.*

All eight seed dimensions land in actively underused corpus territory — none of the eight crosses 20% corpus frequency. Underline-draw at 17% is the most common; the rest are all under 15%, with burgundy-cream the rarest palette in the entire corpus at 1%.

**Avoided patterns from frequency analysis:**
- *hand-drawn* aesthetic (96%, dominant) — refused; the page uses 3D-render and SVG-precision brushstrokes instead.
- *photography* imagery (99%, near-universal) — refused completely; zero photographs on the page.
- *full-bleed* layout (93%) — refused; the page is a contained bento tray that does not bleed.
- *card-grid* (84%) and *centered* (83%) — refused in favour of bento-box's named compartments with deliberate asymmetry.
- *cursor-follow* (85%), *spring* (83%), *stagger* (78%), *magnetic* (77%), *parallax* (95%) — all refused as primary motion patterns. The page uses underline-draw and slow bubble-drift instead. The single concession to cursor reactivity is the colophon bubble's 4px parallax, which is gentle, not a magnetic-cursor effect.
- *mono* typography (95%) — refused; the page uses art-deco-display + serif italic + humanist sans, with no monospace at all.
- *warm* (97%) and *gradient* (97%) palettes — the burgundy-cream palette is *technically* warm-leaning, but the site has **no gradient backgrounds at any scale**; gradients exist only inside the bubble silhouettes. The cream-with-burgundy-ink inversion takes the site out of the "warm gradient" trend lane entirely.
- *pastoral-romantic* (35%) and *warm-inviting* (27%) tones — refused; the tone is minimal-librarian, not pastoral. Calm-serene and zen-contemplative are the closer cousins, and both sit at 4–5% in the corpus.

**One small secret colour:** the inner ring of the colophon's primary bubble is Lichen Whisper `#A39C7A` — a muted khaki used *exactly once* on the entire page. It is the page's hidden footnote, the small clay token in the archivist's left lab-coat pocket. A reader who notices it has met the design properly.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T01:12:50
  seed: dimensions land in actively underused corpus territory
  aesthetic: gamelicensor.info is **a hushed kyoto tokonoma alcove rebuilt inside a 1929 Shan...
  content_hash: e17b82cd10e3
-->