# Design Language for valuator.dev ## Aesthetics and Tone valuator.dev is staged as **the back room of an impossible appraisal house** — a cutaway diorama of a workshop where unvaluable things are weighed, measured, and assigned a worth: the half-life of a promise, the resale value of a forgotten password, the going rate for a Tuesday afternoon. The entire site is built as a single **isometric paper model** seen at a fixed 30°/30° dimetric angle, as though you are leaning over a draftsman's table and looking *down into* a built environment rather than scrolling a page. Nothing is rendered photographically; everything is constructed from flat planes joined at the iso angle, like an exploded technical drawing that has been allowed to stand up on its own. The tone is **dry, precise, faintly absurd** — the deadpan voice of a technical manual that has been asked to specify procedures for nonsense. Copy reads like a tooling reference ("`valuate(subject) → estimate`", "tolerance ±0.04 confidence units", "see appendix C: shrinkage during transit") applied to objects no manual would ever cover. This is the **isometric technical docs** register, but warmed: not the cold engineering blue of a CAD viewport, but the **soft drafting-bond cream** of architecture-school plates — the color of trace paper held to a window, of blueprint that has yellowed honestly. The mood sits between *tech-tutorial* and *whimsical-creative*: an instruction set with a sense of humor about its own pedantry. Inspiration: Chris Ware's diagrammatic comic spreads; the cutaway dioramas in 1970s "How Things Work" annuals; the isometric city tiles of SimCity 2000 redrawn in graphite; Field Notes ledger paper; the patent-drawing convention of numbered call-outs with leader lines; Saul Bass meeting an axonometric grid. ## Layout Motifs and Structure The structural conceit is **layered-depth executed as a single isometric room you tour by scrolling** — not a stack of cards, not a hero-and-sections page, but **one continuous workshop floor ~520vh tall**, viewed from a camera fixed at the dimetric angle and panning slowly downward as you scroll. The corpus shows `isometric` at 13% and `layered-depth` at 13% — both well under the `card-grid`/`full-bleed`/`centered` saturation. We push the iso convention further than the corpus does: the *whole document* is one drawn solid, not a grid of iso icons. - **The iso grid is real and visible.** The background is a faint **isometric lattice** — three sets of parallel rules at 0°, 120°, 240° — printed at 6% opacity in the line color, exactly like draftsman's iso paper. Every built element snaps to this lattice. Nothing is "centered on the page"; things are *placed on the floor* at grid coordinates. - **Five workstations, descending.** The floor is divided into five tables, each a raised isometric platform: **(1) The Intake Bench** (the masthead — where the subject arrives in a crate), **(2) The Scale Room** (what valuation *is* — a giant balance whose pans tip as you scroll), **(3) The Tolerance Cabinet** (drawers that pull open at the iso angle to show methodology), **(4) The Ledger Wall** (a long horizontal-scroll shelf of past appraisals, scrolled sideways while the page holds still), **(5) The Loading Dock** (the footer — where the estimate ships out on a hand-truck). - **Call-out leader lines tie text to objects.** Body copy does not sit in columns. Each paragraph is a **labelled call-out**: a thin leader line runs from a numbered dot on a built object out to a small bond-paper card holding the text, exactly like a patent figure. The reading path is the leader-line path — your eye follows the wire. - **Exploded-view moments.** Twice in the descent, an object **detonates gently into an exploded axonometric**: its parts drift apart along the three iso axes, each part gaining its own number and call-out, then reassembles as you scroll past. This is the layered-depth motif made literal — depth you can pull apart. - No floating nav bar. Navigation is a small **wooden tool-rack** pinned to the top-left of the floor: four hanging tags, each a workstation; clicking slides the camera along the floor. ## Typography and Palette **Type system — three Google Fonts, each with a strict job:** - **`Spline Sans Mono` (Google Fonts)** — the **tech-mono** workhorse. All body call-outs, all numeric readouts, all the manual-voice copy. Spline Sans Mono is a humanist monospace — it has the grid-rigor the diorama demands but rounded terminals that keep it from reading as terminal/console. Set body at 15px/1.65, letter-spacing 0.01em; numeric readouts get `font-feature-settings: "tnum"` so digits column up like a ledger. - **`Fraunces` (Google Fonts, variable — opsz 9–144, wght 100–900, SOFT 0–100, italic available)** — the **expressive display + handwritten-margin voice**. Workstation titles set in Fraunces at clamp(40px, 7vw, 116px), opsz pinned to maximum, wght 340, *very* light — like a title hand-lettered on a drafting plate. The italic of Fraunces (with SOFT axis pushed to ~60) is used *only* for the marginalia: the appraiser's pencilled side-notes that hang off objects ("*this one always weighs less than it claims*"). - **`Anton` (Google Fonts)** — used at exactly **one scale, in exactly four places**: the four numeric verdicts stamped onto the diorama (the final estimate, the confidence figure, the count of appraisals on the Ledger Wall, the shipping weight). Anton at ~9vw, set in the ink color, slightly rotated to the iso vertical — these are the *stamps*, the only truly heavy marks on an otherwise hairline page. **Palette — drafting-bond cream base, graphite structure, two pigment accents, ink for stamps:** - `#F4EFE3` — **trace-paper cream**, the page ground (the table surface). - `#E7DECB` — **aged bond**, fills of raised iso platforms (one tick darker than the floor). - `#3C3A33` — **soft graphite**, all linework, body text, the iso lattice (used at low opacity for the grid). - `#1B1A16` — **stamp ink**, reserved for the four Anton verdicts and nothing else. - `#C2603B` — **appraiser's red-ochre**, the pencil-stub accent: leader-line dots, the marginalia italics, the tipping needle of the balance, active tool-rack tag. Roughly the corpus `terracotta-warm` family but used as a *correction-pencil* mark, sparingly. - `#5C7C6E` — **blueprint sage**, the methodology accent: drawer interiors in the Tolerance Cabinet, the iso-grid highlight on hover, the "verified" tick on Ledger entries. A muted cool that reads as *technical* against all the warm bond. - `#A89878` — **muted gilt**, used only for the thin edge-line where an iso platform's top face meets its side faces — the implied light catching a paper fold. Palette family: `warm` + `muted` + `duotone`-leaning (the two pigments are deliberately rare). No gradients except a single 4%-opacity radial vignette darkening the floor's far edges, to seat the diorama on the table. ## Imagery and Motifs **Everything is built from flat iso planes — no photography, no 3D render, no bitmap textures.** Imagery families: 1. **The built workshop (load-bearing).** Tables, crates, the balance, drawer cabinets, the tool-rack, the hand-truck — all constructed in CSS/SVG as **iso-prisms**: each volume is three parallelograms (top, left, right faces) with the gilt edge-line where they meet. They are drawn at *hairline weight* — 1px graphite outlines, flat bond fills — so the whole scene reads as a drawing that has been folded up into solidity, not a shaded model. 2. **Patent-figure call-outs.** Numbered ochre dots (●1 ●2 …) sit on objects; thin graphite leader lines run from each to a small cream card with a subtle drop-shadow (the only shadows on the site — soft, offset along the iso down-axis, so cards look *raised off the floor* by a few millimetres). The card corners carry a faint **drafting-tape** mark (two short translucent strips, slightly skew). 3. **The Scale.** A two-pan balance dominates the Scale Room — its beam pivots in real time as you scroll, the left pan loaded with the *subject*, the right with a sliding brass weight (Anton-stamped). The needle (ochre) swings and overshoots with a damped-spring wobble. This is the site's hero motif: valuation as physical weighing. 4. **Ledger paper.** The Ledger Wall shelf and every call-out card sit on faint **ruled lines** — pale graphite horizontals at 24px rhythm, plus a single ochre vertical margin rule 40px from the left edge, exactly like a school exercise book. Past-appraisal entries are written *on* these rules in Spline Sans Mono. 5. **Marginalia hand.** Fraunces-italic side-notes in red-ochre, set slightly rotated (−3° to −7°), with a faint pencil-pressure texture (a 2px ochre underline that fades at both ends). These are the appraiser's asides — they never carry information you need, only information you enjoy. 6. **The iso lattice & dimension lines.** Beyond the 6%-opacity background grid, key measurements are called out with proper **technical dimension lines** — graphite lines with arrowheads and a gap for a Spline Sans Mono figure ("⟵ 1 unit of regret ⟶"). Decorative, mostly nonsense, always precise-looking. ## Prompts for Implementation Build valuator.dev as **one HTML document, one CSS file, one ES module of vanilla JavaScript** — no framework, no build step, no canvas, no WebGL. The entire diorama is **SVG + CSS transforms**. Define one CSS custom-property block holding the iso math (`--iso-rot-x: 60deg; --iso-rot-z: 45deg;` style transforms, or equivalently `transform: rotateX(60deg) rotateZ(45deg)` on a `.floor` wrapper with `transform-style: preserve-3d`) so every built prism is just three `div` faces. Page weight under 200kb on first paint; the iso lattice is a single tiling SVG `background-image`. Three Google Fonts only: Spline Sans Mono, Fraunces (variable), Anton. **Storytelling structure — a 90-second tour of the appraisal house, top to bottom:** 1. **Cold open on an empty table.** First 1.4s: just `#F4EFE3` and the faint iso lattice fading up from 0% to 6% opacity. No logo, no spinner. Then a **wooden crate slides in from the upper-left along an iso axis** and thumps to rest (damped-spring, slight settle-bounce of the lattice beneath it). The crate lid lifts on a hinge — inside, instead of an object, the word **`SUBJECT`** in Anton, rotated to the iso vertical. The masthead title "valuator.dev" is hand-lettered in light Fraunces on the table surface beside the crate, as if written in pencil; a leader line connects it to call-out ●1: a Spline Sans Mono card reading the one-line premise (`a workshop for assigning worth to things that have none`). 2. **The camera pans down the floor as you scroll.** Implement as a single `translateY` on the `.floor` wrapper driven by scroll position, eased. The iso angle never changes — only the vertical pan. Built objects enter the viewport from the "far" (top) edge and recede toward the "near" (bottom) edge; give far-entering objects a subtle 3-stage stagger-reveal (face fills fade in last, after their outlines draw via `path-draw-svg` stroke-dashoffset — `path-draw-svg` is at 49%, common, but here it's drawing *isometric construction lines*, which the corpus does not do). 3. **Scale Room — the weighing.** As this workstation enters, the two-pan balance is the only object. Bind the beam's `rotate` (about its iso pivot) to scroll progress *through this section*: at section-start the subject-pan is heavy (beam tilts left, needle pegged ochre-red); as you scroll, the brass weight slides outward along the beam and it levels; overshoot with a spring at the moment of balance. The Anton verdict number (the "estimate") **counter-animates** up to its final value (`counter-animate`, 18%, fine — but tied to the physical needle, not a generic scroll trigger) and **stamps down** onto the table with a 1-frame scale-punch and a faint ochre ink-spread. Marginalia in Fraunces italic hangs off the beam: "*subjects rarely agree with the scale.*" 4. **Tolerance Cabinet — exploded view #1.** A bank of iso drawers. On scroll, the cabinet **explodes axonometrically**: drawers slide out along their iso axis, the top panel lifts and drifts up-and-back, each freed part gains a number and a leader-line call-out describing one piece of "methodology" (deadpan, manual-voiced, faintly absurd — `step 3: subtract the part you'd miss`). Scroll a little further and it reassembles. Use only `transform: translate3d()` along the three iso basis vectors for the explosion — no rotation of parts, keep it clean. 5. **Ledger Wall — horizontal-scroll shelf.** When this section pins, vertical scroll converts to **horizontal travel** along a long shelf of past appraisals (each a ledger-paper card: subject, a tiny iso-glyph of it, an Anton micro-figure, a sage "verified" tick). 8–12 entries, all gently absurd ("a half-finished apology — appraised 0.3 units, depreciating"). Cursor over a card and its iso platform lifts a few px on the down-axis (`hover-lift`, only 9% in corpus — underused — and here it's a *physical* lift on the iso plane). A faint magnetic pull (`magnetic`) draws the nearest leader-line dot toward the cursor within ~80px, like the needle of a compass. 6. **Loading Dock — the ship-out.** Final workstation. The crate from step 1 reappears, now **stamped** with the final estimate (Anton). A hand-truck tips it back and **rolls it off the lower-left edge** of the floor along an iso axis as you reach the bottom; the iso lattice continues a little past where the content ends, then fades to flat cream — the table, now empty again. A last marginalia line in ochre italic: "*next.*" **Interaction details:** cursor is a small **graphite cross-hair** (a draftsman's, not an OS arrow); over interactive objects it gains tiny ochre dimension-ticks. Page respects scroll velocity — fast scrolling pans the camera faster but the spring physics on the balance and exploded views always settle. A faint, near-silent paper-rustle is the *only* sound, and only on the crate-slide and the stamp — implement as an optional `