# Design Language for a6c.quest ## Aesthetics and Tone a6c.quest inhabits the liminal space of a vintage computer terminal that has been abandoned in a zen garden. The visual identity merges the phosphor-green glow of CRT displays with the sparse tranquility of Japanese rock gardens -- imagine a terminal cursor blinking peacefully beside a raked sand circle. The "quest" in the domain suggests a journey of discovery, and the terminal aesthetic frames that journey as a text adventure: every scroll is a command, every section is a new room to explore. The tone is zen-contemplative -- unhurried, spacious, and inviting quiet focus. Information arrives like commands returning output: deliberate, sequential, and surrounded by silence (whitespace). There is no urgency here, only the patient hum of a machine waiting for your next input. ## Layout Motifs and Structure The layout uses an **asymmetric** composition that breaks from traditional centered or grid-based structures. Content is deliberately off-center, weighted toward the left or right of the viewport in alternating sections, creating a zigzag reading path that keeps the eye engaged. **Primary structure:** - **Opening viewport (100vh):** A dark terminal background (#0D1117) with a single blinking cursor at top-left. After a pause, text types itself: `> welcome to a6c.quest`. Below, a translucent frost panel (backdrop-filter: blur(16px)) emerges from the left containing introductory content. - **Content sections alternate alignment:** Odd sections anchor content to a 60% column on the left with a 40% negative space on the right (filled with decorative terminal output at 8% opacity). Even sections mirror this -- content on the right, atmosphere on the left. - **Terminal chrome:** Each content block is framed within a "terminal window" -- a container with a title bar (three colored dots, a path-like title), a subtle 1px border in translucent white (#FFFFFF12), and rounded corners (8px). Content inside uses monospace for headers and proportional for body. - **Zen breathing spaces:** Between sections, full-width viewport gaps (40vh minimum) contain only a single decorative element -- a raked-sand SVG pattern, a slowly pulsing circle, or a single kanji character at massive scale (200px+) in ultra-low opacity (4%). - **Mixed-media inserts:** Scattered throughout, small "windows" (200x150px) show mixed-media compositions -- line drawings overlaid with glitch textures, ASCII art gradients, photographed stone textures with terminal text overlays. ## Typography and Palette **Fonts:** - **Headlines/Terminal:** "Share Tech Mono" (Google Fonts) -- a clean monospace with slightly rounded terminals that feels like a modern interpretation of classic CRT typefaces. Used for section headers, the opening sequence, and all "command" text. Size: clamp(20px, 3vw, 36px). - **Body text:** "Libre Baskerville" (Google Fonts) -- a refined serif that provides warm contrast against the cold terminal headers. Its classical proportions evoke the contemplative scholarly quality that balances the tech aesthetic. Weight 400, line-height: 1.8 for maximum readability. Size: clamp(16px, 1.8vw, 20px). - **Accent:** "Noto Sans JP" (Google Fonts) -- used sparingly for decorative Japanese characters in the zen breathing spaces, connecting the terminal world to the garden metaphor. **Color Palette -- Translucent Frost Terminal:** - **Terminal Dark:** #0D1117 -- the deep background, like looking into a powered-down screen - **Phosphor Green:** #39FF85 -- the primary accent, CRT phosphor glow for commands and highlights - **Frost Glass:** #FFFFFF0D (white at 5%) -- the translucent frost panel backgrounds with backdrop-filter - **Zen Stone:** #8B8589 -- muted warm gray for secondary text and decorative elements - **Cursor Amber:** #FFBE0B -- secondary accent for warnings, cursor blinks, and warm highlights - **Ice Blue:** #63C5DA -- tertiary accent for links and interactive states - **Deep Ink:** #161B22 -- slightly lighter than Terminal Dark for card/panel backgrounds ## Imagery and Motifs **Core visual motifs:** - **Flowing curves (zen sand):** SVG patterns of parallel curved lines, mimicking the raked patterns in Japanese zen gardens. These appear as background decorations in the breathing spaces between sections, rendered in Zen Stone at 6-10% opacity. The curves animate subtly -- a slow lateral drift (translateX oscillation over 60s) suggesting wind over sand. - **Terminal cursor pulse:** The blinking cursor (a 2px-wide, 20px-tall rectangle in Phosphor Green) appears throughout as a recurring motif -- at the end of headings, beside navigation items, and as a loading indicator. It blinks with a stepped animation (opacity snaps between 0 and 1, no easing) at 1.2s intervals. - **Mixed-media panels:** Small rectangular compositions that layer different visual treatments: a base layer of noise texture (CSS background with SVG feTurbulence), a middle layer of line illustration (thin SVG paths), and a top layer of terminal text at low opacity. These panels float in the negative-space columns. - **Translucent glass containers:** Content panels use backdrop-filter: blur(16px) with a faint border (1px solid rgba(255,255,255,0.06)) creating a frosted-glass effect against the dark background. A subtle inner shadow (inset 0 1px 0 rgba(255,255,255,0.04)) adds depth. - **ASCII art transitions:** Between major sections, decorative ASCII art patterns (made from repeating characters like dots, dashes, and slashes) form abstract shapes -- waves, circles, mountain silhouettes -- rendered in Zen Stone at 12% opacity. ## Prompts for Implementation **Full-screen narrative experience:** The site is experienced as a text-adventure journey. The opening is pure terminal: dark screen, cursor appears, text types itself character by character (40ms per character via CSS animation with steps()). After the welcome message, the "room description" fades in within a frost-glass panel. Each subsequent section is a new "room" in the quest. **Typewriter entrance for headings:** Every section heading types itself when scrolled into view. Implement with CSS `@keyframes typing` using `steps()` function and `overflow: hidden; white-space: nowrap; border-right: 2px solid #39FF85` that blinks after typing completes. **Bounce-enter for content panels:** Frost-glass content panels enter with a gentle bounce animation -- translateY(30px) to translateY(0) with a cubic-bezier(0.34, 1.56, 0.64, 1) overshoot. Stagger sibling elements with a 100ms delay increment. **Zen breathing animations:** In the spacing sections, the decorative elements have perpetual subtle motion: zen-sand curves drift, large kanji characters pulse opacity (3% to 6% over 8s), and ambient particle dots (2px circles in Phosphor Green at 10% opacity) drift upward slowly like dust motes. **Asymmetric scroll behavior:** Content sections slide in from alternating sides. Left-anchored sections enter with translateX(-40px) to translateX(0); right-anchored sections mirror this. Use IntersectionObserver with threshold: 0.1 to trigger. **Interactive terminal prompt:** At the bottom of the page, a functional (decorative) terminal prompt accepts typed input. Any key press produces Phosphor Green characters. Pressing Enter triggers a fade-to-next-section or displays a pre-written "quest complete" message with ASCII art. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No bright white backgrounds. No card grids. No stock imagery. The visual world is entirely constructed from typography, geometry, and texture. ## Uniqueness Notes **Differentiators from other designs:** 1. **Terminal-meets-zen-garden conceptual fusion:** While terminal aesthetics and zen aesthetics both exist in the design vocabulary, their deliberate combination -- CRT phosphor green against raked sand patterns, monospace commands beside Japanese calligraphy -- creates a unique conceptual space not found in other designs. 2. **Asymmetric alternating content flow:** The zigzag left-right content placement (60/40 split alternating) with atmospheric elements filling the negative space creates a reading rhythm that is neither centered nor single-column but a deliberate spatial conversation. 3. **Text-adventure narrative structure:** Framing the entire page as rooms in a text adventure (with typed "commands" as section headers and "room descriptions" as content) is a unique storytelling device that ties directly to the "quest" domain name. 4. **ASCII art as decorative transitions:** Using ASCII character patterns (not images, not SVG illustrations, but actual text characters arranged into shapes) as section dividers is a distinctive technique that reinforces the terminal aesthetic without departing from it. 5. **Interactive terminal prompt footer:** A functional text-input element at the page bottom that responds to keystrokes creates a closing interactive moment unique to this design. **Planned seed/style:** aesthetic: terminal, layout: asymmetric, typography: retro-display, palette: translucent-frost, patterns: bounce-enter, imagery: mixed-media, motifs: flowing-curves, tone: zen-contemplative **Avoided overused patterns:** Centered layout (90%), card-grid (70%), parallax (85%), cursor-follow (75%), mono typography (85%), gradient palette (95%), warm palette (80%), mysterious-moody tone (60%). Instead uses asymmetric (35%), bounce-enter (10%), retro-display (0%), translucent-frost (rare), and zen-contemplative tone (25%).