# Design Language for midori.day ## Aesthetics and Tone midori.day is **a single day spent inside a celadon tea bowl** — the slow ritual hours between a green dawn and a green dusk, narrated through the surface of an imperfect glazed ceramic. The Japanese word *midori* (緑) once meant not just "green" but "freshly sprouted," "verdant," "the bud that has just broken" — and this site treats a website like that bud: something organic, slightly asymmetrical, glazed but cracked, and quietly alive. The governing aesthetic is **wabi-sabi imperfect ceramic crossed with a zen-contemplative daylight cycle** — every panel is the inside wall of a kiln-fired vessel, every transition is the light moving across a tatami room from a paper window. This is the opposite of a brochure. There are no calls to action, no pricing tiers, no testimonial carousels, no stat counters. There is a *day* — and you scroll through it the way you'd watch a pour of matcha settle: dawn-green, leaf-green, tea-green, moss-shadow, dusk-green. The mood is **unhurried, slightly melancholy, deeply tactile**. Think of Bernard Leach's pottery studio at 6am, of Hasui Kawase's woodblock dusks, of the *kintsugi* repair where a crack is filled with green-gold rather than hidden. Imperfection is the content. The glaze pools thick in one corner and thin in another; the type sits a few pixels off the grid on purpose; the green is never flat — it always has the speckle of iron in the clay body underneath. Warmth here is not the corpus-default orange-gradient warmth. It is the warmth of *celadon* — a green that reads cool but feels warm, like the underside of a wet leaf in morning sun. Every screen should feel hand-thrown, never machined. ## Layout Motifs and Structure The composition is built on **ma (間) — negative space as the primary structural element**, which sits at only 11% in the frequency analysis and is almost never used as the *dominant* device. midori.day inverts the usual ratio: roughly **62% of every viewport is intentional emptiness** — the glazed field of the bowl — and content clusters into one or two off-center "pools," the way glaze pools at the foot of a fired vessel. - **The single-column kiln scroll.** The entire site is one vertical route, one continuous slow scroll, divided into **seven "hours"** — Pre-dawn, Sunrise, Mid-morning, Noon, Afternoon, Sunset, Night. No card grid. No bento. No dashboard. Each hour occupies roughly 1.4 viewport heights so the reader is forced to dwell. - **Off-axis pooling.** Within each hour, the text block is never centered. It pools toward a corner determined by the "time of day" — pre-dawn text pools low-left (the foot of the bowl), noon text pools high-center (the rim catching light), night text pools low-right. The empty 62% is left to breathe and to carry the glaze gradient. - **The kintsugi seam.** Between every two hours runs a thin, irregular **gold-green crack** — a hand-drawn SVG path, never a straight rule — that "repairs" the join between sections. It is the only horizontal element and it is deliberately not horizontal: it wanders ±14px. - **Asymmetric margins by design.** The left margin and right margin are never equal. A typical hour might be `margin-left: 11vw; margin-right: 17vw;` — the asymmetry rotates slowly as the day progresses, so the "weight" of the page shifts from left at dawn to right at dusk, like a sundial shadow. - **No navigation chrome.** A single fixed element in the top-left: a small unglazed-clay dot whose fill slowly shifts hue as you scroll, acting as a "time of day" indicator. No menu bar, no hamburger, no footer links beyond a single line of small-caps text at the very bottom (Night). ## Typography and Palette **Fonts (Google Fonts only — a serif-revival voice paired with a quiet humanist companion):** - **Display & "hour" titles — *Spectral* (weights 200 ExtraLight and 300 Light, italic for the hour names)** — Spectral is a screen-native serif with a slightly literary, slightly damp feel; at ExtraLight, set in large sizes (clamp 2.6rem → 5.5rem), the thin strokes look like brushwork that nearly ran dry. Hour names ("Pre-dawn", "Noon", "Night") are set in *Spectral Light Italic*, lowercase, with generous `letter-spacing: 0.04em`. - **Body & passages — *Spectral* again, weight 300, 18–20px, line-height 1.85** — long contemplative paragraphs, measure capped at ~58 characters so each line is a single slow breath. Body text gets a faint `text-shadow` of 0 1px 0 rgba(0,0,0,0.04) to sit "into" the glaze rather than on top of it. - **Captions, the clay-dot label, the bottom line — *Zilla Slab* (weight 300, small-caps via `font-variant: small-caps`, `letter-spacing: 0.12em`)** — a soft slab serif used only at tiny sizes (11–13px) for the few labels that exist; it reads like a stamped maker's mark on the underside of the pot. - No mono. No grotesk. No handwritten font. The corpus is 94% mono and 51% humanist-sans — this site is pure serif-revival, which sits at only 7%. **Palette — celadon greens with an iron-clay underbody. Minimum the following:** - `#0E1A12` — **kiln-shadow** (near-black green, used for Night background and all body text) - `#1F3A29` — **deep moss** (Pre-dawn / Night gradients, deepest pooled glaze) - `#3E6B4A` — **pine glaze** (mid-tones, Afternoon shadow) - `#6FA070` — **leaf-bud green** (Mid-morning, the "fresh sprout" accent — this is *midori* itself) - `#A8C9A0` — **celadon wash** (Sunrise / Sunset fields, the pale glazed body) - `#D6E2C8` — **rice-paper green** (Noon background, the brightest screen — paper held to light) - `#C2A14B` — **kintsugi gold** (the only warm note: the repair-seam, the hour-number numerals, hover states) - `#7A6A4A` — **iron clay** (the unglazed clay-dot indicator, hairline edges, the "raw foot" of the bowl) Backgrounds move through the day: Pre-dawn `#1F3A29` → Sunrise `#A8C9A0` → Noon `#D6E2C8` → Sunset `#A8C9A0` (warmer) → Night `#0E1A12`. The transition is a long CSS gradient driven by scroll position, never a hard cut. ## Imagery and Motifs **No photography. No stock. No 3D renders. Everything is SVG, CSS gradient, or layered noise — built to look kiln-fired, not rendered.** - **The glaze field.** Each hour's background is a multi-stop radial gradient (the "pool") layered over a very fine SVG `feTurbulence` grain at ~3% opacity — the speckle of iron particles in a celadon glaze. The grain is *baked in*, not animated, except for an almost-imperceptible 40-second drift. - **Crackle / craquelure overlay.** A fixed full-viewport SVG layer of fine, branching hairline cracks (`stroke: rgba(122,106,74,0.10)`, `stroke-width: 0.5`) — the natural crazing of an old glaze. It never moves; it's the "surface" the whole day is painted on. - **The kintsugi seams.** Seven hand-drawn irregular paths in `#C2A14B`, one between each hour, that "draw on" via `stroke-dasharray` as you scroll past — a wandering gold crack, 1.5px wide, with two or three tiny branching offshoots, ending in a small filled gold blob like a drop of repair lacquer. - **The single leaf.** One recurring motif: a single, simply-drawn *midori* leaf (a soft asymmetric blade, not a clip-art leaf), rendered once per hour at a different scale and rotation, very low contrast (`opacity: 0.12–0.22`), drifting slowly in the empty 62%. At Noon it is nearly invisible (washed out by light); at Night it glows faintly with a `#6FA070` stroke. It is the only "character" in the story. - **Hour numerals.** Each hour is marked by a large, thin `#C2A14B` numeral (一 二 三 — or 1–7) set in Spectral ExtraLight at ~12rem, placed in the empty quadrant, `opacity: 0.18` — like a number scratched faintly into the clay foot. - **Pooled-glaze blobs.** Where text clusters, a soft elliptical darker-green blob sits *behind* it (heavy `filter: blur(40px)`), as if the glaze ran thick there. Off-center, asymmetric, never a clean circle. ## Prompts for Implementation Build midori.day as **one HTML file, one CSS file, one small JS module — a single vertical scroll through seven hours of a green day.** No router, no multi-page, no SPA framework needed. Treat the visitor as someone holding a celadon tea bowl up to the changing light for about 80 seconds. **The narrative spine (seven hours, top to bottom):** 1. **Pre-dawn** — background `#1F3A29`, text pooled low-left. A single line of Spectral Light Italic: *"before the green wakes."* Below it, a short passage about *midori* meaning the bud that has just broken — quiet, almost a whisper. The leaf motif is tiny and dark. The clay-dot indicator is nearly black-green. 2. **Sunrise** — gradient warms toward `#A8C9A0`. Text shifts toward center-left. The first kintsugi seam draws on above this section. A passage about first light on wet leaves; the leaf grows and rotates. 3. **Mid-morning** — `#A8C9A0` brightening, `#6FA070` accents appear (the "fresh sprout" green). Text pools center. This is the most "alive" hour — the leaf is at full visible scale, the prose is the warmest in tone (still contemplative, never peppy). 4. **Noon** — background reaches `#D6E2C8` (rice-paper green held to light). Text pools high-center. Everything is washed pale; the leaf nearly vanishes; the craquelure is most visible because the field is brightest. A short, almost-empty hour — mostly *ma*. 5. **Afternoon** — `#3E6B4A` shadows creep in from the right edge. Text begins drifting right. A passage about the long green shadow, the slow tilt of the day. The leaf darkens and slows. 6. **Sunset** — `#A8C9A0` again but with `#C2A14B` warmth bleeding through the gradient. Text pooled center-right. The kintsugi seams glow slightly brighter here. A passage about the gold in the crack — *kintsugi*, repair as beauty. 7. **Night** — background `#0E1A12`. Text pooled low-right. The leaf has a faint `#6FA070` glowing stroke. Final passage: a single closing line in Spectral Light Italic, then one line of Zilla Slab small-caps at the very bottom — the "maker's mark." Nothing after it. No footer nav. **Motion (fade-reveal as the signature, at only 14% in the corpus):** - Every passage and hour-title arrives via **fade-reveal**: `opacity 0 → 1` over 1400ms with a *slight* `translateY(14px → 0)` and a soft `filter: blur(6px → 0)` — like a shape resolving in steam. Use `IntersectionObserver` with a generous rootMargin so things begin fading in before they're centered. No spring, no magnetic cursor, no tilt-3D, no parallax-heavy multi-layer scroll. The *only* scroll-driven thing besides reveals is the day-gradient and the seam draw-ons. - The kintsugi seams use `stroke-dashoffset` animated by scroll progress through their parent section — they "crack open" as you pass. - The leaf motif: an extremely slow, looping `transform` drift (rotate ±4°, translate ±20px over ~30s) via CSS keyframes — ambient, never reacting to the user. - `prefers-reduced-motion`: drop all blur and translate, keep only the opacity fade. - One restrained interaction: hovering any hour-title turns it `#C2A14B` (kintsugi gold) over 600ms and very slightly increases its letter-spacing — the only "warm" response in the piece. **Texture discipline:** the SVG grain and craquelure layers are essential — without them the greens look like flat web colors instead of glaze. Bake them in early. Keep all edges *slightly* irregular: border-radii like `42% 58% 47% 53%` for the pooled blobs, never `border-radius: 50%`. **AVOID:** CTA buttons, pricing blocks, stat grids, testimonial rows, contact forms, email signups, card grids, bento boxes, hamburger menus, hero-with-button patterns. There is the day, and there is nothing to buy. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Celadon-ceramic green, not warm-orange-gradient.** The corpus is 98% warm palettes and 96% gradient — midori.day uses gradient too, but exclusively in *cool celadon greens with an iron-clay underbody* (forest-green sits at only 4%). The single warm note is kintsugi gold, used as an accent of about 3% of the surface. This is, as far as the corpus shows, a unique chromatic stance. 2. **Ma (negative space) as the dominant device, at a 62% emptiness ratio.** ma-negative-space is at 11% and almost never the *primary* structural element; here it carries the design. Combined with off-axis "glaze pooling," this is a layout no other site in the corpus uses. 3. **Pure serif-revival typography (Spectral + Zilla Slab), zero mono, zero grotesk, zero handwritten.** Against a corpus that is 94% mono and 51% humanist, an all-serif voice is rare (serif-revival 7%), and pairing it with a kiln-fired ceramic concept is unique. 4. **Wabi-sabi rendered as a literal glazed-vessel surface** — craquelure overlay, baked-in iron grain, kintsugi repair-seams between sections, irregular border-radii. Wabi-sabi sits at 6% and tends to mean "muted earth tones"; this site makes the imperfect ceramic *the actual visual substrate*. 5. **Fade-reveal as the sole signature motion** (14% in corpus), with parallax (94%), cursor-follow (89%), spring (86%), magnetic (80%), and tilt-3D (25%) all deliberately excluded. The interaction budget is spent entirely on steam-like fades and scroll-drawn cracks. 6. **A seven-hour day as the content** — no product, no pitch, no grid of features. The "story" is dawn-to-night light moving across a green bowl, narrated in literary fragments about the word *midori*. Chosen seed/style: **wabi-sabi imperfect ceramic** — composed as *aesthetic: wabi-sabi, layout: ma-negative-space, typography: serif-revival, palette: forest-green, patterns: fade-reveal, imagery: paper-aged, motifs: leaf-organic, tone: zen-contemplative*. Avoided overused patterns per frequency analysis: hand-drawn aesthetic (96%), glassmorphism (74%), photography imagery (98%), warm palette (98%), card-grid (88%), centered layout (86%), parallax (94%), cursor-follow (89%), spring (86%), magnetic (80%), mono typography (94%).