# Design Language for license.broker ## Aesthetics and Tone license.broker is the trading floor for the right to make. It sits between two parties — a holder of a license and someone who needs one — and it moves that permission across the table for a fee. The design treats licensing not as paperwork but as **liquid permission**: something that pools, ripples, transfers, and settles. The aesthetic is **editorial** — long-form, confident, well-leaded prose set against generous quiet — but it is bent through a **futuristic-cutting-edge** lens so the page reads less like a law journal and more like a 2031 settlement-layer prospectus that happens to be beautifully typeset. The mood is **a forest at the edge of a still lake before a stone is thrown.** Everything is calm, deep-green, photographic, breathing — and then a transaction lands and the surface concentric-rings outward, light catching every wavefront, before re-settling. Permission is water. Brokerage is the ripple. The brand voice is that of an unflappable market-maker who has seen every kind of deal: precise, dry, faintly amused, never loud. No urgency theatrics, no countdown banners — the page has the composure of an institution that knows the trade will happen because trades always happen here. Visual references: the moss-and-fog photography of Pacific temperate rainforests; the typographic restraint of *The Gentlewoman* and *Apollo* magazines; the soft scientific HUDs of speculative-finance films where data floats in still air; the slow physics of a single raindrop hitting a forest pool filmed at 1000fps. Cutting-edge here means *quiet futurism* — the future as a place that finally stopped shouting. ## Layout Motifs and Structure **Primary layout: hero-dominant.** The first viewport is not a banner above content — it *is* the content for as long as it holds. A single full-bleed forest-pool photograph (deep greens, a slick of dark water, fog between trunks) fills the screen. Over it, in humanist type, three lines settle one at a time like droplets: > *A license is permission, frozen.* > *We move it before it thaws.* > *license.broker — the desk for the right to make.* A faint concentric ripple — pure SVG, a few thin rings — emanates from a point near the page center on load and on every section entry, as if each scroll-stop drops a new stone. The hero owns ~140vh; you scroll *through* the water, not past it. Below the hero, structure is **editorial-flow**: a generous single column (max ~62ch) of running prose, set in a left-biased measure, with wide right margin where small annotations, ripple-diagrams, and pull-quotes float — a quiet sidebar that never becomes a sidebar. Sections are separated not by cards or rules but by **a single full-width band of still water** (a thin photographic strip) that ripples once as it enters the viewport, then calms. Section sequence (a narrative, not a feature list): 1. **The Surface** — hero pool, the thesis of liquid permission. 2. **What sits beneath** — prose on why licenses are illiquid today: locked in PDFs, drawers, dead emails. Marginalia: tiny line-icons of a closed drawer, a frozen waveform. 3. **The Drop** — the act of listing a license on the desk; a large centered ripple animation, rings labelled faintly with terms (scope, territory, term, exclusivity) at each wavefront. 4. **The Spread** — how two parties meet at a price; an editorial spread (true magazine-spread feel, two facing half-columns of prose) bridged by a single ripple crossing the gutter. 5. **Settlement** — the transfer; the water goes glassy-still, one last concentric pulse, then mirror-calm. A photograph of dawn-flat water. 6. **The Standing Pool** — a closing essay-paragraph on a permanent marketplace; the page bottom is a deep, dark, motionless green — the pool at rest. No pricing tables, no stat-grids, no CTA stacks. If contact is needed it is one quiet line of text at the very bottom, set like a magazine colophon. ## Typography and Palette **Typography:** - **Display / headings:** *Fraunces* (Google Fonts) — a "soft serif" with optical sizes and a gentle, almost organic warmth at large sizes; its slightly wobbly, watery curves at the highest optical size are perfect for "liquid permission." Used at clamp(2.2rem, 5vw, 4.6rem), weight 400–500, optical-size maxed, letter-spacing -0.01em. Headlines lowercase, like quiet asides. - **Body / running prose:** *Spectral* (Google Fonts) — a humanist serif with screen-tuned, lightly calligraphic strokes; reads like a well-set magazine column at clamp(1.05rem, 1.25vw, 1.2rem), weight 400, line-height 1.72, max-width 62ch. - **Marginalia / labels / colophon:** *Public Sans* (Google Fonts) — a plain, humanist, faintly governmental sans (it was literally made for a government design system) used small (0.78rem), uppercase, letter-spacing 0.14em, in muted green-grey, for ripple-diagram labels, marginal annotations, and the footer colophon. The humanist sans against the two serifs gives the page its "futuristic-but-civic" tension. **Palette — forest-green, deep and watery:** - `#0C1F17` — **Pool Bottom** — near-black forest green; page base for the closing band and hero overlay scrim. - `#143A28` — **Deep Moss** — primary dark green; section bands, headings on light. - `#2E6E4E` — **Fern** — mid green; ripple ring strokes, links, active marginalia. - `#7FB79A` — **Mist Green** — desaturated pale green; secondary text on dark, faint ripple echoes. - `#E9F0EB` — **Fog** — barely-green off-white; primary page background for prose sections. - `#F6F2E8` — **Sediment** — warm pale sand; alternate prose band, paper-warmth so it isn't clinical. - `#C9A24B` — **Brass Gauge** — a single restrained gold; used *only* for the price/value moment in "The Spread" and the colophon mark — the one warm metallic glint of a deal being struck on cold water. Contrast pairings: Spectral `#143A28` on `#E9F0EB`; Fraunces headings `#0C1F17` on `#F6F2E8`; on dark bands, Mist `#7FB79A` body with Fog `#E9F0EB` headings on `#0C1F17`. ## Imagery and Motifs - **Concentric ripple (the core motif):** Hand-built SVG — between 3 and 7 thin (1–1.5px) circles sharing a center, drawn with stroke-dasharray so they can be animated as expanding-and-fading rings. Stroke `#2E6E4E` fading to `#7FB79A`. This appears as: the load animation, every section-entry pulse, section dividers (a single ring spanning the band), bullet markers (a tiny 3-ring glyph instead of a dot), and the "Drop"/"Settlement" hero animations. **Underused `ripple` pattern is the spine of the whole site.** - **Forest-pool photography:** Treated photographs — deep-green graded, slightly cool in shadow, warm where dawn light hits water. Subjects: still black water under conifers, fog between trunks, a single droplet's impact crown, dawn-flat lakes. Always under a subtle `#0C1F17` gradient scrim so type sits cleanly. No people, no products — just water and trees and light. - **Bubble-playful counterweight:** Against all that solemn green, small clusters of soft translucent **bubbles** drift slowly upward in the margins and along section transitions — pale-green, blurred, gently wobbling, occasionally one pops with a faint ripple of its own. This is the playful exhale: the marketplace is serious about permission but light on its feet. **Underused `bubble-playful` motif used as deliberate tonal relief, never decoration-for-its-own-sake.** - **Marginal line-icons:** Ultra-thin single-weight line drawings in `#2E6E4E` — a closed drawer, a frozen waveform, two arrows crossing a gutter, a glassy still surface, a colophon mark (three rings around a small brass dot). Sized ~20–28px, sitting in the right margin beside the prose they annotate. - **The price glint:** In "The Spread" only, a single `#C9A24B` hairline arcs across the gutter where two parties' columns meet, with a small brass numeral — the one moment colour-temperature flips warm. It catches the eye precisely because nothing else does. ## Prompts for Implementation - Build it as a **single full-screen narrative scroll**, not a landing page. Treat the hero as a 140vh chapter the reader moves *through*; subsequent sections are essay chapters separated by photographic water-bands. The reader should feel they are descending through still water from surface to pool-bottom. - **Ripple engine:** one reusable SVG component — N concentric circles, animated via CSS keyframes (scale + stroke-opacity) staggered per ring with `prefers-reduced-motion` honoured (rings just fade in, no expansion). Trigger on: page load, each section's IntersectionObserver entry, and `pointerdown` anywhere in the hero (a click drops a real stone — rings spawn at cursor). Keep it cheap: transforms and opacity only. - **Bubble field:** a handful (~8–14) of blurred radial-gradient circles, `position: fixed` in the margins, drifting upward on long-duration linear `translateY` with a slow `rotate`/`scale` wobble; one or two randomly trigger a tiny ripple-pop on a loop. Subtle — they should be noticed on the second read, not the first. - **Type as droplets:** hero lines arrive one-by-one with a gentle `blur-focus` + slight downward `spring` settle, ~600ms apart, as if each line is a drop landing and resolving. Section headings (Fraunces, optical-size max) fade up slowly with a 1px letter-spacing relax. - **Scroll feel:** scroll-triggered, soft. Prose paragraphs fade-and-rise 12–16px. Water-band dividers ripple once on entry then hold perfectly still — *stillness is the default state*, motion is the exception that means "a transaction happened." - **Palette discipline:** forest-greens carry 99% of the page; `#C9A24B` Brass Gauge appears in exactly two places (the price glint in "The Spread", the colophon mark). Resist adding accent colours — the restraint *is* the futurism. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, feature-card rows, signup-banner heroes, dashboard chrome. There are no buttons competing for attention; there is one quiet colophon line at the bottom. The page persuades by composure, not conversion. - Copy voice: lowercase headings, dry market-maker prose, short declaratives ("A license is permission, frozen."). Never exclamatory. Never "revolutionary." Let the water do the talking. ## Uniqueness Notes Differentiators from other designs in the set: 1. **Ripple-as-spine, not ripple-as-effect** — the concentric-ring motif isn't a hover flourish; it is the structural language of the entire site (load, dividers, bullets, section pulses, hero interaction). `ripple` is rare (7%) in the corpus and here it is load-bearing. 2. **A deep forest-green page that is about *water*, not plants** — `forest-green` (3%) used for liquidity/stillness rather than nature/eco; the green is a pool, not a leaf. No botanical-illustration clichés. 3. **Editorial long-form for a marketplace** — `hero-dominant` (7%) + editorial-flow prose with floating marginalia, deliberately refusing the SaaS-marketplace template (no pricing tables, no stat-grids, no CTA stacks). The page reads like a magazine essay about liquid permission. 4. **Solemn-but-light tonal pairing** — `bubble-playful` (2%) bubbles drifting through a `futuristic-cutting-edge` (7%) green editorial — playfulness used as a single controlled exhale, not as a theme. 5. **One-glint colour economy** — virtually monochrome forest-green with exactly two appearances of Brass Gauge gold, both tied to the literal moment a deal is struck. Chosen seed / style: **aesthetic: editorial, layout: hero-dominant, typography: humanist, palette: forest-green, patterns: ripple, imagery: photography, motifs: bubble-playful, tone: futuristic-cutting-edge**. Avoided overused patterns from frequency analysis: corporate aesthetic (92%), centered layout (92%), gradient/warm palettes (96%/90%), mono typography (94%), mysterious-moody tone (94%), counter-animate (91%), parallax (69%). This design uses none of the dominant defaults — no mono type, no warm gradient, no centered card grid, no counter animations, no parallax-section gimmickry; it leans entirely on underused vocabulary (hero-dominant, forest-green, ripple, bubble-playful, futuristic-cutting-edge).