# Design Language for prototype.rs ## Aesthetics and Tone prototype.rs is **a working drawing of an idea before it becomes a thing** — an immersive isometric drafting table on which a single Rust prototype is being assembled, exploded, annotated, and re-folded in front of the reader. The governing metaphor is the **axonometric assembly diagram**: the kind of cutaway technical illustration you find on the inside fold of a model-kit box or in a 1960s patent application, where every component floats at a fixed 30-degree skew, connected by thin leader lines to handwritten-looking part numbers. Here, the "components" are the stages a prototype passes through — sketch, scaffold, spike, harden, ship — and the page is the table they are laid out on under a single raking work-lamp. The tone is **grounded-earthy meets tech-tutorial**: unhurried, precise, slightly obsessive, the voice of someone who keeps a bench notebook and labels their drawer dividers. Nothing here glows, blooms, or sparkles. The light is the cold even light of a north-facing studio. The mood is the quiet satisfaction of a part that clicks into place on the first try. Where most dev sites perform speed and disruption, prototype.rs performs **patience and tolerance** — in both senses of the word "tolerance": the gap you leave between two parts so they can move, and the willingness to sit with a half-finished thing. The aesthetic deliberately fuses **isometric** (11% in the corpus — uncommon, and almost never executed as a *literal axonometric workbench* rather than as decorative isometric icons) with **blueprint draftsmanship**, **muted cool-grays**, and a **terminal-mono** voice. It avoids the corpus's two saturating defaults entirely: there is **no glassmorphism** (81%) and **nothing hand-drawn in the cute-doodle sense** (95%) — the only "hand" present is the disciplined hand of a draughtsman's lettering stencil. ## Layout Motifs and Structure The composition is **isometric layered-depth** organized as a **continuous axonometric scroll** — a fusion the corpus does not contain (isometric layout is rare; immersive-scroll is 12%; the two are not combined as a single drafting-table descent). The entire page lives on one tilted plane: a CSS `transform` establishes a shared isometric basis (`rotateX(54.7deg) rotateZ(45deg)` flattened to a 2:1 dimetric for legibility, ~26.57deg run), and every section is a **flat panel resting on that plane** at a different "height" (z-translate), so scrolling reads as the camera tracking sideways and slightly up across a long bench. - **The bench grid.** The base layer is an infinite **isometric graph paper** — two families of thin lines at +26.57deg and −26.57deg, plus faint verticals — drawn once as a tiling SVG, 24px module, line weight 0.75px in `#3C4654` at 14% opacity over `#E7E9EC`. Every panel snaps to this grid. Major gridlines (every 6th) are slightly darker; the reader can always count modules to feel scale. - **Five assembly stations**, left-to-right along the bench: `00 / SKETCH`, `01 / SCAFFOLD`, `02 / SPIKE`, `03 / HARDEN`, `04 / SHIP`. Each station is a **raised platen** — a rectangular panel lifted ~40px off the bench plane, casting a hard-edged blueprint shadow (no blur; a flat offset duplicate in `#C3C8CF`). On each platen sits one **exploded component**: a stack of isometric "plates" (the layers of that stage) separated vertically with thin **leader lines** connecting each plate to a part-number callout in the right margin. - **The margin rail.** Down the right edge runs a fixed **drafting title block** in the convention of an engineering drawing: `SHEET 03 OF 05`, `SCALE 1:1`, `REV. C`, `DRAWN BY: —`, a revision-triangle history. As you scroll the sheet number ticks. This replaces a conventional nav. - **Section transitions are "folds."** Between stations the bench plane visibly **creases** — a hairline crease line crossing the viewport at the isometric angle, with the next station's panel hinging up from it. The whole page reads as one long sheet folded into an accordion. - **No card-grid** (91%), **no centered hero stack** (83%), **no bento box**. The only "grid" is the literal isometric graph paper. Content blocks are **plan/elevation pairs**: a thing shown in isometric, then its flat "drawing" beside it with dimension lines. Max content envelope ~1320px; on narrow viewports the isometric skew gently relaxes toward flat (the bench "rotates to face you") but the graph paper, leader lines, and title block remain. ## Typography and Palette **Fonts — Google Fonts only, three voices drawn from the mono / humanist / condensed axes; the discipline is restraint:** - **Drafting lettering & part numbers — *Oxanium* (weights 400 / 600 / 700).** A wide, slightly technical display face with the squared-off feel of a stencil set. Used for the wordmark `prototype.rs` at 64px with `letter-spacing: 0.04em`, for the five station labels (`00 / SKETCH` …) at 15pt small-caps `letter-spacing: 0.22em`, and for all part-number callouts (`P-114`, `Ø3.0`, `±0.2`) at 11–12pt. Oxanium's geometry reads as "engineered" without tipping into sci-fi chrome. - **Body & annotations — *IBM Plex Mono* (weights 400 / 500, plus 400 italic).** Every paragraph, every annotation, every leader-line label is monospaced — the corpus's mono is 94% so its *presence* is unremarkable; the differentiation is that here mono is the **measured hand of the bench notebook**, set at a generous 16px / 1.7 line-height, italic reserved strictly for "marginalia" asides set rotated along leader lines. - **Dimension figures & captions — *Saira Condensed* (weights 300 / 500).** The narrow numerals you'd ink along a dimension line. Used at 12pt for the title-block fields, scale markers, and the running module count. Its tight set lets long dimension strings sit on a single leader without crowding. No fourth font. No handwritten script. **Palette — cool-grays (5% in corpus) with a single restrained signal color; explicitly NOT warm (warm is 98%), explicitly NOT a gradient wash (gradient is 95% — gradients here appear only as the faint tonal step from one bench fold to the next):** - `#E7E9EC` — **drafting-paper white**, the bench surface; very slightly cool, never pure #FFF. - `#D7DCE1` — **fold shadow / second-tone paper**, used where one sheet overlaps another. - `#3C4654` — **graphite line**, the primary line and text color; a desaturated blue-black, the color of a 2H pencil pressed firm. - `#7A828C` — **mid-graphite**, secondary text, hidden-detail lines (rendered dashed). - `#1E232B` — **ink black**, reserved for the wordmark, station numbers, and hard blueprint shadows only. - `#B45A2E` — **oxide orange**, the *only* warm note in the whole palette: a burnt, rusted, "annotate-in-red-pencil" orange used exclusively for the **active station marker, the revision triangles, and the single moving "tolerance gap" highlight**. It is the color of correction, of "look here." Never used for large fills — only lines, triangles, and ≤24px marks. - `#5C6E5A` — **drafting-felt green**, a muted, dusty sage used once, as the under-color of the title block and the very bottom "SHIP" platen, signaling completion. Quiet, not celebratory. Contrast is high in line work, low in fills — the page should look like ink on paper, not pixels on glass. ## Imagery and Motifs **No photography.** Photography is at 98% in the corpus; its absence is the statement. Everything visual on prototype.rs is **constructed line work** — vector, SVG, drawn in code: - **The exploded prototype itself.** Five hero illustrations, each an **isometric exploded view** of one abstract "machine part" standing in for a development stage: a bracket of loosely-hatched planes for SKETCH; a lattice of struts and node-balls for SCAFFOLD; a single drilled block with a probe pin for SPIKE; a clamped, gusseted, bolted assembly for HARDEN; a sealed, crated, strapped unit for SHIP. All drawn in `#3C4654` 1px line with `#7A828C` dashed hidden-detail lines, `#D7DCE1` flat shading on "down" faces only — never gradients, never ambient occlusion. Each part floats with its layers separated, joined by `path-draw-svg` leader lines (43% in corpus — used here as literal engineering leaders, not decorative squiggles). - **Dimension lines everywhere.** Thin extension lines, arrowheads at both ends, a `±0.2` figure in *Saira Condensed* breaking the line — applied to the *type itself* (the wordmark gets dimensioned), to panels, to whitespace. The page is obsessively measured. - **Revision triangles & balloons.** Small equilateral triangles in `#B45A2E` numbered 1, 2, 3 mark "what changed since last sheet"; circular balloons number parts in `#3C4654`. - **Hatching, not texture.** Where a surface needs "material," it gets **section hatching** — parallel 45deg lines, spaced 4px — in the engineering convention. Cross-hatching for cut faces. No grain overlay, no noise, no paper-aged sepia stain. - **The work-lamp.** A single subtle vignette from the upper-left: not a glow, just a 6% darkening toward the lower-right corners, as if one lamp lights the bench. It is the only "atmosphere." - **Tooling marginalia.** Tiny isometric depictions of a steel rule, a pair of dividers, a deburring tool, a hex key — drawn at 18px, scattered in the bench margins like things left on a real workbench. They cast hard shadows. They never animate unless hovered. ## Prompts for Implementation Build prototype.rs as **one static page** — a single HTML file, one CSS file, one ES module — and treat it as a slow lateral pan across a drafting table on which one Rust prototype is exploded into five labelled stages. **Resist every instinct to brand, sell, convert, or capture.** There is **no CTA**, no email signup, no contact form, no chat widget, no cookie banner, no language toggle, no pricing tier, no testimonial wall, no stats grid, no logo cloud, no comparison table, no FAQ accordion, no newsletter, no "get started" button. The page exists to be *read like a drawing*, end to end, in about four minutes. - **Establish the isometric basis in CSS, once.** A wrapper with `transform-style: preserve-3d` and a shared 2:1 dimetric skew (`transform: rotate(45deg) skewX(-15deg) scaleY(0.864)` or the equivalent matrix — pick the formulation that keeps text crisp). Every station panel is a child raised on `translateZ`. The bench graph paper is a `background-image` tiling SVG on the base plane. On `prefers-reduced-motion`, freeze all transforms and present the same content as a clean flat technical drawing — it must still make sense un-skewed. - **Scroll is a camera dolly, not a parallax circus.** As the reader scrolls, the bench translates left and the "camera" rises slightly; stations enter from the right with a single firm **spring** settle (84% in corpus — fine, but tuned stiff and short, ~1 bounce, like a part seating into a jig), never elastic overshoot. Use `IntersectionObserver` to fire each station's **assembly sequence**: the exploded plates **draw their leader lines** (`stroke-dashoffset` 0→full), then the part numbers **type in** character-by-character in *IBM Plex Mono* (typewriter-effect, 14% — used as a draughtsman writing, ~28ms/char, no blinking cursor), then the dimension figures fade up last. Stagger between plates ~90ms. - **The single moving accent.** One — and only one — continuously animated element: a small `#B45A2E` "tolerance gap" indicator that travels along the current station's main assembly axis, pausing at each joint to show the `±` value, like a CMM probe inspecting the part. Slow, 8–12s loop, easing `cubic-bezier(.4,0,.2,1)`. Pauses on hover. Everything else is still until interacted with. - **Hover = inspection.** Hovering a part plate **lifts it 8px further out of the stack** (a real `translateZ` nudge, hard offset shadow grows accordingly) and reveals its **section hatching** filling in (animated mask wipe at 45deg). Hovering a leader-line label rotates a tiny magnifier balloon into view with the full annotation. Hovering a marginalia tool (the steel rule, the dividers) makes it **stand up off the bench** by 4px with a faint shadow shift — a tactile "you noticed this" moment. No magnetic cursor-chasing buttons; no cursor-follow blob (89% — explicitly avoided). The cursor stays a cursor. - **The title block down the right rail is live.** `SHEET 0X OF 05` updates with the visible station; the **revision triangle history** in the block fills its numbered triangles as you pass folds; the running **module count** ("BENCH X: 0–144") increments — these are the only "counters" (counter-animate 15%), and they read as drawing metadata, not growth-hacking vanity numbers. - **Folds between sections.** At each station boundary draw a hairline crease across the viewport at the isometric angle; the next panel `rotateX`-hinges up from it over ~600ms as it enters. Subtle. The whole sheet is one accordion. - **Type is dimensioned.** The masthead wordmark `prototype.rs` literally gets extension lines and a `64.0` figure beneath it on load — a small joke that sets the rule for the whole page: nothing here is un-measured. - **Performance/accessibility are out of scope per instructions — but the reduced-motion fallback above is non-negotiable as a *design* state**, because "the drawing, lying flat" is itself a legitimate and beautiful presentation of this concept. Story beat per station, in copy voice (terse, bench-notebook, present tense): `00 SKETCH` — *"a shape, held loosely. nothing committed. the part is mostly air."* `01 SCAFFOLD` — *"struts go in. it can stand now, barely. the lattice is the idea's skeleton."* `02 SPIKE` — *"one hole, drilled deep, to find out if the material holds. it does. or it doesn't, and we learn the gauge."* `03 HARDEN` — *"clamps. gussets. bolts torqued to spec. the play is taken out. tolerances tightened to ±0.2."* `04 SHIP` — *"crated. strapped. labelled. it leaves the bench. the bench is clear again."* ## Uniqueness Notes Differentiators, each measured against the 484-design corpus from the frequency analysis: 1. **A literal axonometric workbench as the entire page geometry — not isometric icons sprinkled on a flat layout.** Isometric aesthetic sits at 11% and isometric-icons imagery at 3%, but in the corpus those almost always mean "a few cute 3D icons." Here the *whole document plane* is the isometric surface and scrolling is a camera dolly across it. Combined with immersive-scroll (12%) as "one long folded engineering sheet," this exact construction does not exist elsewhere. 2. **Zero photography on a 98%-photography corpus, replaced wholesale by engineering line-work — dimension lines, leader balloons, revision triangles, section hatching — applied even to the typography itself.** The page is built from drafting conventions, not images. Nothing is photographed, rendered with ambient occlusion, or gradient-meshed. 3. **Cool-grays (5%) + a single oxide-orange correction accent (≤24px line-marks only) + drafting-felt green used exactly once.** On a corpus that is 98% warm and 95% gradient, this near-monochrome ink-on-cool-paper palette with one rusted red pencil note is a deliberate inversion. No gradient washes anywhere — the only tonal step is paper-fold shadow. 4. **One — exactly one — continuously moving element (the "tolerance gap" probe), against a corpus where parallax (90%), cursor-follow (89%), magnetic (81%) and spring (84%) motion are near-universal.** Here motion is reserved, mechanical, and inspectional; the cursor stays a cursor; hover means "lift the part to inspect it," not "chase the mouse." 5. **Bench-notebook copy voice and a live drafting title block (SHEET X OF 05, REV. C, module counts) instead of any nav, CTA, or stats grid** — the only "numbers" on the page are drawing metadata, and the only "navigation" is the sheet number ticking as you pan the bench. Chosen seed / documented style: **"isometric technical docs"** (from seeds.json) — interpreted as a working axonometric assembly drawing of a single Rust prototype's five stages. Avoided overused patterns from the frequency analysis: **glassmorphism (81%)**, **hand-drawn doodle aesthetic (95%)**, **photography (98%)**, **warm palette (98%)**, **gradient washes (95%)**, **card-grid (91%)**, **centered hero stack (83%)**, **cursor-follow (89%)**, **parallax sprawl (90%)**, **bento-box (15%)** — none appear here. Underused patterns leaned into: **isometric (11%)**, **cool-grays (5%)**, **path-draw-svg as literal engineering leaders (43%, repurposed)**, **typewriter as a draughtsman writing (14%)**, **immersive-scroll as a folded sheet (12%)**.