# Design Language for desca.work ## Aesthetics and Tone desca.work channels a terminal aesthetic -- the stark, monochromatic beauty of command-line interfaces where every character has purpose and ornamentation is forbidden. The ".work" suffix demands utility and professional function, while "desca" becomes a command name, a tool invoked at a blinking cursor. Imagine the screen of a systems administrator at 2 AM: green phosphor text scrolling on black, status indicators pulsing, log files streaming in real time. The visual language draws from classic Unix terminal emulators, the IBM 3270 mainframe display, and the modern minimalism of tmux/vim power-user setups. The color palette emphasizes complementary tones -- the traditional green-on-black augmented by amber warnings and cyan information markers. Lens flare effects (subtle CSS radial-gradients) simulate the optical artifacts of photographing CRT screens. The tone is authoritative -- this is a tool that knows what it is doing, and its interface reflects that confidence through radical simplicity. ## Layout Motifs and Structure The layout uses an **organic-flow** composition that paradoxically applies organic, natural flow to terminal-style content -- as if terminal output were rendered in a stream-of-consciousness arrangement rather than rigid rows and columns. **Primary structure:** - **Boot sequence (100vh):** A black background with a blinking cursor (CSS animation, 1s interval) at the top-left. The title "desca.work" types itself character by character (Lottie animation or CSS steps() width reveal). Below, a simulated boot log scrolls upward -- green monospace text listing system initialization messages, each appearing with a brief delay. - **Command sections (4 sections, ~100vh each):** Each section represents a "command" and its output. The section heading is styled as a terminal prompt ("> desca --describe topic"). The content below is the "output" -- body text in monospace with occasional syntax highlighting (cyan for keywords, amber for values, green for success). Sections flow organically into each other without hard breaks, just a new prompt line. - **Aurora lights visualization (100vh):** A dark section with a CSS-generated aurora effect (multiple layered linear-gradients with different hue values, animated with @keyframes shifting background-position). The aurora colors (greens, cyans, subtle purples) are the terminal palette rendered at scale, creating a moment of visual poetry amid the functional aesthetic. - **Lens flare CRT section (80vh):** A section where the "screen" effect is heightened -- a subtle scanline overlay, a slight screen-curve effect (via CSS border-radius on a large scale), and small lens flare artifacts (radial-gradients with bright centers, 4-8px, scattered at random positions). - **Logout footer (40vh):** A minimal closing styled as a terminal logout -- "Session ended. Connection closed." in green text, followed by a blinking cursor that never receives input. **Spacing philosophy:** Terminal rhythm. Lines are spaced at a fixed 24px line-height (the standard terminal line). Prompts have 48px above them (double-spacing for visual separation). Horizontal padding is 4ch (4 character widths) from each edge, maintaining the character-grid aesthetic. ## Typography and Palette **Fonts:** - **Headlines/Display:** "VT323" (Google Fonts) -- a pixel-style monospace font that captures the CRT terminal display. Used for terminal prompts and section headers. Weight 400 (only available weight). Size clamp(20px, 2.5vw, 36px). Letter-spacing: 0.04em. - **Body text:** "Source Code Pro" (Google Fonts) -- a refined monospace designed for code readability, providing a modern upgrade from VT323 for extended reading. Weight 400 for body, 600 for emphasis. Size clamp(14px, 1vw, 16px). Line-height: 24px fixed. - **UI Labels:** "Space Mono" (Google Fonts) -- used for status indicators, timestamps, and navigational elements. Weight 400, size 12px, letter-spacing: 0.06em. **Palette:** - **Terminal Black** `#0A0A0A` -- primary background, near-pure black - **Phosphor Green** `#33FF66` -- primary text and the signature terminal color - **Amber Warning** `#FFB833` -- secondary accent for warnings, values, and emphasis - **Info Cyan** `#33CCFF` -- tertiary accent for keywords, links, and informational highlights - **Dim Green** `#1A8033` -- muted green for secondary text and inactive elements - **CRT Glow** `#33FF6620` -- the subtle green glow around text (text-shadow in green at 12% opacity) ## Imagery and Motifs **Core visual motifs:** - **Lens flare artifacts:** Small radial-gradient elements (4-12px diameter) with bright white/green centers fading to transparent, scattered at fixed positions across certain sections. These simulate the optical artifacts visible in photographs of CRT monitors -- the bright point where the camera picks up phosphor intensity. - **Aurora lights background:** A CSS-only aurora effect using 3-4 layered linear-gradients at different angles (30deg, 60deg, 120deg) with colors from the terminal palette (Phosphor Green, Info Cyan, muted purple) at 8-15% opacity. The gradients animate with @keyframes (background-position shifting over 20-second cycles), creating a slow, undulating northern-lights effect. - **Lottie-style typing animation:** The boot sequence and section headers use a character-by-character reveal. While not actual Lottie files, the effect is achieved with CSS: a monospace text element with overflow:hidden and a width animation using steps(N) timing function (where N = character count), revealing one character per step. - **Scanline overlay:** A full-page pseudo-element with repeating-linear-gradient (transparent 50%, rgba(0,0,0,0.04) 50%) at background-size: 100% 2px, creating subtle CRT scanlines visible on all dark surfaces. - **Blinking cursor:** The universal terminal indicator -- a small rectangle (8px wide, 20px tall) in Phosphor Green that toggles between opacity 0 and 1 on a 1-second interval. Appears at the end of every "prompt" line. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like booting up a powerful terminal session. The opening is system initialization, the content sections are command outputs, the aurora section is a moment of unexpected beauty (the machine dreaming), and the logout is a clean session termination. **Opening animation sequence:** - Frame 0-200ms: Terminal Black background. Nothing visible. - Frame 200-600ms: A blinking cursor appears at top-left (20px from left, 20px from top). - Frame 600-2000ms: "desca.work" types itself next to the cursor, character by character (CSS width-reveal with steps(), ~80ms per character). Each character appears in Phosphor Green with the CRT Glow text-shadow. - Frame 2000-3000ms: Below the title, boot log lines appear one by one (200ms per line, fade-in from 0 opacity): "[OK] Loading modules...", "[OK] Initializing workspace...", "[OK] Ready." - Frame 3000-3500ms: The first command prompt appears ("> desca --help") with the blinking cursor at the end. **Scroll behavior:** New command sections trigger when entering the viewport -- the prompt types itself (lottie-animation style character reveal), then the output "prints" line by line (stagger 30ms per line, fade-in). The aurora lights section has no scroll trigger -- it is ambient and always animating once visible. The lens flare artifacts in the CRT section pulse subtly (opacity oscillating between 0.3 and 0.8). **Interaction details:** - Hovering over command prompts highlights them in Info Cyan (color transition over 200ms). - The blinking cursor pauses its blink when the cursor hovers near it (animation-play-state: paused within a 40px radius). - Links are rendered in Info Cyan with an underline that appears via width transition (0 to 100%) on hover. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Terminal aesthetic with organic-flow layout:** Applying organic flow to terminal content creates an unexpected visual language -- the rigid monospace text arranged in a flowing, stream-of-consciousness structure rather than the expected rigid grid. The terminal visual is familiar; the layout treatment is novel. 2. **Aurora lights as "machine dreaming" section:** The CSS-generated aurora effect using terminal-palette colors creates a moment of visual poetry within the functional terminal aesthetic. This section suggests the machine has an inner life -- a brief, beautiful digression from utilitarian output. 3. **Lens flare CRT artifacts:** The small radial-gradient elements simulating CRT photography lens flares add a layer of physical-world reference that elevates the terminal aesthetic from simple imitation to artistic interpretation of the CRT experience. 4. **Boot-sequence narrative structure:** Using the computer boot process as the narrative framework (initialization, commands, output, logout) creates a temporal story that is both technically authentic and narratively satisfying. **Chosen seed/style:** aesthetic: terminal, layout: organic-flow, typography: tech-mono, palette: complementary, patterns: lottie-animation, imagery: lens-flare, motifs: aurora-lights, tone: authoritative **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns as primary. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mysterious-moody (74%) tone. Used lottie-animation (0% -- never used!) pattern, lens-flare (2%) imagery, and aurora-lights (2%) motifs -- all heavily underused.