# Design Language for mechanic.stream ## Aesthetics and Tone mechanic.stream is **an isometric repair-bay caught mid-teardown, rendered as a living exploded-view diagram**. Picture the kind of axonometric cutaway you find in a 1970s Haynes workshop manual — every bolt floated free of its housing, every part labeled with a thin leader line and a circled number — but instead of being printed on greasy newsprint, the whole thing is alive: the parts drift apart and reassemble as you scroll, fluid pressure pulses through translucent hose runs, a torque value ticks up on a gauge as a fastener seats home. The tone is **grounded-earthy meeting tech-tutorial**: confident hands, clean diagnostics, the quiet satisfaction of something that was broken now spinning true. Not a garage that smells of stale coffee and despair — a garage with good light, labeled drawers, and a mechanic who explains what they're doing while they do it. The mood word is **legible torque**: everything has weight, everything is under measurable load, and the design's job is to make that load readable. Nothing here is decorative for its own sake — every gauge reads a real (animated) value, every leader line points at a real part, every isometric plane is a real face of a real component. The aesthetic refuses both the grimy-grunge "mechanic = dirt" cliché and the sterile SaaS-dashboard "everything is a rounded card" default. It sits in the narrow space between an engineering drawing and a workshop you'd actually want to stand in. Underused-pattern lean: **isometric** aesthetic (11% in the corpus) pushed hard, **isometric-icons** imagery (3%), **sharp-angles** motif (3%), **skeuomorphic** gauges (4%), and **counter-animate** numerics (13%) doing real diagnostic work rather than vanity-metric work. ## Layout Motifs and Structure The site is a **single continuous vertical scroll through one isometric scene** — there is no card grid, no bento box, no hero-then-sections rhythm. There is one workbench, seen in 2:1 isometric projection (every "horizontal" edge drawn at ±30°), and as you scroll down you travel *along* the bench from the intake end to the road-test end. Sections are not boxes stacked on a page; they are **stations along the bench**, and the transition between them is the camera dollying sideways across the isometric grid. - **The iso-grid spine.** A faint dotted isometric grid (30°/150° lines, 32px cell) underlies the entire page like cutting-mat ruling. Parts snap to it. Leader lines run along it. The grid is always visible at ~6% opacity; it brightens to ~14% directly under whatever station is in focus, so the scene reads as "lit from where you're looking." - **Exploded-view registration.** Each major component (the headline assembly, the "how it works" cluster, the diagnostics readout, the footer toolbox) is drawn as an **exploded axonometric**: sub-parts separated along their assembly axis by a fixed 24px gap, connected by dashed assembly-axis lines with little arrowheads. Scrolling *into* a station collapses the explosion (parts slide together along their axes, seat with a tiny spring overshoot); scrolling *past* re-explodes it. The page is, structurally, four assemblies that breathe. - **Leader-line labeling, not headings.** Text doesn't sit in a column above an image. Text sits at the *end of a leader line* — a thin 1px stroke that starts at a circled number on a part, kinks once at a 30° or 150° angle (never a curve, never a right angle), and terminates at a left-aligned text block set on the iso-grid. Reading the page is reading a callout sheet. - **The gauge rail.** Pinned to the lower-left of the viewport (desktop) is a small cluster of three skeuomorphic instruments — a sweep tachometer, a fluid-pressure dial, a digital torque counter — that respond to scroll position: they're the "current load on the scene." On mobile this collapses to a single slim horizontal gauge bar docked to the bottom edge. - **No symmetry, ever.** The bench is viewed from one fixed corner; nothing is centered, everything has a near-side and a far-side. Far-side parts are drawn 1px lighter and 8% smaller-feeling via slightly compressed iso angles. The asymmetry is the projection, not a styling choice. ## Typography and Palette **Fonts — all Google Fonts:** - **Headlines & part numbers — `Bricolage Grotesque`** (variable, wght 700–800, opsz cranked up). Chosen for its slightly mechanical, slab-adjacent terminals and its faintly industrial squareness — it reads like signage stenciled on a tool chest, not like a startup wordmark. Used for the station titles, the big floated part labels, and the circled callout numerals (set in a tabular figure style). - **Body & leader-line text — `IBM Plex Sans`** (wght 400 / 500, with `IBM Plex Sans Condensed` for tight spec callouts). It's the closest thing to a "drawing-office annotation" sans that exists on Google Fonts — neutral, engineered, legible at 13px on a leader line. Condensed cut handles the dense bolt-torque-spec style notes ("M8 · 25 N·m · ×4"). - **All numeric readouts — `IBM Plex Mono`** (wght 500–600, tabular). Every gauge value, every counter, every dimension annotation, every "live" figure is mono so digits don't shimmy as they tick. This is the **mono** typography pattern (94% of corpus uses it) but used *strictly diegetically* — only inside instruments, never as a body face — which is itself the differentiator. Type is set on the iso-grid baseline where possible: body text blocks align their cap-height to grid lines so the annotations feel pinned to the drawing. **Palette — "workshop daylight + machined metal + one warning lamp":** - `#EDE9E0` — **Manual Paper**: the page base, a warm off-white like aged technical-manual stock (not pure white, not cream — bleached oat). - `#1C2B33` — **Iron Ink**: near-black with a cold blue cast, used for all primary line work, headlines, the iso-grid at full strength. The color of cured cast iron. - `#5A6B73` — **Shadow Steel**: mid blue-grey for far-side faces, secondary leader lines, the "in shadow" planes of exploded parts. - `#9FB0B5` — **Brushed Aluminum**: light cool grey for fill on near-side metal faces, gauge bezels, the resting state of the iso-grid. - `#C84B1F` — **Warning Lamp**: a single hot burnt-orange, used *only* for: the active station's leader-line endpoints, the tachometer needle, "live"/streaming indicators, and the hover state of any link. Strictly rationed — if more than ~4% of the viewport is orange, something is wrong. - `#3E7C4A` — **Spec Green**: a slightly desaturated workshop green for "within tolerance" readouts and the pressure-dial safe zone — the quiet counterpart to the orange alarm. - `#D8C8A8` — **Aged Vellum**: a darker paper tone used for the gauge faces and inset annotation panels, so instruments read as set *into* the page rather than floating on it. Gradients are nearly absent (the corpus is 96% gradient — this site abstains almost entirely); the only gradients permitted are the subtle 2-stop radial sheens on the chrome gauge bezels and a faint top-down vignette on the page that mimics overhead shop lighting. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is hand-built SVG line-art in 2:1 isometric projection** — the entire site is one big technical drawing. - **Exploded axonometric parts.** The recurring visual unit is a machined component drawn as floating sub-parts: a bolt lifted off its washer lifted off its bracket, each face shaded with flat fills (near-side = Brushed Aluminum, far-side = Shadow Steel, top = a touch lighter), each edge a crisp 1.25px Iron Ink stroke. Bearings, gears, hose unions, gauge bodies, a wrench, a torque key. They are abstract enough to be iconographic but precise enough to look like they came from a parts catalog. - **Leader lines & circled callouts.** Thin strokes with single 30°/150° kinks, terminating in a 3px filled dot at the part end and a circled tabular numeral at the text end. The circled numbers march 01, 02, 03… down the page — the site is annotated like a service procedure. - **The iso cutting-mat grid.** Dotted 30°/150° ruling, always present, brightening under focus. Occasionally a faint dimension annotation floats on it — a double-arrowed line with a mono measurement ("Ø 42") — purely as texture, the way a real drawing has stray dimensions. - **Skeuomorphic instruments.** Three real-feeling gauges (sweep tach, pressure dial, digital torque counter) rendered with brushed-aluminum bezels (the only place a radial sheen gradient appears), Aged Vellum faces, fine tick marks, and Warning-Lamp / Spec-Green needle zones. These are the *only* skeuomorphic elements — everything else is flat line-art — and the contrast is deliberate: the drawing is flat, the instruments are tangible. - **Fluid runs.** Translucent hose paths (rounded-rect cross-section, drawn iso) connect some assemblies; a faint pulse of Warning-Lamp tint travels along them on a slow loop — "pressure in the system." Subtle, ambient, never a focal point. - **"Stream" as literal flow.** The domain's word *stream* is honored not as video-streaming chrome but as **flow through a mechanical system** — fluid in hoses, torque through a fastener, rotation through a gear train — and as the continuous, uncut camera-glide down the bench. A small "● LIVE" badge in IBM Plex Mono, Warning-Lamp dot, sits in the gauge rail, pulsing once per ~4 seconds, the only nod to the streaming connotation. ## Prompts for Implementation Build mechanic.stream as **one HTML file, one CSS file, one JS module — a single uncut scroll-glide along an isometric workbench**, from intake to road test. No CTA banks, no pricing tiers, no stat-grid, no testimonial carousel, no email-capture strip. The page is a service procedure you scroll through; that's the whole experience. **Projection & coordinate system.** Establish a true 2:1 isometric helper: a CSS custom-property-driven transform (`skewX(-30deg) scaleY(0.864)` family, or matrix equivalent) applied to "iso-plane" elements; offsets along the three axes (x→30°, y→150°, z→vertical) computed in JS so parts can be placed and animated by axis. Everything visual lives on this grid. Build it once, reuse everywhere. **Scroll = camera dolly.** Use a scroll-driven approach (CSS `scroll-timeline` where available, IntersectionObserver + rAF fallback): the "camera" pans horizontally across the iso scene as the page scrolls vertically. Stations slide into the focal zone; the iso-grid brightens beneath the focused station; the gauge rail updates its values from a normalized scroll-progress signal. **Exploded-view breathing (the signature motion).** Each assembly has sub-parts with a known `assembly-axis` and `explode-distance`. When a station enters focus: parts animate from exploded → seated, sliding *along their own axis*, with a small spring overshoot on seat (stagger the sub-parts ~40ms apart, inner parts first). When it leaves focus: reverse, re-explode. This is the `stagger` + `spring` pattern (corpus-common) but applied to *mechanical assembly*, not to fading-in cards. Reduced-motion: parts render in a gentle mid-explode resting state, no animation. **Leader-line drawing.** When a station seats, its leader lines `path-draw-svg` themselves out from the part: the stroke draws from the circled-number dot, kinks once, lands at the text block; the text block does a 6px slide-up + fade as the line reaches it. Lines are 1px Iron Ink; the *active* station's lines are Warning-Lamp. **The gauge rail.** Three skeuomorphic instruments, lower-left pinned (desktop) / bottom-docked slim bar (mobile): - *Sweep tachometer* — needle sweeps with scroll velocity (fast scroll = revs up, Warning-Lamp redline near the bottom of the page / "road test"). - *Fluid-pressure dial* — slow ambient breathing in the Spec-Green safe zone, nudges up when a hose-pulse passes. - *Digital torque counter* — IBM Plex Mono, `counter-animate`s up to a target N·m value each time a fastener "seats," then holds. Real-feeling, not vanity. Bezels get the only radial-sheen gradients on the site; faces are Aged Vellum; tick marks fine and Iron Ink. **Ambient system flow.** Hose paths carry a slow looping Warning-Lamp tint pulse (animated `stroke-dashoffset` or a masked gradient sliver). One gear train somewhere rotates slowly, continuously, gently — the scene is idling, not frozen. **Cursor as inspection light (desktop, subtle).** A faint, large, soft radial lightening follows the cursor at low strength — like tilting a worklight over the drawing — brightening the iso-grid and metal fills slightly within ~200px. `cursor-follow` pattern, but dialed *way* down; it should be felt, not seen. **Page rhythm (the four stations, top to bottom):** 1. **Intake** — the title assembly: "mechanic.stream" rendered as a floated, exploded part-label that seats together on first scroll; the ● LIVE badge lights; a single line of body text on a leader line states what this is. 2. **Teardown / How it works** — the largest exploded cluster, three or four sub-assemblies, leader-callouts 01–06 collapsing in sequence as you scroll through; this is the explanatory heart. 3. **Diagnostics** — the gauges take focus (rail enlarges briefly into the scene), a few live-feeling readouts settle into Spec-Green, one ticks toward Warning-Lamp and pulls back — the "is it healthy" beat. 4. **Road test** — the scene assembles fully, the gear train spins up, the tach sweeps toward redline, then everything settles to a calm idle; the footer is the closed toolbox drawn iso, with the tiny print (links, year) annotated on leader lines like a parts list. **Texture & finish.** Faint paper grain on the Manual Paper base (very low-opacity SVG turbulence). A soft top-down lighting vignette. Crisp `shape-rendering: geometricPrecision` on all the line-art so the iso edges stay sharp. Generous quiet around each station — the bench has room; nothing is crammed. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **One uncut isometric scene as the entire site.** No card-grid (88% of corpus), no bento-box, no centered hero stack (86% centered). The page is a single axonometric workbench you dolly along — `isometric` aesthetic is only 11% in the corpus and almost never used as the *whole structural conceit* rather than a decorative flourish. 2. **Exploded-view "breathing" as the signature interaction.** The spring/stagger animation pattern is corpus-common, but here it animates *mechanical assembly along part axes* — bolts seating into brackets — not the usual cards fading up. As far as the corpus shows, no other site uses exploded-axonometric collapse as its core motion. 3. **Text lives on leader lines, not in columns.** Headings and body copy terminate thin kinked 30°/150° leader lines anchored to circled callout numbers — the page is read like a service-manual callout sheet. This replaces conventional headline hierarchy entirely. 4. **Skeuomorphism rationed to three real instruments.** `skeuomorphic` is 4% of the corpus and usually applied broadly (leather, felt, glass everywhere). Here the entire page is flat line-art *except* three working gauges, and the contrast — flat drawing, tangible instruments — is the point. The gauges also carry the only gradients on a site in a corpus that's 96% gradient. 5. **"Stream" reinterpreted as mechanical flow, not video chrome.** No play buttons, no thumbnail walls, no streaming-UI furniture. *Stream* = fluid through hoses, torque through fasteners, rotation through gears, and the continuous uncut camera-glide. One tiny ● LIVE badge is the only concession to the literal word. 6. **Near-zero gradients, near-zero photography.** Abstaining from the two most saturated corpus patterns (gradient 96%, photography 98%) — everything is hand-built SVG iso line-art on warm manual-paper stock. Chosen seed/style: **isometric technical docs** (`aesthetic: isometric, layout: diagonal-sections + immersive-scroll, typography: mono / sans-grotesk, palette: cool-grays + burnt-orange, patterns: path-draw-svg + spring + counter-animate, imagery: isometric-icons + line-illustration, motifs: sharp-angles + tech, tone: grounded-earthy + tech-tutorial`). Avoided patterns from frequency analysis: hand-drawn aesthetic (96%), glassmorphism (74%), photography imagery (98%), card-grid (88%), centered layout (86%), full-bleed (89%), warm-gradient palette (96–98%), parallax-heavy / cursor-follow-heavy treatments (94% / 89% — present here only in dialed-far-down ambient form), pastoral-romantic tone (34%).