# Design Language for concurrent.quest ## Aesthetics and Tone concurrent.quest is a **neon-lit reading room at the end of the multiverse** — the aesthetic of a scholar who has wired their oak-panelled study directly into a particle accelerator. Dark-academia's reverence for deep learning collides head-on with dopamine-neon electricity: mahogany bookshelves backlit by magenta plasma, chalkboard equations rewritten in chromatic aberration, the *questus perpetuus* — the never-ending pursuit — rendered in simultaneous, branching tracks of light. The word "concurrent" is taken literally and visually: multiple quests run in parallel, side by side, none subordinate to the other. The page does not tell a single linear story; it holds several in tension, each glowing at a different frequency. The visitor is not a passive reader — they are a thread joining the execution pool. Tone is **friendly-scholarly**: erudite without intimidation, neon without chaos. Think a graduate student who annotates their textbooks in highlighter and laughs loudly in the library. Warmth lives in the typography, electricity in the colour, depth in the geometry. **Mood references:** the chalk annotations on the glass in *A Beautiful Mind*, a CERN control room at 3 AM, a university common room with all the lights off except the monitors, the feeling of understanding two hard things at the same time. The aesthetic is **dark-academia electrified** — deep ink backgrounds, aged parchment undertones, but every surface is threaded with hairline neon circuits and sharp diagonal cuts of violet and acid-green light, as if someone ran 40,000 volts through a Bodleian manuscript. ## Layout Motifs and Structure **Parallax-sections** is the structural spine. The page is composed of five discrete full-viewport sections, each with its own depth-stack (foreground, midground, background) moving at different scroll speeds — but the parallax is *precise*, not decorative. Each section represents one concurrent quest-thread; as you scroll, the threads visually interlock like a context-switch. **Thread-stripe geometry.** Every section boundary is a sharp diagonal cut at exactly 7°, not horizontal. The cut alternates left-lean / right-lean between sections, creating a continuous Z-path that mirrors the concurrency metaphor: threads passing control back and forth. The diagonal is 4px wide, filled with a neon gradient from `#B026FF` (violet plasma) to `#39FF14` (acid green), and carries a faint animated shimmer (CSS `@keyframes` shimmer, 2s loop). **Section layout anatomy:** - **Section 1 — The Foyer (100svh):** Centered, dark ink canvas. The wordmark `concurrent.quest` set at massive scale, its two words stacked and offset by 30% on the horizontal. Behind it, a parallax layer of sharp angular geometric forms (rhombi, truncated hexagons) floats at 0.3x scroll speed. A second layer of hairline circuit-traces at 0.6x. The foreground text at 1.0x. - **Section 2 — Thread Alpha (100svh):** Asymmetric split. Left 55% is deep-ink text column; right 45% is a geometric-abstract composition (sharp intersecting planes of neon, rendered as SVG). Parallax: background geometry moves up as foreground text moves down. - **Section 3 — Thread Beta (100svh):** Full-bleed, horizontally reversed. Right 55% text, left 45% geometric. The background layer is a dense angular grid, parallax offset 0.4x. - **Section 4 — The Convergence (100svh):** Center-dominant. Two threads visually merge into a single focal point — a sharp-edged rhombus at centre screen, glowing, into which both text columns converge. This is the emotional climax of the scroll. - **Section 5 — The Invitation (100svh):** Sparse. Almost empty. A single line of text at vertical centre, a minimal angular emblem below it, and the domain wordmark fading in from below on scroll completion. **No nav bar** — navigation is the scroll itself. A persistent vertical progress rail on the right edge (2px, neon gradient) shows position. **On mobile:** sections collapse to single-column; diagonal cuts preserved; parallax disabled (sections become static); the vertical progress rail becomes a horizontal bar at bottom. ## Typography and Palette **Typography — variable-fluid, all from Google Fonts.** The typographic system uses three variable fonts tuned across two axes to communicate concurrency: one font for the scholarly voice, one for the electric pulse, one to bridge them. - **Display / Wordmark:** *Fraunces* (Google Fonts variable, axes: opsz 9→144, wght 100→900, SOFT 0→100, WONK 0→1). Used at `clamp(4rem, 12vw, 9rem)` for the site wordmark. `font-variation-settings` animate WONK from 0 to 1 on page load over 1.2s, making the letterforms shift from rigid to slightly organic — the scholar loosening their collar. Tracked at -0.02em. Color: `#F5EDD6` (warm parchment). - **Body / Prose:** *Literata* (Google Fonts variable, axes: opsz 7→72, wght 300→700, ital 0→1). Body text at `clamp(1rem, 1.4vw, 1.2rem)`, optical size locked to match rendering size. Line-height 1.72. Color: `#D4C9A8` (aged paper) on dark backgrounds. The workhorse serif — warm, readable, academically credible. - **Accent / Labels / UI:** *Space Grotesk* (Google Fonts, wght 300→700). Used at 0.75rem–0.9rem for section labels, thread identifiers (`THREAD_ALPHA`, `THREAD_BETA`), and the navigation rail. All caps, tracked at 0.18em. Color: `#B026FF` (violet plasma) for active states, `#6B6470` (muted scholar) for inactive. **Palette — dopamine-neon on dark-academia ink:** | Name | Hex | Role | |---|---|---| | Ink Black | `#0D0B14` | Primary background — deep indigo-black, not pure black | | Scholar Night | `#1A1628` | Secondary surface, section midgrounds | | Parchment | `#F5EDD6` | Primary text, wordmark | | Aged Paper | `#D4C9A8` | Body text, secondary copy | | Violet Plasma | `#B026FF` | Primary neon accent — section dividers, active states, hover glows | | Acid Green | `#39FF14` | Secondary neon accent — convergence moments, hover highlights | | Amber Circuit | `#FFB703` | Tertiary warm neon — footnotes, scholarly annotations, thread markers | | Muted Scholar | `#6B6470` | Inactive states, meta text | | Deep Burgundy | `#3D0C2E` | Section 4 midground tint — convergence warmth | **No white.** The lightest value is parchment `#F5EDD6`. The darkest is `#0D0B14`. The neons are used sparingly — 10% of any viewport at maximum — so they feel like discovered light, not wallpaper. ## Imagery and Motifs **Geometric-abstract** is the exclusive imagery vocabulary. No photography, no 3D renders, no illustrations of people. All imagery is sharp-angled SVG geometry — a system of intersecting planes, rhombi, truncated polygons, and angular lattices that suggest both academic diagrams and circuit topology simultaneously. **The Concurrent Thread Glyph.** The site's primary motif is a custom 3-element SVG emblem: two sharp diagonal lines (representing parallel threads) converging at a central angular nexus point, with a third bisecting line showing the point of synchronisation. It appears at multiple scales — as a favicon at 32px, as a decorative mark at 120px in section headers, and as a massive 800px background element in Section 4 (the Convergence), where it glows with a radial neon gradient from `#B026FF` at center to transparent at 60%. **Angular Lattice System.** Behind every section, a layer of thin-line geometric lattice — hexagonal cells truncated into irregular polygons by the 7° diagonal cuts — rendered in SVG at 1px stroke, color `#B026FF` at 8% opacity. The lattice does not tile uniformly; each cell is manually nudged 0–15% in position, creating a hand-drawn irregular quality. On scroll, individual lattice cells animate their stroke-dashoffset at random intervals (0.8s–3.2s), as if electricity is conducting through the grid. **Sharp edge motifs:** - Diagonal section-break chevrons (7° cuts) in neon gradient - Rhombus bullet points (`◆`) at 0.65em for all unordered lists - Angular bracket glyphs (`⟨ ⟩`) around thread labels and footnotes - Hairline underscores that are not straight lines but zigzag at ±2px amplitude (SVG `` with slight sawtooth, 6px wavelength) **No decorative borders** — all containment is achieved through negative space and the diagonal cuts. The geometry IS the ornamentation. ## Prompts for Implementation Build concurrent.quest as **five parallax sections scrolled as a single narrative thread-journey** — the visitor is a process entering the execution context and running to completion. No CTA blocks, no pricing, no testimonials, no stats grids. Storytelling and visual atmosphere only. **Global setup:** - CSS custom properties for all palette values at `:root` - `scroll-behavior: smooth` on html; but use `IntersectionObserver` for section activation, not scroll events - Three CSS layers: `base` (reset, variables), `layout` (sections, parallax), `motion` (all transitions, animations) - Variable font loading: `@font-face` with `font-display: swap` for all three faces; preload the variable woff2 files - Parallax via CSS `transform: translateY()` driven by a single `requestAnimationFrame` loop — no library. Store scroll position in a ref, update only on animation frame. Respect `prefers-reduced-motion`: collapse all parallax to `0` offset when true. **Section 1 — The Foyer:** ``` Background (0.3x parallax): SVG lattice layer, `#B026FF` at 8% Midground (0.6x): 5 rhombi shapes, varying sizes 80px–240px, filled #1A1628, stroked #B026FF 1px, slight drop-shadow glow Foreground (1.0x): - Wordmark `concurrent` at clamp(4rem,12vw,9rem), Fraunces, parchment - `.quest` on next line, same size, indented 30%, acid green #39FF14 - Below: tagline in Literata at 1.1rem, aged paper: "multiple quests. one execution context." - Scroll indicator: three animated rhombus dots (◆◆◆) bouncing at 0.3s stagger ``` **Section 2 — Thread Alpha:** ``` Background: angular lattice at 0.4x parallax, cells activating at random Main: 55/45 split (CSS grid: `grid-template-columns: 55fr 45fr`) Left: prose column in Literata, describing "the first quest" (site's purpose/description) Right: SVG composition — 3 intersecting sharp planes, colors #B026FF, #39FF14, #FFB703 - SVG planes animate stroke-dashoffset on section enter (IntersectionObserver, threshold 0.3) - Draw-on effect: 0.6s per plane, staggered 0.2s Section label: `⟨ THREAD_ALPHA ⟩` in Space Grotesk, violet plasma, top-left ``` **Section 3 — Thread Beta:** ``` Background: dense angular grid at 0.35x parallax, opposite direction to Section 2 Main: 45/55 split, reversed (right: text, left: geometry) Left: SVG — same angular plane system, but rotated 180°, palette inverted (acid green dominant) Right: prose column, Thread Beta description Section label: `⟨ THREAD_BETA ⟩`, acid green, top-right ``` **Section 4 — The Convergence:** ``` Background: deep burgundy #3D0C2E tint over ink black, 0.2x parallax Center: large Thread Glyph SVG (800px), glowing radial gradient #B026FF→transparent Both text columns from S2/S3 visually converge: use CSS animation to translate left text in from -20vw and right text from +20vw on section entry, meeting at center The glyph simultaneously scales from 0.6 to 1.0 (cubic-bezier spring) Section label: `⟨ CONVERGENCE ⟩` in both violet and green on alternating characters ``` **Section 5 — The Invitation:** ``` Nearly empty. Ink black. One line of Literata at 1.4rem, parchment: "begin your concurrent quest." Below: Thread Glyph at 60px, amber circuit color Domain wordmark `concurrent.quest` fades in from `opacity: 0, translateY(20px)` to `opacity: 1, translateY(0)` on final scroll trigger No button. No form. Just the name and the invitation. ``` **Hover system (hover-lift pattern):** - All interactive rhombus and geometric elements: `transform: translateY(-4px) rotate(1deg)` on hover, `transition: 0.22s cubic-bezier(0.34,1.56,0.64,1)` (spring) - Text links: custom underline via `background: linear-gradient(#39FF14,#39FF14) no-repeat center bottom / 0% 1px` — on hover, width animates to 100% via `transition: background-size 0.3s ease` - The Thread Glyph emblem: on hover, all three strokes animate strokeDashoffset to create a pulsing "running" animation - The neon progress rail on the right: on hover, width expands from 2px to 6px with glow `box-shadow: 0 0 8px #B026FF` **Performance:** All SVG geometry is inline (no external requests). The variable fonts are the only external resources. The angular lattice uses one base SVG `` element referenced by `fill: url(#lattice)` — not duplicated. The parallax loop uses `will-change: transform` only on the active layer, removed on scroll end. ## Uniqueness Notes 1. **Dark-academia meets dopamine-neon as a deliberate collision, not a compromise.** Frequency analysis shows dark-academia at 4% and dopamine-neon at 4% — both rare. No existing design in the registry combines them. The genre tension (dusty scholarship vs. electric intensity) is the entire point: concurrent.quest IS the experience of pursuing multiple hard things simultaneously — the study hall lit by particle physics. 2. **Concurrency as structural metaphor.** The entire layout (two parallel sections, convergence, invitation) mirrors a concurrent execution model: spawn threads, run in parallel, join at synchronisation point, terminate. This is not decoration; the page's macro structure IS the content. No other design in the registry uses software architecture as its literal layout grammar. 3. **Diagonal section-break cuts at 7° with neon gradient fill.** The frequency analysis shows parallax-sections at 13% usage, but zero designs use diagonally-cut section boundaries with animated neon fills. The 7° angle is precise and consistent — not random — creating a Z-path visual rhythm across the full scroll. 4. **Fraunces + Literata + Space Grotesk — an unrepeated trio.** Fraunces's WONK variable axis (which shifts letterforms from rigid to quirky) is not used by any registry design. Literata as a body serif optimised for on-screen reading is absent from the registry. The combination of a warm scholarly serif body with a variable display face whose letterforms literally animate on load is a registry first. 5. **Seed:** aesthetic: dark-academia, layout: parallax-sections, typography: variable-fluid, palette: dopamine-neon, patterns: hover-lift, imagery: geometric-abstract, motifs: sharp-angles, tone: friendly. Avoided overused patterns from frequency analysis: parallax (94% — used as the *section structure*, not as a generic scroll effect), centered layout (93%), full-bleed (87%), photography imagery, dark-mode-neon aesthetic (separate from dark-academia), morph/fade-reveal patterns (high frequency).