# Design Language for rational.quest ## Aesthetics and Tone An isometric reasoning-engine blueprint: the site is an axonometric diorama of a thinking machine, drawn the way a cathedral or a clock or a particle detector is drawn in a cutaway technical illustration. The mood is *cold-room clarity* — the hush of a planetarium, the graph-paper calm of an engineer's notebook, the satisfying click of a syllogism locking into place. Rationality here is not a lecture; it is a built thing you can walk around. We treat every claim as a load-bearing strut, every inference as a gear meshing with the next, every fallacy as a visibly cracked beam flagged in safety-orange. The visitor is on a *quest* — so the experience is a slow ascent through a sectioned tower of thought, floor by floor, each floor a stage of inquiry: Observe → Question → Hypothesize → Test → Update. Nothing pops, nothing screams; instead surfaces *hum* with faint construction-line shimmer, and the only urgency is the quiet forward pull of "what holds, and why?" The aesthetic deliberately rejects the warm, hand-drawn, glassmorphic default of the batch in favor of drafting-table rigor: flat fills, true 30°/150° isometric projection, hairline technical strokes, and the restrained palette of architectural vellum under daylight lamps. ## Layout Motifs and Structure A **vertical isometric tower** rendered on a fixed 24-column blueprint grid with a visible 8px graph-paper substrate. The page is one continuous immersive scroll that ascends the structure — scroll-down reads as *climbing*, and the camera dollies and slightly orbits the diorama as you go (subtle, ~6° of yaw across the whole page) so the same machine is seen from changing angles. - **Ground Plinth / OBSERVE**: the landing viewport sits at the base — an isometric platform of stacked observation-crates, each face a flat plane carrying raw data ticks. No headline banner; instead a surveyor's title block in the lower-left corner (project name, revision, scale 1:1, drawn-by). The only affordance is the construction crane arm that points *up*. - **Floor 02 / QUESTION**: a colonnade of question-pillars; each pillar is an extruded prism whose visible faces hold a single interrogative. Hovering a pillar extrudes it 12px toward the viewer along the isometric axis with a spring settle. - **Floor 03 / HYPOTHESIZE**: a truss-bridge spanning two towers — hypotheses are the diagonal members; click one and the load-path animates as a glowing line tracing through the joints (path-draw-svg along the truss). - **Floor 04 / TEST**: an isometric apparatus room — beakers, dials, a balance scale rendered as line-art prisms. Sliders are real isometric levers. - **Floor 05 / UPDATE**: the belief-ledger — a card-grid *reimagined* as an exploded-axonometric drawer cabinet; drawers slide out along the 30° axis, never as flat rectangles. - **Spire / Q.E.D.**: the summit — a thin obelisk; the footer is its base plate, an engraved colophon. Asymmetry is structural, not decorative: the tower leans 2° off-true and a plumb-line element hangs dead vertical beside it as a constant reference. Negative space is "sky" — pale, gridded, with faint construction guidelines extending past the building edges like dimension lines. ## Typography and Palette **Typefaces (all Google Fonts):** - Display / floor labels: **Archivo Expanded** — wide, engineered, drafting-stencil energy; used at 700–800 in uppercase with generous letter-spacing for the OBSERVE/QUESTION/etc. floor plates. - Body / reasoning text: **IBM Plex Sans** — a humanist sans with an engineer's pedigree; 400/500, 1.6 line-height, set in a single narrow measure that mimics a spec column. - Annotations, dimension labels, the surveyor's title block, code/logic notation: **IBM Plex Mono** — 400, small caps where used, the voice of the blueprint's margin notes. - Occasional formal statements (axioms, the Q.E.D. inscription): **Spectral** at 500 italic — a thin thread of warmth, like a fountain-pen note on a technical drawing. **Palette — "architect's vellum at noon":** - `#F4F1E8` — vellum / primary background (warm paper, not white) - `#1C2433` — ink navy / primary text and structural strokes - `#3A6EA5` — blueprint blue / construction lines, active load-paths, links - `#C9D6DF` — graphite mist / secondary planes, grid lines, shadows on iso faces - `#E8623C` — safety orange / accent: flagged fallacies, the crane, current-floor marker (used sparingly, ≤5% of any view) - `#7A8B6F` — sage drafting-green / verified/tested states, the UPDATE drawers' "confirmed" tint - `#8C8275` — sepia annotation / mono margin notes, the title block rules High-contrast where it counts (navy on vellum for all reading), muted everywhere else. Isometric faces get a 3-step flat-shade ramp from `#F4F1E8` (top) → `#E6E1D2` (left) → `#C9D6DF` (right) — never gradients, never glass. ## Imagery and Motifs - **Pure CSS/SVG isometric line-art** — no photography, no stock illustration. Everything is built from `transform: rotateX(...) rotateZ(...)` planes or pre-projected SVG paths: crates, pillars, trusses, beakers, drawers, the crane, the spire. - **Construction guidelines**: thin dashed `#3A6EA5` lines that extend from object corners into the sky margin, with little tick + dimension-value labels in Plex Mono ("ø reasoning · 2.4σ", "load: valid"). - **Graph-paper substrate**: a fixed 8px × 8px grid (`#C9D6DF` at 18% opacity) under everything, with bolder lines every 80px — the page literally sits *on* engineering paper. - **Plumb line**: a single 1px vertical `#1C2433` line with a small weight glyph at the bottom, fixed to the viewport's right third, swinging gently (±1.5°) — the only thing that's truly vertical while the tower leans. - **Cutaway badge**: section transitions are marked by a "section A–A" cut symbol (the standard arrowed cut-line notation) sweeping across. - **Fallacy flags**: when interactive logic "breaks," a `#E8623C` triangular caution tag pins to the cracked strut with a Plex Mono label ("∄ — affirming the consequent"). - **Stamps & title blocks**: corner title blocks, revision triangles, an "APPROVED / Q.E.D." rubber-stamp impression at the summit (slightly rotated, ink-bled edges done with SVG turbulence at low amount). ## Prompts for Implementation Build this as a **single-route, full-screen, scroll-driven narrative climb** — the visitor ascends an isometric tower of reasoning; there is no dashboard, no pricing block, no stat-grid, no "Get Started" hero button. The first viewport is the ground plinth with a surveyor's title block and an upward-pointing crane — scrolling is the only instruction, and scrolling *is* climbing. - **Isometric is non-negotiable and real**: use CSS `transform-style: preserve-3d` with a parent `transform: rotateX(60deg) rotateZ(45deg)` (or true 2:1 dimetric `rotateX(63.43deg)`), or hand-authored pre-projected SVG. Faces are flat-filled from the 3-step ramp. Hovers extrude *along the isometric axis*, never as flat scale. - **Scroll = camera**: bind scroll progress to a slow vertical translate of the diorama plus ~6° of total `rotateZ` orbit and a tiny `rotateX` tilt, so the machine reveals new sides as you climb. Use `position: sticky` stages or a single pinned canvas with progress math — prefer native scroll + `IntersectionObserver` over heavyweight libs; spring/elastic settles on discrete interactions only. - **Storytelling beats**: each floor is a chapter (Observe, Question, Hypothesize, Test, Update, Q.E.D.). Floor plates slide in on the isometric grid; the active-floor marker (safety-orange) tracks your position on a left-edge "elevation gauge." Construction guidelines draw themselves (`stroke-dashoffset`) as each floor enters; dimension labels typewrite in Plex Mono. - **Interactive logic**: the Hypothesize truss should let the user click a member to trace its load-path through joints (animated glowing line); the Test room's levers are draggable isometric handles that tip a balance; the Update cabinet drawers pull out along the 30° axis and flip a belief card from "provisional" sage-outline to "held" sage-fill. When a user constructs an invalid step, surface a fallacy flag — gentle, instructive, never a modal. - **Texture, lightly**: a faint paper grain (SVG `feTurbulence`, baseFrequency ~0.9, ≤4% opacity) over the vellum; the 8px graph grid fixed behind everything; the plumb line swinging on a slow CSS keyframe. Respect `prefers-reduced-motion` by freezing the orbit and plumb swing, keeping only fades. - **Voice**: copy is terse and precise, like spec annotations — "OBSERVE — record what is, not what you wish were." The Q.E.D. summit ends not with a CTA but with an engraved colophon and a small "revision: ∞ — inquiry continues" stamp. - **No bento boxes, no glassmorphism, no warm hand-drawn doodles, no card-grid as flat rectangles** — every "card" is a drawer or a plane in axonometric space. ## Uniqueness Notes Differentiators from other sites in the batch: 1. **True isometric/axonometric architecture as the entire layout** — not isometric *icons* sprinkled on a normal page, but a single walk-around-able 3D diorama of a reasoning machine that the scroll orbits and climbs. Card-grid and hero-dominant defaults are replaced by an exploded-axonometric drawer cabinet and a leaning tower. 2. **Blueprint epistemology** — claims as load-bearing struts, inferences as truss members with traceable load-paths, fallacies as safety-orange caution tags on cracked beams. The interaction grammar literally *is* the philosophy of inquiry (Observe→Question→Hypothesize→Test→Update→Q.E.D.). 3. **Drafting-table palette and type** — warm vellum `#F4F1E8`, ink navy, blueprint blue, sparing safety-orange; Archivo Expanded + IBM Plex Sans/Mono + a thread of Spectral italic. Deliberately flat-shaded, gradient-free, glass-free — a direct rejection of the batch's 81% glassmorphism and 95% hand-drawn aesthetic. 4. **The plumb line** — a permanent dead-vertical reference element swinging beside a deliberately 2°-leaning structure: a built-in visual argument about bias and correction that no other site uses. 5. **Surveyor's title block instead of a hero** — the landing identity is a corner spec-stamp (project, revision, scale, drawn-by), and the page ends in an engraved colophon, not a CTA. Chosen seed/style: **isometric technical docs** Avoided overused patterns from frequency analysis: glassmorphism (81%), hand-drawn aesthetic (95%), photography imagery (98%), warm-but-gradient palettes (95% gradient / 98% warm — we keep warmth in the *paper* but go flat, no gradients), card-grid-as-rectangles (91%), hero-dominant/centered hero (15%/82%), CTA-and-stat-grid layouts. Underused patterns leaned into: isometric layout & isometric-icons (12%/4%), `path-draw-svg` used structurally on a truss, mono typography put to genuine annotation use, immersive-scroll (12%) as a literal vertical climb.