# Design Language for rational.business ## Aesthetics and Tone rational.business is the field manual of a fictional discipline called **Applied Decision Drafting** — the practice of treating every business choice the way a structural engineer treats a load-bearing beam: drawn, dimensioned, stress-tested, signed off. The site is presented as a working **drafting table seen from directly above**, lit by a single drafting lamp, where the surface is a pale blueprint vellum and every idea that appears on it has been *drawn in*, never typed. The tone is the tone of a calm engineer narrating a walkthrough of a deliberately under-designed bridge: precise, dry, faintly amused at how rarely people actually draw their reasoning before committing to it. This is **isometric technical-documentation aesthetic taken literally** — not "isometric" as a decorative 3D trick, but as the *governing projection of the entire page*. Boxes, decision nodes, probability bars, and even the navigation are drawn on a true 30°/150° isometric grid, as if the whole website were a single exploded-axonometric assembly diagram of "a good decision." Nothing is photographed. Nothing glows. The mood is **graphite on cyan vellum under raking lamplight** — the warmth comes entirely from the lamp's amber pool and the slight cream of aged drafting paper, never from gradients-for-their-own-sake. The emotional arc across the page: *uncertainty drawn as a fog of light pencil marks → constraints drawn as hard ruled lines → the decision drawn as a single confident inked stroke.* The visitor should feel they watched someone *think on paper* for ninety seconds and come away wanting to do the same. ## Layout Motifs and Structure The site is **one continuous isometric drafting sheet** scrolled vertically, divided into **six "plates"** the way a real technical manual numbers its drawings: PLATE 01 through PLATE 06, each with a title block in its lower-right corner (drawing number, revision letter, "DRAWN / CHECKED" initials, date). The plates do not stack as flat cards — they are **drawn onto the same continuous isometric ground plane**, so scrolling feels like dollying a camera along a single enormous worktable rather than flipping pages. - **Isometric ground grid:** a faint 64px isometric lattice (two line families at 30° and 150°) covers the entire scroll. All major elements snap to its vertices. The grid is drawn at 6% opacity in graphite; near the lamp pool it warms to a faint amber at 9%. - **No top navigation bar.** Navigation is a **vertical "drawing index" rail** pinned to the right edge — six small isometric cube-glyphs, one per plate, drawn in outline; the current plate's cube is rendered "inked solid." Hover extrudes a thin leader line to the plate's name set in small caps. That is the only nav. No hamburger, no logo lockup, no sticky header, no footer menu. - **The lamp pool** is a soft elliptical amber wash (~720px) that *follows the scroll position*, always illuminating the plate currently in view; everything outside it sits in cooler bluish "drafting room" light. This is the single largest unifying device. - **Asymmetric within each plate:** the "drawn object" (a decision tree, a constraint frame, a probability ladder) sits left-of-center on the iso grid; annotation callouts with leader lines fan to the right margin like real engineering call-outs. Generous quiet vellum around everything — `ma`-style negative space, but the negative space is *ruled*, not blank. - **Title blocks** anchor the bottom-right of every plate: a hairline-ruled rectangle, monospaced micro-text, an inked revision triangle. These double as section dividers. - Body copy is set in **narrow ruled columns** (max ~52ch), as if written in the margin of a drawing — never full-bleed paragraphs. Explicitly avoided: hero-with-CTA, pricing tables, three-up stat grids, testimonial carousels, logo walls, bento boxes, card-grid sections. ## Typography and Palette **Type system — Google Fonts only:** - **Drafting-hand display & headings:** `Architects Daughter` — used *only* for the largest plate titles and a handful of "scribbled in the margin" annotations, to read like a drafter's own block lettering. Used sparingly: never for paragraphs, never below ~28px. - **Primary technical face (everything structural):** `IBM Plex Mono` — plate numbers, title-block fields, axis labels, leader-line callouts, body copy, the drawing index. Tracking `0.04em` at micro-sizes, `0.12em` uppercase for title-block field labels. This carries ~70% of all type on the page and gives the whole site its "this came off a plotter" voice. - **Quiet humanist support:** `Spectral` (a refined serif with engineering-journal calm) — used *only* for the one or two longer reflective passages where the engineer "steps back from the board," set at 18–20px, generous leading, ink-graphite color. The contrast between Plex Mono's mechanical grid and Spectral's measured serif is the typographic story. **Palette (≥3 colors, all named with hex):** - `#E9F1F4` — **Vellum Cyan-White:** the base sheet. A barely-blue cool white, like fresh blueprint stock before exposure. - `#D4E2E6` — **Drafting Shade:** the cooler "room light" tone outside the lamp pool; also used for the iso grid's denser zones. - `#2A2E33` — **Graphite Ink:** near-black warm charcoal; all primary linework, body text, hard ruled constraints. - `#5C6A72` — **Hard Pencil 4H:** mid-grey for secondary linework, dimension lines, leader lines, faded prior reasoning. - `#B6361F` — **Revision Red:** a dry oxide red used *only* for the single "decided" stroke per plate, revision triangles, and the inked current-plate cube. Strictly rationed — it is the color of commitment. - `#E2A847` — **Lamp Amber:** the warm wash of the drafting lamp; also a 1px warm underline beneath active leader lines. Never a fill for text. - `#F6F0E2` — **Aged Vellum Warm:** the paper tone *inside* the lamp pool, where the cool sheet warms under the bulb. Overall feel: a cool graphite-on-cyan technical sheet with one warm amber pool of attention and one strictly-rationed red of decision. ## Imagery and Motifs Zero photographs. Every visual is **drawn linework on the isometric grid**, rendered as crisp inline SVG with visible "construction" marks left in (faint tick marks, extension lines, the kind of half-erased guide a real drafter leaves). - **PLATE 01 — "The Fog":** a loose cloud of ~120 short 4H-pencil strokes scattered above the iso plane, each at a slightly random angle — visual shorthand for an unframed decision. As the plate enters the lamp pool, the strokes drift and faintly align toward a vanishing point. Title block: DWG. R-01, REV. A. - **PLATE 02 — "The Frame":** four hard graphite lines ruled into a true isometric box on the grid — the constraints. Each edge has a dimensioned callout ("budget," "headcount," "runway," "reputation") with leader lines and arrowheads to the right margin. The fog from Plate 01 is now drawn *inside* the box, contained. - **PLATE 03 — "The Tree":** an isometric decision tree — nodes drawn as small extruded cubes, branches as ruled 4H lines, each branch labeled with a hand-lettered probability fraction (¼, ⅗) in Architects Daughter. One leaf node is faintly haloed in Lamp Amber. - **PLATE 04 — "The Ladder":** a vertical "expected-value ladder" — stacked isometric rungs of varying drawn length, the longest rung inked solid and capped with a Revision Red triangle. Dimension lines run alongside showing the (drawn, not real) magnitudes. - **PLATE 05 — "The Stroke":** near-empty vellum; a single confident Revision Red line drawn corner-to-corner across the iso plane — *the decision*. A title-block note in Plex Mono: "CHECKED. APPROVED FOR ISSUE." The Spectral passage lives here. - **PLATE 06 — "The Margin Note":** the worktable from slightly further back; all five prior plates visible as small thumbnails pinned to the iso plane with drawn brass tacks, and one last hand-lettered margin note. The drawing index rail completes here. - **Recurring motifs:** dimension lines with double-arrowheads; extension lines; revision triangles; title blocks; isometric cubes (used for nodes, nav, and bullets); leader-line callouts; faint construction tick marks; the traveling lamp ellipse. ## Prompts for Implementation Build rational.business as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. It is a ~90-second walkthrough of a single isometric drafting sheet with six plates. There is **no CTA, no pricing, no signup form, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner**. **Isometric foundation:** - Establish a true isometric ground via CSS transforms (`transform: rotateX(...) rotateZ(...)` on a `.plane` wrapper, or hand-built 2:1 iso math in SVG). Pick ONE approach and keep it consistent. The 64px iso lattice is an SVG `` with two stroked line families at 30°/150°, 6% graphite opacity. - Every plate's "drawn object" is **inline SVG** so strokes can be animated with `stroke-dasharray` / `stroke-dashoffset` (path-draw). Linework should look *ruled*: 1.25px graphite, butt caps, occasional faint construction ticks. **Storytelling structure (six plates, vertical scroll, spring-eased entrances):** 1. **PLATE 01 — The Fog.** ~120 short pencil strokes as individual SVG ``s with random rotations; on scroll-into-view they stagger-drift and slightly converge. Largest plate title in Architects Daughter rules in via path-draw of an underline. 2. **PLATE 02 — The Frame.** Four constraint edges draw themselves into an iso box (sequential `stroke-dashoffset`), then dimension callouts extend leader lines + arrowheads to the right margin, labels typewritter-revealed in Plex Mono. 3. **PLATE 03 — The Tree.** Branches path-draw from root outward; node cubes pop with a small spring scale; probability fractions hand-letter in. One leaf gains the Lamp Amber halo. 4. **PLATE 04 — The Ladder.** Rungs grow in length on scroll (width transition with spring); the winning rung inks to Revision Red last and stamps its triangle with a tiny rotational settle. 5. **PLATE 05 — The Stroke.** Empty vellum; the single Revision Red diagonal draws corner-to-corner in one ~700ms path-draw, then the title block "APPROVED FOR ISSUE" types in. The Spectral reflective passage fades up beneath. 6. **PLATE 06 — The Margin Note.** Camera eases back (slight scale-down of `.plane`); five thumbnails settle onto the grid with drawn brass-tack pop; final margin note hand-letters. **Signature interactions:** - **The traveling lamp:** a fixed radial-gradient ellipse whose vertical position lerps toward the viewport center of the active plate; inside it, `--paper` swaps from Vellum Cyan-White to Aged Vellum Warm via a smooth custom-property transition; the iso grid warms to amber there. - **Drawing index rail (right edge):** six outline iso-cube SVGs; active one fills Revision Red; hover extrudes a thin amber leader line + small-caps Plex Mono label; click smooth-scrolls to that plate. - **Cursor as drafting cursor:** replace the pointer with a tiny crosshair + 30°/150° guide ticks; near interactive callouts it grows a faint extension line toward the element (subtle, never noisy). - **Hover on any callout:** its leader line gets a 1px Lamp Amber underline that path-draws left-to-right; the referenced linework brightens from 4H grey to Graphite Ink. - Respect `prefers-reduced-motion`: skip drifts and camera moves, keep everything in final drawn state. Keep copy terse and engineering-toned: plate titles like "DWG. R-03 — THE TREE", body lines like "A constraint you didn't draw is a constraint you'll discover." No marketing voice, no exclamation points, no "transform your business." ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Isometric as the page's projection, not a decoration.** ~88% of the corpus uses full-bleed flat layouts and only 12% touch isometric at all — and those use it for cute icon-stacks. Here the *entire site* lives on one true 30°/150° iso plane: nav, bullets, decision diagrams, even the cursor guides obey it. The layout *is* the axonometric assembly drawing of "a decision." 2. **No photography in a 98%-photography corpus.** Every pixel is ruled SVG linework with construction marks left visible. The richness comes from drafting craft (dimension lines, title blocks, revision triangles), not images, gradients, or glassmorphism. 3. **The traveling drafting lamp** as the sole "warm" device — a single moving amber pool that physically warms the paper tone and grid beneath it. Replaces the usual everything-glows treatment with one disciplined light source, mirroring the brand's "ration your attention" thesis. 4. **Revision Red as a strictly-rationed commitment color.** Exactly one red stroke per plate, plus revision triangles and the active nav cube — color used as a *decision*, not as decoration. 5. **Cool graphite-on-cyan-vellum palette** against a corpus that is 98% warm-palette and 95% gradient-driven — the warmth is localized to the lamp pool only, otherwise it's an honest blueprint sheet. **Chosen seed/style:** `isometric technical docs` — *aesthetic: isometric, layout: ma-negative-space, typography: tech-mono, palette: cool-grays, patterns: path-draw-svg, imagery: line-illustration, motifs: grid-lines, tone: professional.* **Avoided overused patterns from frequency analysis:** hand-drawn-everything (95%) used only as a tiny accent in two annotations; glassmorphism (81%) entirely absent; card-grid (91%) / full-bleed (88%) / hero-dominant replaced by continuous-iso-plane plates; warm palette (98%) / gradient (95%) reduced to a single localized lamp wash; photography (98%) wholly absent; pastoral-romantic / warm-inviting tone replaced by the rarely-used dry "professional" engineering voice.