# Design Language for license.broker ## Aesthetics and Tone License.broker inhabits a world where software licensing becomes theatrical — a stage where digital assets glow like precious gemstones under neon light. The aesthetic fuses **Bauhaus constructivism** with **whimsical futurism**: strict geometric discipline collides joyfully with electric neon pulses and jewel-hued luminosity. Think Walter Gropius dreaming in ultraviolet. The mood is playful yet authoritative — a broker who wears neon on the inside of their jacket. The tone is whimsical-creative: surprising typographic choices, unexpected color pops, animated shapes that feel alive without feeling chaotic. Nothing is purely decorative; every element carries functional intent dressed in flamboyant costume. Inspiration drawn from: Bauhaus Dessau's geometric precision, Tokyo's neon-drenched Akihabara storefronts, and the jewel case of a rare software disc from 1998 caught under a blacklight. The site should feel like a gallery of luminous artifacts — licenses as collectibles, each with its own glowing aura. Anti-patterns deliberately avoided: photography-heavy layouts, warm earth tones, hand-drawn illustration, editorial blog layouts, and any suggestion of corporate blandness. ## Layout Motifs and Structure The layout is **full-bleed by nature** — each section bleeds edge to edge with no white margins interrupting the visual field. The page is structured as a series of **geometric panels** — rectangles, diagonally-split sections, and circular viewport windows — stacked vertically like slides in a Bauhaus presentation. Key structural principles: - **Panel composition**: Full-viewport sections where content is anchored to geometric grids. Each panel uses a 12-column Bauhaus grid with heavy gutters expressed as colored rule lines. - **Diagonal splits**: Alternating sections use a 15-degree diagonal cut dividing foreground jewel-tone zones from deep-black background fields — a neon knife-edge between light and shadow. - **Asymmetric anchoring**: Headlines lock to one edge (left or right), with Lottie animation filling the opposing half. Never centered — always deliberately off-axis. - **Circular portals**: Small circular crop windows (like portholes) appear as micro-features, showcasing animated license "gem" icons. - **Bold rule lines**: 4px horizontal and vertical color rules (in jewel tones) divide compositional zones — Bauhaus grid made visible and electric. - **Sticky nav panel**: A thin left sidebar (60px wide) holds vertical navigation text rotated 90 degrees, always visible, glowing in #7B2FBE. The overall rhythm moves: full-bleed hero → diagonal split feature → circular portal row → asymmetric text/animation panel → full-bleed CTA field. ## Typography and Palette **Primary Display Font: Nunito** — rounded geometric sans, used at extreme weights (900 Black) for headlines. Its circular letterforms echo Bauhaus circle-square-triangle geometry while feeling whimsically soft. **Secondary Font: Exo 2** — a geometric sans with slightly futuristic character, used for subheadings and labels at weights 400 and 600. **Monospace Accent: JetBrains Mono** — reserved for license key strings, code snippets, and technical metadata. Adds an authentic software-world texture. All three fonts are available on Google Fonts. **Type Scale:** - Hero display: Nunito 900, 96px / 88px line-height, uppercase, letter-spacing -2px - Section headers: Nunito 800, 56px - Subheads: Exo 2 600, 24px, letter-spacing 3px uppercase - Body: Exo 2 400, 16px / 28px line-height - License codes: JetBrains Mono 400, 13px **Jewel-Tone Palette:** | Role | Color | Hex | |---|---|---| | Deep void (background) | Obsidian black | #0A0A0F | | Primary jewel | Amethyst | #7B2FBE | | Secondary jewel | Emerald | #0EAD69 | | Accent jewel | Sapphire | #1B6CA8 | | Hot accent | Electric ruby | #E8175D | | Pale surface | Dark indigo surface | #12122A | | Text primary | Icy white | #F0EEFF | | Text secondary | Lavender mist | #B8B0E8 | | Neon glow corona | Violet corona | #BF5FFF | | Rule lines | Aqua teal | #00E5CC | Background is overwhelmingly dark (#0A0A0F) — jewel tones appear as luminous elements against void, never as flat fills. Every jewel-tone surface carries a subtle `box-shadow` glow aura (e.g., `0 0 24px #7B2FBE66`). ## Imagery and Motifs **Primary Imagery: Neon Glow** All imagery is generated or rendered — no photography. The visual language is neon-glow geometry: - Geometric shapes (rectangles, triangles, hexagons) drawn in CSS/SVG with neon stroke outlines (2–4px) and glowing box-shadows - License "gem" icons: each license type rendered as a glowing 3D-looking hexagonal jewel in a specific jewel tone, animated with Lottie (rotate, pulse, float) - Background: animated CSS grid lines in near-invisible #7B2FBE11, suggesting an infinite Bauhaus field - Neon halos: radial-gradient overlays in amethyst or emerald placed behind key UI elements to simulate light emission **Lottie Animation Strategy:** Three Lottie animations central to the experience: 1. **Hero gem cluster** — a floating cluster of hexagonal license gems orbiting each other, built in Lottie, filling the right half of the hero panel. Gems pulse and rotate in jewel tones. 2. **License transfer animation** — on the "how it works" panel, a Lottie showing a gem passing hand-to-hand, transforming from ruby to emerald (representing license transfer). Plays on scroll-enter. 3. **Value counter animation** — animated numeric ticker built in Lottie showing license savings stats, numbers morphing with neon trails. **Motifs: Futuristic Bauhaus** - Triangle, circle, square: the three Bauhaus forms, rendered in stroke-only neon, scattered as large background decorations (opacity 0.06–0.12) at 45-degree rotations - Scan lines: thin horizontal rule lines (1px, #00E5CC at 4% opacity) over dark sections, suggesting a screen/HUD aesthetic - Corner brackets: UI elements use sharp right-angle corner brackets ([ ]) as decorative framing, suggesting technical precision - Neon borders: key cards and panels use `border: 1px solid #7B2FBE` with `box-shadow: 0 0 12px #7B2FBE44, inset 0 0 8px #7B2FBE22` - Geometric dividers: section separators are diagonal SVG lines in aqua teal (#00E5CC), 2px wide, stretching full-width ## Prompts for Implementation **Overall Implementation Philosophy:** Build this as a single-scroll narrative experience — the user descends through a dark neon world, discovering the value of license brokerage like exploring a subterranean gem market. Each section is a chamber with its own jewel-tone personality. No page reloads, no navigation away — pure vertical immersion. **Hero Panel (viewport 100vh, background #0A0A0F):** - Left 55%: Headline in Nunito 900, white, 96px. Text: "YOUR LICENSES / ARE WORTH MORE / THAN YOU THINK." Three lines, each on its own row with increasing neon underline (amethyst, emerald, sapphire). - Right 45%: Lottie animation of gem cluster (autoplay, loop). Gems float and pulse. Constrained to `400px × 400px`, centered in the right zone. - Bottom edge: Diagonal cut at 15 degrees, revealing the next panel's amethyst surface. - Sticky left sidebar: 60px wide, `#12122A` background, single `writing-mode: vertical-rl` text reading "license.broker" in Exo 2 600, aqua teal. **How It Works Panel (full-bleed, background #12122A with amethyst glow):** - Three-column Bauhaus grid, each column featuring a Bauhaus geometric form (triangle/circle/square) as a neon icon above a short label. - Step labels in JetBrains Mono with step numbers styled as large faded Nunito numerals in the background. - The license-transfer Lottie animation plays centered between columns 2 and 3, triggered on IntersectionObserver. **License Types Showcase (full-bleed, alternating diagonal split):** - Rotating showcase of license categories: Enterprise, SaaS, Perpetual, Subscription. - Each appears as a large Bauhaus card: dominant jewel-tone left band (40px wide), black card body, neon-glow license gem Lottie in top-right corner. - Cards use CSS `clip-path` diagonal cuts on hover to reveal a sapphire-glow interior. - JetBrains Mono renders sample license key strings as decorative text at 30% opacity. **Value Panel (full-bleed, black with emerald neon):** - Full-bleed dark section with the Lottie value counter animation. - Behind the counter: large Bauhaus circle (800px diameter, stroke-only, #0EAD69 at 8% opacity, slowly rotating at 0.1 deg/s via CSS animation). - Headline: "WE FIND THE DELTA" in Nunito 900, white. - Supporting copy in Exo 2 400, lavender mist. **Broker Trust Panel (diagonal split, amethyst/sapphire):** - Left half: #7B2FBE background with trust indicators in white Nunito. - Right half: #1B6CA8 with animated neon corner brackets framing a quote. - The diagonal split is an SVG `polygon` overlay using aqua teal (#00E5CC). **CSS Implementation Notes:** - CSS custom properties for all jewel tones and glow effects - `mix-blend-mode: screen` on neon glow elements to prevent muddy overlapping - `will-change: transform` on all Lottie containers for GPU compositing - `backdrop-filter: blur(1px)` on cards to slightly soften the background grid - Diagonal cuts: `clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%)` as a starting point - Scroll-based IntersectionObserver triggers for Lottie playback (play on enter, pause on exit) - No JavaScript frameworks — vanilla JS for IntersectionObserver and any minimal interactivity - Lottie loaded via CDN (`@lottiefiles/lottie-player` web component or `lottie-web` NPM via CDN) - Font loading: Google Fonts `@import` for Nunito (weights 400, 700, 800, 900), Exo 2 (400, 600), JetBrains Mono (400) **Animation Details:** - Background Bauhaus shapes: `@keyframes` slow rotation (60s loop, `transform-origin: center`) - Neon pulse on gem icons: `@keyframes` box-shadow intensity oscillation, 3s ease-in-out infinite - Scan-line overlay: `repeating-linear-gradient` at 1% intervals, `background-size: 100% 4px`, no animation needed - Hover on cards: `transform: translateY(-4px) scale(1.02)`, glow intensifies via transition on box-shadow ## Uniqueness Notes **3+ Differentiators:** 1. **Neon Bauhaus Collision**: No other design in this corpus combines strict Bauhaus geometric constructivism (the three forms, grid rules, asymmetric anchoring) with neon-glow jewel-tone luminosity. This creates a visual tension between disciplined structure and exuberant color — unique in a corpus dominated by hand-drawn and editorial aesthetics. 2. **Lottie as Primary Content, Not Decoration**: Most designs treat animation as decoration. Here, three distinct Lottie animations carry narrative weight — the gem cluster tells the value story, the transfer animation explains the mechanics, and the counter animation delivers the proof. Animation is load-bearing. 3. **Jewel Taxonomy as Domain Metaphor**: Licenses are mapped to gem types (amethyst = enterprise, emerald = SaaS, sapphire = perpetual, ruby = subscription). This jewel taxonomy runs through the entire design system — color coding, iconography, naming — creating a coherent internal language unique to this domain. 4. **Sticky Vertical Sidebar Navigation**: The 60px rotated-text sidebar is an unconventional navigation pattern borrowed from Bauhaus publication design. No other site in the corpus uses this structural element. It creates a persistent orientation anchor without the typical horizontal nav bar. 5. **Dark Jewel Void Aesthetic**: The extreme dark background (#0A0A0F) with jewel tones as the only light sources creates a subterranean gem vault feeling — entirely distinct from the warm gradient and photography-heavy designs that dominate the corpus. The jewel-tones palette (1% frequency in corpus) is maximally differentiated. **Seed Documented:** `aesthetic: bauhaus, layout: full-bleed, typography: rounded-sans, palette: jewel-tones, patterns: lottie-animation, imagery: neon-glow, motifs: futuristic, tone: whimsical-creative` **Avoided Overused Patterns (from frequency analysis):** - photography (90% corpus frequency) — replaced with neon geometry and Lottie - hand-drawn (61%) — replaced with precise Bauhaus geometric forms - editorial (49%) — avoided; no blog-style text columns - warm palette (93%) — inverted to cool jewel tones on void black - gradient fills (78%) — used only as glow halos, never as primary fills - centered layout (89%) — deliberately asymmetric with off-axis anchoring - vintage motifs (48%) — replaced with futuristic Bauhaus geometry