# Design Language for rust.quest ## Aesthetics and Tone rust.quest is a **surreal field journal of a language that oxidizes lesser code** — a site that presents Rust not as a product to sell but as a natural phenomenon to be discovered, feared, and respected. The aesthetic is **surreal-monochrome**: as if someone found a 1960s Soviet nature documentary about rust itself — the chemical process, the transformation of iron into iron-oxide-red, the slow beautiful disintegration — and recut it as a modern coding memoir. Everything on the page carries the feeling of standing at the edge of a dark forest just before dusk, aware that something structurally significant is happening beneath the surface. The mood is **bold-confident without being aggressive** — the site knows what it is. It does not ask for permission. Rust (the language) is depicted as an elemental force: memory safety is not a feature, it is the physics. The borrow checker is not a rule, it is entropy made legible. The tone mirrors the language: precise, demanding, honest, occasionally terrifying. Visual references: the grainy texture of oxidized steel in black-and-white macro photography; the shallow depth-of-field blur of a nature photograph that shows a single sharp edge surrounded by soft dissolution; the way letters pressed into wet clay hold shadow. The palette is strict monochrome — no hue, only value — with a single controlled exception: one rust-red `#C44B24` used the way a brand is used on iron, scarce and permanent. The site is a narrative descent: the visitor arrives in fog (bokeh-blurred macro background of oxidized metal texture), reads their way through a disorienting broken-grid of language-defining moments, and surfaces at the bottom having been changed. No sales. No pricing. No social proof grids. Only the quest. ## Layout Motifs and Structure The layout is **broken-grid** — not chaotic, but deliberately fractured, the way rust fractures a uniform metal surface into irregular islands of texture. The structural metaphor is a **geological cross-section viewed from above**: the viewport is the stone, and sections of content emerge from it like strata exposed by erosion. **Core Grid Logic** - A 12-column CSS grid, 1440px max container, 32px gaps at desktop. - Columns do not align to a regular cadence. Instead, sections occupy unpredictable column spans: a heading might run from column 2 to column 8, while a code block occupies columns 7 to 12, deliberately overlapping by one column with a faint Z-axis lift (CSS `translateZ` in perspective viewport). - Vertical rhythm is broken by **deliberate overflow**: section text blocks bleed 48px past their containing row, then the next section begins 24px above where the previous ended — a controlled collision. - Sections feel like tectonic plates: each one is a rigid slab that has shifted position from where a "normal" grid would place it. **Page Sections (top to bottom, single continuous scroll)** 1. **Fog Entry (`100svh`).** The entire viewport is filled with a bokeh macro photograph of oxidized iron in deep shadow — black, charcoal, and trace rust-red. The site name `rust.quest` is set at 20vw in the display font, letter-spaced to near-illegibility, white at 100% opacity. No subtitle. No navigation. The `q` in `quest` drops below the baseline by exactly half the cap height — a deliberate mis-registration. A parallax scroll nudge (8px of vertical drift per 100px scroll) makes the bokeh shift subtly upward as the visitor first scrolls. 2. **The Oxidation Axiom (`80vh`).** A broken-grid section with two elements violently mis-aligned: on the left (columns 1–6), a single sentence set in the body serif at 2.4rem — *"Memory is yours until the moment it isn't."* — running over a ghost of the display font's letter `R` at 60vw, 8% opacity, bleeding past the section boundary. On the right (columns 8–12), a portrait-oriented box containing three line-pairs of code, monospaced, minimal — the smallest Rust program that compiles to nothing. 3. **The Three Laws (`120vh`).** Three cards, each one a slab — but not aligned. Card 1 sits at the left edge, top-aligned to the section. Card 2 is centered and elevated by 96px. Card 3 sits at the right edge, dropped 64px below card 1's baseline. Each card has a blurred macro-photograph as its background (bokeh style, different oxidation textures), tinted to near-black with a 92% dark overlay, and carries one law: *Own*, *Borrow*, *Live*. Text is white on dark. The cards overlap the section above and below, physically breaking the grid. 4. **Language as Geology (`60vh`).** A full-bleed horizontal text marquee — a single looping sentence at 6vw, the display font at 200 weight, near-invisible at 6% opacity — flowing behind a foreground typographic statement at 4.5rem: "No garbage collector. No compromises. No apologies." This section has no grid division — it is a single typographic field. 5. **The Descent Blocks (`140vh`).** Six content blocks, each containing a short prose passage and a code snippet, arranged on the broken-grid in a staggered descent: each subsequent block shifts right by 2 columns and down by one unpredictable row amount (ranging 24px–80px). The blocks feel like a controlled landslide — or the stages of a quest, each one lower, deeper, more committed. Block backgrounds alternate between pure black `#0a0a0a` and very-dark charcoal `#141414`. 6. **The Iron Floor (`100svh`).** The terminal section. Full-bleed bokeh background again, but now the oxidation is heavier, almost uniform rust-red — the one section where `#C44B24` dominates. The display font at 14vw: `quest/`. No period. No call to action. A single monospaced line below it in 1rem: `$ rustup target add your-future` — the cursor blinks at the end. ## Typography and Palette **Typography — expressive-variable system, all from Google Fonts** The typeface system is built on two axes: a display variable with extreme weight range for surreal scale contrast, and a body serif that reads like scientific notation — precise, dense, credible. - **Display:** *Fraunces* (Google Fonts variable) — a quirky, optical-size-aware serif with an axis that shifts from slab-like at small sizes to high-contrast at large. Used at weights 100–900, optical size (`opsz`) axis pushed to maximum for headlines, creating thin hairlines against thick stems. Used at 20vw for the hero, stepping down to 4.5rem for section headings. The `opsz` variation makes it feel alive — the same word looks different at each scale. This is the "expressive" in expressive-variable. - **Body and Callout:** *DM Serif Text* (Google Fonts) — a high-contrast serif that carries the feel of a naturalist's field notes. Body text set at 1.1rem/1.85, tracking 0. Used for the prose passages in the descent blocks and the axioms. Weight 400 regular only. - **Code:** *JetBrains Mono* (Google Fonts) — the single monospaced face. Light weight (300) for code blocks, so the code feels like pencil inscription rather than a terminal printout. No syntax highlighting — all code is set in `#e0e0e0` on very-dark backgrounds. **Palette — monochrome with a single iron brand** The palette is strictly black-to-white value range, with exactly one chromatic exception. | Token | Hex | Role | |---|---|---| | `--iron-void` | `#0a0a0a` | True near-black background, primary surface | | `--iron-deep` | `#141414` | Alternate dark surface, card backgrounds | | `--iron-mid` | `#2e2e2e` | Borders, code block backgrounds | | `--iron-ash` | `#5a5a5a` | Muted text, captions, ghost letters | | `--iron-fog` | `#9a9a9a` | Secondary body text | | `--iron-pale` | `#d4d4d4` | Primary body text | | `--iron-white` | `#f0f0f0` | Display text, primary contrast | | `--rust-brand` | `#C44B24` | The single chromatic color — cursor blink, iron-floor dominant | The rust-brand color appears in exactly three places: the blinking cursor at the end of the terminal section, the bottom-floor background wash, and the `::selection` highlight color. Nowhere else. Its scarcity gives it the weight of a brand mark. **Variable font CSS custom property usage:** ``` Fraunces: font-variation-settings: 'wght' 800, 'opsz' 144, 'SOFT' 0, 'WONK' 0; ``` The `opsz` axis is the primary expressive lever — used programmatically via scroll position to shift the optical size of the hero title as the visitor scrolls, from 144 (high contrast) toward 12 (slab-like), making the title feel like it is oxidizing before your eyes. ## Imagery and Motifs **Bokeh-background macro photography** is the sole imagery type. No illustrations, no icons, no diagrams. **The Photography Grammar:** All photographic backgrounds share a single constraint: the subject is oxidized metal — rust, iron flake, oxide scale — photographed at f/1.4 to f/2 so that the in-focus zone is never wider than 12% of the frame width. Everything else dissolves into gray-brown-black bokeh circles of varying size. This is not decorative blur — it is depth as content. The sharp zone is the only thing that is "real"; the rest of the page floats in controlled dissolution. **Four Distinct Bokeh Textures (used at specific sections):** 1. **Entry Fog:** Macro of iron oxide scale at shallow focus — the sharp zone is a single crystal edge, everything else is deep circular bokeh of near-black and dark gray. The overall tonality is 90% shadow. 2. **Law Cards (three):** Each card uses a different crop of oxidized steel. Card 1 (Own): a linear rust streak, sharp center, horizontal blur. Card 2 (Borrow): a circular rust pit, sharp at the rim, dissolved interior. Card 3 (Live): a plate of mill scale, textured and almost abstract, sharp diagonal edge. 3. **Iron Floor:** The same macro subject as the Entry Fog but reshot with more exposure — the rust-red is visible, the depth-of-field is slightly wider (f/2.8), and the overall tonality is 60% shadow, allowing the `#C44B24` to show through the dark overlay. **Motifs — nature as decay and transformation:** The dominant motif is **iron-to-rust as a metaphor for compilation** — raw iron is uncompiled code; rust-oxide is the safe, transformed, certified artifact. This nature motif (chemical oxidation as a natural process) runs through all copy, imagery, and structural metaphors. It is never explained — visitors discover the metaphor through the visual language. Secondary motifs: - **Depth of field as memory scope:** Things in the borrow-checker's scope are sharp; things out of scope are bokeh-dissolved. - **Geological strata as type hierarchy:** Display type is the visible surface; body text is the dense stratum below; code is the bedrock. - **The quest mark `/`:** The terminal slash in `quest/` in the iron floor is the only punctuation used decoratively. It suggests a file path, a command line, an unfinished journey — three readings coexist without resolution. ## Prompts for Implementation Build rust.quest as a **single continuous scroll with no navigation links, no headers, no CTAs, no sign-up forms**. The visitor descends through the page the way a caver descends through a tunnel — there is only forward. Emphasis is on narrative atmosphere. The JavaScript surface area should be minimal: IntersectionObserver for reveal triggers, one variable-font animation, one blinking cursor. No frameworks. No component libraries. Vanilla HTML/CSS/JS, compiled to one file. **CSS Architecture:** Use CSS custom properties for the entire design token system. The broken-grid layout must be done in CSS Grid — no absolute positioning for major sections. Broken-grid effect achieved by combining negative `margin-block` on section elements (sections partially overlap) and deliberate `grid-column` mis-alignment (no section starts on column 1 unless it is a full-bleed). ```css :root { --iron-void: #0a0a0a; --iron-deep: #141414; --iron-mid: #2e2e2e; --iron-ash: #5a5a5a; --iron-fog: #9a9a9a; --iron-pale: #d4d4d4; --iron-white: #f0f0f0; --rust-brand: #C44B24; } body { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; background: var(--iron-void); color: var(--iron-pale); } ``` **Broken-Grid Section Rules:** Each section must explicitly set its own `grid-column` and use `margin-block-start: -48px` to create the overlap. Minimum 3 sections must overlap a section boundary above or below them. **The Fraunces opsz Scroll Animation:** ```js const hero = document.querySelector('.hero-title'); window.addEventListener('scroll', () => { const pct = Math.min(window.scrollY / window.innerHeight, 1); const opsz = 144 - (132 * pct); // 144 → 12 as scroll progresses const wght = 800 - (700 * pct); // 800 → 100 hero.style.fontVariationSettings = `'wght' ${wght}, 'opsz' ${opsz}`; }, { passive: true }); ``` This makes the hero title shift from high-contrast modern-display to near-invisible slab as the visitor first scrolls — as if the word "rust" is oxidizing in real time. **Progressive Disclosure via IntersectionObserver:** Each descent block in section 5 starts invisible (`opacity: 0; transform: translateY(24px)`). An IntersectionObserver at 20% visibility threshold triggers a `data-revealed="true"` attribute, which CSS transitions to `opacity: 1; transform: translateY(0)` over 600ms with `ease-out`. No stagger library needed — apply progressively longer `transition-delay` via CSS `:nth-child()` selectors (0ms, 80ms, 160ms, 240ms, 320ms, 400ms). **Bokeh Photography Sourcing:** Use CSS `filter: grayscale(100%) brightness(0.3)` on all background images except the iron floor, where use `grayscale(0%) brightness(0.5) sepia(40%)` to allow the rust-red through. Overlay each image with a pseudo-element `::after` using `background: var(--iron-void); opacity: 0.88` to unify the tonality. **The Blinking Cursor:** ```css .terminal-cursor::after { content: '_'; color: var(--rust-brand); animation: cursor-blink 1.2s step-end infinite; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } ``` **Typography Scale (desktop):** - Hero: `clamp(8rem, 20vw, 18rem)`, Fraunces, wght 800, opsz 144 - Section headings: `clamp(2.4rem, 4.5vw, 4.5rem)`, Fraunces, wght 600, opsz 72 - Body: `1.1rem`, DM Serif Text, wght 400, line-height 1.85 - Code: `0.9rem`, JetBrains Mono, wght 300, line-height 1.6 - Marquee: `6vw`, Fraunces, wght 200, opacity 0.06 **AVOID in implementation:** navigation bars, call-to-action buttons, pricing sections, testimonials, statistic grids, feature comparison tables, footer link columns, modal dialogs, cookie banners, scroll-to-top buttons. ## Uniqueness Notes 1. **Monochrome palette with a single chromatic exception, deployed at 3 points only.** The frequency report shows `monochrome` at 11% of designs — but none of those designs use a single-color exception placed with this kind of intentionality. The `#C44B24` rust-brand color appears only at the cursor, the iron-floor background, and the selection highlight. Its rarity is its weight. This is not "monochrome with accent" — it is monochrome with a brand mark. 2. **Variable font axes animated on scroll as primary storytelling device.** The `expressive-variable` typography pattern appears at only 5% in the frequency report. rust.quest goes further: the Fraunces `opsz` and `wght` axes are driven by scroll position, so the hero title literally oxidizes as you scroll. The typographic transformation is the narrative, not a decoration applied to the narrative. 3. **Broken-grid implemented as deliberate sectional collision, not asymmetric placement.** `broken-grid` appears at only 8% in the corpus. Other broken-grid designs typically mean "columns start at different positions." rust.quest's broken grid uses negative `margin-block` to make sections physically overlap — the upper section's content is still visible beneath the lower section's leading edge, like tectonic slabs. 4. **Bokeh-background photography used as a depth-of-field conceptual metaphor.** `bokeh-background` appears at only 3% in the imagery category. Other uses treat bokeh as decoration. rust.quest uses the sharp-versus-dissolved bokeh threshold as a direct metaphor for the Rust borrow checker's memory scope: things in scope are sharp, out-of-scope is blur. The imagery is argumentative, not ornamental. 5. **`progressive-disclosure` used as sectional revelation tied to physical descent, not to interaction state.** At 3% in the patterns frequency, progressive disclosure is almost always used for UI state (accordion, tab, tooltip). rust.quest uses it structurally: each descent block is revealed only as the visitor physically scrolls into it, making the disclosure the visitor's own forward motion through the quest. Chosen seed: `aesthetic: surreal, layout: broken-grid, typography: expressive-variable, palette: monochrome, patterns: progressive-disclosure, imagery: bokeh-background, motifs: nature, tone: bold-confident` Avoided patterns (overused in corpus): parallax (75%), photography as generic background (87%), scroll-triggered reveal without conceptual grounding (35%), full-bleed layouts without structural justification (63%), editorial aesthetic (52%), hand-drawn elements (57%).