# Design Language for reasoner.dev ## Aesthetics and Tone reasoner.dev is staged as **an axonometric architect's table on which arguments are built like buildings** — a quiet, technical drafting studio where logical inference is treated as load-bearing construction. The governing conceit: a structural engineer who specializes not in steel and concrete but in *entailment* has set up a drafting board, and every page of the site is one of her isometric working drawings. A claim is a column. A premise is a footing poured into bedrock. An inference rule is a beam spanning two supports. A contradiction is a structural failure — a member that buckles, cracks, and is struck through in red pencil. A completed proof is a finished pavilion you can walk under. The tone is **scholarly-intellectual crossed with the calm of a working blueprint** — never the cold sci-fi-HUD register, never neon dashboard theatrics. Think of the precision of a German engineering atlas, the warmth of aged drafting linen, the satisfying snap of a parallel rule. It is patient, exact, slightly obsessive about notation. There is dry wit in the margins (annotations in a draughtsman's hand: *"assumed — discharge later"*, *"this beam wants a brace"*), but the dominant feeling is the steady pleasure of watching something true get *constructed* in front of you, member by member, in true isometric projection where every edge that is parallel in the model is parallel on the page. Critically: this is **isometric as a worldview, not isometric as a clipart style**. No floating cartoon 3D blobs, no dribbble-isometric-illustration-pack icons. The entire layout obeys a single 30°/30° axonometric grid — content sits *on* the drawing plane, casts hard-edged engineering shadows along fixed light vectors, and the visitor reads the page the way you read a working drawing: by following lines. ## Layout Motifs and Structure The structural system is **isometric technical-docs** — the page is a single continuous axonometric drawing sheet, not a stack of web sections. **The drawing sheet.** The viewport is a piece of drafting vellum: a faint warm-grey grid of 30°/30° isometric lines (three line families at 60° to each other) printed at ~6% opacity across the entire background, with a heavier major-grid every 8 minor cells. A title block sits permanently in the **bottom-right corner** — the engineer's stamp: project name `REASONER`, sheet number that updates as you scroll (`SHEET 01 — PREMISES`, `SHEET 02 — INFERENCE`, …), revision letter, date `2026`, scale `1:1 — TRUE ISOMETRIC`. This title block IS the navigation — clicking a sheet number flies the camera along the iso-grid to that section. **Axonometric content blocks.** Every primary content unit is a **rectangular prism drawn in isometric projection** — a low extruded slab (think 24–40px of apparent depth) whose top face holds the text and whose two visible side faces are shaded with flat fills along the fixed light direction (top face lightest, left face mid, right face darkest). These are not card-grid cards; they are *parts in an assembly drawing*. They connect to each other with **call-out leader lines** — thin lines with a filled dot at the content end and a 45° elbow, terminating at a small numbered balloon, exactly like a parts schedule on a real drawing. **The proof scaffold (hero).** The opening sheet is a single large isometric construction: footings (premises) at the bottom drawn as poured concrete blocks half-sunk into a bedrock hatch, columns rising from them, beams (inference steps) spanning between, and at the apex the conclusion as a small flag-topped finial. As you scroll, the camera does not pan vertically — it **orbits and dollies along the iso-grid**, revealing the structure from its true three standard views (front-iso, then a quarter-turn, then plan-overhead) the way an engineer flips between sheets. Members assemble in sequence: footing poured → column raised → beam landed → joint riveted. **Margins as annotation gutters.** The left and right thirds at full width are kept as **drafting margins** — used only for hand-lettered annotations, dimension lines with arrowheads and witness lines, small detail bubbles ("DETAIL A — modus ponens joint, scale 4:1"), and the occasional coffee-ring stain. On narrow viewports the prisms flatten toward a near-orthographic single column but keep their extruded side faces and leader lines. No bento-box, no full-bleed photo hero, no centered-everything. The page is **broken-grid in service of axonometric truth**: things sit where the iso-grid puts them. ## Typography and Palette **Type stack — Google Fonts only, four families, strict assignment.** - **Familjen Grotesk** (variable, weight 400–700) — the **grotesque-neo** primary voice for all body text, content prism labels, and navigation. Chosen for its slightly mechanical, draughtsman-friendly letterforms with single-storey details that read cleanly at small sizes on the drawing. Body at 16–18px / 1.6, set in tight blocks like a specification clause. - **Big Shoulders Stencil Display** — the **condensed display** voice for sheet titles and the giant section numerals (`01`, `02`, `03`). Its stencil breaks read exactly like a spray-stencilled level marking on a construction member. Sheet titles at clamp(40px, 6vw, 92px), letter-spacing 0.06em, uppercase. - **Caveat** (variable, weight 400–700) — the **handwritten** draughtsman's-margin voice: every annotation, every "assumed — discharge later", every detail call-out label, every red-pencil correction. Always at a slight rotation (−2° to +3°), always in graphite grey or correction red. - **Spline Sans Mono** — the **tech-mono** voice reserved strictly for *the formal notation itself*: `P → Q`, `⊢`, `∀x`, sequents, the actual logical content the site reasons about. Rendered as if rubber-stamped: 1px ink-spread, very slightly uneven baseline. **Palette — drafting vellum and engineer's ink, plus one alarm colour.** - `#E9E3D6` — **drafting vellum**: the warm aged-linen page ground. - `#D6CFBE` — **vellum shadow**: minor grid lines, the darker side faces of prisms, witness lines. - `#2B2A26` — **engineer's graphite**: primary text, the heaviest construction lines, the dark right-hand prism faces near full strength. - `#5B5750` — **soft graphite**: secondary text, dimension lines, leader lines, hatching. - `#3E5C50` — **blueprint pine**: the structural members themselves — columns, beams, footings get this deep desaturated green, the colour of weathered drafting-board felt and oxidised copper detailing. - `#B7C9BE` — **pine highlight**: the top (lit) faces of structural members. - `#C2402E` — **correction red**: contradictions, struck-through invalid members, the "ERRATUM" stamp, the single live link/CTA. Used sparingly — when red appears, something failed or something matters. - `#F5F1E7` — **paper highlight**: the lightest lit faces, page edges catching light. Minimum effective contrast: graphite-on-vellum, ~9:1. ## Imagery and Motifs **Five motif families, all drawn — zero photography, zero stock illustration.** 1. **The isometric construction set (load-bearing imagery).** Footings (hatched concrete prisms half-buried in a bedrock stipple), columns (slender extruded square members with subtle rivet rows down the visible edge), beams (longer members with a flange profile hinted at the ends), gusset-plate joints (small triangular plates with a fan of rivet dots), and finials (the little flag at a proof's apex). All rendered in inline SVG as flat-shaded isometric polygons with hard shadows — no gradients except a single 2-stop on the *cast shadow* of large members. 2. **Drafting apparatus.** Dimension lines (thin line, arrowheads in, witness lines down to the measured edge, a gap in the middle for the figure), centre-lines (long-dash-dot), section marks (the circle-with-tail symbol), the title block, a north arrow that here points to "VALIDITY ↑", and a parallel-rule glyph that sweeps across on section transitions. 3. **Hand corrections.** Red-pencil strike-throughs, circled errors with a leader to a Caveat-lettered note, the "discharge" arrows that arc from an assumption box up to the inference step that closes it, ✓-in-a-box and ✗-in-a-box stamps. These appear *over* the clean drawing, slightly misregistered, as if added after printing. 4. **Notation furniture.** Sequent turnstiles `⊢` drawn oversized as actual little gates, quantifier glyphs `∀ ∃` set in stencil as if branded into a beam, proof-tree horizontal inference bars (the line under the premises) rendered as physical lintels. 5. **Paper grain & wear.** A subtle fibrous paper noise on the vellum, faint coffee rings (2–3 max, in corners), one bent dog-eared page-corner top-left, pencil-smudge ghosting near where the "hand" has been working. Just enough to say *used drawing*, never grunge. ## Prompts for Implementation Build reasoner.dev as **one HTML document, one CSS file, one ES module, plus inline SVG for the construction members and one Lottie JSON for the title-block stamp**. No framework, no router, no SPA. There is no pricing block, no CTA grid, no testimonial carousel, no stat-counter strip, no feature-card triptych. The page is **a working drawing the visitor reads**, not a funnel — narrative and demonstration over conversion. **Storytelling is the organizing principle.** The visitor lands on the title block and the first construction (an empty footing being poured), and is walked through ~6 sheets: (1) PREMISES — footings set into bedrock, each premise a labelled concrete block; (2) INFERENCE — columns raised and beams landed, each step a member clicking into place with an audible-feeling snap and a leader-line balloon explaining the rule; (3) ASSUMPTIONS & DISCHARGE — temporary shoring members (drawn in dashed outline) that get formally removed when their assumption is discharged, the discharge arrow arcing up to the closing step; (4) FAILURE MODES — a deliberately invalid argument constructed, then a member buckles, cracks (SVG path morph), gets struck in correction red and stamped ERRATUM, with a Caveat note in the margin; (5) THE COMPLETED PROOF — camera dollies out to reveal the finished pavilion, finial flag raised, then rotates to show the plan view; (6) COLOPHON — the drawing's title block, large, with revision history written by hand. **Animation = construction sequence, governed by scroll.** Use `IntersectionObserver` + a scroll-progress driver, NOT auto-playing loops. Members assemble bottom-up: footing fades in with a settle-bounce → column extrudes upward (scaleY from the base) → beam slides in along an iso-axis and lands with a 1-frame overshoot → rivet dots stitch in left-to-right → leader line draws (`stroke-dashoffset`) and the numbered balloon pops (spring). The camera "moves" by transforming a single wrapping ``/container with `transform: rotateX/rotateZ/translate` along constrained iso angles — never a free pan; it should feel like flipping between an engineer's standard views. Section transitions: a parallel-rule glyph sweeps across the sheet, leaving the new grid orientation behind it. Honour `prefers-reduced-motion`: members appear already assembled, camera is static, leader lines are pre-drawn. **Interaction.** Hovering a structural member highlights it (top face brightens to pine-highlight, a dimension line auto-draws showing its "span" = which premises it rests on) and dims unrelated members. Hovering a premise footing traces every member that ultimately rests on it (path-highlight up the tree). The title-block sheet numbers are the nav — clicking flies the camera. A small "EXPLODE" toggle (drafting-style switch) separates the assembly into an exploded axonometric view with leader lines between parts, then re-assembles. Cursor over the drawing area carries a faint draughtsman's-pencil crosshair. **Texture & finish.** Vellum paper-grain via a tiling SVG `feTurbulence` at very low opacity over the body. Hard engineering shadows (no soft blur) cast from members at a fixed 45°-on-screen vector. All construction-set graphics inline SVG so members can be individually animated and recoloured (correction red on failure). Keep gradients almost absent — flat axonometric fills only, except the one 2-stop on large cast shadows. ## Uniqueness Notes Five differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Isometric as governing geometry, not decoration.** Frequency analysis: `isometric` aesthetic ~12%, `isometric-icons` imagery ~4% — and almost universally used as a clipart sprinkle on otherwise flat layouts. reasoner.dev makes a single 30°/30° axonometric grid the *entire layout system* — content prisms, leader lines, camera moves, shadows, the title block, even the cursor crosshair all obey it. This is "isometric technical docs" taken literally: the site is a working drawing, not a page with iso-icons on it. 2. **Logic-as-structural-engineering metaphor.** No other registry site treats inference as load-bearing construction: premises = footings in bedrock, inference rules = beams spanning columns, assumptions = temporary shoring removed on discharge, contradiction = a member that buckles and cracks and gets struck in red pencil, a proof = a finished pavilion you walk under. The whole content model is a parts-assembly drawing. 3. **The title block as navigation + the draughtsman's-margin annotation system.** Persistent engineer's stamp in the bottom-right corner that updates its sheet number/revision as you scroll and serves as the nav; the full-width left/right thirds reserved as drafting margins for hand-lettered Caveat annotations, dimension lines, detail bubbles, and (sparingly) coffee rings. This replaces both the conventional navbar and the conventional sidebar with drafting-sheet furniture. 4. **Vellum-and-blueprint-pine palette.** Warm aged-linen vellum (`#E9E3D6`) + deep desaturated blueprint-pine green (`#3E5C50`) for all structural members + a single alarm colour, correction red (`#C2402E`), used only for failures and the one live link — a deliberately quiet, ink-on-linen scheme that avoids the `gradient` (95%) / `warm-saturated` defaults and the dark-mode neon dashboard register entirely. 5. **Scroll = construction sequence with a constrained "camera," not parallax.** Frequency analysis: `parallax` ~90%. reasoner.dev refuses free vertical parallax; scrolling assembles the structure member-by-member (footing → column → beam → rivets → leader line) and "moves the camera" only along constrained iso angles between an engineer's standard views (front-iso → quarter-turn → plan). Plus an EXPLODE drafting toggle for an exploded axonometric view. Avoided patterns from frequency: glassmorphism (81%), card-grid (91%), photography (98%), full-bleed photo hero, stat-grids, CTA-heavy layouts. Chosen seed/style: **isometric technical docs**