# Design Language for licensor.directory ## Aesthetics and Tone licensor.directory channels a terminal aesthetic — monospaced type, command-line interfaces, and the stark functional beauty of developer tools applied to licensor discovery and directory browsing. The site presents the licensor directory as a powerful command-line-like interface where users query, filter, and discover licensors with the precision of a database terminal. Inspiration draws from retro CRT displays, htop system monitors, vim text editors, and the green-on-black nostalgia of early Unix workstations. The tone is futuristic-cutting-edge — despite the retro terminal visuals, the language positions the directory as next-generation technology for licence management. The f-pattern layout follows natural web reading behavior, with key information placed along the expected eye-scanning path. ## Layout Motifs and Structure The layout uses an **f-pattern** reading flow — content organized to match the natural F-shaped scanning pattern of web readers, with key information along the top and left edges. **F-Pattern Architecture:** - Top bar: Full-width command prompt showing "licensor.directory > _" with blinking cursor - First horizontal: Feature summary row with 3-4 key metrics spanning full width - Left column: Primary content (directory listings) aligned left at max-width: 760px - Right supplementary: Metadata panel (240px) floating right for context info - Container: max-width: 1100px centered, generous left-alignment for scanning **Section Sequence:** 1. **Boot Sequence:** Terminal-style boot animation revealing the directory title with animated border drawing, then fading into the main interface 2. **System Status:** F-pattern top bar showing key directory stats (total licensors, active, categories) in terminal status-bar format 3. **Directory Listing:** Main content — licensor entries displayed as terminal-style rows with hand-drawn accent icons 4. **Query Panel:** Search/filter interface styled as command-line input with auto-suggest 5. **Exit Terminal:** Footer rendered as terminal session end — "Session terminated. Connection closed." ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) — neo-grotesque sans at 2rem-3rem, weight 700. Its geometric precision bridges terminal aesthetics with modern design sensibility. - **Body Text:** "JetBrains Mono" (Google Fonts) — developer monospace at 0.9rem, weight 400, line height 1.7. The authentic terminal experience for directory listings. - **Labels:** "Space Grotesk" at 0.7rem, weight 500, uppercase for section headers and category labels. - **Prompts:** "JetBrains Mono" at 0.85rem, weight 400 for command-line prompts and input fields. **Color Palette:** - **Terminal Black:** #0a0a0a — deep black for primary background - **Sunset Amber:** #e08030 — warm orange for primary accents and headings - **Sunset Gold:** #d4a840 — warm gold for secondary accents and highlights - **Phosphor Green:** #40c040 — terminal green for success states and active indicators - **Terminal Gray:** #1a1a1a — dark gray for card backgrounds and elevated surfaces - **Dim Text:** #8a8a80 — muted gray for secondary text and comments - **Cream Output:** #e0d8c0 — warm cream for primary text output - **Warning Red:** #c04040 — red for error states and important warnings ## Imagery and Motifs **Hand-Drawn Directory Icons:** Each licensor category has a small hand-drawn icon (SVG, 24x24px, stroke-only with intentionally wobbly lines using subtle path variations) in Sunset Amber — a pen for copyright, a gear for patents, a musical note for music licences. The hand-drawn quality creates warmth within the cold terminal aesthetic. **Candle-Atmospheric Warm Pools:** Despite the terminal darkness, warm radial gradients (Sunset Amber at 0.03-0.05 opacity, 300px radius) pool behind key content areas, as if candlelight is illuminating parts of the terminal screen, creating an atmospheric quality that prevents the dark theme from feeling sterile. **Border-Animate Entry Lines:** Directory listing rows animate their left border on scroll entry — a 3px border in Sunset Amber draws downward from top to bottom (height: 0% to 100%) over 300ms. Each subsequent row's animation delays by 50ms, creating a cascading reveal effect. **CRT Scan Line Overlay:** A subtle repeating-linear-gradient (1px transparent, 1px rgba(0,0,0,0.04)) applied as a full-page overlay simulates CRT scan lines, reinforcing the terminal aesthetic without hindering readability. **Blinking Cursor Accent:** Key interactive elements feature a blinking cursor (CSS animation: opacity 1 to 0, step-end, 1s infinite) after their text content, suggesting the terminal is ready for input. ## Prompts for Implementation Build the page as a terminal-style directory. Body: background: Terminal Black, color: Cream Output, font-family: 'JetBrains Mono'. Container: max-width: 1100px. F-pattern: top section uses display: flex for horizontal stat bar. Main content uses a two-column grid: grid-template-columns: 1fr 240px. Primary content left-aligned with directory rows as block elements. Border-animate: rows start with border-left: 3px solid transparent. On .visible (Intersection Observer): border-left-color: Sunset Amber with transition via a pseudo-element height animation from 0% to 100% over 300ms. Use animation-delay: calc(var(--index) * 50ms). Candle glow: pseudo-elements on key sections: radial-gradient(circle, rgba(224,128,48,0.04) 0%, transparent 70%), width: 300px, height: 300px, position: absolute. Boot sequence: on load, display lines of "initializing..." text with 100ms delays using sequential setTimeout or CSS animation-delay. Each line types out character by character (CSS steps() animation on width). CRT overlay: fixed div, inset: 0, background: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,0.04) 1px, rgba(0,0,0,0.04) 2px), pointer-events: none, z-index: 9999. AVOID: Colorful marketing layouts, rounded playful elements, and image-heavy designs. Let the terminal austerity and warm sunset accents create a powerful, focused directory experience. ## Uniqueness Notes 1. **Terminal aesthetic for licensor directory:** Command-line styling positions the directory as a power-user tool for serious licence professionals. 2. **F-pattern for directory scanning efficiency:** Content placement matching natural eye scanning patterns optimizes information discovery in dense listings. 3. **Hand-drawn icons within terminal interface:** The contrast between wobbly hand-drawn icons and precise terminal type creates unexpected warmth. 4. **Candle-atmospheric glow in dark terminal:** Warm light pools prevent the dark interface from feeling cold, adding an atmospheric human quality. 5. **Border-animate cascading row reveal:** Sequential border animations create a loading-data visual rhythm that feels authentically terminal-like. **Seed/Style:** aesthetic: terminal, layout: f-pattern, typography: grotesque-neo, palette: sunset-warm, patterns: border-animate, imagery: hand-drawn, motifs: candle-atmospheric, tone: futuristic-cutting-edge **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses terminal aesthetic, f-pattern layout, sunset-warm palette, hand-drawn imagery, and futuristic-cutting-edge tone.