# Design Language for kaguya.day ## Aesthetics and Tone kaguya.day is a **muji daybook crashed into a baroque ballroom** -- a deliberately stripped reading surface set on a foundation that secretly admires gold leaf. The mood is **opulent-grand** despite the muji surface: tone, not visuals, carries the grandeur. Inspirations: the catalog design of Muji's "Found MUJI" series, Cy Twombly's late paintings (cream fields with single gestural marks), the cultural-pattern carving of Persian carpets reproduced as faint blind-emboss, the broken-grid pages of Karel Martens' wood-type lottery cards, and the honeyed light of a baroque ceiling viewed through a paper window. Muji supplies cream paper, restraint, ample white space, and a quiet typography. Broken-grid layout adds intentional disorder -- elements break out of column rules, type splays, and items refuse to align. The honeyed-neutral palette stays in a tight tonal range (every value a near-relative of cream) so the cultural-pattern motifs and the playful-rounded type can read as confident, not jolly. The voice is opulent: "today, the daisy is more beautiful than yesterday's daisy. yesterday's daisy is in the garbage. that, too, is beautiful." ## Layout Motifs and Structure A **broken-grid** layout that pretends to be a 12-column grid until you look closely and notice that nothing actually aligns. The disorder is precisely tuned -- each element nudges off-grid by 8-24px in deliberate directions. - **Title block (90vh):** A 12-column grid is established. The wordmark "kaguya.day" is placed across columns 3-9, but ranged-left at column 4 and overflowing into column 10. A small subtitle ("a daybook for ordinary opulence") sits at column 7-11, ranged-right. - **Today's entry (110vh):** A large paragraph in playful-rounded body occupies columns 2-7. To its right, a single abstract-shape illustration (a soft amoeba) occupies columns 9-12 but with its top edge 60px below the paragraph's top -- a deliberate misalignment. - **Cultural-pattern strip (60vh):** A faint blind-emboss strip of repeating Persian-pattern motifs runs across the full width, broken at three random points by small playful-rounded captions that interrupt the pattern. - **Yesterday's entry (100vh):** Same structure as "today's entry" but mirrored -- paragraph on right (columns 7-11), illustration on left (columns 1-4) with its top edge 80px lower. The misalignment grows as the user scrolls deeper. - **A week of daisies (120vh):** Seven small entries arranged across the grid, each at deliberately wrong column placements -- some at column 3-5, some at column 8-12, one at column 1-2, one at column 10-11. The week reads as a scattered constellation. - **Footer (50vh):** A single line at column 6, ranged-center: "kept by the daybook keeper, with honey." - **Blur-focus on hover:** Every element has a slight gaussian blur at rest (`filter: blur(0.6px)`) that snaps to crisp on hover (`filter: blur(0)` over 240ms) -- as if the page is daydreaming until you focus on it. The broken-grid creates productive disorientation; the blur-focus pattern rewards attentive reading. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Quicksand" weight 700 at clamp(56px, 10vw, 168px), tracking -1%. The rounded letterforms feel handmade and warm -- playful-rounded in service of opulence-by-restraint. - **Sub-display:** "Quicksand" weight 600 at clamp(28px, 4vw, 48px). - **Body:** "Quicksand" weight 400 at 19px / 1.8. The rounded body type slows the reading pace and gives the muji surface a soft cadence. - **Italic:** Quicksand light italic for asides. - **Numerals (dates):** "Quicksand" tabular at 22px weight 700. - **Captions / small labels:** "Quicksand" weight 600 small caps at 11px tracking 14%. **Palette (honeyed-neutral -- a tight tonal range):** - `#faf3e2` -- cream paper (primary background) - `#f3ebd0` -- light honey (secondary surface) - `#e8d8a8` -- mid-honey (cultural-pattern strip) - `#c4a868` -- deep honey (highlight, illustration accent) - `#8a6a3a` -- amber bark (text accent) - `#3a2c1a` -- honey-stained ink (body text) - `#fff8e8` -- bleached cream (highlight, hover-focus surface) Every value is a near-relative of cream -- the palette spans only ~30 degrees of hue on the warm side. The opulence comes from precise tonal modulation, not from saturated accents. ## Imagery and Motifs - **Abstract shapes (soft amoebas):** Hand-drawn soft amoeba shapes (300-400px) appear as illustrations beside text entries, drawn in 2px deep-honey strokes over light-honey fills. - **Cultural-pattern blind-emboss:** Repeating Persian-style carpet motifs (large rosettes, small palmette borders) appear as faint blind-emboss textures across the cultural-pattern strip. They use a slight inner-shadow CSS effect to suggest paper relief. - **Broken-grid alignment marks:** Small 1px corner-cross marks ghost behind the broken-grid items -- showing where they "should" align -- so the disorder is documented in faint marginalia. - **Blur-focus animation:** Each major element has a 0.6px gaussian blur at rest. On hover, the blur transitions to 0 over 240ms with `transition: filter 240ms ease;`. Body text is exempt (always crisp). - **Honeyed inks:** Small ornament marks (asterisks, ampersands, swashes) scattered through the body text in amber bark, used as paragraph break ornaments. - **One pressed flower:** A single high-resolution photograph of a pressed daisy placed precisely in the gutter between "today" and "yesterday" -- the only photograph on the entire site, given dignity by its singularity. ## Prompts for Implementation The site is a daybook entered into for ordinary opulence. Build a deliberately broken 12-column grid where elements nudge off-grid in tuned directions. - The 12-column grid is `display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: 1320px; margin: 0 auto;`. Each element sets its own `grid-column` and a small `transform: translate(8px, -12px)` to nudge off-grid. - Blur-focus: `body { filter: blur(0.6px); }` is wrong (it would blur everything). Instead, each `.entry` and `.illustration` element gets the blur, with `transition: filter 240ms ease` and `:hover { filter: blur(0); }`. Body text always sits at `filter: none;`. - Cultural-pattern strip: a 240px-tall full-width SVG `` repeating the rosette motif, with a `filter: drop-shadow(inset 0 1px 2px rgba(58, 44, 26, 0.18))` to simulate blind-emboss. - Broken-grid alignment ghosts: each broken-grid element has a `::before` pseudo-element with a 1px deep-honey cross-mark positioned at the would-be-aligned anchor (the original grid coordinate before the nudge). At 8% opacity. - AVOID generic CTAs, signup banners, pricing tiers, "feature cards." There is one mailto link in the footer: "write to the daybook keeper." - Storytelling beats: title declares "a daybook for ordinary opulence"; today's entry meditates on today's daisy; the cultural-pattern strip pauses the reader; yesterday's entry contrasts gracefully; a week of daisies scatters across the grid; the keeper signs off. - Opulent-grand voice: "today, the daisy is more beautiful than yesterday's daisy." "yesterday's daisy is in the garbage. that, too, is beautiful." "the keeper records these things in the daybook with honey, with care, with great pleasure." ## Uniqueness Notes **Differentiators from other designs:** 1. **Muji surface with opulent-grand voice:** Visual restraint (cream paper, narrow tonal range, no saturated accents) paired with opulent text content creates the central contradiction: a luxurious sensibility wearing a humble cardigan. 2. **Broken-grid that documents its own brokenness:** The 1px alignment-ghost crosses behind each broken-grid element show where the alignment would be -- the disorder is annotated, not hidden. 3. **Honeyed-neutral palette within 30 degrees of hue:** The tonal discipline is rare; most muji-influenced designs sit at gray-cream, not honey-cream. The narrow palette range itself is the opulence. 4. **Playful-rounded type as the entire body system:** Quicksand at body sizes (19px) is unusual; most playful-rounded fonts serve only display. Carrying body weight slows the reading and softens the broken-grid. 5. **Blur-focus on the whole page except body text:** Reading is rewarded with crispness; everything else is gently out of focus. This makes the page literally show attention rather than demand it. **Chosen seed:** muji broken-grid playful-rounded honeyed-neutral blur-focus abstract-shapes cultural opulent-grand -- planned seed from assignment. **Frequency-aware choices:** `muji` (1%), `broken-grid`, `playful-rounded`, `honeyed-neutral`, `blur-focus`, and `cultural` motifs are all uncommon. Avoids overused `playful`, `corporate`, and `photography` patterns. Quicksand at body sizes avoids the dominant Inter / Space-Grotesk pairing.