# Design Language for prototype.st ## Aesthetics and Tone prototype.st is a **cyanotype workshop at 2 a.m.** — the moment a half-built idea exists only as overlapping draft layers, dimension lines, and pencil notes that haven't been erased yet. The aesthetic is **isometric technical documentation rendered as a living blueprint**: not the cliché glowing-blue-grid "blueprint" of stock sites, but the real thing — the chemical Prussian-blue of a contact-printed engineering drawing, white linework burned into deep indigo, annotated by hand in graphite. The tone is **scholarly-intellectual but unfinished on purpose**: every element looks like it's mid-revision, with revision clouds, "DRAFT 03" stamps, and call-out balloons pointing at things that aren't done yet. Where most "technical" sites perform finished authority, prototype.st performs the *honesty of the workbench* — the page is the prototype, and it shows its seams, its construction grid, its margin scribbles. Think Buckminster Fuller's patent drawings crossed with a Dieter Rams sketchbook, photographed under a drafting lamp. Cool, precise, quietly obsessive — the calm of someone who measures twice. ## Layout Motifs and Structure The composition is an **isometric drafting table viewed from a fixed 30°/30° axonometric angle** — content sits on a tilted ground-plane, and the entire page reads as one continuous technical sheet you scroll *down the length of*, like unrolling a long blueprint. No card-grid, no centered hero, no bento. Instead: - **The construction grid is visible and load-bearing.** A faint 8mm cyan grid underlies everything, with bolder gridlines every 5th cell, exactly like engineering vellum. Elements snap to it visibly — you can see the grid through them. - **Dimension lines connect sections.** Between any two blocks, an actual dimension line runs — arrowheads at both ends, a gap in the middle, a measurement label ("§02 → §03 :: 1340mm"). Scrolling reveals these being "drawn" by the cursor of an invisible draftsman. - **Isometric exploded views.** Key content groups are presented as exploded axonometric stacks — layers floating apart along the iso-Z axis with thin leader lines tethering them, the way an assembly diagram shows how parts fit. Hovering "collapses" the explosion back together. - **The margin is a working margin.** A persistent left-hand strip carries the title-block of an engineering drawing: sheet number, scale, revision table, "drawn by / checked by", date stamp. It updates as you scroll (sheet 1 of 7 → 2 of 7…). - **Revision clouds** (those bumpy hand-drawn ellipses draftspeople circle changes with) float over sections that are "newly added", each with a little triangular revision flag: △3, △4. Seven sheets total, scrolled vertically, each a numbered drawing in the set. No horizontal scroll — a blueprint unrolls one way. ## Typography and Palette **Fonts (Google Fonts only):** - **Title-block & headings — *Major Mono Display*** — a monospaced display face whose split, stencil-cut letterforms read exactly like the labels stamped onto technical drawings. Used for sheet numbers, section titles, the title-block fields. Tracked wide (`letter-spacing: 0.15em`), always uppercase. It looks machined, not typed. - **Annotations & body — *Spline Sans Mono*** — a humanist monospace, warmer and more readable than a pure tech-mono, for the descriptive text, dimension labels, and the call-out balloons. Monospace keeps everything feeling like it was lettered on a grid, but Spline's softened terminals stop it being cold. - **Hand notes — *Caveat*** — a quick graphite-pencil script, used *sparingly* and *only* for the "scribbled" overlay notes: arrows captioned "fix this", "ask client?", "ok ✓", margin doodles. Slightly rotated (-3° to +4°), never on the grid — the human contradicting the machine. **Palette (the cyanotype, plus pencil):** - `#0A1E3F` — **Prussian Deep** — the darkest blueprint blue, page background, the "exposed" chemical field. - `#12356B` — **Cyanotype Mid** — section panels, the standard blueprint blue. - `#1E4E8C` — **Drafting Cobalt** — grid major-lines, hover states. - `#E8EEF6` — **Vellum White** — all primary linework, headings, dimension lines (linework is white on blue, exactly like a real blueprint). - `#7FA8D9` — **Faded Cyan** — the 8mm minor grid, secondary text, dimmed leader lines. - `#C9D4E3` — **Graphite** — the *only* non-blue: pencil-note color for Caveat hand annotations, soft and warm-gray. - `#F2B544` — **Revision Amber** — the single accent, used exclusively on revision flags (△), the "current sheet" indicator, and one or two "ATTENTION" call-outs. It's the highlighter on the drawing. Used at < 5% coverage. ## Imagery and Motifs **No photography. Everything is white-line SVG drawn on the blue field — the page literally IS the blueprint.** - **Isometric line objects.** Wireframe axonometric renderings of abstract "prototype" forms — a half-assembled polyhedron, an exploded gear stack, a folded-paper model, a circuit board shown at 30° — all drawn in 1px Vellum White stroke, no fill, with construction lines left in (faint cyan extension lines projecting off every vertex). - **Dimension annotations everywhere.** Arrows, witness lines, radius callouts (R12), angle arcs (30°), centerlines (the long-short-long dashed kind). They annotate real layout distances, not decoration. - **Call-out balloons** — circles with a leader line and a number, the way assembly diagrams index parts: ①②③ pointing at features of each isometric object, expanding on hover into a labeled detail. - **Revision clouds & flags** — bumpy hand-drawn ellipse outlines around "new" content, with the triangular △n revision tag in Revision Amber. - **The title-block** — a proper engineering drawing title-block in the corner: ruled boxes, "SCALE 1:1", "SHEET 03/07", a revision history table, "PROTOTYPE.ST — SHEET SET", drawn-by initials. - **Graphite scribbles** — sparse hand-drawn arrows, underlines, question marks, a coffee-ring stain (one, faint), pencil checkmarks. The human layer on top of the machine layer. - **Crosshair cursor** — the cursor is a thin white drafting crosshair with tiny coordinate readout (X: 0420 Y: 1180) trailing it, like a CAD viewport. ## Prompts for Implementation Build prototype.st as **one continuous engineering drawing set, scrolled vertically — one HTML file, one CSS file, one JS module.** The whole page is a blueprint sheet; the user scrolls down it the way you'd pull a roll of vellum off a table. No CTA, no pricing, no stat-grid, no testimonial row, no signup. Just the seven sheets. **Storytelling structure (7 sheets, vertical scroll):** 1. **Sheet 01 — Cover Sheet.** The title-block fills most of the screen, drawn line by line as the page loads (SVG `stroke-dashoffset` "ink-on" animation, path-draw-svg). "PROTOTYPE.ST" lettered in Major Mono inside the largest box. Below it, faint: "DRAWING SET — 7 SHEETS — SCROLL TO UNROLL". The construction grid fades in behind it. 2. **Sheet 02 — General Notes.** A numbered list of "notes" that reads like a manifesto on what a prototype is — each note line preceded by a tick-mark and revealed with a stagger as it crosses the drafting lamp's "light cone" (a soft radial mask that follows scroll). One note is wrapped in a revision cloud with △2 in amber. 3. **Sheet 03 — Exploded View A.** A large isometric line-object floats apart into 5 layers along the iso-Z axis as you scroll into it (scroll-triggered + spring); leader lines extend; call-out balloons ①–⑤ pop in with staggered timing. Hovering the object springs the explosion closed. 4. **Sheet 04 — Detail Callout.** The "camera" zooms into one feature from Sheet 03 (a magnified circle with a jagged break-line edge, like a detail bubble). Inside: tighter linework, more dimensions, a couple of Caveat pencil notes pointing at it ("tolerance?", "ok ✓"). 5. **Sheet 05 — Plan & Elevation.** Two orthographic views of an abstract form side by side, with projection lines connecting matching points between them — and as you scroll, the cursor "draws" the projection lines across the gap, point by point. 6. **Sheet 06 — Revision Table.** A ruled table animates its rows in (slide-reveal), each row a revision: "△1 — initial layout", "△2 — added general notes", "△3 — exploded view", … the last row, △7, is half-written, the pencil stopping mid-stroke. Honest unfinishedness. 7. **Sheet 07 — Sign-off block.** The bottom title-block: "DRAWN BY: ___", a blinking crosshair sitting in the blank, "DATE:", and the smallest possible footer linework. The grid fades out at the very bottom edge — the vellum runs off the table. **Motion language:** Everything that draws should *draw* — SVG path-draw (`stroke-dashoffset`) is the signature, triggered on scroll-into-view. Isometric objects explode/collapse with light spring physics on hover. The drafting-lamp light-cone mask follows scroll position with a slight lag. The crosshair cursor has a coordinate readout that updates with real mouse position. Revision flags pulse amber once when they enter view. No parallax-by-translation clichés — instead, the *construction grid* shifts subtly under content (the sheet moving, not depth layers). Section transitions are dimension lines being drawn between blocks. Respect `prefers-reduced-motion`: linework appears already-inked, no draw animation, light-cone becomes a static gentle vignette. **Tone of copy:** terse, technical, slightly wry — written like drawing notes. "ALL DIMENSIONS IN MILLIMETRES UNLESS NOTED." "DO NOT SCALE FROM SCREEN." "THIS PAGE IS THE PROTOTYPE." Lowercase ".st" wordmark only inside the title-block; everything else uppercase Major Mono or grid-aligned Spline Sans Mono. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **A *real* cyanotype, not "blueprint chic".** The page is white linework on Prussian-blue chemical field — the actual visual grammar of a contact-printed engineering drawing (witness lines, break-lines, title-blocks, revision clouds), not the glowing-neon-grid pastiche. Isometric sits at only 11% in the aesthetic frequency and almost none of it commits to true axonometric drafting; this site builds its entire layout on a 30°/30° iso ground-plane. 2. **The grid is content, not decoration.** Card-grid (91%) and centered (83%) layouts dominate the corpus. prototype.st has *no card grid and no centered hero* — it has an exposed 8mm construction grid that elements visibly snap to, with dimension lines connecting sections. The structure is the engineering vellum itself. 3. **Unfinished-on-purpose.** Revision clouds, △n flags, a half-written final table row, pencil "fix this" scribbles, a single coffee-ring. The site dramatizes being a draft — the opposite of the polished-authority tone every "technical" site reaches for. 4. **Mono-everything typography with a graphite human layer.** Major Mono Display (machined title-block lettering) + Spline Sans Mono (humanist mono body) + Caveat (sparse pencil notes, off-grid, rotated). Mono typography is common (94%) but used here as *draftsman's lettering on a grid*, deliberately interrupted by handwriting — the machine/hand contradiction is the concept. 5. **One amber accent at < 5% coverage.** Against an almost entirely blue-and-white field, Revision Amber (#F2B544) appears only on revision flags and the active-sheet marker — the highlighter on the drawing. Avoids the gradient (95%) and warm-palette (98%) defaults entirely; this is a near-monochrome cool field. Chosen seed: **isometric technical docs** (*aesthetic: isometric, layout: diagonal-sections / isometric ground-plane, typography: tech-mono + eclectic-hybrid, palette: midnight-blue / monochrome, patterns: path-draw-svg + slide-reveal + spring, imagery: line-illustration + isometric-icons, motifs: grid-lines + sharp-angles, tone: scholarly-intellectual*). Avoided patterns from frequency analysis: card-grid (91%), centered (83%), full-bleed hero-dominant, glassmorphism (81%), hand-drawn-everything (95%), photography (98%), warm palette (98%), gradient (95%), parallax-by-translation (90%), cursor-follow-blob (89%), bento-box.