# Design Language for prototype.report ## Aesthetics and Tone prototype.report is **an engineering bureau's blueprint table, rendered as a single isometric drafting plate that never stops being drawn**. Imagine the back room of a 1960s aerospace documentation office — drafting boards tilted at the same fixed angle, vellum sheets pinned at the corners, a draftsman's parallel rule clicking across the surface — but the device being documented is a prototype that doesn't exist yet, an object assembled entirely from line-weight and dimension callouts. The mood is **scholarly-intellectual precision with the quiet thrill of a thing about to work**: not the cold sterility of corporate SaaS, not the neon swagger of "dev tools," but the patient, ink-on-cyanotype calm of someone who measures twice. Everything is **isometric** — the whole page lives on a 30°/150° axonometric grid, and there is no "flat" anywhere; even the typography sits on the plate like silkscreened panel labels. The palette is an **ethereal-blue blueprint** that has been left in a sunlit window: faded cyanotype paper, washed indigo lines, a single warm amber that reads like the glow of a desk lamp falling across the drawing. Tone words: deliberate, exploratory, exact, faintly nostalgic for a future. The site should feel like *reading the spec sheet of a machine you're slowly falling in love with*. ## Layout Motifs and Structure The page is a **single vertical timeline-vertical spine** — a "revision history" rail running down the left third — with the right two-thirds reserved for the isometric drawing plate. (Timeline-vertical sits at 4% in the frequency analysis; isometric layout at 11% — both far from the 91% card-grid / 88% full-bleed crush. This design claims that thin column.) - **The 30° plate.** Every container, card, image frame, and divider is skewed onto the same axonometric grid: `transform: skew/rotate` combos that produce true isometric faces (top face, left face, right face). Nothing is a plain rectangle facing the viewer. Section breaks are **dimension lines** — thin double-arrowed rules with a numeric callout floating above them ("REV 03 — 412mm"). - **The revision spine (left rail, ~30% width, sticky).** A vertical line of revision nodes: each node is a small isometric cube that "stamps" into place as you scroll. The spine is the navigation; the spine is the table of contents; the spine is the story. No top nav bar — just the rail and a fixed wordmark plate in the top-left corner. - **The drawing plate (right, ~70%).** Scroll-driven assembly: an exploded isometric diagram of "THE PROTOTYPE" — an invented device of plates, struts, a lens, a coil, a bracket — whose parts drift apart at the top of the page and **converge into a single assembled object by the footer**. Each scroll section pins one subassembly with leader lines and callout numbers (①②③) pointing to part names. - **Margin furniture.** Pinned "corner tabs" at the four page corners (the vellum-pin look), a faint title-block grid in the bottom-right (DRAWN BY / SCALE / SHEET 1 OF 1 / DATE 2026-05-11), and hairline registration crosses at quarter points. - No hero-dominant banner, no bento boxes, no card-grid of features. The composition reads top-to-bottom as **a document being revised in real time**: REV 00 (blank plate) → REV 01..06 (parts arrive) → REV FINAL (assembled, title block stamped). ## Typography and Palette **Fonts (Google Fonts only):** - **Plate labels, callouts, dimension text, wordmark — `IBM Plex Mono`** (tech-mono; mono is at 94% but Plex Mono specifically is the *engineering-document* mono, not the terminal-hacker mono). Used uppercase, tracked +0.08em, for every part name, revision tag, and number. This is the silkscreen on the panel. - **Body prose & section intros — `Spline Sans Mono`** — a softer monospaced humanist face for the few paragraphs of running text, so reading copy doesn't feel like reading a CSV. Set at a comfortable 1.7 line-height, left-aligned, never justified. - **The single display moment — `Big Shoulders Stencil Display`** — used exactly once, for the words "THE PROTOTYPE" embossed across the assembled object near the footer, at 9rem+, in faded-blue stencil so it looks stamped onto sheet metal. Stencil + isometric skew = crate-label energy. **Palette (ethereal-blue blueprint, sun-faded):** - `#EAF1F6` — Vellum White (page background; the faded paper) - `#C9DCE8` — Wash Cyan (the lightest blueprint fill, top faces of isometric solids) - `#7EA8C4` — Faded Indigo Line (mid line-weight, left faces, dimension lines) - `#34557A` — Drafting Indigo (heavy line-weight, body text, the spine) - `#16263A` — Deep Slate (deepest ink, headings, right faces in shadow) - `#E8A04B` — Lamp Amber (the ONE accent — active revision node, hovered callout number, the "this part is selected" glow) - `#F5E6CF` — Warm Paper Shadow (a barely-there amber tint on the underside of pinned tabs) Rule: amber is rationed — it appears only where the user's attention currently is. Everything else is the blue-on-paper continuum. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration. Every visual is hand-built SVG line-art on the isometric grid.** (Photography is at 98% in the corpus — this design uses zero.) - **The Prototype itself** — an invented mechanical object built from ~7 named SVG subassemblies: BASE PLATE, SUPPORT STRUT (×2), OPTICAL LENS, INDUCTION COIL, MOUNTING BRACKET, COVER PANEL, FASTENER SET. Each is drawn in pure stroke (no fills except wash-cyan top faces), with isometric depth implied by line-weight only. They are decorative *and* the narrative — there's nothing else to look at, and that's the point. - **Dimension & leader lines** — double-arrowed dimension rules, extension lines with the little gap before the part, leader lines that elbow once and end in a numbered circle. These are the connective tissue of the whole layout. - **The revision cube** — a small isometric cube (three visible faces) used as the bullet/node on the spine, as the favicon motif, and as the loading "stamp." - **Grid-lines** — a faint isometric grid (the drafting paper) bleeding through everything at ~6% opacity; it's the texture, the only "background pattern." - **Title block** — the bottom-right engineering title block (DRAWN BY · SCALE · SHEET · DATE · REV) is real, populated, and updates its REV field as you scroll. - **Corner pins** — four small isometric pin-heads holding the "sheet" to the "board," casting a 2px amber-tinted shadow. - **Hatching** — section-cut hatching (45° parallel lines) used sparingly where a part is shown "in section." ## Prompts for Implementation Build prototype.report as **one route, one HTML file, one CSS file, one JS module** — a single vertically-scrolled drafting sheet on which a prototype assembles itself across revisions. No CTA, no pricing tier, no stat grid, no testimonial wall, no email capture, no feature cards. There is the spine, the plate, and the slowly-assembling object. **Narrative structure (scroll = revision history, ~75–90 seconds top to bottom):** 1. **REV 00 — Empty Plate.** Vellum background, isometric grid fades in, the title block draws itself in the bottom-right corner one line at a time (`path-draw-svg` — 43% in corpus, used here as the *primary* motion, not a decorative flourish). The four corner pins drop in with a tiny `spring` settle. Wordmark plate "prototype.report" silkscreens in, top-left, letter by letter via clip-path reveal. The revision spine appears as a single vertical line with REV 00 stamped at the top. 2. **REV 01 — BASE PLATE arrives.** As the user scrolls, a new revision cube stamps onto the spine (amber flash, then cools to indigo), the spine line extends downward, and the BASE PLATE SVG slides in from the right edge in exploded position, its leader lines drawing out to a numbered callout ①. A short paragraph in Spline Sans Mono explains the part — written like a calm spec annotation, not marketing copy. 3. **REV 02–06 — STRUTS, LENS, COIL, BRACKET, COVER PANEL** each get their own scroll section: spine cube stamps, part flies into exploded position above the assembly point, callouts draw, annotation appears. Each part that has already arrived **drifts very slightly closer to its final position** with every new section — so the object visibly converges as you descend. Parallax (90% in corpus, fine — but subtle here): the plate layer moves a hair slower than the spine. 4. **REV FINAL — Assembly.** All parts animate to their assembled positions, leader lines retract, dimension lines snap to the final overall dimensions, "THE PROTOTYPE" stencils across the body in Big Shoulders Stencil Display, and the title block's REV field updates to "FINAL" with an amber stamp-thunk. A single closing line of mono text. The page ends — no footer links, no "subscribe," just the finished drawing and its title block. **Interaction details:** - **Spine hover/click** — hovering a revision cube glows it amber and highlights the corresponding part on the plate (the rest of the assembly dims to wash-cyan). Click smooth-scrolls to that section. This is the only navigation. - **Callout hover** — hovering a numbered circle (①②③…) glows it amber, thickens its leader line, and pulses the part's outline once. - **Cursor** — replace the cursor over the plate with a small drafting crosshair (CSS, isometric tick marks). `cursor-follow` (89% in corpus) used minimally: a faint 1px registration cross trails the pointer on the plate only. - **Reduced-motion** — the assembly jumps to its final REV FINAL state; all parts shown assembled, title block complete. - **Type-on-load** — wordmark and title-block lines use a `typewriter-effect` (14% in corpus) at draftsman pace (~40ms/char), monospace, no blinking cursor — it reads as someone lettering, not a terminal. **Implementation notes:** Pure CSS `transform` for the isometric faces (`rotateX(60deg) rotateZ(-30deg)` family or equivalent matrix skews); SVG `stroke-dasharray`/`stroke-dashoffset` for every line that "draws"; IntersectionObserver to drive the per-section reveals; CSS custom properties for the amber-rationing (one `--active` part at a time). Keep it light — the drama is in line-weight and patience, not particles. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Fully isometric layout — no flat plane anywhere.** Isometric is only 11% in the aesthetic data and almost always shows up as a decorative icon set inside an otherwise flat card-grid. Here the *entire page geometry* is axonometric: every container, divider, frame, and the wordmark itself sits on the 30° drafting grid. There is no front-facing rectangle on the site. 2. **The layout IS the content.** Timeline-vertical (4%) is used as the literal revision-history spine, and the only "imagery" is an invented prototype device that assembles itself — no photography (the corpus is at 98%), no stock, no hero banner, no feature cards, no stat grid. The exploded-view diagram is simultaneously the navigation, the illustration, and the narrative. 3. **Amber rationing on a sun-faded cyanotype.** Ethereal-blue is in the vocabulary but usually shows up glossy/glassmorphic; this is a *matte, sun-bleached blueprint* (Vellum White / Wash Cyan / Faded Indigo) with a single warm `#E8A04B` that only ever marks where the user's attention currently is — a chromatic discipline, not a color scheme. 4. **`path-draw-svg` as the load-bearing motion, not a flourish.** The whole page is "being drawn" — title block, leader lines, dimension rules, the device outlines — at a calm draftsman pace, against the corpus's 90% parallax / 89% cursor-follow / 84% spring reflexes which here are demoted to near-invisible support. 5. **Engineering-document typography, not terminal-hacker mono.** IBM Plex Mono + Spline Sans Mono + a single Big Shoulders Stencil Display moment — mono used as *silkscreen panel labels and spec annotations*, the opposite of the green-on-black terminal cliché. Chosen seed/style: **"isometric technical docs"** — *aesthetic: isometric, layout: timeline-vertical, typography: tech-mono, palette: ethereal-blue, patterns: path-draw-svg, imagery: isometric-icons, motifs: grid-lines, tone: scholarly-intellectual*. (Fallback selection — no Planned Seed was supplied in the assignment; this seed has no conflicting use in the neighboring designs reviewed.) Avoided patterns from frequency analysis: hand-drawn (95%), glassmorphism (81%), photography (98%), card-grid (91%), full-bleed (88%), centered (83%), warm palette (98%), gradient (95%), and the magnetic/spring/cursor-follow reflex stack — all either omitted entirely or deliberately demoted to faint support.