# Design Language for gamelicen.se

## Aesthetics and Tone

The domain **gamelicen.se** is a Swedish word embedded in English — *game license*, parsed as Swedish imperative *gamelicens*, meaning simultaneously "the right to play" and something older, more peculiar: *gammal licens* — an old permit, a weathered document granting permission to exist in a world that has moved on. The site lives in that crack between languages. Its visitor is someone who owns a game, perhaps a physical cartridge or a cracked CD-ROM sleeve, and suspects the license to that thing has outlived its legal clarity.

The aesthetic is **Swiss functionalism filtered through a 1970s Nordic reference library** — the clean rational grid of Müller-Brockmann, but printed on paper that has aged unevenly. The tone is **nostalgic-retro without kitsch**: no pixel art, no VHS scanlines, no synthwave gradients. Instead, the nostalgia is bibliographic — the careful typesetting of a Scandinavian game-studies annual from 1979, where the paper has yellowed at the edges but the typography is immaculate. The visual mood is mid-afternoon light coming through frosted library glass, diffused through a tank of still water, where bubbles cling to the lower pane.

Colors carry the analogous palette: a band of desaturated blue-greens drawn from shallow coastal water seen through old glass — not tropical turquoise, not deep ocean navy, but the specific grey-teal of the Baltic Sea in October, with amber-ochre as the single warm accent pulled from aged document paper. The combination reads as *calm institutional authority*, the palette of a government archive that happens to be beautiful.

## Layout Motifs and Structure

The layout is **sidebar-dominant Swiss grid** — but the sidebar is not a navigation panel, it is a **marginalia column**, in the tradition of Swiss typographic design where running notes, reference codes, and sub-captions live in a narrow vertical band to the left of the main text. The main column is 65% of viewport width; the margin column is 20%; a gutter of 7% separates them; the final 8% bleeds to the right edge as breathing room.

**Macro composition:**
- The margin column is anchored: it does not scroll with the main content. It holds: a small wordmark (`gamelicen.se` set vertically, rotated 90° counterclockwise, reading bottom-to-top), a publication-style issue date, and sparse navigational anchors labeled with section numbers (§1, §2, §3) in the manner of a legal or academic document.
- The main column scrolls as a continuous document — not paginated sections, but one long typeset column where section breaks are signaled by a thin 1px horizontal rule and a section-number sidenote that echoes into the margin column.
- The overall impression is of a **broadsheet folded once**, where the left panel is the fold-over column and the right panel is the main article.

**Wave-form motifs as structural elements:**
- Section dividers are not horizontal rules but **SVG sine-wave rules**: a single-amplitude wave, 1px stroke in `#7BA3A8` (Baltic teal), running the full width of the content column. The wave amplitude is 3px, period is 120px — subtle enough to read as a decorative rule until examined closely.
- The page background carries a near-invisible **standing wave pattern**: two SVG wave paths offset by half a period, rendered at 4% opacity in `#B8C9CB`, tiled vertically. This reads as faint vertical ribbing, the texture of water just below stillness.
- Water bubbles appear as **margin punctuation**: SVG circles (radius 3–8px, stroke `#5C8A8F`, fill transparent) that cluster in the margin column near section transitions, as if condensation has formed on the inside of the library glass. They appear only at rest; they do not animate.

**Parallax** is used with restraint (the corpus overuses it at 90% — here it is a single, specific effect): the background standing-wave pattern scrolls at 0.15× the page scroll rate, creating the impression that the water-texture behind the document is moving independently, like looking through glass at a tank where the water slowly circulates. This is the one parallax effect in the entire page.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Body / Document Text:** [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville), weight 400 upright for body text, weight 400 italic for captions and sidenotes, weight 700 for subheadings. Baskerville is the defining typeface of institutional authority — the Bank of England, Oxford University Press, legal documents. Its contrast between thick strokes and hairline serifs mirrors the contrast between deep Baltic water and the thin meniscus at a bubble's edge. Set body text at 17px / 1.75 line-height, measure locked to 68 characters per line.

- **Margin Column / Section Numbers:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 400, size 11px, letter-spacing 0.12em. The marginalia — section codes like §1, issue dates like `1979-10-14`, and the vertically-set wordmark — are set in DM Mono for deliberate tension against Baskerville's warmth. Mono in the margin reads as the archivist's pencil, the cataloguing system that has indexed the document.

- **Display / Pull Quotes:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic, size clamp(2.4rem, 4.5vw, 5.2rem). Used exclusively for the hero statement and two pull-quote extracts. Cormorant Garamond's extreme stroke contrast — nearly hairline ascenders — becomes translucent at large sizes, creating the effect of type seen through water.

**Palette — analogous Baltic water series (hex values):**
- `#2E4A52` — Deep Baltic (primary text, wordmark, sidebar background)
- `#4E7A82` — Shallow Coast (mid-tone, section rules, interactive states)
- `#7BA3A8` — Frosted Glass (supporting UI, wave-form SVG strokes, hover states)
- `#B8C9CB` — Still Surface (background tint, card fills, near-invisible texture)
- `#F2F0E8` — Aged Linen (page background, document ground — not pure white, slightly warm)
- `#C8A96E` — Amber Index (accent — used only for the §-numerals in margin column and the single hover-underline color on body links; maximum 5% of total color area)

The palette is deliberately **low-saturation analogous** — blue-green running from deep to pale, with one warm accent. It avoids the trap of making an ocean palette that looks like a spa brand. The ochre accent reads as aged paper, not sunlight.

## Imagery and Motifs

**All decorative imagery is SVG, drawn inline.** No photography. No stock images. No raster assets.

**Water bubble system (the primary imagery motif):**
- Bubbles are rendered as SVG `<circle>` elements with `fill: none`, `stroke: #5C8A8F`, stroke-width 0.8–1.2px (thinner = smaller bubble, per optical physics). Each bubble has a small highlight arc: a 15° `<path>` at the upper-left of the circle, `stroke: #B8C9CB`, opacity 0.6, suggesting refraction. Bubbles appear in three locations: (1) clustered in the margin column at section breaks, 3–7 bubbles of varying radius (4–14px); (2) as a hero accent — 12–18 bubbles scattered across the upper-right quadrant of the hero section at sizes 6–32px; (3) as a footer ornament — a single horizontal register of 7 evenly-spaced bubbles, sizes ascending then descending, like a spectrum.
- No bubble animation. Bubbles are static, like caught condensation. Motion is reserved for the parallax water-texture only.

**Wave-form motifs (structural and decorative):**
- Three SVG wave paths are used across the page, each with different amplitude/period:
  1. **Section rule wave** — amplitude 3px, period 120px, 1px stroke `#7BA3A8`. Appears at every section break.
  2. **Hero underwave** — amplitude 18px, period 240px, 2px stroke `#4E7A82`, opacity 0.35. Appears beneath the hero Cormorant display text as a single large wave, suggesting the text is resting on water.
  3. **Footer wave** — amplitude 8px, period 80px, 1.5px stroke `#2E4A52`. Separates footer from body, running edge to edge.

**Margin wordmark:**
- `gamelicen.se` set in DM Mono 11px, letter-spacing 0.2em, rotated 90° counterclockwise, positioned at top-left of sidebar, pinned. The `.se` country code is set in `#C8A96E` (Amber Index) while `gamelicen` is in `#7BA3A8` — a subtle indication that the domain itself is a bilingual artifact.

**The document artifact:**
- The hero section contains a single centered decorative element: a faux-archival **license seal** drawn in SVG — a double-ring circle (outer 80px, inner 64px, 1.5px stroke `#4E7A82`) containing the text `LICENS · GAMELICEN.SE · MCMLXXIX` arranged in a circular path using SVG `textPath`, set in DM Mono 9px, letter-spacing 0.3em. The Roman numeral date (1979) is invented but specific — a fictional founding year that anchors the nostalgic-retro register without claiming historical truth. The seal's interior is blank except for a small water-bubble cluster (3 bubbles, radii 6/9/12px).

## Prompts for Implementation

**The story to tell.** A visitor arrives at a site that looks like a document — specifically, a monograph from a Scandinavian game studies institute, published in 1979, recently digitized and hosted verbatim. The typography is immaculate. The layout is calm. The paper has aged slightly. Somewhere in the lower left margin, condensation has formed on the inside of the library glass — small bubbles, clinging to the surface, refracting the fluorescent light. The water behind the glass moves slowly, almost imperceptibly. The visitor reads.

The page does not make promises. It does not ask for email addresses. It is a document that exists to be read. Its license — for what, exactly, is deliberately ambiguous — is displayed in a circular seal at the top, like a passport stamp, like a notary's mark, like proof that someone, once, authorized this to exist.

**Implementation directives:**
- The sidebar is `position: sticky`, `top: 0`, `height: 100vh`. It does not scroll.
- The main column is `overflow-y: auto` within a flex layout. The sidebar flexes at 20% + 7% gutter; main column at 65% + 8% trailing space.
- Implement the parallax water-texture using a CSS `background-attachment: fixed` on a SVG data-URI pattern (two sine waves offset by half period, 4% opacity). This is the only parallax effect. Do not add scroll-triggered animations, fade-reveals, or intersection-observer entry effects.
- All body text is Libre Baskerville 17px. Do not deviate from this for any body copy.
- The §-numerals in the margin column update as the user scrolls: the active section's §-numeral is highlighted in `#C8A96E`. Use a simple IntersectionObserver with `rootMargin: "-40% 0px -40% 0px"` to detect the active section.
- No JavaScript frameworks. Vanilla JS only, under 80 lines.
- The site is one long page with 5 sections: §1 About the License, §2 What Is Covered, §3 Historical Context, §4 Current Status, §5 Contact.
- Maximum content width: 960px centered in viewport. Below 768px, the sidebar collapses into a top bar with the wordmark horizontal and the §-numerals as a horizontal tab row.

**AVOID (per corpus frequency analysis):**
- Any animation beyond the single parallax water-texture background.
- Scroll-triggered fade-in effects (card-flip 6%, fade-reveal 5% — both overused).
- Photography, stock images, or raster assets.
- CTAs, pricing tables, feature grids, testimonial sections.
- Neon colors, gradients, glassmorphism, or frosted-glass blur effects.
- More than one typeface family per role (display / body / mono — three families total, none others).

## Uniqueness Notes

**Differentiators from every other design in the registry:**

1. **Analogous palette at 0% usage — Baltic water series with amber accent.** The frequency report shows `analogous` at 0% across all analyzed designs. The specific palette chosen — desaturated blue-green from `#2E4A52` to `#B8C9CB` — avoids both the common ocean-deep palette (2%) and the ethereal-blue palette (2%) by anchoring the tonal range in Baltic grey-green rather than Caribbean or atmospheric blue. The `#C8A96E` amber accent is unusual in a cool palette: it reads as aged document paper rather than warmth, because it is used only in typographic contexts (§-numerals, partial wordmark), never as a background fill.

2. **Swiss layout with bibliographic sidebar marginalia — no other registry entry uses this sidebar interpretation.** The corpus uses `sidebar` at 29%, but uniformly as navigation or content panels. Here the sidebar is a **marginalia column** in the Swiss editorial tradition: it holds running reference codes, section numbers, and the vertically-rotated wordmark. The main column is a continuous typographic document. This composition has no precedent in the registry.

3. **Parallax used for a single, precise, water-physics effect rather than section storytelling.** The corpus uses `parallax` at 90%, almost always as scroll-triggered section reveals or layered hero compositions. Here parallax is applied to a single SVG water-texture background at 0.15× scroll speed — the visual equivalent of looking through glass at water that moves independently of the document in front of it. The restraint (one effect, sub-perceptual scroll rate, purely textural) is opposite to the registry's dominant parallax convention.

4. **Water bubbles as static condensation ornaments rather than animated elements.** The `water-bubbles` imagery at 4% in the corpus typically appears as animated floating or rising bubbles. Here they are static — condensation clinging to glass — which is both more physically accurate and more consonant with the nostalgic-retro tone. A 1979-digitized document does not animate its margin ornaments.

5. **Fictional founding year in Latin as a narrative anchor.** The license seal's `MCMLXXIX` (1979) is invented, but specific and serious. No other registry entry uses Roman numerals or a fictional founding date as a design element. It gives the nostalgic-retro tone a specific temporal anchor without relying on pixel art, VHS glitch, or synthwave palette conventions — the three most common nostalgic-retro implementations in the corpus.

**Chosen seed:** aesthetic: swiss, layout: sidebar, typography: baskerville-refined, palette: analogous, patterns: parallax, imagery: water-bubbles, motifs: wave-forms, tone: nostalgic-retro
<!-- DESIGN STAMP
  timestamp: 2026-05-07T20:32:42
  domain: gamelicen.se
  seed: aesthetic: swiss, layout: sidebar, typography: baskerville-refined, palette: analogous, patterns: parallax, imagery: water-bubbles, motifs: wave-forms, tone: nostalgic-retro
  content_hash: 7abe32b544d3
-->