# Design Language for gamelicense.info ## Aesthetics and Tone `gamelicense.info` is a **pressed-flower game cabinet** — imagine a Victorian herbarium specimen book where someone has spilled UV-reactive ink across every page, and the botanical pressings now glow. The grain of aged cotton-rag paper underlays everything; the neon seeps through the grain rather than sitting on top of it. This is not clean neon. This is **neon through texture** — the kind of light that bleeds through a lampshade, diffused and intimate, not clinical or synthetic. The domain name carries a specific functional gravity — game licensing — but the design refuses to perform that utility with corporate polish. Instead, the site reads like **a field guide written by someone who actually plays games at midnight**, annotated in the margins, pressed with wildflowers and stamped with UV ink. The tone is raw-authentic: no aspirational language, no pitch cadence, no polished copy. The voice is the voice of a person who knows the regulations because they lived through the frustration of not knowing them, and who decided to write it down. Every section of the page is a pressed specimen in its own right: each parallax panel feels physically layered, like sheets of tracing paper stacked over botanical prints, with neon halos burning through from below. The grain is not decorative — it is structural. It asserts materiality against the immateriality of software licensing. Mood references: a game shop's back room at 11pm; a black-light poster pinned to cork board; a Risograph-printed zine on heavy newsprint; fluorescent flowers pressed under glass. ## Layout Motifs and Structure The layout is built entirely on **deep parallax-sections** — a vertical stack of full-viewport panels, each panel a distinct depth-layer environment. The registry shows centered (91%) and full-bleed (76%) as exhausted patterns. This design refuses both: instead, each section has its own internal gravity and asymmetric composition. **Section depth system (6 parallax layers per panel):** - Layer 0 (fixed): grain field — a full-screen SVG noise texture at `position: fixed`, opacity 0.18, `mix-blend-mode: multiply`, scrolls at 0% - Layer 1 (slow): botanical illustration layer — large-scale floral outlines at 150% viewport scale, scroll at 20% speed - Layer 2 (medium): neon-glow halos — radial gradients and bloom shapes centered on key content, scroll at 40% speed - Layer 3 (content): text and primary UI, scroll at 100% (natural) - Layer 4 (fast): small floating botanical fragments — seed pods, petal clips, scroll at 130% - Layer 5 (fastest): micro grain overlay, scroll at 160% **Panel architecture (5 core panels):** 1. **THE SPECIMEN HEADER** — full-height intro. Domain name typeset in large, baseline-ruled serif. A pressed flower arrangement fans out behind it, neon halos glowing through the petals. Scroll indicator: a hand-drawn downward botanical arrow. 2. **THE FIELD OF LICENSES** — the core information panel. Asymmetric two-column composition: 65% text left, 35% right devoted to a large botanical species illustration with neon genus labels. Grid: 12-column, content in cols 2–8, illustration in cols 9–12, with deliberate gutter bleed. 3. **THE PROCESS PANEL** — staggered vertical timeline rendered as a stem-and-blossom diagram: each step is a flower node on a botanical stem. Timeline flows diagonally bottom-left to upper-right. 4. **THE GLOSSARY SPECIMEN DRAWER** — a horizontal accordion of pull-out botanical drawers, each containing a licensing term with a pressed specimen illustration. 5. **THE FOOTER HERBARIUM** — a wide horizontal band, dark (#1a0f08), scattered with glowing pressed specimens, the domain repeated in small-caps, and a single hand-ruled baseline. ## Typography and Palette **Primary display — `Cormorant Garamond`** (Google Fonts, variable weight 300–700, italic optical size). Used for all H1 and section titles. Set at clamp(3.8rem, 7vw, 7.2rem), weight 400 italic. The italic axis is the key: titles tilt like handwritten labels on a specimen jar. On hover, weight animates from 400 to 600 across 200ms — the letters bloom slightly heavier, like ink absorbing into paper. **Secondary display — `Playfair Display`** (Google Fonts, weight 400/700, italic available). Used for pull-quotes, glossary terms, and the large botanical genus labels overlaid on neon illustrations. Set in uppercase-small-caps variant at 1.1–1.4rem for labels, 2.4rem for pull-quotes. **Body — `EB Garamond`** (Google Fonts, weight 400/500/600). The workhouse text font — an oldstyle Garamond with ink-trap details that respond beautifully to grain overlays. Body text at 1.125rem, line-height 1.78, tracking 0.01em. The long descenders of EB Garamond feel like botanical stems. **Mono / annotation — `Fira Code`** (Google Fonts, weight 400/500). Used only for license codes, regulation identifiers, and marginal annotations. Renders at 0.85rem, color #FF6B35 (neon amber), as if stamped with a UV-reactive rubber stamp. **Palette — warm-neon-through-grain:** - `#1a0f08` — deep smoked walnut (primary dark, panels, backgrounds) - `#f5ead8` — aged cotton-rag (primary light, body text on dark, paper tone) - `#e8c87a` — amber neon (warm gold-yellow glow, primary accent, halos) - `#ff6b35` — neon amber-orange (hot accent, regulation stamps, Fira Code) - `#c94070` — UV rose-pink (secondary neon, floral halos on dark panels) - `#3d2b1f` — dark tobacco (card backgrounds, mid-dark surfaces) - `#f0e0c4` — warm cream (section dividers, lighter panel backgrounds) - `#7a3b2e` — terracotta rust (botanical illustration stroke color) **Grain:** all panels receive a `background-image: url(grain.svg)` tile at 120px × 120px using an SVG `feTurbulence` filter (baseFrequency 0.65, numOctaves 4, stitchTiles "stitch") with `opacity: 0.14` and `mix-blend-mode: overlay`. This is the single most defining visual constant of the site. ## Imagery and Motifs **All imagery is neon-glow botanical illustration.** No photographs. No 3D renders. Every visual element is a botanical drawing — either as clean ink-line illustration with selective neon halos, or as full pressed-specimen silhouettes backlit by neon gradients. **Recurring botanical subjects (all illustrative, SVG-based):** - **Poppy** — the signature specimen. A large opium poppy with detailed vein structure, rendered in terracotta (`#7a3b2e`) at 1.5px stroke. Behind the poppy head: a radial neon bloom in `#c94070` at 40% opacity, blurred with `filter: blur(32px)`. The poppy appears in the header and the footer. - **Fern frond** — used as a section divider ornament. A single Dryopteris frond, fine cross-hatching on the pinnae, the entire frond backlit by an amber-yellow neon halo. - **Thistle** — used in the glossary drawer section. Spiny silhouette with a neon rose-pink glow emanating from the capitulum. - **Seed pods (mixed)** — small botanical fragments (honesty seed pods, nigella pods, dried papaver heads) scattered as floating layer-4 elements. Each 40–80px SVG, semi-transparent at 0.6 opacity, animated with gentle spring physics on scroll. **Neon-glow treatment rules:** - Every neon halo is a CSS `radial-gradient` or `box-shadow` — never a raster image - Halo colors: `#e8c87a` (amber), `#c94070` (rose), `#ff6b35` (orange) — always on dark panels only - Halo opacity: 0.3–0.5 for ambient bloom, 0.7–0.9 for focal point emphasis - Grain layer always sits on top of neon (the texture diffuses the light, making it feel physical) **Pattern decoration:** - Spring physics animations for floating elements (CSS `cubic-bezier(0.34, 1.56, 0.64, 1)` — an overshooting spring) - Scroll-triggered: botanical elements enter with spring overshoot, settle into final position - Halos pulse very slowly (8s sinusoidal opacity cycle, range 0.35–0.55) — like bioluminescence - No hover cards, no sliders, no carousels — all interaction is scroll-driven parallax ## Prompts for Implementation Build `gamelicense.info` as a **deep-parallax botanical compendium** — a specimen book that the visitor scrolls through like turning pages of an aged herbarium, with neon light bleeding through the grain of every page. **Structural implementation:** The HTML is a flat sequence of `
` elements, each with a `data-depth` attribute controlling parallax speed. The JavaScript is minimal — a single `requestAnimationFrame` loop that reads `window.scrollY` and applies `transform: translateY()` to each parallax layer. No scroll-jacking. Natural scroll speed preserved. ```
``` **The grain system:** Generate a single `grain.svg` using an SVG `` filter. Apply as `background-image` on `:root` with `position: fixed`. All panels are `background: transparent` — the grain shows through everything. Use `mix-blend-mode: multiply` on dark panels and `mix-blend-mode: overlay` on light panels. This ensures the grain reads differently in different color contexts. **Typography behavior:** - H1 (Cormorant Garamond italic): on page load, weight animates from 300 to 400 over 600ms — the letters gain their full body as the page loads, like ink spreading - Section headers (Playfair Display): text appears via `clip-path: inset(0 100% 0 0)` wiping left to right as the section enters viewport, triggered by IntersectionObserver - Body text (EB Garamond): no animation — static, readable, honest - Fira Code annotations: appear with a 120ms fade-in delay after parent section enters, as if ink is drying **Parallax depth values (scroll multipliers):** - `.layer-grain` — `translateY(0)` (fixed) - `.layer-botanical` — `translateY(scrollY * -0.2)` - `.layer-halos` — `translateY(scrollY * -0.4)` - `.layer-content` — `translateY(0)` (natural) - `.layer-fragments` — `translateY(scrollY * 0.3)` **Color application rules:** - Odd panels: dark (`#1a0f08` background, `#f5ead8` text, neon halos active) - Even panels: light (`#f0e0c4` background, `#1a0f08` text, no halos — botanical illustrations in flat terracotta ink) - This alternation creates a breathing rhythm: dark (glowing, mysterious) → light (clear, readable) → dark → light **No CTAs in the traditional sense.** The single "action" on the page — contacting for a license — is presented as a colophon at the bottom: a typeset block in Cormorant Garamond italic, set like a printer's colophon, with the contact method appearing in Fira Code below it. **Spring animations (CSS):** ```css .botanical-fragment { animation: float-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes float-in { from { opacity: 0; transform: translateY(20px) rotate(-8deg) scale(0.85); } to { opacity: 0.6; transform: translateY(0) rotate(var(--rot)) scale(1); } } ``` Each fragment has a `--rot` custom property set inline (values between -12deg and +15deg) for organic irregularity. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = grainy-textured, layout = parallax-sections, typography = serif-revival, palette = warm, patterns = spring, imagery = neon-glow, motifs = floral-botanical, tone = raw-authentic. **Differentiators from the registry of 131 designs:** 1. **Neon-through-grain as the primary visual language.** The registry shows neon-glow at low frequency in imagery, and grainy-textured at only 2% for aesthetic. No existing design combines both: neon halos diffused by a physical grain overlay. Every other neon design in the registry is clean-neon on dark; this design is neon seen through aged paper. The materiality is completely different. 2. **Botanical parallax as information architecture.** Parallax-sections appears in the registry but always as generic scroll-storytelling (kinematic photography, hero-to-content flows). This design makes the botanical illustrations the structural skeleton of the parallax system — each layer depth corresponds to a botanical layer (ground layer = grain, canopy = halos, mid-story = content, emergent = floating seeds). The parallax is not decorative; it enacts the physical world of a pressed herbarium. 3. **Spring physics as the sole animation vocabulary.** The registry uses spring at under 5% frequency, and when it appears, it is combined with other animation types. This design commits entirely to spring overshoot (`cubic-bezier(0.34, 1.56, 0.64, 1)`) for every animated element: the serif weight bloom on load, the botanical fragment entrances, the scroll-triggered text wipes all share the same elastic quality — like things settling into rest after being placed, not snapping into position. 4. **Serif-revival at functional scale for a licensed-domain type site.** The registry's serif-revival usage is at 4%, and appears exclusively on editorial/portfolio sites. Using Cormorant Garamond and Playfair Display for a regulatory-information domain (game licensing) is a deliberate inversion: the most formal, beautiful serif typography applied to a typically utilitarian subject. The friction between the exquisite letterforms and the administrative content is the site's editorial voice. 5. **No photographs, no icons, no stock.** The registry shows photography at high frequency (68%+). This design is entirely SVG botanical illustration — every image is hand-described in SVG paths or generated via feTurbulence. This means zero HTTP requests for images, perfect scalability, and a visual vocabulary that cannot be replicated by stock libraries.