# Design Language for miris.dev ## Aesthetics and Tone miris.dev is staged as **a working axonometric drafting room** — the kind of long, north-lit studio where structural engineers once built buildings out of 30°/60° set squares, isometric grid paper, and lead holders sharpened on a sandpaper block. The conceit: `miris` is read as a *mirror-isometric* coordinate system — the site treats itself as a technical object that can be projected, sectioned, exploded, and dimensioned, never photographed. There is **no photography anywhere on this site** (frequency analysis shows photography at 98% — its complete absence is itself the statement). Everything is line, plane, hatch, and annotation. The mood is **quiet, exacting, slightly obsessive** — the calm of someone who labels their cable ties. It is *not* sci-fi-HUD (that's neon glow on black, 5% of the cohort and a different genre entirely); it is *not* blueprint-as-decoration (cyan lines slapped on dark navy). It is the real thing: warm bone-white drafting vellum, the faint blue of a non-photo-blue pencil, graphite gray, and a single drafting-pen red used only for revisions and callout leaders. The tone of voice in copy is the tone of a drawing's title block — terse, numbered, version-stamped, signed with initials. Where most dev sites shout, miris.dev *annotates*. The emotional throughline: **the pleasure of a thing drawn correctly.** A door swing arc. A section cut shown with the correct hatch for the correct material. A revision cloud around the one detail that changed. The visitor should feel they have walked into a studio mid-project — drawings pinned up, set squares laid down at angles, the radio off. ## Layout Motifs and Structure The site is **isometric-technical** in its bones: an underlying **true isometric grid** (axes at 30° from horizontal, vertical truly vertical) governs the placement of every major block. This is the load-bearing structural conceit and no other site should duplicate it. - **The drawing sheet.** The whole page is composed as a sequence of full-bleed "drawing sheets" — each one a numbered plate (PLATE 01 / 09, PLATE 02 / 09 …) with a **title block running down the right edge**, vertical, like a real engineering drawing: project name, sheet title, scale, date, revision, drawn-by. This title-block rail is *fixed*, the sheets scroll past it, and its contents update per plate. This replaces conventional navigation entirely. - **Axonometric content blocks.** Cards and panels are not flat rectangles — they are **drawn as shallow extruded boxes in isometric projection**: a top face, a left face (darker), a right face (darkest), with the content living on the top face. They sit on the iso grid like objects on a workbench. On hover they don't lift toward the viewer (that's the overused tilt-3d/hover-lift idiom) — instead a thin **dimension line with arrowheads and a measurement label snaps out from one edge**, as if someone is measuring the block. - **Exploded-view sections.** At least two sections of the page perform an **exploded axonometric**: a composite object flies apart along the iso axes into labeled components, each connected back to its home position by a dotted assembly line. Scroll drives the explosion outward; scrolling back reassembles it. - **The revision strip.** A horizontal-scroll band — a "revision history" — runs left-to-right: each panel is a dated revision with a red revision cloud around what changed. This is the one horizontal-scroll moment (horizontal-scroll is only 7% of the cohort). - **Margin annotations.** The left margin is a true drafting margin — a vertical rule, a fold mark, and **handwritten-style annotations in non-photo blue** that the viewer can see but that read as "working notes" rather than content. Negative space is treated as *unprinted vellum*, generous and intentional (ma-negative-space, 11%). No card-grid mosaic, no bento box, no dashboard, no hero-with-CTA. The composition reads top to bottom as **a bound set of drawings**, plate after plate. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with title-block discipline.** - **Major Mono Display** (display + headings). A monospaced display face with the squared, slightly mechanical look of a stencil-cut drawing label. Used for plate numbers, sheet titles, and section heads — always `text-transform: uppercase`, tracked **+180 letterspace** at large sizes, set tight (line-height 1.0) so headings read as *stamped* rather than typeset. Plate numbers at 88–120px; sheet titles at 28–40px. - **IBM Plex Mono** (body, annotations, the entire title block, all numeric data). This is the working voice of the page — every dimension, every coordinate, every paragraph. Regular for prose, Medium for labels. Numbers are tabular by nature here. The title-block rail is set in this at 11–13px, uppercase for field labels, mixed-case for values. - **Caveat** (the *only* non-mono face — handwritten). Used exclusively for **margin annotations, revision notes, and callout leader labels** — the "engineer's pencil." Never for body or headings. Always rendered in non-photo blue or drafting red. Slight rotation (−2° to −4°) so it reads as written, not set. (Handwritten typography sits at 30% — but here it is *strictly quarantined* to annotations, which is a different use than the hand-drawn-everything sites.) **Palette — drafting vellum, four core values + two accents. All hex values explicit.** - `#F4EFE3` — **Vellum.** The paper. Every sheet background. Warm, slightly yellowed, never pure white. - `#E9E2D0` — **Vellum shade.** The "left face" of extruded iso blocks and the fold-mark shadows. One step down from vellum. - `#2B2A26` — **Graphite.** Primary ink — all body text, all primary linework, the iso grid at full strength. A warm near-black, never `#000`. - `#6E6A5E` — **Hardpoint.** Secondary linework, the "right face" of iso blocks, faded grid lines, the title-block rules. Drafting-pencil gray. - `#9DB4C7` — **Non-photo blue.** Construction lines, the underlying iso grid in its faint state, all `Caveat` margin annotations. The pencil line that "won't print" — so on this site it prints faintly, deliberately. - `#C8402E` — **Drafting red.** The revision color. Used *only* for: revision clouds, revision triangles in the title block, callout leader lines, the single most important word in any heading group, and the active state of any control. Rationed hard — if more than ~3% of a viewport is red, it's wrong. Optional deep-shade for the darkest iso face: `#1C1B18` (Graphite shade). Gradients are essentially absent (the cohort runs 96% gradient) — surfaces are flat vellum; depth comes from the three iso face values, not from blurs or meshes. ## Imagery and Motifs **All imagery is constructed line-art — SVG, drawn live, never raster, never photographic.** **1. The drafting toolkit (decorative furniture).** Rendered as crisp 1px-stroke SVG line drawings, scattered in margins and section breaks at slight angles: a 30°/60° set square, an adjustable set square with its locking screw, a pair of dividers half-open, a French curve, a circle template with its lettered holes, a lead pointer. These are *objects laid on the workbench* — they cast a faint `#E9E2D0` offset shadow and overlap the iso grid. **2. Drafting notation as UI.** The interface speaks in real drawing conventions: - **Dimension lines** — extension lines, arrowheads (or architectural ticks at 45°), a gap in the middle for the measurement label. These appear on hover over iso blocks and frame the exploded views. - **Section cut lines** — heavy phantom line with the cut-direction arrows and bubble label (A–A, B–B); the "section" then appears below showing material hatch. - **Material hatches** — diagonal line hatch (steel), cross-hatch (concrete), stippled dots (earth/aggregate), wavy line (insulation). Used to fill the side faces of iso blocks and section cuts, distinguishing content categories visually. - **Revision clouds** — that scalloped bubble loop, in `#C8402E`, around anything "changed," with a numbered revision triangle. - **Leader lines** — a dot at the target, a line with one elbow, a horizontal landing with a `Caveat` label. The native way the site adds a footnote. - **Centerlines** — the long-short-long dash, marking the symmetry axis of the page itself, faint, behind everything. **3. The iso grid + title block** are themselves the dominant motif: a faint `#9DB4C7` true-isometric grid underlies every sheet; the vertical title-block rail with its boxed fields (PROJECT / SHEET / SCALE / DATE / REV / DRAWN) frames every sheet on the right. **4. North arrow & scale bar.** A small N-arrow (the drafting kind — slim, with a half-filled head) sits near the top of each sheet; a graphic scale bar (alternating filled/open segments, labeled 0 · 1 · 2 · 5) sits near the bottom. Purely atmospheric, fully drawn. No glassmorphism, no gradient mesh, no neon glow, no bokeh, no organic blobs. ## Prompts for Implementation Build miris.dev as **one HTML document, one CSS file, one small vanilla-JS ES module** — no framework, no router, no SPA, no build step beyond a single bundling pass. The page is one continuous vertical scroll of ~9 numbered "plates," each roughly 100–160vh, plus one horizontal-scroll revision strip embedded mid-page. **Storytelling is the organizing principle, not navigation.** The nine plates together tell *the story of drawing miris.dev itself* — Plate 01 is the title sheet and survey (what the site is, presented as a project brief in a title block); Plates 02–04 are general arrangement drawings (the major ideas, each shown as a labeled axonometric); Plates 05–06 are detail sheets (zoomed-in details with section cuts and material hatch); Plate 07 is the exploded assembly (everything flies apart and reassembles on scroll); Plate 08 is the revision history (the horizontal strip); Plate 09 is the title block close — signed, dated, stamped "ISSUED FOR CONSTRUCTION." There is no "contact us," no pricing, no stat-grid, no testimonials, no feature-card mosaic. If a section feels like a landing page, redraw it as a drawing. **The signature interactions, in priority order:** 1. **The live iso grid + parallax sheets.** A faint isometric grid (`#9DB4C7`, ~0.4 opacity) is drawn behind everything via repeating CSS background or an SVG pattern. As the visitor scrolls, the **drafting-tool SVGs and margin annotations parallax at slightly different rates** than the sheet content — gentle, like loose paper shifting on a board (parallax is 93% of the cohort, so keep it *subtle and diegetic*, not the point). 2. **Dimension-on-hover.** Hovering an iso content block: a dimension line (extension lines + arrowheads + measurement label) **draws itself out from one edge via animated SVG `stroke-dashoffset`** (path-draw-svg, 33% — used here for its literal meaning). The label shows a plausible measurement. No 3D tilt. No glow. The block itself stays put; only the annotation animates. 3. **The exploded assembly (Plate 07).** A composite axonometric object — say, a stack of plates/pages bound together — **disassembles along the three iso axes as the user scrolls into the plate**, each component sliding to its labeled position connected by an animated dotted assembly line, then **reassembles on scroll-back**. Driven by scroll progress, eased with a spring so parts settle (spring is 86% — fine, used for physical settling). Each flown-apart part carries a leader-line label in `Caveat` blue. 4. **The revision strip (Plate 08).** A horizontal-scroll band: scrolling vertically here translates the band horizontally (scroll-jack only within this one section, with a clear visual cue and an escape at the end). Each revision panel: a date, a `REV △n` triangle, and a **red revision cloud that draws itself** scalloped-loop by loop around the "changed" detail when the panel enters view. 5. **Reveal as printing.** New plates entering the viewport reveal with a **wipe that reads like a plotter pen sweeping across vellum** — content masked behind a thin moving vertical line that leaves linework "drawn" in its wake (fade-reveal at 14%, but here it's a *plot wipe*, top-to-bottom or left-to-right, with the pen-line visible). Stagger child elements behind it (stagger, 76% — fine, like a plotter doing one element after another). 6. **Title-block live update.** The fixed right-edge title-block rail updates its SHEET / SCALE / REV fields as each plate scrolls into the active zone — values *type in* character by character in IBM Plex Mono (typewriter-effect, 11% — used for the title block only, where a plotter would letter the field). 7. **Cursor as a drafting cursor.** Replace the cursor over the drawing area with a thin **crosshair (full-height + full-width hairlines, `#9DB4C7`, 0.5 opacity)** plus a small coordinate readout in IBM Plex Mono showing live X/Y in the iso coordinate system. (Cursor-follow is 89% — but a crosshair-with-coordinates is the *correct* drafting metaphor, not a glow blob.) Disable on touch. **Typography in motion:** plate numbers and sheet titles arrive already-stamped (no kinetic letter dance); the only "kinetic" type is the typewriter title block and the hand-rotated `Caveat` annotations. Keep motion *purposeful* — every animation should map to a real drafting action (drawing a line, measuring, exploding, plotting, lettering). Nothing bounces for fun. **Accessibility/performance:** ignore per instructions — optimize for the visual and narrative integrity of the drafting-room conceit. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMass site: 1. **The entire page is structured as a bound set of engineering drawings** — numbered plates, a fixed vertical title-block rail replacing navigation, north arrows and graphic scale bars per sheet. No card-grid, no bento, no dashboard, no hero/CTA. The drawing *is* the layout. 2. **Drafting notation is the UI vocabulary** — dimension lines with arrowheads, section cut bubbles, material hatches, revision clouds, leader lines, centerlines. Hover produces *measurements*, not lifts or glows. This is "isometric technical docs" taken literally to the level of ANSI/ISO drawing conventions. 3. **Zero photography on a cohort that is 98% photographic; effectively zero gradient on a cohort that is 96% gradient.** Every visual is constructed 1px SVG line-art on warm drafting vellum. Depth comes only from the three isometric face values (`#F4EFE3` / `#E9E2D0` / `#6E6A5E`), never from blur, mesh, or glow. 4. **Drafting-red is rationed as a revision color** (`#C8402E`, < ~3% of any viewport) — used only for revision clouds/triangles, leader lines, and the single most important word in a heading group. Restraint as a signature. 5. **Handwriting is strictly quarantined.** `Caveat` appears only in margin annotations, revision notes, and callout labels — the "engineer's pencil" — never in body or headings, which is a deliberate counter-move to the hand-drawn-everything (96%) and handwritten-type (30%) tendencies of the cohort. Avoided patterns from frequency analysis: glassmorphism (75%) — none; tilt-3d / hover-lift — replaced by dimension-on-hover; gradient (96%) and gradient-mesh — none; photography (98%) — none; card-grid (88%) / bento-box / dashboard — replaced by the plate/title-block system; neon glow / sci-fi-HUD — explicitly rejected in favor of true drafting-vellum drafting-room aesthetics. Chosen seed/style: **isometric technical docs** (isometric aesthetic 11%, isometric-icons imagery 3% — leaning into an underused vocabulary and pushing it to its literal extreme as ANSI/ISO engineering-drawing convention).