# Design Language for mechanic.monster ## Aesthetics and Tone mechanic.monster is a **pastoral-romantic fever dream crossed with a corrupted transmission** — picture a wildflower meadow in high summer, every petal and stamen rendered in candy-saturated pigment, but the image tears and glitches mid-frame as if the broadcast signal itself has fallen in love and lost coherence. The editorial sensibility is a long-form zine printed on a Risograph, colours bleeding slightly past their registration, column rules that breathe rather than cage. The mood is deeply contradictory in the way that only the best editorial design is: tender and violent, lush and broken, analogue warmth shredded by digital noise. Think of a Sunday afternoon gardening magazine whose pages have been fed through a CRT television set running on the wrong voltage — the flowers still smell like honey, but the sky behind them pulses candy-magenta and aurora-green. The tone is pastoral-romantic in content and voice, but the execution is glitch-art spectacle. Every screen is an editorial spread: a strong typographic claim at the top, a full-bleed glitch-treated image beneath, then a reading column that narrows as it descends, guiding the eye down the page the way a country lane narrows toward a gate. Sections stack cleanly and breathe generously — no cramming, no carousels, no feature grids. Each stacked section is its own world, its own palette chapter. ## Layout Motifs and Structure The layout is **stacked-sections editorial** — a single-column, full-width vertical sequence where each section is a discrete horizontal band occupying 100vw × min-content-height (never less than 60vh). Think of the page as a broadsheet folded four times and then unrolled: each fold reveal is one section. **Section anatomy:** - **Section 1 — Masthead / Hero.** Full viewport height. The site name "mechanic.monster" set in the display typeface at `clamp(4.8rem, 11vw, 10.4rem)`, italic, centered, against a candy-bright aurora background that shifts between `#FF3CAC` and `#38FFCB` via a slow CSS animation. A glitch-displacement filter (`feDisplacementMap` SVG filter) warps the text 3–6px on a 4-second loop, as if the broadcast is struggling. Below the wordmark, a single line of thin prose — the site's manifesto sentence — in the body face at 18px. - **Section 2 — Featured Story / Glitch Spread.** 90vh. A full-bleed glitch image treatment: a CSS `clip-path: polygon()` torn-edge mask over a candy-pink background, with a duplicate offset layer in `#FFEC3C` at 40% opacity creating a chromatic aberration double-exposure. The story headline floats over the image, set in the display face at `clamp(2.6rem, 5.8vw, 5.2rem)`, white with a `2px` candy-green text-shadow at `+6px +0px`. - **Section 3 — Reading Column.** Background `#FFF5F8` (soft petal cream). A single centered reading column, `min(680px, 88vw)` wide. Body text at `clamp(1.05rem, 1.6vw, 1.2rem)`, generous `1.78` line-height. Decorative paragraph-opening drop-caps in the display face, candy-magenta. Left and right margins carry slim aurora-gradient rule lines that pulse at 3s intervals (CSS `@keyframes` fading between `#38FFCB` and `#784CF4`). - **Section 4 — Aurora Interlude.** 80vh. A full-bleed aurora animation: three overlapping `radial-gradient` divs in `#784CF4` / `#FF3CAC` / `#38FFCB`, each translating slowly on independent `animation-duration` values (17s, 23s, 31s) — co-prime so they never repeat in sync. No content, just light. The section announces the palette chapter shift. - **Section 5 — Photo Glitch Gallery Editorial.** Three stories arranged as an asymmetric editorial triptych: left panel `40vw`, center panel `30vw`, right panel `30vw`. Each panel is a candy-tinted glitch treatment — `hue-rotate(N deg)` + `brightness(1.15)` + a CSS `@keyframes` that periodically introduces a `translate(3px, 0)` / `translate(-3px, 0)` glitch micro-twitch. Story headlines below each panel in body-display italic. - **Section 6 — Closing Manifesto.** 100vh centered. A large typographic block: four stanzas of short prose lines, each stanza's first word in the display face at `clamp(2.2rem, 4vw, 3.6rem)` and the remaining words in the body face at `clamp(1rem, 1.5vw, 1.15rem)`. The page ends here — no footer, no nav links, only the manifesto and white space below. **Spatial rules:** - Section padding: `clamp(64px, 8vw, 128px)` top/bottom. - No horizontal side padding on full-bleed sections. Reading sections use `clamp(24px, 6vw, 120px)` side padding. - No fixed navbar. Site navigation is a single elegant floating pill — `position: fixed`, top-right, background `rgba(255,255,255,0.72)` with `backdrop-filter: blur(12px)`, containing three words maximum. ## Typography and Palette **Display face:** [`Fraunces`](https://fonts.google.com/specimen/Fraunces) — variable axes: `wght` 100–900, `ital` 0–1, `SOFT` 0–100, `WONK` 0–1. The defining choice: Fraunces is an optical-size variable serif with a soft, slightly melancholy wobble in its italic forms that reads as handmade and romantic. Used for the masthead wordmark, all section headlines, drop-caps, and the closing manifesto's large words. The variable `SOFT` axis is set to 80 (very soft) for display, 40 for headlines, creating a subtle optical difference between scale registers. **Body face:** [`Instrument Serif`](https://fonts.google.com/specimen/Instrument+Serif) — regular 400, italic 400. A modern editorial serif with ink-trap details that read beautifully at 18–20px. All running prose, captions, and pull-quotes. Italic variant for story sub-headlines and manifesto prose lines. **Accent / UI face:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono) — regular 400, medium 500. Sparingly, for metadata labels (issue number, section label, date), set at 11–12px, letter-spacing `+0.12em`, all-caps. Creates a deliberate friction with the two warm serifs — the mono voice is the machine signal, the serifs are the garden. **Palette — candy-bright aurora:** | Role | Name | Hex | |------|------|-----| | Aurora Magenta | Primary signal | `#FF3CAC` | | Aurora Green | Counterpoint | `#38FFCB` | | Aurora Violet | Depth anchor | `#784CF4` | | Candy Yellow | Accent / aberration layer | `#FFEC3C` | | Petal Cream | Reading background | `#FFF5F8` | | Ink Deep | Body text | `#1A0A14` | | Soft Blush | Section dividers, tint | `#FFD6E8` | | Ghost White | Overlay text on dark | `#F9F4FF` | **Colour application:** - Aurora Magenta `#FF3CAC` + Aurora Green `#38FFCB`: the aurora pair. Never used simultaneously at full opacity on the same element — always one dominant, one as shadow or glow. - Aurora Violet `#784CF4`: used exclusively for the deepest background layer and for decorative rule lines. - Candy Yellow `#FFEC3C`: never used as a primary background; used only as the chromatic aberration offset layer (20–40% opacity) in glitch treatments. - Petal Cream `#FFF5F8`: the reading section background, the most used neutral. - Ink Deep `#1A0A14`: all body text. A very-dark magenta-leaning near-black, warmer than pure black. ## Imagery and Motifs **Glitch-art treatment system:** All imagery in mechanic.monster uses one of three glitch recipes, never photographic realism: 1. **Chromatic-split recipe:** Two identical SVG/CSS layers, identical content, offset `+6px` horizontally. Top layer hue-shifted `+180deg` relative to base, 55% opacity. Bottom layer at 100%. Produces the classic RGB-misalignment look of a broken VHS or malfunctioning CRT. Used in the Featured Story section. 2. **Displacement-warp recipe:** CSS `filter: url(#glitch-displacement)` where the SVG filter uses `feTurbulence` (`baseFrequency 0.015 0.04`, `numOctaves 2`) fed into `feDisplacementMap` (`scale 14`). Applied to the masthead wordmark and section transition headlines. The turbulence seed animates frame by frame using a `steps(1)` keyframe that jumps between 3 seed values (1, 47, 112), producing a periodic snap-glitch rather than a smooth warp. 3. **Scanline-tear recipe:** A CSS pseudo-element with `repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px)` over image panels, combined with a periodic `translateY(2px)` on a `0.08s` duration `steps(1)` loop that fires only 3% of the time (managed via a CSS custom property toggled by a small JS Intersection Observer — the glitch only activates when the section is in the viewport). **Aurora-lights motif:** The aurora system is purely generative CSS — no images, no canvas: - Three `div.aurora-layer` elements, each `position: absolute; width: 160%; height: 160%; border-radius: 50%`. - Colours: layer A `background: radial-gradient(ellipse, #FF3CAC88 0%, transparent 68%)`, layer B `radial-gradient(ellipse, #38FFCB66 0%, transparent 72%)`, layer C `radial-gradient(ellipse, #784CF444 0%, transparent 60%)`. - Each layer has an independent `@keyframes` translation on the `transform: translate(X, Y)` axes, durations 17s / 23s / 31s, `timing-function: ease-in-out`, `alternate` direction. The co-prime durations guarantee the pattern never repeats within the session. - The aurora interlude section background is built from these layers stacked. The masthead section uses the same layers but at 45% `mix-blend-mode: screen` over the body-text, so the aurora bleeds into the type without overwhelming readability. **Decorative motifs:** - **Torn-edge separators:** Between stacked sections, an SVG `` mask that creates a ragged horizontal tear — no straight line, always an organic jagged edge. Alternates between a candy-magenta tear and an aurora-green tear, reversing direction (tear pointing up vs. down) per section boundary. - **Pulse-attention markers:** Section entry points (the first headline visible when a section enters the viewport) carry a `::before` pseudo-element — a small filled circle, `8px` diameter, in Aurora Magenta, that executes a `pulse-attention` keyframe: `scale(1) opacity(1)` → `scale(2.4) opacity(0)` over `1.6s ease-out`, looping twice then stopping. This draws the eye to each new section's headline without being perpetually distracting. - **Paragraph ornaments:** Between prose paragraphs in the reading column, small inline SVG ornaments: a hand-drawn three-petal wildflower at 14px × 14px, stroked in `#FF3CAC` at 1.2px, no fill. Suggests the pastoral content that the glitch wraps. ## Prompts for Implementation Build mechanic.monster as **a long editorial broadsheet that has caught a beautiful virus** — the pastoral content is entirely real and fully rendered, but the transmission medium is malfunctioning in ways that only make it more alive. **Structural walkthrough:** **Section 1 — Masthead:** Full-viewport hero. `background-color: #1A0A14`. Aurora layers behind, `mix-blend-mode: screen`. The wordmark "mechanic.monster" in Fraunces variable, `wght 200, ital 1, SOFT 80`, at `clamp(3.8rem, 9.5vw, 9.6rem)`, colored `#FFF5F8`, centered. The glitch-displacement SVG filter applied to the wordmark wrapper, seed cycling on a 4s `steps(3)` loop. Below the wordmark, a single italic manifesto line: "*Every machine that breaks has something to say.*" in Instrument Serif italic, `clamp(1.1rem, 1.8vw, 1.35rem)`, `#FFD6E8`. A `position: fixed` nav pill top-right: three words (e.g. "Stories / About / Now") in DM Mono 11px all-caps, `letter-spacing: 0.14em`, background `rgba(26,10,20,0.72) backdrop-filter: blur(14px)`, border `1px solid #FF3CAC44`, border-radius `24px`, padding `8px 20px`. **Section 2 — Featured Story Spread:** 90vh. Petal Cream background. Full-bleed glitch panel occupying 100vw × 55vh — built purely in CSS: a `linear-gradient(135deg, #FF3CAC, #784CF4 45%, #38FFCB)` base, the chromatic-split recipe applied as a pseudo-element layer in `#FFEC3C` at 38% opacity offset `6px` right. The scanline-tear recipe pseudo-element on top. Story headline over the panel: Fraunces `wght 700, ital 0, SOFT 40` at `clamp(2.4rem, 5.5vw, 5rem)`, text `#F9F4FF` with `text-shadow: 6px 0 0 #38FFCB`. The headline uses `overflow: hidden` + `clip-path: inset(0)` so any glitch translate stays within bounds. Below the panel: a 3-column Instrument Serif teaser block, 420px total width, centered, `font-size: clamp(0.95rem, 1.4vw, 1.05rem)`, `line-height: 1.72`. **Section 3 — Reading Column:** Background `#FFF5F8`. Centered column `min(680px, 88vw)`. First paragraph's first letter: Fraunces `wght 900, ital 1, SOFT 100`, `font-size: 5.2rem`, `float: left`, `line-height: 0.82`, `color: #FF3CAC`, `margin: 0.08em 0.12em 0 0`. Each paragraph separated by the wildflower inline SVG ornament. Left and right of the column, at `position: absolute; width: 2px`, aurora-gradient rule lines using `background: linear-gradient(to bottom, transparent, #38FFCB, #784CF4, transparent)`, with a CSS `@keyframes` that cycles the gradient `background-position` for the pulse effect. A `DM Mono` metadata header at the section top: "Issue 001 — Pastoral Transmission" 11px, `#FF3CAC`, `letter-spacing: 0.16em`. **Section 4 — Aurora Interlude:** 80vh, `background: #1A0A14`, the three aurora CSS layers at full opacity. No text. The section acts as a chromatic palate cleanser between reading and gallery. The torn-edge top separator: SVG path in Aurora Magenta, tearing downward. The torn-edge bottom separator: SVG path in Aurora Green, tearing upward. **Section 5 — Glitch Gallery Triptych:** Background `#FFF5F8`. Three panels: left `clamp(240px, 40vw, 460px)` wide, center `clamp(180px, 30vw, 340px)`, right `clamp(180px, 30vw, 340px)`. Each panel height `clamp(280px, 45vh, 520px)`. Panel fills: left `linear-gradient(160deg, #FF3CAC, #FFEC3C)`, center `linear-gradient(200deg, #784CF4, #38FFCB)`, right `linear-gradient(140deg, #38FFCB, #FF3CAC)`. Each panel has the displacement-warp recipe applied on `mouseenter` (scale 14 → scale 24 on hover, snapping back on `mouseleave` with `transition: filter 0.3s`). Below each panel: story title in Fraunces `wght 400, ital 1` at `clamp(1.2rem, 2.2vw, 1.8rem)` and a two-line Instrument Serif caption. Panels are arranged `display: flex; gap: clamp(12px, 2vw, 28px); align-items: flex-start`. **Section 6 — Closing Manifesto:** 100vh, background `#1A0A14`, centered content. Four stanzas, each a two-to-four-line prose poem. The first word of each stanza in Fraunces `wght 600, ital 1, SOFT 80` at `clamp(2rem, 3.8vw, 3.4rem)`, `color: #FF3CAC`. The remaining words of each stanza in Instrument Serif italic at `clamp(1rem, 1.5vw, 1.15rem)`, `color: #FFD6E8`, `line-height: 1.85`. Each stanza separated by `3.2rem` vertical space. The aurora layers present at 25% opacity behind, `mix-blend-mode: screen`. The last stanza's final word carries the pulse-attention marker. **Animation and interaction principles:** - All glitch animations use `prefers-reduced-motion: reduce` — if set, all glitch effects freeze at rest state. - The aurora layers always animate regardless (they are slow and gentle enough to not trigger motion sensitivity). - Scroll-linked reveals: each section headline enters via `opacity: 0 → 1` + `transform: translateY(18px) → translateY(0)` over `0.6s ease-out`, triggered by IntersectionObserver at `threshold: 0.12`. - The pulse-attention circle on section headlines fires once on entry, twice maximum. - Avoid JavaScript-heavy parallax; the depth effect between sections comes from the contrasting background colours of adjacent sections and the torn-edge separators, not from scroll-rate differences. ## Uniqueness Notes 1. **The pastoral-glitch contradiction is structurally embedded, not cosmetic.** No existing design in the registry marries editorial pastoral-romantic tone with glitch-art execution — the closest neighbors use glitch as a dark/cyberpunk motif. mechanic.monster uses glitch as a love language: the machine is breaking because it feels something. The wildflower ornaments inside the shredded transmission are a unique pairing. 2. **Co-prime aurora timing (17s / 23s / 31s) creates genuine non-repetition.** The aurora interlude uses mathematically co-prime animation durations, meaning the light pattern never repeats within a normal reading session. This is not a standard "put three gradients and animate them" pattern — it is engineered unpredictability, a pastoral sky that behaves like weather. 3. **Fraunces variable axes SOFT and WONK used as semantic registers.** SOFT 80 = display/romantic, SOFT 40 = editorial/authoritative. No other design in the corpus uses a variable font's stylistic axes as a semantic register system rather than just weight interpolation. The axis values carry meaning. 4. **Pulse-attention as section arrival ritual, not persistent animation.** `pulse-attention` is used once per section headline on viewport entry, then stops — it is a greeting, not a tic. The pattern is in the seed and scored underused (1%) in the corpus; this design deploys it in a considered, non-spammy way. 5. **Stacked-sections with zero navigation repetition.** No section repeats the nav pill's information. The page is designed to be read straight through from top to bottom, like a magazine spread, not navigated. The fixed nav pill is the only structural concession to non-linear access. **Chosen seed:** aesthetic: editorial, layout: stacked-sections, typography: variable-fluid, palette: candy-bright, patterns: pulse-attention, imagery: glitch-art, motifs: aurora-lights, tone: pastoral-romantic **Avoided patterns (frequency analysis):** - photography (90% — saturated; using generative CSS gradients instead) - minimal (40% — saturated; this design is intentionally maximal within editorial constraints) - mono typography (80% — heavily saturated; display type is variable serif, not monospace) - scroll-reveal (60% — avoided as a default; used only once per section, not continuously) - card-grid / feature-grid layouts (avoided entirely; stacked broadsheet sections only)