# Design Language for mechanic.party ## Aesthetics and Tone mechanic.party is the after-hours of a co-op garage — the moment the bay doors roll halfway down, someone plugs a string of trouble-lights into the extension cord, and the half-built engine on the stand becomes the centerpiece of a small, loud, joyful gathering of people who fix things for love. The aesthetic is **isometric technical-manual illustration thrown a party**: the cold, precise, axonometric language of a Haynes workshop manual or a Knolling exploded-view diagram — every bolt, gasket, and washer floated apart in space along clean 30°/150° guide lines — but the diagram is *alive*. The exploded parts hover, drift, and bob like balloons on invisible strings; the callout numbers blink like LEDs; the dimension lines stretch and snap with a rubber-band give. It is **the engineering drawing as confetti**, the parts catalogue as dance floor. Tone is **edgy-rebellious in service of joy** — this is right-to-repair culture, the iFixit/Hackaday/farm-tractor-jailbreak energy, but rendered as celebration rather than protest. There is grease under the fingernails and a grin on the face. Nothing is precious; everything is *yours to take apart*. Copy reads like a friend handing you a 13mm socket: terse, knowing, a little smug, deeply generous. The site never sells, never gates, never collects an email. It throws open a manual and says "look what comes apart." The mood word is **disassembly-as-delight**. Cold blueprint geometry, warm garage glow, and the specific electric thrill of seeing how a thing is held together. ## Layout Motifs and Structure The page is a **single isometric build-table** viewed from a fixed 30° three-quarter angle that never changes — the entire site lives on one giant axonometric "workbench plane" that the user scrolls *down* (toward the front edge of the table) and *across* (along its length). There is no flat hero, no card grid, no centered column. Everything sits **on the bench**, casting hard 30° drop-shadows onto a perforated steel pegboard ground texture. **Structural motif — the exploded assembly:** the site is organized as **five "assemblies"** (think: five chapters of a workshop manual), each one an exploded-view diagram of a different machine — a bicycle bottom-bracket, a film-camera shutter, a synthesizer keybed, a coffee grinder burr-set, a door lock cylinder. As you scroll into an assembly, its parts **fly apart** along the iso axes from a collapsed silhouette into a fully separated diagram, each part trailing a thin **leader line** to a numbered callout balloon. Scroll further and the parts **re-collect** into the next machine. The whole site is one continuous assemble/disassemble loop down the length of the bench. **Navigation** is a **parts-tray rail** pinned to the lower-left: five small isometric bins, each holding a tiny silhouette of its assembly's "hero part" (a chainring, a shutter blade, a piano key, a burr, a key-blank). Click a bin → the bench **dollies** along its length (a smooth lateral camera move, the pegboard sliding past) to that assembly. The active bin's part lifts 8px and rotates slowly. No top bar, no hamburger, no logo lockup, no footer chrome — the only footer is a literal **"END OF MANUAL"** stamp inked at an angle on the pegboard, with a torque-spec table fragment beneath it. **Composition rules:** - Everything obeys the iso grid: a 64px isometric lattice, all elements snapped to it, all motion along the three axes only. - Generous **negative pegboard** between assemblies — the bench breathes; you can see the empty steel and its hole-pattern. - Callout balloons are circular, hand-stamped-looking, and *always* connected to their part by a visible leader line — never floating free. - One persistent fixed element: a **trouble-light** in the top-right corner, its cage casting a soft warm pool that follows... nothing. It just hangs there, glowing, the only light source the bench believes in. ## Typography and Palette **Type system (Google Fonts only):** - **Headline / assembly titles — `Bricolage Grotesque`** (variable, weights 600–800, optical size cranked up). A contemporary grotesque with squared-off mechanical joints and a faint industrial swagger — set in ALL CAPS with `0.02em` tracking for assembly names ("ASSEMBLY 02 — FOCAL-PLANE SHUTTER"), it reads like the cover of a service manual that has opinions. - **Technical labels / callouts / dimension text — `Spline Sans Mono`** (weights 400, 500). A humanist monospace — wide, legible, friendly — used for every callout number, every part name in the legend, every torque spec, every dimension annotation. Numerals are tabular and proud. Tracking `0.04em` at small sizes. - **Body / running copy — `Hanken Grotesk`** (weights 400, 500, 700). A neutral, slightly warm grotesk that gets out of the way when there's an actual paragraph to read (the short intro blurb at the top of each assembly). Comfortable at 18–20px, line-height 1.65. **Palette — "blueprint glow on a steel bench":** - `#0E1A24` — **deep blueprint navy.** The pegboard ground, the darkest shadows, the trouble-light cage. Cold, technical, the color of a drawing done at midnight. - `#16242F` — **bench shadow.** One step up from the navy, used for the iso drop-shadows and the recessed pegboard holes. - `#F4EEE2` — **manual paper.** Warm off-white. The fill of callout balloons, the legend cards, the body-copy surfaces. The color of a manual that's been on a shelf since 1987. - `#FF5A1F` — **caution orange.** The accent of accents — active callout numbers, the leader-line highlight on hover, the parts-tray active state, the "END OF MANUAL" stamp. Hi-vis, slightly aggressive, exactly the orange of a torque wrench's set-mark. - `#FFC93C` — **trouble-light amber.** The warm glow pool, the secondary highlight, the LED-blink on callout balloons. The single point of heat in a cold blue room. - `#5BC8C0` — **technical teal.** Dimension lines, iso-grid lattice, secondary annotations, the "exploded" state guide-lines. A cool counter-accent so the orange has something to argue with. - `#9AA7B0` — **graphite line.** Default stroke color for part outlines and leader lines before interaction. The pencil under the ink. Everything is **line-drawn**: parts are not rendered solids but outlined contour drawings with the faintest paper-grain fill, exactly as a manual illustrates them. Color enters only through accents and the trouble-light glow. ## Imagery and Motifs **The five exploded assemblies (the entire visual payload):** 1. **Bicycle bottom-bracket** — spindle, two cup-and-cone bearing sets, 30+ individual ball bearings floating in a halo, two cups, a lockring, the threaded shell. Bearings drift in slow Brownian motion within their cloud. 2. **Focal-plane shutter** — first and second curtains, ribbon drums, springs (drawn as true helices in iso), the cocking gear train, the speed-escapement. The curtains flutter slightly, perpetually mid-travel. 3. **Synthesizer keybed** — three octaves of keys fanned apart, the felt strips, the contact rubbers, the bus-bar PCB, the spring under each key (compressing/releasing as you scroll). One key is always pressed. 4. **Burr coffee grinder** — conical burr, ring burr, the adjustment collar with its detent ball, the auger, the bean-hopper neck. The two burrs counter-rotate against each other a few degrees, never meeting. 5. **Pin-tumbler lock cylinder** — the plug, the shell, five driver pins, five key pins, five springs, a key blank hovering at the keyway. As you scroll, a ghost-key slides in and the pins jump to the shear line in sequence — a tiny mechanical light-show. **Recurring decorative motifs:** - **Leader lines & callout balloons** — the connective tissue of the whole site. Thin teal or graphite lines from part → numbered circular balloon. On hover the line flushes caution-orange and the balloon's number "powers on" with an amber LED flicker. - **Dimension lines** — between key parts, the classic engineering ↔ with end-arrows and a measurement label ("Ø6.35", "M10×1.0", "55 N·m"). These stretch with a rubber-band ease when an assembly explodes. - **Iso-grid lattice** — a faint teal 64px axonometric grid bleeding through the pegboard in negative zones, like graph paper under tracing paper. - **Pegboard holes** — the literal perforated-steel hole pattern as the ground texture, holes catching tiny specular dots from the trouble-light. - **Torque-spec fragments** — small monospace tables ("Stage 1: 30 N·m / Stage 2: +90°") tucked beside assemblies like marginalia. - **The trouble-light** — fixed top-right, a caged incandescent bulb, the warm amber pool it casts, the slight sway of its cord on scroll-velocity. - **Hand stamps** — "EXPLODED VIEW", "REF ONLY", "TORQUE TO SPEC", "END OF MANUAL" — ink-stamped at jaunty angles, slightly mis-registered, slightly faded. ## Prompts for Implementation Build mechanic.party as **one HTML page, one CSS file, one ES module** — no framework, no build step. The entire visual is **SVG line art on an isometric plane**, animated with CSS transforms and a small scroll/pointer controller. No images, no canvas required (though canvas is fine for the bearing-cloud particles if preferred). There is **no CTA, no pricing, no email capture, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner.** **The one fixed camera:** wrap the whole bench in a container with `transform: rotateX(58deg) rotateZ(-45deg)` (or an equivalent skew-based fake-iso for crisper SVG) and never animate the camera's *angle* — only its *position* along the bench. All "motion" is parts moving in this fixed iso space. **Storytelling structure (five assemblies, vertical-then-lateral scroll):** 1. **Cold open.** The bench, viewed iso, mostly empty pegboard. Center: a single collapsed black-line silhouette of Assembly 01 (the bottom-bracket as one shape). Above it, a hand-stamped "mechanic.party" wordmark in Bricolage caps and one line of Hanken body copy: *"every machine is a party waiting to be taken apart. pull up a stool."* The trouble-light hangs top-right, already glowing. The parts-tray rail sits lower-left with five dim bins. 2. **Assembly 01–05 — the explode/collect loop.** As the user scrolls into each assembly: the collapsed silhouette **detonates gently** — every part eases outward along the iso axes to its exploded position with a `cubic-bezier(0.34, 1.4, 0.64, 1)` spring overshoot, **staggered** part-by-part (`stagger` ~40ms, biggest parts first). Leader lines **draw on** (SVG `stroke-dashoffset` animation, `path-draw-svg`) from part to balloon; balloon numbers flicker amber on as the line completes. Dimension lines stretch into place with `elastic` ease. The part outlines themselves do a slow, perpetual hover-bob (2–4px iso-vertical, 4–7s loops, randomized phase) so the diagram is never dead still. Scroll past → parts **re-collect** along reversed paths into the next assembly's silhouette. Between assemblies: a stretch of empty pegboard with the iso-grid showing through and a hand-stamp drifting by. 3. **Per-assembly micro-mechanics** (each gets ONE signature animation tied to scroll progress within its section): - BB: the bearing cloud — 30+ tiny circles in slow Brownian drift, gently orbiting the spindle axis. - Shutter: the two curtains flutter; on a scroll threshold one curtain *travels* across in 1/250s real-time then resets. - Keybed: each key's spring compresses/extends with scroll; one key stays depressed, its contact-rubber squished. - Grinder: the conical and ring burrs counter-rotate a few degrees and back, forever, never touching. - Lock: a ghost-key slides into the keyway on scroll; the five pin-stacks jump to the shear line **in sequence** (last pin to set triggers a tiny amber "click" flash on the plug). 4. **Pointer interactions** (`cursor-follow`, `magnetic`, `hover-lift`): hovering any part → it lifts 6px in iso-space, its outline goes graphite→navy, its leader line and balloon flush caution-orange, the balloon's monospace caption (part name + a spec, e.g. *"24 — drive-side cup · M10×1.0 · clean threads, anti-seize"*) fades in beside it. Parts are gently **magnetic** to the cursor within ~80px — they tilt toward it like they want to be picked up. The trouble-light's glow pool does NOT follow the cursor (deliberately — the bench has its own light); but its cord **sways** proportional to scroll velocity. 5. **The parts-tray rail.** Five iso-bins, each with its hero-part silhouette. Click → the bench **dollies laterally** (the pegboard, grid, and all assemblies translate together along the bench length, ~900ms, smooth `cubic-bezier(0.65,0,0.35,1)`) to center that assembly. Active bin: its part lifts 8px and slow-rotates; the bin glows faint amber. The rail is the *only* nav. 6. **Close.** After Assembly 05, the bench runs out: a final patch of pegboard with **"END OF MANUAL"** ink-stamped large at an angle, a fragment of a torque-spec table beneath it, and one last line of Hanken copy: *"now go fix something. it's not as hard as they want you to think."* No links out, no social row, no nothing. The trouble-light keeps glowing as the page ends. **Texture & finish:** every surface gets a faint paper-grain (SVG `feTurbulence` filter at very low opacity over the manual-paper fills). Part outlines are 1.5px graphite strokes that thicken to 2px navy on hover. Leader lines are 1px. The pegboard is a tiled radial-gradient hole-pattern in deep navy with bench-shadow recesses. Honor `prefers-reduced-motion`: keep parts in their exploded positions, kill the bobbing, drift, and detonation — show the static diagram, fully labeled, no scroll-jacking. **Bias hard toward the manual-as-experience.** This is a 60–90 second walk down a workbench. The "product" is the *feeling of understanding how five machines come apart.* Resist every instinct to add a marketing section. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A single fixed isometric camera for the entire site.** Out of 334 designs, isometric appears in ~11% and almost always as decorative *icons* on an otherwise flat layout. Here the *whole page* lives on one axonometric workbench plane — the camera never changes angle, only dollies along the bench. There is no flat hero, no flat card grid, no flat column anywhere. The iso isn't an accent; it's the world. 2. **The exploded-view technical diagram as the core interaction model.** The site's structure *is* an assemble/disassemble loop — five real machines that fly apart into fully-labeled service-manual diagrams and re-collect. No other design in the corpus uses exploded-assembly mechanics, leader lines + callout balloons, or dimension-line annotations as primary content. It's a Haynes manual you scroll through. 3. **Edgy-rebellious tone (3% of corpus) pointed at *joy*, not protest.** Right-to-repair / iFixit energy rendered as a celebration — "mechanic.party" literally means "a party of mechanics." Cold blueprint geometry + warm trouble-light glow + a friend-handing-you-a-socket voice. Most edgy-rebellious sites are angry; this one is grinning, grease under the nails. 4. **Deliberately anti-convention:** no top nav, no hamburger, no logo lockup, no footer chrome — navigation is a literal *parts tray*. The footer is an ink stamp reading "END OF MANUAL". And the one persistent light source (the trouble-light) pointedly does *not* follow the cursor, breaking the near-universal `cursor-follow` reflex (89% of corpus). 5. **Line-art-only rendering on a perforated-steel pegboard ground** — no photography (98% of corpus uses photography), no gradient-mesh blobs, no glassmorphic cards (74% of corpus). Just contour drawings, paper-grain fills, hard 30° iso shadows, and one warm glow pool. **Chosen seed / style:** `isometric technical docs` (from seeds.json) — vocabulary mix: *aesthetic: isometric, layout: layered-depth, typography: tech-mono, palette: midnight-blue, patterns: path-draw-svg, imagery: line-illustration, motifs: tech, tone: edgy-rebellious*. **Avoided overused patterns from frequency analysis:** skipped `photography` (98%), `glassmorphism` (74%), `hand-drawn` aesthetic (97%), `card-grid` (88%), `centered` (86%), `warm/gradient` palettes (96–98%), `cursor-follow` (89% — deliberately subverted), `gradient-mesh` imagery (18%), and `pastoral-romantic`/`warm-inviting` tones. Leaned into underused `isometric` (11%), `line-illustration` (6%), `tech-mono` (10%), `midnight-blue` (5%), `path-draw-svg` (31%), `layered-depth` (9%), and `edgy-rebellious` (3%).