# Design Language for miko.day ## Aesthetics and Tone miko.day is **the diary of a shrine, written by the shrine itself, across one single day** — from the 5 a.m. opening of the gates to the moment the last lantern is snuffed at night. The conceit: a small, fictional countryside *jinja* (Shinto shrine) keeps a record not of its visitors but of its own *light*. Every chapter of the site is an hour, and every hour the page's air changes color the way the actual sky does over cedar trees and a vermillion torii. The "miko" — the shrine maiden — is never shown as a face or a figure; she is felt only through what she touches: the broom marks raked into gravel, the cold water ladle returned to its rest, a paper *omikuji* fortune knotted to a bare branch, the small dry sound of a *suzu* bell rope released. The tone is **wabi-sabi, contemplative, quietly devotional, and slightly melancholic** — the beauty of a thing because it is impermanent, swept clean every morning knowing it will not stay clean. Nothing here shouts. There is no "Get Started," no hero pitch, no conversion. The site behaves like a held breath between two clapping hands. The visual reference points: the muted indigo-and-stone palette of an unrestored Edo-period diary; the deliberate emptiness (*ma*) of a tatami room photographed at dawn; the way *sumi* ink bleeds a soft halo into *washi* paper; Hiroshi Sugimoto's grey seascapes; the wood grain of a *hinoki* offering box worn pale by ten thousand palms; and the single, almost violent note of *shu* vermillion that Shinto architecture allows itself against all that grey. Texture over polish. Grain over gloss. The screen should feel like paper that has been rained on once and dried. ## Layout Motifs and Structure A **strict single vertical column, 600px wide, centered**, scrolled top to bottom — chosen against the 88% card-grid / 86% centered-but-multi-column cohort. But the column is not a reading column; it is **a path of stepping stones** (*tobi-ishi*) through a shrine garden. Each "hour" chapter is one stone: a self-contained block of generous vertical padding (min 88vh) separated from the next by a stretch of near-empty space holding only a thin hand-inked vertical line — the path between stones — that the eye must walk down. Negative space is structural, not decorative; *ma-negative-space* (11% in the layout analysis) is the actual grid here. Within each hour-stone the composition is **off-center and breathing**: text sits left-aligned to an invisible margin that is itself only ~55% of the column width, leaving a tall right-hand gutter where small things drift in — a single raked-gravel SVG arc, a knotted omikuji, a bell. The shrine's *honden* (main hall) is the only element that ever spans the full 600px: it appears as a thin horizontal woodgrain band at the very top, fixed, that **darkens and lightens with the time of day** like a clerestory window. No sidebar, no nav bar, no breadcrumb. A vertical reading-progress mark on the far left renders as a slow trickle of water down a bamboo *kakehi* spout, drop by drop. The footer is not a footer: the last stone is simply the gate closing — the column narrows to a 2px vermillion line and fades to the color of unlit night. ## Typography and Palette **Fonts — Google Fonts only, three families, used with the restraint of a tea ceremony.** - **Zen Old Mincho** (weights 400, 700) — the load-bearing voice for headings and the hour-numerals. A genuine Mincho/serif form with the thin horizontals and triangular *uroko* serifs of brushed Japanese type; it reads as quiet, old, and ceremonial. Chosen over the 94%-overused mono families and the 2% Playfair crowd because nothing else carries the *jinja* mood without resorting to clip-art "Asian" fonts. Hour numbers ("05時", "17時") set in 700 at clamp(2.4rem, 7vw, 4.2rem), letter-spacing 0.08em. - **Cormorant Garamond** (weights 400, 500, italic) — body text and the diary passages, set at 1.18rem / line-height 1.85, color near-ink. Its high-contrast strokes and long italic descenders give the English prose the same delicate, slightly tired elegance as the Mincho headings. Drop-cap-free; instead the first line of each entry is italic, like a margin note. - **Zen Kaku Gothic New** (weight 300) — used only for the smallest functional text (timestamps, the suzu-bell caption, the path markers) at 0.74rem, letter-spacing 0.16em, uppercase. A clean low-weight gothic that recedes. No third decorative display face. The page must never have more than two type sizes visible in one viewport. **Palette — predominantly cool stone and ink, with one ration of sacred vermillion. Minimum colors below.** - `#E9E4DA` — *washi* — the base paper. Warm-grey, not white. The page background. - `#1C1E22` — *sumi* — ink. Body text and the deepest night state. - `#3A4750` — *kuro-ai* — a blue-charcoal used for headings, the woodgrain band, and mid-day shadows. - `#7E8A8C` — *nezumi* — "mouse grey," for secondary text, the raked-gravel lines, the path line. - `#9D2E2B` — *shu* — Shinto vermillion. Used *only* for: the torii silhouette, the closing 2px line, knot-strings on omikuji, and the active-state of any single link. Never as a fill larger than ~120px. - `#C7BCA7` — *kincha* — a faded tan, for the hinoki offering-box surfaces and washi card edges. - `#2A3340` — *kon* — deep indigo, the dusk/night air gradient endpoint. The time-of-day system lerps the page background and band color between `#E9E4DA` (dawn, cool) → `#F1ECE0` (midday, brightest) → `#C9B79E` warm-gold (5 p.m.) → `#2A3340` → `#1C1E22` (night), driven by the chapter the reader is in. ## Imagery and Motifs **No photography.** (Photography sits at 98% — its absence is a statement.) Everything is drawn in SVG with hand-tremor. - **The torii** — a single vermillion gate silhouette, rendered as four `path`s with deliberately imperfect, slightly-bowed crossbeams (a `feTurbulence` displacement of 1.2px). It lives in the top band, very small (~64px tall), and is the only saturated thing on screen at dawn. - **Raked gravel (*samon*)** — concentric and parallel arc patterns drawn as thin `nezumi` strokes with `stroke-dasharray` jitter, occupying the right-hand gutter of certain hours. On scroll-in they *draw themselves* line by line (path-draw-svg, 32% — but used as meditation, not flourish), the way a broom would lay them down. - **Omikuji fortunes** — small folded-paper rectangles (washi color, kincha edge, a `shu` knot-string) that hang from a bare branch SVG; each is a real one-line fortune in Japanese + English, revealed on hover with a slow unfold (`scaleY` from 0.05, 900ms ease). - **Shimenawa & shide** — the sacred straw rope and its zig-zag paper streamers, drawn as a thin border motif at the head of each hour-stone, swaying ~2° on a 9s sine. - **Suzu bell** — at the very bottom of the page, a small bell with a rope; pulling it (drag down ~40px and release) plays nothing audible but triggers a single screen-wide ripple of light and reveals one last hidden line of diary text. - **Ink bleed** — every heading sits on a faint `radial-gradient` halo at 6% `sumi`, as if the brush sat too long. - **Grain** — a ~1.5% opacity `feTurbulence` paper-fiber overlay across the whole page, fixed, never moving — the *washi* texture. Floating motes of dust catching low sun in the afternoon chapters: 12 tiny `kincha` circles, 1–3px, drifting upward on slow Lissajous paths, opacity pulsing 0.1–0.4. ## Prompts for Implementation Build miko.day as **one static HTML page, one stylesheet, one small ES module (~6KB minified), zero images (all SVG inline or in CSS), one Google Fonts request, no framework, no build step beyond a single esbuild pass**. Target document weight under 75KB excluding fonts. The page is one continuous vertical scroll of roughly 1400–1600vh: a top **prologue stone** (the gate is locked, the page is dark, a single line of text), then **hour chapters** (suggest 05時 / 07時 / 09時 / 12時 / 15時 / 17時 / 19時 / 21時), then the **gate-closing epilogue**. **Storytelling is the entire structure — there is no navigation, no menu, no CTA, no pricing block, no stat-grid, no testimonial cards.** Each hour chapter is a short diary passage (2–4 sentences, written in the voice of the shrine, e.g. *"05時 — She came before the birds. The gravel still held last night's footprints; now it holds the broom's."*) plus its one drifting object in the gutter. The reader does nothing but descend. **The day is the animation.** Bind a single normalized scroll value `t ∈ [0,1]` to a day-clock. Drive: (1) the page `background-color` and the top woodgrain band's brightness, lerping through the dawn→midday→dusk→night stops above; (2) the torii's vermillion saturation (vivid at dawn, slightly dusty at noon, glowing at 17時, then a dark silhouette against the indigo); (3) the angle and length of a long thin "shadow" cast by the band — short at midday, raking long at the edges of the day; (4) the dust-mote layer fading in only between 12時 and 17時. Use `prefers-reduced-motion` to freeze the day at 09時 and disable swaying. **Micro-interactions, all slow (700–1100ms, ease-out, never bouncy — no spring, no elastic):** omikuji unfold on hover; raked-gravel arcs self-draw on scroll-in via `IntersectionObserver` + `stroke-dashoffset`; shide streamers sine-sway; the bamboo `kakehi` progress spout releases one CSS-animated droplet per ~12vh scrolled; the suzu bell at the bottom is draggable and on release does a `box-shadow` light-ripple across the viewport and fades in the final hidden sentence with a 1400ms ink-bleed. The cursor is a small `nezumi` ring that, near the torii or the bell, fills with `shu` and slightly enlarges (the only "magnetic"-flavored touch, kept minimal). **Texture discipline:** the fixed grain overlay and the ink-halo behind every heading are mandatory; never use a pure `#FFFFFF` or pure `#000000` anywhere; never use a box-shadow that reads as "card elevation" — shadows are *cast light*, soft and directional, matching the day-clock. Headings in Zen Old Mincho 700, body in Cormorant Garamond, functional text in Zen Kaku Gothic New 300 only. Bias every decision toward *ma* — when in doubt, add empty space, not content. ## Uniqueness Notes Differentiators this design commits to; none should be duplicated by another CMassC site: 1. **The webpage is a shrine narrating its own daylight.** The site's content is not "about" a shrine — the *light of the page itself* is the subject, scroll-bound to a single day's clock. Most time-themed sites animate a hero; here the chrome (background, band, shadow, the one vermillion accent) *is* the story, and the prose is marginalia to it. 2. **Anti-warm, anti-photo, anti-CTA in three overcrowded fields at once.** Warm palette is 98% of the cohort, photography is 98%, and nearly every site has a conversion layout — miko.day is built on cool stone/ink/indigo with a single rationed vermillion (≤120px ever), uses zero photographs (only hand-tremor SVG), and has no menu, no button, no pricing, no stats. The closest cohort relative would be amamiya.monster's single-column aquatic narrative, and even that is glassmorphic and aquatic; this is opaque, papery, terrestrial, and devotional. 3. **Wabi-sabi as a working constraint, not a label.** Wabi-sabi sits at 6% in the aesthetic analysis and is usually invoked for ceramic shops. Here it dictates real rules: no pure white/black, mandatory paper grain, deliberate path-tremor on every SVG, the structural use of *ma* emptiness between "stepping-stone" chapters, and an ending that fades rather than concludes — impermanence is the layout logic. 4. **Single-column reframed as *tobi-ishi*.** Single-column (16%) is reclaimed not as a documentation/essay format but as a literal garden path of stepping stones with hand-inked connecting lines and a bamboo-spout progress meter — a different purpose than any single-column site in the cohort. 5. **All animation is one bound day-clock with slow, never-bouncy easing** — explicitly avoiding the cohort's 86% spring, 80% magnetic, 16% elastic reflex; the only "magnetic" touch is a single cursor-fill near the torii/bell, and even that is muted. Chosen seed/style: **japanese-minimal + wabi-sabi imperfect ceramic** (from seeds.json — "wabi-sabi imperfect ceramic", reinterpreted from ceramics to a shrine's day; pairs the `japanese-minimal` and `wabi-sabi` aesthetic vocabulary with `ma-negative-space` layout, `serif-revival`/`elegant-serif` typography via Zen Old Mincho + Cormorant Garamond, a `muted` cool palette with a `shu` accent, `path-draw-svg` + `fade-reveal` patterns, and `nature`/`cultural`/`leaf-organic` motifs). Avoided patterns from the frequency analysis: hand-drawn-as-cartoon (96% — this is hand-*tremor*, not illustration), glassmorphism (74%), card-grid (88%), centered multi-column (86%), photography (98%), warm palette as base (98%), mono typography (94%), cursor-follow/spring/magnetic reflex (89%/86%/80%), tilt-3d (25%), counter-animate/typewriter flourishes.