# Design Language for licensor.directory ## Aesthetics and Tone licensor.directory is built as **a vast, late-edition broadsheet newspaper devoted entirely to the people and bodies who grant permission** — patent pools, music PROs, software foundries, trademark registries, image-rights agencies, franchise grantors. Every screen reads like a single folded page of *The Licensor Gazette*: hot-metal headlines, ruled columns, a masthead with a date that is always *today*, hairline rules between every record, and the faint, papery hush of an archive room. The tone is **scholarly-intellectual but newsprint-fast** — not the precious calm of a museum, but the brisk authority of a reference desk that has already filed a thousand entries before lunch. There is no glow, no gradient, no soft-focus photography, no rounded card. Ink sits on paper. The aesthetic is **vintage editorial print rendered with Swiss-grade restraint**: the romance of letterpress, the discipline of a wire-service stylebook. Reading the site should feel like turning the broad pages of a serious paper whose only beat is *who can say yes*. ## Layout Motifs and Structure The structure is a **multi-column newsprint grid: a fixed 12-column page with a 28px gutter, set on a paper field that never reaches edge-to-edge — there is always a 5vw "margin of the page" left bare, like the white border of a printed sheet.** The whole site is one long folded broadsheet read top to bottom: 1. **The Masthead.** A full-width nameplate — `LICENSOR.DIRECTORY` set in a fat, bracketed-serif blackletter-adjacent display face, underscored by a triple hairline rule (1px / 3px / 1px). Beneath it a single italic deck line and a dateline reading the live date, e.g. *"Vol. I — May 11, 2026 — Reference Edition."* No nav bar. Navigation is a **"Sections" line** under the masthead: small-caps words separated by middots — `RIGHTSHOLDERS · ROYALTY BODIES · STANDARDS POOLS · IMAGE AGENCIES · FRANCHISE GRANTORS · METHOD` — each a quiet jump-link. 2. **The Lead Story.** A two-thirds-width column with a drop-cap opening paragraph (the drop cap is a true 3-line letterpress initial, ink-black, with a faint mis-registration ghost in warm grey). The remaining one-third is a **"Stop Press" rail** — a narrow boxed column of one-line bulletins, each prefixed by a tiny printer's-fist (☞) glyph. 3. **The Register.** The heart of the page: records laid out as **newspaper classified entries** — not cards, but ruled rows. Each entry is a hanging-indent block: bold lead term, em-dash, then a justified mini-paragraph; a hairline rule below; entries flow in **two text columns that the eye reads down then across**, exactly like a classifieds page. Letter-section dividers (▦ A ▦ B ▦ …) break the run. 4. **The Method Box.** A bordered "About this edition" box with double-rule frame, set ragged-right, explaining how entries are compiled — written like an editor's note. 5. **The Colophon Footer.** A thin band at the very bottom: printer's ornaments (✦ ❧ ✦), the "set in…" type credits, and a faux folio number. No social icons, no newsletter, no CTA. Everything is **left-anchored to the column grid**; the only centered element is the masthead nameplate. White space is used the way a typesetter uses it — as air between rules, not as empty hero space. ## Typography and Palette **Type system (Google Fonts only):** - **Nameplate / blackletter-adjacent display:** `UnifrakturCook` — used *only* for the masthead word `LICENSOR.DIRECTORY` and the letter-section dividers. It supplies the engraved, old-paper authority of a Victorian newspaper banner without being illegible at large size. - **Headline & deck face:** `Playfair Display` (700 / 900, plus 700 italic) — section heads, lead-story headline, drop caps. Its high-contrast Didone strokes read as "serious broadsheet." - **Body / register text:** `Source Serif 4` (400 / 600, 400 italic) — every paragraph, every classified entry, the deck lines, the method box. A workhorse text serif with newsprint clarity at small sizes; set at 17px / 1.62 line-height, **fully justified with hyphenation on** in the register columns to get that true column-of-type look. - **Labels / datelines / folio / Stop-Press bulletins:** `IBM Plex Mono` (400 / 500) at 11–12px, letter-spacing `0.08em`, often uppercase — stands in for the monospaced wire-service overprint and keeps metadata visually separate from prose. **Palette — ink on paper, nothing else:** - `#F4EFE3` — **Newsprint Cream**, the page field (a warm, slightly yellowed off-white). - `#EAE3D2` — **Margin Stock**, the bare 5vw page margin and the inset of boxed columns (a hair darker than the page). - `#1B1815` — **Press Black**, the primary ink for headlines and body — not pure #000, a soft carbon black. - `#3A352C` — **Faded Ink**, secondary text, captions, the method box prose. - `#7A2E22` — **Cinnabar Red**, the *single* accent — used for the printer's-fist glyphs, the live dateline, active section link, and the second of the masthead's triple rules. Used sparingly, like a proofreader's red pencil. - `#B7AE99` — **Hairline Grey**, every rule, every divider, the drop-cap mis-registration ghost. No other colors. No gradients. The only "texture" is an optional 4%-opacity tiled paper-fiber noise on the page field. ## Imagery and Motifs - **No photography. No illustration of people.** Imagery is entirely **typographic and ornamental**, drawn as inline SVG so it stays crisp: - **Printer's ornaments:** fleurons (❧), asterisms (⁂), printer's fists (☞), pilcrows (¶), and section marks (§) used as functional dividers and bullets. - **Rule library:** single hairline, double-rule (the "Oxford rule" — thick over thin), and triple-rule. These do all the visual heavy lifting between records. - **Letter-section shields:** small SVG plates `▦ A ▦` rendered as an inked rectangle with the letter knocked out in cream, mimicking a wood-type sort. - **The "Stop Press" box:** a hand-ruled rectangle with slightly imperfect corners (drawn with a 1.5px stroke and a tiny `feTurbulence` displacement) so it looks ruled by hand on a deadline. - **Drop caps:** the first letter of the lead story rendered as a 3-line Playfair Display initial with a 2px offset duplicate in Hairline Grey behind it — the deliberate "ink slip" of cheap presses. - **Folio & dateline strip:** centered monospace, flanked by em-dashes, e.g. `— Page 1 of the Reference Edition —`. - **Motif throughline:** *the column rule.* Vertical hairlines separating text columns are visible everywhere and are the recurring graphic signature — like the gutters of a real newspaper page. ## Prompts for Implementation Build licensor.directory as **one HTML document, one CSS file, one small ES module** — no framework, no build step. The page is a single broadsheet you read by scrolling, ~70 seconds top to bottom. There is **no hero CTA, no pricing table, no stat counters, no testimonial slider, no logo wall, no signup form, no chatbot, no cookie banner.** **Storytelling sequence (read like turning one folded page):** 1. **Masthead reveal.** On load, the `UnifrakturCook` nameplate is set in cream on cream (invisible), then **"inks in"** over 900ms — a CSS `clip-path` wipe from left, as if rolling through a press — settling to Press Black. The triple rule draws beneath it left-to-right with `stroke-dashoffset` (Cinnabar middle rule draws last). The live dateline is written in with a 600ms `typewriter-effect` in IBM Plex Mono. Use `new Date()` to print the real date. 2. **Sections line.** The middot-separated section words fade up in a fast `stagger` (40ms apart). Hovering one draws a 1px Cinnabar `underline-draw` left-to-right; the active section (by scroll position) keeps the underline and turns Cinnabar. 3. **Lead story.** As it enters viewport, the drop cap "slips" into place — its grey ghost arrives first, then the black initial snaps 2px to final position with a tight `spring` (low overshoot). The paragraph text does a subtle `fade-reveal` line by line. The "Stop Press" rail's bulletins arrive one per 120ms, each ☞ glyph doing a 6° `elastic` settle. 4. **The Register.** This is the centerpiece — **CSS `column-count: 2` flowing classified entries.** Each entry: bold lead term + em-dash + justified mini-paragraph + hairline rule below. On scroll, entries `fade-reveal` in document order with a 25ms `stagger` so it reads like type being set down the column. **Letter-section shields** (`▦ A ▦`) pin briefly as you scroll past (a light `scroll-triggered` sticky for ~120px then release). Hovering an entry: the row's left edge grows a 2px Cinnabar bracket and the lead term shifts 4px right (`hover-lift` horizontal variant) — like a finger marking the place. 5. **Method box.** Double-ruled frame draws in (thick rule first, thin rule second, both via `path-draw-svg`). Text inside is ragged-right, italic editor's-note voice. 6. **Colophon.** Printer's ornaments fade in last; the faux folio number does a small `counter-animate` from 0 to 1 (a wink — it's "Page 1"). **Cursor behavior:** no orbiting blob. Instead, a faint **1px vertical Hairline-Grey "column rule" follows the cursor's X position**, snapping to the nearest grid column line — as if you're sighting down a typesetter's rule. It's barely there (`opacity: 0.25`) and disappears over the masthead. **Motion rules:** everything is *crisp and short* (180–320ms), no float, no parallax drift on imagery — the only `parallax` allowed is the bare page margin staying fixed while the content scrolls "over" it, reinforcing the printed-sheet metaphor. Respect `prefers-reduced-motion`: skip the ink-in wipe and typewriter, show final states. **Voice in copy:** wire-service terse. Section heads are nouns (`ROYALTY BODIES`), entry leads are the licensor's name in bold, decks are single italic sentences. Never say "click here." Never use emoji in body copy — only the SVG printer's ornaments. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Zero gradient, zero glow, zero glass — in a corpus that is 96% gradient / 72% glassmorphism.** This is flat ink on flat paper, the visual opposite of nearly every other entry. The only "depth" is the deliberate mis-registration ghost behind the drop cap. 2. **The directory is a literal newspaper, and records are classified ads, not cards.** Against an 89% card-grid convention, there is *not a single card* — content lives in ruled, hanging-indent classified entries flowing in `column-count: 2`, read down-then-across like a real classifieds page. The recurring graphic motif is the vertical *column rule*, not a panel. 3. **No photography at all** (versus 98% photography) — imagery is 100% typographic ornaments (fleurons, printer's fists, asterisms, wood-type letter shields) rendered as inline SVG. 4. **A blackletter-adjacent nameplate that "inks in" via a press-roll clip-path wipe**, plus a live `new Date()` dateline — a load animation tied to the newspaper metaphor rather than the usual fade/slide hero. 5. **Cursor = a typesetter's sighting rule** that snaps to grid columns, replacing the near-ubiquitous cursor-follow blob (88% of the corpus) with something diegetic to print layout. **Chosen seed/style:** `vintage newspaper layout` — expressed via *aesthetic: editorial (vintage broadsheet), layout: magazine-spread (newsprint multi-column), typography: serif-revival + bebas/blackletter display + mono datelines, palette: sepia-nostalgic / monochrome ink-on-paper, patterns: typewriter-effect + path-draw-svg + stagger, imagery: minimal (typographic ornaments only), motifs: vintage + book-scholarly + grid-lines, tone: scholarly-intellectual.* **Avoided overused patterns from frequency analysis:** hand-drawn (97%), glassmorphism (72%), photography (98%), warm-gradient palette (96%/98%), card-grid (89%), cursor-follow blob (88%), full-bleed edge-to-edge layout (92%) — every one of these is consciously rejected here in favor of a bordered, ruled, ink-on-paper broadsheet.