# Design Language for koakuma.quest ## Aesthetics and Tone koakuma.quest is **a sun-warmed shrine-fox shelf, told in wabi-sabi** — the imagined wooden tansu (chest of drawers) that a *koakuma* ("小悪魔," literally "little devil" — the affectionate Japanese word for a charming, faintly mischievous imp-girl) keeps by a south-facing paper window, where each pulled-open drawer reveals one small offering: a chipped sunset-glazed teacup, a folded omikuji fortune slip gone soft at the creases, a tiny isometric paper-craft of a torii gate, a pressed citrus leaf. The whole site is **that chest, photographed at golden hour**, every compartment a shallow tray of warm afternoon light. The seed pairing is deliberately contradictory and that contradiction *is* the design. **Wabi-sabi** — the Japanese aesthetic of imperfection, impermanence, weathered surfaces, asymmetry, and the quiet acceptance of incompleteness (侘び寂び) — is the surface treatment: nothing on this page is crisp-edged, nothing is perfectly aligned, every panel has a subtly worn corner, a faint kintsugi-gold seam where it was "broken and mended," a texture of handmade washi paper with visible fibers. But the **tone is optimistic-bright** — not melancholy. The koakuma is not mourning the chip in the teacup; she is *delighted* by it, the way a child is delighted by a scar with a good story. Wabi-sabi here is sunlit, not shadowed. The patina is from being *loved and used*, not abandoned. In the 290-design corpus, wabi-sabi appears in only ~3% of sites, and where it appears it is almost universally rendered cold, grey, monkish, contemplative-melancholy (zen-contemplative tone). koakuma.quest is the first to render wabi-sabi as **warm, playful, sunset-drenched, and a little impish** — kintsugi gold against terracotta, not slate against fog. There is no product. There is no service. The site is a single-screen tableau you can poke at: drawers that slide, fortune slips that flutter open, isometric paper-craft objects that gently morph between states when you hover. It is a *thing to play with on a slow afternoon*, like idly opening every drawer in a borrowed desk. ## Layout Motifs and Structure The layout is a **bento-box** — but specifically the *makie-lacquer bento-box* metaphor: a shallow rectangular lacquered tray subdivided into uneven compartments, the kind that holds a New Year's *osechi* meal where each food sits in its own irregular cell. The bento box appears in only ~13% of the corpus and is usually rendered as a tidy, equal-ish startup "feature grid." koakuma.quest's bento is deliberately **wabi-sabi-irregular**: no two compartments are the same size, the dividing walls are hand-drawn (1.5px strokes with slight wobble, not pixel-straight), and the whole tray is rotated a barely-perceptible -0.7° so it reads as *placed by hand, not snapped to a grid*. **Grid spec.** A 12-column × 9-row CSS grid inside a 1440 × 920 reference frame, 20px gutters, 28px outer margin. Eight compartments, sized via an explicit `grid-template-areas` map — sizes: 4×3, 2×2, 3×4, 2×3, 5×2, 3×2, 2×4, 4×2 — fitted like puzzle pieces with one intentional *negative-space cell* (a 1×2 gap left empty, holding only a single drifting dust mote in a shaft of light: this is the *ma*, the meaningful emptiness). On desktop (≥1180w) the entire bento fills the viewport with no scroll — you see the whole chest at once. Below 1180w the eight compartments re-stack into a single vertical column in narrative reading order (the canonical reading is still the desktop tableau). **The drawer mechanic.** Three of the eight compartments are *closed drawers* on first paint — you see only a small carved wooden pull-handle (an isometric SVG knob) and the front face of the drawer with its washi-paper label. Clicking pulls the drawer "out toward you" (a 3D translate + slight rotate-X, ~520ms, with a soft wooden *thunk* easing curve — overshoots ~8px then settles). Inside: the offering. Only one drawer can be open at a time; opening a second gently slides the first closed. **Reading order (top-left → spiraling clockwise inward, like eating osechi):** - `compartment 01 — 入口 / THE THRESHOLD` (4×3, top-left): the masthead. "koakuma.quest" set large in the display face, with the gloss "*little devil — the one who keeps this shelf*" underneath in small humanist italic. A single isometric paper-craft torii gate sits in the corner, slightly tipped. - `compartment 02 — おみくじ / THE FORTUNE` (2×2, top-center): a closed drawer. Inside: a folded omikuji (paper fortune slip). Click and it flutters open to reveal one of ~7 randomly-chosen optimistic micro-fortunes ("today the chipped cup pours just as well," "a small detour, a better view"). - `compartment 03 — 茶器 / THE TEA THINGS` (3×4, left-center, the tallest): an isometric still-life of a warm-glazed teapot and two unmatched cups, one visibly chipped with a thin kintsugi-gold mended line. Hovering morphs the steam from one curl-shape to another. This is the visual anchor of the page. - `compartment 04 — 余白 / THE EMPTINESS` (1×2, the *ma* cell): empty. Just a faint warm-amber light-shaft and one slow dust mote. Hovering it does nothing — and that is the point. - `compartment 05 — 落書き / THE MARGIN NOTES` (5×2, mid-right): a horizontal strip of the koakuma's handwriting — three short lines about why the imperfect things are her favorites. Set in a handwriting face. The last line trails off mid-sentence (wabi-sabi incompleteness, on purpose). - `compartment 06 — 紙細工 / THE PAPER CRAFT` (3×2, lower-center): a small shelf of isometric paper-folded objects — a crane, a tiny house, a citrus, a fox-mask — each rendered in flat sunset tones. Hover any one and it *unfolds-and-refolds* into a different object (morph: a true SVG path-shape interpolation, ~600ms). - `compartment 07 — 押し葉 / THE PRESSED LEAF` (2×4, far-right, tall): a closed drawer. Inside: a single pressed citrus leaf on washi, slightly translucent, with the light coming through its veins. - `compartment 08 — 灯り / THE LAST LIGHT` (4×2, bottom): a closed drawer. Inside: a tiny isometric paper lantern. Click and it "lights" — a warm radial glow blooms and very gently pulses, and the whole bento tray's ambient light warms by ~6% (a subtle global filter shift toward amber). This is the closing beat. ## Typography and Palette **Type system — Google Fonts only.** - **`Quicksand`** (weights 400, 500, 600, 700) — the **frutiger-clean** display and UI face. Quicksand is a geometric-rounded sans with soft terminals and friendly circular bowls — the closest thing on Google Fonts to the clean, optimistic, slightly-bubbly "Frutiger Aero / late-2000s software" warmth the seed asks for, without tipping into childishness. Used for "koakuma.quest" at 56px (weight 600, letter-spacing -0.01em), all compartment labels (the 入口 / THE THRESHOLD style headers, weight 500, 13px, letter-spacing 0.14em, uppercase on the Latin), and all drawer-front labels. Frutiger-clean typography appears in only ~5% of the corpus, and almost never paired with a wabi-sabi/Japanese context — this collision (clean rounded software-sans on weathered washi paper) is one of the site's signatures. - **`Zen Maru Gothic`** (weights 400, 500) — the Japanese companion face and the body face. Zen Maru Gothic is a Google-fonts rounded gothic that carries Hangul/Kana/Kanji and Latin in one continuous warm rounded voice — it's what makes the bilingual labels (おみくじ / THE FORTUNE) sit on the same baseline without a typographic seam. Body copy: 17px, weight 400, line-height 1.7, color `#3B2C24`. - **`Caveat`** (weights 400, 600) — the koakuma's **handwriting**, used *only* in compartment 05 (the margin notes) and on the omikuji fortune slips. Caveat is a felt-tip-marker Google handwriting face; here it's set at 22px with a hand-tilt of -1.5° applied per-line via nth-child rotation so the three lines don't sit parallel. This is the one place the "hand-drawn" warmth of wabi-sabi becomes literal. Type rules: no pure black anywhere — darkest ink is `#3B2C24` (a warm dark-roast brown). Headers never use heavy weights at large sizes — wabi-sabi resists boldness; the display sits at weight 600, never 700+. Line-lengths are kept short (≤52ch) — these are *notes in drawers*, not articles. **Palette — sunset-warm (only ~2% of corpus uses this; almost always for tropical/beach themes — never for a Japanese-craft context).** - `#FBF3E4` — **Washi Cream**, the paper ground for the whole page and every compartment interior (with a subtle SVG-fiber noise overlay at ~3% opacity so it reads as handmade paper, not flat #fff-adjacent). - `#F2D8B0` — **Late Afternoon**, the bento-tray's lacquer face / the warm secondary fill behind compartment labels. - `#E89B6C` — **Persimmon Glow**, the primary sunset accent — the glaze on the teapot, the omikuji slip's edge, link underlines. - `#D5663E` — **Burnt Tangerine**, the deeper sunset tone — hover states, the carved drawer-pull handles, the torii gate. - `#C9A24B` — **Kintsugi Gold**, used *exclusively* for the mended seams: the gold line on the chipped cup, the hairline "repair" cracks running across two of the compartment walls, the lantern's lit glow core. This color never appears anywhere else — it is reserved for "broken and made more beautiful." - `#7BA98F` — **Faded Sage**, the single cool note — the pressed citrus leaf, the paper crane, just enough green to keep the warmth from cloying. - `#3B2C24` — **Dark Roast**, the only "ink" color — all body text, all hand strokes, all line work. Background gradient (very subtle): top of page `#FBF3E4` → bottom `#F7E9D0`, as if the light is pooling toward the bottom drawers — a ~4% luminance drift, no hard banding. ## Imagery and Motifs **Imagery system: isometric-icons, hand-rendered as SVG — no photography, no 3D-render files, no raster, no icon font.** Isometric imagery sits at ~3% of the corpus and is overwhelmingly used for "technical docs / SaaS diagram" purposes (servers, dashboards, cloud architecture). koakuma.quest uses isometric projection for the *opposite* register: **small, warm, handmade domestic objects** — a teapot, a paper crane, a lantern, a torii, a fox-mask, a citrus — each drawn in true 30° isometric, but with **wabi-sabi corrections**: edges have a 0.5px hand-wobble, fills are flat sunset-tones (no gradients on the objects themselves, only flat color planes — 3 tones per object: light face, mid face, shadow face), and *every object has one visible imperfection* (the cup's chip, the crane's slightly-uneven wing, the lantern's faintly bowed paper panel). **The cultural motifs** — and this is the "motifs: cultural" seed, used in only ~4% of the corpus — are drawn specifically from **Japanese small-shrine and tansu-drawer culture**, treated with affection and lightness rather than solemnity: - **The torii gate** (compartment 01) — rendered tiny and slightly tipped, paper-craft scale. - **The omikuji fortune slip** (compartment 02) — the folded paper fortune you draw at a shrine; here every fortune is gently optimistic. - **Kintsugi** (the gold-seam motif, threaded across the whole layout) — the art of mending broken pottery with gold lacquer so the break becomes the most beautiful part. This is the *thesis motif*: imperfection, made luminous. - **Daruma-eye dot** — the single dust mote in the *ma* cell is shaped like a daruma's painted-in eye: a tiny round mark that means "a wish, in progress." - **The fox-mask** (kitsune-men, in the paper-craft shelf) — the only nod to the "koakuma" / mischief theme made literal: a paper folded fox-mask, the trickster's face, sitting quietly among the crane and the house. - **Washi paper grain** — the substrate of everything; visible long fibers, deckled (torn-feathery) edges on the compartment dividers rather than clean cuts. - **Furoshiki knot** — the page's only "navigation" affordance (a small re-shuffle/re-roll control) is drawn as a tied cloth-knot in the bottom margin. Decorative texture rules: every compartment corner is *very slightly* dog-eared (one corner per panel, never the same corner twice). Two of the eight compartment walls have a hairline kintsugi-gold "crack" running through them — these are *load-bearing decoration*: they make the bento read as a real, used, mended object. No drop-shadows in the conventional sense; instead, soft warm-amber *ambient occlusion* pools where compartment walls meet (a faint `#D5663E` at ~8% opacity), as if afternoon light is raking across a real tray. ## Prompts for Implementation Build koakuma.quest as **one HTML file, one CSS file, one ES module** — no framework, no router, no build step, no fetch, no service worker. Target under 90KB uncompressed. Everything is inline SVG and CSS; the only "interactivity" is local DOM state (which drawer is open, which fortune was drawn, ambient warmth level). **There is NO call-to-action, NO pricing block, NO stat-grid, NO testimonial section, NO contact form, NO email capture, NO logo wall, NO newsletter, NO cookie banner, NO chatbot, NO FAQ accordion, NO feature-comparison table, NO "sign up," NO "get started."** The page is a chest of drawers you open on a slow afternoon. It does not want anything from you. **Page event timeline (first paint → steady state):** - **0.00s — washi ground.** The Washi Cream background renders with its fiber-noise overlay. Nothing else. One held beat. - **0.20s — the tray arrives.** The bento tray (the lacquer frame + the eight compartment walls) fades up over 420ms with a faint scale-from-0.985, settling into its -0.7° rotation. The hand-wobble strokes of the dividers draw themselves in via `path-draw-svg` (each wall ~280ms, staggered ~60ms apart, top-left to bottom-right — the *stagger* pattern). The two kintsugi-gold cracks draw last and slowest (~500ms each), in gold, like the mend being applied. - **0.95s — the offerings settle.** The contents of the four *open* compartments (masthead, the tea still-life, the margin notes, the paper-craft shelf) fade + rise 12px into place, staggered. The closed drawers (02, 07, 08) are already shut — only their pull-handles and washi labels are visible. - **1.4s — first life.** The steam above the teapot begins its slow morph loop (a continuous SVG path interpolation between two curl-shapes, ~5s cycle, eased, never sharp). The single dust mote in the *ma* cell begins its slow vertical drift in the light-shaft. The page is now "alive" but quiet. - **idle — ambient.** Steam morphs. Dust drifts. The lacquer face has an extremely slow (~20s) warm-light sweep, a soft `#F2D8B0`→`#FBF3E4` highlight crossing the tray, like the sun moving. Nothing demands attention. **Interactions:** - **Opening a drawer (02, 07, 08).** Click the drawer face → it translates toward the viewer (translateZ + a slight rotateX, perspective on the parent) over ~520ms with an overshoot-and-settle easing (cubic-bezier that goes past 1 then back). The contents inside fade up as the drawer reaches full extension. Opening any drawer gently slides any other open drawer closed first (~380ms). Subtle wooden-thunk visual: the drawer "lands" with an 8px overshoot then settles 2px. - **Drawing a fortune (compartment 02 open).** Inside the open drawer is a folded omikuji slip. Click it → it unfolds in two stages (fold-down, then fold-out, ~440ms total, the paper visibly "creasing" via clip-path) revealing one of ~7 hardcoded optimistic micro-fortunes in Caveat handwriting. A small "draw again" cloth-knot control re-folds and re-draws (never repeating the previous one). - **Hovering a paper-craft object (compartment 06).** Each isometric paper object morphs into a *different* object on hover — a true SVG `` `d`-attribute interpolation (crane → house → citrus → fox-mask → crane), ~600ms, eased, the "fold lines" animating as the silhouette changes. On mouse-out it morphs back. This is the *morph* pattern (used in only ~11% of the corpus) doing real, literal work: paper, folding. - **Hovering the teapot still-life (compartment 03).** The steam morph-loop briefly accelerates and the kintsugi-gold seam on the chipped cup gives a single slow glint (a moving highlight along the gold path, ~900ms, once). - **Lighting the lantern (compartment 08 open).** Click the isometric paper lantern → a warm radial glow (`#C9A24B` core → `#E89B6C` falloff) blooms over ~700ms and then settles into a very gentle ~3s breathing pulse. Simultaneously, a global CSS filter on the whole bento tray nudges ~6% warmer/amber (`hue-rotate` + `sepia` micro-amounts) — the whole page "catches the last light." This is the closing emotional beat; once lit, it stays lit. - **The *ma* cell (compartment 04).** Hovering it does *nothing*. No glow, no tooltip, no morph. A tiny one-line caption appears in the lower margin only when hovered: "*(this one is on purpose)*." That restraint is the wabi-sabi statement. - **Cursor.** A barely-there cursor-follow: a soft ~14px warm-amber blur (`#E89B6C` at ~10%) trailing the pointer with heavy spring lag (~0.12 stiffness) — like dust catching light around your hand. Disabled on touch. **Motion philosophy:** every easing curve is *soft* — no linear, no sharp ease-out, nothing snappy. Wabi-sabi motion settles like fabric, drifts like steam, overshoots gently like a real wooden drawer. Durations bias long (400–700ms for interactions, multi-second for ambient loops). `prefers-reduced-motion`: kill the steam morph, the dust drift, the light-sweep, and the cursor trail; keep drawer-open as an instant state change; keep the lantern glow as a static lit state. **Storytelling spine:** the page reads as *opening every drawer in a borrowed chest at golden hour and finding that the previous owner — the koakuma — kept only chipped, faded, half-finished, mended things, because those were the ones she loved.* The torii at the start is the threshold; the lantern at the end is the light you leave on. Build it so a visitor who opens all three drawers and lights the lantern feels they've been let in on a small, warm secret — not sold anything. ## Uniqueness Notes Differentiators from the other 290 designs in this codebase, and from the seed's defaults: 1. **Warm, sunlit, impish wabi-sabi — not cold contemplative wabi-sabi.** Wabi-sabi appears in ~3% of the corpus and is, without exception, rendered grey/slate/fog with a zen-contemplative or melancholy tone. koakuma.quest is the first to render it in sunset-warm (`#E89B6C`, `#D5663E`) with an optimistic-bright tone and a literal trickster motif (the fox-mask) — wabi-sabi as *delight in the chipped cup*, not mourning. The patina here is from love, not abandonment. 2. **Isometric imagery used anti-technically.** Isometric-icons (~3% of corpus) are otherwise universally deployed for SaaS/docs/technical-diagram purposes (servers, clouds, dashboards). This site uses true 30° isometric projection exclusively for *handmade domestic Japanese objects* (teapot, paper crane, lantern, torii, citrus), each with deliberate hand-wobble and a built-in flaw — isometric precision *applied to imperfect things*, which is itself the wabi-sabi joke. 3. **The bento-box rendered as a literal lacquer osechi tray, hand-placed and irregular.** Bento-box layout (~13% of corpus) is normally a tidy equal-cell "feature grid." Here the eight compartments are deliberately mismatched in size, the dividing walls are hand-drawn with stroke-wobble, the whole tray is rotated -0.7°, two walls carry kintsugi-gold "repair cracks," and one cell is intentionally *empty* (the *ma*). The bento metaphor is fully committed-to as a physical object, not borrowed as a grid convenience. 4. **Kintsugi gold as a strictly-reserved color.** `#C9A24B` (Kintsugi Gold) appears *only* on mended seams — the chipped cup, two compartment-wall cracks, the lit lantern core — and nowhere else. A single color in the palette doing one symbolic job: "broken and made more beautiful." This thesis-color discipline is unusual in the corpus. 5. **Frutiger-clean rounded software-sans (Quicksand) collided with handmade washi paper.** Frutiger-clean typography (~5% of corpus) never appears in a Japanese-craft / wabi-sabi context anywhere in the registry. The deliberate friction between a clean, optimistic, late-2000s-software rounded sans and a weathered, fiber-grained paper substrate is a primary signature of the site. 6. **An interface that wants nothing.** No CTA, no capture, no pricing, no stats, no testimonials — explicitly avoided per the implementation brief, and consistent with the corpus's underused "object you play with" register. The whole page is a chest of drawers; the only "conversion" is lighting a paper lantern, which gives the visitor nothing but a warmer screen. **Chosen seed:** *aesthetic: wabi-sabi, layout: bento-box, typography: frutiger-clean, palette: sunset-warm, patterns: morph, imagery: isometric-icons, motifs: cultural, tone: optimistic-bright.* **Avoided per frequency analysis:** hand-drawn aesthetic (96% — present only as a faint wobble-stroke detail, never the dominant register), glassmorphism (71% — none), photography imagery (98% — none, all inline SVG), card-grid (88% — replaced by an irregular hand-placed bento), centered layout (86% — the tray is asymmetric and off-axis), mono typography (94% — none; Quicksand + Zen Maru Gothic + Caveat), parallax / cursor-follow / spring / magnetic as the headline patterns (96/88/86/82% — only a heavily-damped dust-mote cursor trail survives; the headline pattern is *morph*, at 11%), warm+gradient palettes used as generic crowd-pleasers (98/97% — here the warmth is specifically sunset-persimmon-and-kintsugi, with one disciplined cool sage note, and gradients are limited to a ~4% luminance pooling, never decorative mesh).