# Design Language for rust.quest ## Aesthetics and Tone rust.quest is staged as **a pilgrimage logbook kept by the last warden of a flooded ironworks** — a half-drowned cathedral of bessemer converters, gantry cranes seized at 40°, and rolling-mills returning to ore. The conceit reads precisely and is load-bearing: this is not "rust the programming language" and not generic grunge. It is **wabi-sabi applied to heavy industry** — the Japanese reverence for impermanence, asymmetry, and the dignity of decay, transposed onto Sheffield-grade steel and Pittsburgh blast furnaces. The warden is a quiet, unhurried voice: part metallurgist, part monk, part dungeon-master. She does not mourn the works. She catalogues its **slow transmutation back into the earth** the way a tea-master admires a cracked, gold-mended bowl. Every page is a *station* on her circuit — she walks, she kneels, she records the oxide bloom, she moves on. The emotional register is **grounded-earthy crossed with zen-contemplative** — never melancholic, never apocalyptic, never the snarling decay of post-apocalypse concept art. It is patient, warm in a mineral way, faintly devotional. The word "quest" is honored literally: the visitor receives, scroll by scroll, the warden's eight-station circuit, and the page closes when the circuit closes — there is no "next adventure," no level-select, no return to a hub. One walk. One logbook. The reader leaves having *witnessed* something corrode beautifully, not having been sold anything. The visual surface is **corten steel under raking light** — weathering steel that has formed its protective oxide skin, photographed at the golden hour when the patina goes from liver-brown to molten amber. Over everything: the faint cool wash of standing water, the iridescent oil-sheen that floats on flooded pits, the green-black bloom of bronze fittings turned malachite. Warm rust against cold water. Entropy lit like a shrine. ## Layout Motifs and Structure The structural conceit is **timeline-vertical** — but not a corporate "company milestones" timeline. It is read as **a survey transect driven down through the works**, the way a core sample is logged: depth markers on the left rail, each station pinned at its own elevation, the connecting line a literal **plumb-bob string** rendered in SVG that sways with `path-draw-svg` as the visitor scrolls and settles to true vertical when scrolling stops. The page is one continuous descent, roughly 560vh, eight stations, each station a four-beat movement: **approach → kneel (close inspection) → record (the warden's marginalia) → rise (depart for the next)**. Spatial system — **broken-grid layered over the transect**: - **The left rail (fixed, 88px wide):** the depth gauge. Etched tick marks every 10vh, station glyphs (forge-mark stamps, see Imagery) seated at each station's elevation, the plumb string descending through all of them. The rail reads like the margin of a surveyor's field book — graph-ruled, smudged, annotated. - **The station blocks (asymmetric, never centered):** each station occupies ~70vh and is composed of **two to four steel plates** — irregular rectangles with one or two corners eaten away by oxide (CSS `clip-path` polygons, 7–13 points, a different bite per plate). Plates overlap by 12–40px, casting soft umber shadows on each other. No plate is axis-aligned to its neighbor; each is rotated −3° to +4°. The composition resembles **riveted hull sections half-disassembled and leaned against a wall**. - **The marginalia layer (foreground, Z above plates):** the warden's handwritten notes — short, never more than three lines — float in the gutters and overlap plate edges, as if scrawled across the seam. They are the only handwritten text on the page. - **The water line:** roughly the lower third of the viewport at all times carries a faint translucent teal gradient and a single slow `wave-forms` ripple — the works is flooding from the bottom up, and the deeper the visitor descends, the higher the water has risen against the plates. By station eight the water has reached the top of every plate; the final station's plates appear *submerged*, viewed through a few centimetres of still green water (a subtle blur + caustic-light shimmer). Forbidden layout moves: no hero with a centered headline + button. No three-column feature grid. No bento box. No card-grid of equal tiles. No sticky top navigation bar — navigation, such as it is, lives entirely in the left depth rail. No footer with link columns. The page does not link out. ## Typography and Palette **Type stack — Google Fonts only, three families, strict assignment, no exceptions.** - **Cardo** (serif, regular + bold + italic) — the **garamond-classic / serif-revival** voice. This carries the warden's body text: her station descriptions, the long observational passages. Cardo is a humanist book serif with the slightly archaic, ink-trap warmth of a 16th-century metallurgical treatise (think *De re metallica*). Set body at 19px / 1.72 line-height, measure capped at 62 characters, color the warm parchment ink (#2A1E14). Drop the first line of each station into a single oversized initial — Cardo bold, ~84px, set into the steel plate as if **branded with a hot iron** (a faint outward umber glow, a darker scorch ring). Italic Cardo is reserved exclusively for Latin/Linnaean-style names the warden gives the oxides ("*Goethite, var. acicular*", "*the malachite bloom on cock-valve #14*"). - **Cinzel** (display, regular + bold) — the **art-deco-display-adjacent / inscriptional** voice, used with extreme restraint. Only two roles: (1) the page's single title plate — `RUST.QUEST` with the dot rendered as a small forge-mark roundel — set ~108px, tracked +180, uppercase, **deep-engraved into corten** (inset shadow, a thin amber rim where light catches the bevel); (2) the eight station numerals — `STATION I` … `STATION VIII` in Roman, ~40px, tracked +120, uppercase, seated on the depth rail. Cinzel never appears in running text. Its Roman-capital, chiselled-into-stone character makes each station feel like a marker plinth. - **JetBrains Mono** (mono, regular + medium) — the **tech-mono** voice for instrumentation only: the depth-gauge tick labels ("−40 m", "−110 m"), the warden's measurement annotations ("pH 4.1 · 17.2 °C · oxide depth 3.4 mm"), date stamps, and the assay tables (two tables in the whole document, each ≤4 rows — iron/carbon/silicon fractions of a recovered ingot). Set 13px, weight medium for headers. This is the cold, exact counterpoint to Cardo's warmth — the warden is a monk *and* a chemist. The warden's marginalia (the handwritten gutter notes) uses **Cardo italic at a steep CSS `skew(-8deg)`** rather than a script font — restrained, like a fast pen, not a costume. **Palette — warm rust against cold water, eight stops, all named for materials.** - `#1B130C` — *converter-iron* — near-black brown, the deepest shadow, the inside of a tuyere. - `#2A1E14` — *forge-ink* — the parchment body-text color, a burnt-umber so dark it reads as ink. - `#7A3B1E` — *liver-patina* — the freshest corten oxide, raw and ruddy, used for headings and the brand engraving's depths. - `#B5651D` — *molten-amber* — the golden-hour glow on weathered steel; the primary accent, the hot-iron-brand glow, the link color. - `#C8902B` — *brass-bloom* — old brass fittings catching light; used for the forge-mark roundels and emphasis runs. - `#E8D9BC` — *mill-parchment* — the warm bone background of the logbook leaves; the page's base canvas. - `#F6EFDD` — *lime-wash* — the lightest plate face, the surface the warden writes on. - `#3E5C57` — *flood-malachite* — the cold teal-green of standing water and verdigris bronze; the *only* cool hue, used for the rising water line, the verdigris bloom motifs, and the submerged final station. Its scarcity is the point — warmth everywhere, this single chill creeping up from the floor. Texture overlay across the whole page: a faint **grain-overlay** (subtle film grain, ~4% opacity) plus a near-invisible mottled oxide-stain map blended at multiply on the parchment — never enough to hurt legibility, just enough that no surface is flat. ## Imagery and Motifs **Three motif families, layered front-to-back.** **1. Oxide-bloom fields (load-bearing background imagery).** Each station's steel plates are not flat color — they carry a generated **patina map**: organic, lichen-like spreads of liver-brown, amber, and (sparingly) malachite, with hard "tide-line" edges where one oxide phase meets another, exactly as weathering steel mottles in the wild. Implemented as layered radial/conic gradients + an SVG `feTurbulence` displacement on a couple of soft-edged blobs, *not* a photo texture. Each plate's bloom is unique. As the visitor scrolls, **the blooms very slowly grow** — by the time a station scrolls out of view its plates carry visibly more oxide than when they entered (a CSS custom property driven by scroll progress, modulating gradient stops). The works is corroding *while you read*. This is the signature device of the site. **2. Forge-marks & maker's stamps (mid-layer iconography).** The warden marks each station with a **stamped roundel** — the kind of impressed maker's mark found on the flange of a Victorian girder: a circle, 64–88px, with a terse device inside (an anchor for the foundry quay, a crossed-hammer for the forge, a balance for the assay shop, a tuyère cross-section for the converter hall, a snail-spiral for the rolling mill, a teardrop for the flooded pit-bottom, etc.). Rendered as **inset-engraved metal** — a darker scorch ring, a thin brass-bloom highlight on the upper-left bevel — never flat icons. They live on the depth rail (one per station) and re-appear, large and ghosted at ~8% opacity, watermarked into that station's largest plate. There are no UI icons anywhere else — no hamburger, no arrows, no social glyphs. **3. Instrument schematics (line-illustration accents).** Thin (1px), single-color (forge-ink) **line drawings** of the machinery being witnessed — a bessemer converter in section, a gantry-crane truss, a cock-valve cutaway, a rolling-mill stand — drawn in the dry, hatched manner of a 1900 patent plate. One per station, set small (≤320px), placed off the optical center, with **`path-draw-svg` animating the linework on** as the station enters the viewport (the drawing assembles itself, stroke by stroke, in ~1.4s). A few of the strokes are deliberately broken / dotted where the warden's source diagram was itself rust-eaten. Recurring small motifs: **rivet rows** (small circular bevels marching along plate seams, used as rule-lines and list bullets); **plumb-bob string** (the SVG transect line, see Layout); **water caustics** (a slow shifting net of light at the rising water line); **tide-lines** (the hard organic edges between oxide phases, echoed as section dividers — a single irregular brown line, not a straight rule). No stock photography of any kind. No 3D renders. No people. No gradient-mesh hero. The only "photographic" feeling comes from the patina maps and the raking-light shadows, both procedurally built. ## Prompts for Implementation Build rust.quest as **one HTML document, one CSS file, one ES module — no framework, no router, no SPA, no build step beyond a single esbuild/lightningcss pass**. The page is a single continuous downward descent, ~560vh, eight stations, four-beat cycle each (approach → kneel → record → rise). The visitor lands at the head of the transect (the title plate engraved in corten, the depth gauge reading 0 m, the water at the floor far below), scrolls down through the warden's eight stations, and the page ends at the flooded pit-bottom — the screen still, green, half-submerged, the warden's final three-line marginalia, the plumb-bob string going slack into the water. No "begin again." No hub. The page links nowhere. **Storytelling is the organizing principle, not conversion.** The eight stations compose one fictional pilgrimage logbook — the warden's circuit of a flooded ironworks, from the foundry quay (Station I) down through forge, assay shop, converter hall, rolling mill, gantry yard, the seized turbine, to the pit-bottom (Station VIII). Each station: a Cinzel Roman numeral on the rail, a forge-mark roundel, two-to-four oxide-bloomed steel plates carrying Cardo body text (1–3 short paragraphs — the warden is terse), one branded drop-initial, one animated instrument schematic, a couple of JetBrains-Mono measurement annotations, and 1–2 skewed-italic marginalia notes in the gutter. Two assay tables total in the whole document (Station III and Station VIII), each ≤4 rows. **Motion vocabulary** — quiet, mineral, never bouncy: - **Scroll-triggered** entrance for every plate: it slides up ~28px and fades from 0 → 1 over 700ms with a heavy ease (`cubic-bezier(.16,1,.3,1)`), the plates of a station **staggered** ~120ms apart so a station assembles like sheets being leaned into place. - **path-draw-svg** for the plumb-bob transect line (continuously, the whole length of the page) and for each station's instrument schematic (on enter, ~1.4s, stroke-by-stroke). - The **oxide-bloom growth**: each plate's patina gradient stops are driven by a `--scroll` custom property updated in a single `requestAnimationFrame` loop; blooms expand slowly and irreversibly as the page is traversed. This is the one effect that must feel *alive*. - The **rising water line**: a fixed translucent `#3E5C57` gradient at the bottom of the viewport whose height is tied to overall scroll progress (≈18vh at the top → ≈100vh of the plate region by Station VIII), carrying one slow `wave-forms` ripple (SVG path morph, ~6s loop) and, near the surface, a faint **water-caustic** net of light (animated SVG turbulence, very low contrast). - **fade-reveal** for marginalia: they don't slide; they simply ink-in over 900ms, as if written while you watch. - A restrained **cursor-follow**: a soft ~120px warm-amber light pool follows the pointer at low opacity, raking across whatever plate it's over and very slightly intensifying that plate's oxide highlights — the warden's lantern. No magnetic buttons, no tilt-3d cards, no typewriter effect, no glitch. - Prefers-reduced-motion: freeze the plumb string at true vertical, freeze the water at its scroll-correct height, draw all schematics instantly, kill the cursor lantern, keep only opacity fades. **Explicitly forbidden:** no hero CTA stack, no pricing tiers, no testimonial carousel, no stat/counter grid, no feature card-grid, no logo cloud, no sticky nav bar, no newsletter modal, no "above the fold" anything. Navigation is the depth rail and nothing else. The page sells nothing and asks for nothing. ## Uniqueness Notes Seven differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Wabi-sabi heavy-industry — corrosion as devotion.** Frequency analysis: wabi-sabi sits at ~9% (uncommon) and is, in the registry, almost universally rendered as ceramics, raku tea-bowls, soft plaster, paper, and pottery. rust.quest is the first to apply the wabi-sabi ethos — impermanence, asymmetry, the dignity of decay — to **bessemer converters and rolling mills**. Iron, not clay. A flooded ironworks treated as a shrine, not a ruin. That fusion is the signature and would be plagiarism if copied. 2. **The page corrodes while you read it.** The scroll-driven, irreversible oxide-bloom growth on every plate — the works literally rusts further the longer you stay — is a structural device, not decoration. No other site keys procedural texture-growth to scroll progress as its central conceit. 3. **The rising flood as a vertical progress meter.** Instead of a progress bar, the standing water climbs the plates as you descend; Station VIII is viewed *through water*. Cool `#3E5C57` is the only chill hue in an entirely warm palette precisely so this rising tide reads. This replaces every conventional scroll-indicator and is unique here. 4. **"Quest" honored literally as a single closed circuit, then silence.** Eight stations, one walk, the plumb line goes slack into the water and the page ends. No hub, no level-select, no "next quest," no outbound links. Anti-conversion by construction. 5. **Cinzel reserved for inscription only; Cardo + JetBrains Mono carry everything else.** The monk-and-chemist split — humanist book serif for the warden's prose, mono for her instruments, Roman capitals chiselled into corten for waypoint markers only — is a strict three-font discipline rare in a cohort where `mono` (94%) is everywhere but rarely paired with a *book* serif and an *inscriptional* display this deliberately. 6. **All "imagery" is procedural — patina maps, raking-light shadows, line-drawn patent plates, engraved forge-marks — zero photography.** In a registry where `photography` appears in ~98% of designs, rust.quest uses none. The industrial-decay mood is built entirely from CSS gradients, SVG turbulence, and 1px hatched linework. 7. **Avoided patterns from the frequency analysis, deliberately:** no glassmorphism (83% — the steel plates are opaque, shadowed, riveted, never frosted glass), no hand-drawn aesthetic (94% — the only handwriting is restrained skewed-italic marginalia, everything else is engraved/typeset/drafted), no card-grid (92%) or full-bleed-hero (87%) or centered layout (81% — the transect is asymmetric top to bottom), no parallax-as-decoration, no tilt-3d, no magnetic buttons, no typewriter effect, no glitch art, no cursor-reactive confetti. The motion budget goes almost entirely to two slow, mineral effects: the rising water and the spreading rust. Chosen seed / style: **wabi-sabi imperfect ceramic** — reinterpreted, against type, as wabi-sabi *metallurgy*: weathering steel, oxide bloom, and standing water in place of clay, glaze, and kintsugi gold.