# Design Language for prototype.quest ## Aesthetics and Tone prototype.quest is staged as **the working logbook of an itinerant industrial-design draughtsman who never builds the same machine twice** — a person who travels with a flat metal case of dip pens, French curves, a folding parallel rule, and a roll of buff isometric grid paper, and who treats every commission as a *quest*: a sketched apparatus, dimensioned, exploded, annotated, and then abandoned for the next idea. The whole site reads as a single sheet of **30°/30° isometric drafting paper** that has been worked on for years — pale ink-blue grid lines printed faintly under the surface, hard-pencil construction lines, ink overlays in two weights, and the occasional smear of graphite where a hand rested. The tone is **tech-tutorial** but in the register of a 1950s mechanical-drawing primer rather than a developer blog: confident, instructional, slightly pedantic about line weights and projection conventions, fond of the words *datum*, *fillet*, *tolerance*, *section A–A*. It is the voice of someone who genuinely believes a well-drawn exploded view is a kind of poem. There is warmth here, but it is the warmth of buff paper and brass instruments, not of sunsets — a **honeyed-neutral** ground that never tips into "cozy." Critically, the aesthetic is **isometric** in the *technical-drawing* sense — true axonometric projection, parallel lines that never converge, no vanishing point, no perspective faking depth — and that constraint is the whole personality. Where most isometric web work uses cartoon city-blocks and pastel cubes, prototype.quest uses isometric the way a machinist's handbook does: to make a complicated three-dimensional object legible on flat paper. Every "image" on the page is a *plate* — a numbered, captioned, dimensioned isometric drawing of an invented device, rendered in CSS as flat shapes on the three iso faces (top, left, right) with the canonical 30%-darker / 30%-lighter / mid shading. ## Layout Motifs and Structure The structural conceit is **isometric-technical-docs**: the page is *one large drafting sheet*, scrolled vertically, divided into numbered **Plates** (Plate 1 through Plate 8). It is **not** a card-grid, **not** a hero-then-features stack, **not** a dashboard. It is a sheet of paper with a title block in the bottom-right corner that stays fixed. **The drafting sheet.** A persistent full-viewport background of buff paper (`#F2E8CF`) carrying a faint isometric grid: three families of parallel lines at 0°, +30°, and −30° from horizontal, drawn at 1px in `#BFC9D8` at 22% opacity, repeating every 28px along each axis (a CSS `repeating-linear-gradient` triple-stack). Over that, a slightly bolder *border-and-margin* rule: a 2px frame `#5A4A2E` inset 32px from the viewport edges, with the classic drafting-sheet **zone markers** — letters A–H down the left margin, numbers 1–12 across the top — set in tiny mono. **The title block.** Fixed to the bottom-right, a multi-cell rectangular block (the way real drawings carry one): `prototype.quest` as the drawing title, a fake drawing number (`PQ-001 REV —`), scale (`SCALE: NTS`), projection symbol (the **third-angle projection** truncated-cone glyph, drawn in SVG), and a "DRAWN BY / CHECKED BY" pair of initials. It updates one cell — `SHEET n OF 8` — as you scroll past each Plate. This is the closest thing to navigation; clicking a cell scrolls to that Plate. **Plate composition.** Each Plate is `min-height: 100vh` and laid out as an **asymmetric two-zone field**: a large drawing area (roughly 62% of width, but never centered — alternates left-heavy / right-heavy Plate to Plate) holding the isometric apparatus drawing, and a narrower **annotation column** carrying the Plate number, title, the explanatory paragraph (set like a drawing note), and a bulleted *parts list* / *revision note*. Leader lines — thin `#1B1408` strokes with a tiny filled circle at the drawing end and a kink partway — physically connect callout numbers floating on the drawing to the items in the parts list. The negative space between zones is generous and *not* filled; emptiness on a drafting sheet is correct, not a problem. **Construction-line reveals.** As each Plate enters the viewport, its isometric drawing assembles the way a draughtsman builds one: first the faint **construction lines** draw themselves (the iso bounding box, centerlines, the 30° guides) via animated SVG `stroke-dashoffset`, *then* the solid object faces fade and "ink in" on top, *then* the dimension lines and arrowheads snap into place, *then* the callout leaders extend. The whole assembly takes ~1400ms and is staged so it reads as *being drawn*, not as *fading in*. ## Typography and Palette **Type stack — Google Fonts only, three families, strict assignment.** - **Spectral** (serif-revival, weights 300 / 400 / 500, italic available) — the **prose voice**. Drawing notes, explanatory paragraphs, the title-block "DRAWN BY" fine print. A transitional serif with enough warmth to sit on buff paper and enough crispness to read like a reference manual. Body set at 1.0625rem, line-height 1.75, measure capped near 60ch in the annotation column. Italic Spectral is used for *Latin-ish technical asides* and figure captions ("*fig. 4 — gimbal yoke, exploded*"). - **Bricolage Grotesque** (display, weights 600 / 700 / 800, optical sizing on) — **Plate titles and the big sheet title only**. A slightly idiosyncratic grotesque whose subtle quirks read as "drawn by a person with strong opinions." Plate titles set at `clamp(34px, 5.2vw, 78px)`, tracking tightened to -0.02em, in `#1B1408`. Never used for body, never for the grid labels. - **Spline Sans Mono** (mono, weights 400 / 500) — **everything that would be hand-lettered on a real drawing in stencil mono**: dimension values (`Ø12.0`, `45°`, `R3`), zone markers (A–H, 1–12), the title-block cells, callout numbers, parts-list item codes, the `SHEET n OF 8` counter. Set tight, uppercase for labels, with `font-feature-settings: "tnum"` so dimension columns align. **Palette — honeyed-neutral ground, ink-blue grid, two ink weights, one signal accent.** - `#F2E8CF` — **buff drafting paper.** The page ground. Warm, slightly desaturated, like aged isometric paper. - `#E8DBB8` — **paper shadow / recessed cells.** Used inside title-block cells and behind the parts lists to suggest a second sheet beneath. - `#1B1408` — **ink black (heavy line).** Object outlines, Plate titles, the darkest of the three iso faces' edges. Not pure black — a warm near-black so it sits on buff without buzzing. - `#5A4A2E` — **sepia ink (light line / construction & dimension lines).** Dimension lines, extension lines, leader lines, the sheet border, secondary text. The "0.3mm pencil" of the system. - `#BFC9D8` — **drafting blue (the printed grid).** The faint 0°/±30° grid lines and centerlines. Cool, dusty, classic blueprint-paper-inverted blue. Only ever appears as thin lines at low opacity, never as a fill. - `#C8602A` — **vermilion correction red (the single signal accent).** Used exactly the way a checker's red pencil is used on a real drawing: revision clouds, the *one* "REVISED THIS SHEET" callout per Plate, the active title-block cell, hover state on leader-line endpoints, and the underline that draws itself under a Plate title on entry. Sparingly. If it appears more than ~3 times per viewport the design is broken. - `#4A6E54` — **drafting-green (secondary annotation).** Reserved for "approved / final" stamps and the small folding-rule decorative element in margins. Rare; a quiet complement to the vermilion. Iso-face shading is derived, not arbitrary: a device's **top face** = base hue at 100%, **left face** = base ×0.78 (darker), **right face** = base ×1.0 lightened toward paper by 18%. Applied consistently so every invented apparatus reads as the same light source. ## Imagery and Motifs **There is no photography.** Every visual is a constructed isometric drawing. Three motif families: **1. Isometric apparatus plates (load-bearing imagery).** Eight invented devices, each drawn as flat CSS/SVG polygons on the three iso axes — examples: *Plate 2 — "the bench reciprocator"* (a hand-cranked linkage), *Plate 4 — "gimbal yoke, exploded"* (three nested rings flying apart along their iso axes with thin assembly-path lines connecting them to their seated positions), *Plate 6 — "the index drum"* (a faceted cylinder approximated as a 12-gon prism in iso), *Plate 8 — "the whole engine, assembled"* (everything from earlier Plates composited into one improbable machine). Each is built from `clip-path` polygons and `transform: skewX/skewY/rotate` so the geometry is *true* iso, not pseudo-3D. Each plate carries: an iso bounding box in construction-blue, two or three **dimension lines** with arrowheads and mono values, 3–5 numbered **callouts** on leader lines, and a small **section indicator** (the A↔A arrow pair). **2. Drafting-instrument margin glyphs.** Small SVG line-drawings tucked into the wide margins between zones, drawn in sepia: a folding parallel rule, a French curve, a divider/compass, a 30-60-90 set square, a lettering stencil. They are decorative but *quiet* — 1px strokes, never filled, never animated except a faint 2° drift on cursor proximity (`cursor-follow`, gentle, spring-damped). **3. The grid and its annotations.** The isometric grid itself is a motif: at three Plates it briefly "lights up" — a few grid cells along the apparatus's bounding box stroke in vermilion for ~600ms during the construction-line reveal, as if the draughtsman snapped a line to the grid, then fade back to dusty blue. Centerlines (the long-dash/short-dash CAD convention: `4 1 1 1` dash array) run through every cylindrical part. ## Prompts for Implementation Build prototype.quest as **one HTML document, one CSS file, one ES module**. No framework, no router, no SPA. The page is a *drawing*, read top to bottom — narrative and craft over conversion. **No CTA stack, no pricing tiers, no testimonial carousel, no stat-counter grid, no email-capture bar, no "get started" button.** If a section feels like it wants a "Sign up" button, it is wrong; replace it with a parts list or a revision note. **Storytelling is the spine.** The visitor lands on the **sheet** — buff paper, faint iso grid, the empty title block in the corner with its cells blank. A ~1600ms overture: the sheet border draws itself (animated dash-offset, corner to corner), the zone markers (A–H, 1–12) type in, the title-block grid lines draw, and finally `prototype.quest` letters in across the title cell in Bricolage Grotesque while `PQ-001 REV —` and `SHEET 1 OF 8` populate the mono cells. *Then* the visitor scrolls. Plate 1 is the "general arrangement" — the simplest device, fully assembled, establishing the drawing conventions (here's what a dimension line is, here's what a callout is). Plates 2–7 each introduce one subsystem, drawn as an **exploded isometric view** that re-assembles on a second scroll-trigger (parts slide along their iso axes from "exploded" to "seated," thin assembly-path lines retracting). Plate 8 composites every earlier device into one absurd, glorious, fully-dimensioned **assembled engine** — the payoff. A final thin line: the title block's `CHECKED BY` cell gets a vermilion check-mark and the word `APPROVED` stamps in green, slightly rotated, slightly off-register, like a real rubber stamp. **Motion vocabulary** (favor `path-draw-svg`, `fade-reveal`, `stagger`, gentle `cursor-follow`; avoid `tilt-3d`, `magnetic` buttons, `card-flip`, `parallax` velocity layers — parallax fights the no-perspective rule): - **Construction-line draw-on**: every drawing assembles via `stroke-dashoffset` animation, staged construction → ink → dimensions → leaders, ~1400ms, `cubic-bezier(.22,.61,.36,1)`. - **Exploded → assembled** on second scroll-trigger: parts translate along their three iso axes; assembly-path lines (the thin lines showing where a part goes) draw on during explode, retract on assemble. - **Leader-line endpoints**: on hover of a parts-list item, its leader line on the drawing thickens to 1.5px and its endpoint circle fills vermilion (`#C8602A`); the matching callout number on the drawing pulses once. - **Grid snap flashes**: a handful of iso grid cells stroke vermilion for ~600ms during a Plate's reveal, then fade to `#BFC9D8`. - **Title-block counter**: `SHEET n OF 8` cell cross-fades its number as each Plate crosses the viewport midline; the active Plate's title-block reference cell tints `#C8602A`. - **Margin instruments**: 1–2° spring-damped drift toward the cursor when it's within ~120px; otherwise dead still. - **Underline-draw**: each Plate title gets a vermilion underline that draws left-to-right on entry, like a draughtsman ruling under a heading. - Respect `prefers-reduced-motion`: skip the explode/assemble and draw-on; present every drawing already inked, dimensioned, and seated. **CSS technique notes**: real isometric geometry via `transform` (the canonical iso trio: top face `rotate(210deg) skewX(-30deg) scaleY(.864)`, etc.) or via pre-computed `clip-path` polygons — pick one and be consistent. The grid is a triple `repeating-linear-gradient` at 0°/30°/150°. Dimension arrowheads are tiny SVG `marker` elements. The CAD centerline dash convention (`stroke-dasharray: 6 2 1 2`) is used for every axis of revolution. Keep total payload lean; this is line art, it should be a few KB of SVG paths and gradients, not bitmaps. **Layout discipline**: never center the drawing zone — alternate left-heavy / right-heavy Plate to Plate so the eye travels in a zig-zag down the sheet. Leave the negative space empty. The wide margins carry only zone markers and the occasional instrument glyph. Body measure stays narrow (~60ch) in the annotation column — drawing notes are not meant to be read in long lines. ## Uniqueness Notes Differentiators this design commits to; none should be duplicated by any sibling CMassC site: 1. **Isometric used as *technical drawing*, not as *cartoon 3D*.** Frequency analysis: `isometric` aesthetic ≈ 11%, `isometric-icons` imagery ≈ 3% — and essentially every existing use is the pastel-city-block / floating-cube idiom. prototype.quest is the registry's drafting-handbook isometric: true axonometric projection, no vanishing point, three-face canonical shading, dimension lines, callouts, section arrows. The constraint *is* the design. 2. **The fixed drafting title block as navigation.** No other site uses a real engineering-drawing title block — drawing number, scale, third-angle-projection glyph, DRAWN BY / CHECKED BY, `SHEET n OF 8` — as its persistent corner UI and only nav affordance. 3. **"Being drawn" reveals, not "fading in" reveals.** Every illustration *assembles* in the documented draughtsman's order — construction lines, then ink, then dimensions, then leaders — via `stroke-dashoffset`. Pairs with `path-draw-svg` (≈43%, common) but the *staging* (construction→ink→dim→leader) and the exploded→assembled second-trigger are this design's own. 4. **Vermilion-as-checker's-red discipline.** `#C8602A` is rationed to "a red pencil correcting a drawing": revision clouds, the one revised-callout per Plate, the active title-block cell, leader-endpoint hover. Quantified ceiling (~3 appearances per viewport). The `#4A6E54` drafting-green appears only as the final APPROVED stamp. 5. **Honeyed-neutral + drafting-blue grid pairing.** A warm buff paper ground (`#F2E8CF`) carrying a *cool* dusty-blue (`#BFC9D8`) printed iso grid — blueprint-paper thermally inverted. Avoids the warm-gradient default (`warm` palette ≈ 98%, `gradient` ≈ 95%): there is **no gradient fill** anywhere except the hairline grid stripes; the page is flat ink on flat paper. 6. **Avoided patterns, explicitly**: no `card-grid` (≈91%), no `hero-dominant` stack, no `glassmorphism` (≈81%), no `tilt-3d` / `magnetic` button choreography, no `parallax` velocity layers (they would imply a vanishing point and break the projection), no photography (≈98%) — every visual is constructed line art. [Chosen seed/style: **isometric technical docs** — `aesthetic: isometric, layout: editorial-flow, typography: serif-revival, palette: honeyed-neutral, patterns: path-draw-svg, imagery: isometric-icons, motifs: grid-lines, tone: tech-tutorial`]