# Design Language for rational.love ## Aesthetics and Tone rational.love is **a love letter drafted as an engineering schematic** — the site behaves as if affection were a mechanism that could be exploded into an isometric assembly diagram, dimensioned with tolerances, annotated in a draughtsman's hand, and stamped APPROVED. The governing fiction: somewhere there is a Bureau of Reasonable Hearts, and this is page 7 of their technical manual — *"Fig. 7: The Heart, Sectioned. Note the redundant valves."* The aesthetic is **isometric technical illustration at a 30-degree projection, rendered on midnight-blueprint stock**, where every emotional claim is treated as a load-bearing component and given a callout balloon, a part number, and a torque spec. The tone is **zen-contemplative laced with deadpan precision** — never cold, never clinical-for-its-own-sake. It is the warmth of someone who loves you so carefully they measured it. Think: the patience of a watchmaker, the dry wit of a patent abstract, the quiet of a drafting room at 2 a.m. with one lamp on. Nothing shouts. Everything is labelled. The humor lives in the contrast between the rigor of the form (exploded views, section cuts, revision tables) and the absurd tenderness of the subject (a heart with "OPERATOR MUST NOT OVERTHINK THIS" silkscreened on the housing). No photography. No stock smiles. No gradients-as-decoration. The only "images" are vector schematics that look pulled from an annotated assembly guide — and they animate as if a draughtsman were drawing them in real time. ## Layout Motifs and Structure The page is **a single vertical scroll organized as a timeline-vertical revision history** — a left-hand "revision spine" running floor to ceiling, ticked with engineering revision marks (▲ A, ▲ B, ▲ C …), and each tick anchoring one "sheet" of the manual. Timeline-vertical sits at only 4% in the frequency analysis; this site claims that room and fuses it with isometric (12%) so the *timeline itself* is drawn in 30-degree projection — the spine is not a flat line but an extruded I-beam receding into the page. - **The 30° law.** Every structural edge — section dividers, callout leader lines, the revision spine, card edges, the underline beneath headings — is drawn at one of three angles only: **0°, 30°, or –30°**. No 45s. No verticals on decorative elements. This single constraint makes the whole page read as one consistent isometric drawing. - **Eight sheets.** The scroll is eight "sheets," each with a title-block in the lower-right corner (`SHEET 03 OF 08 · REV. C · DRAWN BY: YOU · CHECKED BY: TIME · SCALE 1:1`). Sheets are not cards in a grid; they are full-bleed drawing surfaces stacked vertically, each one a different blueprint hue so scrolling feels like flipping through a bound manual. - **Callout balloons everywhere.** Key phrases are not bold — they are *ballooned*: a small circle with a number, a thin leader line at 30°, and a margin note in monospace. Hovering a balloon makes its leader line draw itself and the margin note type out. - **The dimension grid.** A faint dotted isometric grid (3 sets of parallel lines at 0°/30°/–30°, ~6% opacity) sits behind everything — the drafting board the manual rests on. It parallaxes one notch slower than content. - **No nav bar.** Navigation is the revision spine: each revision tick is a jump-link, and the active sheet's tick glows like a fresh ink mark. ## Typography and Palette **Fonts (Google Fonts only — a draughtsman's three voices: the stencil, the hand-note, the body):** - **Sheet titles & wordmark — *Major Mono Display*.** A geometric monospace whose dotted, technical character makes every heading look laser-etched into a metal plate. Used for `RATIONAL.LOVE`, sheet numbers, and all-caps section titles. Tracked wide (`letter-spacing: 0.18em`), sometimes set at –30° along a leader line. Its lowercase-only quirk is embraced: titles render lowercase like a CAD layer name. - **Margin notes, callouts, title-blocks, dimensions — *Space Mono*.** The annotation voice. Every part number, tolerance, leader-line label, and revision-table cell is Space Mono — small (12–14px), often in the dim cyan ink color. This is the "handwriting of the machine." - **Body & long-form passages — *Spline Sans Mono* (or fallback *IBM Plex Mono*).** For the actual love-letter prose that lives inside the schematic — readable monospace with enough humanist warmth to carry sentences, not just labels. Set at a generous 1.8 line-height so paragraphs breathe like spec text. - **One forbidden exception, used once:** the final sheet's closing line appears in *Caveat* (a fast handwritten script) — the only non-monospace, the only non-blue, the draughtsman finally signing in pen. It scrawls itself on with a path-draw stroke. **Palette — midnight blueprint, with cyan ink and a single warm filament:** - `#0B1B2B` — **Drafting Midnight.** Primary background. The deep blue-black of an old blueprint photographed at night. - `#10283D` — **Plate Blue.** Alternate sheet background; slightly lifted so sheet transitions register. - `#1C3A52` — **Section Blue.** Panel fills, balloon interiors, the I-beam spine's shaded face. - `#5BC8D8` — **Cyan Ink.** The drawing color — all schematic linework, dimension lines, active revision ticks. Glows faintly (subtle text-shadow) like backlit acetate. - `#9FE7F0` — **Highlight Ink.** Hover state for linework and balloons; the "wet ink" brighten. - `#E8EEF2` — **Vellum White.** Body text, sheet titles. Warm-neutral, never pure white. - `#F2A65A` — **Filament Amber.** The single warm accent — used *only* for the heart-component itself, the "operator" callouts, and the handwritten signature. Amber against all that blue is the whole emotional thesis in one color move: reason is the room, love is the lamp. - `#6E8597` — **Faded Pencil.** Muted gray-blue for the dimension grid, disabled states, the printed-too-faint marginalia. ## Imagery and Motifs **Everything is a hand-built SVG schematic. No raster images, no 3D renders, no icon fonts. Every visual looks torn from an annotated assembly manual and animates as if being drawn.** - **The Sectioned Heart (hero motif).** A four-chamber heart rendered as a mechanical cutaway — hatched section fills, dimension arrows across the ventricles, callout balloons reading things like "① inlet — handle with care," "② pressure: variable, do not regulate," "③ this part cannot be replaced." Drawn in cyan ink, the heart-shell tinted Filament Amber. On load, its outline path-draws stroke-by-stroke; the hatching fills in last, like a draughtsman shading. - **Exploded assembly diagrams.** Recurring across sheets: small components float apart along 30° axes connected by dashed alignment lines — labelled "patience (M3×0.5)," "the benefit of the doubt," "one good question, asked twice." Scroll pulls them apart; scroll-back snaps them together (spring). - **Dimension lines & tolerances.** Phrases get *measured*: a thin cyan line with arrowheads spans a word, with `127.4 ± 0.0 mm` floating above it — except the tolerance is always something like `± a lifetime` or `± we'll see`. - **The title-block.** Bottom-right of every sheet: a boxed engineering title-block (Space Mono) with rows for SHEET, REV, DRAWN BY, CHECKED BY, SCALE, DATE. The DRAWN BY row always says YOU. It's the reader's signature, quietly, on every page. - **Revision table.** One sheet *is* a revision history table — `REV A: assumed. REV B: asked. REV C: listened. REV D: …` — rows reveal on scroll, the last row left blank with a blinking cursor. - **Isometric grid & corner registration marks.** Faint dotted iso-grid behind all; small crop/registration crosses (✛) in the page corners like a print proof. ## Prompts for Implementation Build rational.love as **a single-route, vertically-scrolled, eight-sheet technical manual** — one HTML file, one CSS file, one JS module. The reader is leafing through *The Bureau of Reasonable Hearts: Operator's Manual, Section 7 — Love (Approved Methods)*. Pace it as a calm 80-second read. **No CTA, no pricing block, no stat-grid, no testimonial row, no email signup, no contact form.** There is only the manual and the act of reading it. **Storytelling structure (eight sheets, vertical scroll, path-draw + scroll-triggered reveals):** 1. **Cover Sheet.** Black-blue void. The iso-grid fades up. `RATIONAL.LOVE` etches itself in Major Mono Display along a –30° leader. Subtitle in Space Mono: `operator's manual · section 7 · love (approved methods) · rev. c`. The Sectioned Heart begins drawing in the lower third. Scroll cue: a single dimension arrow pointing down, labelled `↓ continue (1:1)`. 2. **Sheet 01 — General Notes.** The deadpan preamble: "This document describes a system that cannot be specified. Proceed anyway." Callout balloons bloom one by one, leader lines drawing at 30°. 3. **Sheet 02 — The Heart, Sectioned.** Full cutaway diagram, hatching, dimension arrows, the absurd-tender callouts. This is the showpiece — let the path-draw take its time, let hatching shade in last. 4. **Sheet 03 — Exploded Assembly: Trust.** Components drift apart on 30° axes as you scroll; scrolling up reassembles them with a spring. Each part labelled with a real fastener spec and an unreasonable purpose. 5. **Sheet 04 — Tolerances & Dimensions.** A page of sentences being measured. Dimension lines draw across phrases; tolerances type out (`± we'll see`). The tone peaks in dry wit here. 6. **Sheet 05 — Revision History.** The revision table. Rows reveal on scroll: assumed → asked → listened → [blinking cursor]. Quiet, almost moving. 7. **Sheet 06 — Operating Conditions.** Amber "operator" callouts: "OPERATOR MUST NOT OVERTHINK THIS." "DO NOT REGULATE THE PRESSURE." A small amber lamp-glow grows behind the text — the warmth finally entering the blue room. 8. **Sheet 07 — Sign-off.** The title-block enlarges to fill the sheet. DRAWN BY: YOU. CHECKED BY: TIME. Then the closing line scrawls on in *Caveat*, amber, in pen — "approved." The iso-grid dims. End. **Motion & interaction (lean into the underused, away from the overused):** - **path-draw-svg is the spine of the experience** (44% in corpus but rarely *load-bearing* — here it carries the whole narrative). Every schematic, leader line, dimension line, and the heart draws stroke-by-stroke on enter via `stroke-dashoffset`. The handwritten sign-off uses it too. - **scroll-triggered assembly/disassembly** on the exploded-view sheet (`IntersectionObserver` + scroll progress → component transforms along 30° vectors, spring easing). - **Balloon hover:** leader line draws (250ms), margin note typewriter-types (Space Mono), balloon circle does a soft amber-tinged pulse — *once*, not looping. - **The revision spine** (left edge): active tick brightens to Highlight Ink with a faint glow; ticks are smooth-scroll jump anchors. The spine is drawn in iso projection (extruded I-beam), parallaxing one notch slower than content. - **Reduce motion:** all path-draws resolve instantly to final state; assembly sheet shows the assembled view; typewriter notes appear whole. - **Cursor:** plain. The only "cursor-follow" is a tiny faded crosshair (✛) that snaps to the nearest balloon when within ~80px — a draughtsman's eye finding the next callout. Subtle. Never a glowing orb. - **AVOID:** glassmorphism, hand-drawn doodle aesthetic, warm gradient meshes, card-grids, hero-with-CTA, dopamine neon, parallax-for-its-own-sake, magnetic buttons everywhere, big counter-animate stats. **One CSS file, one JS module.** Keep the JS to: IntersectionObserver reveal orchestration, stroke-dashoffset draw-ins, scroll-progress for the assembly sheet, balloon hover handlers, smooth-scroll for spine ticks, prefers-reduced-motion guard. No frameworks. No libraries. The restraint is part of the joke. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Love rendered as an engineering schematic — the entire site is one isometric technical drawing.** Isometric sits at 12% and almost always means cute 3D icon-blocks for a SaaS dashboard; nothing in the corpus uses isometric *technical-manual illustration* (exploded views, section cuts, dimension lines, title-blocks) as the whole conceit. The 30°/0°/–30°-only edge law is a structural constraint no other design imposes. 2. **timeline-vertical (4%) reinvented as a revision-history spine, drawn in iso projection.** Instead of a "our journey" milestone timeline, the vertical timeline *is* an engineering revision table running floor-to-ceiling as an extruded I-beam — both an underused layout pattern and a recontextualization of it. 3. **An all-monospace typographic system with one single handwritten word.** Mono is 94% in the corpus, but it's almost always paired with humanist sans or used for "tech vibes." Here three *different* monospaces play three draughtsman roles (stencil / annotation / body), and the only break in the entire site is one word of Caveat in amber pen at the very end — the draughtsman finally signing. Typography carries the emotional climax. 4. **The "± a lifetime" tolerance gag and the DRAWN BY: YOU title-block** — humor and intimacy delivered entirely through the *grammar of technical documentation*, not through copy that announces itself as warm. No corpus design uses spec-sheet language as its emotional voice. 5. **Midnight-blueprint palette with a single amber filament as the whole thesis.** Warm palettes are 98% of the corpus; this site is deliberately cold blue everywhere *except* the heart-component and the sign-off, where Filament Amber appears — "reason is the room, love is the lamp." The restraint of one warm color in an otherwise blue site is the opposite of the corpus default. **Chosen seed/style:** `isometric technical docs` — *aesthetic: isometric, layout: timeline-vertical, typography: tech-mono, palette: midnight-blue, patterns: path-draw-svg, imagery: data-viz, motifs: crystalline, tone: zen-contemplative*. **Avoided overused patterns** (from frequency analysis): hand-drawn (95%), glassmorphism (81%), photography (98%), card-grid (91%), full-bleed-as-default, warm palette (98%), gradient (95%), parallax-as-spectacle (90%), cursor-follow orbs (89%), magnetic buttons (81%), pastoral-romantic tone (34%), counter-animate stat grids.