# Design Language for mechanic.party ## Aesthetics and Tone mechanic.party channels the **goblincore** aesthetic through the lens of a grease-stained workshop celebration -- the beauty found in rusted gears, oil-dark surfaces, tangled wiring harnesses, and the chaotic accumulation of tools, parts, and half-finished projects that fills every horizontal surface in a real mechanic's garage. This is not the sterile showroom of an automotive brand; this is the back room where things actually get fixed, where the concrete floor is permanently stained with transmission fluid, where stripped bolts and bent cotter pins live in coffee cans on plywood shelves, and where someone has strung cheap party lights across the ceiling because the overhead fluorescents are too harsh after midnight. The goblincore lens means finding genuine delight in the gritty, the imperfect, the overlooked: the iridescent sheen of motor oil on water, the fractal branching of corrosion on a battery terminal, the satisfying geometry of a cross-section through a differential. The "party" in the domain name infuses everything with a sense of communal celebration -- this is a gathering of people who love the mechanical, the greasy, the broken-and-made-whole-again. The tone is **warm-inviting**: come in, grab a wrench, there is always room for one more pair of hands. The visual mood draws from: the amber glow of a trouble light hung from a hood latch, the warm brown of cardboard gaskets, the deep green-black of old engine enamel, and the unexpected pops of color from wire looms and diagnostic LEDs. It is maximally tactile -- every surface has texture, weight, history. ## Layout Motifs and Structure The layout follows a **stacked-sections** architecture, where each section is a self-contained "bay" in the workshop -- like pulling into different service bays in a garage, each one devoted to a different task, each one with its own visual gravity and internal composition. Sections stack vertically with no gaps or breathing room between them; each bay abuts the next, separated only by a thick horizontal rule rendered as a grease-smear divider (a CSS pseudo-element using a horizontally stretched, distorted radial gradient in dark brown-black). **Structural Principles:** - **The Workbench Grid:** Within each stacked section, content is arranged on an invisible 12-column grid, but the columns are deliberately uneven -- some are 1.5x wider than others, mimicking the ad-hoc arrangement of tools laid out on a workbench. Items cluster asymmetrically, with intentional negative space on one side suggesting cleared workspace. - **Pegboard Anchoring:** Section headers and key navigational cues are positioned as if hung on a pegboard -- left-aligned with a slight downward tilt (2-3 degrees via CSS transform) and accompanied by a small circular "peg" element (a 12px filled circle in `#5C4433`) that visually anchors the text to the background. - **Layered Depth via Stacking:** Elements within each bay overlap slightly, creating a sense of physical accumulation. A card might overlap the edge of an image by 20px. A heading might extend beyond its section boundary by 30px into the adjacent section. This controlled overlap prevents the stacked layout from feeling like a flat list. - **No Traditional Navigation Bar:** Instead, a persistent side-rail on the left edge (60px wide, dark brown `#2A1F14`) carries small iconic symbols (wrenches, gears, spark plugs rendered as simple SVG glyphs) that serve as section anchors. On mobile, this rail collapses to a bottom bar. ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "Permanent Marker" (Google Fonts) -- a thick, rough marker-pen face with aggressive stroke variation and deliberately imperfect letter forms, as if someone scrawled section labels on masking tape and stuck them to the pegboard. Used at 3rem-6rem for primary headings. All caps with `letter-spacing: 0.08em` to evoke stenciled tool-drawer labels. Color: `#E8D5B5` (pale workshop tan) with a `text-shadow: 2px 2px 0px #1A1008` to give depth, as if the letters are raised off the surface. - **Body / Descriptive Text:** "Caveat" (Google Fonts) -- a connected, flowing handwritten face that reads like shop notes scribbled in a parts notebook. Used at 1.1rem-1.4rem for body copy. Weight: 400 (Regular) and 700 (Bold) for emphasis. Line-height: 1.7 for readability against textured backgrounds. Color: `#D4C4A8` (aged paper tone). - **Technical / Data:** "Share Tech Mono" (Google Fonts) -- a monospaced technical face with squared letterforms that evoke diagnostic readouts and service manual part numbers. Used for timestamps, measurements, part-number callouts, and any "data" displayed on the site. Size: 0.85rem-1rem. Color: `#7CFC00` (diagnostic green, like an OBD-II scanner display) on dark backgrounds, or `#2A1F14` on light card surfaces. **Palette:** The palette is a strict **duotone** system built on two anchor colors, with supporting tones derived from mixing and tinting: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Dark | Deep Crankcase | `#1A1008` | Near-black with warm brown undertone -- the color of old motor oil | | Primary Light | Workshop Tan | `#E8D5B5` | Warm, yellowed tan -- the color of masking tape, cardboard gaskets, aged shop manuals | | Accent Warm | Trouble Light Amber | `#D4880C` | Deep amber-orange -- the glow of an incandescent trouble light | | Accent Cool | Diagnostic Green | `#7CFC00` | Bright lawn-green -- the color of LED diagnostic displays | | Surface Dark | Greased Steel | `#2A1F14` | Dark warm brown for card backgrounds and overlapping elements | | Surface Light | Dusty Concrete | `#B8A88C` | Muted tan-gray for secondary surfaces | | Divider | Grease Smear | `#3D2B18` | Dark brown-black for horizontal separators and borders | | Highlight | Spark Flash | `#FFD166` | Bright warm yellow for hover states and interactive highlights | The duotone effect is achieved by rendering most of the page in the Deep Crankcase / Workshop Tan axis, with Trouble Light Amber and Diagnostic Green reserved for interactive states, data callouts, and the card-flip accent faces. ## Imagery and Motifs **Mixed-Media Visual Language:** The imagery system combines three distinct media types layered together to create the goblincore workshop atmosphere: 1. **Photographic Textures (Background Layer):** Full-section background images of real workshop textures -- concrete floors with oil stains, rusted sheet metal, scarred wooden workbenches, pegboard with tool shadows. These are desaturated to near-monochrome and overlaid with a CSS gradient tint (`linear-gradient(180deg, rgba(26,16,8,0.85), rgba(26,16,8,0.7))`) so they read as atmosphere rather than content. Applied via `background-image` with `background-size: cover` and `background-attachment: fixed` for subtle parallax. 2. **SVG Line Illustrations (Decorative Layer):** Hand-drawn-style SVG illustrations of mechanical components -- cross-sections of engines, exploded views of transmissions, circuit diagrams, wrench profiles, bolt patterns. These are rendered as single-color strokes (Workshop Tan `#E8D5B5` at 40% opacity) and positioned as large-scale decorative elements that bleed off the edges of sections, half-visible like the blueprints pinned to a shop wall behind stacked parts. 3. **CSS-Generated Artifacts (Interactive Layer):** Small, generative visual elements created purely in CSS -- spinning gear-tooth borders (using `conic-gradient` and `border-radius` manipulation), animated oil-drip pseudo-elements (keyframed `translateY` with `border-radius: 50%` blobs), and flickering "spark" effects (rapid `opacity` and `box-shadow` keyframes in Spark Flash yellow `#FFD166`). **Abstract-Tech Motifs:** The decorative motif vocabulary draws from the intersection of mechanical engineering and abstract pattern: - **Circuit-trace borders:** Card edges and section boundaries rendered as PCB-style traces -- right-angle paths with small circular "solder pads" at corners, drawn with `border-image` using SVG patterns in Diagnostic Green `#7CFC00`. - **Gear-tooth dividers:** Horizontal rules replaced with repeating gear-tooth patterns (CSS `repeating-linear-gradient` creating interlocking triangular teeth in `#3D2B18` and `#2A1F14`). - **Bolt-pattern corners:** Cards and image frames decorated with circular bolt-head elements at their corners -- small `::before` pseudo-elements styled as hexagonal bolt heads (using `clip-path: polygon(...)`) in Greased Steel `#2A1F14` with a subtle inner shadow. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport scene: a near-black screen (`#1A1008`) with only a faint texture of concrete visible. After a 0.4-second pause, a single point of light appears at center -- a warm amber glow (`#D4880C`) that expands radially over 0.8 seconds, simulating a trouble light being switched on. As the light expands, it reveals the site title "mechanic.party" in Permanent Marker at 8vw, written in Workshop Tan, with each letter appearing sequentially (staggered 60ms delay per character) as if being written by hand. Below the title, body text in Caveat fades in: a short, inviting sentence. The trouble-light glow settles into a permanent radial gradient overlay that persists as a warm vignette throughout the scrolling experience. **Card-Flip Interaction Pattern:** The primary interactive pattern is the **card-flip**. Content cards throughout the site are double-sided. The front face shows a summary: a title in Permanent Marker, a thumbnail (desaturated photographic texture), and a one-line teaser in Caveat. On hover (desktop) or tap (mobile), the card performs a full 180-degree Y-axis rotation (`transform: rotateY(180deg)` with `backface-visibility: hidden` and `perspective: 1000px` on the parent). The back face reveals detailed content: extended text in Caveat, technical specifications in Share Tech Mono (displayed in Diagnostic Green on a dark surface), and a full-bleed background texture. The flip animation uses a custom cubic-bezier easing `cubic-bezier(0.175, 0.885, 0.32, 1.275)` that overshoots slightly, giving a satisfying mechanical snap, like a ratchet engaging. Cards are arranged in irregular clusters within each stacked section -- not a uniform grid but grouped in twos and threes with varied sizes (some cards span 2 columns, others are square, one per section is oversized and acts as a "feature" bay). This irregular arrangement reinforces the goblincore accumulation aesthetic. **Scroll-Driven Section Reveals:** Each stacked section enters the viewport via a distinct mechanical animation triggered by `IntersectionObserver` at a 0.15 threshold: - **Bay 1 (Introduction):** Slides in from below with a slight rotation (`translateY(60px) rotate(1deg)`) and settles with a spring-eased bounce, like a heavy part being set down on a bench. - **Bay 2 (Featured Content):** The section background (a rusted-metal texture) is initially clipped to a narrow horizontal slit (`clip-path: inset(48% 0)`) that expands outward to full height over 0.6 seconds, like a garage door rolling up. - **Bay 3 (Card Gallery):** Cards enter individually with staggered delays (80ms apart), each one dropping in from above with a `translateY(-40px)` and a slight `rotateZ` wobble (random between -3deg and 3deg), like parts being tossed onto a workbench. - **Bay 4 (Technical Details):** Text lines appear one by one with a typewriter-style reveal in Share Tech Mono, the Diagnostic Green characters blinking on like a terminal boot sequence. - **Bay 5 (Community/Closing):** The entire section fades in with a warm amber wash that intensifies and then recedes, like the flare of a welding arc seen through tinted glass. **Storytelling Arc:** The vertical scroll tells a story: arrival (opening the shop, switching on the light), exploration (browsing the bays, flipping cards to discover details), deepening (technical revelations, diagnostic readouts), and gathering (the communal warmth of the party). Each section is a chapter. There are no CTAs, no pricing blocks, no stat-grids. The experience is about dwelling, discovering, and feeling the warmth and chaos of a well-loved workshop. **CSS Details:** - All cards use `box-shadow: 4px 4px 0 #3D2B18` (hard shadow, no blur) for a physical, stamped-onto-surface feel. - Hover states on all interactive elements use Spark Flash `#FFD166` as an outline-glow (`box-shadow: 0 0 12px #FFD166`). - Body background is `#1A1008` with a subtle CSS `noise` texture (achieved via a tiny repeating SVG pattern of random 1px dots at 3% opacity in `#E8D5B5`). - Custom scrollbar styling: thumb in Trouble Light Amber `#D4880C`, track in Deep Crankcase `#1A1008`. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero image carousels, testimonial sliders, floating chat widgets, cookie banners as design elements. ## Uniqueness Notes **Differentiators from other designs:** 1. **Goblincore Mechanical Workshop Aesthetic:** No other design in the portfolio uses the goblincore aesthetic (0% frequency), and none marry it with a mechanical/automotive workshop context. The deliberate celebration of grime, rust, imperfection, and chaotic accumulation -- finding beauty in stripped bolts, oil stains, and tangled wiring -- is a radical departure from the clean, polished, or deliberately "designed" aesthetics that dominate the collection. 2. **Physical-Mechanical Card-Flip as Primary Interaction:** While card-flip appears at 5% frequency, no other design makes it the central, defining interaction pattern for the entire site experience. Here, every content card is double-sided with a ratchet-snap flip animation, and the entire information architecture is built around the reveal of hidden back-faces, turning the browsing experience into a tactile, tool-drawer-opening ritual. 3. **Duotone Crankcase-and-Tan Palette with Diagnostic Green Accents:** The specific color story -- near-black motor-oil dark paired with cardboard-gasket tan, punctuated by OBD-II scanner green -- is unique in the collection. The duotone palette (8% frequency) is uncommon, and this particular warm-industrial interpretation has no precedent in the existing designs. 4. **Mixed-Media Layering System (Photo Texture + SVG Blueprint + CSS Generative):** Three distinct visual media types are composited at different z-depths to create spatial richness: photographic workshop textures as atmospheric backgrounds, hand-drawn-style SVG mechanical diagrams as decorative mid-layer elements, and CSS-generated gear/spark/drip animations as the interactive surface layer. This three-tier system is architecturally distinct from the single-layer imagery approaches used elsewhere. 5. **Trouble-Light Opening Sequence:** The site opens with a radial light-expansion animation simulating an incandescent trouble light being switched on in a dark garage, revealing the title character by character. This specific narrative opening device -- a literal "lights on" moment -- has no parallel in the portfolio. **Chosen Seed/Style:** aesthetic: goblincore, layout: stacked-sections, typography: handwritten, palette: duotone, patterns: card-flip, imagery: mixed-media, motifs: abstract-tech, tone: warm-inviting **Avoided Patterns (from frequency analysis):** - Avoided "playful" aesthetic (95% overuse) in favor of goblincore (0%) - Avoided "centered" layout (99%) in favor of stacked-sections (2%) - Avoided "mono" typography dominance (99%) by leading with handwritten (Permanent Marker, Caveat) and using mono only for data callouts - Avoided "warm" palette as generic warmth (100%) by channeling warmth through a specific duotone (8%) industrial color story - Avoided "scroll-triggered" as sole animation pattern (97%) by building the experience primarily around card-flip (5%) with scroll-triggered as supporting mechanism - Avoided "minimal" imagery (94%) in favor of mixed-media (15%) layered compositing - Avoided "vintage" motifs (81%) in favor of abstract-tech (10%) expressed through circuit traces and gear patterns - Avoided "friendly" tone (98%) in favor of warm-inviting (3%) which carries similar approachability with more specific atmospheric connotation