# Design Language for license.broker ## Aesthetics and Tone license.broker is built as **a midnight clearing-house for the things that grant permission** — a brutalist concrete substation, half archive and half confessional, where licenses go to change hands. The conceit: imagine a Cold-War-era civic records bunker, poured-concrete and exposed-rebar, that was quietly repurposed in some near-future as a brokerage for *rights themselves* — software licenses, broadcast rights, mineral claims, the right to use a name, the right to be forgotten. The lights are mostly out. There is a single low-burning candle on every counter, kept there not for charm but because the building's grid is unreliable and the staff have stopped trusting it. You arrive after hours. A clerk you never see leaves you a stack of forms, a wax seal, and a long descending corridor of vaults — and you walk down it, one license at a time. The tone is **mysterious-moody** — only 4% of the corpus reaches for it, and almost nothing pairs it with **brutalist** (7%). This is not the friendly back-office of the sibling site `licence.broker`; it is the same trade conducted in the dark, with a heavier hand and a colder floor. The mood is hushed, slightly liturgical, faintly anxious. Forms here feel like they *matter*. When you mis-fill one, the building reacts — a tremor, a flicker, the candle guttering. The brutalism is honest: visible structural grids, oversized concrete slabs as section dividers, no rounded corners anywhere, shadows that are hard-edged offsets rather than soft blur. But it is brutalism lit by **candlelight** — a warm, unstable, amber glow pooled at the center of cold gray fields, with everything beyond the candle's reach falling to near-black. The retro-futuristic palette gives it a residual optimism the architecture refuses: this bunker was built by people who believed the future would be administered, catalogued, *brokered* — and the warm cyans and faded oranges of their imagined tomorrow still cling to the signage even as the concrete weeps. ## Layout Motifs and Structure The spine of the site is a **timeline-vertical** layout — present in only 2% of the corpus, and deliberately chosen against the dominance of full-bleed (93%), card-grid (88%), and centered (86%). The entire experience reads top-to-bottom as **a descent**: a single continuous vertical shaft, like a section drawing of the bunker's stairwell, with a fixed **rebar rail** running down the left margin (a 3px hard cyan line, with hand-drawn cross-hatching ticks every viewport-height marking "floor -1, floor -2, floor -3…"). Every major section is a **landing** on this descending stair — a floor of the archive — and the scroll position lights the corresponding tick on the rail like a freight-elevator indicator. - **The grid is exposed and structural.** A 12-column concrete grid with visible 1px gridlines in `#2A2E33` that *never fully hide* — they sit at 30% opacity behind content, like form-grids printed on bond paper. Content blocks snap hard to this grid; nothing floats freely; everything is a poured slab. - **Section dividers are concrete lintels** — full-bleed horizontal bands of textured gray (`#3C4045`) with a hard 8px offset shadow below (no blur), each stamped with an oversized index number (01 / 02 / 03) in handwritten chalk-white, set absurdly large (clamp 120px–340px), bleeding off the edge. - **The candle is the focal anchor of every landing.** Each section has one warm radial pool — a CSS radial-gradient from `#FFB347` at center fading through `#7A4A1E` to transparent — positioned over the section's primary content, with everything outside the pool darkened by an overlay. As you scroll, the pool follows you down the shaft; the candle is always lit at the floor you're standing on. - **Forms are the load-bearing UI.** Wherever a normal site would put a CTA or a pricing block, this site puts **a form on a clipboard, bolted to the concrete** — input fields styled as ruled lines, labels in handwritten margin-note script, a wax-seal "submit" affordance. These forms are decorative-narrative, not transactional; they exist to be filled and stamped as part of the descent. - **No hero. No nav bar.** The masthead is a riveted metal plaque at the very top of the shaft reading `LICENSE.BROKER — RIGHTS TRANSFER STATION — RING DOWN`. Navigation, if any, is a small caged elevator panel fixed bottom-left with floor buttons. - **The footer is the bottom of the shaft** — pitch black, the candle finally out, a single line of fine print in dim cyan: a chalk tally of "licenses brokered tonight." ## Typography and Palette **Typefaces (Google Fonts only — verified available):** - **Caveat** — the primary *handwritten* voice. Used for all the human marginalia of the bunker: form labels, the clerk's annotations, the floor numbers chalked on lintels, hand-scrawled stamps like "SEEN", "FILED", "VOID — REFILE". Weights 400–700. Set at generous size for headings (clamp 32px–84px), slightly rotated (-1.5deg to 2deg per element, never perfectly level), ink-bleed effect via subtle text-shadow. This is what makes the brutalism feel *touched*. - **Archivo Black** — the structural display face. Used for the oversized concrete-stamp index numbers, the riveted-plaque masthead, and section titles. Its narrow, heavy, relentlessly geometric forms are the building itself talking — cast in concrete, not written by hand. Tracking +0.04em, uppercase only, occasionally with a 1px inset "stamped" letterpress shadow. - **IBM Plex Mono** — the bureaucratic record-keeping face. Used for all body copy, form field text, reference codes, dates, the elevator floor panel, and footer fine print. Weights 300 (body), 500 (emphasis). Line-height 1.7. This is the typewriter every clerk in the bunker has been issued — a residual-future mono that feels both archival and faintly sci-fi. Reference codes formatted like `RTS-//-04-9912-Δ`. **Palette — retro-futuristic, in only 5% of the corpus:** - `#0E1013` — **bunker black**, the unlit concrete and the deep background of the shaft. - `#2A2E33` — **form-grid gray**, the always-visible structural gridlines and hairline rules. - `#3C4045` — **poured slab**, the textured concrete of section lintels and content blocks. - `#5BC8C2` — **administered cyan**, the retro-futuristic signage glow — the rebar rail, active floor ticks, links, the optimistic future that won't quite die. (A faded, slightly chalky teal — not neon.) - `#FFB347` — **candle amber**, the warm unstable pool of light at every landing's center; also the wax-seal submit affordance. - `#7A4A1E` — **scorch / wax**, the brown-orange midtone where candlelight fades into shadow, and the color of dripped sealing wax. - `#E8E2D4` — **chalk bond**, the off-white of handwritten marginalia and form ink — paper-warm, never pure white. - `#C0473A` — **redline**, used sparingly and only for error states — the stamp that says VOID, the tremor that runs through a mis-filled form. The palette runs cold-to-warm radially: cyan and gray everywhere, amber only where the candle reaches, redline only where something has gone wrong. ## Imagery and Motifs Imagery is **line-illustration** (only 5% of the corpus) — never photography. Everything in the bunker is rendered as **single-weight ink line drawings**, the kind you'd find in a 1960s technical manual or a municipal evacuation diagram, drawn in `#5BC8C2` on `#0E1013` (cyan blueprint-style) or `#E8E2D4` chalk lines on `#3C4045` concrete: 1. **The section drawing.** A recurring large line-illustration of the bunker itself — a cutaway elevation showing the descending shaft, the numbered floors, the little candle on each landing, a tiny figure (you) somewhere on the stairs. The scroll position moves the figure down this drawing, parked semi-transparent behind content. 2. **Candle line-icons everywhere** — a single hand-drawn candle with a wavering flame is the site's mark, repeated at every landing, the flame animated with a subtle SVG path wobble. The `candle-atmospheric` motif appears in only 6% of the corpus; here it is the *organizing image* — not decoration but the literal light source the layout is built around. 3. **Form ephemera as line art** — clipboards, rubber stamps, wax seals, paperclips, a desk bell, a pneumatic-tube canister, a ring of skeleton keys — all drawn in the same flat technical-manual line style, scattered along the descent like exhibits. 4. **Rebar and rivets** — the structural motifs: cross-hatched rebar ticks on the rail, riveted plate edges on the masthead and lintels, hard offset shadows. These are drawn, not real textures — line-art rivets, line-art concrete hatching. 5. **The wax seal** — the one place pigment pools: a thick blob of `#7A4A1E` wax with a pressed cyan emblem, used for the "stamp / submit / file" affordance. It is the only "filled" shape in an otherwise line-only world. Decorative recurring elements: a faint **chalk tally** (vertical strokes in groups of five) counting things in margins; **floor-indicator dots** down the rail; a **drifting dust mote field** in the candle pool (tiny slow-falling cyan and amber specks); **redline tremor cracks** that draw themselves across the screen only on error. ## Prompts for Implementation **Build it as a literal descent through a candle-lit concrete archive — a full-screen vertical narrative, not a marketing page.** - Structure the page as one long vertical "shaft": a series of `
` elements stacked top to bottom, each roughly 100vh or taller. A fixed left **rebar rail** (`position: fixed; left: clamp(16px, 4vw, 56px)`) is a 3px `#5BC8C2` vertical line with `::before`/`::after` and repeating-linear-gradient cross-hatch ticks at each floor; an IntersectionObserver lights the active floor's tick (full opacity + a small amber glow) and dims the rest. - **The candle pool follows the scroll.** Maintain a single fixed radial-gradient overlay element (`#FFB347` center → `#7A4A1E` → transparent, ~480px radius) and, as each landing scrolls into view, animate the pool's vertical center to sit over that section's primary content (GSAP/ScrollTrigger or a `scroll`-driven transform). Outside the pool, a `mix-blend-mode: multiply` `#0E1013` overlay darkens everything. The flame should flicker: animate the gradient radius and opacity with a small irregular keyframe loop (3 stops, uneven timing) so it never looks mechanical. - **Section dividers are concrete lintels.** Full-bleed bands, `background: #3C4045` with a subtle SVG noise/hatch texture, `box-shadow: 0 8px 0 #0E1013` (hard, no blur), each carrying an `Archivo Black` index number at `font-size: clamp(120px, 24vw, 340px)`, `color: #E8E2D4`, partially clipped by the band, with a faint inset letterpress shadow. - **Handwritten layer.** Use `Caveat` for all marginalia — float small annotation blocks into the grid margins, each given a tiny random rotation via CSS custom property (`--tilt: -1.5deg`…`2deg`) and a soft `text-shadow` for ink bleed. Headings can be `Caveat` at large size, or `Archivo Black` for the structural ones — alternate deliberately: human voice vs. building voice. - **Forms as narrative set-pieces (NOT real CTAs).** Where a normal site would put pricing/CTA/stat grids, place a "clipboard bolted to concrete": a slightly-rotated card with ruled-line inputs (`border: none; border-bottom: 1px solid #2A2E33`), `Caveat` labels in the margin, `IBM Plex Mono` field text, and a **wax-seal button** — a circular `#7A4A1E` blob (irregular `border-radius`) with a `#5BC8C2` embossed glyph and a slight 3D press on `:active`. Filling and "stamping" a form should trigger a satisfying SVG stamp-down animation that leaves a `Caveat` "FILED" mark. - **shake-error as a featured interaction** (only 4% of the corpus uses it). When a form field is left empty or mis-filled: the whole clipboard does a sharp horizontal `shake` (translateX keyframes ±6px, ~400ms, ease-out), the candle pool jolts and dims briefly (the "tremor"), a `#C0473A` **tremor crack** SVG path draws itself across the nearby concrete (`stroke-dashoffset` animation), and a chalk `VOID — REFILE` stamp slams in. Make the shake feel structural — like the bunker itself flinched. - **Line-illustration everything.** All imagery is inline SVG with single-weight strokes (`#5BC8C2` on dark, `#E8E2D4` on concrete, `stroke-width: 1.5–2`, `fill: none` except the wax seal). Include a large `bunker-section.svg` cutaway behind the content (low opacity, `position: sticky` or parallax) with a small figure whose `y` position is bound to scroll progress so it descends as the reader does. - **Atmosphere details:** a slow drifting dust-mote field (a handful of tiny absolutely-positioned cyan/amber dots with long-period `translateY` + `opacity` loops, confined to the candle pool); a faint film-grain overlay (`background-image` SVG `feTurbulence`, ~4% opacity, `pointer-events: none`); a chalk tally counter in the footer that ticks up; an optional very-low ambient hum + occasional paper-rustle (off by default, `prefers-reduced-motion`-aware). - **Footer = bottom of the shaft:** pure `#0E1013`, candle extinguished (pool fades to nothing on the last section), one line of dim `#5BC8C2` `IBM Plex Mono` fine print — a chalk tally of "licenses brokered tonight" and a reference code. No CTA, no newsletter, no social row. - **AVOID:** hero banners, pricing tables, stat-grids, card-grid galleries, soft drop-shadows, rounded corners, gradient-mesh backgrounds, stock photography, glassmorphism, parallax-for-its-own-sake. Every shadow is a hard offset; every corner is square; every image is a line drawing; the only soft thing in the building is the candlelight. ## Uniqueness Notes This design is differentiated from the corpus on at least five axes: 1. **Brutalism lit by candlelight.** `brutalist` aesthetic (7%) and `candle-atmospheric` motifs (6%) are each uncommon, and their combination — a poured-concrete records bunker whose entire layout is organized around a single roaming amber light pool in a cold gray field — does not appear elsewhere. The hard-offset shadows, always-visible structural gridlines, square corners, and oversized cast-concrete index numbers are pure brutalism; the warm radial pool, the flickering flame, and the near-black periphery are pure candle-atmosphere. Most brutalist sites in the corpus are bright, loud, and neon; this one is hushed and dark. 2. **Timeline-vertical reread as a literal descent.** `timeline-vertical` layout appears in only 2% of the corpus, and here it is not a "company history" strip — it is a section-drawing of a bunker stairwell, with a fixed cross-hatched rebar rail, numbered floors, a freight-elevator floor indicator that lights as you scroll, and a tiny figure (the visitor) descending a background line-illustration in sync with scroll. The page reads top-to-bottom as *going down into the archive*. 3. **shake-error promoted to a load-bearing, narrative interaction.** `shake-error` is in only 4% of the corpus and almost always a throwaway form micro-detail. Here a mis-filled form makes the *building* react: the clipboard shakes, the candle pool jolts and dims (a tremor), a redline crack draws itself across the concrete, and a chalk VOID stamp slams in. Error handling is part of the storytelling. 4. **Forms instead of CTAs; line-illustration instead of photography.** Per the brief's bias against CTA-heavy, pricing, and stat-grid layouts: this site has none of them. Where those would go, there are narrative form set-pieces — clipboards bolted to concrete, ruled-line inputs, wax-seal "stamp" affordances. And imagery is `line-illustration` (5% of the corpus) exclusively — flat single-weight technical-manual ink drawings of candles, clipboards, rebar, rivets, skeleton keys — never a photograph, never a gradient mesh. 5. **A deliberate dark-twin of its sibling.** Where `licence.broker` (the sibling) is a friendly, anti-design, daylit back-office with an aquarium and a frutiger-clean sans, `license.broker` is the same trade conducted after hours in a brutalist bunker with handwritten Caveat marginalia, Archivo Black concrete stamps, IBM Plex Mono records, and a mysterious-moody tone. Same domain family, opposite emotional register — chosen on purpose so the two never feel like reskins of each other. **Chosen seed/style:** `aesthetic: brutalist, layout: timeline-vertical, typography: handwritten, palette: retro-futuristic, patterns: shake-error, imagery: line-illustration, motifs: candle-atmospheric, tone: mysterious-moody`. **Avoided patterns from frequency analysis:** sidestepped the dominant `hand-drawn`/`glassmorphism` aesthetics, `full-bleed`/`card-grid`/`centered` layouts, `mono`-only and `humanist` typography defaults (Caveat + Archivo Black lead, Plex Mono supports), `warm`/`gradient` palettes (this is a cold palette with a warm point source), `photography` imagery, `parallax`/`cursor-follow`/`spring`/`magnetic` as the headline interactions (we lead with `shake-error`), and the `pastoral-romantic`/`warm-inviting` tones (we are `mysterious-moody`).