# Design Language for licensor.directory ## Aesthetics and Tone The domain name is a bureaucratic compound: *licensor* (the entity granting permission) fused with *directory* (a catalogue, a registry, a ledger of names). Together they conjure the image of a leather-bound ledger kept under glass in the reading room of a patent office — the kind of room where gas lamps were replaced by fluorescent tubes but the mahogany never changed. This is a site about **institutional knowledge colliding with neon infrastructure**. The aesthetic is **mcbling** — that early-2000s sensibility of chrome logos, bedazzled interfaces, and status signaled through surface excess — but refracted through the lens of a *scholarly institution*. Imagine the Harvard Law School seal rendered in hot-pink rhinestones on a black velvet surface. Imagine a legal citation set in glowing cyan Courier on a frosted glass panel. The excess is real but disciplined; the ornamentation is genuine but literate. The tone is **scholarly-intellectual**: dry, authoritative, slightly arch. No marketing voice. No breathless copy. Every text block reads like it was written by a clerk who has been doing this job for forty years and has no patience for imprecision. License numbers are real. Dates are specific. Cross-references are meticulous. The glamour comes from the surface — the frosted glass, the neon underlines, the chromatic aberration — never from inflated language. The visual mood is: **a research library at 2 a.m. after someone installed LEDs under every shelf and replaced all the ink with phosphorescent tracers**. The structure is entirely legible. The information hierarchy is classical. But every surface shimmers. ## Layout Motifs and Structure The page is built on a **stacked-sections** spine: six full-viewport panels arranged vertically, each one a discrete entry in the ledger. There is no horizontal scroll, no carousels, no floating popups. The reader turns pages by scrolling down. Each panel is a full-bleed section with a precisely defined role — the ledger never repeats a heading, never reuses a composition. Panel grammar: - **Panel 1 — Registry Header.** Full-viewport. The directory wordmark centered in large tech-mono display type. Below it, a subtitle line in small-caps that reads like a formal document title. A thin neon-cyan rule — exactly 1 px, `#00FFD1` — underlines the wordmark and extends to both edges with a 0.6 s draw animation. Background: near-black `#0A0A12` with a subtle grain overlay. - **Panel 2 — The Ledger Pane.** A two-column layout: left column is a narrow index (entry numbers, dates, jurisdictions) in monospaced text; right column is the full entry text, set in a slightly larger weight. Both columns sit behind a glassmorphic card — frosted `rgba(255,255,255,0.06)` with a `backdrop-filter: blur(18px)` — and the card has a `1px` border of `#00FFD1` at 30% opacity. The ledger entries scroll *within* the card (internal scroll, not page scroll), giving the impression of looking through a window at a longer document. - **Panel 3 — Citation Map.** A visual graph — not a pie chart, not a bar graph — but a network of connected nodes rendered in SVG. Each node is a license category. The edges glow `#FF2D78` at 40% opacity. On hover, a node scales to 1.08× and its label switches from mono to a slightly italic variant. The entire graph is centered on a dark `#0D0D1A` background with a subtle radial gradient bleeding outward from the hovered node. - **Panel 4 — Authority Statement.** A single large typographic panel. One sentence of text, set at `8vw`, in a bold tech-mono face, centered. The text is the kind of dry institutional statement that would appear on a wall plaque. It wraps deliberately at an unusual line break chosen for rhythm, not readability. Behind it, a glassmorphic card with a `#FF2D78` border pulse animation cycling at 4 s. - **Panel 5 — Cross-Reference Index.** A two-column list — left column: reference codes; right column: plain-language descriptions. Monospaced throughout. Every entry has a subtle `scale-hover` effect: on hover the row scales to `scaleX(1.01)` and the reference code flips to `#00FFD1`. The rows alternate between `rgba(255,255,255,0.02)` and transparent background. - **Panel 6 — Colophon.** The footer, styled as a formal document colophon. Registry seal (SVG, circular, with concentric rings and ornamental text), edition number, and date. All centered. The seal has a slow 60 s rotation animation. Spatial rules: `max-width: 1200px` centered, with `8vw` lateral padding on large screens. Section padding is always `clamp(4rem, 10vh, 8rem)` top and bottom. No sticky headers. No hamburger menus. Navigation is purely by scroll. ## Typography and Palette Typography embodies the seed's **tech-mono** directive crossed with vintage scholarly gravity. One monospaced family anchors everything; one serif provides contrast for long-form ledger entries. - **Display / Headings:** [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono), `400` weight. Set at `clamp(2.5rem, 6vw, 5.5rem)` for panel headers. Letter-spacing `0.04em`. All caps for registry titles; mixed case for subtitles. This face has the precise, slightly clinical quality of a type-set government form. - **Body / Ledger entries:** [Inconsolata](https://fonts.google.com/specimen/Inconsolata), `300`–`500` weight. Set at `clamp(0.85rem, 1.1vw, 1rem)`. Line-height `1.75`. Used for all paragraph text, ledger descriptions, and cross-reference entries. Its tighter letterforms read as professional documents, not developer notes. - **Accent / Pull quotes:** [IM Fell English](https://fonts.google.com/specimen/IM+Fell+English), italic, `400`. Used sparingly — only for the Authority Statement panel and the colophon date line. Its old-press imperfection against the crisp mono creates exactly the "leather ledger under neon" tension the design demands. Palette — six colors, precisely defined: | Role | Hex | Usage | |---|---|---| | Void | `#0A0A12` | Primary background, deepest black-navy | | Depth | `#0D0D1A` | Section alternates, card backgrounds | | Surface | `#14142A` | Glassmorphic card base, input fields | | Cyan-neon | `#00FFD1` | Primary accent — rules, hover states, active reference codes | | Magenta-neon | `#FF2D78` | Secondary accent — node edges, border pulses, error states | | Ghost | `#C8C8E0` | Body text, ledger entries, all readable prose | | Dim | `#5A5A8A` | Secondary text, dates, jurisdiction codes, inactive states | | Platinum | `#E8E8F4` | Display headings only, maximum contrast against void | All text contrast ratios are maintained — `#C8C8E0` on `#0A0A12` is approximately 8:1. The neon colors are used for decoration only, never for body text, preserving scholarly legibility. ## Imagery and Motifs Imagery is dominated by **glassmorphic-cards** — the primary UI container throughout the site. Every data panel, every ledger window, every citation block lives behind a frosted glass surface. The frosting is implemented with `backdrop-filter: blur(18px)` plus a 5–8% white fill, creating depth without obscuring the background entirely. Card borders are single-pixel neon strokes at 25–40% opacity — subtle enough to feel etched, strong enough to define the boundary. Motifs are **vintage**: the visual grammar of printed registries, patent office ledgers, and administrative seals — but translated into neon. Specific motifs: - **Registry seal.** A circular SVG emblem in Panel 6. Concentric rings of decreasing opacity in `#00FFD1`. Outer ring carries ornamental text ("LICENSOR DIRECTORY · EST. MMXXIV · "). Inner disc holds a simplified key icon — the universal symbol of authorization. The seal rotates at 1 rpm perpetually, slow enough to seem monumental rather than animated. - **Ledger rule.** A 1 px horizontal line in `#00FFD1` that appears above section headings. It draws from left to right on scroll-enter — `stroke-dashoffset` animation, 0.8 s, `ease-out`. Once drawn, it remains static. - **Entry numbers.** Each ledger entry is prefixed with a five-digit zero-padded number in `#5A5A8A`: `00001`, `00002`, etc. These numbers use Share Tech Mono at 0.7× body size, superscript-aligned. They are purely decorative — no links, no interactivity — but they give the page the texture of an actual registry. - **Chromatic aberration on hover.** When the visitor hovers over a major glassmorphic card, a `text-shadow` triple-layer (offset `+2px/-2px` in `#FF2D78` and `#00FFD1`) applies to the heading text inside, for 180 ms, then fades. The effect is the visual equivalent of a CRT screen being touched — a flash of mcbling glamour on an otherwise serious surface. - **Grain overlay.** A `noise.svg` or CSS `filter: url(#noise)` at 4% opacity covers the entire `#0A0A12` background, softening the pure digital black into something that reads as aged paper photographed at night. - **Scale-hover on rows.** Every row in Panel 5's Cross-Reference Index responds to hover with `transform: scaleX(1.008)` and a color shift on the reference code column. The transition is `150ms ease-out`. The motion is imperceptible at rest but alive under the cursor. No photography. No 3D renders. No icons beyond the registry seal key and the SVG graph nodes. The imagery is entirely typographic and geometric — the glamour comes from light and surface, not from illustration. ## Prompts for Implementation Treat this as a **single vertical ledger** — a formal registry document that has been illuminated in neon, the way a medieval scribe might have gilded a tax record. Every implementation decision should serve the fiction that this is an *actual institutional directory* viewed through glass that has been backlit in the dark. Do not build hero CTAs, "Sign Up" buttons, pricing tables, stat grids, feature card rows, testimonial sliders, social proof rails, logo bars, comparison tables, newsletter modals, cookie banners with rounded buttons, or any other element of the contemporary conversion-optimized landing page. Implementation priorities: 1. **Glassmorphic cards are structural, not decorative.** Every major content block lives inside `backdrop-filter: blur(18px)`. The background behind the cards should itself have subtle movement — a very slow (120 s period) gradient shift cycling between `#0A0A12` and `#0D0D1A` — so the frosting is always frosting something alive. 2. **The neon rules draw on scroll-enter.** Use `IntersectionObserver` to trigger `stroke-dashoffset: 0` on each `` element in every section header rule. Stagger by 0.1 s per element within a section. The draw happens once — no re-trigger on scroll-out. 3. **Scale-hover is the primary interaction pattern.** Every interactive row, every ledger entry, every node in the citation graph responds to hover with a `scale` transform. The scale is always subtle (1.005–1.015 range) and always paired with a neon color shift on the key text element. Use CSS `transition: transform 150ms ease-out, color 150ms ease-out` — no JavaScript for these micro-interactions. 4. **The citation graph (Panel 3) uses inline SVG.** Do not use a charting library. Draw `` nodes and `` edges directly. Node radius is `24px`. Edge `stroke-width: 1`. On hover, the hovered node's `r` animates from `24` to `26` via CSS. Edge opacity animates from `0.4` to `0.9` for edges connected to the hovered node using JavaScript `classList` toggles. Positions should be fixed (not force-directed) — a hand-arranged composition that looks deliberate, not algorithmic. 5. **Typography is set on a strict modular scale.** Base `1rem = 16px`. Scale factor `1.25` (major third). Every font-size in the project is one step on this scale: `0.64rem`, `0.8rem`, `1rem`, `1.25rem`, `1.563rem`, `1.953rem`, `2.441rem`, `3.052rem`, `3.815rem`. No ad-hoc sizes. Use `clamp()` for fluid scaling between mobile and desktop. 6. **Panel transitions use `scroll-snap`.** Set `scroll-snap-type: y mandatory` on the root, and `scroll-snap-align: start` on each panel. This is not strictly mandatory (some designs break it on mobile) — if it conflicts with the internal-scroll ledger in Panel 2, fall back to `proximity` snap or disable snap on mobile entirely. The effect on desktop is the ledger page-turn sensation. 7. **The colophon seal must rotate.** Use `@keyframes spin { to { transform: rotate(360deg); } }` with `animation-duration: 60s; animation-timing-function: linear; animation-iteration-count: infinite`. The seal is pure SVG — no raster. Include the full registry name as `` on the outer ring arc. 8. **Chromatic aberration on card hover.** On `mouseenter` of any major glassmorphic card, add a CSS class that applies `text-shadow: -2px 0 #FF2D78, 2px 0 #00FFD1` to the card's `

`. Add `transition: text-shadow 80ms ease-in`. On `mouseleave`, remove the class with a 200 ms delay so the effect fades out gracefully. Do not apply chromatic aberration to body text — headings only. 9. **Avoid all marketing patterns.** No sticky headers. No floating action buttons. No progress bars showing "x% of the way through the page." No popups. No chat widgets. No cookie banners styled as modals. If legal notices must appear, render them inline in the colophon as a single small-caps paragraph in `#5A5A8A`. 10. **Mobile at 375px: simplify, do not strip.** The glassmorphic cards remain. The neon rules remain. The monospaced typography scales down via `clamp()`. The internal scroll in Panel 2's ledger pane converts to a static block (remove `overflow: scroll` on mobile). The citation graph in Panel 3 reduces to a simplified linear list view. The scale-hover interactions remain but are disabled on `@media (hover: none)`. ## Uniqueness Notes Three or more deliberate differentiators from other designs in the registry, with frequency analysis and seed context. 1. **mcbling at 2% frequency, fused with scholarly-intellectual tone — a combination present in zero other designs.** The frequency report shows `mcbling` used by exactly two designs (2%) in the registry. In both prior uses, mcbling was paired with playful or fashion-forward tones. This design pairs mcbling with the dry institutional voice of a patent office ledger — the rhinestone is applied to the legal brief, not the pop star. This collision is entirely novel in the registry. 2. **tech-mono typography at 0% prior use, combined with IM Fell English for contrast.** The frequency report shows `tech-mono` as a typography seed with zero registrations (though `mono` appears in other contexts). Using Share Tech Mono as the *display* face — not as a code annotation tool, but as the primary heading face — is a specific and unusual choice. The contrast pairing with IM Fell English (an old-press serif that scans as genuinely aged) creates a time-gap effect: the display type feels like 2024 infrastructure logging; the body accent type feels like 1780 printing. That gap is the site's visual thesis. 3. **Glassmorphic-cards used as a structural skeleton, not as decorative overlays.** The frequency report shows `glassmorphic-cards` appearing occasionally but always as accent elements — hero overlays, feature callouts. In this design, *every* content panel is a glassmorphic container. The glass is the page. This inverts the conventional use: instead of glass appearing on a solid background, the solid background is merely what the glass is frosting over. The result is a page that feels entirely translucent, as if the content is always one layer removed from reality. 4. **Chosen seed:** `aesthetic: mcbling, layout: stacked-sections, typography: tech-mono, palette: dark-neon, patterns: scale-hover, imagery: glassmorphic-cards, motifs: vintage, tone: scholarly-intellectual` 5. **Avoided overused patterns from frequency analysis.** The frequency report flags `shake-error` at 4% as the single most overused interaction pattern — it appears in the error field of the frequency report. This design does not use shake-error anywhere. No scroll-hijacking, no forced animations on body text, no full-screen takeover transitions — all patterns that cluster in the high-frequency range of the registry. Instead, scale-hover (a lower-frequency choice) is the sole interaction primitive, keeping the design visually coherent and friction-free.