# Design Language for continuum.quest ## Aesthetics and Tone - Style: Japanese-minimal meets dark-neon — a quiet, contemplative ma (negative space) discipline lit by the buzz of a back-alley Shinjuku arcade. The page breathes like a dry-rock garden, but the rocks glow. We borrow wabi-sabi's reverence for asymmetry and imperfection and pair it with a low, persistent neon hum. The continuum is rendered as a single, unbroken vertical scroll — a meditation on time that refuses to interrupt itself with widgets, modals, or marketing furniture. - Tone: Grounded, earthy, deliberate. Voice reads like a forest ranger's field notebook: short observations, present tense, no exclamation marks, no superlatives. Copy speaks of soil, lichen, plate tectonics, half-lives, generations. The reader is a fellow walker, not a "user." Sentences end in periods, not promises. - Differentiators: 1. A timeline whose units are not pixels-per-year but ma-per-event — empty stretches of scroll that intentionally make the reader wait for the next moment. 2. The dark-neon palette is muted to the brink of monochrome; color appears as a single, slow-pulsing accent on the timeline spine, never on type or chrome. 3. Slab-serif body type at near-poster scale, treated as engraved markers rather than reading copy. ## Layout Motifs and Structure - Structure: A single vertical timeline pinned to a 12-column grid, with the spine sitting on column 4 (asymmetric, deliberately off-center, honoring the rule of thirds the Japanese way). Events alternate between left-side timestamp markers (columns 1–3) and right-side prose blocks (columns 5–11). Each event card is tilted 1.5° to 3° on the Z-axis — a tilt-3d transform that makes the card feel like a stone tablet leaned against the spine, not a flat ad. As the reader scrolls past the viewport center, the active card straightens to 0° (the moment is "present"), and resumes its tilt as it leaves. Generous vertical ma between events: minimum 60vh of negative space between adjacent markers, sometimes as much as 140vh for "dormant" eras. No header bar, no footer chrome — the timeline begins at the top of the page and ends where it ends. - Navigation: A thin vertical rail on the far right (column 12) shows era labels (e.g., "Hadean", "Archean", "Anthropocene") as 4–5 letter monograms; clicking any label spring-scrolls to that era's first marker. No hamburger, no logo lockup, no top nav. Keyboard: J/K moves between adjacent events; G jumps to top; Shift+G jumps to bottom. Progress is indicated by the spine itself filling with the neon accent as the reader descends. ## Typography and Palette - Palette: dark-neon, restrained. - `#0B0D10` — Sumi black, base background. Not pure black — has a graphite undertone. - `#14181D` — Slate panel, used for the rare card surface. - `#E8E2D4` — Washi cream, primary type color. Warm, paper-like, never pure white. - `#7A7060` — Lichen, secondary type and rule lines. Earthy, desaturated olive-tan. - `#3A2E22` — Cedar bark, for inset shadows and subtle blocks. - `#FF3D71` — Neon coral, the single accent. Used only on the timeline spine and the active-event indicator. Pulses at 0.4 Hz with a 12% opacity range so it feels like a heartbeat, not a banner. - Typography: - Display and event titles: **Roboto Slab** (Google Fonts), weight 700, set at clamp(2.4rem, 5vw, 4.8rem), letter-spacing -0.01em. Treated as carved labels. - Body and prose: **Zilla Slab** (Google Fonts), weight 400 for prose and 600 for emphasis, set at 1.125rem with leading 1.7. Slab serifs throughout — no sans-serif fallback for tonal consistency. - Timestamps and rail monograms: **Roboto Mono** (Google Fonts), weight 500, uppercase, letter-spacing 0.18em, used at 0.78rem. - All text is left-aligned, never justified. Hyphenation off. ## Imagery and Motifs - Imagery: Generative-art panels, computed in-browser via canvas. Each era has its own algorithm: Hadean uses molten Voronoi noise in cedar-bark and sumi tones; Cambrian uses recursive radiolarian symmetry; Industrial uses a 1-bit dithered smokestack lattice. No photographs, no stock illustration, no SVG icons. Generative panels are 16:10, occupy column 5–11 width, and themselves carry the same 1.5–3° tilt as the cards. Each generative seed is derived from the event's timestamp, so the same event always renders the same image — the artwork is the event's fingerprint. - Motifs: Retro-patterns drawn from 1970s–80s Japanese print and arcade culture, but desaturated: thin halftone dot fields behind era-headers; a single hand-drawn mokume-gane (wood-grain) divider between major eras; CRT-style scanline overlays at 4% opacity on the generative panels only. A small enso (zen circle) glyph marks the end of the timeline — the only fully circular element on the entire page. Avoid: gradients, glassmorphism, drop shadows, rounded corners larger than 2px. ## Prompts for Implementation - Key sections (in scroll order, no nav-bar, no hero): (1) Cold open — a single Roboto Slab line "The continuum is not a line." centered 80vh down, no logo, no CTA. (2) The timeline begins — first marker for "13.8 Gya — singularity," with the first generative panel rendering as the reader arrives. (3) Era blocks — each era is a sequence of 3–7 events separated by ma. (4) Present moment — when the reader reaches today's date, the spine's pulse briefly synchronizes with a 1.0 Hz beat for 6 seconds, then returns to 0.4 Hz. (5) Forward arc — speculative future events rendered with the lichen color instead of washi cream, indicating uncertainty. (6) Enso terminus — single glyph, then 100vh of black silence. No newsletter form, no contact section, no pricing, no testimonials, no stat-grid, no feature-comparison. - Interactions: - Tilt-3d on every card: idle tilt 1.5–3° (deterministic per event, not random per load); active tilt 0° when card center is within 20% of viewport center; transition uses a spring (stiffness 80, damping 22). - Spine pulse: continuous 0.4 Hz neon-coral opacity pulse on the spine SVG; respect prefers-reduced-motion (replace with static 60% opacity). - Generative panels render lazily as they enter a 1.5x viewport buffer, using requestIdleCallback to avoid jank. - Scroll is native — no scroll hijacking, no snap, no smooth-scroll override. The browser owns the scroll. - Keyboard nav (J/K/G/Shift+G) and rail-click both use a spring scroll (not linear), and respect prefers-reduced-motion by snapping instantly. - On hover of an event title, the corresponding rail monogram brightens to washi cream for 200ms — a quiet acknowledgment, no tooltip. ## Uniqueness Notes - Overused patterns avoided: parallax (94% of corpus — we use none; the timeline is the structure, not a parallax effect), stagger entrance animations (72% — events fade in only via tilt-correction, not staggered slides), hand-drawn aesthetic (84% — replaced with disciplined slab-serif geometry), CTA-heavy hero blocks, pricing tiers, stat grids, testimonial carousels, hamburger menus, sticky headers. - Underused patterns prioritized: tilt-3d (19% — used as the page's structural signature, not a hover gimmick), generative-art (4% — used as primary imagery for every era), retro-patterns (used as quiet decorative dividers, not as the loud Memphis/maximalist 9% variant). Slab-serif as the sole type family. Asymmetric off-center spine layout. ma-driven vertical rhythm where empty space is content. - Similarity reference: No close sibling in the corpus — closest aesthetic neighbors are the 20% minimalist and 16% dark-mode designs, but those typically use sans-serif and centered layouts; this design diverges by committing to slab-serif throughout, an off-center vertical spine, generative imagery, and a single muted neon accent rather than a cool-blue or pure-monochrome palette. - Chosen seed: aesthetic: japanese-minimal, layout: timeline-vertical, typography: slab-serif, palette: dark-neon, patterns: tilt-3d, imagery: generative-art, motifs: retro-patterns, tone: grounded-earthy.