# Design Language for licence.broker

## Aesthetics and Tone

licence.broker inhabits the visual world of a high-security document vault in a Scandinavian government archive -- the kind of place where polished steel filing cabinets line walls of pale birch, where important papers are sealed with embossed wax into leather-bound dossiers, and where the fluorescent lights have been replaced with a single row of recessed fixtures casting long, deliberate shadows across brushed aluminum surfaces. The aesthetic is **Scandinavian Noir** -- the functional clarity of Nordic design colliding with the atmospheric tension of a Cold War intelligence bureau. Nothing is decorative for its own sake; every element carries the weight of officialdom, the gravity of a stamp pressed into hot wax, the quiet menace of a redacted paragraph.

The mood is mysterious and moody, but not gothic or theatrical. It is the mystery of bureaucracy -- the unsettling feeling that behind every clean surface, behind every perfectly aligned grid module, there are layers of information you are not authorized to see. The tone borrows from the visual language of declassified documents: things partially revealed, text that trails off into black bars, margins annotated in fading pencil. There is beauty here, but it is the cold beauty of precision machinery, of a chrome lock mechanism clicking into place, of paper that has aged to the exact shade of institutional authority.

Inspiration sources: the production design of Nordic noir television (Forbrydelsen, Bron/Bransen), the interior photography of Kinfolk magazine stripped of its warmth, the typographic identity of the Swiss Federal Railways reinterpreted through tarnished chrome, and the archival photography of government patent offices from the 1960s.

## Layout Motifs and Structure

The layout follows a **modular-blocks** architecture -- a strict grid of rectangular modules that lock together like the compartments of a safe-deposit wall. Each module is a self-contained information unit with clearly defined borders, but unlike a typical card grid, the modules here vary dramatically in proportion: some are tall and narrow like filing drawers, others are wide and squat like archival flat-files, and a few are perfectly square like inspection windows. The grid never repeats the same proportion sequence in adjacent rows.

**Spatial Architecture:**

- The viewport opens as a single full-screen monolith: a chrome-tinted surface with the domain name embossed into it, floating above a faintly visible texture of aged paper. No navigation, no menu chrome. Just the name and a slow, almost imperceptible downward-drifting Lottie animation of dust motes or falling paper fragments.

- On scroll, the monolith fractures into the modular grid. Blocks slide into position from off-screen edges -- some from the left, some from the right, one or two rising from below -- each with a different timing delay that creates a choreographed assembly effect, like watching a vault door's locking bolts engage one by one.

- The grid uses a 12-column system at desktop, collapsing to 6 at tablet and 2 at mobile. Column gaps are 2px -- almost zero, creating the impression that modules are pressed tightly together like safety deposit boxes. Modules have no border-radius; every corner is sharp, every edge precise.

- Vertical rhythm is governed by a baseline unit of 8px. Module heights snap to multiples of this unit: 160px, 240px, 320px, 480px. This mathematical rigidity reinforces the archival, institutional feel.

- Between major content sections, a full-width "divider module" spans all columns -- a thin band (40px tall) of brushed chrome gradient that functions as a visual chapter break, like the metal rails between rows of deposit boxes.

- The final section of the page reverses the assembly: modules slide away one by one, leaving the viewport empty except for a single centered element -- a Lottie animation of a wax seal being pressed, followed by a fading domain watermark.

**Negative Space Philosophy:**
Negative space is used sparingly and with purpose. White space does not mean openness here -- it means redaction. Empty areas feel like something was removed, not like breathing room. The background in empty zones shows faint paper-aged texture, as if the blank space is actually a document with its content stripped away.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Oswald" (Google Fonts) -- a condensed, high-impact sans-serif that channels the authority of governmental signage and military stencils. Used at 4rem-8rem for primary display text, always in uppercase with letter-spacing of 0.08em. Weight 700 for maximum density. The condensed proportions allow oversized text to occupy modular blocks without overflow, creating the visual effect of text stamped onto metal plates.

- **Secondary Headlines:** "Cormorant Garamond" (Google Fonts) -- an elegant, high-contrast serif with sharp, almost weaponized serifs that evoke engraved certificate lettering. Used at 1.8rem-3rem, weight 600, in sentence case with tight letter-spacing (-0.01em). This typeface provides the "official document" gravitas that balances Oswald's industrial bluntness.

- **Body Text:** "Work Sans" (Google Fonts) -- a clean, geometric sans-serif with a subtle humanist warmth that keeps body copy legible against chrome and dark backgrounds. Used at 0.95rem-1.1rem, weight 400, with line-height 1.65. The geometric structure aligns perfectly with the modular grid system.

- **Monospace / Data Labels:** "IBM Plex Mono" (Google Fonts) -- used for reference numbers, timestamps, metadata labels, and any text that should feel like it was typed on an institutional typewriter. Used at 0.8rem-0.9rem, weight 300, in uppercase with letter-spacing 0.12em. Always rendered in the mid-chrome color (#9A9FAF) to suggest secondary, bureaucratic information.

**Palette:**

The palette is built around chrome and metallic tones -- no warmth, no earth, no organic color. Everything is the temperature of polished steel under fluorescent light.

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Chrome White | Bright chrome highlight | #E8ECF1 | Primary background for light modules, text on dark surfaces |
| Gunmetal | Dark chrome base | #2B2D33 | Primary background for dark modules, hero surfaces |
| Brushed Steel | Mid-tone metallic gray | #6B7280 | Secondary text, divider lines, module borders |
| Tarnished Silver | Warm-leaning metallic | #9A9FAF | Metadata text, captions, timestamps, IBM Plex Mono text |
| Aged Parchment | Yellowed paper tone | #D4C9B0 | Paper-aged texture overlays, background noise, watermarks |
| Deep Obsidian | Near-black with blue undertone | #14151A | Full-bleed dark sections, text on light surfaces |
| Seal Red | Dark, oxidized crimson | #8B1A1A | Wax seal motif, critical labels, sparse accent |
| Patina Green | Oxidized copper tone | #4A6B5A | Secondary accent for status indicators, subtle highlights |

**Gradient Usage:**
- Chrome sweep: linear-gradient(135deg, #2B2D33, #6B7280, #E8ECF1) -- used on divider modules and the hero surface to simulate brushed metal catching light at an angle.
- Paper fade: linear-gradient(to bottom, #D4C9B0 0%, transparent 40%) -- overlaid on modules to create the impression of aged document edges.

## Imagery and Motifs

**Paper-Aged Textures (Primary Imagery):**
The dominant visual layer across the site is aged paper texture -- not the crisp, clean paper of a new notebook, but the foxed, yellowed, slightly crinkled paper of a 50-year-old government filing. This texture is applied as a CSS background-image using a seamless tileable pattern at 15-20% opacity over module backgrounds. The texture shifts subtly between modules: some show heavier foxing (brown spots), others show faint fold creases, and a few display the ghost impression of rubber stamps that have bled through from the other side of the paper.

Specific techniques:
1. **Foxing Pattern:** A procedural noise texture generated as an SVG filter (feTurbulence + feColorMatrix) applied to `.module--aged` elements. The turbulence frequency is set to 0.03 with 4 octaves, producing organic brown spots that look like moisture damage on old paper.
2. **Fold Creases:** Thin lines of darker coloration (rgba(0,0,0,0.06)) positioned diagonally across certain modules using CSS linear-gradient, simulating where a document was once folded.
3. **Bleed-Through Stamps:** Faintly visible reversed text ("CLASSIFIED", "APPROVED", "VOID") rendered at 3-5% opacity in Oswald uppercase, rotated 15-30 degrees, positioned as pseudo-element overlays on select modules. These should be barely perceptible -- visible only when the viewer pauses and looks closely.

**Marble-Classical Motifs:**
Interspersed throughout the modular grid are decorative elements drawn from classical marble sculpture and architectural ornamentation:

1. **Cornice Lines:** Horizontal SVG borders at the top of key modules that replicate the profile of a classical marble cornice -- a sequence of ovolo, cavetto, and fillet moldings rendered as a 12px-tall vector strip in the Brushed Steel color (#6B7280). These replace conventional horizontal rules and give section boundaries an institutional grandeur.

2. **Acanthus Corners:** In the four corners of the hero module, faint acanthus leaf scroll patterns rendered as SVG paths at 8% opacity in Tarnished Silver (#9A9FAF). These are not decorative wallpaper -- they are the kind of restrained classical ornament found on the header of an official government bond or a banking certificate.

3. **Column Fluting Dividers:** Vertical dividers between certain modular blocks use a subtle CSS repeating-gradient that mimics the fluting of a Doric column -- alternating 1px ridges of light and shadow that create a three-dimensional channel effect between modules.

4. **Marble Veining Background:** One or two "feature modules" per page use a CSS-only marble veining effect as their background: multiple layered radial-gradient and linear-gradient passes in varying opacities of #E8ECF1, #D4C9B0, and #6B7280, producing organic vein patterns reminiscent of Carrara marble. These modules contain the most important content and are visually distinguished as premium display surfaces.

**Lottie Animations:**
Three bespoke Lottie animation moments punctuate the page experience:

1. **Hero Dust Motes:** On load, a Lottie animation of slowly drifting particles overlays the hero section -- tiny paper fragments and dust motes floating downward at varying speeds, catching light as they rotate. Duration: infinite loop, 30 seconds per cycle. Opacity: 40%.

2. **Wax Seal Press:** At the page's conclusion, a Lottie animation shows a wax seal being pressed and lifted: the wax spreads, the seal makes contact, pressure is applied, and the seal lifts to reveal an embossed monogram "LB" (for licence.broker). Duration: 3 seconds, plays once on scroll-trigger.

3. **Stamp Impact:** When a user scrolls into a key content module, a Lottie animation shows a rubber stamp striking paper -- the stamp descends, makes contact with a slight bounce, and lifts to reveal a mark. This replaces conventional fade-in entrance animations and reinforces the bureaucratic motif. Duration: 0.8 seconds, plays once per module.

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The site opens to a full-viewport chrome surface -- the Gunmetal color (#2B2D33) with the brushed-metal gradient sweeping diagonally across it. The domain name "licence.broker" is set in Oswald at 6rem, uppercase, letter-spaced at 0.08em, centered vertically at 40% from the top. The text is rendered in Chrome White (#E8ECF1) with a subtle text-shadow that simulates embossing: `text-shadow: 1px 1px 0 #14151A, -1px -1px 0 rgba(255,255,255,0.1)`. Below the domain name, a single line in Cormorant Garamond italic at 1.2rem reads a tagline in Tarnished Silver (#9A9FAF). Behind everything, the Lottie dust-mote animation drifts downward. The only scroll affordance is a thin vertical line (1px, #6B7280) extending from the bottom center of the viewport, slowly pulsing in opacity between 30% and 80%.

**Module Assembly Animation:**
As the user scrolls past the hero, the modular grid assembles itself block by block. Each module slides in from its nearest screen edge using CSS transform with a cubic-bezier(0.16, 1, 0.3, 1) easing -- a sharp deceleration that mimics the satisfying click of a mechanical lock. Modules arrive in a staggered sequence with 80ms delay between each, starting from the top-left and cascading diagonally toward the bottom-right. Each module's paper-aged texture fades in 200ms after the module reaches its final position, creating a two-phase reveal: first the chrome container, then the document surface within it.

**Interactive Module Hover States:**
When a user hovers over a module, three things happen simultaneously: (1) the module lifts by 2px via box-shadow deepening from `0 1px 2px rgba(0,0,0,0.2)` to `0 4px 12px rgba(0,0,0,0.35)`, (2) the paper-aged texture opacity increases from 15% to 25%, making the foxing and fold creases more visible as if the document is being pulled closer for inspection, and (3) any bleed-through stamp text increases from 4% to 10% opacity, becoming briefly legible. On hover-out, all three transitions reverse over 400ms.

**Scroll-Triggered Stamp Animation:**
At two or three key content modules, the Lottie stamp animation triggers on entering the viewport (IntersectionObserver with threshold 0.6). The stamp replaces the usual fade-in entrance animation. Content within the module is initially invisible (opacity: 0, transform: scale(0.97)), and becomes visible 0.4s after the stamp animation completes, as if the stamp's impact has "authorized" the content to appear.

**Marble Feature Module Treatment:**
The one or two marble-veined feature modules should be implemented with 6+ layered CSS gradients to achieve organic veining. These modules should have a slightly different grid behavior: they span 8 of 12 columns and are centered, breaking the tight edge-to-edge pattern of other modules. Their content is set in Cormorant Garamond at 1.4rem with increased line-height (1.8) and wider letter-spacing (0.02em), giving the text a ceremonial, inscribed quality.

**Footer Dissolution:**
The page ends with the reverse of the assembly: modules slide away one at a time (last-in, first-out order), each departing toward its nearest screen edge. After all modules are gone, the viewport is empty Gunmetal, and the wax seal Lottie plays center-screen. When the seal animation completes, the "LB" monogram remains as a static SVG, slowly fading to 30% opacity over 5 seconds, accompanied by the domain name reappearing in Cormorant Garamond italic at 1rem below the seal.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero image sliders, cookie banners as design elements, social media icon rows, hamburger menus. The navigation (if any) should be a single inconspicuous monogram or a thin top bar with inline text links in IBM Plex Mono at 0.75rem.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Chrome-Metallic Palette at 0% Frequency:** No other design in the portfolio uses a chrome-metallic palette. While 100% of designs use warm palettes and 67% use muted tones, this design is deliberately cold, industrial, and metallic -- the visual temperature of polished stainless steel under fluorescent light. There is zero warmth in the primary palette; even the Aged Parchment (#D4C9B0) and Seal Red (#8B1A1A) accents are muted and institutional rather than inviting.

2. **Lottie Animation as Narrative Device (0% Frequency):** While 97% of designs use scroll-triggered animations and 80% use parallax, no design uses Lottie animations as a primary pattern. Here, Lottie is not decorative but narrative -- the dust motes establish atmosphere, the stamp impact authorizes content revelation, and the wax seal provides ceremonial closure. Each Lottie moment is a storytelling beat, not an embellishment.

3. **Scandinavian Noir Aesthetic Fusion:** The scandinavian aesthetic appears at only 5% frequency and is never combined with mysterious-moody tone (2%). This design fuses Nordic functionalism's geometric clarity with the atmospheric tension of noir cinema, creating a visual language that is simultaneously clean and unsettling -- like an IKEA showroom designed by David Fincher.

4. **Bureaucratic Paper-Aged Imagery (4% Frequency):** Paper-aged imagery is rare in the portfolio, and when used elsewhere, it typically serves a nostalgic or craft-oriented purpose. Here, aged paper is recontextualized as government documentation -- foxed and yellowed not from charm but from decades in a filing cabinet. The bleed-through stamps ("CLASSIFIED", "APPROVED", "VOID") transform decorative texture into narrative content.

5. **Marble-Classical Motifs in a Modern Grid (4% Frequency):** The marble-classical motif category is underused, and this design deploys classical architectural ornament (cornice profiles, acanthus scrolls, column fluting, marble veining) not as historicist pastiche but as institutional authority symbols. The classical elements are rendered in chrome tones at low opacity, making them feel like watermarks on official documents rather than decorative revival.

6. **Modular-Block Assembly Choreography:** The modular-blocks layout (9% frequency) is animated here with a specific mechanical metaphor -- vault-door locking bolts engaging sequentially. This is distinct from generic stagger animations because the easing curve (sharp deceleration) and the 2px gap between modules create a physical, mechanical sensation rather than a smooth, organic one.

**Documented Seed / Style:**
```
aesthetic: scandinavian
layout: modular-blocks
typography: oversized-display
palette: chrome-metallic
patterns: lottie-animation
imagery: paper-aged
motifs: marble-classical
tone: mysterious-moody
```

**Avoided Overused Patterns:**
- playful aesthetic (96%) -- replaced with mysterious-moody
- centered layout (99%) -- replaced with modular-blocks
- warm palette (100%) -- replaced with chrome-metallic (cold, zero warmth)
- scroll-triggered as sole animation (97%) -- supplemented with Lottie animation as primary pattern
- mono typography (99%) -- replaced with oversized-display (Oswald condensed at 4-8rem)
- friendly tone (98%) -- replaced with mysterious-moody institutional authority
- vintage motifs (80%) -- replaced with marble-classical (institutional rather than nostalgic)
- minimal imagery (94%) -- replaced with paper-aged (textured, layered, atmospheric)
- parallax as primary pattern (80%) -- replaced with Lottie-driven narrative moments
<!-- DESIGN STAMP
  timestamp: 2026-03-10T11:59:03
  seed: unspecified
  aesthetic: licence.broker inhabits the visual world of a high-security document vault in a ...
  content_hash: 6b50e7272c1d
-->