# Design Language for gamelicensor.info ## Aesthetics and Tone gamelicensor.info is a **deep-sea opium den for game licensing executives** — imagine a 19th-century dealer of rare specimens who pivoted into intellectual property law while keeping every tropical fish, every vellum label, every mahogany vitrine. The aesthetic fuses maximalist Victorian natural-history collection with the precision of a software license server: engraved specimen plates share wall space with glowing amber terminal readouts. The mood is unhurried extravagance — a room that says *we have already won* without needing to shout it. **Three sentences that govern every decision:** 1. Every element earns its luxurious density — nothing is decorative without being also structural. 2. The tropical fish are not mascots; they are *taxonomic subjects* — licensed, catalogued, given registry numbers in monospaced type. 3. The page breathes through micro-interactions rather than through whitespace: hover a fish, it turns slowly in iridescent amber; scroll past a clause, it underlines itself in burgundy ink. **Visual mood:** Dark cognac-and-velvet salon. Not nightclub darkness — *library* darkness. Backgrounds are `#1A0A0F` (near-black burgundy) with deep-wood grain texture at 4% opacity (SVG feTurbulence). Foreground surfaces are `#2E0D18` (cabinet-interior burgundy) and `#3D1420` (aged mahogany highlight). Every panel has a 1px engraved-rule border in `#6B1E2E`. **Differentiators:** - Tropical fish rendered as 18th-century engraved specimen plates (SVG path art, monochrome `#C4875A` ink), each fish assigned a mock Latin binomial and a license registry ID in monospaced type — then given a slow iridescent colour-shift animation on hover that transitions from engraving to living fish. No other design in the corpus uses engraved biology as its central visual metaphor. - The page is a *cabinet of curiosities* — sections are not scrollable sections but **vitrine drawers** that slide open (CSS `transform: translateY`) with a mechanical easing (`cubic-bezier(.08,.82,.17,1)`) revealing specimen content within. The visitor is the collector opening their collection, not a visitor to a landing page. - Collage imagery technique is used **as physical taxonomy boards**: multiple overlapping specimen elements (fish engravings, ink-stamped license seals, typewritten index cards, brass pin-heads) are composited as layered absolutely-positioned elements within each vitrine, producing the depth of a physical display case without photography. - Tech-mono typography (`JetBrains Mono`) is used not as code aesthetic but as **registrar's handwriting** — the precision of the enumerator cataloguing biological specimens. License clause numbers appear as `REG-0047/B` in monospace on aged card backgrounds. --- ## Layout Motifs and Structure **The Cabinet of Drawers — organic-flow composition:** The page is NOT a standard top-to-bottom scroll. It is a **collector's cabinet** — a tall mahogany vitrine filling the browser viewport. The cabinet has six drawers, each with a brass pull-tab (the section label in JetBrains Mono, 11px, uppercase, letter-spacing 0.22em, `#C4875A` amber). Drawers are staggered left-right in a slow organic offset: drawer 1 at 0%, drawer 2 at 2.4%, drawer 3 at -1.8%, drawer 4 at 3.1%, drawer 5 at -0.9%, drawer 6 at 1.5% — small enough to read as imperfect furniture, not a grid. This is the organic-flow layout: not random chaos, but the settled asymmetry of a room lived in. **Six drawers:** 1. **The Registry** — the wordmark vitrine: `gamelicensor` set in JetBrains Mono Bold 52px with `#C4875A` on `#1A0A0F`, surrounded by a thin engraved botanical-border SVG (tropical fish silhouettes at 6% opacity forming a rectangular frame). Cabinet maker's mark in italic Cormorant Garamond 13px beneath. 2. **The Specimen Hall** — three tropical fish engravings in a horizontal fan arrangement, each on a separate vitrine sub-panel with its own botanical label card. The central fish is 20% larger; the flanking two are rotated ±6°. All three are linked specimens in the licensing taxonomy. 3. **The Catalogue** — the licensing services section. Three vitrine drawers within the drawer (nested depth). Each inner drawer holds one service described in 3–4 lines of Cormorant Garamond body text. Inner drawer pull-tabs are brass-coloured micro-tabs. 4. **The Register** — a single vertical column: a mock registry ledger. Left column is JetBrains Mono 11px registry codes; right column is Cormorant Garamond Italic 15px license descriptions. Ruled lines at 24px intervals in `#6B1E2E` at 40% opacity separate entries. 5. **The Correspondence** — the contact section. An aged typewriter-style card (`#F2E4C8` background, JetBrains Mono, sepia-tone with coffee-ring SVG overlaid at 15% opacity). Address, email, telegraph in monospace. Envelope seal SVG (tropical fish motif, `#6B1E2E`) stamped in the top-right corner. 6. **The Provenance** — the footer vitrine. Dark mahogany. Legal line in JetBrains Mono 10px `#6B1E2E`. A final small tropical fish engraving, `#3D1420`, as a colophon. **Navigation:** No top nav bar. A thin vertical **ribbon** on the left edge (12px wide, full height, `#2E0D18`) carries six circular brass-pin waypoints — one per drawer. Active drawer causes its pin to fill `#C4875A`. Clicking a pin opens that drawer with the sliding-open animation. This ribbon is the only persistent navigation element. **Mobile (≤768px):** The left ribbon moves to bottom-center as a row of six pins. Drawers become full-width, vertical stacking in order. Organic offset collapses to 0. The vitrine becomes a single column of drawers, still with the slide-open mechanic. --- ## Typography and Palette **Typography (Google Fonts only):** - **Primary monospace voice — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** (variable wght 400→800): The registrar's instrument. Used for all structural labels, registry codes, drawer pull-tabs, navigation pins, legal micro-text, and the wordmark. At 52px Bold for the wordmark, 14px Regular for body-code, 11px Regular Letter-spaced for labels. JetBrains Mono has optical corrections that give it more warmth than cold coding fonts — its slight humanist curves stop it from reading as pure developer documentation and let it perform as *engraver's copperplate re-interpreted in silicon*. - **Secondary display & body — [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** (variable wght 300→700, italic): The collector's voice. Used for section headings (italic 600 at clamp(2.4rem, 5vw, 4.8rem)), specimen common names (italic 300 at 18px), body prose inside drawers (regular 400 at 17px / 30px line-height), catalogue descriptions, and the maker's mark beneath the wordmark. Cormorant Garamond's extreme contrast — hairline thins against bold strokes — matches the engraved-plate visual register. At large sizes it reads as a 19th-century natural history title page; at body size it reads as the collector's hand. - **Tertiary accent — [`Cinzel`](https://fonts.google.com/specimen/Cinzel)** (wght 400→900): Used exclusively for Latin binomial species names displayed on specimen labels (14px, tracking +0.08em) and for the taxonomic section dividers in the Register. Cinzel is a classical Roman inscription typeface — it gives the fish names the gravitas of museum labelling. **Palette — deep-burgundy as the total environment:** | Role | Hex | Name | |------|-----|------| | Page background | `#1A0A0F` | Midnight Claret | | Cabinet interior | `#2E0D18` | Vintage Burgundy | | Mahogany highlight | `#3D1420` | Aged Mahogany | | Engraved rule / border | `#6B1E2E` | Deep Garnet | | Amber specimen ink | `#C4875A` | Cognac Amber | | Specimen highlight | `#E0A870` | Old Brass | | Aged card background | `#F2E4C8` | Vellum | | Body text on dark | `#D4B896` | Pale Cognac | | Body text on card | `#2E0D18` | Vintage Burgundy (reversed) | | Iridescent fish hover | `#7EC8C0` | Teal Iridescent (hover only, <3% ink area) | The deep-burgundy palette is used as the **total environment** — it is the room the visitor inhabits, not a brand colour applied to UI elements. The only colour accent outside the burgundy/cognac family is the teal iridescence on fish hover, which lasts exactly as long as the hover and then fades back to amber engraving — a single flash of living colour in a room of preserved specimens. --- ## Imagery and Motifs **Tropical fish as taxonomic subjects — the collage vitrine:** Each fish specimen is a **layered SVG collage** assembled from: 1. A fine-line engraving path-drawing (1px `#C4875A` stroke, no fill) — the primary fish outline with scale-pattern hatching at 0.6px / 30° angle. 2. A semi-transparent SVG shadow cast beneath the fish, blurred `filter: blur(3px)` at 18% opacity `#1A0A0F`, offset +4px/+6px — giving the impression the fish is pinned slightly above the vitrine glass. 3. A rectangular specimen-card label (`#F2E4C8` background, `#2E0D18` border 0.5px) carrying the Latin binomial in Cinzel 12px, the registry code in JetBrains Mono 10px, and the specimen description in Cormorant Garamond Italic 11px. 4. A brass specimen-pin SVG circle (6px diameter, `#C4875A` fill, 1px `#E0A870` border) at the top of the specimen — the physical pin holding the card. 5. A coffee-ring SVG (single ring ellipse, `#C4875A` at 8% opacity) placed casually overlapping one corner of the label card. The three featured species in the Specimen Hall: - **Pterophyllum licensoris** (the Angelfish of Licensing) — tall laterally compressed body, elegant dorsal/ventral fins, radiating striping hatching. Registry REG-0001/A. - **Amphiprion contractus** (the Clownfish of Contracts) — bold banded pattern achieved through alternating hatch-direction fills. Registry REG-0047/B. - **Paracanthurus royaltii** (the Blue Tang of Royalties) — oval body, scalpel tail-spine detail indicated by a fine separate path. Registry REG-0203/C. **On hover:** The engraving path-drawing fades (0.6s ease-out) as a CSS `clip-path` animated SVG fish silhouette fills with `#7EC8C0` teal iridescence, then `#5AAFC4` blue-green, the belly becoming `#F2E4C8` — a full-colour living fish. When hover ends, the colour drains back (0.8s ease-in) and the engraving re-appears via `stroke-dashoffset` redraw. **Collage assembly technique:** All visual elements are **CSS absolutely positioned layered children** inside each vitrine panel. No raster images anywhere. Overlapping is intentional: the specimen label overlaps the fish tail by 18px, the brass pin sits at the intersection, the coffee ring crosses the label corner — producing the physical depth of a real cabinet without photography. **Pattern motifs throughout:** - **Engraved botanical border** — thin SVG paths forming a rectangular frame from tropical fish silhouettes in head-to-tail repeat (6 fish per long edge, 4 per short edge), all at 8% opacity on background panels. - **Cabinet wood grain** — SVG feTurbulence noise rendered as horizontal grain lines (0.4px, `#3D1420`, 4% opacity) behind all dark panels — gives surfaces material reality. - **Ink-stamp license seal** — circular SVG stamp (tropical fish arching over "LICENSED" text) used as a watermark at 12% opacity on the Register ledger page. - **Brass rule dividers** — 1px horizontal rules in `#C4875A` at 25% opacity between register entries. --- ## Prompts for Implementation **The core CSS architecture:** The cabinet structure uses CSS `transform: translateY(-100%)` → `translateY(0)` for drawer open/close. Each `.vitrine-drawer` is `overflow: hidden` with `height` controlled by a CSS custom property `--drawer-height`. JavaScript `IntersectionObserver` triggers `--drawer-height` changes; CSS `transition: transform 0.6s cubic-bezier(.08,.82,.17,1)` handles the animation. The mechanical easing (fast initial acceleration, slow settle) mimics a drawer being pulled open by a brass ring and coasting to a stop. **Micro-interactions catalogue (all CSS/JS, no library):** 1. **Drawer open — slide-down reveal** (described above). Triggered on first scroll-entry via IntersectionObserver, thereafter by navigation pin click. 2. **Fish hover — engraving-to-living transition.** Two SVG layers per fish: `.engraving` (path-drawn outline) and `.living` (filled SVG silhouette). On hover: `.engraving` opacity 1→0 over 0.6s ease-out; `.living` opacity 0→1 over 0.6s ease-in, with `filter: saturate(0) brightness(1.4)` → `filter: saturate(1.2) brightness(1)` transition adding the iridescent colour wash. 3. **Navigation pin fill** — active pin fills with `#C4875A` using `clip-path: circle(50%)` reveal animation over 0.3s. 4. **Register ledger entry hover** — the ruled line beneath the hovered entry expands from `width: 0` to `width: 100%` in `#6B1E2E`, travelling left-to-right over 0.4s. The registry code shifts from `#D4B896` to `#E0A870` over 0.2s. 5. **Specimen card label hover** — label scales `transform: scale(1.04)` with `transform-origin: bottom left` over 0.3s — as if a viewer is leaning in to read the label. 6. **Wordmark ink-reveal** — on page load, the wordmark traces itself in via `stroke-dashoffset` animation (1.8s, `cubic-bezier(.16,.84,.44,1)`). After completion (2.2s including delay), fill floods in opacity 0→1 over 0.8s. 7. **Drawer pull-tab hover** — pull-tab label shifts +2px right over 0.2s ease and the brass amber colour brightens `#C4875A` → `#E0A870`, suggesting a physical affordance. **Page structure (no nav bar, no hero full-bleed, no CTA grid):** ``` body .cabinet-ribbon (left edge, 12px, fixed, six pin waypoints) .cabinet .vitrine-drawer#registry .vitrine-drawer#specimen-hall .vitrine-drawer#catalogue .vitrine-drawer#register .vitrine-drawer#correspondence .vitrine-drawer#provenance ``` Each `.vitrine-drawer` is `position: relative`, `margin-left: [organic-offset]%`, `border: 1px solid #6B1E2E`, `background: #2E0D18`, `overflow: hidden`. **Typography implementation:** Google Fonts import: `JetBrains+Mono:wght@400;700;800`, `Cormorant+Garamond:ital,wght@0,400;0,600;1,300;1,400;1,600`, `Cinzel:wght@400;700`. **Forbidden in this design:** - No raster photography of any kind - No CSS gradient mesh backgrounds (wood grain is SVG noise, not gradient) - No parallax scrolling (the drawers move, not the background) - No sticky nav bar - No card-grid sections - No pricing tables or stat counters - No hero image section - No emoji anywhere --- ## Uniqueness Notes 1. **Tropical-fish-as-taxon (unique treatment).** Tropical fish appear in 4% of the corpus, but always as illustration/decoration. gamelicensor.info uses fish as *registered legal specimens* — each with a registry number, Latin binomial, and mock legal classification. The licensing domain (game licensing) becomes a satirical taxonomy in which licenses are species, and the business of IP law is refracted through Victorian natural history. No other design in the corpus uses this conceptual frame. 2. **The cabinet-drawer layout (organic-flow as furniture).** Organic-flow appears in a handful of corpus designs as fluid/blob-shaped sections. Here it becomes a literal furniture metaphor — six drawers in a slightly imperfect collector's cabinet. The organic offset is architectural rather than decorative. The drawer-slide mechanic makes the layout *interactive furniture* rather than a scrollable page. 3. **Deep-burgundy as the total room environment (not a palette).** The corpus treats palettes as colour families applied to UI elements. gamelicensor.info treats `#1A0A0F` as the material of the room itself — the walls, the cabinet, the air. Every other colour is a light source within that room (cognac amber of the engraving, teal flash of the living fish, vellum of the specimen card). Deep-burgundy is 3% in the corpus and is never used at this saturation depth or total-environment scale. 4. **Micro-interactions as the sole animation language.** The corpus competes on scroll-triggered reveals, parallax, spring physics, and cursor-follow. gamelicensor.info has none of these — its only animations are the seven micro-interactions (drawer open, fish hover, ledger line draw, pin fill, label lean, wordmark ink-trace, pull-tab shift) all of which are *direct responses to user action* rather than ambient theatrics. The page is alive precisely when you touch it, and still when you don't. 5. **Collage as physical layering (not graphical collage).** The corpus uses collage as overlapping images in montage. gamelicensor.info uses collage as *the physics of a real vitrine* — elements overlapping because they are pinned, stacked, leaning — engraving shadow, brass pin, coffee ring, specimen label all at different z-depths within the same panel. The collage reads as three-dimensional without 3D transforms. 6. **JetBrains Mono as Victorian copperplate (not code aesthetic).** Tech-mono typography at 4% in the corpus always reads as developer or terminal. gamelicensor.info uses JetBrains Mono as if it is a *copper-engraved ledger hand* — formal, precise, slightly mechanical, employed by a 19th-century registrar rather than a 21st-century software engineer. The pairing with Cormorant Garamond creates a tension between the handpress italic and the precision instrument that defines the site's intellectual character. 7. **Luxurious tone as institutional gravity (not consumer luxury).** Luxurious in the corpus tends toward sheen, gold gradients, and soft light. gamelicensor.info's luxury is the opposite of consumer luxury — it is the luxury of not needing to sell you anything, of having already earned the right to list your specimens at 13px italic in an ordered catalogue without further persuasion. **Chosen seed (planned):** *aesthetic: maximalist, layout: organic-flow, typography: tech-mono, palette: deep-burgundy, patterns: micro-interactions, imagery: collage, motifs: tropical-fish, tone: luxurious* **Avoided overused patterns (per frequency analysis):** centered layout (91%) → 0% used; full-bleed (76%) → 0% used; warm palette (93%) → 0% used; gradient palette (87%) → 0% used (wood grain is SVG noise, not CSS gradient); mono typography as code-aesthetic (87%) → recontextualized as registrar copperplate; vintage motifs (57%) → replaced with Victorian-natural-history frame distinct from decorative vintage; photography imagery (dominant in corpus) → 0% used; parallax (corpus-dominant) → 0% used; sidebar layout (29%) → replaced with vertical ribbon pin navigation; sticky nav bar → eliminated entirely. **Preferred underused patterns (per frequency analysis):** organic-flow layout (rare) → primary structural metaphor as cabinet-drawer furniture; deep-burgundy palette (3%) → total environment, not accent; tech-mono typography (4%) → lead typeface recontextualized as copperplate; micro-interactions patterns (low) → sole animation vocabulary; collage imagery (5%) → physical layering within vitrine panels; tropical-fish motifs (4%) → taxonomic specimens with legal registry numbers; luxurious tone (5%) → institutional gravity rather than consumer sheen.