# Design Language for mechanic.stream ## Aesthetics and Tone **Botanical HUD Retrospective** — mechanic.stream exists in the tension between living wilderness and obsolete instrumentation. Imagine a 1970s field naturalist who also happened to wire their own telemetry rig: hand-pressed botanical specimens are pinned beneath cracked instrument glass; analog gauges track humidity in a greenhouse that has long since gone feral. The tone is warm, nostalgic, and unhurried — a recorded transmission from somewhere deep in the mountains, broadcast on a frequency nobody thought to cancel. The visual world is dense with layered depth: collaged field-guide illustrations of ferns, bracket fungi, lichen rosettes, and pressed leaves bleed through semi-transparent instrument overlays. The "stream" in the domain name is literal — a long, slow, single-take broadcast of a landscape changing season by season. Mood references: Redwood service manuals circa 1968. Reel-to-reel tape decks in a ranger station. Topographic survey maps folded too many times. The smell of pine resin and warm bakelite. ## Layout Motifs and Structure **HUD-Overlay on Parallax Terrain Strata** The page is divided into three depth layers that scroll at different rates: 1. **Deepest layer (0.2× scroll speed):** A full-bleed mountain silhouette rendered as a multi-ridge SVG — five ridgelines in warm ochre/sepia tones stacked from dark (foreground) to light (distant peaks). This is always behind everything. 2. **Mid layer (0.5× scroll speed):** Collaged botanical elements — large-format scan-style illustrations of individual plant specimens, slightly desaturated, positioned asymmetrically. These drift through the viewport as the user scrolls, as though the user is moving through a forest. 3. **Foreground layer (1.0× scroll speed):** The actual HUD frame. A fixed bezel drawn in SVG occupies the screen edges — corner brackets in 2px amber lines, tick-mark rulers along the left and bottom edges, crosshair reticles at the four corners. Inside this frame, a narrow centered content column (~560px) carries all text. **Content flow:** Single long scroll. No sections separated by dividers — sections transition by the botanical collage elements spacing them apart. No sidebar. No grid columns. The only "grid" is the implicit one formed by the HUD bezel ticks. Navigation is a minimal horizontal strip at absolute top of the HUD frame: monospaced labels in small-caps spaced far apart, no underlines, weight 400, letter-spacing 0.25em. **Spatial rhythm:** Generous vertical breathing room. Paragraphs are narrower than headings. Pull-quotes float right-shifted, with a 1px left border in amber. ## Typography and Palette **Typefaces (Google Fonts only):** - **Primary display:** "Courier Prime" — monospaced, warm, slightly humanized compared to pure Courier. Used for all headings H1–H3 at tracked-up letter-spacing (0.08em). Reinforces the telemetry/field-notes voice. - **Body text:** "Source Serif 4" — a contemporary revival of the sturdy editorial serif. Used at 17px/1.75 line-height. Its low-contrast strokes read cleanly against warm parchment backgrounds. - **HUD labels / metadata:** "Share Tech Mono" — tighter, more technical. Used at 11px for all instrument annotations, tick labels, lat/lon coordinates, and micro-captions. All-caps, letter-spacing 0.15em. **Palette — Warm Botanical Amber:** | Role | Name | Hex | |------|------|-----| | Background deep | Aged parchment | `#f5ede0` | | Background mid | Warm cream | `#faf4ea` | | Primary text | Bitter bark | `#2d1f0e` | | HUD frame / accent | Instrument amber | `#c07a1a` | | HUD frame dim | Aged brass | `#8a5c12` | | Mountain ridge 1 (near) | Deep forest slate | `#3d3328` | | Mountain ridge 2 | Warm umber | `#6b4f35` | | Mountain ridge 3 | Dusty sienna | `#9e7452` | | Mountain ridge 4 | Pale terra | `#c4a07a` | | Mountain ridge 5 (far) | Horizon haze | `#dfc9a8` | | Botanical overlay tint | Faded moss | `#7a8c5e` | | Pull-quote border | Amber signal | `#d4890e` | | Link hover | Ember glow | `#b85c00` | The palette deliberately avoids pure black and pure white. Everything sits in warm sepia territory, as though the whole page has been exposed to decades of sunlight. ## Imagery and Motifs **Botanical collage specimens:** Large (400–700px wide) illustrations of individual botanical subjects are scattered across the parallax mid-layer. These are rendered as if scanned from a 19th-century botanical atlas — detailed ink-line engravings with hand-applied watercolor washes in muted green/ochre. Species emphasis: mountain flora — lichen rosettes, alpine gentian, spruce cones, fern fronds, club moss, serviceberry branches. Each specimen is slightly rotated (between –4° and +6°), has a faint drop shadow (2px blur, 20% opacity sepia), and carries a small typewritten label below it in Share Tech Mono: the Latin binomial and an invented field-collection date (e.g., "Polypodium vulgare / coll. 14.IX.1971"). **Mountain silhouette SVG (deepest layer):** Five layered ridge-paths rendered as filled SVG polygons, stacked bottom-to-top in the five mountain palette colors above. The ridgeline shapes are irregular — not symmetrical peaks but the kind of long, lumpy horizons you get looking west across a real range. The SVG spans 200vw, offset –50vw, so horizontal micro-parallax is possible on mouse-move. **HUD bezel elements:** - Corner brackets: 20px arms, 2px stroke, amber (#c07a1a), sharp 90° corners only (no rounded) - Tick rulers: left edge ticks every 40px, numbered every 200px in Share Tech Mono at 9px - Bottom edge: a signal-strength bar graph (seven bars of varying height, static, decorative) labeled "SIG QUALITY" - Top right corner: a "REC ●" indicator that pulses slowly (3s sine-wave opacity from 0.4 to 1.0) - Two crosshair reticles at top-left and bottom-right of the bezel, 24px diameter, 1px stroke, amber **Decorative motifs:** - Topographic contour line fragments (closed curves, 0.5px stroke, 15% opacity moss color) scattered across the parchment background — generated as a static SVG pattern tile, not random - Small printed stamps scattered in margins: circular, 1px amber border, text like "FIELD VERIFIED" or "ELEV 2847m" in Share Tech Mono ## Prompts for Implementation Build this as **a single long-scrolling transmission from a mountain field station**, structured as a documentary broadcast rather than a product page. The metaphor is: someone pressed record on a reel-to-reel at dawn in a ranger cabin and never stopped. **Parallax architecture:** ```
``` Use `requestAnimationFrame` with a single scroll listener. Translate each layer via `transform: translateY(calc(var(--scroll-y) * ))`. The mountain layer is `position: fixed` and re-positioned only on scroll for the depth effect. **HUD bezel:** Implement as a single `position: fixed` SVG overlay covering 100vw × 100vh. It should never scroll. Draw corner brackets, tick rulers, crosshair reticles, and the "REC ●" pulse as SVG elements. The bezel SVG has `pointer-events: none` so clicks pass through to content. **Botanical specimens:** Each specimen is an `` inside `.layer-botanical`. Position them with absolute coordinates (expressed as `vw`/`vh` percentages so they scale). Apply CSS `rotate` and `filter: sepia(0.3) brightness(0.95)`. On scroll approach (Intersection Observer), fade in from opacity 0 over 1.2s with a slight upward translate (20px → 0). **Content column:** `max-width: 560px`, centered, `font-family: 'Source Serif 4'`. Padding top `12vh` to clear the navigation strip. Section breaks are marked not by `
` but by a botanical specimen that crosses into the content lane. **The "broadcast" opener:** Page loads to a full-screen mountain view with the HUD bezel fading in (0 → full, 1.5s). After 2s, the first line of copy types in character by character at 40ms/char using a vanilla JS typewriter (no library). The typed text is a field-log header: `TRANSMISSION 001 / mechanic.stream / bearing 247° / elev 2104m`. **Navigation:** Absolutely positioned top strip inside the HUD frame. Items are `SIGNAL`, `TERRAIN`, `STATION`, `ARCHIVE`. No hamburger on mobile — instead the nav collapses to a single line of dot-separated labels that wraps. **Color application:** Background is the parchment gradient (`#f5ede0` → `#faf4ea`, 160deg). Text is `#2d1f0e`. Links are `#c07a1a` with no underline by default; on hover, a 1px underline appears in `#b85c00`. **Sound Easter egg (optional):** A subtle ambient loop of wind/static can be triggered by clicking the "REC ●" indicator. This is a toggle — clicking again mutes. The audio element is preloaded but not auto-played. **Mobile adaptation:** On viewports under 768px, the parallax is disabled (all layers at speed 1.0, botanical specimens hidden). The HUD bezel simplifies to only top and bottom horizontal bars with corner brackets. Font sizes reduce 15%. **Avoid:** hero images of people, icon grids, pricing tables, testimonial carousels, progress bars showing "skills", numbered feature lists with check marks. ## Uniqueness Notes **Chosen seed:** aesthetic: botanical, layout: hud-overlay, typography: mono, palette: warm, patterns: parallax, imagery: collage, motifs: mountain-landscape, tone: nostalgic-retro **Differentiators from other designs in the registry:** 1. **Three-speed parallax + SVG mountain silhouette as structural backdrop.** Most parallax sites use photo backgrounds. This one uses a hand-crafted multi-layer SVG ridgeline as the only landscape, keeping the aesthetic print-like rather than photographic even at full-bleed. 2. **Botanical specimens as section dividers instead of rules or whitespace.** The collaged flora are functional separators — they interrupt the content rhythm the way pressed specimens in a field notebook interrupt the written notes. No other design in the registry uses illustrated specimen placement as a navigation aid. 3. **A fixed HUD bezel as the entire UI chrome.** Navigation, metadata, signal indicators, and tick rulers all live in one persistent SVG overlay. The page content is literally "inside the instrument." This inverts the usual pattern where decorative elements float over content — here the instrument frame IS the chrome and the content is what it's observing. 4. **Typewriter reveal keyed to a field-log header, not a marketing headline.** The first typed text is a transmission metadata block (`bearing / elevation / callsign`), establishing the documentary fiction before any prose appears. This is rare: most sites with typewriter effects use them for taglines. 5. **Avoids overused patterns:** photography (90% frequency — avoided in favor of illustrated collage), minimal (40% — avoided in favor of rich layered depth), dark-mode neon (common in tech sites — avoided entirely in favor of warm sepia).