# Design Language for maid.day ## Aesthetics and Tone maid.day is **"The Day the House Was Cared For"** — a quiet, wabi-sabi field-journal honoring the unglamorous craft of tending a home. Not a maid service, not a cleaning brand, not a French café fantasy: the conceit is that there exists one unmarked day in the year — *maid.day* — when the small repairs, the wiped sills, the refolded linen, the swept thresholds are noticed and given their due. The site reads like a hand-bound almanac of housekeeping found in an old farmhouse: a calm, slightly imperfect document about the dignity of ordinary care. The mood is **morning light through a north-facing window** — overcast, soft-shadowed, a little melancholy, deeply warm. Tone is *zen-contemplative* with a current of *grounded-earthy* tenderness. Nothing shouts. Surfaces show wear: a faint ring where a teacup sat, a crease in the paper, a chipped enamel edge. Wabi-sabi means we *embrace* the asymmetry, the unrepeated, the visibly mended (kintsugi-gold seams run through cracked ceramic motifs). The visitor should feel they have been handed a worn linen cloth and invited to sit down. Inspiration: Japanese mingei pottery, Shaker interiors, Vilhelm Hammershøi's grey rooms, the photography of Rinko Kawauchi, faded household-management manuals from the 1900s, the slow-cinema patience of a kettle coming to boil. ## Layout Motifs and Structure The composition is **a folded linen cloth, never quite square**. The screen is treated as fabric laid on a wooden table: a single off-center reading column sits roughly **41% from the left**, leaving a generous, almost-empty **right margin** (the *ma* — negative space — where small kintsugi-cracked ceramic SVGs rest, where margin-notes in faint pencil-italic appear, where a low horizontal shadow falls as if from a window mullion). The grid is intentionally *broken*: section blocks do not align to a strict baseline; each one is nudged 4–12px out of true, the way folded cloth never stacks perfectly. Sections are **"hours of the day"** rather than marketing panels — `Daybreak / Linen / Threshold / The Mending / Dusk` — each a full-bleed band that fills the viewport, separated not by hard rules but by a soft hand-torn paper edge (a jagged SVG mask, slightly different on every section). Scrolling is an *immersive-scroll* descent through one day: the background warms from cool overcast grey at the top toward a dim amber lamplight at the bottom. A persistent thin **horizontal "windowsill" line** tracks down the right margin as a scroll indicator — dust motes drift across it on parallax. No nav bar in the conventional sense: a single column of tiny lowercase words pinned to the bottom-left, set in faded pencil, that underline-draw on hover. No hero CTA. No cards-in-a-grid sales section. The center column holds long, unhurried prose with oversized hanging dropcaps and the occasional inset image of an everyday object, photographed flat on linen. ## Typography and Palette **Typography — three faces, used like a well-worn household drawer (avoiding the over-used mono and hand-drawn registers):** - **Fraunces** (Google Fonts) — the body and display face. A "soft serif" with an old-style warmth, gentle wonk in the italics, and an optical-size axis; set at 19px / 1.75 line-height for body, and very large (clamp up to 7rem) for section titles with the *SOFT* axis pushed high so the letterforms feel slightly swollen, like damp paper. This carries the wabi-sabi imperfection. - **Spectral** (Google Fonts) — used for pull-quotes and the almanac-style sub-headings; a quieter, slightly condensed serif that recedes behind Fraunces, set in a warm grey. - **Cormorant Garamond** (Google Fonts) — *italic only*, very small (12–13px), for the right-margin pencil notes and footnotes; thin, calligraphic, almost a whisper. **Palette — `muted` + `warm-earthy`, the colors of unbleached cloth and old enamelware:** - `#E7E0D2` — *raw linen* — primary background, the laid cloth - `#F3EEE3` — *bleached cotton* — the reading column / paper surface - `#3A352C` — *cellar walnut* — primary text, never pure black - `#8C8473` — *dust grey* — secondary text, margin notes, the windowsill line - `#A9402E` — *chipped enamel red* — sparing accent: dropcaps, the torn-edge under-color, hover underlines (the one warm jolt, like a kettle's spout) - `#C8A24A` — *kintsugi gold* — the mended seams in ceramic motifs, a thin rule under section titles - `#5C6B66` — *north-window slate* — the cool overcast tone at the top of the page - `#2A2018` — *lamp-shadow* — the dim amber-brown the page warms toward at the very bottom Gradients exist only as **vast, near-imperceptible washes** (linen to slate, cotton to lamp-shadow) — never the candy/aurora gradients common elsewhere. ## Imagery and Motifs The visual signature is **kintsugi-cracked ceramic** rendered as fine SVG line art: small bowls, a chipped jug, a saucer — each drawn with a single irregular crack repaired by a thread of `#C8A24A` gold that *draws itself* on scroll-into-view (path-draw-svg). These float in the right margin, one per section, never repeated. Photographic imagery is **flat-lay, overcast, on linen** — a single object per image (a folded napkin, a wooden clothespin, a brass key, a sprig of dried thyme, a wrung cloth), shot from directly above with one soft window light, deep warm shadow on one side, the linen weave visible. Images are inset into the reading column at irregular widths, with a 1px `#8C8473` keyline and a faint paper-grain overlay (subtle `grain-overlay` noise, ~4% opacity, not the heavy grungy kind). Recurring motifs: **the torn paper edge** (every section divider, every image corner slightly hand-torn); **dust motes** (slow-drifting tiny `#F3EEE3` dots on parallax in the margins); **the fold-crease** (a faint 1px highlight + shadow pair running diagonally across the linen background, as if the cloth was once folded in four); **stitch marks** (a dotted `#A9402E` running-stitch line used as an underline-draw on links and to "mend" the bottom of certain blocks). Decorative dingbats are tiny: a single em-dash, a faded asterism (⁂) between paragraphs, a small drawn needle. ## Prompts for Implementation - Build a **full-screen narrative descent through one cared-for day**: five viewport-height sections (Daybreak, Linen, Threshold, The Mending, Dusk), each with its own hand-torn SVG top edge (generate slightly different jagged paths per section), the body background CSS-transitioning from `#E7E0D2`/`#5C6B66` wash at the top toward `#2A2018` lamp-glow at the bottom as you scroll. - Center reading column at ~41% from left, max-width ~56ch, on a `#F3EEE3` paper surface with a faint inner shadow and a barely-visible diagonal fold-crease (linear-gradient highlight+shadow). Generous empty right margin holding margin-notes and the floating ceramic SVGs. - **Animation should feel like slow domestic time, not snappy UI:** spring/elastic eased but *slow* (durations 1.2–2.2s, gentle ease); fade-reveal + slight upward drift for paragraphs as they enter (stagger ~120ms per line); the kintsugi gold crack on each ceramic SVG should `path-draw` over ~2.5s when its section is reached; dust motes drift continuously on a long irregular keyframe loop with parallax tied to scroll; section titles set in Fraunces with the SOFT axis animating subtly (a 0.5–1px "breathing" of weight) as if the paper is gently dampening. - Links: lowercase, `#3A352C`, with a dotted `#A9402E` running-stitch underline that draws left-to-right on hover (underline-draw). The bottom-left nav column underlines the same way. - Cursor: a faint warm circular glow follows it softly (cursor-follow, heavily damped, low opacity) — like the pool of light from a held lamp; nothing more aggressive. - Texture pass: ~4% grain overlay, the visible linen weave behind background sections, a faint coffee-ring stain placed *once*, off-center, near the top. - Copy voice: hushed, almanac-like, second person occasionally — *"Today the linen is turned. Tomorrow it will not remember being folded, and that is the point."* Section bodies are short essays on small acts of care, not features or benefits. - **AVOID:** any pricing block, stat-grid, testimonial carousel, "Get Started" CTA, card-grid services row, glassmorphic frosted panels, neon, bright dopamine gradients, hero-with-button. There is nothing to buy here — only a day to notice. ## Uniqueness Notes - **Differentiator 1 — kintsugi-as-the-only-animation-flourish:** the single recurring "wow" element is gold cracks self-drawing across cracked ceramic line-art SVGs; no neon, no 3D tilt, no card flips — the imperfection-made-visible *is* the brand. - **Differentiator 2 — the page literally warms as you descend one day:** background color, shadow, and light source migrate from cool overcast north-window grey to dim amber lamplight from top to bottom; structure is "hours," not "sections." - **Differentiator 3 — broken-grid by intent:** every block is nudged 4–12px out of true and every section divider is a uniquely hand-torn SVG edge — nothing aligns, nothing repeats, in keeping with wabi-sabi. - **Differentiator 4 — Fraunces SOFT-axis "breathing" type** and dotted running-stitch underlines: typographic texture instead of the near-ubiquitous monospace + hand-drawn-illustration combo. - **Differentiator 5 — anti-commercial content model:** no CTA, no pricing, no stats, no service cards — a full-screen contemplative essay on the dignity of ordinary care. - Chosen seed/style: **wabi-sabi imperfect ceramic**. - Avoided patterns from frequency analysis: skipped over-used **hand-drawn** (97%), **glassmorphism** (72%), **mono** typography (93%), **photography**-as-hero (98% — used here only as tiny flat-lay insets), **card-grid** (89%) and **centered** symmetric layout (86%); leaned instead into under-used **wabi-sabi**, **ma-negative-space**, **broken-grid**, **immersive-scroll**, **path-draw-svg**, **grain-overlay**, **soft-serif/serif-revival**, **zen-contemplative** and **grounded-earthy** registers.