# Design Language for op9.rs ## Aesthetics and Tone op9.rs is the quiet digital record of **Opus 9** — the ninth wood-firing of a single anonymous potter who fires once a year and keeps no other archive. The name is read as a musical opus number applied to clay: not "ninth product line," but "ninth complete work" — the kiln logged, the ash measured, the survivors counted, the failures named. The site is the **kiln ledger of Opus 9 made browsable**, and nothing more: no shop, no studio bio with a smiling headshot, no "book a class" banner, no Instagram grid. The aesthetic is **wabi-sabi held to its strictest reading** — not the soft beige "rustic minimal" that the word has been diluted into, but the original Sōetsu/Rikyū sense: *the beauty of the incomplete, the impermanent, the modest, and the asymmetrical, met without sentimentality*. Every pot shown here is cracked, warped, ash-scorched, or kiln-kissed in a way a factory would reject. The tone is **zen-contemplative**: hushed, patient, a little austere, written in the flat declarative voice of a firing log — temperatures, hours held, where the flame path ran, which shelf collapsed. No exclamation marks. No adjectives that flatter. The flaw is described the same way the success is. The mood is a cold workshop at 4 a.m. with the kiln still ticking as it cools, frost on the inside of the window, and one lamp on. ## Layout Motifs and Structure The page is **one long vertical descent through the kiln itself, top shelf to bottom shelf** — a single scroll, no top navigation, no hamburger, no footer link cluster, no sidebar. Structure follows the kiln stack: **seven shelf-strata**, each a full-viewport band, descending from "Chamber Mouth" (where flame enters, hottest, most violent results) down through "Mid Stack," "Cool Shelf," to "Floor & Ash Pit" (lowest temperature, slowest, the over-fired and the under-fired both ending here). Within each stratum the composition is **ma-negative-space** taken seriously — a single ceramic object placed off-center on a vast empty field of textured paper-white, the way a tea master sets one bowl on an empty tatami. The object never sits in the geometric middle; it sits on an **asymmetric thirds line that drifts slightly each stratum** (left, then further left, then suddenly far right, then back toward center as you descend), so the eye is never given a stable axis — the layout itself is "imperfect and asymmetrical." Captions are not boxes; they are **thin hairline-led annotations** that connect to the pot by a single 0.5px line (a kiln-log pointer line), set in small caps far in the margin. There is **one persistent element**: a slim vertical **temperature gauge** pinned to the right edge — a 1px rule with a tiny ash-grey bead that slides down as you scroll, labelled in degrees Celsius from 1280° at the top to 60° at the bottom, so scroll position *is* the cooling curve. The only "navigation" is seven faint tick-marks on that gauge. No grid of cards anywhere. No bento. No dashboard. Generous, almost wasteful, emptiness between every object — emptiness is the primary material here, clay is the accent. ## Typography and Palette **Type system — Google Fonts only:** - **Display / object names:** `Cormorant Garamond` — used at large sizes (clamp 2.4rem–5rem), weights 300 and 500 only, italic reserved for the single word "Opus" wherever it appears. Cormorant's high-contrast, slightly fragile serifs read like ink brushed onto a damp log page — elegant but not luxurious, with the thin strokes thin enough to feel like they might break, which suits the subject. Letter-spacing `0.01em` at display, generous `1.55` line-height. This sits in the underused **serif-revival** typographic register (14% of corpus) rather than the 94%-saturated mono register. - **Body / firing-log prose:** `Spectral` — a slab-influenced serif with sturdy, ledger-like bones, weight 400, size 1.0625rem, line-height 1.85, measure capped at 58ch. Used for all the kiln-log paragraphs (temperatures, hold times, flame-path notes). - **Micro-labels, the temperature gauge, shelf names, annotation tags:** `Spectral SC` (the small-caps companion) at 0.72rem, letter-spacing `0.18em`, never bold — so the numeric/technical layer has a quiet typewritten-ledger feel without resorting to a true monospace. **Palette — warm-earthy, muted, low-key (no gradient meshes, no neon):** - `#EDE7DB` — *unglazed paper-white*, the dominant negative-space field (warm, not cold white; the colour of a dried bisque test tile). - `#D8CCB6` — *kaolin dust*, a paler ground used for the lowest "Ash Pit" stratum and for hairline rules. - `#7A6A52` — *iron-slip brown*, primary text colour and annotation lines (the colour of brushed-on iron oxide before firing). - `#3B342B` — *fired bark*, near-black used sparingly for object names and the gauge bead. - `#9C5A3C` — *flame-blush terracotta*, the single accent — appears only on the chamber-mouth stratum and on the bead at 1280°, then never again as you descend (the colour literally cools out of the page). - `#5B6B5A` — *celadon ash*, a muted grey-green used only for the "Cool Shelf" stratum's annotation tags and the wood-ash deposit textures. No pure black, no pure white, no saturated hue except the one terracotta that fades from existence. Everything is dusted, matte, slightly chalky. ## Imagery and Motifs **The seven objects (one per stratum, descending the kiln):** 1. **Chamber Mouth — "Opus 9 / i":** a tall narrow vase that has *slumped* — leaned over in the flame and frozen mid-fall, one side scorched flame-blush terracotta, the other raw ash-grey. Rendered as a soft-edged duotone photographic study (or a hand-rendered SVG of the same), heavy **grain-overlay** (the underused 9% grain texture) like a photo developed on cheap paper. 2. **Upper Stack — "ii":** a bowl with a **clean crack running rim to foot**, the crack not hidden but the focal point — a hairline of pure shadow. The kintsugi gold is *deliberately absent* — wabi-sabi here means the break is left as a break. 3. **Mid Stack — "iii":** three small *tea-cups that fused together* when a shelf sagged — now one inseparable object, off-axis, awkward, kept. 4. **Mid Stack — "iv":** a plate warped into a gentle **flowing-curve** saddle shape — the underused 5% flowing-curves motif drives the page's only "soft" geometry; everything else is straight rules and grain. 5. **Cool Shelf — "v":** a lidded jar whose lid no longer fits — sits crooked, a 2mm gap of shadow all around, photographed from slightly above so the gap is the subject. 6. **Cool Shelf — "vi":** a test-tile row — five small clay tabs, each a different ash-deposit result, the only "grid" on the entire site and even it is hand-spaced unevenly. 7. **Floor & Ash Pit — "vii":** a single shard — the largest surviving fragment of the only pot that *exploded* in the firing. Named, dated, kept. The page ends here, at 60°, with the most broken thing treated with the most respect. **Recurring decorative grammar:** kiln-log **hairline pointer lines** (0.5px iron-slip brown) connecting each object to its margin annotation; faint **wood-ash drift textures** (low-opacity speckled SVG noise, celadon-ash tint) pooling at the bottom edge of the lower strata; the **vertical temperature gauge** as a structural spine; **pressed-paper grain** over the whole background at ~6% opacity. No icons. No illustrations of "pottery tools." No people. No hands. Just the survivors, on emptiness, cooling. ## Prompts for Implementation Build op9.rs as **one HTML page, one CSS file, one small ES module** — no framework, no build step, no canvas/WebGL needed. It is a slow scroll *down through a cooling kiln*. There is **no CTA, no pricing block, no stats grid, no testimonials, no email capture, no contact form, no FAQ, no logo wall, no newsletter signup, no cookie banner, no "shop" or "commission" button** — this is a ledger, not a storefront. **Narrative spine:** - The whole page is the **cooling curve of Opus 9**. Scroll progress is bound 1:1 to the temperature gauge on the right edge — `1280°C` at scroll 0, `60°C` at scroll end, eased so it lingers in the hot zone. The accent terracotta (`#9C5A3C`) is applied to the gauge bead and the first stratum at full strength, then `mix-blend` / opacity steps it toward iron-slip brown as you descend, so colour literally drains from the page as the kiln cools. - **Seven full-viewport strata**, each titled in `Spectral SC` small caps (CHAMBER MOUTH / UPPER STACK / MID STACK / MID STACK / COOL SHELF / COOL SHELF / FLOOR & ASH PIT) with its degree reading. Each holds **one ceramic object** placed on the asymmetric thirds line for that stratum (define seven slightly different offsets — never centered). - Object names in italic `Cormorant Garamond` ("Opus 9 — i" … "Opus 9 — vii"), the word *Opus* always italic even within an italic line (so it's double-italic, faintly broken-looking — intentional). - Each object gets a **firing-log paragraph** in `Spectral`: flat sentences — "Held at 1280°C for 11 hours. Flame path ran left of the bagwall. Leaned at hour 9; not righted. Kept." No marketing language anywhere. Describe the flaw and the survival in the same register. **Motion (favor the underused `scroll-triggered` family — 24% of corpus — over the saturated `parallax`/`cursor-follow`/`spring`/`magnetic` patterns):** - On entering each stratum's viewport, the object **fades up from 0 over a long 1100ms ease-out**, drifting 24px upward — slow, like sediment settling, never a bounce, never a spring overshoot. - The **hairline pointer line draws** itself from the object toward the margin annotation (`stroke-dashoffset` animation, ~800ms) once the stratum is ~40% in view; the small-caps annotation text fades in 200ms after the line completes. - The **temperature bead** on the right rule moves continuously with scroll (the one "live" element); each of the seven tick-marks gives a barely-perceptible 1px pulse as the bead passes it. - A **single page-load gesture**: the paper-grain background fades from `#3B342B` (kiln dark) to `#EDE7DB` (paper-white) over 1400ms — "opening the kiln door" — then never animates again. - **Reduce-motion**: all of the above collapse to instant; the gauge still tracks scroll statically. - No tilt-3D, no card-flip, no magnetic cursor, no parallax layers, no hover-lift, no ripple. **Texture & detail:** apply an inline SVG `feTurbulence` paper-grain over `body` at ~6% opacity; pool a denser celadon-ash speckle texture at the bottom 30% of the last two strata; all rules are exactly `0.5px` or `1px`, iron-slip brown, never grey-box borders; generous `clamp()` vertical padding (`8rem`–`18rem`) between strata so emptiness dominates each screen. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Wabi-sabi at its strict, unsentimental reading — flaws as subject, not "texture."** Most wabi-sabi-adjacent sites in the corpus mean "beige, rounded, calm, a linen photo." This site means *every object is broken, slumped, cracked, fused, or exploded, and that is the point* — the break is the focal element, kintsugi-gold deliberately withheld. The tone is a 4 a.m. firing log, not a lifestyle moodboard. 2. **Scroll position is a literal physical quantity — the kiln's cooling curve.** The right-edge temperature gauge binds scroll to °C (1280° → 60°), and the page's only accent colour physically drains away as the kiln cools. No other site here makes the scrollbar mean "temperature dropping." 3. **Negative space as the primary material, clay as the accent.** Seven full-viewport strata, one off-center object each, on vast paper-white emptiness — `ma` taken to a near-wasteful extreme, with the asymmetric thirds-line *drifting* every stratum so there's never a stable visual axis. The opposite of the corpus-dominant card-grid (90%) and full-bleed-photo (88%) layouts. 4. **Serif-revival type system in a corpus that is 94% monospace.** `Cormorant Garamond` + `Spectral` + `Spectral SC` give a damp-ledger, brushed-ink voice; the technical/numeric layer uses small-caps instead of the reflexive mono. 5. **No commerce surface at all.** A potter who fires once a year and sells nothing here — the page is an archive of survivors, ending on the most-broken object treated with the most respect. No shop, no class booking, no commission CTA, no headshot. **Chosen seed/style:** `wabi-sabi imperfect ceramic` — aesthetic: wabi-sabi · layout: ma-negative-space + asymmetric · typography: serif-revival · palette: warm-earthy / muted · patterns: scroll-triggered · imagery: paper-aged + grain-overlay · motifs: flowing-curves · tone: zen-contemplative. **Avoided overused patterns (per frequency analysis):** hand-drawn (96%), glassmorphism (80%), photography-led imagery (98%), card-grid (90%), full-bleed (88%), warm-gradient palette (95%), mono typography (94%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (81%), stagger (71%) — none used. Leaned instead into serif-revival (14%), ma-negative-space (15%), scroll-triggered (24%), grain-overlay (9%), flowing-curves (5%), zen-contemplative tone (12%), paper-aged (6%).