# Design Language for gamelicen.se ## Aesthetics and Tone gamelicen.se is conceived as a **quiet observation room** — the aesthetic of a museum reading desk where, instead of a folio of medieval charters, the visitor finds an ongoing, softly luminous record of which games are licensed, where, by whom, for how long. The .se ccTLD is treated literally: this is a Swedish-style civic registry interface, not a sales floor. The mood is **library-hush**, not boardroom; **almanac**, not dashboard; **almanack**, not analytics product. Three feelings the visitor should carry away: 1. **Composure.** Nothing on the page is shouting. The act of reading the registry is itself the experience. There is no "Get Started," no "Book a Demo," no "Trusted by 500+ studios." The user arrives, sits down, and reads. 2. **Trust through restraint.** A licensing registry that splatters confetti and gradient glows is not a registry — it's a marketing brochure. The visual rhetoric of gamelicen.se borrows from public-sector Swedish design (Statistics Sweden, Riksantikvarieämbetet, the SCB year-books) and from English-language scholarly publishing (the typographic conventions of *The London Review of Books*, the engraving-plate registers of Encyclopaedia Britannica). 3. **Intelligent emptiness.** Negative space is not "white space to be filled later" — it is *load-bearing*. Margins are wider than feels comfortable. A 1280px-wide screen will use roughly 720px for content and the rest for breathing. This is the visual analogue of a librarian who speaks slowly because what she's about to say is precise. The tone is **minimal** in the strictest sense: the site removes everything that does not directly serve the registry's reading. It is the *opposite* of a hand-drawn doodle blog or a cyberpunk dashboard. If the visitor remembers a single visual gesture, it should be a small, hand-drawn-feeling pastel sparkline floating in a wide white margin next to a serif paragraph of clause text — that single combination is the entire aesthetic in a nutshell. ## Layout Motifs and Structure The structural decision is a **fixed, persistent left sidebar** functioning as a true index — not a hamburger-collapsed mobile-first compromise, but a stationary 280px reading-room finding aid that stays in place from arrival to departure. The remaining content area is a generously margined single column of long-form prose interleaved with small data-visualization figures. **The sidebar (280px, fixed at left, full height):** - **Top block (top 96px):** A small wordmark — `gamelicen.se` set in Cormorant Garamond italic at 22px, color #3f3a55, with a 4px sage-green accent square (#c8d6c1) sitting one baseline below as the only color punctuation. - **Section A — *Indices* (next 280px):** Numbered list (I, II, III, IV, V, VI…) of the page's sections, set in Cormorant SC at 13px, leading 26px. Each entry is left-aligned to a hairline 0.5px rule (#d8d4cd). Hovering an index entry causes a 1px pastel-rose underline to draw left-to-right beneath the entry over 240ms, and the entry text *itself* lifts vertically by 2px (the **hover-lift** signature). - **Section B — *Filters* (next ~360px):** A vertical stack of small filter chips: *Region*, *Platform Era*, *Rights Class*, *Term Length*, *Currency*. Each chip is a low, wide pastel pill (background #f3eee5, text #3f3a55, 11px Cormorant SC tracked at 0.08em). Selected chips don't change color stridently — they receive a 1px sage outline and lift 3px on activation, casting a soft 0/4/12px shadow at 8% opacity. - **Section C — *Footnotes / colophon* (anchored to bottom):** Three lines of micro-typography in 10px italic giving the registry's pseudo-fictional provenance ("Compiled, Visby — Stockholm — Malmö"), the current dataset commit hash (a non-functional but typographically real `sha 7c4f…2a91`), and the year span `MMXXVI · Issue III`. The sidebar never animates in or out. It is *furniture*. It establishes that this site is a *place*, not a funnel. **The main reading column (right of sidebar, max-width 720px, centered within the remaining viewport):** The reading column is a vertical sequence of registry **entries**. Each entry occupies what feels like a journal article spread: - **Entry header (Roman numeral + title):** The Roman numeral sits in the *left margin* of the reading column (negative offset of -120px), set in Cormorant Garamond at 96px, color #e8dcc8 (an ink-faded butter), almost a watermark. The title sits flush with the column at 28px Cormorant Garamond Regular. - **Subhead band:** A thin (1px) horizontal hairline divides title from body, in #c8c1b3. - **Body prose:** Crimson Pro 17px, leading 1.75, color #3a3645. Drop cap on the first paragraph (4-line drop, in Cormorant Garamond at 64px, color #b8a892). - **Pull quote / clause excerpt:** Set as a *separate* indented block, italic Cormorant Upright Italic at 19px, with a 2px sage rule on the left, deliberately echoing how Swedish legal codes annotate provisions. - **Inline data figure (the "abstract-tech" motif manifest):** Small SVG figures hand-placed in the wide right margin (margin-right is roughly 280px on wide screens), aligned to the paragraph that references them. These figures are line-art sparklines, sankey ribbons, simple arc charts, and tiny chord diagrams — all in pastel sage / rose / butter, all at most 200px square. - **Footnotes:** Numbered in superscript Cormorant 10px, expanded as marginalia in the *opposite* margin (left, between body and sidebar) when space allows; otherwise stacked at entry's foot in Crimson Pro 13px italic. **Composition rules (strict):** 1. The reading column is **never** more than 65 characters wide at body size. Long lines are anti-civic. 2. Vertical rhythm follows a **24px baseline grid**. Every element snaps. The sidebar, the body, the figures: all on the same grid. A reader scrolling past sees a quiet metronome. 3. There is **no hero**. No 100vh splash. The first viewport opens directly onto Entry I, with the registry's masthead occupying only the top 80px and the sidebar already established. The page begins with reading. 4. There are **no full-bleed images**. Imagery is small, marginal, integrated. 5. There is **no sticky CTA bar**, no chat bubble, no newsletter modal, no cookie banner styled as a brand moment. The interface stays out of the way. ## Typography and Palette **Typography (serif-classic family, all Google Fonts):** - **Display & headlines: "Cormorant Garamond"** (Google Fonts), weights 300/400/500, italic and roman. Cormorant is a 21st-century revival of the Garamond style with characteristically *elongated* ascenders, *tight* counters, and an old-style figure set. Used for entry titles (28px), Roman numerals (96px display, 80% opacity), drop caps (64px), the wordmark (22px italic), and any decorative typographic flourish. `font-feature-settings: "onum", "dlig", "smcp", "liga"` enabled site-wide where supported. - **Sub-display / micro-typography: "Cormorant SC"** (Google Fonts) — the small-caps companion. Used for sidebar index labels (13px, tracked +0.04em), section markers, and the "Issue III" colophon. - **Body long-form: "Crimson Pro"** (Google Fonts), weights 400/600, regular and italic. Crimson Pro is a contemporary book serif modeled on Garamond/Caslon traditions, with high readability at 16–18px and excellent old-style figures. Used for all paragraph prose (17px / 29px line-height), footnotes (13px italic), pull quotes (19px italic). - **Numerals & data labels: "EB Garamond"** (Google Fonts), tabular-figure variant (`font-variant-numeric: tabular-nums`) — used exclusively inside SVG data figures and tabular registry entries (term lengths, royalty percentages, year ranges). Tabular old-style figures so columns of numbers line up visually like a printed almanac. - **Absolutely no sans-serif anywhere.** No Inter. No Helvetica. No system-ui. The discipline of an all-serif site is part of the work. **Hierarchy:** - Wordmark: 22px Cormorant Garamond Italic, color #3f3a55 - Entry Roman numeral: 96px Cormorant Garamond Regular, color #e8dcc8 (~80% opacity) - Entry title: 28px Cormorant Garamond Regular, color #3a3645 - Section subhead: 18px Cormorant SC, tracked +0.06em, color #6b6377 - Body: 17px Crimson Pro Regular, color #3a3645, leading 1.75 - Pull quote: 19px Cormorant Upright Italic, color #5a5468 - Footnote: 13px Crimson Pro Italic, color #6b6377 - Sidebar index: 13px Cormorant SC, tracked +0.04em, color #4a4458 - Data label: 11px EB Garamond tabular, color #6b6377 **Palette (pastel, library-paper):** The palette is **eight muted hues, all desaturated, all tested against a paper-cream ground**. No pure white, no pure black. The dominant emotional register is *aged paper at noon, by a north-facing window*. - `#f7f3ec` — **Paper Cream** (background) — the entire body. Slightly warm, slightly off-white, the color of a Folio Society endpaper. - `#3a3645` — **Charcoal Plum** (primary text) — never #000. A muted indigo-charcoal that reads serious without being harsh. - `#c8d6c1` — **Sage Lichen** (primary accent) — pastel sage-green, used for the wordmark accent square, selected-state outlines, and one of the three data-viz pastels. - `#e8c8c8` — **Dusty Rose** (secondary accent) — pastel rose, used for hover-lift underlines, second data-viz pastel, and pull-quote ornament marks. - `#f0e2b8` — **Butter Vellum** (tertiary accent / drop caps) — third data-viz pastel, drop-cap fill, Roman numeral ghost color (lightened to #e8dcc8). - `#d8d4cd` — **Bone Rule** — hairlines, dividers, table borders. Always 0.5px or 1px, never thicker. - `#6b6377` — **Stone Lavender** — secondary text, captions, footnotes, sidebar subordinate text. - `#3f3a55` — **Iris Ink** — wordmark, sidebar index labels in default state, decorative drop-cap tracery. The pastels are deployed **sparingly** — never as fills covering >5% of the viewport. The page is overwhelmingly cream and charcoal-plum, with pastels appearing as small data-viz strokes, selection outlines, and tiny ornamental marks. This is what distinguishes a pastel *registry* from a pastel *cupcake site*. ## Imagery and Motifs **Primary imagery: data-viz as marginalia.** The site has no photographs. None. Not a single hero image, no studio mockups, no royalty-free stock. Imagery is entirely **small data-viz figures**, drawn in line-art with pastel fills, treated as *engraved plates* in an old almanac. The seven recurring figure types: 1. **Sparklines.** 24-month royalty curves, 5-year platform-license counts, 10-year publisher-territory drift. Always drawn as a single 1px sage line, with the most recent point dotted, with a faint butter-vellum fill underneath at 30% opacity. Width: 160px. Height: 40px. Always sit in the right margin opposite a paragraph that references them. 2. **Sankey ribbons (miniature).** Two-column ribbon diagrams showing rights-flow: *publisher → territory → platform*. Drawn at 200×120px, ribbons in dusty rose / sage / butter, never more than four ribbons per figure. Labels in 10px EB Garamond. 3. **Arc charts.** Quarter-circle gauges showing license-term completion (0–100%). Stroke 6px, in sage. Used near specific clause excerpts. 4. **Chord diagrams (tiny).** 180×180 chord plots showing reciprocal-licensing relationships between five hypothetical publishers. Pastel chords, single-line node arcs. 5. **Strip plots / dot arrays.** Each dot a single license; columns are years. 200×80px. Reads like a star chart. 6. **Hand-set typographic ornaments.** Ampersands, pilcrows, manicules (☞), section marks (§), interrobangs, and the long-s (ſ) used in 18th-century settings. Always set in Cormorant, color Iris Ink. These appear in chapter dividers and at the close of every entry as a small centered ornament: `❦` (floral heart) at 24px, color sage. 7. **Hairline borders, never frames.** Tables of license metadata are bordered only by top and bottom rules in Bone Rule, with no vertical lines — the *Tufte* convention. **Motif: abstract-tech, treated as engraved diagram.** The registry's "tech" element — the fact that these are *games* being licensed, that contracts move through digital rails — is rendered as **abstract diagrammatic plates**, not glowing UI panels. Specific motif vocabulary: - **Circuitry-as-rivers.** A site-wide repeating background motif (only at <2% opacity, as a delicate sage tracery in Entry IV's margin) of a circuit-board layout reinterpreted as a Stockholm-archipelago map. Traces become rivers. Pads become islands. The metaphor is that contracts are routed like signals; signals are routed like ships. - **Iso-grid micro-pattern.** A 2px-on-2px-off dotted iso-grid (in Bone Rule, 8% opacity) sits behind the data-viz figures *only*, framing them as engraved plates rather than letting them float. - **The `§` glyph as wayfinding.** Section markers in body prose use the section sign ornamentally, color sage, font-size 1.1em. - **Bracket annotations.** Inline editorial brackets around dataset uncertainties: `[provenance: SCB game-licensing-extract-2026]`, set in 13px Cormorant Italic, color Stone Lavender. **Hover-lift signature interaction:** The defining micro-interaction of the site is **hover-lift** — when the cursor enters any interactive element, the element rises 2–4px on a 240ms cubic-bezier(0.2, 0.8, 0.2, 1), accompanied by a soft shadow (0/4/12px, 8% opacity) and, for index/filter chips, a sage hairline outline that fades in at 200ms. The lift is **always upward, always small, always quick**. There is no scaling, no glow, no color shift. It is the gesture of a librarian carefully picking a card out of a card catalog. Lift is reserved for things you can interact with — the entire body of prose and all imagery is **inert**, never lifts on hover, never lights up. This contrast (live elements lift, dead matter stays still) is the *only* form of UI feedback the site uses. ## Prompts for Implementation **Narrative posture:** The site is a single, scrollable issue of a fictional almanac titled **The Stockholm Game Licensing Register, Issue III, MMXXVI**. It contains six entries, no calls to action, no conversion funnels, no email capture. The reader arrives, opens the issue, reads from Entry I to Entry VI, closes the tab. That is the entire intended experience. Implement to that end. 1. **Masthead band (top 80px):** - Cream background, no border below. - Left: wordmark `gamelicen.se` in Cormorant Garamond Italic 22px, with 4px sage square accent. - Right: small italic line `Issue III · Spring MMXXVI` in 13px Cormorant Italic, color Stone Lavender. - The masthead does *not* stick to the top on scroll. It scrolls away. The sidebar carries wayfinding from there on. 2. **Sidebar (280px fixed, full viewport height) — see Layout section.** - On viewports below 960px, the sidebar collapses to a single 13px Cormorant SC anchor row at the page top, listing index entries inline separated by middle-dots (·). No hamburger. No off-canvas drawer. 3. **Entry I — *On the Concept of a License* (introductory essay):** - Roman numeral I, 96px butter-ghosted, in left margin. - Drop cap "L" in Cormorant Garamond 64px, butter-vellum fill. - Body is six paragraphs of measured prose (17px Crimson Pro, 65 characters per line) defining what a game license actually is, in the registry's voice — neutral, almost academic, never marketing. Tone: a Wikipedia article written by a careful Swedish archivist. - In the right margin opposite paragraph 3, a sparkline figure shows "annual game-license filings, 1972–2026" as a single sage line. - At entry's close, centered floral heart ornament `❦` in sage, with a 1px Bone Rule hairline above. 4. **Entry II — *The Atlas of Territories* (data-viz showcase):** - The entry's body is shorter (three paragraphs of prose). - The right margin holds a stack of three figures: a sankey of *publisher → region → platform* flow; a chord diagram of reciprocal cross-licensing; and a strip-plot of *licenses-by-year*. Each figure is captioned in 10px EB Garamond. - The iso-grid micro-pattern sits behind each figure at 8% opacity. 5. **Entry III — *Excerpts from the Standard Form* (clause-excerpt theatre):** - Body prose is interrupted three times by **pull-quoted clause excerpts** — italic Cormorant Upright Italic 19px, indented, with a 2px sage rule on the left. - Above each excerpt, a small bracket `[ Clause 4.3, Standard Form ]` in Cormorant Italic 11px Stone Lavender. - The clause excerpts are the *only* place language gets dense; everything around them is the registry voice explaining context. 6. **Entry IV — *On Distance and Term* (the long entry):** - The single longest entry, occupying roughly 30% of the page's vertical extent. - Behind this entry's column, the **circuitry-as-rivers** background tracery sits at 2% opacity in sage. It is barely visible — readers will only notice it on second visit. - Marginalia footnotes appear in the *left* margin (between body and sidebar) as numbered superscript anchors. 7. **Entry V — *Dramatis Personae of the Register* (a small directory):** - A typographic table: five rows, each a fictional firm (e.g., *Skandia Spelförlag AB*, *Östersjö Rights Bureau*, *Visby Almanack Publications*). - Columns: name, founded, jurisdiction, primary class. - Top and bottom hairlines only; no vertical rules (Tufte). - Each row hover-lifts 2px with sage hairline. 8. **Entry VI — *Colophon* (the close):** - Single short paragraph in 13px Crimson Pro Italic explaining the typeface choices, the dataset's provenance, and the registry's release cadence. - Below: the `❦` ornament, then a final centered hairline rule, then 64px of empty cream space, then the bottom of the document. **Animation discipline:** - **No scroll-triggered animations.** Nothing fades in. Nothing slides. Content is *already there* when the reader arrives at it. The page is a printed object. - **No parallax.** None. - **The only motion on the page is hover-lift** — the 2–4px lift of interactive elements over 240ms. Plus a single **gentle sparkline draw** (path-length stroke-dashoffset animation, 1.2s, ease-out) that occurs *only the first time* a sparkline enters the viewport, mimicking the gesture of a hand drawing the line freshly. After it draws once, it stays drawn permanently. - **Cursor:** default OS cursor everywhere except over interactive elements, where it becomes pointer. No custom cursor. No trailing dots. **JavaScript discipline:** - Vanilla, minimal. The only JS responsibilities are: (a) IntersectionObserver to trigger first-time sparkline draw, (b) hover state class toggling for older browsers, (c) progressive enhancement of the sidebar's filter chips. - No frameworks. No bundler magic. The HTML is hand-set, like the typography it carries. **Storytelling principle (overriding):** The reader should leave with the impression that they have read a *real publication* — not a website. Every design decision serves that impression: the issue numbering, the colophon, the marginalia, the tabular figures, the ornament at each entry's close. The site is staged as if it has been published this way, in this format, every spring, for forty years, by a small group of registrars in Visby. The fact that the URL ends in `.se` and the visual tradition is Swedish-civic-publishing is not coincidence; it is the entire conceit. **Avoidances (explicit):** - No CTAs. No "Get a Demo." No "Subscribe." No "Talk to Sales." This is a registry, not a SaaS. - No pricing block. No tiered plans. No "Free / Pro / Enterprise." - No stat-grid hero ("10,000+ licenses tracked"). - No customer logo wall. - No video. No autoplay anything. - No newsletter modal, no chat bubble, no cookie-consent designed-as-brand-moment. - No gradients of any kind. The pastels are flat fills. - No drop shadows except the 8%-opacity hover-lift shadow. - No rounded corners above 2px, anywhere. Tables, chips, and figures all sit on rectangular ground. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **Almanac-as-architecture, not almanac-as-decoration.** Many "editorial" sites in the corpus borrow magazine *aesthetics* — large display headlines, photo-led spreads — without committing to publication *structure*. gamelicen.se commits all the way: numbered Roman entries, an issue number, a colophon, a masthead, marginalia footnotes, hand-set ornaments at entry closes, and a pseudo-fictional editorial provenance ("Compiled, Visby — Stockholm — Malmö"). The site is not styled like an almanac; it is *bound* like one. 2. **Pastel-registry, not pastel-cupcake.** Pastel palettes (3% in the corpus) are usually deployed in soft-cute / cottagecore / wellness contexts — full-screen pink washes, illustrated mascots, rounded everything. gamelicen.se inverts the pastel convention: pastels appear *only* as small data-viz strokes and selection outlines on a paper-cream and charcoal-plum ground, where they read as *almanac plates* — engraved illustrations in a public-records yearbook. Same hex range, completely opposite cultural register. 3. **Sidebar as furniture, not navigation.** Most sidebars in the corpus (8% layout share) are app-shells: collapsing, toggleable, mobile-drawer-becoming-rail. The gamelicen.se sidebar is *stationary* — it never collapses on desktop, never animates, never overlays content. It is the room's bookshelf. It establishes the site as a *place* rather than a *path*. 4. **Hover-lift as the sole interaction vocabulary.** Hover-lift appears in only 1% of the corpus, almost always alongside scale/glow/color-shift effects. gamelicen.se makes hover-lift the *only* form of feedback — no scale, no glow, no color shift, no scroll-triggered fades, no parallax. The visual quietness of the page is enforced by the discipline of refusing every other animation primitive. 5. **All-serif, no sans, no mono.** Mono typography dominates the corpus (47%); humanist sans is next (20%); serif-classic is at 12% but almost always paired with a sans for "data" or "UI" text. gamelicen.se uses *only* serifs — Cormorant Garamond, Cormorant SC, Crimson Pro, EB Garamond — including for sidebar labels, data-viz captions, and tabular numerals. The all-serif discipline is itself the visual signature. 6. **Data-viz as marginalia, not as dashboard.** Data-viz imagery (5%) is overwhelmingly dashboard-coded in the corpus — large charts, dark backgrounds, neon strokes, "real-time" feel. gamelicen.se renders data-viz as *engraved plates* — small (≤200px), pastel, sitting in wide white margins next to specific paragraphs they illustrate. The figures serve the prose, not the other way around. 7. **No hero, no CTA, no funnel.** The page begins with reading. There is no above-the-fold splash, no value-proposition headline, no signup. This is structurally rare in the corpus and is intentional: the site is a *publication*, not a *product page*. **Chosen seed (from assignment):** `aesthetic: minimalist, layout: sidebar, typography: serif-classic, palette: pastel, patterns: hover-lift, imagery: data-viz, motifs: abstract-tech, tone: minimal` **Avoided patterns from frequency analysis:** - Avoided **corporate** aesthetic (45% of corpus) — the registry is civic-scholarly, not corporate. - Avoided **gradient** palette (49%) — all fills are flat pastels. - Avoided **warm** palette (49%) — the cream-and-plum reads cool-neutral; the only warm note is the butter-vellum drop cap. - Avoided **scroll-triggered** patterns (46%) and **parallax** (35%) — the page is print-static; only hover-lift moves. - Avoided **mono** typography (47%) — entirely serif. - Avoided **photography** imagery (48%) — entirely small data-viz line-art. - Avoided **card-grid** layout (48%) and **centered** layout (45%) — the sidebar+single-column reading layout is structurally distinct. - Avoided **mysterious-moody** tone (30%) — the tone is composed and literate, not haunted. - Embraced underused: **minimalist** (1%), **hover-lift** (1%), **pastel** (3%), **data-viz** (5%), **sidebar** (8%), **serif-classic** (12%), and the **minimal** tone register.