# Design Language for yome.day ## Aesthetics and Tone yome.day is a **wabi-sabi household almanac** — the word *yome* (嫁) is the warm, slightly old-fashioned word for "the wife," "the one who came into the house," and this site treats her not as a person to look at but as the *weather of a home*: the small repeated acts that make a day in a shared dwelling. The organizing conceit is the **七十二候 (shichijūni-kō)** — the seventy-two Japanese microseasons, each roughly five days long — re-imagined as a domestic almanac. Every microseason becomes a tiny entry: "the rice steam first rises," "the persimmon leaves go translucent," "she leaves the window open one finger's width." A *day* here is one card in a year-long ledger of ordinary tenderness. The mood is **zen-contemplative** but not cold or empty-gallery minimal — it is warm, lived-in, slightly worn. Think a 戸棚 (cupboard) of mismatched rice bowls; *kintsugi* gold filling a crack in a 抹茶 chawan; a *kakejiku* hanging scroll yellowed at the edges; the particular grey of dishwater light at 7am; a 日めくり (daily tear-off) calendar with one corner soft from a thumb. The reference points are Sōetsu Yanagi's *mingei* writings, Junichirō Tanizaki's *In Praise of Shadows*, the photography of Rinko Kawauchi (overexposed kitchen light, a hand, steam), and the deliberately imperfect ceramics of Kichizaemon Raku. Nothing is glossy. Everything has a tiny flaw that is the point. This is explicitly **not** a waifu site, a dating product, or a marriage-services landing page. No CTAs, no pricing, no "find your ___." It is a slow, almost wordless meditation rendered as paper, ink, glaze, and morning light. ## Layout Motifs and Structure The page is a single **editorial-flow** descent (only 5% in the archive) — a long quiet column that breathes, not a card-grid. It is shaped like an **opened kakejiku scroll laid flat and read top to bottom**, with three structural devices: 1. **The almanac column.** A narrow center measure (max ~62ch) of washi-colored paper floating on a darker tatami-grey field, with generous *ma* (negative space) above and below each entry. The paper has visibly **deckled (torn) edges** — an irregular SVG mask, never a clean rectangle — and a faint long shadow as if it were a real sheet resting on a low table. 2. **Seventy-two entries, four seasons.** The scroll is divided into 春夏秋冬 (spring/summer/autumn/winter), each a band of differently-tinted paper. Within a season, microseason entries alternate their inner alignment subtly — text pulled slightly left, then slightly right — so the eye drifts down a gentle zigzag, like reading a folded *orihon* book. Each entry is: a tiny vertical 候名 (microseason name set top-to-bottom in `writing-mode: vertical-rl` along the left gutter), a one-line observation in serif, and occasionally a single small ink-wash glyph (a leaf, a steam curl, a bowl). No more than that. 3. **The kintsugi seam.** Between major sections runs a thin, hand-drawn **gold crack** — an SVG path that animates as you scroll past it, drawing itself like molten gold filling a break, then settling. It is the only "loud" element on the page, and it appears maybe four times total. A thin floating **日めくり tab** (daily tear-off corner) sits top-right: it shows today's microseason name and, on hover, peels back a corner to reveal the next one. No conventional nav bar. Footer is a single line of small-caps text, like a colophon stamped on the back of a scroll. ## Typography and Palette **Typefaces (Google Fonts only):** - **Shippori Mincho** — the primary voice. A **serif-revival** Japanese *mincho* that also carries a graceful Latin set; it has the slightly brushed, slightly old-print quality of a 1960s book of haiku. Used for the observation lines (weight 400) and the vertical microseason names (weight 600, generous letter-spacing). - **EB Garamond** — for the handful of longer reading passages and the colophon; a warm old-style serif with watery contrast that sits comfortably beside Shippori Mincho's Latin glyphs. - **Zen Kaku Gothic New** — used sparingly and small: section labels (春 / 夏 / 秋 / 冬), the 日めくり tab, captions. A clean, quiet humanist sans that recedes. - All running text uses old-style figures and `text-rendering: optimizeLegibility`; line-height is generous (1.8) — the whole page should feel under-set, never crowded. **Palette — warm-earthy, low-saturation, like glazes and aged paper:** - `#F2EBDD` — *kinari* (unbleached washi) — the main paper. - `#E7DCC6` — *kohaku-iro* (faint amber) — spring/summer paper tint. - `#DCD0B8` — *sunad-iro* (sand) — autumn/winter paper tint, slightly more weathered. - `#3B362E` — *kurocha* (black-tea brown) — primary ink, never pure black. - `#7A7263` — *rikyū-nezumi* (tea-grey) — secondary text, captions, the gutter rules. - `#9C7B3E` — *kuchiba* (decayed-leaf gold-brown) — restrained accent for microseason names. - `#B98C2C` → `#E8C778` — the **kintsugi gold gradient**, used *only* on the animated seam strokes. - `#2A2820` — *kurogachairo* — the deep tatami field behind the floating paper. No bright colors anywhere. No pure white, no pure black. Saturation stays low so the gold seams read as precious by contrast. ## Imagery and Motifs **Primary mode: paper-aged texture + leaf-organic ink-wash glyphs** — almost no photography, almost no illustration in the usual sense. The "images" are: - **The washi grain itself** — a subtle fibrous noise/paper texture on every panel, with faint foxing spots near the deckled edges. CSS-generated (layered gradients + SVG `feTurbulence`), no heavy bitmaps. - **Sumi-e single glyphs** — inline SVG, one per occasional entry: a single persimmon leaf, a curl of rice steam, a half-seen bowl rim, a sparrow, a moth at a paper screen, a stem of *susuki* grass. Each is one or two confident brush strokes with a slightly dry-brush ragged edge, in *kurocha* ink at ~70% opacity. They are tiny — never decorative banners. - **The kintsugi seams** — gold SVG paths with a faint blur-halo, the only metallic element. - **The 日めくり corner** — a small skeuomorphic torn-paper triangle with a soft fold-shadow. **Recurring motifs (the almanac's quiet vocabulary):** - **The torn edge.** Nothing on this site has four straight sides. Paper is always deckled; the column itself is masked irregularly at top and bottom. - **Vertical text in the gutter.** Microseason names run top-to-bottom — the only thing that breaks the horizontal reading rhythm. - **Steam, light, hands.** The implied imagery of the prose: never a face, always the trace of presence — steam, an open window, slippers by a step, a kettle's note. - **The crack that is mended.** Kintsugi as the site's one bold gesture: breakage made luminous. - **Five-day rhythm.** Visual pacing is built in groups of (roughly) five entries — small caesuras every fifth entry, a deeper one every fifteenth (a 節気 / solar term). ## Prompts for Implementation Build as a **single static HTML document** — no framework, no build step beyond a Google Fonts link (Shippori Mincho, EB Garamond, Zen Kaku Gothic New) and one CSS file. Target ~70KB HTML+CSS+JS before fonts; the paper textures must be CSS/SVG-generated, not image files. Vanilla JS only. - **Native scroll, no hijacking.** Plain document scroll. Use one `IntersectionObserver` to (a) fade-in each microseason entry with a small upward drift and a gentle blur-to-focus, staggered ~80ms within a five-entry group, and (b) trigger the kintsugi seam `stroke-dashoffset` draw animation when a seam enters view — ~1.2s ease, drawing the gold crack as if it were being poured, then a brief settle (a tiny opacity pulse on the halo). `prefers-reduced-motion`: entries appear instantly, seams render already-drawn. - **The deckled paper edges** are SVG `clipPath`s with hand-tuned irregular point lists (a few per panel, reused), plus a soft `filter: drop-shadow`. Get the irregularity *subtle* — torn, not jagged. - **Vertical microseason names**: `writing-mode: vertical-rl; text-orientation: upright;` for the kana/kanji, pinned in the left gutter of each entry, with a hairline *rikyū-nezumi* rule beside them. - **The 日めくり tab** (top-right, position: fixed): on `:hover` / `:focus`, the corner peels — a CSS transform on a pseudo-element with a fold-shadow — revealing the *next* microseason's name. Clicking it smooth-scrolls to that entry. It also quietly updates: a tiny JS clock maps today's real date to the correct one of the 72 microseasons and highlights that entry on load (a faint gold underline, no jump). - **Texture & light**: a single very faint vignette over the whole page; a barely-there warm "morning light" radial that sits near the top of the column and fades as you scroll — as if the day's light is highest at the start. - **Tone of the copy** (sample content should still be real, in this voice): each entry is ONE line, present tense, no metaphor-stacking — "湯気、はじめて立つ — the steam rises for the first time, and she does not say anything." Bilingual where it helps; never explain the Japanese. The colophon footer reads like the back of a scroll: maker, year, a single seal-shaped SVG stamp in *kuchiba*. - **AVOID**: hero image with headline + button; any pricing/plans/stat-grid; card-grid of "features"; testimonials; glassmorphism panels; neon; cursor-follow blobs; counters; sticky CTA bars. If it would look at home on a SaaS landing page, it does not belong here. ## Uniqueness Notes Differentiators this design commits to (other CMassC sites should not duplicate these): 1. **The site IS the 七十二候 — a 72-microseason domestic almanac.** Structurally it's one long editorial-flow scroll of seventy-two one-line entries grouped into four paper-tinted seasons, with a live date-to-microseason mapping. No other site in the corpus is built as a Japanese microseason ledger, and editorial-flow (5%) is itself rare here. 2. **Kintsugi as the single bold gesture.** The only "loud" element is ~4 animated gold-crack SVG seams that draw themselves on scroll — breakage made luminous against an otherwise near-monochrome aged-paper page. This is a deliberate inversion of the typical "everything animates" approach: 99% stillness, 1% gold. 3. **No straight edges, vertical gutter text, no nav bar.** Every panel is SVG-deckled (torn washi); microseason names run `vertical-rl` in the left gutter; navigation is a single peeling 日めくり tear-off corner. The whole thing reads like an unrolled hanging scroll, not a webpage. 4. **"Wife" as the weather of a home, never a face.** The imagery is steam, light, an open window, slippers — trace of presence, never portraiture, never a "waifu," never romance-as-product. Distinct from renai.day's surreal walkable-country dreamscape and kanojo.love's frutiger-aero 2007-desktop nostalgia. Chosen seed/style: `aesthetic: wabi-sabi, layout: editorial-flow, typography: serif-revival, palette: warm-earthy, patterns: path-draw-svg, imagery: paper-aged, motifs: leaf-organic, tone: zen-contemplative` Avoided patterns from frequency analysis: hand-drawn (94%), glassmorphism (86%), photography (97%), card-grid (93%), full-bleed (84%), centered-as-default, cursor-follow (89%), parallax (87%), spring (83%), magnetic (76%), warm-but-gradient-heavy palettes (gradient 92%), mono typography (93%), pastoral-romantic tone default — replaced with editorial-flow, paper-aged CSS/SVG texture, path-draw-svg as the signature motion, and a zen-contemplative wabi-sabi register.