# Design Language for licence.broker ## Aesthetics and Tone licence.broker channels a dark-mode aesthetic — deep backgrounds, precise typography, and the sophisticated restraint of professional tools designed for focused work sessions. The site presents licence brokerage as a premium, after-hours profession where deals are struck in the quiet confidence of well-appointed offices. Inspiration draws from Bloomberg Terminal's dense information displays, luxury watch configurator interfaces, the warm darkness of executive lounges, and vintage leather portfolio cases. The tone is warm-inviting — despite the dark interface, the voice is welcoming and personable, making the complex world of licence transactions feel approachable and human. The split-screen layout divides the viewport between showcase and detail, creating a constant dialogue between visual presentation and transactional information. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — the viewport divided vertically into two persistent panels that serve complementary functions, creating a dual-focus reading experience. **Split-Screen Architecture:** - Left panel: 50vw, fixed/sticky, dark background — visual showcase with licence category displays - Right panel: 50vw, scrollable — transactional content, details, and explanatory text - On mobile: panels stack vertically with the visual panel becoming a compact hero - Panel divider: 1px line in muted vintage gold at 0.2 opacity - Max content width within each panel: 520px with 40px padding **Section Sequence:** 1. **Foyer:** Split hero — left shows a leather-textured licence document render, right shows welcome copy and primary CTA 2. **Catalogue:** Left panel cycles through licence category visuals (counter-animated), right panel scrolls through category descriptions 3. **Deal Room:** Split view with process steps on left (numbered, fixed) and detailed explanations scrolling on right 4. **Credentials:** Left shows trust badges and partner logos, right presents testimonials and case statistics 5. **Contact Desk:** Footer spanning both panels with contact form and office hours ## Typography and Palette **Typography:** - **Headlines:** "IBM Plex Mono" (Google Fonts) — technical monospace at 1.8rem-2.8rem, weight 600. Its engineering precision communicates transactional reliability and systematic process. - **Body Text:** "IBM Plex Sans" (Google Fonts) — companion sans at 0.95rem, weight 400, line height 1.7. Clean and professional for deal descriptions. - **Data Values:** "IBM Plex Mono" at 0.85rem, weight 400 for licence numbers, pricing, and reference codes. - **Labels:** "IBM Plex Sans" at 0.7rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Obsidian:** #1a1a20 — near-black primary background - **Vintage Gold:** #b8a060 — muted gold for primary accents and headings - **Leather Tan:** #8a7050 — warm brown for secondary elements and borders - **Aged Cream:** #e8e0d0 — warm light text on dark backgrounds - **Muted Wine:** #6a3a3a — deep burgundy for emphasis and active states - **Carbon Gray:** #2a2a30 — dark gray for secondary panels and card backgrounds - **Patina Green:** #5a7a60 — muted green for success states and verification badges - **Silver Dust:** #8a8a90 — cool gray for secondary text and inactive elements ## Imagery and Motifs **Leather-Texture Visual Accents:** Key visual elements feature a CSS-simulated leather texture — subtle noise overlay (SVG filter: feTurbulence with baseFrequency 0.9, numOctaves 4) combined with a warm gradient in Leather Tan at 0.08 opacity, applied to card backgrounds and the left panel header area. **Cultural Heritage Frames:** Licence display cards are framed with thin ornamental borders (1px Vintage Gold at 0.3 opacity) with small decorative corner elements — CSS-drawn right-angle brackets with tiny diamond shapes, referencing traditional document certification frames from various cultural traditions. **Counter-Animate Licence Metrics:** Statistics animate upward when scrolled into view — total licences brokered, active clients, markets served. Numbers count from 0 to target value over 1.5 seconds using requestAnimationFrame with an easing curve (decelerate). Displayed in IBM Plex Mono with Vintage Gold color. **Document Watermark Effect:** The left panel features a very faint (0.02 opacity) repeating pattern of the word "LICENCE" at 45-degree rotation in large type (4rem), creating a security-document watermark effect in Vintage Gold. **Warm Edge Glow:** The split-screen divider line subtly pulses with a warm glow (box-shadow: 0 0 8px Vintage Gold at 0.1 opacity, animating 0.08-0.12 over 4 seconds), giving the divide between panels a living, warm quality. ## Prompts for Implementation Build the page as a dark-mode split-screen. Use CSS Grid: grid-template-columns: 1fr 1fr. Left panel: position: sticky, top: 0, height: 100vh, overflow: hidden. Right panel: overflow-y: auto. Both have background: Obsidian with left panel slightly lighter at Carbon Gray. Leather texture: SVG filter with feTurbulence baseFrequency="0.9" numOctaves="4" applied via filter: url(#leather). Combined with background-blend-mode: overlay on elements that need the texture. Counter-animate: Intersection Observer triggers. Use requestAnimationFrame loop: const progress = Math.min((Date.now() - start) / 1500, 1); const eased = 1 - Math.pow(1 - progress, 3); element.textContent = Math.floor(eased * target). Cultural frames: border: 1px solid rgba(184,160,96,0.3). Corner decorations using ::before and ::after pseudo-elements with border combinations (10px segments) positioned at card corners. Document watermark: background-image: repeating linear text (use an SVG text element repeated at 45deg as a background-image data URI) in Vintage Gold at 0.02 opacity. AVOID: Bright, playful interfaces, casual language in UI elements, and cluttered information displays. Let the dark sophistication and split-screen clarity convey professional brokerage authority. ## Uniqueness Notes 1. **Dark-mode for licence brokerage:** The premium dark interface positions licence dealing as a sophisticated, professional service rather than a mundane transaction. 2. **Split-screen persistent dual-focus:** The two-panel layout maintains constant dialogue between visual showcase and detailed information. 3. **Leather texture as material authenticity:** CSS-simulated leather surfaces connect digital transactions to the tactile reality of physical documentation. 4. **Cultural heritage document frames:** Ornamental borders reference the cross-cultural tradition of official document presentation. 5. **Counter-animated deal metrics:** Counting statistics create a sense of active, growing business that builds client confidence. **Seed/Style:** aesthetic: dark-mode, layout: split-screen, typography: tech-mono, palette: muted-vintage, patterns: counter-animate, imagery: leather-texture, motifs: cultural, tone: warm-inviting **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 dark-mode aesthetic, split-screen layout, muted-vintage palette, leather-texture imagery, and warm-inviting tone.