# Design Language for gamelicensor.info ## Aesthetics and Tone **gamelicensor.info is conceived as *Herbarium Ludens* — a black-and-white botanical monograph in which every clause of every game license is pressed, dried, mounted, labeled, and explained.** The conceit is that game licenses are not legal texts but **specimens** — flowering plants of a strange, taxonomic kingdom called *Iurisludica*, collected over decades of play, fastened to acid-free folio leaves with linen tape, and annotated in a slow, patient, fastidiously kind hand. The site is the digital scan-through of this herbarium, page by page, lens by lens, magnification by magnification. The tone is **avant-garde tech-tutorial**: it teaches, but it teaches the way a Victorian field naturalist teaches — through close looking, slow naming, comparative anatomy, and the surprised respect of one expert speaking to one student about something they both find beautiful. A clause is dissected the way a sepal is dissected. A sublicense is traced the way a phyllotaxis is traced. There are no marketing words — no "empower," no "unlock," no "seamless." There are only **magnifying-glass moments**: the cursor becomes a hand-lens, hovers over a specimen, and the specimen blooms open at five-times scale. The mood is **monochrome, paper, slightly damp, slightly warm under the lamp.** Not mysterious-moody (that's at 30% in the corpus and we are explicitly avoiding it), not corporate (45% and avoided), not card-grid-photography (the dominant cliché). Instead: the cool reverence of a museum archive room at three in the afternoon, when the curator has just unlocked the cabinet and is showing you, only you, the type specimen. It is **avant-garde** because pressed plants are not how anyone — anywhere — depicts the licensing of video games. It is **tech-tutorial** because the underlying purpose is genuinely instructive: to teach a developer, lawyer, or curious player how a game license actually works, clause by clause, with the same patience a botanist gives to the difference between a *raceme* and a *panicle*. ## Layout Motifs and Structure The site is **one tall organic-flow scroll, structured as a single folio of the herbarium, opened to a single specimen at a time.** No card-grid (avoid: 48%). No bento (avoid: 11%). No centered hero (avoid: 45%). Instead, the page **breathes** down the screen the way a vine grows down a trellis — asymmetric, leaning, never on a strict grid, its rhythm dictated by the *anatomy of the plant being shown* rather than by a 12-column scaffold. **The Macro-Composition.** The viewport is a folio leaf — cream paper texture (subtle, never decorative) bounded by a generous handmade margin. Down the left third meanders an irregular **collection thread** — a hand-drawn vertical line in 0.5pt ink, kinking around clause-numbers the way a stem kinks around nodes. The right two thirds hold the **specimen** itself: a large illustrated plant rendered in inline SVG, with each anatomical part **labeled by a thin angled lead-line** terminating in a small italic caption. As you scroll, the specimen **does not slide** — it **grows**, segment by segment, by SVG path-draw, while the previous specimen recedes behind it in a fade to 8% opacity, becoming a watermark beneath the new growth. **The Specimen Pages.** There are seven main specimens, each a different "family" of game license clause: *Grantaceae* (the grant), *Restrictivoideae* (restrictions), *Terminae* (termination), *Indemnitea* (indemnification), *Disclamariaceae* (warranty disclaimers), *Sublicensiae* (sublicensing), *Royalentaceae* (royalty). Each occupies roughly **140vh** of vertical space and is structured **like a taxonomic plate**: - **Latinate name** in a generous handwritten italic at the top-left, lower-cased. - **Common name** ("the grant of license," "the sweeper clause") in rounded-sans below it, kerned generously. - **The illustrated specimen** taking the central two-thirds. - **Margin annotations** — short paragraphs of tutorial prose set in 14px rounded-sans, appearing in the gutter, each tied by a faint dashed lead-line to the part of the plant it describes. - **A small "scale bar"** at the bottom — a 1cm rule labeled *"× actual,"* a pun: the magnification reveals legal subtext that, at 1× scale, is invisible. **The Zoom-Focus Mechanic.** This is the structural soul. As the cursor moves across the specimen, a **circular hand-lens** (60px diameter, soft inner shadow, outer rim a thin black ring) follows it. Inside the lens, the specimen renders at **5×**, and **previously hidden marginalia appear** — clause text that was set in 2pt invisibly small ink becomes legible inside the lens at 10pt. The lens is the entire navigation idiom: there is no menu, there is no nav bar, there is **the lens, and what the lens reveals.** Move the lens off the page — over a margin — and the lens becomes empty glass, and a tiny cursor-following caption asks, in italic: *"continue?"* **Organic-Flow Asymmetry.** No section is the same width as another. No baseline is shared between adjacent paragraphs. Annotations float into the white space at angles between -7° and +9°, the way a botanist's pencil notes drift on a folio. This is **organic-flow** at 7% in the corpus — underused. We will use it not as a decorative tic but as the structural law of the entire document. **Footer.** A pressed flower, single, centered, in 0.5pt ink. Beneath it, in italic: *"specimen no. 8 — to be collected"* (a slow promise of more). ## Typography and Palette **All fonts available on Google Fonts.** Three faces only — a display rounded-sans, a body rounded-sans, and a single hand-drawn italic for Latinate names. - **Display and body — *"Nunito"*** (rounded-sans). Weight 300 for body (14px / 22px line-height, slightly looser than usual to let the letterforms breathe). Weight 800 for the common-name headers (clamp(2.4rem, 5vw, 4.2rem), tracking +0.04em — open, generous, friendly to the eye after hours of looking at specimens). Nunito's terminals are gently rounded — the shoulders of the *n*, the bowl of the *a*, the end of the *t* — and this softness is the sonic key to "tech-tutorial in a herbarium": informational without being severe. Rounded-sans appears in **0%** of the corpus — we are claiming territory that no one else has claimed. - **Latinate species names — *"Caveat"*** (a pen-stroke handwritten italic from Google Fonts), used at small sizes (1.6rem) for the binomial nomenclature only. Lower-cased always (a botanical-cataloguer's affectation: lower-case for the species epithet always, lower-case for the genus by site convention to keep the hand-feel quiet). Color: a desaturated very-dark ink #1f1f1d (not pure black — pure black is too modern; this is **iron-gall ink** dried twenty years). - **Marginalia — *"Nunito"*** weight 300 italic at 12px. Tracking +0.01em. Color: #3a3a37. The italic of the same family — the **whisper voice** of the curator. - **Numerals on scale-bars and clause numbers — *"Nunito"*** weight 600, **tabular-nums** featurified on. Numerals in herbarium catalogues must align like seedlings in a tray. **Palette — monochrome, but never pure.** Monochrome is at 5% in the corpus, underused. We push it harder than the corpus has dared, restricting ourselves to **eight values along a single warm-paper-to-iron-gall axis.** No accent color. No "brand color." The drama is entirely in **value, scale, and white space.** - `#f5f1e8` — **paper white** — the field on which everything is mounted. Slightly cream, slightly aged, because pure white is hostile to a herbarium. - `#ebe5d4` — **paper shadow** — used in subtle 1px shadows beneath the lens and beneath specimen mounts, never as a fill. - `#cfc6b0` — **dust** — for the watermark of the previous specimen as it recedes; also for the dashed lead-lines. - `#9a9182` — **mid-stem** — for fine illustration linework on secondary anatomy; also for the **"× actual"** caption. - `#5a5446` — **inked midtone** — for body text marginalia and lead-line terminals. - `#3a3a37` — **dried-ink** — italic marginalia, captions. - `#1f1f1d` — **iron-gall ink** — the deepest value, for primary illustration linework, common-name headers, and the rim of the lens. - `#0d0d0c` — **lampblack** — used **once per specimen page**, in a single black square placed in the lower-right corner the size of a pressed thumb-press: a scholar's signet. Its rarity is its weight. There are no gradients (corpus avg 49%, avoided). There are no warm reds, no warm browns, no neon, no duotone, no candy-bright. Eight greys, end of palette. ## Imagery and Motifs **No photography (corpus 48%, hard avoid). No 3D renders. No icon libraries. No stock anything.** Every visual is hand-built inline SVG, and every visual is botanical. **Motif #1 — Floral-Botanical Specimens (the seven plates).** Each clause-family is illustrated as a different fictional plant of the kingdom *Iurisludica*. These are drawn in the manner of **19th-century botanical engravings** (think Anne Pratt, Curtis's Botanical Magazine, Elizabeth Blackwell's *Curious Herbal*) but with one constant alien feature: every leaf, sepal, and bract carries a tiny embossed clause-glyph instead of a vein-pattern. SVG paths only — no raster. Stroke 0.6px iron-gall on paper-white. Hatching for shadow. The plants: - **Grantaceae permittens** — a generous tendrilled vine bearing five-petalled blossoms; each petal is shaped like a checkbox. - **Restrictivoideae prohibens** — a thistle-like plant with thorny bracts; thorns are tiny no-entry signs rendered as botanical hooks. - **Terminae mortis** — a withering grass; its seed-heads are small hourglasses. - **Indemnitea solvens** — a broad-leafed succulent with milk-bleeding stems; the milk drips into a collecting bowl labeled "the holding harmless." - **Disclamariaceae nuda** — a leafless plant, all stem, with a single bare flower; "as is." - **Sublicensiae fractalis** — a fractally branching shrub; each branch holds a smaller, exact copy of the parent flower. - **Royalentaceae floribunda** — a heavy-headed grain stalk; each grain is a tiny coin engraved with a percentage sign. **Motif #2 — Hand-Lens Reticule.** When the cursor enters a specimen, the lens activates. Inside its rim is a **fine cross-hair reticule** with millimeter ticks. The reticule is decorative-functional: it marks the precise point where a clause's plain text is being magnified. Outside the rim is a barely-visible **chromatic-aberration ring** in two greys (#5a5446 and #cfc6b0) — a one-pixel violation of pure monochrome that reads as antique optics, not as color. **Motif #3 — The Lead-Line.** Every annotation is connected to its specimen-part by a **thin, slightly wandering, hand-drawn dashed line** terminating in either a small filled dot or an open circle — never both at once on the same plate (a botanist's consistency). The lead-line is not straight; it has 1–3 gentle curves, drawn in SVG with quadratic Bézier paths. The line is **silent** — no animation on it — until it is the active annotation, when it draws itself in over 1.4 seconds via stroke-dashoffset. **Motif #4 — Pressed-Plant Tape.** At each top-corner of each specimen plate, a small piece of **linen tape** is rendered in SVG: an off-white rectangle, slightly translucent, with frayed edges drawn as eight to twelve tiny zig-zag points. Beneath the tape, a faint shadow. The tape "holds" the specimen to the page. It does nothing else. It is the only piece of pure decoration on the site, and it earns its place by anchoring the entire conceit. **Motif #5 — Marginal Doodles.** Sparse, irreverent: a tiny inked drawing of a cricket on one page, a fly on another, a single seed pod, a fern crozier. These are the curator's idle marginalia, drawn at moments where the white space might otherwise feel staged. They never animate. They are the curator's fingerprints. **Motif #6 — The Scale Rule.** Each plate has a precise scale bar in millimeters, hand-ruled. It is functional ornament: it tells the reader at what magnification the lens is operating, and pulses faintly (opacity 0.6 → 1.0, 1.6s ease-in-out infinite alternate, but only when the lens is active over the specimen). ## Prompts for Implementation **Build it as one tall server-rendered HTML document.** No SPA, no router, no client framework, no build pipeline beyond a single CSS file and a single ~12kb vanilla-JS module. The document is the herbarium; the herbarium is the document. Length: roughly 9,800–11,200 pixels of vertical scroll across seven specimen plates plus a frontispiece and a colophon. The visitor scrolls the way one turns folio pages — slowly, patiently, attentively. **No CTA-heavy layouts. No pricing block. No testimonials. No stat-grid. No logo wall. No card-grid. No feature-comparison table. No email-capture popups. No "Get Started" button.** These would shatter the herbarium conceit instantly. There is exactly one navigational primitive: **the lens.** **Frontispiece (0–110vh).** A near-empty paper-white field. Top-left, in tiny rounded-sans 12px: *"herbarium ludens — a field guide to the licensing of games."* Top-right: *"vol. i, plates i–vii."* Centered, occupying about 40vh, a single inline-SVG illustration: **a hand-lens lying on a folio, casting a small soft drop-shadow.** Below it, in handwritten italic *Caveat*: *"to begin, take up the lens."* When the visitor moves the cursor into the field, the SVG hand-lens **lifts** (a 600ms ease-out translateY of -28px and slight rotation), the cursor itself becomes the lens (custom CSS cursor, fallback to a JS-driven follower for fidelity), and the visitor is — without any other prompt — already inside the herbarium. **No "scroll to enter" hint; the conceit instructs.** **Plate-by-plate scroll.** Each plate is its own `
` with `position: relative`. As the section's top crosses 60% of viewport, a **path-draw-svg animation** begins on the specimen: the central stem draws first (1.2s), then primary leaves (staggered 0.18s apart, 0.9s each), then flowers (1.4s with slight overshoot via cubic-bezier(0.34, 1.56, 0.64, 1.0)), then lead-lines and annotations fade-in (0.6s, opacity 0 → 1, transform translateY(8px) → 0). **path-draw-svg is at 19% in the corpus — present but not tired; we use it because it *is* the natural visual idiom for ink drawing itself onto paper.** The animation is one-way; there is no rewind on scroll-up. A drawn plant does not undraw. **Zoom-focus is the central pattern (corpus 5%, underused).** Implementation: 1. A `
` follows the cursor at all times within ``. CSS: 60px circle, `backdrop-filter: none` (we are not glassmorphic), `border: 1px solid #1f1f1d`, `box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 0 18px rgba(0,0,0,0.04)`. A reticule SVG inside. 2. Inside the lens, a **clipped, scaled clone of the specimen** renders. Use SVG `` referencing the specimen's symbol id, wrapped in a `` circle that follows the cursor, with `transform="scale(5) translate(...)"` recomputed on `mousemove` (throttled to rAF). 3. Inside the lens (and **only** inside the lens), a layer of **previously invisible clause-text** (set in the unscaled SVG at 2pt ink, opacity 0) becomes legible at 10pt by virtue of the 5× scale and an opacity rule that triggers when the parent group is inside the clip region. 4. On touch devices, the lens is locked to the most recently tapped specimen-part and the user drags a small puck to traverse. The puck is the lens. Same idiom, different motor. **Organic-flow scrolling.** Nothing snaps. No `scroll-snap`. The page breathes. Section transitions are not abrupt — the previous specimen fades to 8% opacity over the last 30vh of its own section, becoming a watermark beneath the new specimen's first 30vh. Two specimens are thus, briefly, **on the same page**, the way pressed flowers from adjacent collecting trips share a cabinet. **Cursor and motion.** **Magnetic** is at 10% in the corpus; we will use a tiny version: lead-line terminals exhibit a 4px magnetic pull toward the cursor when it is within 28px of them, easing back when it leaves. **Cursor-follow** (corpus 9%) is the lens itself. **Spring** (corpus 21%) drives the slow lift of the frontispiece hand-lens. We avoid: parallax (too cinematic), tilt-3d (too card-y), card-flip (anti-conceit), bounce-enter (too cheerful for a herbarium room). **Tech-tutorial micro-essays.** Each plate carries a 180–260-word **margin essay** explaining the corresponding clause family in plain, kind English: what it does, what its cousins do, what trips up developers, what trips up players. The essay is **not** an aside — it is the actual instructional content the site exists to deliver. The herbarium conceit is the spoonful of honey; the essay is the substance. **Write these essays as a patient teacher would**, in second person ("notice the way the petal's edge..."), grounded, never glib. **Storytelling arc.** The seven plates progress from **what is given** (Grantaceae) to **what is taken back** (Restrictivoideae, Terminae) to **who pays when it breaks** (Indemnitea, Disclamariaceae) to **how it propagates** (Sublicensiae) to **how the curator is paid** (Royalentaceae). The visitor leaves with both an aesthetic memory and a working model of game licensing. The colophon, at the very bottom, is a single hand-drawn pressed flower and the site's only signature: *"compiled at the kitchen table — gamelicensor.info."* **No JavaScript dependencies.** Vanilla. ~12kb gzipped JS budget for the lens, the magnetic terminals, and the path-draw orchestration. CSS-only for everything else. **Fonts loaded** with `font-display: swap` from Google Fonts: Nunito (300, 300i, 600, 800), Caveat (400). That's it. **Imagery pipeline.** All seven specimens are inline SVG, hand-authored (or hand-authored-feeling) in a vector editor and pasted into the document. No PNGs. No JPGs. No WebP. No favicons that look like a logo — the favicon is a **single inked sepal** at 32×32, monochrome. ## Uniqueness Notes **Differentiators from other designs in the corpus:** 1. **Game licensing as botanical taxonomy.** No other site in the corpus depicts a tech/legal subject as a herbarium. The dominant frames for licensing-adjacent or developer-tool sites are corporate (45%) or terminal (10%); this site refuses both. It treats clauses as living things, drawn from a fictional plant kingdom *Iurisludica*, and teaches them through the patient looking that botany requires. 2. **Hand-lens as sole navigation.** No menu, no nav bar, no breadcrumb, no scroll-to-top. The single navigational primitive is a cursor-following hand-lens that magnifies the specimen at 5× and reveals previously invisible clause text. This is **zoom-focus** (corpus 5%, underused) used not as a decorative micro-interaction but as the **entire interaction model** of the site. 3. **Rounded-sans typography.** Nunito (rounded-sans) appears in **0%** of the analyzed corpus. The corpus is 47% mono and 20% humanist; this site stakes a claim in territory no one else has used. The choice is not arbitrary — Nunito's softness is the typographic equivalent of a kind teacher, which is precisely the tech-tutorial register we need. 4. **Strict eight-value monochrome with no accent color.** Monochrome is at 5%; gradient is at 49%; warm at 49%. This site uses no gradients, no warm reds, no candy-bright, no duotone. Eight greys along a single paper-to-iron-gall axis. The drama is entirely value-and-scale-and-white-space. We out-monochrome the monochrome corpus. 5. **Organic-flow as structural law, not decoration.** Organic-flow (7% corpus) is here the actual rule — no shared baselines between adjacent paragraphs, no symmetric widths, annotations rotated -7° to +9°, lead-lines wandering. Most "organic-flow" entries in the corpus are decorative; this one is structural. 6. **Floral-botanical motifs (very rare in corpus).** Botanical-illustration is 2% in the imagery axis; nature motif is 11% but usually decorative. Here, **every illustration is a hand-drawn 19th-century-engraving-style botanical specimen of a fictional legal plant.** The plants are not background ornament; they are the page's primary content. 7. **Tech-tutorial tone via field-naturalist diction.** The corpus has no entries that explicitly braid tech-tutorial with avant-garde botanical conceit. The marginalia are written in a naturalist's second person ("notice the way the petal's edge serrates around the word *non-transferable*...") rather than the corporate "empower," the playful "let's go," or the moody "in shadow." **Avoided patterns from frequency analysis:** - **avoided:** card-grid (48%), centered (45%), photography (48%), corporate (45%), gradient (49%), warm (49%), scroll-triggered (46%) as a primary motion idiom, mono typography (47%), mysterious-moody (30%). - **leaned into (underused):** rounded-sans (0%), nature-elements imagery (1%), botanical-illustration (2%), monochrome (5%), avant-garde (5%), zoom-focus (5%), organic-flow (7%), tech-tutorial register (rare). **Chosen seed:** aesthetic: avant-garde, layout: organic-flow, typography: rounded-sans, palette: monochrome, patterns: zoom-focus, imagery: nature-elements, motifs: floral-botanical, tone: tech-tutorial. The fusion concept — a black-and-white herbarium of game licensing — is the bridge that holds these eight signals in a single, coherent, unapologetic object.