# Design Language for lrx.st ## Aesthetics and Tone lrx.st (License and Right eXchange) channels a terminal aesthetic — monospaced precision, command-line interfaces, and the efficient minimalism of developer tools applied to a streamlined license exchange experience. The site presents LRX as a lean, powerful exchange terminal where rights transactions happen with the speed and clarity of shell commands. Inspiration draws from retro terminal emulators, the clean status displays of cloud infrastructure dashboards, the hypnotic scroll of log files, and the aurora borealis as nature's own gradient light show. The tone is minimal — every word earning its place, no filler, communication as efficient as the code that powers the exchange. The masonry layout organizes exchange modules as terminal windows tiled across the workspace. ## Layout Motifs and Structure The layout uses a **masonry** architecture — content blocks of varying heights stack in columns, filling space efficiently like tiled terminal windows on a developer's multi-monitor setup. **Masonry Architecture:** - CSS columns: 3 at max-width 1200px, column-gap: 16px - Items use break-inside: avoid, varying height from 180px to 400px - Each item styled as a terminal window with title bar (24px, dark) and content area - Terminal window chrome: three small circles (8px) in red/yellow/green in title bar - On mobile: collapse to single column **Section Sequence:** 1. **Session Start:** Hero styled as terminal session initialization — typed command revealing the LRX exchange name with aurora-gradient background glow 2. **Module Grid:** Masonry grid of exchange modules — each a terminal window showing a different exchange capability with gradient-mesh backgrounds 3. **Process Flow:** Sequential command chain showing the exchange workflow, each step a terminal command with output 4. **Status Board:** Live-feed-styled display showing exchange metrics with fade-reveal animations 5. **Session End:** Footer as terminal session close — "exit 0" with session summary statistics ## Typography and Palette **Typography:** - **Headlines:** "Albert Sans" (Google Fonts) — Frutiger-inspired clean sans at 2rem-3rem, weight 700. Bridge between terminal precision and modern readability. - **Body Text:** "Albert Sans" at 0.95rem, weight 400, line height 1.7. - **Terminal Content:** "JetBrains Mono" (Google Fonts) — developer monospace at 0.85rem for all terminal-style content. - **Labels:** "Albert Sans" at 0.7rem, weight 600, uppercase for module headers. **Color Palette:** - **Aurora Purple:** #6a40a8 — deep purple for primary gradients - **Aurora Green:** #40c880 — vivid green for secondary gradients and success states - **Aurora Teal:** #40a8c8 — bright teal for tertiary accents - **Terminal Dark:** #0c0c10 — near-black for terminal backgrounds - **Panel Dark:** #161620 — slightly lighter dark for masonry card backgrounds - **Text Light:** #e0e0e8 — cool white for primary text - **Dim Gray:** #5a5a68 — muted gray for comments and secondary text - **Aurora Pink:** #c850a0 — vivid pink for gradient endpoints ## Imagery and Motifs **Gradient-Mesh Aurora Backgrounds:** Key sections feature aurora-inspired gradient meshes — overlapping radial gradients in Aurora Purple, Aurora Green, Aurora Teal, and Aurora Pink at 0.06-0.12 opacity, positioned off-center to create the shifting, organic light patterns of aurora borealis behind terminal content. **Abstract-Tech Circuit Decorations:** Thin (1px) circuit-board-style line patterns (SVG, right-angle paths with occasional dots at junctions) in Aurora Teal at 0.08 opacity run along card edges and between masonry columns, suggesting the technical infrastructure underlying the exchange. **Fade-Reveal Module Entries:** Masonry items enter with a cinematic fade-reveal — starting fully transparent and masked by a horizontal gradient wipe (mask-image: linear-gradient) that sweeps from left to right over 500ms on scroll entry, simulating a terminal window being drawn on screen. **Terminal Window Chrome:** Each masonry card has a miniature title bar (24px) with three 8px circles (#ff5f56 close, #ffbd2e minimize, #27c93f maximize) and a module name in JetBrains Mono at 0.7rem, perfectly mimicking macOS terminal window decoration. **Typed Text Reveal:** Headlines and key text animate as if being typed — each character appearing with a 30ms delay using CSS steps() animation on width with overflow: hidden, creating authentic terminal typing feedback. ## Prompts for Implementation Build the page as a terminal masonry workspace. CSS columns: 3 with column-gap: 16px. Each card: background: Panel Dark, border: 1px solid rgba(106,64,168,0.15), border-radius: 8px, overflow: hidden, break-inside: avoid. Terminal chrome: 24px div with background: #1a1a24, three circles (8px each, inline-block, border-radius: 50%) in close/minimize/maximize colors, margin-right: 6px between circles. Aurora gradients: 2-3 radial-gradient layers positioned at different locations within sections. E.g., radial-gradient(ellipse at 30% 40%, rgba(106,64,168,0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(64,200,128,0.06) 0%, transparent 50%). Fade-reveal: mask-image: linear-gradient(90deg, black 0%, transparent 0%); On .visible: mask-image: linear-gradient(90deg, black 100%, transparent 100%); transition: mask-image 500ms ease-out. Typed text: .typed { width: 0; overflow: hidden; white-space: nowrap; border-right: 2px solid Aurora Green; animation: typing 2s steps(30) forwards, blink 0.8s step-end infinite; } @keyframes typing { to { width: 100%; } }. AVOID: Colorful marketing layouts, rounded playful elements, and verbose content. Let terminal precision and aurora atmospherics create an efficient, beautiful exchange interface. ## Uniqueness Notes 1. **Terminal aesthetic for license exchange:** CLI-style interface positions LRX as a power-user tool for serious rights professionals. 2. **Masonry as tiled terminal windows:** The multi-window layout creates a productive workspace feel familiar to developers and power users. 3. **Aurora gradient atmospherics in terminal UI:** Northern lights gradients add ethereal beauty to the otherwise austere terminal environment. 4. **Fade-reveal as screen-draw animation:** The gradient-wipe entry mimics the satisfying moment of a terminal window appearing on screen. 5. **Typed text reveals for key content:** Character-by-character animation creates the authentic feedback loop of command-line interaction. **Seed/Style:** aesthetic: terminal, layout: masonry, typography: frutiger-clean, palette: aurora-gradient, patterns: fade-reveal, imagery: gradient-mesh, motifs: abstract-tech, tone: minimal **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, masonry layout, aurora-gradient palette, gradient-mesh imagery, and minimal tone.