# Design Language for licence.broker ## Aesthetics and Tone `licence.broker` is a **velvet-lined negotiation room** — the kind where deals are sealed with a fountain pen on cream-weight paper, where the chandelier throws amber onto dark wainscoting, and where silence itself has market value. This is not a marketplace in the frantic sense; it is a **bourse** — a formal exchange house where intellectual property changes hands through ritual and ceremony, not friction and noise. The Swiss aesthetic here is not the cold rationalism of Helvetica posters. It is the **Swiss private bank** variant: restrained, almost secretive, with surfaces so controlled that every deviation reads as intentional meaning. Think Zurich's Bahnhofstrasse in November, the windows of private wealth management firms, the card that gets handed to you rather than displayed in a rack. Opulence expressed through what is absent as much as what is present. Tone is **opulent-grand** — the register of institutions that have no need to shout because their reputation precedes every sentence. The site speaks in the cadence of a senior partner explaining terms: measured, complete, never hurried. Every heading is a clause. Every paragraph is a considered position. The burgundy palette reinforces the reading-room atmosphere: deep claret walls, cream foolscap, gilt rule, and the particular darkness of a room where natural light enters through tall windows and is immediately absorbed by rich surfaces. This is not a startup. It is a house. ## Layout Motifs and Structure The layout is a **card-grid** — but one imagined as a glass display case in a private archive: each card a dossier, each dossier sealed until touched. The grid is a strict 3-column composition at desktop width, collapsing to 2 then 1 with disciplined breakpoints. Cards are generous — 480px minimum height at desktop — and separated by the exact white space a cataloguer would leave between accession entries in a bound register. The grid does not fill the viewport edge-to-edge. It lives inside a **centred container** of maximum 1280px, flanked by 80px gutters that serve as the visual equivalent of margins in a legal document. Those gutters are never wasted: a single 1px vertical rule of `#6B1F2A` runs floor-to-ceiling in the left gutter on desktop, a silent ledger-line that formalizes the reading space. Card structure follows a strict internal order: 1. A **category sigil** — a small SVG typogram in the card's top-left (14×14 px), drawn as a one-weight monoline 2. A **dossier headline** in 22px Commissioner SemiBold, set left-aligned with a maximum two-line budget 3. A **domain name** rendered in a lighter-weight monospaced string — the intellectual property identifier 4. A **separator rule** of 0.5px in `#8B3048`, 100% card-width 5. A **brief** — 3–4 lines of 15px Commissioner Regular at 1.65 line-height 6. A **status indicator** — a 6px disc, color-coded: available `#C8945A`, under-offer `#8B3048`, transacted `#2C1810` The page opens with a **masthead** that occupies exactly one viewport height: the `licence.broker` wordmark set in Commissioner ExtraLight at 96px — tracked at +0.08em — centred on a `#1A0A0E` ground, with a single horizontal rule of `#6B1F2A` at 0.5px running full-width beneath it. Below the wordmark, in 16px Commissioner Regular at `#C8945A`, the line: *A private exchange for intellectual property.* That is the only statement the masthead makes. No sub-navigation, no hero copy, no CTA. Below the masthead, a **12px announcement ribbon** of `#2C1810` carries a single line of 11px Commissioner SemiBold in `#C8945A` all-caps, letter-spaced at +0.18em — a static message such as `CURRENT SESSION — 47 LICENCES AVAILABLE FOR NEGOTIATION`. The ribbon is the only element in the layout that acknowledges quantity. It never flashes or scrolls. The card-grid follows. Below it: a footer in the weight of a document colophon — two lines, centered, `#5A3040` text, no links other than a single email address in Commissioner Regular. ## Typography and Palette **Type system — Commissioner (Google Fonts, variable, wght 100–900):** Commissioner is an atypical grotesque: humanist in its curves, formal in its posture, and — critically — it reads like the typeface a Swiss notary would choose if they had to switch from metal type to digital. Its weight range allows the entire site to run on a single family with zero typographic dissonance. - **Wordmark / Display:** Commissioner ExtraLight (wght 200), 96px at masthead, tracked at +0.08em. The thinness against the dark ground creates the impression of engraving — letters pressed into rather than printed onto the surface. - **Card Headlines:** Commissioner SemiBold (wght 600), 22px, line-height 1.3, letter-spacing -0.01em. Set in `#F0E6D6` (cream) against card ground. - **Category Sigil Labels:** Commissioner Medium (wght 500), 9px, tracked at +0.22em, all-caps. Set in `#8B3048`. - **Body / Brief Text:** Commissioner Regular (wght 400), 15px, line-height 1.65. Set in `#C4B0A8`. - **Domain Identifier:** Commissioner Light (wght 300), 13px, font-variant-numeric: tabular-nums, letter-spacing +0.04em. Set in `#A07060`. - **Announcement Ribbon:** Commissioner SemiBold (wght 600), 11px, all-caps, tracked at +0.18em. Set in `#C8945A`. **Palette — deep-burgundy:** | Role | Hex | Name | |---|---|---| | Page ground | `#1A0A0E` | Claret cellar | | Card surface | `#221218` | Dark wainscot | | Card surface hover | `#2C1820` | Lit wainscot | | Primary accent | `#8B3048` | Seal red | | Secondary accent | `#C8945A` | Aged gilt | | Tertiary accent | `#6B1F2A` | Ledger rule | | Headline text | `#F0E6D6` | Cream foolscap | | Body text | `#C4B0A8` | Worn vellum | | Muted text | `#A07060` | Faded ink | | Deep shadow | `#2C1810` | Cabinet dark | | Separator rule | `#8B3048` at 40% opacity | Hairline rule | ## Imagery and Motifs The site carries **no photography**. The frequency analysis confirms photography at approximately 85% across the registry — licence.broker opts out categorically. All visual interest comes from three sources: the typographic system, the wave-form motif, and the category sigils. **Wave-forms as structural grammar:** The primary decorative motif is a system of ultra-fine sinusoidal wave paths rendered as SVG `` elements. These are not decorative flourishes layered on top of content — they are the **substrate of the layout itself**, drawn in the background of the page at `position: fixed`, running the full viewport height. Three wave paths, each offset in phase by 120 degrees, drawn at 0.4px stroke weight in `#6B1F2A` at 8% opacity. The waves are slow — a complete oscillation takes 28 seconds, driven by a CSS custom property animation on `stroke-dashoffset`. They do not respond to scroll or cursor. They simply move, as a pendulum moves — marking time rather than decorating space. On card hover, a fourth wave path appears within the card itself: a tighter frequency, 0.6px stroke, `#8B3048` at 20% opacity, rendered in an `` absolutely positioned at the card's bottom half. This micro-wave emerges via opacity transition over 380ms. **Category sigils:** Each licence category has a unique monoline sigil — a minimal single-weight glyph drawn on a 14×14px grid, reminiscent of a notarial mark or a hallmark stamp. These are SVG paths, not icons. The stroke is 1px, `#8B3048`. Categories include: software, creative, patent, trade-mark, data, and pharmaceutical. Each sigil is drawn with exactly two anchor points more than strictly necessary — the slight redundancy gives them the quality of hand-drawn marks rather than geometric constructions. **Status discs:** The 6px status indicator disc uses `border-radius: 50%` and no border. Its color is the only chromatic signal on the card that changes meaning. On hover the disc pulses with a `box-shadow` bloom of the same color, radius 0 to 8px, over 600ms, then holds. **Morph transitions:** Between states — initial load, card hover, card active — all shape transitions use CSS `clip-path` morphing. Cards enter the viewport (on scroll-trigger via IntersectionObserver) with `clip-path: inset(100% 0 0 0)` transitioning to `inset(0% 0 0 0)` over 560ms `cubic-bezier(0.16, 1, 0.3, 1)`. Each card in a row staggers by 80ms. The masthead rule draws from left to right via `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)` on load, 1.2s after fonts resolve. ## Prompts for Implementation Build this as **a sealed archive that opens card by card** — the experience of a curator lifting dossiers from a cabinet drawer, each one revealing a licensed property that might not remain available. The implementation must observe four disciplines: **Discipline 1 — The wave substrate is structural, not decorative.** The three background waves are drawn as a single SVG injected into `` at `position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0`. The wave paths are computed in JavaScript: three sinusoids with wavelength 420px, amplitude 48px, phase offsets of 0°, 120°, 240°. The entire viewport height is covered. `stroke-dasharray` is set to the full path length; `stroke-dashoffset` is animated from 0 to `−path-length` over 28 seconds, looping. No `requestAnimationFrame` — use a CSS `@keyframes` applied after the path length is read via `getTotalLength()`. **Discipline 2 — Cards are dossiers, not products.** Do not implement a shop-style card. There is no price, no "Add to cart", no rating. The card communicates: category, name, brief, and availability. The only actionable element is the card itself — the entire card is a link. On hover, the card lifts 4px on the Y-axis (`transform: translateY(-4px)`) with a `box-shadow: 0 12px 40px rgba(26, 10, 14, 0.7)`. The micro-wave appears. The status disc pulses. No other changes. **Discipline 3 — Masthead is ceremony, not conversion.** The masthead section is exactly `100vh`. It contains: the wordmark, the horizontal rule, and the single descriptor line. No button, no scroll-prompt arrow, no background animation. The background of the masthead is `#1A0A0E` with a very subtle radial gradient from `#221218` at center to `#1A0A0E` at edges — radius 60% 50%. This adds warmth to the center without breaking the flat-color discipline. The wordmark is centered both axes. The descriptor line appears 240ms after the wordmark via `opacity: 0` → `1`. The rule draws left-to-right 480ms after that. **Discipline 4 — Filtering is notarial, not faceted.** If filter tabs are needed (by category), they are rendered as a single horizontal row of 10px Commissioner SemiBold all-caps labels, spaced at 40px intervals, with the active category underlined by a 1px `#C8945A` rule that slides to the new position via CSS `left` transition rather than appearing/disappearing. No pill buttons, no dropdowns, no multi-select. The filter row sits 48px below the announcement ribbon, separated from the card grid by 32px. When filtering changes the visible cards, the departing cards use `clip-path: inset(0 0 100% 0)` over 280ms, and entering cards use the arrival animation from Discipline 1. **Do not implement:** pricing blocks, testimonials, hero CTAs, newsletter modals, sticky headers, mega-menus, social proof rails, counter animations for statistics, star ratings, badge clusters, or any element that would belong in a marketplace rather than an archive. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **swiss**, layout = **card-grid**, typography = **commissioner-versatile**, palette = **deep-burgundy**, patterns = **morph**, imagery = **minimal**, motifs = **wave-forms**, tone = **opulent-grand**. **Differentiators from every other design in the registry:** 1. **Commissioner as the sole typeface across all registers.** The frequency report shows `commissioner-versatile` at only 2% — the lowest of any named typographic system. Running the entire site — display at 200 weight, body at 400, labels at 600, identifiers at 300 — through one humanist grotesque is a structural choice that eliminates all typographic conflict and creates a tonal unity rare in the registry. No serif/sans pairing, no mono accent font. One family, seven weights, zero discord. 2. **Wave-forms as structural substrate rather than decorative overlay.** No other design in the registry uses sinusoidal wave-path animation as the fixed background layer that all content floats above. The motif choice (wave-forms) is at low frequency in the registry. Three-phase offset waves running at 0.4px stroke and 8% opacity are barely perceptible — they register subliminally as a sense that the page is alive without locating the source of that aliveness. 3. **Morph via clip-path inset as the sole transition vocabulary.** Pattern `morph` at low frequency, implemented here strictly as `clip-path: inset()` transitions — directional wipes that introduce and remove every element from the same visual axis (top or bottom edge). This gives the entire site a single motion grammar: everything enters from below, everything exits upward. No fades, no scales, no slides except along the vertical axis. The uniformity reads as institutional rather than animated. 4. **Deep-burgundy palette applied as archive-interior rather than luxury-brand.** The registry's burgundy applications typically lean toward wine-brand or fashion. Here the palette references the walls, leather, and paper of a private archive room: the darkest hue is the room itself, the mid-range is its furniture, the gilt is the candlelight. The palette is lit from within rather than spotlit from above, which produces a fundamentally different chromatic character despite using similar hue ranges. 5. **Card-grid executing as a dossier system.** Grid layouts in the registry typically present products or portfolio items. The dossier framing — category sigil, domain identifier, status disc, separating rule — borrows from archival cataloguing rather than e-commerce, making this the only card-grid in the registry oriented around institutional record-keeping rather than commercial display.