# Design Language for reasoner.studio ## Aesthetics and Tone reasoner.studio is staged as **an isometric cutaway of a working logic foundry** — a fictional municipal engineering hall where *arguments are machined parts*, premises are raw billets fed into lathes, and conclusions roll off a polishing belt with a serial number stamped into them. The governing metaphor is not "AI brain" and not "chat bubble" — it is a **patent-drawing workshop rendered in true 30°/30° isometric projection**, the kind of exploded axonometric you find on the back of a 1950s repair manual, except every machine in the hall is a *step of inference*: a syllogism press, a contradiction sieve, a quantifier crane, a counterexample furnace. The tone is **grounded-earthy meets scholarly-intellectual** — a draftsman's calm, not a startup's caffeine. Nothing glows. Nothing floats decoratively. Things are *bolted down*, *load-bearing*, *annotated with leader lines and callout numbers*. The mood is the satisfaction of a well-drawn schematic: you should feel you could *build this hall* from the page. Where most AI sites perform mystery, reasoner.studio performs **legibility** — the radical claim that thinking can be drawn as a mechanism, plate by plate, with a parts list. Influences: Isotype pictogram systems (Otto Neurath / Gerd Arntz), midcentury Soviet and American technical-school wall charts, the isometric factory cross-sections in *The Way Things Work*, Oulipo machine-diagrams, and the cool blueprint-on-buff color logic of architectural reprographics. The studio "voice" is that of a **shop foreman narrating a tour** — declarative, sequential, faintly proud of the tolerances. ## Layout Motifs and Structure The site is **one continuous isometric hall, scrolled through left-to-right and downward at once** — the page is built on a true isometric grid (the CSS uses a 2:1 rhombus tiling as its base unit, ~64px wide × 32px tall), and every section is a *bay* of the foundry placed on that grid. This is the load-bearing structural conceit: **layered-depth via isometric stacking**, never parallax-blur, never card-grid. Bays connect by *conveyor lines* (animated dashed SVG paths drawn along the iso axes) so the eye is led machine → machine the way a part travels the floor. Bay inventory (each a "station" of reasoning): 1. **Intake Dock** (hero) — a loading bay where the visitor's "question" arrives on a pallet; the studio name is stenciled on a girder spanning the bay in true iso skew. 2. **Premise Lathe** — raw cylindrical billets (premises) turned down to clean axioms; shavings curl off as tiny iso spirals. 3. **Syllogism Press** — a stamping machine that brings two plates together; the press head descends on scroll. 4. **Contradiction Sieve** — a vibrating sorting screen that drops invalid forms through into a scrap hopper below the floor plane. 5. **Quantifier Crane** — an overhead gantry that lifts "for-all" and "there-exists" beams across the bay. 6. **Counterexample Furnace** — where a claim is fired; if it cracks, it's recast. 7. **Polishing Belt** — finished conclusions move along a belt, each acquiring a stamped serial (a hash of its premises). 8. **Dispatch Window** — the conclusion leaves the hall; no link out, no CTA, just a roller-door that lowers as the page ends. There is **no top navigation**. Wayfinding is a **floor-plan minimap** docked bottom-left — a tiny iso schematic of all eight bays with a moving "you-are-here" dolly. Negative space is the *concrete floor*: a vast pale expanse with painted lane-markings, expansion-joint lines, and the occasional drain grate, so the machines read as objects in a room rather than tiles on a wall. ## Typography and Palette **Three Google Fonts families, used with shop-manual discipline.** - **Saira Condensed** (display / stencil voice) — used for bay names and the studio wordmark, set in `text-transform: uppercase`, tracked +0.14em, weight 600. It has the slightly compressed, mechanical-stencil feel of equipment labels and door signage. Bay headings: 56–72px. Wordmark on the girder: 88px, skewed onto the iso plane. - **IBM Plex Sans** (body / annotation voice) — the running text, the callout labels, the parts-list copy. Humanist but engineered; reads like a clean technical manual. Body 17–19px / 1.65; annotation labels 12–13px, tracked +0.06em, often set beside leader lines. - **Zilla Slab** (figure-caption / numeral voice) — every callout *number* (the circled ①②③ that pin annotations to machine parts), every serial stamp, every "Plate 4 of 8" marker. The slab serifs give the digits the look of a stamped die. 14–16px, weight 500–600. No monospace anywhere — this design deliberately abstains from the 94%-common `mono` typewriter cliché; its "technical" register comes from *draftsmanship*, not terminal cosplay. **Palette — blueprint-on-buff, with one oxidized accent. Eight values:** - `#EAE3D2` — **Buff Vellum**: the concrete floor / page ground, a warm reprographic paper tone. - `#F4EFE2` — **Light Vellum**: raised panels, callout cards, the lighter top faces of iso solids. - `#1C3A4B` — **Drafting Ink**: primary text, leader lines, the darkest machine shadows. A deep slate-teal-blue, the ink of a good technical pen. - `#2E5A6E` — **Cyanotype**: secondary lines, the cool mid-shadow on iso left-faces, hairline grid. - `#7C9AA6` — **Faded Blueprint**: tertiary lines, ghosted construction geometry, the receding-bay tint. - `#B7472A` — **Oxidized Copper**: the *single* hot accent — used only for the conveyor-line motion, the active circled callout number, the moving "you-are-here" dolly, and stamped serials. Rust, not red. - `#C9742E` — **Brass Bolt**: a warm secondary accent for rivets, bolt-heads, and the polished-conclusion highlight; pairs with the copper without competing. - `#0F2330` — **Pressroom Black**: deepest contrast wells — the scrap hopper below the floor, the furnace mouth interior, the dispatch-door shadow. Faces of iso solids are shaded by a fixed convention: **top face = Light Vellum, left face = Cyanotype tint, right face = Faded Blueprint tint** — so every machine reads three-dimensionally without any photographic lighting. ## Imagery and Motifs **No photography. No 3D render. No gradient mesh.** All imagery is **vector isometric line-and-flat-fill**, drawn as if for a patent plate. - **Iso machines**: each bay's apparatus is a custom SVG built on the 2:1 rhombus grid — lathes, presses, gantries, belts — rendered in 1.5px Drafting-Ink stroke with the three-face flat-fill convention. Moving sub-parts (press head, sieve screen, crane hook, belt rollers) are separate `` elements animated by transform along iso axes. - **Isotype-style pictograms**: Neurath/Arntz-flavored glyphs for abstract nouns — a "premise" billet, a "for-all" beam, a "counterexample" cracked-disc — used as repeated unit-symbols (Isotype's "more = more of the symbol" rule) when the copy quantifies anything. - **Leader lines & circled callouts**: thin elbowed pointer lines from a circled Zilla-Slab numeral to a specific machine part, mimicking exploded-diagram annotation. On scroll into a bay, callouts draw in sequence (path-draw-svg, staggered). - **Conveyor lines**: animated dashed paths in Oxidized Copper running between bays along the iso axes — the page's only continuously moving element, a slow `stroke-dashoffset` march that visually threads the narrative. - **Floor markings**: painted lane edges, hatched no-stand zones, expansion-joint hairlines, a few drain grates — all in Faded Blueprint, giving the negative space a *worked-floor* texture. - **Stamped serials**: each finished conclusion on the Polishing Belt gets a small embossed serial plate — a short hash of its premises — set in Zilla Slab, Brass-Bolt fill, with a 1px inset shadow so it reads as struck metal. - **Construction ghosts**: faint Faded-Blueprint "scaffold" geometry behind each machine (the iso bounding rhombi, axis crosses) that fades up briefly when a bay first enters view, then settles back — the drawing showing its own grid. ## Prompts for Implementation Build reasoner.studio as **one HTML document, one CSS file, one small vanilla-JS ES module — no framework, no router, no build step beyond a single bundling pass.** It is one continuous scroll, ~600–720vh, eight bays, traversed as a *factory tour*. **Storytelling is the organizing principle, not navigation.** The eight bays narrate a single journey: *a question enters the hall as raw stock → it is turned, pressed, sieved, lifted, fired, polished, serialized → it leaves as a conclusion you could hold.* Copy is foreman-voice: short declarative captions pinned to machine parts ("① Billet intake. Premises arrive un-machined."), a running paragraph or two per bay in IBM Plex Sans, never marketing language. The studio describes *what reasoning is*, mechanically — it is a place, a process, an exhibit — not a product page. **Motion vocabulary (no parallax-blur, no cursor-follow-glow, no tilt-3d):** - Scroll is the conveyor: entering a bay triggers that machine's *one signature motion* once — press descends, sieve shudders, crane hook traverses, belt rollers spin while in view, furnace mouth glows (a single warm pulse), roller-door lowers at the very end. - Callout annotations: leader lines draw (path-draw-svg) and circled numerals pop in with a small spring, staggered ~80ms. - Conveyor lines between bays: perpetual slow `stroke-dashoffset` animation in Oxidized Copper — the spine of the page. - Construction-ghost scaffolds fade up ~600ms on first view of each bay, then ease back to ~8% opacity. - The bottom-left floor-plan minimap dolly slides between bay nodes as you scroll; clicking a node scroll-snaps to that bay (the only "navigation"). - Respect `prefers-reduced-motion`: machines render in their resting state, conveyor dashes hold static, callouts appear without spring. **Layout build:** establish a CSS custom-property iso transform (`--iso: matrix(0.866, 0.5, -0.866, 0.5, 0, 0)` or skew/rotate equivalent) and place every bay and machine on a shared 64×32px rhombus grid; the buff floor is the `` background with a repeating SVG lane-marking pattern. Bays are full-width sections stacked vertically but each machine sits *within* the iso plane so depth is real geometry, not box-shadows. **AVOID:** CTA buttons, "Get started" / "Sign up" blocks, pricing tiers, three-up feature card-grids, stat counters with big animated numbers, testimonial carousels, glassmorphic frosted panels, hero gradients, stock photography, monospace "code" aesthetics, neon glow, dark-mode-default. The page links *out* to nothing; the Dispatch Window simply closes the hall. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMass site: 1. **True isometric foundry-of-inference as the entire site geometry.** Isometric aesthetic sits at ~12% and isometric-icons at ~4% in the cohort, but a site whose *whole layout is a 30°/30° iso hall you tour bay-by-bay* — with real iso-plane skew on every machine and a floor-plan minimap dolly for wayfinding — is the signature conceit here and would be plagiarism if copied. The "reasoning = machined parts on a conveyor" metaphor is load-bearing and exclusive to reasoner.studio. 2. **Isotype/Neurath pictogram system in place of icons, with the "more = more symbols" quantification rule.** No other site uses Arntz-style unit-pictograms as a grammar for abstract logical nouns (premise, for-all, counterexample). This is a deliberate alternative to the line-illustration and icon-heavy clichés. 3. **Blueprint-on-buff palette with exactly one rusted accent — and a NO-mono typography stack.** Against a cohort that is 98% warm, 95% gradient, and 94% monospace, this design is cool reprographic buff + drafting-ink + a single Oxidized-Copper hot line, set entirely in Saira Condensed / IBM Plex Sans / Zilla Slab. Its "technical" register comes from draftsmanship, not terminal cosplay — explicitly avoiding the `mono` + `terminal` + gradient defaults flagged in frequency analysis. 4. **Exploded-diagram annotation as the primary content unit.** Body copy lives as circled-numeral callouts on leader lines pinned to machine parts (patent-plate style), not as paragraphs in cards — sidestepping card-grid (91%), bento-box, and hero-dominant layouts entirely. 5. **The only continuously-moving element is a conveyor line, not a parallax layer or cursor halo.** Motion is mechanical and diegetic — each machine performs its one real action once — deliberately rejecting the parallax (90%), cursor-follow (89%), and tilt-3d (29%) patterns that dominate the cohort. Chosen seed / style: **isometric technical docs** (from seeds.json) — extended into a narrative isometric "logic foundry" exhibit. Avoided overused patterns per frequency analysis: hand-drawn, glassmorphism, photography, card-grid, full-bleed hero, warm+gradient palette, mono/typewriter typography, parallax, cursor-follow, spring/magnetic cursor effects, tilt-3d, CTA/pricing/stat-grid blocks.