# Design Language for licensor.directory ## Aesthetics and Tone licensor.directory is the quiet ledger of permission -- a public index of the people and institutions who hold the keys to other people's work: music publishers, stock-photo cooperatives, patent pools, font foundries, archival estates, sample-clearance houses, open-source stewardship councils. The site treats "the license" not as legalese but as a small, fragile artifact: a stamped card in a card catalog, a microfiche frame, a photostat carbon. The mood is **nostalgic-retro** in the most literal sense -- the warm melancholy of a midcentury rights-and-permissions department after closing time. Green-glass banker's lamps. A rolodex left mid-spin. The hum of a fluorescent tube over a steel desk. Coffee rings on a clearance form. The dominant texture is **grain** -- everything sits under a soft analog photographic grain, the kind you get from pushed Tri-X film or a tired flatbed scanner. Nothing is crisp; edges have a 1px halation bloom; blacks are never pure black but a deep ocean-bottle green-blue silt. Over this we layer **bokeh** -- defocused circular highlights drifting in the deep background like dust motes caught in a projector beam, or the out-of-focus brass of filing-cabinet handles. And cutting against all this softness: occasional **glitch** -- a horizontal RGB tear, a scanline jump, a momentary datamosh on a card as it flips -- because a license is also a thing that can lapse, expire, get revoked, corrupt. The glitch is the anxiety under the nostalgia. The tone of voice in copy is dry, archival, slightly wistful: "Entry no. 0447. Maintained since 1971. Renewed 53 times." It speaks like a librarian who has cataloged permission for forty years and finds it quietly beautiful. ## Layout Motifs and Structure **Primary layout: hero-dominant.** The first viewport is the entire argument. A single full-bleed hero -- deep ocean-deep ground, drifting bokeh, heavy grain -- holds one enormous monospace word, **PERMISSION** (or the rotating verb: GRANT / CLEAR / LICENSE / RENEW), set at clamp(3.5rem, 13vw, 13rem), tracked tight, with a thin blinking caret after it like a terminal prompt that has been waiting since 1974. Beneath, in small mono caps, a single line: `THE PUBLIC INDEX OF WHO HOLDS THE KEYS`. The hero occupies 100vh and 100vw; it does not share space with cards, stats, or buttons. Scroll is the only invitation. Below the hero the structure becomes a **vertical card catalog**: full-width horizontal "drawer" sections, each one a category of licensor (Music · Image · Type · Patent · Archive · Code · Performance · Trademark). Each drawer, when it enters the viewport, "slides open" -- the section content translates in from the left as if pulled on a runner, with a faint mechanical overshoot. Inside each drawer, individual licensor entries are rendered as **catalog cards**: rectangular, slightly off-white-green, with a punched circular hole at the top center (the rod hole), a typed header line, a hand-stamp date, and a hairline rule grid. Cards sit in an asymmetric staggered column -- not a tidy grid, but the slight misalignment of cards that have been thumbed through. Spatial rules: generous margins (min 8vw desktop, breathing like a ledger page), a faint baseline grid visible at 6% opacity in the ocean-foam color, and a persistent thin left-margin rule running the full height of the document like the red line on legal paper. The footer is a single "DATE DUE" card -- a literal library date-due slip with the last-updated timestamp rubber-stamped across it at a 4-degree tilt. There are **no pricing blocks, no stat-grids, no CTA banks.** Navigation is a minimal fixed strip: just the entry-number counter (`ENTRIES: 0447`) and a single mono link, `[ submit a licensor ]`, set like a card-catalog tab. ## Typography and Palette **Typography -- monospace-led, as the seed demands.** - **Display / Hero / Headings:** "JetBrains Mono" (Google Fonts, weights 700/800). Used for the giant hero word and all section "drawer" labels. All-caps for labels with 0.18em tracking; the hero word tracked at -0.01em so the letters nearly touch like keys on a typebar. The slab-ish terminals of JetBrains Mono read like an IBM Selectric. - **Body / Card Text / Captions:** "IBM Plex Mono" (Google Fonts, weights 400/500, plus 400 italic). The workhorse -- catalog card headers, dates, entry descriptions. Its slightly humanist warmth keeps long mono passages from feeling cold. Italic used for the wistful editorial asides ("*formerly the Pan-American Mechanical Rights Bureau, est. 1948*"). - **Accent / Stamps / Numerals:** "Special Elite" (Google Fonts, weight 400) -- a battered typewriter face -- used exclusively for the rubber-stamp elements: dates, "RENEWED", "DATE DUE", entry numbers stamped on cards. Always rendered at a small tilt (3-5deg), in a faded ink color with slightly broken edges (via SVG turbulence/displacement filter) so each stamp looks individually pressed. Line-height is generous (1.7) for body mono; letter-spacing 0 for body, positive for caps. No font smaller than 13px. **Palette -- ocean-deep, the green-bottle midnight of an old reading room.** - `#0a1f24` -- **Abyss Bottle** (primary background -- a near-black saturated with deep teal-green, the color of a sealed glass bottle at the bottom of cold water) - `#10343a` -- **Drawer Slate** (section panels, raised card-catalog drawer faces) - `#1c4f54` -- **Banker Glass** (secondary surfaces, the green of the lampshade lit from within) - `#3c8a86` -- **Verdigris Hum** (the fluorescent-tube glow, primary cool accent, faint bokeh tint) - `#7fb8ad` -- **Foam Line** (hairline rules, baseline grid, secondary text on dark) - `#e8e4d4` -- **Carbon Card** (the off-white-green of an aged index card -- the card surface color) - `#cdbf9a` -- **Manila Edge** (card edges, drawer label tabs, warm neutral) - `#b8472f` -- **Stamp Oxblood** (the rubber-stamp ink -- a desaturated brick red, the ONLY warm contrast, used sparingly and only on stamps and the blinking caret) - `#f2efe2` -- **Catalog Paper** (highest-value text on dark, the typed-letter white) Grain overlay: a tiled SVG `feTurbulence` (baseFrequency ~0.9) at 7-10% opacity, `mix-blend-mode: overlay`, sitting above everything. Halation: every large text element gets a tight `text-shadow: 0 0 12px rgba(60,138,134,0.25)` so it blooms like phosphor. ## Imagery and Motifs 1. **Bokeh field (background, generative CSS/SVG):** 12-20 soft-edged circles of varying size (40-260px), filled with radial gradients in Verdigris Hum and Banker Glass at 8-22% opacity, heavily blurred (`filter: blur(40px)`), drifting on extremely slow independent loops (60-140s) with parallax. They are the dust in the projector beam, the defocused brass of cabinet handles. Never sharp, never the foreground. 2. **The catalog card:** the central recurring object. Rectangular Carbon Card surface, a punched circular hole top-center, a faint typed-grid of hairlines, a Manila Edge 1px border, a soft drop shadow that suggests a slight lift off the drawer. Each card carries: entry number (stamped, tilted, Special Elite), licensor name (IBM Plex Mono 500), what they license (one mono line), "maintained since" year, and a renewal count rendered as a row of tiny stamp-marks. On hover the card lifts and tilts ~2deg; occasionally (random, ~1-in-8 hovers) it suffers a 200ms RGB-split glitch and re-settles. 3. **Leaf-organic motif (the living counterpoint):** licenses are *renewed* -- they grow, they have seasons. So a recurring decorative element is a single thin botanical line-drawing: a fern frond, a ginkgo leaf, an ivy tendril, drawn as a one-stroke SVG path in Foam Line color. These appear in section corners, growing along the left margin rule, and as the "renewal" indicator on cards (each renewal adds a small leaflet to a stem). On scroll-into-view the leaf path **draws itself** (stroke-dashoffset animation) like something unfurling. The organic line is the only curve in an otherwise rectilinear, gridded world -- the green thing growing through the filing cabinet. 4. **Scanlines & glitch:** very faint horizontal scanlines (1px Foam Line at 3% opacity, every 3px) over dark sections -- the CRT-microfiche-reader feel. Glitch events are rare and meaningful: triggered on card hover (rarely), on the hero verb-rotation, and once when the page first loads (the hero word "boots up" with a 400ms decode/datamosh effect resolving into clean type). 5. **Stamp library:** SVG rubber-stamp marks (circular "RENEWED", rectangular date boxes, "ENTRY", "MAINTAINED", "ON FILE") rendered in Stamp Oxblood with a displacement-filtered rough edge and slight tilt, each at slightly different opacity (78-92%) and rotation so no two read identically. 6. **The rod-hole grid:** as a section background flourish, a row of small punched circles (the holes catalog cards hang on) marching across drawer dividers -- a quiet rhythmic motif borrowed straight from a real card-catalog drawer. ## Prompts for Implementation **The opening (full-screen narrative).** Page loads on Abyss Bottle black. For 600ms, nothing but grain and the faint hum of bokeh fading up from 0 to full. Then a thin Verdigris Hum line draws across the vertical center (1.4s ease). On completion, the giant hero word **PERMISSION** assembles in place via a glitch/decode effect -- scrambled mono characters cycling and resolving column-by-column over 500ms, with one RGB-split flicker at the end -- then settles, blooming with its phosphor halation. The blinking Stamp Oxblood caret appears after it. Below: `THE PUBLIC INDEX OF WHO HOLDS THE KEYS` types out letter-by-letter in IBM Plex Mono caps (Special Elite would be too much here -- save it for stamps). The hero verb cycles every ~5s (PERMISSION → CLEARANCE → LICENSE → RENEWAL → RIGHTS), each transition a brief glitch-tear. A faint `↓ scroll` hint pulses at the bottom edge. Hero is 100vh; nothing else competes for it. **Scroll = opening drawers.** As the user scrolls, each category section enters as a "drawer pull": the whole section content translate-X's in from the left with a slight mechanical overshoot (cubic-bezier with a tiny rebound), the Manila Edge drawer tab sliding into place first, the rod-hole row, then the cards staggering in (each card 60ms after the previous, with a faint paper-settle: small Y-overshoot + 1deg rotate that resolves to 0). Scroll-triggered, IntersectionObserver-driven, reduced-motion respected. **Card interactions.** Hover: lift (translateY -8px), tilt (rotateX/Y based on cursor, max 3deg), shadow deepens, halation brightens. Roughly 1-in-8 hovers also fires a 200ms glitch: RGB channel split + 2px scanline jump + chromatic blur, then snap clean. Clicking a card flips it (card-flip on Y axis) to reveal the "verso" -- the full catalog record: jurisdiction, founded, last renewal, contact-of-record, a short wistful note in Plex Mono italic, and a fern-frond drawing along the edge. The flip has a brief glitch at the 90deg midpoint where the card is edge-on. **The growing margin.** The thin left-margin rule (the red-line-on-legal-paper line, here in Foam Line) has botanical line-art -- ivy, fern, ginkgo -- growing along it as you scroll: SVG paths revealing via stroke-dashoffset tied to scroll progress, so by the time you reach the footer the whole left edge has quietly leafed out. Slow, almost subliminal. **Bokeh & grain are always on.** The bokeh circles drift continuously on long independent loops with light parallax (translate3d on scroll, ~0.15 ratio). The SVG grain overlay sits at the very top of the z-stack at 8% opacity, `mix-blend-mode: overlay`, never blocking pointer events. Scanlines on dark sections at 3%. **The footer.** A single large "DATE DUE" library slip card -- ruled rows, "DATE DUE" header in Special Elite, and the last-updated date rubber-stamped diagonally across it in Stamp Oxblood with rough edges. Below it, tiny mono: `licensor.directory — an index, not an authority. Verify before you rely.` That's the whole footer. No link farm, no newsletter, no socials wall. **AVOID:** CTA-heavy layouts, pricing tables, stat counters racing up, hero-with-signup-form, three-column feature grids, testimonial carousels, partner-logo walls. This is a *catalog*, not a SaaS landing page. Every screen should feel like a frame of microfiche or a drawer of cards -- archival, hushed, faintly melancholy, with one green thing growing through it. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Card-catalog-as-interface, literally.** Where most designs gesture at "cards" abstractly, this one commits to the physical metaphor end to end: punched rod-holes, drawer-pull section transitions, manila tabs, rubber-stamped dates with individually-roughened SVG edges, a "DATE DUE" slip footer. The interaction grammar (scroll opens drawers, click flips a card to its verso record) comes from a real 1970s rights-and-permissions department, not from a UI kit. 2. **Grain + bokeh + glitch as a triad, not decoration.** The grainy-textured aesthetic and bokeh-background imagery aren't a filter slapped on top -- they're a coherent analog-photographic world (pushed film, tired scanner, projector dust) that the glitch pattern deliberately violates: the glitch is the *meaning* (licenses lapse, expire, corrupt), rarely fired and always pointed. Almost no portfolio design uses bokeh-background (0% frequency) or the grainy-textured aesthetic (1%) at all, and none ties them to a semantic glitch. 3. **The leaf-organic motif as living counterpoint.** A single one-stroke botanical line (fern, ginkgo, ivy) that *draws itself* along the left margin rule as you scroll and adds a leaflet per renewal on each card -- the only curve in a rectilinear gridded world. leaf-organic sits at 0% in the motif frequency table; this design makes it structural, not ornamental. 4. **Ocean-deep palette pushed to "bottle-glass midnight."** Not the calming-spa blue of the obvious ocean-deep read, but a sealed-green-bottle abyss (#0a1f24) lit only by a banker's-lamp verdigris hum and a single oxblood rubber-stamp red. ocean-deep is at ~2% frequency; nostalgic-retro tone at ~1%; hero-dominant layout at ~7%. 5. **Hero-dominant with a terminal-caret twist, zero competition.** The first viewport is one giant monospace verb with a blinking caret that "booted up in 1974 and never finished" -- 100vh, no cards, no stats, no signup. The site refuses to be a landing page. **Chosen seed / style:** aesthetic: grainy-textured, layout: hero-dominant, typography: mono, palette: ocean-deep, patterns: glitch, imagery: bokeh-background, motifs: leaf-organic, tone: nostalgic-retro **Avoided patterns from frequency analysis:** corporate aesthetic (92%), centered layout (92%), gradient palette (96%), warm palette (90%), mysterious-moody tone (94%), counter-animate (91%), photography/minimal imagery (64-70%), parallax-as-only-trick. Card-grid is downplayed in favor of an asymmetric thumbed-through stagger. Stat-grids, pricing blocks, and CTA banks are explicitly excluded per spec.