# Design Language for conc.quest ## Aesthetics and Tone conc.quest is a **concurrent dungeon crawl** — a site that visualizes software concurrency as a heroic, turn-based adventure happening on many boards at once. The domain reads as "concurrent quest," and the design takes this literally: multiple parties of adventurers (threads, goroutines, actors) simultaneously explore, fight, deadlock, recover, and rendezvous across an isometric dungeon. The aesthetic is **isometric pixel-art crossed with terminal telemetry** — the charm of a hand-pixeled 1994 CRPG fused with the diagnostic austerity of a distributed-tracing dashboard. Picture Ultima VII or The Faery Tale Adventure rendered as a log stream: every hero-step emits a line of structured JSON, every battle produces a flame graph, every treasure chest is a mutex release. The tone is **playful-scholarly** — half-dungeon-master, half-computer-scientist. Copy reads like the commentary track of a veteran speedrunner who studied under Leslie Lamport. The site is confident that concurrency and quest narratives are the same story — both are about parties of independent actors, imperfect information, shared resources, contested turns, and the emergent drama of coordination. No glassmorphism, no gradient seas, no vague "innovation" lexicon. Just pixels, logs, and the clean syntax of parallel execution. Nothing floats ethereally. Everything stands on a tile. Everything emits a log line. Everything waits its turn — or doesn't, and the site shows what happens when it doesn't. ## Layout Motifs and Structure The layout is a **tripartite isometric dungeon + vertical telemetry rail**. Three logical zones coexist on a single long page, and the eye learns to read them in a Z-pattern that turns horizontal: **Zone A — The Dungeon Board (left 62% of viewport, sticky on scroll):** A full-bleed isometric dungeon grid drawn in CSS with a 2:1 pixel ratio (64px × 32px tiles). The grid is 16 tiles wide by N tiles tall, where N grows as you scroll. Tiles are chiseled stone, moss, water, torchlight, and void. Three hero sprites (a Knight, a Ranger, a Scribe — each representing a concurrent worker) occupy the board simultaneously. As the viewer scrolls, the heroes do NOT move in lockstep: the Knight descends fast, the Ranger pauses at junctions, the Scribe often teleports backward to re-read a room. This desynchronization IS the narrative — the viewer sees concurrent execution made legible. **Zone B — The Log Rail (right 32% of viewport):** A vertical monospaced terminal that streams a live log of every sprite's actions, formatted as timestamped JSON-ish records: ``` [t=0.842s] knight ├ entered(room=3) [t=0.844s] ranger │ waiting(lock=bridge) [t=0.851s] scribe ├ read(tome=iv) → 2048 bytes ``` The log auto-scrolls but pauses when the cursor hovers it. Lines are color-coded per-hero. Indentation tree-characters (├ │ └) render the causal fork structure of the quest. **Zone C — The Turn Ticker (bottom 6% of viewport, pinned):** A narrow horizontal band showing the current logical clock as a row of 64 tiny pixel glyphs representing scheduled turns. Completed turns glow amber; pending turns are cold gray; contended turns (where two heroes want the same tile) pulse red. **Scroll behavior:** Scroll drives a **logical clock**, not a camera. As the user scrolls down, Lamport time advances. At milestone timestamps, major narrative rooms unlock on the board, and the log rail punctuates with section dividers drawn as ASCII boxes. The entire experience is thus a playthrough log where scrolling = time passing = concurrent progress. **Breakpoints:** At widths below 900px, the dungeon board collapses to a 2D top-down view (still pixel, still tiled), and the log rail slides underneath as a horizontal-scrolling marquee. Mobile preserves the concurrency metaphor; it does not hide it behind a hamburger. ## Typography and Palette **Typography:** - **Display / Hero text:** "VT323" (Google Fonts) — a CRT-terminal monospaced display face by Peter Hunt. Used for section titles at clamp(2.5rem, 6vw, 5.25rem) with no letter-spacing adjustment. VT323 carries the flickering-phosphor DNA of 1970s green-screens; here it's rendered in amber to evoke the old monochrome monitors of the Three Rivers PERQ and the original Space Cadet pinball table. - **Body / Narrative copy:** "IBM Plex Mono" (Google Fonts) at 15px / 1.7 line-height. Plex Mono's slight warmth and its distinctive dotted zero read as programmer-humane, not brutalist. Body copy is set in ragged-right blocks of 54ch, simulating well-commented source. - **UI / Labels / Log rail:** "JetBrains Mono" (Google Fonts) at 13px, weight 500, with ligatures enabled. The ligatures matter: `>=`, `!=`, `->` render as the symbols programmers recognize, reinforcing the code-as-narrative fusion. - **Accent / Numerals:** "Silkscreen" (Google Fonts) — a pixel-perfect bitmap font — used exclusively for the turn counter at the bottom and for the HP/coordinates overlays on sprites. Silkscreen must be rendered at 8px, 16px, or 24px only (never scaled arbitrarily) to preserve its 1:1 pixel grid. **Palette (eight-color CGA-tribute, curated not literal):** - `#0f0e17` — **Void Black**: page background, unexplored tiles. Deeper than pure black; has a trace of midnight blue. - `#fffffe` — **Parchment White**: primary text on dark, scroll glyphs. The off-white preserves contrast without CRT bloom. - `#e0b760` — **Torchlight Amber**: VT323 headings, completed-turn markers, treasure glints. The dominant accent. - `#7f5af0` — **Arcane Violet**: the Scribe hero, locks, magical overlays. Cool counterpoint to torchlight. - `#2cb67d` — **Moss Green**: the Ranger hero, successful acquisitions, "ok" log entries. - `#d84a4a` — **Dragon Red**: the Knight hero, contention warnings, deadlock indicators. Reserved strictly for danger and heat. - `#4b5563` — **Stone Gray**: walls, structural rules, pending-turn glyphs. - `#16213e` — **Deep Well Blue**: water tiles, shadow cast under sprites, inactive panels. The palette is **indexed** — every color on the page must be one of these eight. No gradients. No interpolated midtones. If a shadow is needed, it is a 2px offset of Deep Well Blue, not a blur. ## Imagery and Motifs **Core motif — The Concurrent Dungeon Map:** An isometric dungeon drawn with CSS `transform: matrix(1, 0.5, -1, 0.5, 0, 0)` applied to a flat grid of `div` tiles. Each tile is a 64×32px pixel-art sprite rendered either as a base64 data URI (for torches, chests, doors) or as a pure CSS gradient-stack that mimics pixel-art (for stone floors, moss patches, water). Tiles are NEVER image files from stock sources — they are either hand-composed CSS or sub-1kb SVG. **Three hero sprites — each 32×48px, 4-frame walk cycle:** - **Sir Critique, the Knight (#d84a4a):** helmet with a pixel-plume, square shield, sword-drawn stance. Represents the aggressive thread that grabs locks fast and apologizes later. Emits red log lines. - **Fenn Yield, the Ranger (#2cb67d):** hooded cloak, longbow, patient stance. Represents the cooperative thread that waits on conditions and yields gracefully. Emits green log lines. - **Loga the Scribe (#7f5af0):** robed, quill in hand, always pointing at a floating scroll. Represents the observer / logger / async-auditor. Emits violet log lines. All three sprite sheets are drawn on a 4×12 grid (48 frames total) and animated via `background-position` steps — classic sprite animation, no GIFs, no WebM, no runtime canvas. **Secondary motifs:** - **The Mutex Altar**: a pedestal tile with a pulsing amber rune. When two heroes approach simultaneously, the rune turns red and one hero visibly halts mid-step, held by a shimmer of Arcane Violet. - **Chest of Returned Values**: small pixel-art chests that open with a staggered particle burst (8 pixels max). The loot inside is always rendered as a JSON fragment that flies into the log rail. - **ASCII room dividers**: Between major narrative rooms, a full-width decorative band drawn in pure Unicode box-drawing characters (═ ║ ╔ ╗ ╚ ╝ ╠ ╣) in Torchlight Amber, naming the room in Silkscreen: `╠══ ROOM IV: THE PHILOSOPHERS' TABLE ══╣`. - **Circuit veins**: Very subtle, at 6% opacity, traces of circuit-board pathways run underneath stone floor tiles, visible only when the viewer's cursor hovers. This hints that the dungeon IS a processor die. - **No photography. No stock illustration. No 3D render. No gradient mesh.** Every visible pixel is either drawn (SVG/CSS), typed (Unicode), or logged (text). ## Prompts for Implementation **Narrative arc across the scroll:** 1. **Room I — The Fork (0–600px scroll):** The page loads showing a single hero glyph (silhouette) in the upper-center of the dungeon. The log rail prints `[t=0.000s] main ┬ spawning workers`. After 400ms, the silhouette splits with a soft pixel-shatter into three distinct hero sprites. The log rail records three `fork()` lines, indented. This is the moment of concurrency birth. 2. **Room II — The Corridor Race (600–1600px):** The three heroes descend a long corridor. They move at independent speeds tied to `scrollY` via modular arithmetic — the Knight's position is `scrollY * 1.7 mod tileHeight`, the Ranger's is `scrollY * 1.0 mod tileHeight`, the Scribe's is `scrollY * 0.6 + sin(scrollY*0.01) * 8 mod tileHeight`. The result is that they drift in and out of alignment — occasionally all three on one row, more often in visible disarray. The log rail narrates each tile transition. 3. **Room III — The Bridge (1600–2400px):** A single-tile-wide bridge over water. Only one hero can cross at a time. Whoever arrives second visibly stops, and the log rail prints a `waiting(lock=bridge)` entry with a pulsing dot animation. When the first hero reaches the far side, the waiter resumes with a `acquired(lock=bridge)` line. 4. **Room IV — The Philosophers' Table (2400–3400px):** A round table with five pixel forks between five chairs. The dining philosophers problem. Heroes attempt to pick up adjacent forks; deadlock occasionally visibly occurs (all three frozen, red pulse band appears at the bottom). The site offers a button labeled `inject_banker()` in the log rail that, when clicked, reorders acquisitions and unfreezes the scene. This is the only interactive button on the page and it breaks deadlock only — it does NOT submit a form, buy a product, or sign up a user. 5. **Room V — The Rendezvous (3400–4200px):** All three heroes arrive at a chamber with a single glowing sigil. They stand on three points of a triangle. The sigil activates only when all three are present. A short ASCII-art sequence plays out on the log rail, culminating in `[t=42.000s] main └ join() complete`. The dungeon board fades to Void Black, leaving only the three sprites glowing. 6. **Room VI — The Epilogue Map (4200px+):** A full-dungeon overview zooms out (CSS `transform: scale(0.25)`), revealing the entire path traversed as a bright trail on the board, with each hero's route in their signature color. The three trails weave, diverge, and reunite. This is the final image: concurrent execution rendered as topology. **Animation principles:** - Use `@keyframes steps(N)` for every sprite animation — never linear interpolation. Pixel art MUST step, not slide. - Hero walk cycles: 4 frames × `steps(4)` × 400ms duration. Idle cycles: 2 frames × 1200ms. - The log rail uses `will-change: transform` and a raf-driven queue; new lines fade in (80ms opacity 0→1) and old lines drift up with a 60fps transform. - Scroll-driven position updates use `ResizeObserver` + `IntersectionObserver` + a single `requestAnimationFrame` loop. Do NOT attach scroll listeners per-sprite. - Respect `prefers-reduced-motion`: heroes still appear in their final positions, log rail still streams (text is core content, not motion decoration), but sprite walk cycles halt and scroll-coupled position modulation becomes discrete (snap to tile boundaries only). **Content rules:** - AVOID calls-to-action. No "Sign up." No "Get started." No "Book a demo." The site is an essay-as-experience about concurrency. Its only interactive affordance is `inject_banker()` in Room IV. - AVOID pricing blocks, stat grids, feature comparison matrices, testimonial carousels, and client logo rows. None belong here. - Copy voice: first-person plural from the heroes' perspective interleaved with third-person from the game master. Example: *"We entered the corridor at t=0.842s. The Knight did not look back. Loga, scribing, noted the silence — eleven locks held, two contested, one forgotten."* - Every number on the page is a real timestamp, coordinate, or byte count rendered in Silkscreen or JetBrains Mono. No decorative numerals. **Full-screen narrative emphasis:** The site is a single continuous story with no breadcrumbs, no section jump-nav, no "return to top." The only navigation is the scroll. The only interaction is the one deadlock-breaking button. This is a **reading experience**, not a product page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Scroll as Lamport clock, not camera.** Most parallax and scroll-driven designs treat scrollY as a vertical camera position through a scene. conc.quest reinterprets scrollY as **logical time in a distributed system** — a causal ordering that advances all three heroes independently using different modular functions. No other design in the collection treats the scrollbar as a time abstraction. This is the first site here where scrolling backward is conceptually legal (it rewinds time) and scrolling forward does NOT equal "moving down." 2. **Three simultaneous protagonists with independent motion.** Every other narrative design in the collection has one focal subject (a hero, a logo, a camera path). conc.quest has three peer protagonists with desynchronized motion curves — this is the literal rendering of concurrency. The viewer's eye must split attention across three moving agents plus a streaming text log, which is itself a skill the site is quietly teaching. 3. **Indexed eight-color palette with zero gradients.** Amidst a collection where 98% of designs use gradients, conc.quest forbids them. Every pixel is one of eight indexed colors, enforcing the pixel-art contract at the CSS level. Shadows are solid-color offsets, not blurs. This is a visual austerity no other site here commits to. 4. **Pure CSS + SVG isometric dungeon.** No WebGL, no Canvas, no image files for the tile map, no Three.js, no Pixi. The entire dungeon board is CSS transforms on flat divs with a handful of sub-1kb SVG sprites. This is a technical differentiator: the site performs the concurrency metaphor in vanilla browser primitives, not in a game engine. 5. **Terminal log as co-equal visual mode.** Many designs use decorative monospace; conc.quest uses a live-streaming terminal log as **half the page**, rendering it as a first-class compositional element on par with the dungeon board. The log is not a detail panel; it is the site's second eye. 6. **No CTAs, no pricing, no testimonials, no signups.** The site has exactly one button (`inject_banker()`) and its only purpose is to resolve a deadlock visualization. This is an uncompromising rejection of the conversion-funnel web that no other design in the collection equals. 7. **The Dining Philosophers as actual interactive section.** Classic computer-science problems are rarely rendered as visual vignettes on websites. Room IV executes the dining philosophers deadlock, displays it, and offers the banker's algorithm as a one-click resolution. It is at once an educational artifact and a design flourish. **Chosen seed:** experimental type layout **Avoided overused patterns (per frequency analysis):** - No **corporate** aesthetic (91% overused) — replaced with pixel-art/terminal hybrid (each ≤11%). - No **card-grid** layout (95% overused) — replaced with isometric tile grid + vertical log rail. - No **centered** layout (88% overused) — asymmetric 62/32/6 horizontal split. - No **gradient** palette (98% overused) — indexed eight-color palette with zero interpolation. - No **warm** palette bias (96% overused) — cool-dominant (Void Black, Deep Well Blue, Stone Gray) with warm accent (Torchlight Amber) held back for emphasis. - No **photography** imagery (95% overused) — zero photos, all hand-composed CSS/SVG pixel art. - No **scroll-triggered** fade-in choreography (93% overused) — scroll drives logical time and modular position math, not opacity waypoints. **Preferred underused patterns embraced:** - **terminal** (11%) — the log rail is a full terminal component. - **isometric** (8%) — the dungeon board. - **pixel-art** (3%) — the sprites and tiles. - **anti-design** (3%) — the explicit rejection of the conversion web. - **circuit motif** (6%) — the subtle circuit veins under the stone. - **sharp-angles** — tile corners, no rounded anything. - **tech-mono typography** (rarely seen specifically) — VT323 + IBM Plex Mono + JetBrains Mono + Silkscreen, four monospaces in harmony.