# Design Language for mechanic.party ## Aesthetics and Tone mechanic.party exists at the precise collision point between a Swedish coastal boathouse and a nineteenth-century field naturalist's journal. The name is a deliberate tension: "mechanic" implies grease-stained expertise, the smell of cold metal, the confidence of hands that know how things fail — "party" punctures that seriousness with a private joke, a raised glass in a fog-laced harbor. The site leans into that contradiction and refuses to resolve it. The aesthetic is **scandinavian** in structure: restrained whitespace, honest materials, no ornament that does not earn its presence. But the mood is emphatically **mysterious-moody** — not gothic, not ominous, but the particular atmospheric quality of late-afternoon light in October on the Bohuslän coast, when the water is the same pewter grey as the sky and the line between them dissolves. There is moisture in the air. There are things below the surface. Inspiration: the editorial design of the Swedish magazine *Allt om Historia*, a worn Tomas Tranströmer poetry collection with a salt-damaged spine, a collage plate from a nineteenth-century Swedish naval architect's manual overlaid with pressed sea-wrack. The site is not designed for conversion. It is designed to be read slowly, with a cold cup of coffee at your elbow. Tone: enigmatic-authoritative. The voice is the voice of someone who understands machines at the cellular level and considers explaining them a form of meditation. No urgency. No enthusiasm. Calm declarative sentences that open onto unexpected depths. ## Layout Motifs and Structure The structural spine of the page is a **sidebar** — a narrow persistent column on the left (220px desktop) that holds the navigation, a vertical site-title set in tracked small-caps, and a single decorative element: one pressed botanical line illustration, rendered in a muted coastal ink. The main content well (680px desktop) sits to the right of this sidebar, breathing openly. The sidebar is not a menu bar. It is a **standing annotation** — the kind of marginal note a meticulous reader makes in the gutter of a technical manual. It does not compete with the content. It anchors the page like a dock piling. Within the main content well, composition is **editorial-flow**: sections cascade vertically with deliberate unequal spacing — tight where text clusters, open where images interrupt. There is no card grid. There are no boxed containers. Content floats on the white field the way objects float in a still harbor. Negative space is structural, not decorative. Section transitions are handled by **underline-draw** animations — a thin rule that draws itself across the full content width as the section enters the viewport, 1px, the color of cold seawater (#8EA8B4). This is the only animation that runs on scroll. Everything else is static or triggered by hover alone. Desktop: sidebar fixed, content well scrolls. Tablet: sidebar collapses to a top strip with the site-title and a minimal hamburger. Mobile: single-column, sidebar elements stack above content. No hero section. No fullscreen opener. The page begins mid-sentence, as if the reader has opened to a chapter already in progress. ## Typography and Palette **Primary typeface — EB Garamond** (Google Fonts). This is the `garamond-classic` typographic register: old-style proportions, ink-trap counters, the slight irregularity of a face that remembers being cut in metal. Used for all body text at 17px/1.75 leading, and for large pull-quotes set at 38px in italic, tracked at -0.02em. The garamond italic at display size has an organic quality that resists the mechanical — appropriate for a site about mechanics who distrust perfection. **Secondary typeface — DM Sans** (Google Fonts). Light weight (300) for navigation labels, sidebar annotations, and section headers. At small sizes and wide tracking (+0.12em), it reads as technical precision without coldness. The contrast between EB Garamond's humanist warmth and DM Sans's restrained geometry is the typographic argument of the site. **Accent mono — JetBrains Mono** (Google Fonts). Used only for technical specifications, part numbers, and code-adjacent fragments. Weight 400. Never decorative — only functional. **Palette — coastal-blend:** - `--harbor-fog`: #D4DCE1 — the near-white that is actually grey, used for the page background; it has the quality of light filtered through sea-mist - `--pewter-water`: #8EA8B4 — the underline-draw color, section rule color, and decorative line weight; cold without being clinical - `--deep-hull`: #2C3E4A — primary text color; not pure black, the near-black of a painted wooden hull in shade - `--wrack-green`: #5C7A6E — the accent that appears only in the botanical motifs and in visited link states; the green of sea-wrack at low tide, desaturated enough to feel archival - `--salt-white`: #F4F1EC — used for sidebar background and pull-quote backgrounds; warmer than the page ground, as if the sidebar has been read more often - `--iron-rust`: #8B5C52 — a single accent color, used sparingly for hover states on navigation items and for the dot that punctuates the site-title; the color of old iron left near salt water ## Imagery and Motifs **Imagery is collage** — the defining visual technique of the site. Not digital collage with drop-shadows and obvious cuts, but the compositional logic of early-twentieth-century Scandinavian scientific illustration: flat lay arrangements of objects against neutral grounds, photographed from directly overhead, then digitally combined with archival botanical prints, nautical chart fragments, and technical line drawings. The result reads as simultaneously documentary and surreal. **The image corpus:** 1. A flat lay of actual hand tools — wrenches, feeler gauges, a timing light — arranged on unbleached linen, shot overhead, with a botanical illustration of *Fucus vesiculosus* (bladder wrack) printed and physically placed among the tools before photography. Not composited digitally — physically collaged then shot. The boundary between the real and the printed is visible in the shadows. 2. A section of nautical chart (Kungshamn to Strömstad, Swedish west coast) with a hand-drawn circuit diagram overlaid in the same India ink style as the depth soundings. 3. A portrait, deliberately blurred at f/1.4, of a person in a workshop looking away from camera, their reflection visible in a polished gear face they are holding. **Leaf-organic motifs:** The botanical element is not decorative filler — it is the structural metaphor. The site argues (silently, through composition) that understanding machines is a form of natural history. The specific botanical is sea-wrack: *Ascophyllum nodosum*, *Fucus serratus*, *Pelvetia canaliculata*. These are used as line drawings in two positions: (1) the sidebar's single decorative element, a vertical sprig running 180px tall, rendered in `--wrack-green` at 40% opacity; (2) as a watermark-like background element in the pull-quote zones, barely visible at 6% opacity against `--salt-white`. **Underline-draw motifs:** Section headers do not have conventional heading hierarchy. They appear as running text in DM Sans light, small-caps, widely tracked, followed immediately by the underline-draw animation — a horizontal rule that extends from left to right over 0.6 seconds, an easing of cubic-bezier(0.25, 0, 0.1, 1.0). The rule does not recede or fade. It simply arrives, completely, and stays. This creates a sense of deliberate inscription rather than animation-for-attention. ## Prompts for Implementation Treat mechanic.party as a **single sustained meditation** on the relationship between mechanical understanding and natural observation. The page has no sections in the conventional sense — it is one long text with interruptions. The interruptions are: collage images, pull-quotes, technical specifications in JetBrains Mono, and the botanical motifs. **Structural implementation:** - The sidebar is `position: fixed` on desktop, `width: 220px`, background `--salt-white`, no border, only a `box-shadow: 2px 0 12px rgba(44,62,74,0.06)` — barely there, like the edge of a fog bank. - The content well has `margin-left: 220px` and `max-width: 680px`, centered within the remaining viewport with generous horizontal padding (min 48px each side). - No horizontal rules except the underline-draw animations. Visual section separation is handled by vertical whitespace alone: `margin-block: 4rem` between major sections. **Animation — underline-draw only:** - On `IntersectionObserver` entry (threshold 0.2), section header `

` elements trigger a CSS custom property transition: `--line-width` from `0%` to `100%` over 600ms. - Implemented as a `::after` pseudo-element with `width: var(--line-width, 0%)`, `height: 1px`, `background: --pewter-water`, `display: block`, `transition: width 0.6s cubic-bezier(0.25, 0, 0.1, 1.0)`. - No other scroll-triggered animations. No parallax. No stagger. No spring physics. The page is still. **Collage images:** - Images are rendered with `mix-blend-mode: multiply` on the botanical overlay elements, allowing the page background `--harbor-fog` to show through and integrate the printed-on-paper quality. - Each collage image is set without a caption box — the caption appears as a line of DM Sans Light 12px, `color: --pewter-water`, `letter-spacing: 0.08em`, set flush-left beneath the image with 8px top margin. It reads like a museum label attached with a pin. **Hover states:** - Navigation links in the sidebar: underline appears from left using the same underline-draw CSS technique as section headers, but faster (0.2s), `--iron-rust` color. - Body links: no underline at rest; underline appears on hover in `--pewter-water`. - Collage images: `filter: saturate(1.0)` at rest, `filter: saturate(1.15) brightness(1.02)` on hover, transition 0.3s ease. Subtle awakening. **Typography in implementation:** - Body text: `font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1.75; color: var(--deep-hull); font-feature-settings: "onum" 1, "liga" 1` — old-style figures and ligatures enabled. - Pull-quotes: `font-size: 38px; font-style: italic; line-height: 1.3; letter-spacing: -0.02em; color: var(--deep-hull)`. Set in EB Garamond. Background `--salt-white` with 24px padding, full content-well width. - Technical specs: `font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--wrack-green); background: rgba(92,122,110,0.08); padding: 2px 6px; border-radius: 2px`. **Forbidden patterns:** - No CTA buttons with fills. If a call-to-action exists, it is a text link with the underline-draw hover treatment. - No pricing blocks, no feature comparison grids, no testimonial carousels. - No hero image with overlaid headline. The page starts with a paragraph of body text. - No sticky navigation on mobile that obscures content. ## Uniqueness Notes 1. **Coastal-blend palette used as atmospheric meteorology, not decorative coastal branding.** The frequency report shows `coastal-blend` at 1% corpus usage — nearly absent. All existing uses treat coastal colors as decorative (seafoam accents, nautical stripes). mechanic.party treats `--harbor-fog` and `--pewter-water` as *weather conditions* — the palette is the light state of a specific time of day in a specific latitude. This is a conceptual inversion: the colors are not chosen to look like the coast, they are chosen because the coast looks like a machine workshop in certain light. 2. **Sidebar layout with zero navigation convention.** The frequency report shows `sidebar` as underused compared to `hero-dominant` (3x more common), `stacked-sections`, and `immersive-scroll`. But the sidebar here refuses its conventional function: it is not a navigation panel, not a filter column, not a table-of-contents. It is an annotation margin given physical form — static, observational, containing only a site-title and a botanical illustration. This inverts the expected information hierarchy. 3. **Collage imagery as scientific method, not aesthetic decoration.** `collage` appears at low frequency in the corpus (mixed-media grouping, 3%). Existing collage designs use it as an energy-up technique — overlapping layers, dynamic cuts, visual excitement. mechanic.party uses collage as a documentary methodology: physical objects are assembled, a botanical print is placed among them, the entire arrangement is photographed as evidence. The collage seam is *intentionally visible* — shadow falls across the printed paper. This is the opposite of seamless digital composition. 4. **Underline-draw as the sole animation.** Corpus patterns show parallax (79%), stagger (55%), and scroll-triggered (36%) as the dominant animation choices. mechanic.party uses exactly one animation: the underline-draw of section headers. Everything else is static. This restraint is not a limitation — it is the design argument. A mechanic who shows you one precise gesture instead of a flourishing demo is demonstrating mastery, not limitation. 5. **Mysterious-moody tone through omission, not atmosphere.** The frequency report shows `mysterious-moody` as a rare tone choice. Most dark or moody designs achieve atmosphere through dark backgrounds, dramatic lighting, or heavy contrast. mechanic.party is light-toned (`--harbor-fog` background, generous whitespace) but achieves its mysterious quality through *what is not said* — no about page, no explicit services description, body text that opens mid-thought, images that raise questions rather than answer them. The mystery is structural, not decorative. Seed: aesthetic: scandinavian, layout: sidebar, typography: garamond-classic, palette: coastal-blend, patterns: underline-draw, imagery: collage, motifs: leaf-organic, tone: mysterious-moody Avoided overused patterns: parallax, stagger, scroll-triggered, spring (all above 30% corpus frequency). Avoided overused tones: friendly, professional, authoritative (all above 12%). Avoided overused motifs: tech, circuit (21% and 10%). Preferred underused palette: coastal-blend (1%). Preferred underused layout: sidebar (low frequency vs. hero-dominant).