# Design Language for undo.quest ## Aesthetics and Tone undo.quest is a **cabinet of erased certainties** — a séance room built from crumbling celestial charts and the smoke of undone actions. The domain word "undo" is read as an act of cosmic reversal: time does not merely pause here, it unravels in filaments, leaving behind a granular residue of what was. The atmosphere is occult-archival: think a Victorian astronomer's observatory whose brass instruments have been replaced by phantom keys and spectral star maps that dissolve the moment you reach for them. The aesthetic is **grainy-textured dark occultism** — every surface is dusted with film grain at 18–25% opacity, as if the page were printed on light-exposed astronomical plate glass. The grain is not decorative noise added on top; it is baked into background fills so that even flat color regions breathe and shift. Backdrops range from near-black indigo (#0d0b1a) to deep bruised violet (#1c1030), with the grain rendered as CSS `filter: url(#grain)` SVG turbulence fractal, regenerating every 4 seconds via a looped `feTurbulence` `baseFrequency` animation — the surface is perpetually alive. Tone is **mysterious-moody without irony**: no winking, no retro camp. The site feels like a genuine artifact recovered from a parallel timeline where every keystroke was logged by celestial cartographers. Visitors should feel they have accidentally opened something they were not meant to see. --- ## Layout Motifs and Structure The layout is a **broken-grid celestial atlas** — a composition that deliberately fractures the rectilinear and instead places content at eccentric angles, colliding zones, and intentional overlap, the way hand-annotated star charts layer ink strata over printed underlayers. **Macro Structure:** - A single continuous vertical scroll, but with no two consecutive sections sharing the same alignment axis. - Section 1 (the Vault Door): full-viewport black slab, centered wordmark, a single animated star ring orbiting the title. - Section 2 (the Ledger): a three-column broken grid where the left column is set at −3° rotation, the center column overflows 8% into the right gutter, and the right column is pushed down 140px from the top of its siblings — as if the page is a physical ledger whose pages slipped before binding. - Section 3 (the Map Room): a full-bleed horizontal zone with a star-field background, on which a large celestial grid overlay (SVG) is drawn at 1 px stroke, 12% opacity, hexagonal cell pattern, and content floats atop it at 0° — the only orthogonal zone, making it feel like a calm eye in the broken storm. - Section 4 (the Archive): staggered card stack — cards overlap each other at ±4°–8° rotations, appearing as a pile of archival pages someone is sorting. - Section 5 (the Dissolution): footer zone where the grid literally dissolves — the background grain increases to 40%, text fades to 30% opacity, and a single underline-draw animation traces a horizontal rule before the domain wordmark. **Spatial Rules:** - No centered layouts except Section 1. Asymmetry is mandatory. - Minimum gutter: 24px. Maximum overlap between adjacent elements: 32px. - All card/panel borders are 1 px, color #3a2e5c (muted purple), never box-shadow. - Rotated containers use `transform-origin: center` with CSS perspective to prevent flat tilt. --- ## Typography and Palette **Typography — art-deco-display vocabulary, Google Fonts only.** Three typefaces, each occupying a distinct stratum: - **Display / Wordmark:** *Cinzel Decorative* (Google Fonts) — used exclusively for `undo.quest`, section headings, and the single-word pull-quotes that punctuate the layout. Weight 700 (Bold). Set at `clamp(3.2rem, 7vw, 6rem)` for the hero wordmark, with letter-spacing `0.12em`. The art-deco geometry of Cinzel Decorative (classical Roman proportions + sharp serifs that echo engraved brass instruments) makes it read as celestial registry — official, ancient, absolute. - **Section Labels / Navigation:** *Cinzel* (non-decorative variant, Google Fonts) — weight 400, all-caps, `letter-spacing: 0.3em`, used for section labels, captions, and the underline-draw navigation bar. Set at 0.75rem for captions, 1rem for labels. - **Body / Prose:** *Cormorant Garamond* (Google Fonts) — weight 300 italic for atmospheric prose descriptions, weight 500 roman for functional body text. `font-size: clamp(0.95rem, 1.4vw, 1.1rem)`, `line-height: 1.75`. The contrast between Cormorant's extreme thin/thick strokes and the grain texture creates a slightly hallucinatory reading surface where text seems embossed from below. **Palette — deep-space gradient, no light themes:** - `#0d0b1a` — Near-void indigo (primary background, Section 1 and 5) - `#1c1030` — Bruised violet (section backgrounds, alternating) - `#2a1f4f` — Observatory purple (card interiors, lighter panels) - `#6b3fa0` — Medium violet (primary accent, borders, icon outlines) - `#c9a227` — Antique gold (accent, Cinzel text highlights, star icon fills) - `#e8d5b7` — Aged parchment (body text, prose, Cormorant Garamond text) - `#7b5ccc` — Soft cosmic violet (gradient midpoint, hover states) - `#f0e6c8` — Pale candlelight (wordmark color, highest-contrast text) **Gradient Usage (not generic - specific role):** The gradient palette is used for exactly two things: (1) the hero background — a radial gradient from `#2a1f4f` at center to `#0d0b1a` at edges, suggesting a lens focused on a void; (2) the celestial underline-draw strokes — a `linear-gradient(90deg, #6b3fa0, #c9a227)` that traces from left to right as the element enters viewport. No full-page gradient washes. The grain texture always sits above the gradient layer at `mix-blend-mode: overlay`. --- ## Imagery and Motifs **Icon-heavy vocabulary — no photography anywhere.** The site's visual language is built from a library of 48 custom thin-line celestial icons, each drawn at 1 px stroke on a 32×32 grid, rendered as inline SVG. Categories: - **Star glyphs:** eight-pointed stars (the primary motif), five-pointed conjunctions, triple-star clusters, novae with radiating short-stroke arms. - **Astronomical instruments:** orrery ring, quadrant arc, sextant silhouette (side view), transit instrument cross-section. - **Erasure symbols:** a backward-arrow contained in a circle (the "undo" glyph, the site's logo mark), a smudged circle (representing a deleted observation), a spiral ending in a disappearing tail. - **Celestial geometry:** ecliptic oval, meridian line, declination grid fragments, hour-angle tick marks. All icons use `stroke: #6b3fa0` default, `stroke: #c9a227` on hover, with a 0.3s `stroke` color transition and a simultaneous `filter: drop-shadow(0 0 4px #6b3fa0)` on hover. **Star-Celestial Motif Implementation:** - The hero wordmark is orbited by 7 eight-pointed star glyphs rotating at different speeds (fastest: 28s, slowest: 72s) via CSS `@keyframes rotate` on the individual glyphs' `transform-origin`. - The Section 3 Map Room contains a large SVG star atlas background (64 stars of varied sizes: 1.5px, 2.5px, 4px) with coordinate grid lines in `#3a2e5c` at 8% opacity. - Each section heading is preceded by a single large (32px) eight-pointed star icon that draws its four principal arms first (via stroke-dasharray animation) then the four diagonal arms — total draw time 0.8s, `ease-in-out`. - The footer dissolution section uses a field of micro-stars (1 px circles, 120 total) that fade out individually on a staggered timer, starting from the outermost and collapsing inward toward the wordmark over 3 seconds. **Grain Texture System:** An inline SVG `` containing `` followed by `` and ``. Applied as `filter: url(#grain)` on wrapper divs. The `baseFrequency` attribute is animated with a JS `requestAnimationFrame` loop that nudges it ±0.002 over 4 s for a living-grain effect. --- ## Prompts for Implementation Build undo.quest as a **single-scroll occult observatory record** where the visitor descends through layers of erased time. No CTAs, no pricing, no stat grids. Pure atmospheric storytelling. **Section Blueprint:** **Section 1 — The Vault Door (100svh)** Full viewport. Background: radial gradient `#2a1f4f` → `#0d0b1a`. Grain filter at 22%. Centered single column. At top: `Cinzel` label in gold `"UNDO.QUEST / ARCHIVE NO. ∞"` at 0.7rem, letter-spacing 0.4em. Center: the wordmark `undo.quest` in `Cinzel Decorative` 700 at `clamp(3.2rem, 7vw, 6rem)`, color `#f0e6c8`, tracking 0.12em, with the seven orbiting star glyphs. Below wordmark: a single line of `Cormorant Garamond` italic 300 prose: *"Some actions leave marks that outlast their reversal."* in `#e8d5b7`. At bottom: a single animated underline-draw arc (the undo circle-arrow logo) that traces itself over 1.2 s on page load. **Section 2 — The Ledger (auto height, min 80svh)** Three-column broken grid (column proportions: 28% / 44% / 28%). Left column: −3° CSS rotation, contains a vertical `Cinzel` label reading `"RECORD OF ERASURES"` and 3 stacked icon-cards with celestial erasure glyphs and 2-line `Cormorant` prose captions. Center column: overflows 8% into right gutter via negative `margin-right`, contains the main text block — a 400-word meditation on the nature of undoing written in `Cormorant Garamond` 500 at body size. Right column: offset 140px downward via `padding-top`, contains a star-glyph cluster illustration (inline SVG, 5 stars of varied sizes assembled into a loose constellation) and a `Cinzel` label `"COORDINATES LOST"`. Section background: `#1c1030`. Grain at 20%. **Section 3 — The Map Room (100svh)** Full bleed, `#0d0b1a` background. Full-coverage SVG star atlas layer (64 positioned stars + coordinate grid, see imagery section). Atop the atlas: a single centered content block — a large eight-pointed star (80px) drawing itself, below it a `Cinzel Decorative` heading `"THE LOCATION OF THE UNDONE"`, below that a 3×3 icon grid of astronomical instrument glyphs (each 40px) with `Cinzel` captions. This is the only orthogonal / centered section — intentional calm eye. The grid cells have `#2a1f4f` backgrounds, 1px `#3a2e5c` borders, and a gold underline-draw trace on hover. **Section 4 — The Archive (auto height)** Staggered card stack. Seven cards, each 340px × 220px, placed using CSS `grid` with explicit `grid-column` and `grid-row` placement to create deliberate overlaps. Cards rotate alternately at −5°, +4°, −3°, +6°, −4°, +3°, −6°. Each card: `#2a1f4f` fill, `#3a2e5c` 1px border, grain filter. Content: a title in `Cinzel` 400 caps + 2–3 lines of `Cormorant Garamond` prose describing a fictional erased moment. Card hover: rotation snaps to 0° over 0.4s `ease-out`, grain opacity drops from 22% to 8%, border shifts to `#6b3fa0`. Underline-draw animation traces the card's bottom border in gold on hover, left-to-right over 0.3s. **Section 5 — The Dissolution (60svh)** Background `#0d0b1a`. Grain escalates to 40% opacity. All text at 30% opacity except the final wordmark. A single horizontal rule is drawn via underline-draw animation as the section enters viewport. Below the rule: 120 micro-stars (1px `#6b3fa0` circles, positioned by polar-to-Cartesian math in JS from a center point) that fade out individually in staggered sequence, innermost first, over 3s as the visitor scrolls to the absolute bottom. Final element: `Cinzel Decorative` wordmark `undo.quest` in `#f0e6c8` at 1.5rem, with the undo circle-arrow icon beside it — this is the one element that does NOT dissolve. **Animation Contracts:** - All `stroke-dasharray` draw animations: trigger on `IntersectionObserver` at 20% threshold, `once: true`. - All grain fluctuations: `requestAnimationFrame`, capped at 30fps, paused on `prefers-reduced-motion`. - Star orbits: CSS-only `@keyframes`, no JS. - Staggered micro-star dissolution: `setTimeout` waterfall seeded from innermost index, capped at 3s total. - Card rotation snaps: CSS `transition: transform 0.4s ease-out` only. --- ## Uniqueness Notes 1. **Living grain as a primary texture system (registry first for this scope).** Most designs that use grain apply it as a static CSS `background-image: url()` bitmap or a simple SVG noise layer. undo.quest makes the grain itself animated — the `feTurbulence baseFrequency` nudges continuously in an rAF loop, so the entire page surface breathes. This is a distinct implementation approach not documented in any existing design in the registry. 2. **Broken-grid used as a temporal metaphor, not a style gesture.** The frequency report shows `broken-grid` at 7%, but in those designs it is an aesthetic choice (asymmetric = modern). In undo.quest the rotation and offset values are narratively motivated: −3° is the angle a ledger page tilts when the binding is old, +140px vertical offset represents a line skipped by a distracted astronomer. Every structural decision has an in-universe justification. 3. **Seven-orbit star system as the primary logo animation.** No other design in the registry uses multi-speed orbiting glyph rings around a wordmark. The orbital speeds (28s–72s) are chosen to be mutually prime (non-resonant), so the configuration never repeats within a human viewing session — the visitor will never see the same arrangement twice. 4. **Staggered micro-star dissolution tied to scroll completion.** The footer behavior (120 individual micro-stars fading from outermost inward as the visitor reaches absolute bottom) treats scroll-completion as a narrative event — the cosmos contracts as you reach the end. No other design in the registry uses scroll-completion as a trigger for a dissolving scene. 5. **Documented seed:** `aesthetic: grainy-textured, layout: broken-grid, typography: art-deco-display, palette: gradient, patterns: underline-draw, imagery: icon-heavy, motifs: star-celestial, tone: mysterious-moody`. 6. **Avoided overused patterns:** `gradient` palette is used at 76% frequency in the registry — undo.quest deliberately constrains gradient usage to two specific roles (hero radial focus + underline-draw stroke) rather than using washes, mesh-gradients, or full-page sweeps. This ensures the seed element is present but not deployed generically.