# Design Language for hinagiku.day ## Aesthetics and Tone hinagiku.day is a **wabi-sabi calendar of one** -- a daily ritual page that lives at the strange intersection of a tea-house tokonoma and a half-corrupted retro-futurist magazine spread. The visual mood is **bold-confident**: each day commands the page like a haiku carved in slab serif onto a weathered wall. Inspirations: Tadao Ando concrete poetry, Aaron Marcus' 1970s information-design pamphlets, NASA Voyager Golden Record graphics, faded enamel signage from rural Japanese train stations, and the dried-flower pages of Kawabata's "Beauty and Sadness." The wabi-sabi here is not soft; it is structural. Cracks, foxing, and asymmetry are deliberate compositional moves. The retro-futurist palette adds heat: orange-amber gradients leak across raw paper textures like a sunset bleeding through old film stock. The tone speaks with the calm authority of a curator reading aloud from a museum label: "today, the daisy faces east." It does not whisper; it states. Yet the slab-serif voice is patient, never urgent. ## Layout Motifs and Structure A **split-screen** layout, but unequal: the dividing line sits at the golden ratio (38.2% / 61.8%) rather than 50/50, with the smaller (left) panel holding the day's marker and the larger (right) panel holding its meditation. The split is permanent throughout the page, scrolling as one continuous tokonoma scroll. - **Left rail (38.2% width, full vertical):** A textured raw-paper background (#e8e2d2 with subtle paper-fiber noise). Holds a vertical stack of: the wordmark "hinagiku.day" in slab serif, the today-date in oversized numerals (clamp(120px, 16vw, 240px)), a hand-drawn ink seal stamp, and a vintage-photograph thumbnail (sepia-grade) of the day's "flower of record." Sticks (sticky) to the top while the right scrolls past it for the first 200vh, then releases. - **Right canvas (61.8% width, full vertical):** A deeper terracotta background (#9c4a26) overlaid with retro-futurist starbursts and arcs at 8% opacity. Holds the day's main composition: a long-form essay in slab serif at 22px / 1.85, a centered vintage photograph that rises out of the page on scroll (parallax at 0.7x), and a closing haiku. - **Micro-interaction strip (sticky bottom, 64px):** A horizontal slim band that registers every section visit. Hovering or tapping cells reveals tiny micro-interactions: a leaf unfurling, an arrow extending, an ink-blot growing -- each lasts 300-400ms. - **No conventional grid below the split:** Inside the right canvas, content is arranged on a 12-row vertical rhythm using `display: grid; grid-template-rows: repeat(12, 1fr);` so that headline, photograph, and quotation all snap to deliberate vertical anchors regardless of viewport. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Roboto Slab" weight 900 at clamp(56px, 9vw, 168px). The blunt rectangular serifs read as carved stone -- bold-confident, unornamented. - **Sub-display:** "Roboto Slab" weight 700 at clamp(28px, 4vw, 56px), letter-spacing -1%. - **Body:** "Roboto Slab" weight 400 at 22px / 1.85. The slab serifs give long reading the gravitas of a museum text panel. - **Italic:** "Roboto Slab" italic, weight 400, for quotations and pull-quotes -- italic slabs are rare and lend a slight handwritten quality. - **Numerals:** "Roboto Slab" weight 900 with tabular figures, used for the giant date and small section numbers. **Palette (retro-futuristic, sun-bleached):** - `#e8e2d2` -- raw paper (left panel background) - `#d6c8a8` -- foxed cream (left panel secondary, age stains) - `#9c4a26` -- terracotta heat (right panel background) - `#c87038` -- amber bleed (gradient warm) - `#f0a45a` -- afternoon glow (highlight) - `#2a1a14` -- ink ground (slab serif on light) - `#f5e9c7` -- petal cream (text on terracotta) The retro-futurist quality comes from the way amber bleeds into terracotta via soft `radial-gradient` overlays at the page edges, evoking faded mid-century rocket-launch postcards. ## Imagery and Motifs - **Vintage photography (sepia-toned):** One central image per day, treated with a sepia/cyan duo-tone (`mix-blend-mode: multiply` on a sepia gradient). Photographs are of nature -- specifically daisies in unusual contexts (in a tea cup, between book pages, on a railway platform). - **Hand-drawn ink seals:** A single red ink-seal stamp per page in the lower-left of the left rail. The seal rotates slightly off-axis each day (random -4 to +4 degrees) and uses a soft Gaussian noise texture for ink bleed. - **Retro-futurist arcs and rays:** Faint background motifs on the right canvas: concentric arcs in afternoon glow at 8% opacity, vintage starburst dingbats at section breaks. - **Nature motifs (botanical record):** Each day features one botanical line drawing as a margin ornament -- daisy varieties drawn in 1px ink, accurate to species (Bellis perennis, Leucanthemum vulgare, Erigeron annuus). - **Foxing and paper grain:** The left rail uses an SVG `` filter at very low frequency (0.05, octaves 1) to simulate paper fibers; on the cream secondary areas, occasional dark foxing spots are placed via small `` elements with `filter: blur(2px)`. - **Micro-interactions of nature:** Hover on the date triggers a 400ms leaf unfurl; hover on the photo triggers a 280ms ink-blot ripple at the cursor point; hover on quote triggers a 320ms typographic weight pulse (400 -> 700 -> 400). ## Prompts for Implementation The site is a daily contemplative spread, read from left rail to right canvas like opening a Japanese fold-out book. Each day's content is a single coherent essay, photograph, haiku, and seal. - The split-screen is a CSS grid: `grid-template-columns: 38.2fr 61.8fr; min-height: 100vh;`. The left rail uses `position: sticky; top: 0` for the first 200vh, then releases. - The today-date numeral on the left rail uses a CSS `font-variation-settings` weight axis animation, breathing slowly from 800 to 900 over 6.4s. Subtle but alive. - Micro-interactions are all CSS-only where possible: hover transitions of 280-400ms, with `cubic-bezier(.2,.8,.2,1)` ease. JS only adds an IntersectionObserver to fire one-time entrance animations. - The photograph parallax uses `transform: translateY(calc(var(--scroll) * 0.7))` driven by a single `scroll` event with rAF throttle. - The amber-on-terracotta gradient is `radial-gradient(ellipse at 80% 20%, #f0a45a 0%, transparent 55%)` plus a second radial at the bottom-left -- two suns, two sunsets, captured at once. - AVOID CTA stacks, pricing components, signup forms, statistic blocks. The site has exactly one interaction beyond reading: a "subscribe by post" mailto link in the footer. - Storytelling: the user lands on today's spread; the date thunders in slab serif; the photograph crossfades from sepia to color over 2.4s on first paint; the curator's essay scrolls past the sticky left rail; the haiku appears in italic slab at the end; the seal stamps down with a 200ms scale-and-rotate. - The bold-confident voice carries through microcopy: "today, May 12, is the day of the meadow daisy"; "we mark the hour with one photograph"; "the daisy faces east; you may face it back." ## Uniqueness Notes **Differentiators from other designs:** 1. **Wabi-sabi rendered as bold-confident structure, not softness:** Most wabi-sabi designs lean into hush and pale. This one keeps the imperfection (foxing, off-axis seals, paper fiber) but pairs it with 168px slab serif and a terracotta canvas, asserting that incompleteness can speak loudly. 2. **Golden-ratio split-screen (38.2/61.8):** Departs from the conventional 50/50 split; the asymmetry itself is a wabi-sabi motif of imbalance-as-beauty. 3. **Roboto Slab as the only typeface, including italics:** Slab serifs rarely shoulder italic body copy; using Roboto Slab italic for quotations creates a tactile handwritten quality not seen in other slab-led designs. 4. **Retro-futurist palette grounded by paper and ink:** Amber-terracotta gradients (retro-futurist) layered over raw-paper textures (wabi-sabi) -- the two aesthetic frames sit on opposite halves of the split, in productive tension. 5. **One photograph per day rule:** A strict single-image discipline that rejects gallery grids; each day is one photograph, one essay, one haiku, one seal. The constraint creates ritual. **Chosen seed:** wabi-sabi split-screen slab-serif retro-futuristic micro-interactions vintage-photography nature bold-confident -- planned seed from assignment. **Frequency-aware choices:** Avoids overused `corporate`, `playful`, and `photography`-only patterns. Uses `wabi-sabi` (3%), `vintage-photography`, `nature` motifs, and `micro-interactions` -- all under-represented. The slab-serif/retro-futurist palette pairing is rare; most slab-led designs use cream/dark or earthy palettes, not heated terracotta-amber.