# Design Language for logic.quest ## Aesthetics and Tone logic.quest is a **surrealist logic engine** — the visual language of a dream that keeps insisting it is rational. Imagine a Magritte painting commissioned by a 22nd-century philosophy department: bowler-hatted theorems floating in midnight sky, the sky itself composed of interlocking syllogisms, every shadow cast in the wrong direction but with perfect geometric precision. The aesthetic is surrealism that has swallowed formal logic and cannot digest it. It is not whimsical. It is eerie, cold, beautiful, and relentlessly structured underneath its impossible surface. The mood is **mysterious-moody** in its most rigorous form: the mystery of a proof that is syntactically correct but semantically wrong, the mood of a library where all the books are shelved in a system no one else can read. There is no warmth. There is only the quiet fascination of standing at the edge of a logic gate that opens onto an abyss. Visual references: René Magritte's "The Son of Man", M.C. Escher's impossible staircase lithographs, Giorgio de Chirico's metaphysical piazzas with their incomprehensible shadows. The site does not reference these directly — it *is* what those paintings would build if they became websites. The color register is near-zero saturation midnight: deep indigo-black as the ground, pale blue-white as the ink of impossibility, one accent of cold electric violet for moments of logical paradox. Nothing is warm. Nothing is friendly. Everything is precise. ## Layout Motifs and Structure The structural principle is **ma-negative-space** as philosophical argument: emptiness is not absence but the most load-bearing element on the page. The Japanese concept of *ma* — the pregnant pause, the gap between notes that makes the music — governs every spacing decision. Content objects float in enormous negative space like propositions on a blackboard no one has finished erasing. **Spatial system:** - No grid. Content blocks placed by **felt interval** — the distance between objects communicates their logical relationship. Premises cluster near their conclusions. Counterexamples drift apart from their axioms. The eye must cross empty space to connect related ideas, and that crossing is the thinking. - The viewport is always taller than the content block it contains. Every section breathes at least 30–40vh of vertical air above and below the text object. - Horizontal alignment is deliberately unresolved: no left-align anchor, no centered axis. Each text block finds its own horizontal position according to a non-repeating offset pattern (15vw, 62vw, 8vw, 45vw...). The page refuses to give the eye a resting rail. - One persistent navigational element: a single vertical thread of dots on the far right edge, ~12px each, spaced 48px apart, counting the page's sections in a sequence that does not begin at one. **Section rhythm:** - Section 1 (The Premise): 100vh, single fragment of text in the upper-left quadrant. Below it, 60vh of pure midnight. No scroll cue. - Section 2 (The Inference): A hand-drawn logic diagram appears mid-scroll, anchored right. Body text floats left at 38vw width max. - Section 3 (The Paradox): Two text blocks on the same vertical position, one at 8vw, one at 58vw, presenting contradictory statements in identical typographic weight. No resolution. - Section 4 (The Void): 80vh empty except for one floating phrase at the vertical midpoint, set at 11vw font-size, letter-spaced to 0.4em. - Section 5 (The Theorem): A full-width hand-drawn geometric proof diagram — but the proof is incomplete. The diagram trails off into whitespace. The conclusion is missing. - Section 6 (The Silence): The final section contains no text. Only the domain name, backward, mirrored in CSS, fading at 4% opacity over a midnight field. ## Typography and Palette **Typography (variable-fluid — two fonts only, maximum contrast):** - **Display and headline — [Fraunces](https://fonts.google.com/specimen/Fraunces)** (variable, wght 100–900, optical size 9–144, italic axis): The uncanny voice. Fraunces is a "wonky" serif — intentionally non-rational optical adjustments that make it feel slightly wrong at large sizes, exactly like a logical statement that appears sound until you look closely. Used for all section titles, the site wordmark, and the single large-type "void" phrase in Section 4. Sizes fluid: `clamp(4.8rem, 11vw, 9.6rem)` for display; `clamp(2.4rem, 5.5vw, 4.8rem)` for section titles. Weight set at 300 for titles (counterintuitively light for large type — the emptiness of the letterform mirrors the spatial emptiness around it). Optical size axis pushed to maximum (144) for display use — this triggers Fraunces's most dramatic "wonky" characteristics. - **Body and logic notation — [Space Mono](https://fonts.google.com/specimen/Space+Mono)** (fixed weight 400/700, italic): The rational substrate. Monospaced, mechanical, precise. Used for all body copy, logic notation strings (∀x, ∃y, ⊢, ⊨), footnotes, and the navigation dot labels. At body size: 15px / 28px line-height, tracking +0.02em. The monospace grid of Space Mono creates a visual tension against Fraunces's optical irregularity — two systems of measurement that cannot agree on what a letter is. **Fluid scaling:** All Fraunces sizes use `clamp()` with viewport units. Body type fixed at 15px — it does not scale. The contrast between the enormous fluid titles and the fixed, non-responsive body text enacts the theme: the universal rule (display type) resizes with context; the particular proposition (body) remains stubbornly constant. **Palette — midnight-blue register (5 values):** - `#05060f` — Void Black: the page background. Not pure black — contains a trace of indigo. The darkness that is also a color. - `#0d1b3e` — Deep Midnight: secondary surface color. Used for content wells, the logic diagram background panels. - `#1a3a6b` — Midnight Meridian: mid-tone for structural elements, borders at 1px, the diagram stroke fill. - `#7bb3ff` — Logic Blue: the primary text color. Near-white but unmistakably blue in context — the color of starlight through indigo glass. All body text and diagram lines use this value. - `#a855f7` — Paradox Violet: the single accent, used precisely once per section maximum. Applied to the logical contradiction elements, the moment where the proof breaks, the site wordmark on hover. **Background treatment:** The body background is `#05060f` always. No gradients. No textures. No grain. Pure void. The lack of texture is the texture. ## Imagery and Motifs All imagery is **hand-drawn in the style of a 19th-century scientific illustration gone surreal** — ink-on-vellum precision applied to impossible logical objects. No photographs. No 3D renders. No stock imagery. No icons from icon libraries. **Four motif families:** 1. **Logic diagrams as impossible architecture (futuristic-classical hybrid):** The primary image type is a logic diagram — truth tables, Venn diagrams, syllogism trees, Turing machine state diagrams — drawn in Space Mono's character set logic notation but then hand-distorted: a node that connects to itself, a truth table where T and F are swapped in one row but the conclusion is unchanged, an infinite regress of implications rendered as a tower that curves back on itself. These are drawn as inline SVGs with a deliberately imprecise hand-drawn aesthetic (path jitter at ±1.5px on every stroke, 0.8px stroke width in `#7bb3ff`, no fills). They are futuristic in their content (formal logic systems, automata notation) but rendered by a hand that trembles slightly. 2. **Floating geometric proof fragments:** Isolated geometric shapes — an equilateral triangle with one side labeled "∞", a circle divided by a line that does not pass through the center, a rectangle whose interior angles sum to 181° — float in the negative space of the void sections. Each is a small SVG (80×80px to 160×160px), positioned absolutely with `pointer-events: none`, at opacity 0.15, suggesting marginalia in a textbook no one has finished annotating. 3. **The uncrossed bridge motif:** A single recurring decorative element: a hand-drawn arch bridge that appears in three sections, each time different — Section 2 shows the left half, Section 4 shows the right half, Section 6 shows neither half but only the shadow. This is the site's secret narrative: the logic that never quite connects. 4. **Typographic paradox glyphs:** In the largest void section, individual logic symbols — ⊢, ⊨, ¬, ∀, ∃, ⊥, ⊤ — are drawn oversized (200px character blocks) as if hand-lettered in a manuscript, positioned in the deep negative space at very low opacity (8–12%), creating a textural background that is also content if examined closely. ## Prompts for Implementation Build logic.quest as a **single continuous scroll through a surrealist proof** — seven sections that together constitute a logical argument that cannot be completed. The visitor is not browsing. They are following a line of reasoning into a void, watching it dissolve. **Technical implementation — the blur-focus pattern as epistemic state:** The site's defining interaction pattern is `blur-focus`: every content element begins blurred (CSS `filter: blur(8px)`) and sharpens as the visitor scrolls it into the "reading zone" — the vertical band between 30vh and 70vh from the top of the viewport. Elements outside this band blur back out. This is not a decorative effect. It is the argument: you can only hold one idea clearly at a time; everything else is peripheral, approximate, out of focus. The blur transition uses `transition: filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)` — slow enough to feel like understanding arriving, not a UI animation. **Section-by-section implementation guide:** **Section 1 — The Premise (100vh):** Background `#05060f`. A single Fraunces display-weight sentence in `#7bb3ff` at `clamp(1.6rem, 3.5vw, 2.8rem)`, positioned at top: 28vh, left: 15vw, max-width: 42vw. Text: "Every statement is either true, or false, or the question was wrong." No punctuation variation. No animation on load — it is already sharp. Below it, 8px of `#a855f7` underline appears after 2s via CSS animation, growing left-to-right over 1.4s. Nothing else on the page. **Section 2 — The Inference (120vh):** The hand-drawn logic diagram SVG anchored right at 55vw to 92vw, vertical center of section. It depicts a modus ponens tree (P→Q, P, ∴Q) but one branch connects to a node outside the diagram boundary — the line runs off the SVG edge and continues as a CSS border-bottom on a `
` that extends to the viewport edge, as if the proof has escaped its container. Body text (Space Mono, 15px, `#7bb3ff`) floats left at left: 8vw, max-width: 380px, vertical center + 4vh offset. The blur-focus pattern: this text block starts blurred, sharpens on scroll entry. **Section 3 — The Paradox (100vh):** Two text blocks, positioned `position: absolute` within the section container. Block A at left: 8vw, top: 44vh: "This statement is true." Block B at left: 58vw, top: 44vh: "This statement is false." Both in Fraunces at `clamp(1.4rem, 3vw, 2.4rem)`, weight 300. They are mirror images of each other typographically. On scroll into view: Block A blurs in from the left (translateX(-20px) + blur(8px) → both resolved), Block B from the right simultaneously, using `blur-focus` transition. They arrive sharp at the same moment. The Paradox Violet `#a855f7` is used for the period at the end of each statement only. **Section 4 — The Void (80vh):** No decorative elements. Single phrase centered but not centered: positioned at top: 50%, left: 22vw, transform: translateY(-50%). Font: Fraunces, `clamp(4rem, 9vw, 8rem)`, weight 100, letter-spacing 0.35em, color `#1a3a6b` (the near-invisible midnight meridian, not the readable logic blue). The phrase: "THEREFORE". It should barely be readable — the visitor must let their eyes adjust to discover it. blur-focus does not apply here: this text is always at 70% blur. Understanding it is optional. **Section 5 — The Theorem (140vh):** Full-width SVG containing the incomplete proof diagram. The diagram occupies 60vw centered, height auto at ~50vh. It shows a geometric theorem proof — a triangle, some angle bisectors, construction lines — rendered in hand-drawn style. The proof is 80% complete: the final construction line and QED square are missing. They trail off at opacity 0 via SVG linearGradient. To the right of the diagram trailing edge, in Space Mono 11px `#1a3a6b`: "[ proof continues on page —— ]" where the dashes extend to the SVG edge and then to nothing. **Section 6 — The Silence (100vh):** No text. The domain "logic.quest" is rendered in Fraunces, `clamp(3rem, 7vw, 6.4rem)`, transformed with `scaleX(-1)` (horizontally mirrored), color `#7bb3ff` at 4% opacity, positioned center of viewport. Below it at absolute bottom: 3vh, the Space Mono text "∴ □" (therefore, end-of-proof) at 11px, `#7bb3ff` at 20% opacity. The vertical navigation dots on the right edge show the final dot, but it is hollow — `border: 1px solid #7bb3ff` with no fill, unlike all previous filled dots. **Animation and motion principles:** - `blur-focus` is the only transition pattern. No slides, no lifts, no bounces. - Zero parallax effects (overused). - No scroll-jacking. - The navigation dots fill (`background: #7bb3ff`) as each section enters the reading zone, emptying when it leaves. - One CSS keyframe animation only: the Paradox Violet underline drawing in Section 1. - All SVG hand-drawn elements are static — no animation. - `prefers-reduced-motion`: remove all blur transitions, keep layout. Content remains visible at all times. **Forbidden elements (do not add under any circumstances):** - Call-to-action buttons of any kind - Navigation header or footer - Pricing, statistics, or data grids - Background gradients or textures - Color values outside the defined 5-color palette - Any font other than Fraunces and Space Mono - Any imagery that is not hand-drawn SVG - Hover states that involve movement (scale, lift, translate) ## Uniqueness Notes 1. **Surrealism applied to formal logic is registry-unique.** Among 212 analyzed designs, zero apply a surrealist visual aesthetic to a logic/reasoning domain. The closest neighbors use "dark-academia" (scholarly + moody) or "terminal" (logic + code aesthetic) — but neither achieves the Magritte-Escher-de Chirico visual vocabulary of impossible correctness. logic.quest is the first design in the corpus that treats a logical proposition as a surrealist object. 2. **blur-focus as epistemology, not decoration.** The `blur-focus` pattern appears in the seeds vocabulary but has near-zero implementation precedent in the corpus. Using it as a literal metaphor for attention and understanding — only one thing can be sharp at a time, everything else remains peripheral — gives it semantic weight rather than treating it as a scroll effect. This is a new interaction metaphor in the corpus. 3. **ma-negative-space as argument structure.** The *ma* layout principle (emptiness as load-bearing element) has been invoked in Japanese-minimal designs, but not with this precise configuration: non-repeating horizontal offset pattern, fixed-size body type that refuses to scale while display type scales fluidly, and section-height governed by breathing room rather than content. The ratio of empty viewport to content pixel is higher here than any other design in the corpus. 4. **The incomplete proof as narrative spine.** No existing design uses incompleteness as its primary narrative device. The bridge that never spans, the proof that trails off, the mirrored domain name — logic.quest is structured as a thing that cannot finish its own sentence, which is precisely what makes it a logic *quest* rather than a logic *answer*. 5. **Two-font absolute constraint with maximum typographic tension.** Fraunces (variable, intentionally "wonky" optical adjustments) + Space Mono (fixed-width, non-variable, mechanical) is a pairing designed to create maximum ontological tension: one font that cannot make up its mind what a letter is, one font that insists every character occupies exactly the same space. The entire design argument is latent in this typographic choice. Document chosen seed/style: aesthetic: surreal, layout: ma-negative-space, typography: variable-fluid, palette: midnight-blue, patterns: blur-focus, imagery: hand-drawn, motifs: futuristic, tone: mysterious-moody Reference avoided patterns from frequency analysis: - AVOIDED centered layout (89% in corpus) — replaced with deliberate non-aligned positional offsets - AVOIDED photography imagery (89%) — using hand-drawn SVG only - AVOIDED full-bleed sections (76%) — all sections breathe in void space - AVOIDED editorial aesthetic (50%) — surreal aesthetic instead (0% corpus usage) - AVOIDED scroll-triggered animations (35%) — blur-focus pattern used instead - AVOIDED hand-drawn as primary aesthetic driver (60%) — hand-drawn is the imagery style, not the aesthetic mode; surrealism is the aesthetic