# Design Language for gamelicensor.pro ## Aesthetics and Tone gamelicensor.pro is staged as a **cinematic pastoral** — the lone professional licensor's chamber-piece, filmed in soft 1.85:1 letterbox and dressed in candy-bright June light. The conceit: licensing a game is not a contract, it is a courtship. A studio (the suitor) crosses a meadow at dawn, kneels by a publisher's hedgerow (the beloved), and exchanges a token — the licence — that has the weight of a vow. The whole site is a single short film about that walk, that kneel, that token. Every section is a shot. Tonally we sit at the rare intersection of **cinematic** (5% in corpus) and **pastoral-romantic** (0% in corpus, untouched). This is not the wedding-photo pastoral of Pinterest — it is the pastoral of Andrew Wyeth's "Christina's World" recoloured by a 1990s Studio Ghibli matte painter, then graded by Wong Kar-wai's cinematographer Christopher Doyle: shallow depth of field, sherbet-bright bloom, a permanent late-afternoon haze. The camera always loves something off-centre — a sleeve, a stem, an ear-tip of a hare hiding in the clover. The legal severity of "licence" is set against the sweetness of buttercream pinks and pistachio greens, and the contradiction is the point. Game licensing is romantic. We're saying it out loud. The mood is **slow, sun-warmed, slightly drowsy**. The user should feel like they accidentally wandered into the third reel of a film already in progress. There is no hard sell, no metrics, no leaderboard. There is a meadow, a letter, and a soft wind moving the type. ## Layout Motifs and Structure The site is composed as a **scene-by-scene shooting script**. Each scene occupies a full viewport but is staged **asymmetrically** (22% in corpus — preferred over the 43% centred default and 45% card-grid default we explicitly avoid). The asymmetry is not random: it follows the **rule of thirds applied to a 1.85:1 letterbox**. Every viewport has a top mask (8vh of pure cream) and a bottom mask (8vh of pure cream) — the persistent letterbox bars — and inside that 84vh "frame" the action sits at one of the four thirds intersections, never the centre. **Scene order (the shooting script):** 1. **EXT. MEADOW — DAWN.** Title card. The word "gamelicensor" handwritten in stem-thin cursive across the lower-left third, with a single illustrated foxglove rising up the right third, slightly out of focus. A "Reel 1 of 5" mark bottom-right. 2. **INT. STUDIO — MORNING.** A tilted desk shot (camera slightly canted, ~3deg). A pen, an envelope, a half-finished cartridge sketch. This is "Why licence?" Copy is set as letterhead. 3. **EXT. PATH — MIDDAY.** A horizontal-scrolling pastoral procession: the user pushes the camera dolly along a country lane while illustrated hedgerows, a wheelbarrow of ROM cartridges, and a sleeping cat pass by. This is "What we cover" — territories, platforms, terms — each rendered as a roadside marker. 4. **EXT. HEDGEROW — GOLDEN HOUR.** The kneel. A two-shot: studio-figure on the left, publisher-figure on the right, an open hand between them holding a glowing token. This is "How it works" — three steps, each a beat of the held gesture. 5. **EXT. MEADOW — DUSK.** The token is exchanged. Letterforms drift upward like fireflies. A signature line. A return to the foxglove, now in sharp focus while the rest of the world is blurred. This is the contact / signing moment, not styled as a CTA but as the resolution of the scene. **Macro grid:** A 12-column ratio grid where columns 1-4 and 9-12 are the "thirds gutters" and the central 5-8 is the "negative meadow." Content lives in the gutters. The centre is almost always empty — meadow grass, sky, blur. This produces the rare asymmetric / **ma-negative-space** hybrid layout that fewer than 4% of designs combine. **Micro structure:** Each scene has a **slug line** (top-left, mono caps, like a screenplay: "INT. STUDIO -- MORNING") and a **scene number** (top-right, roman numeral). The slug line is the only mono type on the site — it borrows from the screenplay tradition and grounds the romance in craft. Transitions between scenes are **focus pulls**, not cuts: as the user scrolls, the next scene resolves from blurred candy-fog into sharp illustration over ~120vh of scroll. This is the **blur-focus** pattern (only 5% in corpus, deliberately preferred). ## Typography and Palette **Typography** (all available on Google Fonts): - **Display / Title Cards**: **"Caramel"** — a thin, looping single-stroke cursive that reads like ink on a love letter. Used at `clamp(4rem, 11vw, 9rem)` for scene titles. Letters animate in **kinetic-animated** style (5% in corpus): the cursive stroke draws itself in over 2.4s using SVG `stroke-dashoffset`, with the dot of each `i` arriving as a small candy-pink circle that drops from above with a subtle bounce. - **Body / Letterhead Prose**: **"Cormorant Garamond"** at 400/500 weight, italic available. Used at `1.25rem` line-height `1.7`. This is the voice of the letter: warm, considered, a little old-fashioned. Italics carry emphasis like a held breath. - **Slug Lines (the only mono)**: **"DM Mono"** in `0.75rem` `letter-spacing: 0.18em` `text-transform: uppercase`. Used exclusively for the screenplay slug lines and reel marks. - **Scene Numerals**: **"Cormorant Unicase"** roman numerals, `2rem`, displayed as I, II, III, IV, V in the top-right of each scene. - **Kinetic word-rolls**: certain key nouns ("licence", "territory", "term", "exclusivity") are wrapped in a `` and continuously cycle through synonyms via a vertical roll (`transform: translateY`) every 4 seconds, like a slot reel slowing down. This is the kinetic-animated commitment in miniature. **Palette — the candy-bright pastoral grade** (candy-bright is only 2% in corpus, lifting it as the load-bearing palette): - `#fbe8ee` **Cream Petal** — base background, the unbloomed sky and the letterbox bars - `#ff8fb1` **Buttercream Rose** — primary candy accent, used for the dot of every `i`, for foxglove petals, for underlines - `#ffd166` **Honey Sun** — the late-afternoon light leaking in from the upper-right of every scene; used as a `radial-gradient` glow, never as a solid block - `#a8e0c5` **Pistachio Meadow** — the meadow grass green; used in illustrations and as the colour of "approved" / "agreed" type - `#7aa6d6` **Periwinkle Haze** — the distant hedgerow and the dusk; used for the heaviest blur layers (60-100px) in the background - `#b08fff` **Iris Twilight** — secondary candy accent for hover states; the colour of the "exchanged token" - `#3c2f4d` **Ink Plum** — primary text. Not black. A deep plum that reads as "ink in candlelight." Always on cream. - `#fffaf3` **Vellum** — the colour of the letter-paper inset cards; warmer than the Cream Petal background The palette is **pastel** but not muted: saturation runs high (around 60-75%) while value stays bright (around 88-95%). This is what distinguishes "candy-bright" from "creamy-pastel" — the candy palette has *bite*. Hover states bloom: a ~6px buttercream-rose glow that grows to ~16px iris-twilight on press. ## Imagery and Motifs **No photography. No stock. No data-viz. No icons.** This site commits fully to **custom-illustration** (0% in corpus — completely untouched, this is the headline differentiator) rendered in a single coherent hand: thin 1.5px ink linework on cream, flat candy fills, occasional cross-hatching for shadow. The illustration style references **Quentin Blake** (the Roald Dahl illustrator) crossed with **Eyvind Earle** (the Sleeping Beauty background painter): nervy expressive line over architectural pastoral composition. **Recurring illustrated cast** (drawn once as SVG, animated repeatedly): - **The foxglove** — load-bearing motif. A tall stem with seven bell-shaped flowers, each flower a slightly different candy hue. Sways at 0.8Hz with a gentle sine. The bells open and close over a 14-second loop. This is the leaf-organic motif rendered specifically as foxglove because foxglove (digitalis) is both medicine and poison — like a licence agreement. - **The hare in the clover** — appears once per page, hidden. Ear-tips poke up from the bottom of one scene. Hover the scene and the hare's eye blinks. Easter egg. - **The wheelbarrow of cartridges** — passes through scene 3. Eight illustrated cartridges (NES, SNES, GameBoy, Saturn, Dreamcast, Mega Drive, PSone, GBA) stacked like firewood. The wheel actually rotates as the user scrolls. - **The token** — a coin-sized illustrated wax seal in the colour of Iris Twilight, with a tiny pressed leaf inside. This is the licence object. It travels across scene 4 from one hand to the other along an SVG path drawn on scroll (path-draw-svg, 18% in corpus). - **The letter** — an illustrated unfolded sheet of paper that contains the body copy of scene 2. The fold lines are visible. The corner curls slightly on hover. **Leaf-organic motif (rare in corpus):** every section break is marked by a horizontal procession of pressed leaves — five leaves per break, each a different botanical (oak, birch, ash, hawthorn, foxglove leaf). Drawn as filled candy-coloured silhouettes with a single hairline vein. They drift across the screen at different speeds (parallax). This replaces every horizontal rule, every divider. There are no `
` elements; there are only leaves. **Blur-focus is structural, not decorative:** at any given moment, exactly ONE element on the page is in sharp focus. Everything else carries `filter: blur(2-12px)` graded by importance. As the user reads, focus follows the reading position via IntersectionObserver: the paragraph being read is sharp; the paragraphs above and below soften. This produces a literal cinematic shallow-depth-of-field effect on the entire layout. **No other design in the corpus uses blur-focus as a global reading-position-tracker.** **Grain:** a subtle 35mm grain overlay (`background-image` of a tiled noise PNG, ~6% opacity, `mix-blend-mode: multiply`) animates one frame at 24fps, which is the actual frame rate of cinema. The grain shimmer is barely perceptible but locks in the cinematic register. ## Prompts for Implementation **Build the site as a five-reel film, not a marketing page.** The user enters scene 1 and exits scene 5. There is no nav bar in the conventional sense — there is a tiny "Reel 1 / 5" indicator in the bottom-right of the persistent letterbox bar that fills as they scroll. Clicking the indicator scrubs through scenes like a film slider. This replaces all primary navigation. **Every scene is one viewport tall.** Use `position: sticky` for scene backgrounds so the illustrated set holds while the foreground copy scrolls past. The transition between scenes is a **focus pull** — implement with a 120vh scroll buffer in which the outgoing scene blurs from 0 to 24px while the incoming scene un-blurs from 24px to 0, and a 1.05x scale on the incoming scene that resolves to 1.0x. This is *the* signature transition. Do not use fade. **Kinetic typography is the body language.** Every title draws itself in via SVG stroke animation. Every key noun cycles its synonyms on a vertical reel. Every `i`-dot drops with bounce. The kinetic-animated treatment must feel like the type is *performing* the romance, not announcing it. Do not over-animate; one kinetic event per ~8 seconds of dwell time is the rule. **Cursor:** the cursor is replaced by a tiny illustrated **pressed leaf** (8x12px SVG) that rotates very slowly (full revolution = 32 seconds). On hoverable elements, the leaf opens into a flower bud. Do not use `cursor: pointer` defaults; the leaf does the work. **Copy is screenplay-formatted prose:** body copy is set as if it were narration in a film. Each paragraph begins with a slug-line marker in DM Mono caps (e.g., "STUDIO -- writing the offer"). Sentences are short. The voice is third-person, present-tense, observational: "She seals the envelope. The wax holds." This is radically different from the standard "we offer best-in-class licensing solutions" register. **Storytelling over CTA:** there is no "Get Started" button. There is no pricing block (explicitly avoided per house style). There is no testimonials grid. There is no stats counter. The fifth scene resolves with an illustrated envelope addressed in handwriting; clicking the wax seal opens a single-field contact form styled as a continuation of the letter. That is the only conversion event. **Animation budget:** prefer `transform` and `filter` only. Never animate `width`, `height`, `top`, `left`. Use `prefers-reduced-motion` to disable the focus-pulls, the foxglove sway, and the synonym-reel; static letterbox composition still reads. **Sound (optional, opt-in):** a small "play with sound" toggle at scene 1 enables a barely-audible loop — wind, distant birds, a single piano note per scene transition. The note is C4 in scene 1, E4 in 2, G4 in 3, B4 in 4, C5 in 5 — a slow ascending chord across the film. Default off. **Avoid:** card-grid layouts (the corpus is saturated), centred composition (43% in corpus — we are explicitly off-centre), corporate gradients (46% — we use radial sun-glow only), photography (we are illustration-only), and any "stat-grid" / pricing-table / feature-comparison block. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **First fully custom-illustrated design in the corpus.** custom-illustration registers at 0% across 200 designs. Every visual element on this site — foxglove, hare, wheelbarrow of cartridges, wax-seal token, letter — is hand-drawn SVG with a consistent illustrator's voice (Quentin Blake meets Eyvind Earle). No photography, no stock, no icons. This is an absolute first. 2. **First pastoral-romantic tone in the corpus.** pastoral-romantic registers at 0% across 200 designs. The 27%-dominant "mysterious-moody" register is explicitly rejected. The site reads as a chamber-piece pastoral film about courtship — applying romantic film grammar to a B2B legal subject (game licensing) in a way no other design attempts. 3. **Blur-focus as a reading-position tracker, not a decorative effect.** The 5%-frequency blur-focus pattern is elevated to load-bearing: an IntersectionObserver continually reassigns sharp focus to the paragraph the user is reading, blurring everything else. This produces real cinematic shallow depth of field at the layout level — a behaviour absent from the corpus. 4. **Persistent 1.85:1 letterbox masks.** No other design commits to a permanent cinematic aspect-ratio frame. The 8vh top and bottom cream bars are not removable; the entire site is filmed in widescreen. The "Reel 1 / 5" indicator, screenplay slug lines, and roman-numeral scene marks reinforce that this is a film, not a webpage. 5. **Candy-bright + leaf-organic + cinematic is a triple-rare combination.** candy-bright (2%) × leaf-organic (low single digits) × cinematic (5%) — the joint frequency of all three is effectively zero. Combined with kinetic-animated typography (5%) and asymmetric layout with ma-negative-space (~10%), this site occupies a coordinate in design space that the corpus has not visited. 6. **Illustrated leaf cursor and leaf section breaks replace standard UI primitives.** No `cursor: pointer`, no `
`, no chevron icons. Every divider is a procession of pressed leaves; every cursor is a slowly rotating illustrated leaf. This commits the leaf-organic motif at the level of interaction design, not just decoration. 7. **Rejection of every CTA-heavy convention.** No nav bar, no pricing, no stats, no feature grid, no testimonials carousel. The single conversion event (the wax-seal envelope at scene 5) is staged as the resolution of a short film, not a sales funnel. This is a deliberate inversion of the 42%-corporate aesthetic of the corpus. **Chosen seed:** aesthetic: cinematic, layout: asymmetric, typography: kinetic-animated, palette: candy-bright, patterns: blur-focus, imagery: custom-illustration, motifs: leaf-organic, tone: pastoral-romantic. **Avoided patterns from frequency analysis:** corporate aesthetic (42%), card-grid layout (45%), centred layout (43%), photography imagery (45%), gradient palette (46%), warm palette (46%), mono typography (44%), scroll-triggered as primary effect (43%), mysterious-moody tone (27%), and the 12% "editorial" / 11% "generative" defaults.