# Design Language for mechanic.monster ## Aesthetics and Tone mechanic.monster is the personal workshop of a big, gentle, six-armed grease-monster who fixes broken machines for a living. The aesthetic is **heavy skeuomorphism crossed with isometric tooling** — every surface looks like it was *milled*, *anodized*, or *bolted* together. Brushed aluminium panels, knurled knobs, hex-head bolts at the corners of plates, rubber gaskets, oil-stained kraft paper, and the warm amber glow of a bench lamp. Nothing is flat. Everything has a bevel, a drop shadow you could lean on, and a faint specular highlight rolling across it. The monster itself is never shown as a "scary creature" — he is a affectionate workshop deity, all knuckles and patience, six arms so he can hold a torque wrench, a coffee, a flashlight, a rag, a part, and your hand of you need help. The tone is **grounded-earthy, warm-inviting, and quietly proud of craftsmanship** — the voice of someone who says "yeah, I can fix that" before you finish describing the problem. Slightly retro-industrial, like a 1970s tool catalogue reissued by people who love it. Worn, not dirty. Trustworthy, hand-on-the-fender, smells-faintly-of-WD-40. ## Layout Motifs and Structure The page is built as an **isometric workbench seen from a fixed 2:1 dimetric angle** — the whole site is "the bench," and sections are *objects laid out on it*. No conventional card grid; instead, tools and parts are arranged on a pegboard-and-bench composition. - **The Pegboard wall** runs along the top: a perforated steel panel where the navigation hangs from real-looking hooks. Each nav item is a labeled tool silhouette (wrench = "Work", screwdriver = "Process", oil can = "About", caliper = "Contact"). - **The Bench surface** is the main scroll plane — a long horizontal-leaning butcher-block top receding in isometric perspective, with a steel apron edge and a vise clamped at the left. Content "modules" sit on it as machined trays, open toolboxes (lids ajar, foam cutouts holding content), and disassembled-machine exploded views. - **Exploded-view sections.** Key sections present their content as an **exploded technical diagram**: components float apart along thin dashed assembly lines, each tagged with a leader line and a part number. Scrolling "assembles" or "disassembles" them. - **The Drawer system.** Secondary content lives in flat-file drawers along the bench apron; clicking pulls a drawer out (in iso) to reveal its contents on velvet/foam. - **Asymmetric, never centered.** Weight sits low-left (the vise, the heavy stuff); lighter elements (notes, sketches, the coffee ring) drift up-right. A pinned work order on torn kraft paper anchors the hero. - **Layered depth** is everything — minimum five z-planes: pegboard back wall → bench top → objects on bench → things being held by the monster's arms reaching in from the edges → floating dust/sawdust motes in front. ## Typography and Palette **Typography — industrial stencil meets engineering legibility (all Google Fonts):** - Display / headings: **"Anton"** — tall, ultra-condensed, looks stamped on a crate or sprayed through a stencil. Used uppercase, tracked tight, sometimes rotated 90° down the side of a "machine panel." - Secondary headings / labels / part tags: **"Oswald"** — narrow grotesque, the typeface of inventory labels, gauge faces, and tool-drawer markers. - Body & long copy: **"Archivo"** — a sturdy, slightly mechanical humanist sans that reads cleanly on "paper" trays and steel plates. - Spec readouts, part numbers, torque values, the live "diagnostic" ticker: **"Spline Sans Mono"** — clean technical monospace for `N·m`, dimensions, `REV 03`, and the running repair log. - Hand-scrawled marginalia (the monster's own notes, arrows, "← check this gasket"): **"Caveat"** — a relaxed marker hand, used sparingly in grease-pencil yellow. **Palette — anodized metal, machine oil, and bench-lamp amber:** - `#15110C` — Crankcase Black (deep warm near-black; backdrop behind the bench, drawer interiors) - `#2B2622` — Cast Iron (panel bodies, the bench shadow side) - `#8C8A86` — Brushed Aluminium (mid-tone metal surfaces, tool bodies) - `#D9D6D0` — Polished Steel (highlights, plate faces, paper) - `#E8A33D` — Bench-Lamp Amber (the primary glow / accent — warm light pooling on the work) - `#C0531B` — Rust & Primer Orange (secondary accent — bolts, warning bands, the monster's coveralls) - `#3F6E63` — Patina Teal (oxidized-copper accent for links, gauge needles, "go" states) - `#F2C53D` — Grease-Pencil Yellow (annotation scrawls, highlight tape, "this part" callouts) Texture is mandatory: subtle brushed-metal striations, a fine machine-oil sheen gradient, kraft-paper fibre, and a low-opacity sawdust grain over the whole page. ## Imagery and Motifs No stock photography. Everything is **rendered like a workshop object**: - **The six-armed mechanic monster** — a friendly, broad-shouldered figure rendered in soft cel-shaded 3D-ish illustration with visible texture (denim coveralls, oil smudges, big knuckly hands). His arms reach into the frame from the edges to *hold* UI: a torque wrench tightening a section header, a flashlight whose cone is the actual hover-spotlight, a rag wiping a panel clean on scroll. - **Exploded mechanical diagrams** — gears, bearings, springs, gaskets, fasteners floating on dashed assembly lines with leader-line callouts and part numbers (`PT-014 · BUSHING`, `M8×1.25`). - **Skeuits**: knurled knobs, toggle switches, rotary selectors, a real-looking analog torque gauge, a "REPAIR STATUS" rocker switch — all functional UI controls dressed as machine parts. - **Pegboard + shadow outlines** — the "a place for everything" motif; empty hook outlines where future content "goes." - **Pinned ephemera** — torn kraft work-orders, a smudged invoice, a calendar with grease thumbprints, a coffee ring, a curled Polaroid of a fixed machine. - **Motion motifs**: spinning flywheels in section corners, a slow-ticking shop clock, drifting sawdust motes, the bench lamp's gentle flicker, sparks (sparingly) when something "connects." ## Prompts for Implementation Build this as **one continuous full-screen workbench you scroll *along*** (horizontal-leaning isometric pan), not a stack of marketing blocks. It should feel like a guided tour of the monster's bench while he works beside you. There is no funnel — no pricing tiers, no stat grid, no row of CTAs. - **The stage:** Fix the camera at a 2:1 dimetric angle. The bench top, pegboard, and apron are SVG/CSS-3D plates with `transform: rotateX()/rotateZ()/skew()` to fake iso. Parallax the z-planes on scroll — back pegboard moves slowest, foreground dust fastest. Respect prefers-reduced-motion by freezing the dust/flywheels but keeping layout. - **Hero:** The monster sits at his bench, two arms working a disassembled engine block, two holding tools, one holding coffee, one resting open toward the viewer. A torn kraft **work-order** is pinned center-left: `WORK ORDER #001 — "make it work again"`, title `mechanic.monster` stamped across it in Anton. Bench lamp glows amber; the cursor is a **flashlight cone** that brightens whatever it's over (CSS radial-gradient mask following the pointer with spring lag). - **Section reveals:** As a section scrolls into the lamp's pool, a monster-arm wipes a rag across the panel (clip-path wipe) revealing the content beneath, "clean." Headers arrive with a torque-wrench arm that *clicks* the title into place (a short rotate + a tiny spark + a `N·m` value flashing in Spline Sans Mono). - **Exploded-view interaction:** On a "Process"/"How it works" section, present steps as an exploded gear assembly; scrolling forward animates parts converging along their dashed lines into a working mechanism (a flywheel actually starts spinning when "assembled"); scrolling back disassembles. Leader-line callouts type in with the mono font. - **Drawers & toolboxes:** Secondary content opens by physically pulling a flat-file drawer or flipping a toolbox lid (3D-ish hinge transforms, slight overshoot/elastic settle, a soft metal *thunk* if audio is enabled — default off, with a toggle dressed as a power switch). - **Microinteractions:** knurled knobs rotate under drag; toggle switches flip with a spring; bolts at panel corners give a quarter-turn on hover; links are patina-teal and "tighten" (letter-spacing closes) on hover with an underline drawn like a scribed line. - **Texture pass:** Overlay a faint sawdust-grain PNG, brushed-metal striation gradients on metal surfaces, kraft-paper fibre on all "paper," and a global warm vignette so the lamp pool always feels like the focal point. - **AVOID:** centered hero with three buttons, pricing blocks, big-number stat grids, glassmorphism cards, generic card-grid galleries, dark-mode neon. Keep it warm, tactile, hand-built, and narrative. ## Uniqueness Notes - **Fixed isometric "workbench-as-page"**: the entire site is a single dimetric workbench you pan along, with a five-layer parallax of pegboard → bench → objects → reaching monster-arms → foreground dust — not a vertical stack of sections, and not the common full-bleed/centered/card-grid combo (the three most overused layouts at 90/88/86%). - **Heavy skeuomorphism + functional machine-part UI**: knurled knobs, toggle switches, torque gauges and flat-file drawers as real controls — leaning into `skeuomorphic` (only ~4% of designs) and explicitly rejecting `glassmorphism` (74%) and `hand-drawn` (97%) as the dominant skins. - **The six-armed mechanic monster as an in-frame collaborator**: arms reach in from the edges to physically operate the interface (rag-wipe reveals, torque-wrench header clicks, flashlight-cone cursor) — character-driven UI choreography rather than decorative mascotry. - **Exploded-view "assemble on scroll" sections** with dashed assembly lines, leader-line callouts and real part numbers — a technical-diagram storytelling device instead of stat grids or CTA rows. - **Typography & palette deliberately off the beaten path**: Anton/Oswald/Archivo/Spline Sans Mono industrial-stencil pairing (avoiding the 94%-saturated generic-mono and 50% humanist defaults), with an anodized-metal + machine-oil + bench-lamp-amber palette that uses warm tones (warm is near-universal) but routes them through *metal and rust* rather than the usual pastoral gradients. - Chosen seed/style: **skeuomorphic-isometric-asymmetric-layered-depth-Anton-display-bold-warm-earthy-grounded-tactile** (composed from seeds.json: "skeuomorphic soft ui app" × "isometric technical docs" × "mid-century modern furniture" warmth). - Avoided patterns from frequency analysis: hand-drawn (97%), glassmorphism (74%), photography (98%), full-bleed/card-grid/centered layouts (~88%), mono-as-primary type (94%), pastoral-romantic tone (35%), generic warm gradients.