# Design Language for licence.broker ## Aesthetics and Tone licence.broker is the quiet middle-room of permission -- the place where the right to *do a thing* changes hands. Not a marketplace shouting deals, not a law firm in mahogany; a calm clearing-house where licences are matched, transferred, and held in trust. The visual language is **Bauhaus** in the most literal sense: form follows function, the grid is sacred, primary geometry does the talking, and ornament is replaced by honest structure. But this is Bauhaus cooled to room temperature -- the hard circle/square/triangle vocabulary of the Weimar workshop loosened into **organic blobs**: soft, amoeboid shapes that drift behind the rigid scaffolding like ink dropped in still water. The tension between the immovable grid and the slow-moving blob *is* the brand -- a broker stands between two parties; a blob settles between two straight lines. The tone is **minimal**: short sentences, generous air, nothing performative. No urgency, no scarcity timers, no "trusted by 10,000 firms" badge wall. The site behaves like a well-run intermediary -- it states what it does, shows you the shape of the transaction, and gets out of the way. Mood adjectives: deliberate, weightless, structural, faintly playful in the way a Calder mobile is playful. Inspiration touchstones: Herbert Bayer's universal alphabet, Josef Albers' nested squares, Jean Arp's biomorphic reliefs, the negative space of a Müller-Brockmann poster, and the unhurried choreography of a paper changing desks. ## Layout Motifs and Structure **Primary structure: stacked-sections** -- the page is a vertical stack of full-bleed panels, each one a self-contained Bauhaus composition occupying ~100vh, separated by nothing but a 2px hairline rule in ink-black. There is no sticky chrome, no floating nav; navigation, where it exists, is a single column of section names set flush-left in the first panel and never seen again. You descend the stack the way you'd flip through a portfolio of plates. The underlying grid is a **strict 12-column modular grid** with a baseline rhythm of 8px. Every element snaps to it -- no element is allowed to float free of the grid *except the blobs*, which are deliberately, conspicuously off-grid (their bounding boxes ignore column gutters, they bleed past margins, they overlap section rules). This is the one rule the design breaks, and it breaks it on purpose, every time, so the break reads as intentional rhythm rather than error. Per-section composition principles: - **Panel 1 (Masthead):** The word `licence.broker` set huge, flush to the left margin, baseline-aligned to a horizontal rule that runs full width. A single large blob (analogous warm tone) sits in the upper-right quadrant, partially clipped by the viewport edge. The ISO date sits small, flush-right, on the rule. Three tiny primitives -- a filled circle, an outline square, a triangle -- stack vertically in the far-left gutter as a kind of colophon. - **Panel 2 (What a broker is):** Two-column asymmetric split, 5/7. Left column: a short definition, ragged-right, large leading. Right column: a diagram of the brokerage -- two stacked rectangles ("holder" / "seeker") with a blob nestled in the gap between them, the blob morphing on scroll as if absorbing and re-emitting the licence. - **Panel 3 (The transfer, as motion):** Single full-width band. A horizontal track of evenly spaced nodes (squares); a small filled circle travels left-to-right along the track as you scroll through the panel, pausing at each node. Behind it, a long lozenge-blob stretches and contracts. Caption text sits below the track in a single centered line. - **Panel 4 (What we hold):** A 3x3 modular bento of equal squares -- but only 4 of the 9 cells are filled (with flat color or a primitive); the other 5 are empty grid cells left visible as faint outlines. This is "ma" by way of Dessau -- the empty cells are content. A blob drifts diagonally across the whole grid, dimming the cells it passes over via mix-blend-mode. - **Panel 5 (Coda):** Near-empty panel. The three primitives from Panel 1 return, now arranged into a single composition -- circle, square, triangle overlapping at center. One last blob exhales behind them, very slow. A single line of text sits on the bottom rule. The hairline at the panel's foot is the only thing that "closes" the page. No section uses cards-as-CTA, no pricing table, no stat grid. Where numbers would normally appear (counts, percentages), the design substitutes *shape* -- a row of squares, a partially filled bar -- so quantity is felt structurally rather than read. ## Typography and Palette **Typography -- display-bold lineage:** - **Display / Masthead / Section Numerals:** `"Archivo Black"` (Google Fonts, weight 400) -- a single ultra-heavy grotesque weight with closed apertures and relentless even color; it reads as a *block* before it reads as a word, which is exactly the Bauhaus instinct. Used for `licence.broker` at `clamp(3.5rem, 11vw, 10rem)`, set in lowercase (Bauhaus rejected capitals), letter-spacing `-0.02em`, line-height `0.92`. Also used for the big section labels. - **Sub-display / Diagram labels:** `"Archivo"` (Google Fonts, weights 600/700) -- the same superfamily at a workable weight, uppercase, letter-spacing `0.18em`, for the tiny labels that annotate diagrams ("HOLDER", "SEEKER", "IN TRUST"). - **Body / Prose:** `"Inter"` (Google Fonts, weights 400/500) -- neutral, almost invisible, set at `1.0625rem`–`1.25rem` with line-height `1.65`, ragged-right, never justified. Body text is always set in short blocks, never wider than ~60 characters. - **Micro / Colophon / ISO date:** `"JetBrains Mono"` (Google Fonts, weight 400) -- monospace, `0.75rem`, uppercase, letter-spacing `0.1em`, for the date stamp, the section index, and any structural annotations. The monospace ticks read like the marks an honest broker makes in a margin. **Palette -- analogous, anchored in warm earth-to-amber:** - `#1c1a17` — **Ink** (near-black, faintly warm; all text, all hairlines, all primitive outlines) - `#f4ede1` — **Paper** (warm bone; the default background of every panel) - `#e2622e` — **Vermilion** (the primary Bauhaus red-orange; one filled primitive per panel, the traveling circle, key blobs) - `#e8a020` — **Amber** (analogous neighbor; secondary blobs, fills in the bento) - `#c4451f` — **Brick** (analogous, deeper; the rare third accent, blob shadows, hover states) - `#d8cab2` — **Clay** (a desaturated mid-tone derived from Paper; empty bento cell outlines, the back-most blob, dividers within a panel) The whole site lives in a 30-degree wedge of the color wheel from brick-red through vermilion to amber, on warm paper, with warm-black ink. No blue, no cool grey, no white. Color is used in *flat fills only* -- no gradients except the optional 4% inner luminosity on a blob to suggest it's a soft body and not a sticker. ## Imagery and Motifs **Core motif 1 — The Broker's Gap.** Recurring diagram: two stacked rectangles with a deliberate gap between them, and a blob living in that gap. It appears at masthead scale, at diagram scale in Panel 2, and abstracted into the bento in Panel 4. The blob in the gap is the licence in transit -- never owned by either rectangle, always held in the middle. **Core motif 2 — Three Primitives as Colophon.** A filled circle, an outline square, an outline triangle. They appear stacked in the masthead gutter (tiny), scattered as section markers, and finally composed into a single overlapping figure in the coda. They are the Bauhaus alphabet of shape, and they function here as the site's signature -- the way a notary's seal recurs. **Core motif 3 — Organic Blobs.** Hand-feeling amoeboid forms (4–7 control points, smooth Catmull-Rom-style curves), rendered as flat-filled SVG paths in palette colors. Rules: blobs always sit *behind* the grid content; blobs always animate slowly (8–20s loops or scroll-driven morphs) -- never twitchy; blobs ignore the grid (bleed past margins, overlap rules); never more than two blobs visible per panel; blobs occasionally pass *over* content using `mix-blend-mode: multiply` so they tint rather than obscure. The blobs are the only curved, only "soft", only off-grid thing in the entire design -- their scarcity is what makes them read. **Core motif 4 — The Hairline Ledger.** Every panel boundary is a single 2px ink rule running full bleed. Within panels, sub-divisions use 1px Clay rules. These rules are the spine -- they never move, never animate, never break (except where a blob crosses them). They give the floating composition a place to stand. **Core motif 5 — The Traveling Circle.** A single small vermilion disc that, in Panel 3, moves along a track of square nodes as the user scrolls -- the licence physically changing hands. It's the only literal "narrative" element; everything else is static composition. No photography. No icon library. No stock illustration. No mesh gradients. Everything is drawn from: rectangles, the three primitives, hairlines, type, and blobs. That closed vocabulary is the discipline. ## Prompts for Implementation Build a full-screen, scroll-driven narrative of **five stacked 100vh panels** on warm Paper (`#f4ede1`), each panel a fixed Bauhaus composition snapped to a 12-column / 8px-baseline grid, panels separated only by full-bleed 2px Ink rules. No sticky nav, no footer chrome, no buttons styled as CTAs. **Entry choreography (Panel 1).** Open on bare Paper. After ~400ms, the full-width masthead rule wipes in left-to-right (`clip-path` or `scaleX`, 600ms, ease-out). As the rule lands, `licence.broker` in Archivo Black drops onto its baseline from `translateY(-32px)`, opacity 0→1, 500ms, gentle spring. 200ms later the ISO date (JetBrains Mono, flush-right on the rule) fades in. Last, the upper-right blob inflates from `scale(0.6)` to `scale(1)` over 1.2s with a soft ease, already drifting on its idle loop. The three gutter primitives pop in one at a time, 80ms apart, with a tiny `scale` overshoot. **Scroll behavior.** Use the IntersectionObserver / scroll-progress pattern (this is the underused-but-fitting "scroll-triggered" approach -- lean on it, but keep motions slow and few). Each panel reveals its elements with a short stagger (60–90ms between siblings, `translateY(20px)` + opacity, 500ms ease-out) as it crosses ~25% into the viewport. Reversible -- scrolling back up resets cleanly. **Blob animation.** Implement blobs as inline SVG `` with a small set of `d` keyframes; tween between them using `requestAnimationFrame` (lerp the path data point-by-point, or use a simple morph: precompute 3–4 blob shapes with equal point counts, cross-fade `d`). Idle loop: 12–20s, ease-in-out, back and forth. Scroll-coupled blobs (Panels 2 & 3): map scroll progress within the panel to interpolation `t` between two blob shapes so the blob "breathes" as you move through. Always `will-change: transform` sparingly; blobs are `position: absolute`, large, low z-index, sometimes `mix-blend-mode: multiply`. **Panel 3 traveling circle.** A horizontal track (`
` with N square nodes flex-spaced). On scroll progress through this panel, position a small vermilion disc via `left: calc(progress * 100%)`; snap-ease it toward the nearest node (so it appears to pause at each). Behind the track, a long lozenge-blob whose `scaleX` follows the disc's position. One centered caption line below, no more. **Panel 4 bento.** CSS Grid, `repeat(3, 1fr) / repeat(3, 1fr)`, square cells. Fill 4 cells with flat color or a centered primitive; leave 5 cells as `1px solid #d8cab2` outlines, empty -- do not put text in them. A blob `position: absolute` over the whole grid, slowly translating diagonally on a long loop, `mix-blend-mode: multiply` so it darkens cells it overlaps. **Coda (Panel 5).** Mostly empty Paper. Center the three primitives, overlapping (circle filled vermilion, square outline ink, triangle outline brick), assembled as one figure -- have them glide together into this arrangement from slightly scattered start positions as the panel enters, then settle and stop. One slow blob exhales behind them (single 18s loop). One line of Inter text on the bottom rule. The bottom 2px rule is the final element -- nothing after it. **General constraints.** No parallax-of-everything -- only blobs and the traveling circle move with scroll; type and rules are still. No counter animations, no stat grids, no pricing, no testimonial wall, no contact form styled as a hero. Respect `prefers-reduced-motion`: blobs hold a static pleasing shape, reveals become instant, the traveling circle jumps node-to-node without easing. Performance is not a concern here -- favor the richest version of the blob morphs. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **The grid-vs-blob dialectic as the entire concept.** Most Bauhaus-flavored designs in the set use the primitives decoratively; here the *only* curved, soft, off-grid element is the blob, and its job is to literally personify "the thing held in the middle" between two rigid parties. The design is built on exactly one rule and exactly one place it's broken -- and it's broken on purpose, every panel. 2. **Brokerage rendered as a moving disc on a track, not as a funnel or a marketplace.** Panel 3's traveling-circle-along-square-nodes is a bespoke literalization of "a licence changing hands" -- no pricing tiers, no listings grid, no "browse" UI. The transaction is shown as choreography, not commerce. 3. **Quantities replaced by shape.** Anywhere a normal site would show a number, count, or percentage, this one shows a row of squares or a partly-filled bar. There is not a single animated counter on the page (deliberately bucking the 91%-prevalent `counter-animate` pattern). 4. **Closed five-element vocabulary.** Rectangles, three primitives, hairlines, Archivo Black type, blobs -- nothing else. No photography (bucking the 64% photography norm), no icon set, no gradients beyond a faint 4% blob luminosity (bucking the 96% gradient norm), no cool colors at all -- the whole palette is a 30° analogous wedge of warm earth-to-amber on bone paper. 5. **Stacked full-bleed panels with zero persistent chrome.** No sticky nav, no floating CTA, no footer -- you read it like a stack of poster plates, each a complete composition, joined only by an ink hairline. **Chosen seed/style:** aesthetic: bauhaus, layout: stacked-sections, typography: display-bold, palette: analogous, patterns: scroll-triggered, imagery: abstract-shapes, motifs: organic-blobs, tone: minimal. **Avoided patterns from frequency analysis:** corporate aesthetic (92%), centered layout (used only inside the coda, not as page structure), gradient palette (96%), warm-gradient default — kept flat fills only; counter-animate (91%) — none; parallax-everything (69%) — restricted to blobs + traveling circle; mono-typography-as-the-whole-look (94%) — mono is demoted to micro-annotation only; mysterious-moody tone (94%) — replaced with minimal/structural; photography imagery (64%) — none. Leaned deliberately into the underused: bauhaus (3%), display-bold typography (2%), abstract-shapes imagery (0%), organic-blobs motif (rare), analogous palette (8%), stacked-sections (13%).