# Design Language for reiwa.day ## Aesthetics and Tone reiwa.day is **a single day in the Reiwa era, held in two hands like a cracked rice bowl** — a wabi-sabi koyomi (Japanese day-almanac) where the date is not announced on a banner but discovered the way you discover the weather: by looking out a paper window. The era name 令和 — "beautiful harmony," drawn from the *Man'yōshū* poem about plum blossoms in the early spring breeze — is the emotional spine. The aesthetic is **wabi-sabi imperfect ceramic**: nothing is glossy, nothing is centered-perfect, nothing repeats exactly. Every surface looks kiln-fired — there are glaze pools, hairline crazing, a thumbprint in the clay where the potter held it. The tone is **zen-contemplative**, unhurried, almost mournful in its tenderness: a day is precious *because* it cracks. Reference touchstones: the raw-edged tea bowls of a Hagi-yaki workshop; the worn margins of an old *Jingūkan* almanac; Andrew Wyeth's dry-brush light on a plaster wall; the way kintsugi gold seams *celebrate* the break rather than hide it. There is no neon, no gradient mesh, no glassmorphic card. The only "shine" permitted is a thin vein of gold (urushi-kin) running through a fracture. The page should feel **made by hand, fired once, and never reproducible** — load it twice and the crazing pattern is subtly different, because the day is different. This is emphatically **not** a tech/era-info dashboard. It is a meditation surface. The visitor leaves having *sat with* today's date the way you sit with a single bowl. ## Layout Motifs and Structure The composition uses **ma (negative-space) layout** crossed with a slow **immersive vertical scroll** — the page is a hand-scroll (*emakimono*) unrolled top to bottom, but 70% of every screen is deliberately empty plaster-white. Content is never centered; it sits **off-axis on a 5:8 kintsugi seam** — an irregular hand-drawn gold crack runs diagonally down the entire page, and every text block, every numeral, every small illustration *hangs from or leans against that seam*. The crack is the only structural grid. Nothing aligns to a rectangle. Vertical movement (top → bottom, the unrolling of the scroll): 1. **The Bowl.** Full-bleed plaster void. Low on the screen, off to the left, a single large hand-thrown ceramic vessel rendered in SVG — visibly asymmetric, one lip lower than the other. Inside it, the only thing on screen: 令和 brushed huge, and beneath it today's day-count ("Day 2,323 of Reiwa," etc.) in small mono. The kintsugi seam enters the frame from the bowl's crack. 2. **The Window.** The seam carries the eye down to a *shoji* paper-window panel — a warm rectangle of light against the plaster — through which a single seasonal sign is visible: the current *sekki* (one of the 24 Japanese micro-seasons) and its 72-*kō* sub-phrase ("Plum blossoms begin to bloom," "First peach blossoms," "Wheat ripens and is gathered"). Text leans against the window's wooden mullion, never inside a card. 3. **The Almanac Margin.** A long, sparse vertical strip — like the worn outer edge of an old paper almanac — listing, in faint vertical *tategaki* (top-to-bottom) text, the day's *rokuyō* (taian / butsumetsu / etc.), the moon phase as a thin ink crescent, and the era's age in years. Massive whitespace between each line; you scroll a long way for each one. 4. **The Crack.** The kintsugi seam reaches its widest here — the page literally "breaks": the plaster background splits, and through the gap you see the *Man'yōshū* plum-blossom verse that gave Reiwa its name, set in vertical brush calligraphy, gold-leafed along the fracture edge. 5. **The Glaze Pool.** Bottom of the scroll. The void darkens slightly to a pooled-glaze grey-green at the very base, where a tiny line reads "—and tomorrow, another bowl." No footer links, no nav, no signup. The scroll simply ends, like a hand-scroll runs out of paper. Minimal navigation: there is no menu. The seam *is* the journey. ## Typography and Palette **Fonts (Google Fonts only — three voices: a brush, a chisel, and a whisper):** - **Display brush — *Yuji Syuku*** (Google Fonts, Japanese serif/brush). Used for 令和, the *sekki* names, and the *Man'yōshū* verse. Yuji Syuku has the slightly ragged, ink-starved stroke endings of a real *fude* brush running dry — perfect for wabi-sabi imperfection. Set enormous (clamp 18vw–32vw for 令和), tracking loose, occasionally rotated 1–3° off-true. - **Editorial Latin serif — *Cormorant Garamond*** (Light 300 / Italic). Used for English glosses, the day-count subtitle, and the closing line. Its high-contrast hairlines look like they were *engraved into damp clay* and feel hand-cut, never machined. Italic for the poem translation. - **Whisper mono — *Major Mono Display*** (or fall back to **JetBrains Mono** at 200 weight if Major Mono is too decorative for body) — used ONLY for the day-numbers, the *rokuyō* labels, moon-phase percentages, and era-year count. Tiny, all-caps/spaced, the cold ledger voice against all that warm clay. Keep it under 13px. **Palette — fired-clay neutrals with a single gold vein (warm, low-contrast, no gradients):** - `#EFE9DE` — *Plaster White* — the dominant void; warm bone-white, never pure #FFF. - `#E3D9C6` — *Unglazed Clay* — slightly darker negative-space panels, the almanac margin strip. - `#C9B79A` — *Kiln Dust* — mid-tone for the shoji window light, hairline crazing strokes. - `#7C6A52` — *Wet Clay* — body text, the bowl's drawn contour, *tategaki* almanac lines. - `#3A332B` — *Iron Slip* — near-black for 令和 brushstrokes and the deepest contour darks. - `#6E7E63` — *Pooled Glaze* — the muted grey-green that gathers at the very bottom of the scroll and inside the bowl's shadow. - `#A8842F` — *Urushi Gold* — the kintsugi seam ONLY. Never used for text, never for UI. It is the precious fracture and nothing else. ## Imagery and Motifs **Everything is hand-built SVG and CSS — zero photography, zero 3D render, zero stock illustration, zero gradient mesh.** The entire visual world is ceramic and paper. - **The kintsugi seam.** A single irregular SVG path, ~3–6px wide, painted in *Urushi Gold* with a subtle inner darker line so it reads as a *filled crack* not a drawn line. It must wander — Bézier handles deliberately uneven — and it has tiny branching hairline offshoots (the crazing) that fade to nothing. This is the signature motif and it runs the full page height. - **The asymmetric bowl.** One large SVG vessel, ~40vw, thrown off-center. Its silhouette is intentionally lopsided; its rim wavers; a thin *Pooled Glaze* gradient-free flat shadow sits inside. The crack in its wall is the seam's origin point. - **Crazing texture.** A faint, full-bleed SVG `` of thin random *Kiln Dust* lines at low opacity (~6%), regenerated with slight randomness on each load via JS-seeded path jitter — so the "glaze crackle" is never identical twice. This is the "fired once, never reproducible" promise. - **The shoji window.** A warm rectangle (CSS box-shadow glow in *Kiln Dust*, no blur-heavy glass) divided by thin wooden mullions (1px *Wet Clay* lines). Behind it: a single tiny ink-brush sprig matching the current *sekki* (plum, peach, wheat, chrysanthemum, snow…) drawn in *Iron Slip* strokes. - **The ink moon.** Tonight's moon phase as one thin hand-drawn crescent/disc in *Iron Slip* on *Plaster White* — a single confident stroke, slightly broken at one end like dry brush. - **Tategaki margin marks.** The almanac strip uses vertical Japanese text plus tiny hand-inked tally marks counting the era's years — like notches carved on a doorframe. - **No icons.** Anything that would be an "icon" is instead a brush gesture. A loading state, if any, is a single ink dot that bleeds slightly outward. ## Prompts for Implementation Build reiwa.day as **one quiet vertical hand-scroll** — one HTML file, one CSS file, one small JS module. Treat the visit as a ~60-second unrolling: the visitor scrolls slowly down a length of plaster-toned paper, and the only constant companion is a gold crack. **No CTA. No pricing block. No stat grid. No testimonials. No contact form. No email signup. No nav bar.** There is only the scroll, the bowl, the window, the margin, the fracture, and the end. **Date logic (the soul of the site — compute live in JS, no backend):** - Reiwa era began **2019-05-01**. Compute and display: the day-count since then ("Day N of Reiwa"), the Reiwa year (Reiwa 1 = 2019, current year accordingly), today's Gregorian date in small Latin serif. - Map today's date to one of the **24 sekki** and the finer **72 kō** micro-season phrase — ship a small lookup table of date-ranges → English+Japanese phrase. This phrase is the *content* of the Window section. - Compute the **moon phase** (simple synodic-month approximation from a known new moon) → draw the crescent. - Pick today's **rokuyō** (the 6-day Buddhist cycle) by the standard lunar-calendar formula or a date-table → show its romaji + meaning faintly in the margin. - If JS fails, the page still renders the bowl, 令和, the seam, and the poem — the static poetry survives. **Animation & motion (slow, ink-like, never bouncy — bias away from spring/magnetic clichés):** - **Seam draw.** On load, the kintsugi crack draws itself top-to-bottom using `stroke-dashoffset` over ~2.4s with a gentle ease — like molten gold being poured into the fracture. Its hairline offshoots draw a beat later. - **Brush bleed.** 令和 fades up not by opacity alone but by a soft mask that wipes from the stroke origins outward, ~1.6s — ink soaking into paper. - **Scroll-tied unroll.** As the visitor scrolls, sections rise from `translateY(24px)` + `opacity 0` to rest, each at its own slow pace; the seam is the scrubber — its glow brightens fractionally near whichever section is in view. - **The break.** When section 4 enters the viewport, the plaster background visually "cracks open": two halves slide apart ~12px with a thin gold edge revealed between them, and the *Man'yōshū* verse fades in vertically inside the gap. Slow — ~1.2s — and it never fully closes again. - **Crazing reseed.** On every page load, the SVG crackle pattern uses a fresh random seed so the hairlines differ — make this visible enough that a reload feels like a *different bowl*. - **Cursor.** No magnetic cursor, no trail. At most, a faint *Kiln Dust* smudge that very slowly follows the pointer, like a fingertip on unfired clay — optional, easily omitted. - **Tategaki.** Render the almanac strip with `writing-mode: vertical-rl` so Japanese reads top-to-bottom, right-to-left, authentically. Storytelling above all: someone should reach the bottom line — "and tomorrow, another bowl" — and feel they were handed a single, fragile, beautiful day, and asked only to hold it. ## Uniqueness Notes Deliberate departures from the patterns in the frequency analysis: 1. **Ceramic-and-paper world, zero photography.** Photography appears in **98%** of designs in the corpus and gradient-mesh / glassmorphic-cards are everywhere; reiwa.day uses *none of it* — every pixel is hand-built SVG ceramic, paper, and brush ink. The "shine" budget is one gold crack. 2. **The kintsugi seam as the only layout grid.** Card-grid (91%), full-bleed-centered (82%), bento-box, dashboard — all rejected. There are no rectangles to align to; an irregular hand-drawn fracture is the structural spine, and every element hangs from it off-axis. ma-negative-space (16%) is pushed to an extreme: ~70% void. 3. **Wabi-sabi *as primary*, not garnish.** Wabi-sabi sits at ~9% and tends to appear as a flavor on top of otherwise-clean layouts; here it is the entire thesis — asymmetry, crazing, lopsided throwing, and per-load non-reproducibility are load-bearing, not decorative. 4. **Live Japanese koyomi computation.** Sekki / 72-kō / rokuyō / moon-phase / Reiwa day-count computed client-side — the page is *different content every day*, which almost nothing in a static-page corpus does. 5. **Authentic tategaki vertical typography** (`writing-mode: vertical-rl`) for the almanac margin — vanishingly rare in the corpus, and paired with a Japanese brush face (*Yuji Syuku*) rather than a Latin substitute. 6. **Anti-cliché motion.** Spring (85%), magnetic (80%), cursor-follow (89%), tilt-3d (29%) are all avoided; motion here is stroke-dashoffset gold-pour, ink-bleed masks, and a single slow background "crack" — quiet, never springy. Chosen seed/style: **wabi-sabi imperfect ceramic** *(aesthetic: wabi-sabi, layout: ma-negative-space, typography: elegant-serif, palette: honeyed-neutral, patterns: path-draw-svg, imagery: line-illustration, motifs: cultural, tone: zen-contemplative)* Avoided overused patterns per frequency analysis: hand-drawn aesthetic (94%), glassmorphism (82%), photography imagery (98%), card-grid (91%), full-bleed (87%), centered (82%), warm-gradient palette (94%/98%), parallax (90%), cursor-follow (89%), spring (85%), magnetic (80%), mono-as-display, pastoral-romantic tone.