# Design Language for licence.broker ## Aesthetics and Tone licence.broker is built as **a friendly back-office that never got around to redesigning itself** — and the people who work there are absolutely fine with that. The premise: there is a small, beloved licensing office wedged between a stationery shop and a dry cleaner, where a "licence broker" sits behind a counter with a desk lamp, a candle for the power cuts, a jam jar of paperclips, and a humming aquarium in the corner. They will help you move a software licence, a fishing permit, a market-stall licence, a radio frequency allocation — anything that needs *transferring from one name to another* — and they will do it cheerfully, in a slightly cluttered office, with a kettle on. The site is the digital storefront of that office, and it embraces **anti-design**: deliberately mismatched widths, a heading that is too big, a footer note in the wrong font, a sidebar that looks like a sticky-note column, hairline borders that don't quite align, a colour scheme that looks like it was assembled from 1970s manila folders and a tin of travel sweets. None of this is sloppiness — it is *engineered cosiness*. The anti-design move here is **competence wearing comfortable clothes**: the information is impeccable, the layout is endearingly informal. The tone is **friendly** in the specific register of a person who genuinely likes their job and likes you for showing up. Copy reads like the broker talking — "Right, let's sort this out", "Pop your old licence number in here", "Kettle's on, this'll take two minutes". The `.broker` TLD is not Wall Street; it is **the village fixer**, the one who knows which form, which window, which fee. Inspiration: a 1978 Post Office counter, a working aquarium shop, the back room of a model-railway club, the smell of a manila envelope, a tea-stained ring on a desk blotter, the warm orange glow of a single anglepoise lamp at dusk. Nothing is glossy. Everything is *lived-in and kind*. ## Layout Motifs and Structure The spine of the site is a **persistent left sidebar** — a deliberate counter-move, since the frequency analysis shows sidebar layout at only 22% while full-bleed, card-grid, and centered layouts dominate the corpus. The sidebar is treated as **the office noticeboard**: a ~280px column (fixed on desktop, collapsing to a top accordion strip on mobile) that runs the full height of the viewport, with a faint pinned-paper texture, a hairline 1px right border in `#9C8A6E`, and a tiny brass thumbtack glyph at the top of each section link. It holds: the office name set too large for its box (intentionally cramped, slightly clipped at the descenders), a hand-typed list of "What we move" (licences, permits, allocations, registrations, transfers), opening hours that include "or whenever the candle's lit", and a single low-burning candle illustration anchored at the bottom that flickers gently and is the only animated thing in the sidebar. The main content area to the right is **not on a grid** — and that is the point. Sections stack vertically with varying widths: one paragraph block is 540px, the next is 680px, a "how a transfer works" sequence is full-width, a quote from a happy market-stall holder is indented like a margin note, the FAQ entries are different heights on purpose. Section dividers are **torn-paper edges** rendered in SVG (a jagged horizontal path), not clean rules. Headings sit slightly left of their paragraphs. There is a "scrap of paper" motif: occasional content blocks are rotated 0.4°–1.2° and given a faint drop shadow, as if taped to the page. The overall composition reads top-to-bottom as **a walk through the office** — counter, noticeboard, the desk where transfers happen, the kettle corner, the aquarium, the door — never as a marketing funnel. No hero banner. No pricing tiers. No stat grid. No testimonial carousel — just one or two quotes pinned crookedly. ## Typography and Palette **Typefaces (Google Fonts only — verified available):** - **Hanken Grotesk** — the primary humanist sans, standing in for the *frutiger-clean* register. Variable weights 300–800. Hanken Grotesk has the open apertures, generous x-height, and warm-but-neutral humanist proportions that make Frutiger feel like signage you trust without noticing. Used for the office name (weight 800, set intentionally too large for its sidebar box, tracking -0.01em), all body copy (weight 400, 1.65 line-height, 17px), and section headings (weight 600). This is the face that does 90% of the work and the face that makes the "anti-design" still legible. - **Atkinson Hyperlegible** — used *only* for the sidebar's pinned lists and the opening-hours block, set at 14px weight 400. Its slightly idiosyncratic, ultra-clear letterforms read like a public-service notice typed on a good machine — it makes the noticeboard feel official-but-human and gives the sidebar a different texture from the body. - **Special Elite** — a typewriter face, used *sparingly and deliberately wrongly*: the footer note, the "ref. no." stamps, the occasional crooked margin annotation, and the "kettle's on" asides. This is the anti-design font — it shows up where you'd expect clean sans, like a sticky note left on a tidy desk. **Palette — "muted-vintage" (manila, travel sweets, anglepoise glow):** (frequency analysis: muted-vintage palette sits at only 2%, muted at 31% — deliberately chosen as underused) - `#EFE7D4` — **manila paper**, the page background. Warm, slightly yellowed, like an aged folder under lamplight. - `#E3D6B8` — **older manila / sidebar paper**, a half-shade deeper for the noticeboard column. - `#3A332A` — **typewriter ink brown-black**, primary text. Never pure black — softer, like ribbon ink. - `#9C8A6E` — **string-and-tape beige**, hairline borders, torn-edge SVG fills, dividers. - `#C2603A` — **anglepoise glow / terracotta**, the warm accent: link underlines (drawn, not static), the candle flame's outer halo, the thumbtack glyphs, the "Right, let's sort this out" emphasis. - `#5C7A6E` — **aquarium green**, secondary accent: the bubble illustrations' tint, the "What we move" tick marks, hover states on sidebar links. - `#D9A441` — **travel-sweet amber / candleflame core**, used only for the candle flame inner glow and a single highlighted word per section. Minimum-three rule satisfied many times over: `#EFE7D4`, `#3A332A`, `#C2603A`, `#5C7A6E`, `#D9A441`, `#9C8A6E`, `#E3D6B8`. ## Imagery and Motifs **Primary imagery: water-bubbles** (frequency 6% — pleasantly uncommon). The humming aquarium in the corner of the office is the site's recurring visual joke and atmosphere-keeper. Bubbles are rendered as **hand-drawn SVG circles** — not perfect, slightly egg-shaped, 4px to 22px radius, stroke `#5C7A6E` at 1px with a soft inner highlight, fill at 8%–16% `#5C7A6E`. They rise slowly along the *right edge* of the main content area (a thin vertical "tank wall" implied by a faint 1px line), drifting laterally as they go, popping silently near the top. A small cluster also sits behind the aquarium illustration in the "kettle corner" section. The bubbles are the calm, breathing rhythm of the page — friendly, not flashy. **Candle-atmospheric** (frequency 6%) is the lighting model. There is exactly **one candle**, illustrated in flat SVG with a slightly crooked wick, anchored at the bottom of the sidebar. Its flame is two stacked teardrop paths: an outer `#C2603A` halo at low opacity and an inner `#D9A441` core, animated with a gentle `transform: scale + skewX` flicker on a 2.4s irregular loop. A soft radial-gradient "glow" (`#D9A441` → transparent, ~140px) sits behind it, very faint, suggesting the warm pool of light the office works by. On the rest of the page, a barely-perceptible vignette in `#9C8A6E` at the corners implies the same lamplit room. The candle is *the* mascot — small, steady, kind. **Other motifs:** brass thumbtacks (tiny SVG ovals with a highlight) at the head of every sidebar link; torn-paper SVG dividers between main sections; "scrap of paper" content cards rotated 0.4°–1.2° with a 2px offset shadow; a hand-stamped "REF." rubber-stamp graphic (slightly smudged, `#C2603A` at 70%) used near the transfer-steps section; a faint coffee-ring stain (one, top-right of the page) as an SVG arc. No photography. No icon library. Everything is drawn, slightly imperfect, and warm. ## Prompts for Implementation Build licence.broker as **a single static HTML document** — no SPA, no router, no build step beyond a Google Fonts `` and one CSS file. The whole experience should fit comfortably under ~65KB of HTML+CSS+JS before fonts. The visitor scrolls top-to-bottom through *the office*, guided by a persistent left sidebar. **Structure / storytelling spine (sections, top to bottom in the main column):** 1. **The Counter** — the office name (oversized, slightly clipped in the sidebar; echoed smaller at the top of the main column), a one-line welcome from the broker ("Hello — need a licence moved to a new name? You're in the right place. Kettle's on."), and a crooked taped scrap that says what a licence broker actually does. 2. **What We Move** — a relaxed prose paragraph (not a grid, not cards) describing the kinds of licences, permits, allocations and registrations that get transferred here, with a few set as a typed list in the sidebar mirroring it. 3. **How A Transfer Works** — the only full-width section: a horizontal sequence of three or four hand-drawn steps connected by a **path-draw SVG line** (frequency 28% — chosen as a moderate, expressive pick) that draws itself as you scroll into view using `stroke-dashoffset` animation. Steps: "Bring your old licence", "We check the name & the fee", "We file the transfer", "You get the new one". Each step is a slightly-rotated paper scrap with the REF. stamp near it. 4. **The Kettle Corner** — a warm aside about the unhurried pace, the candle, the aquarium; this is where the bubbles cluster and the candle glow is strongest. Pure atmosphere, almost no information. 5. **Things People Ask** — an FAQ as a vertical stack of *different-height, different-width* blocks (the anti-design move). Questions in Hanken Grotesk 600, answers in 400, one or two answers annotated in Special Elite in the margin ("(yes, really)"). 6. **A Word From The Counter** — one, maybe two crooked pinned quotes from happy people (a market-stall holder, a small studio that moved a software seat). Indented like margin notes, not a carousel. 7. **The Door** — a quiet closing block: where the office is ("between the stationery shop and the dry cleaner"), the opening hours including "or whenever the candle's lit", and a typewriter-font footer note. No big CTA — just "Come in whenever. We'll put the kettle on." **Sidebar (left, persistent):** office name (too big for its box, intentionally), brass-thumbtack section links that smooth-scroll, the typed "What we move" list, opening hours in Atkinson Hyperlegible, and the flickering candle anchored at the bottom with its faint glow. On mobile it collapses to a top accordion strip; the candle moves to the page footer. **Animation & interaction (restrained, friendly, never busy):** - **Bubbles:** continuous slow rise along the right edge using `requestAnimationFrame` (or pure CSS `@keyframes` if simpler), staggered start times, lateral drift, fade-out near the top, recycled. Cap at ~14 bubbles on screen. - **Candle flame:** CSS `@keyframes` flicker on `transform: scale() skewX()` and `opacity`, ~2.4s irregular timing, plus a subtle box-shadow/`filter: blur` pulse on the glow. - **Path-draw SVG** in "How A Transfer Works": `stroke-dasharray` / `stroke-dashoffset` animated to 0 when the section enters the viewport (IntersectionObserver). - **Link underlines:** terracotta underline that *draws* left-to-right on hover (animated `background-size` or a pseudo-element width transition) — the only "draw" interaction on links. - **Scrap cards:** on hover, settle from their 0.8° tilt to ~0.2° with a gentle 200ms transition and a slightly deeper shadow — like a piece of paper being lightly pressed. - **Sidebar links:** hover swaps the ink-brown to aquarium green `#5C7A6E` and nudges the thumbtack 1px. - Respect `prefers-reduced-motion`: freeze bubbles and the candle to a static frame, skip the path-draw (show the final line), keep everything legible. **Texture & detail:** subtle paper grain via a tiled SVG noise overlay at ~3% opacity over the manila background; torn-paper SVG dividers between sections; one coffee-ring SVG arc top-right; the REF. rubber-stamp graphic near the transfer steps; corner vignette in `#9C8A6E` at very low opacity. Hairline borders are always 1px `#9C8A6E` and are allowed to be very slightly misaligned (1–2px) on purpose. **AVOID:** hero banners, pricing tables, pricing tiers, stat grids ("10,000 licences moved!"), testimonial carousels, email-capture modals, sticky CTA bars, glassmorphism, gradient meshes, neon, dark mode, card grids, perfectly aligned 12-column layouts. This is an office, not a landing page. Bias hard toward **atmosphere, warmth, and one calm vertical walk through a cosy, slightly cluttered room.** ## Uniqueness Notes Differentiators from the rest of the CMassC catalogue: 1. **"Competent back-office wearing comfortable clothes" — anti-design as engineered cosiness, not chaos.** Anti-design sits at only 2% in the corpus, and the few that use it tend toward brutalist or glitchy provocation. This site uses anti-design as *warmth*: deliberate misalignments, an oversized clipped heading, a typewriter footer in the wrong font, crooked taped scraps — all in service of feeling like a real, kind, slightly messy office. No other site in the archive frames anti-design as hospitality. 2. **A persistent left sidebar styled as an office noticeboard with a live candle anchored at its base.** Sidebar layout is 22% in the corpus and almost always treated as a dashboard nav or a docs TOC. Here it is a pinned-paper column with brass thumbtacks, a typed "what we move" list, opening hours that mention the candle, and a single flickering candle at the bottom — the candle (candle-atmospheric, 6%) literally living *inside the navigation*. 3. **The `.broker` TLD reinterpreted as "the village fixer," not finance.** Where other `.broker`/`.market` sites in the catalogue lean trust-blue, gold-luxury, or data-dashboard, licence.broker is a manila-folder, kettle-on, anglepoise-lit counter between a stationery shop and a dry cleaner. The muted-vintage palette (2%) — `#EFE7D4` manila, `#C2603A` anglepoise glow, `#5C7A6E` aquarium green, `#D9A441` candleflame amber — is unique in being assembled from "1970s office supplies and a tin of travel sweets." 4. **Bubbles and a candle as the only two animated things — calm breathing + warm flicker.** Water-bubbles (6%) drift up the right "tank wall" and a single candle flickers in the sidebar; the path-draw SVG (28%) appears exactly once, in the transfer-steps sequence. Everything else is still. This restraint — two ambient animations, one functional draw — is the opposite of the parallax/cursor-follow/spring-heavy default that dominates the corpus. 5. **Frutiger-clean legibility (Hanken Grotesk) holding together a deliberately broken layout.** The humanist sans does the heavy lifting so the anti-design never tips into illegibility — pairing a public-service-clean type system (Hanken Grotesk + Atkinson Hyperlegible) with intentionally crooked, mismatched composition and a typewriter face used "wrongly" is a tension no other site in the archive occupies. Chosen seed: `aesthetic: anti-design, layout: sidebar, typography: frutiger-clean, palette: muted-vintage, patterns: path-draw-svg, imagery: water-bubbles, motifs: candle-atmospheric, tone: friendly`. Avoided per frequency analysis: hand-drawn aesthetic (97%), glassmorphism (71%), photography imagery (98%), full-bleed/card-grid/centered layouts (93/88/86%), warm+gradient palettes (98/97%), parallax/cursor-follow/spring/magnetic patterns (96/89/86/82%), mono typography (94%), pastoral-romantic tone (36%). Preferred underused picks: sidebar layout (22%), water-bubbles (6%), candle-atmospheric (6%), muted-vintage palette (2%), anti-design aesthetic (2%), frutiger-clean typography (5%), path-draw-svg (28%).