# Design Language for miris.studio ## Aesthetics and Tone miris.studio is a **wabi-sabi imperfect-ceramic atelier** — the digital equivalent of walking into a small pottery workshop at the end of the day: the wheel still spinning down, a film of slip drying on someone's forearm, a windowsill crowded with test tiles glazed in forty near-identical celadons, none of them "right," all of them kept. The brand reads "miris" as a kiln name — a small wood-fired anagama somewhere damp and quiet — and the studio's only product is *attention*: the patience to fire something, crack it, mend it with lacquer and gold, and call the scar the best part. The tone is **zen-contemplative crossed with grounded-earthy** — never precious, never minimalist-as-a-flex. This is the warmth of unglazed terracotta in afternoon light, not the chill of a gallery white cube. Nothing on this site is centered. Nothing is symmetrical. Edges are deckled, baselines drift like a hand-thrown rim, and the single most important visual idea is **kintsugi**: every major seam in the layout is a visible repaired crack, traced in a thin vein of warm gold leaf, because the studio believes the join is where the meaning lives. The mood word is *settled* — like a pot that has found which way it wants to lean. ## Layout Motifs and Structure The page is an **organic-flow** composition — explicitly NOT a card-grid, NOT centered, NOT full-bleed-hero-then-stats. Imagine a long ceramicist's worktable photographed from above and unrolled into a single vertical scroll of roughly 540vh. Content sits on an invisible **asymmetric two-track armature**: a wide "throwing track" occupying the left 62% and a narrow "drying-shelf track" on the right 30%, with an 8% raw-clay margin between them — but the two tracks trade dominance at every section so the eye is always pulled diagonally, never down a column. Each section is a **slab**: a slightly irregular rounded rectangle (border-radius written as four different values, e.g. `28px 64px 36px 80px / 56px 32px 72px 40px`) with a faint hand-pressed thumb-divot shadow on one corner. Between every two slabs runs the **kintsugi seam** — a full-width SVG path that looks like a fired crack, drawn with `path-draw-svg` as you scroll into it, filled with a 2px-to-5px tapering gold stroke plus three or four tiny gold "puddle" nodes where the lacquer pooled. Sections overlap by 40–90px so the seam genuinely bridges two slabs the way real kintsugi bridges two shards. Type blocks are set ragged on BOTH edges (no justification, no flush-left dogma), and headlines hang slightly into the margin like glaze that ran past the foot ring. On mobile the two tracks collapse to one, but the slabs alternate a 4–7° "stacked in the kiln" lean, and the kintsugi seams get *longer* and more wandering because there's more vertical room for the crack to travel. ## Typography and Palette **Type — Google Fonts only, three families, no mono anywhere (deliberately bucking the 94% mono trend):** - **Fraunces** (variable, opsz 9–144, "soft" SOFT axis dialed up, WONK axis on for headings) — the display and headline face. Its high optical-size contrast and wonky ball terminals read like a brush-loaded character drawn once and never corrected. Used for the wordmark `miris`, all section titles, and the large pull-quotes from the (fictional) studio notebook. Headlines are set in a warm near-black, tracking slightly loose, often with one word in italic where the "wonk" really shows. - **Newsreader** (variable, italic available) — the body and long-form face. A literary, slightly inky transitional serif with a calm rhythm; it's the "kiln log" voice. Set at 20–22px, line-height ~1.7, measure ~62ch, color a soft sepia-ink rather than pure black. - **Cardo** — the small-print / caption / annotation face: test-tile labels, glaze recipe fragments ("ash 40 / feldspar 35 / silica 25"), figure numbers, the footer colophon. Tiny, letter-spaced, in a faded clay tone, sometimes rotated a couple degrees like a sticker on a jar. **Palette — warm-earthy, low-contrast, unglazed:** - `#EAE0D2` — **Raw Slip** (primary background; the color of dried porcelain slip, slightly warm and dusty) - `#D8C7AE` — **Bisque** (secondary surface for slabs that sit "behind"; a touch deeper, like unglazed first-firing) - `#3B332B` — **Iron Glaze** (primary text; a brown-black, the color of high-iron tenmoku, never `#000`) - `#8A6F4E` — **Slip-Ink** (body text and quiet annotations; a soft umber) - `#C97B4A` — **Terracotta Foot** (the warm accent; exposed clay at the foot ring of a pot — used sparingly for links, the wordmark dot, the kiln-log datestamps) - `#B8884B` → `#E8C77A` — **Kintsugi Gold** (a two-stop gradient used ONLY in the repaired seams, the underline-draw on hover, and the tiny lacquer-puddle nodes; never a flat fill, always slightly metallic-feeling via a soft inner highlight) - `#7C8A6E` — **Test-Tile Celadon** (a dusty sage; the one cool note, used for a single recurring decorative band of "glaze sample swatches" and nowhere else) Grain: a faint `noise-texture` / `grain-overlay` at ~3–4% opacity over the whole page, the way clay dust settles on everything in a workshop. No pure whites, no neon, no glass. ## Imagery and Motifs - **Kintsugi cracks** as the structural motif — the gold-veined seams between slabs are the brand. They should feel hand-routed: variable width, slight wobble, occasional hairline branch. - **Test tiles**: a horizontal `horizontal-scroll`-ish ribbon (subtle, drag-or-scroll) of ~30 small ceramic swatch tiles, each a flat rounded square in a slightly different warm/celadon tone with a tiny Cardo recipe label and a punched "hang hole" at the top. This is the closest thing to a "gallery" the site has — it's a glaze library, not a portfolio grid. - **The wheel**: in the opening slab, a faint concentric set of rings (like the spiral left on a thrown pot's base / the chatter of a trimming tool) sits behind the wordmark and rotates *extremely* slowly — one full turn per ~6 minutes — never calling attention to itself. - **Thumbprints & tool marks**: small SVG accents — a wire-cut S-curve, a rib-tool arc, an actual thumb-divot shadow on slab corners — scattered as `floating-elements`, low-opacity, organic. - **Drying shelf**: the narrow right track is styled like a wooden plank shelf — a single hairline woodgrain texture, the occasional small "pot" silhouette (just an outline) parked on it as a section marker. - **Photography is allowed but only as duotone clay-toned macro** — close, soft-focus shots of glaze pooling, a cracked rim, slip drying — bled into the Bisque tone so they read as texture, never as hero stock photography. Use sparingly; line and texture do most of the work. - NO icons-as-UI, no glassmorphic cards, no gradient-mesh blobs. ## Prompts for Implementation Build miris.studio as **one long, single HTML document** — no SPA, no router, no framework. One vertical scroll, ~540vh desktop, ~720vh mobile. The whole thing is a narrated walk through one day in a ceramics studio; copy is in the voice of a kiln log (dated entries, terse, observational — "fired overnight to cone 10, slow cool, opened at noon, three survived"). Every section is a `
`; every gap between slabs contains a `` with a hand-drawn crack path. - **Open** on Raw Slip. The slow-turning wheel rings fade in behind the `miris` wordmark (Fraunces, the `i`-dot replaced by a small Terracotta Foot circle). A single line of Newsreader italic types in (`typewriter-effect`, slow, with a real cursor that's a tiny brush tip): the studio's one-sentence ethos about the join being the meaning. As you begin to scroll, the first kintsugi seam draws itself downward with `path-draw-svg` and `scroll-triggered` timing — gold filling the crack as if poured. - **Scroll behaviour**: `parallax` between the two tracks (they move at slightly different rates so the diagonal pull is constant). Slabs `fade-reveal` + a gentle `spring` settle as if set down on a table — never slide in from offscreen edges; they should appear *placed*. Stagger child elements within a slab so the recipe labels, the headline, the body, and the tool-mark accents land a beat apart. - **Hover**: links get an `underline-draw` in Kintsugi Gold that wanders slightly (not a straight line — a 3-node hand path). Test tiles `tilt-3d` very subtly toward the cursor and lift a few px (`hover-lift`), revealing their Cardo recipe on the back via a slow `card-flip`. The wordmark, on hover, shows a faint hairline gold crack tracing across it — repaired, not broken. - **The test-tile ribbon**: one section is the glaze library — a draggable/scrollable horizontal strip of ~30 swatch tiles. No prices, no "buy," no CTA — each tile just murmurs its recipe. Inertia on the drag, like spinning a lazy susan of jars. - **Kintsugi interaction (the centerpiece)**: somewhere mid-page, a slab is visibly "cracked" — split into two shards with a jagged gap. As the user scrolls through it (or on a gentle click), the gap fills with flowing Kintsugi Gold (`path-draw-svg` + a soft `morph` of the puddle nodes), the two shards `spring` together, and a Cardo caption fades up: the date it was mended. This should be the emotional peak — quiet, not flashy. - **Cursor**: a faint `cursor-follow` smudge — a soft, low-opacity warm-clay blur that trails the pointer like dust disturbed in light. Never a custom dot, never a ring. - **Close**: the final slab leans furthest, the last kintsugi seam runs off the bottom edge unfinished (the next firing hasn't happened yet), and the colophon sits in Cardo, rotated 2°, on the wooden drying-shelf plank. No newsletter box, no big CTA, no stats. Just a date and a kiln temperature. - **Strictly AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, hero-with-three-feature-cards, centered symmetrical sections, glassmorphism, mono fonts, neon, pure black/white, gradient-mesh hero blobs, hand-drawn-doodle clip art. - `prefers-reduced-motion`: the wheel stops, the seams appear already-drawn (gold already poured), tilts and parallax disabled — but the wabi-sabi asymmetry and gold seams remain, because those are structure, not motion. ## Uniqueness Notes Differentiators from the other designs in the registry, and from the seed defaults: 1. **Kintsugi as load-bearing layout, not a metaphor in copy.** The repaired-crack seam isn't decoration sprinkled on top — it is literally how sections connect, drawn per-scroll, and there's a dedicated interaction where a broken slab is mended in gold as the page's emotional climax. No other registry design treats "the join" as the structural primitive. 2. **Zero mono typography in a 94%-mono field, and zero hand-drawn-doodle imagery in a 96%-hand-drawn field.** This is a serif-only stack (Fraunces / Newsreader / Cardo) with literary "kiln log" prose — committing hard to the *opposite* of both dominant trends rather than blending them. 3. **No centered, no full-bleed-hero, no card-grid** — three of the top-four most-overused layout patterns (centered 86%, full-bleed 89%, card-grid 88%) are all explicitly forbidden. The composition is an asymmetric two-track worktable with ragged-on-both-edges type and 4–7° kiln-lean stacking on mobile. 4. **Anti-commerce by design**: the "gallery" is a glaze test-tile library that quotes recipes, not products; the "footer" is a kiln temperature and a date. No CTA, no pricing, no stat counters anywhere. 5. **Wabi-sabi rendered warm and dusty, not the usual stark/minimalist read** — unglazed terracotta and iron-glaze brown-black under a 3% clay-dust grain, with celadon as the single restrained cool note. Underused palette territory (warm-earthy + a true brown-black instead of `#000`). Chosen seed/style: **wabi-sabi imperfect ceramic** (`wabi-sabi` aesthetic — 7% in registry; `organic-flow` layout; serif-only / `serif-revival` + `garamond-classic`-adjacent typography; `warm-earthy` palette; `path-draw-svg` + `spring` + `fade-reveal` patterns; `paper-aged` / `noise-texture` imagery; `nature` / `crystalline`-via-cracks motifs; `zen-contemplative` + `grounded-earthy` tone). Avoided overused patterns per frequency analysis: hand-drawn (96%), glassmorphism (75%), photography-as-hero (98%), card-grid (88%), full-bleed (89%), centered (86%), mono typography (94%), warm-gradient default (96% — kept warm but low-contrast and ungradient except the gold seams), cursor-follow-dot (89% — softened to a dust smudge).