# Design Language for reasoner.studio ## Aesthetics and Tone **reasoner.studio** is conceived as the walls of an underground proving ground — a place where a mathematician who grew up tagging subway tunnels now covers concrete with the same obsessive precision that once went into letterforms. The aesthetic is **graffiti-scholarly**: spray-can geometry disciplined into rigorous diagrammatic thought. Every visual choice asks: what does an inference engine look like if it was designed by someone whose first medium was a Krylon can and whose second was a blackboard covered in modal logic? The site refuses the binary between street and academy. The walls are concrete — raw, cold, slightly wet — but every marking on them is deliberate: proof trees rendered in spray-paint drip, crystalline lattice diagrams tagged in violet and acid-lime, data-visualization charts whose axes are hand-drawn in the thick pressure-flare style of a paint marker. The tone is **scholarly-intellectual** but the delivery mechanism is raw. There is no courtesy softening. Ideas land like thrown paint — kinetic, irreversible, permanent. The mood is **midnight in a well-lit tunnel** — not dark for atmosphere but dark because the space is genuinely underground and the fluorescent strips overhead are the only light. Color pops violently against the grey: a triadic palette of `#7B2FFF` (ultraviolet spray), `#FF6B1A` (industrial orange), and `#2FFFB4` (acid phosphor green), all on a concrete ground of `#1C1C1F` with a whisper of `#2E2E34` for depth variation in the wall texture. The aesthetic deliberately avoids: editorial quietude, hand-drawn warmth, botanical softness, photography as documentation, warm palettes, gradient mesh backgrounds. It positions itself at the intersection of two rarest frequency clusters in the corpus: graffiti (0%) and scholarly-intellectual (4%). ## Layout Motifs and Structure The structure is **stacked-sections** — a strict vertical procession of seven full-viewport panels, each one a distinct wall of the tunnel, each containing a single rigorous argument expressed in the intersection of data-visualization and spray-paint geometry. **The tunnel logic.** The visitor enters at grade level and descends seven panels into the proving ground. There is no horizontal nav, no sidebar, no floating menu. A hairline vertical **proof-rail** — 2px, `#7B2FFF`, 40% opacity — runs the entire left edge of the page, marked at each panel transition with a crystalline hexagonal node `⬡` in the accent colors. This is the logical spine: the visitor tracks their depth in the proof by watching the nodes light up as they scroll. **Panel cadence (seven walls):** 1. **Thesis** — full viewport, oversized display type, crystalline lattice in background as SVG, a single painted drip trails from the headline into the body 2. **Inference Engine** — data-viz panel: an animated directed acyclic graph (DAG) of reasoning steps, edges drawn in spray-style thick-thin stroke 3. **The Proof** — three-column layout: left marginalia (premises, `#2FFFB4`), center proof tree (branching tree rendered as SVG path-draw), right marginalia (conclusions, `#FF6B1A`) 4. **Corpus** — horizontal scroll zone within the fixed viewport: a ribbon of data-density charts — heatmaps, force-directed graphs, constellation maps — each one labelled in a condensed graffiti-derived typeface 5. **Conjecture** — single centered statement in the largest type on the page (clamp 8vw to 120px), surrounded by crystalline hexagonal grid fragments 6. **Refutation** — split panel: left half concrete wall with struck-through text (`text-decoration: line-through`, color `#FF6B1A`); right half the corrected proof in `#2FFFB4` 7. **Open Problems** — footer-panel: a list of unsolved questions in marker-style type, each tagged with a glowing hexagonal status indicator **Spatial rules.** Each panel is exactly `100svh`. Between panels the proof-rail node pulses with a ripple effect — a radial wave in `#7B2FFF` that dissipates over 0.6s. The horizontal rule between panels is a 3px sprayed stroke that shows a deliberately uneven edge (SVG filter: `feTurbulence` feDisplacementMap to simulate spray-can edge blur). Panels have 4vw horizontal padding minimum; the proof tree in Panel 3 bleeds to the left edge. **No horizontal navigation, no sticky header.** The only navigation is the proof-rail on the left, which collapses to a 1px thread on mobile. ## Typography and Palette **Primary Display — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue):** All-caps condensed geometric, weight 400 (single weight). Used for panel numbers, section headings, and the oversized thesis statement in Panel 1. Rendered at sizes from 64px (section heads) to clamp(80px, 12vw, 180px) (thesis). This is the graffiti lettering system: Bebas was designed from the same pressure-condensed all-caps logic as graffiti block letters but filed down into type. **Secondary Body — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk):** Weights 300 (premises/conclusions), 500 (body), 700 (emphasis). Used for all running text, proof steps, marginalia. Space Grotesk has a slight eccentricity — mismatched terminals, slightly irregular curves — that gives it the feel of type made by someone who also draws letters by hand. Size: 15px/1.65 body, 13px/1.5 marginalia. **Monospace Accent — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono):** Weights 400, 700. Used exclusively for logical notation, proof-step labels (`∀x`, `∃y`, `⊢`, `⊣`), and data-viz axis labels. Size: 12px–14px. The monospace voice is the machine — the reasoner itself — while Bebas is the human tagger and Space Grotesk is the scholar. **Palette — Triadic, dark-ground:** - `#1C1C1F` — Tunnel concrete (background, primary surface) - `#2E2E34` — Shadow concrete (panel depth variation, card backgrounds) - `#7B2FFF` — Ultraviolet spray (primary accent, proof-rail, node glow, link color) - `#FF6B1A` — Industrial orange (secondary accent, refutation, counter-arguments, struck text) - `#2FFFB4` — Acid phosphor green (tertiary accent, conclusions, confirmed propositions) - `#E8E8EC` — Cold white (body text, marginalia text) - `#5A5A64` — Mid-concrete (dividers, disabled states, secondary borders) The triadic relationship is `#7B2FFF` / `#FF6B1A` / `#2FFFB4` — spaced at 120° on the hue wheel (violet 270°, orange 30°, green 150°). All three are maximally saturated against the near-black ground, creating the visual impact of spray paint on raw concrete. **No warm tones, no gradient mesh, no pastel. No warm palette.** ## Imagery and Motifs **Imagery is data-viz — exclusively and rigorously.** There are no photographs, no illustrations in the decorative sense, no gradients used as decoration. Every visual element earns its place as an argument: 1. **Directed Acyclic Graph (Panel 2):** An animated SVG DAG of ~20 nodes, each a circle in `#7B2FFF` with `#E8E8EC` text (short logical symbols). Edges animate via stroke-dashoffset from top to bottom, simulating the propagation of inference. Node edges are 2px, with a slight turbulence filter for the spray-paint stroke quality. The graph is interactive: hovering a node ripples its immediate neighbors. 2. **Proof Tree (Panel 3 center):** A branching binary tree rendered as SVG path-draw, animated left-to-right on scroll-trigger. The branches are thick at the root (4px) and thin at the leaves (1px), mimicking the pressure variation of a marker. Branch color transitions: root is `#7B2FFF`, branches gradient toward `#2FFFB4` at the leaves. 3. **Crystalline Lattice (Panels 1 and 5):** A hexagonal tessellation SVG — 40px hexagons in `#7B2FFF` at 8% opacity as the backdrop — that forms a low-contrast grid suggesting crystal structure or honeycomb logic. In Panel 5, six hexagons detach from the lattice and float to surround the Conjecture text, their outlines glowing (`box-shadow: 0 0 12px #7B2FFF`) in a slow 3s pulse animation. 4. **Heatmap Ribbon (Panel 4):** A horizontal scrolling data-ribbon of three inline charts: a 12×12 heatmap (cell colors interpolated from `#1C1C1F` to `#7B2FFF`), a force-directed constellation graph (dots `#2FFFB4`, links `#5A5A64`), and a radial bar chart (bars `#FF6B1A`). Each chart is 480px wide. The ribbon scrolls horizontally inside the fixed panel via CSS `overflow-x: auto`, styled with a custom scrollbar in `#7B2FFF`. 5. **Spray-edge dividers:** Between panels, 3px horizontal rules with an SVG feTurbulence filter applied (`baseFrequency="0.02" numOctaves="4"`) and a feDisplacementMap (scale 4) that displaces the edge by up to 4px, producing the uneven pressure-bleed edge of spray paint on concrete. Rule color is `#7B2FFF` at 60% opacity. 6. **Drip motif (Panel 1):** A single SVG drip — a vertical path 80px tall, 6px wide, tapering to a teardrop at the bottom — in `#7B2FFF`, positioned immediately below the final letter of the headline. It has a 1.5s animation that draws the drip downward on page load (stroke-dashoffset animation). This is the singular graffiti-authenticity marker: one deliberate drip, architectural, not decorative. **No photography. No hand-drawn warmth. No botanical motifs. No collage.** ## Prompts for Implementation Treat reasoner.studio as a **seven-panel tunnel descent** rendered as a single-page vertical scroll. The visitor is not browsing a site; they are walking through a proof space, panel by panel, wall by wall. **Structural HTML:** - One `
` element containing seven `
` elements, each with `height: 100svh; overflow: hidden`. - A `