# Design Language for misty.day ## Aesthetics and Tone misty.day is a terminal-as-oracle — a site that looks like a command-line interface left running overnight, but one that's been colonised by something ancient. The aesthetic fuses the cold precision of a 1980s green-phosphor terminal with the faded grandeur of an aged map room: circuit traces drawn on vellum, ANSI escape codes bleeding into watermark ink, system prompts printed in letterpress on tea-stained paper. The mood is **opulent-grand**: every section feels like a cathedral server room, where brass fittings meet blinking cursors and copper-etched PCB traces wind through illuminated manuscript margins. This is not a hacker's cramped terminal — it is a sovereign's war room where the machines have been running since before memory. Primary inspiration: the Antikythera mechanism reimagined as software. A device of surpassing complexity, now stilled, now displayed under glass, now quietly resuming computation. Tone keywords: arcane, monumental, precise, amber-lit, slow-burning. ## Layout Motifs and Structure The page is composed as **diagonal sections** — each full-viewport panel tilts 4–7° from horizontal, so successive sections create a cascading staircase effect. Content within each panel is strictly horizontal, but the panels themselves slice across the screen at opposing angles, creating visual momentum that never resolves into a comfortable grid. Section anatomy: - **Panel 0 (Boot Sequence):** Full-bleed dark panel. A single blinking cursor center-screen. System font. One line types itself: `misty.day — initialising`. Then the circuit traces begin their slow crawl outward from the cursor point. - **Panel 1 (Manifesto):** Left-aligned Bebas Neue headline at 18vw, crashing off the right edge of the viewport. Below it, body text in a narrow monospace column, left third of screen only. The right two-thirds fills with a large SVG circuit-motif watermark in near-invisible blue-grey. - **Panel 2 (Specimen / Feature):** Diagonal image strip (paper-aged texture, sepia photograph aesthetic) cutting across a dark background. Text overlaid in a phosphor-green monospace, positioned bottom-left of the panel. - **Panel 3 (Chronology / Timeline):** A vertical terminal log — timestamped lines scrolling up, each entry a milestone or statement. The log has a slight scanline overlay. Horizontal rule lines are drawn with box-drawing characters (`─`, `╔`, `╗`). - **Panel 4 (Contact / Close):** Near-black panel. One enormous Bebas Neue word centered, the underline-draw animation traces beneath it as the user scrolls into view. Monospace subtext. A single mailto link that looks like a terminal command. Spatial logic: generous whitespace within panels, tight typographic density at focal points. No cards, no grid columns competing for attention. ## Typography and Palette **Primary font:** Bebas Neue (Google Fonts) — used for all display headlines, section labels, and dominant numerals. Set at extreme sizes (12vw–20vw) with tight tracking (−0.02em). Its condensed industrial geometry reads as both a typeface and an architectural element. **Secondary font:** Share Tech Mono (Google Fonts) — all body text, captions, timestamps, and decorative terminal output. 13px–16px, line-height 1.8. The slight imperfection in its letterforms evokes dot-matrix printing on aged paper. **Accent font:** IM Fell English (Google Fonts) — used sparingly for pull quotes and section epigraphs only. Provides the aged-manuscript counterpoint to the terminal rationalism of the other two faces. **Palette — Ethereal Blue meets aged amber:** - `#0a0c14` — Void Black (primary background, deepest darks) - `#0d1117` — Deep Slate (panel backgrounds, secondary dark) - `#1a2744` — Midnight Navy (circuit trace fill, mid-tone dark) - `#2e4a7c` — Blueprint Blue (circuit trace stroke, active elements) - `#4a7fbf` — Cerulean Circuit (primary accent, links, glow halos) - `#8ab4e8` — Phosphor Mist (secondary accent, cursor colour, highlight text) - `#c8a96e` — Aged Amber (paper texture overlay tint, pull quote text) - `#e8d5a3` — Vellum Cream (body text on dark panels, aged paper simulation) - `#2a4a1a` — Terminal Phosphor (used only for the phosphor-green overlaid on specimen panel) - `#00cc44` — Active Phosphor (cursor blink, active terminal lines) ## Imagery and Motifs **Circuit motifs:** SVG paths that mimic actual PCB trace routing — 90° and 45° angles only, no curves. Traces begin at focal typography and route outward to the panel edges, terminating in small square pads or via holes. These are animated to draw themselves on scroll entry (stroke-dasharray/dashoffset technique). Density increases toward panel edges, thinning near text. **Paper-aged imagery:** All photographic or illustrative content is processed through a paper-aged aesthetic: sepia wash, vignette burn, visible grain/halftone at edges. Images feel like daguerreotypes or contact prints from a declassified archive. No clean edges — images bleed into the dark background via gradient masks. **Underline-draw animation:** On scroll entry, section headlines receive an animated underline that draws from left to right over 0.6s, using a CSS clip-path animation. The underline itself is `#4a7fbf` (Cerulean Circuit), 3px thick, with a faint glow shadow in `#8ab4e8`. **Scanline overlay:** A subtle full-viewport CSS scanline effect (repeating-linear-gradient with 2px lines at 3% opacity) sits above all content, reinforcing the CRT terminal aesthetic without overpowering readability. **Box-drawing characters:** Section dividers, timeline entries, and decorative borders use Unicode box-drawing characters (U+2500–U+257F) set in Share Tech Mono. These create intricate frame geometries that reference both terminal UI and circuit schematic notation. **Cursor blink:** A blinking block cursor (`█`) in `#00cc44` appears as a decorative punctuation mark after certain terminal-style text elements. CSS animation: opacity 1 → 0, 0.8s step-start, infinite. ## Prompts for Implementation The page is a single-scroll, seven-panel experience. No navigation, no sidebar, no persistent header. Scrolling is the only interaction vector. Each panel transition uses `scroll-snap` with a small easing overshoot (CSS `scroll-behavior: smooth` + custom IntersectionObserver animations). **Implementation directives:** 1. **Boot sequence panel:** JavaScript typewriter function, 80ms per character. After text completes, trigger SVG circuit animation — strokes draw outward for 3 seconds. No user interaction required to proceed. 2. **Diagonal section cuts:** Achieved with CSS `clip-path: polygon()` on each section — alternating between a top-left-to-bottom-right and top-right-to-bottom-left diagonal. The polygon values should create roughly a 5° tilt: e.g., `polygon(0 0, 100% 3vw, 100% 100%, 0 calc(100% - 3vw))`. Sections overlap by 4vw to prevent gaps. 3. **Circuit trace SVGs:** Each panel contains an absolutely-positioned SVG layer at z-index 0, behind text. Paths use `stroke-dasharray` equal to their total length, with `stroke-dashoffset` animated from full length to 0 on IntersectionObserver trigger. Duration: 2s, easing: cubic-bezier(0.25, 0.46, 0.45, 0.94). 4. **Paper-aged specimen:** CSS filter chain: `sepia(0.6) contrast(1.1) brightness(0.85) saturate(0.7)` applied to imagery. A pseudo-element overlay adds noise texture via SVG filter `feTurbulence` for grain simulation. 5. **Underline-draw headlines:** `::after` pseudo-element on `h2` elements. Initial state: `clip-path: inset(0 100% 0 0)`. On `.in-view` class addition: `clip-path: inset(0 0 0 0)`, transition 0.6s ease-out. The underline spans 60% of the headline width, aligned left. 6. **Terminal log panel:** Array of pre-written log entries, injected into the DOM via JavaScript one line every 120ms when the panel enters view. Each line is prefixed with a faded timestamp in `#4a7fbf`. The final entry is always: `> _` with a blinking cursor. 7. **Phosphor glow effect:** Applied to all `#00cc44` elements via CSS: `text-shadow: 0 0 8px #00cc44, 0 0 20px #00cc4466, 0 0 40px #00cc4422`. Applied to SVG strokes via `filter: drop-shadow(0 0 4px #00cc44)`. 8. **Overall scroll behaviour:** No parallax (too common). Instead, each panel's circuit SVG continues drawing as long as the panel is in view, creating a sense of ongoing computation rather than triggered-and-done animation. AVOID: hero images with text overlay (standard), card grids, call-to-action buttons, navigation bars, pricing tables, testimonial carousels, modal popups. The page must feel like documentation of something that already exists, not a pitch for something that wants to exist. ## Uniqueness Notes 1. **Terminal-as-archaeological-site:** Most terminal-aesthetic sites emphasise speed and hacking culture. This design treats the terminal as a site of slow excavation — the circuit traces draw themselves like a brush exposing buried architecture, and the typography shifts between machine-precise Bebas Neue and the humanist imperfection of IM Fell English, encoding the tension between the digital and the archival. 2. **Diagonal-section composition at full-viewport scale:** Where diagonal layouts typically appear as decorative dividers between otherwise rectangular sections, here the diagonal IS the section — each panel's content, background, and interactive elements all tilt together, creating a physical sensation of descent through the page rather than lateral navigation. 3. **Dual-register typography system:** The simultaneous use of an extreme condensed display face (Bebas Neue), a monospaced terminal face (Share Tech Mono), and an aged serif (IM Fell English) is not stylistic eclecticism — it is a designed argument: three eras of inscription technology on one surface, each commenting on the others. 4. **Circuit traces as narrative infrastructure:** The PCB-trace SVG animations are not decoration — they connect typographic focal points to panel edges as though routing signal from concept to periphery. The density of traces increases toward the edges of each panel, visually suggesting that meaning radiates outward from the text, not inward from imagery. 5. **Phosphor-amber chromatic collision:** The palette deliberately collides cool cerulean-blue (ethereal-blue seed) with warm amber-vellum tones (paper-aged seed), refusing to resolve into either a clean tech palette or a clean archival palette. The colour tension is the aesthetic. Seed: aesthetic: terminal, layout: diagonal-sections, typography: bebas-bold, palette: ethereal-blue, patterns: underline-draw, imagery: paper-aged, motifs: circuit, tone: opulent-grand Avoided (overused per frequency analysis): photography (90%), hand-drawn (60%), editorial (52%), minimal imagery (40%), glassmorphism (21%). Preferred (underused per frequency analysis): bebas-bold typography (rare), underline-draw patterns (rare), diagonal-sections layout (present but underused), circuit motifs (present but underused), slab-serif / geometric-sans variants.