# Design Language for hinagiku.day ## Aesthetics and Tone The governing image: a single white daisy ("hinagiku") lit by a thin strip of neon in an otherwise unlit room — and the room is a Muji shelf. Stark, near-empty space. Almost nothing on it. But what *is* there is precisely placed, honest about its materials, and quietly humming with one cold band of electric light. This site treats **one day** as the subject. Not "today's news," not a calendar app — a *meditation on the passage of a single day*, sectioned into compartments the way a Muji drawer organizer divides a desk: each compartment holds exactly one thought, one numeral, one waveform. The aesthetic collision is deliberate: **muji** restraint (raw paper-grey surfaces, no ornament, generous void) crossed with **dark-neon** punctuation (one — only one — accent hue per compartment, glowing faintly as if backlit). Think of a Japanese stationery store at 3 a.m. with the security lighting on. - **Mood:** calm, exact, faintly nocturnal. Unhurried. The tone is **minimal** in the truest sense — every sentence is short, every label is one word, nothing is sold, nothing shouts. The neon is not "energetic"; it is the patient pilot-light of something left running overnight. - **Emotional arc:** stillness → a small bloom of warmth (the daisy, the neon) → stillness again. The visitor should leave feeling *organized*, the way a tidied drawer feels. - **Anti-mood:** no dopamine, no hype, no parallax theme-park, no "scroll to be amazed." The amazement is in the *spareness*. - **Reference points:** Muji's own packaging grids; Dieter Rams shelving; a synthesizer's VU meters glowing in a dark studio; pressed-flower specimen cards; the cold blue of a fridge light. ## Layout Motifs and Structure The page is a **bento-box** grid — literally a lacquered compartment tray viewed from above. A fixed (or near-fixed) **CSS Grid of unequal rectangular cells** fills the viewport on load: a couple of large "hero" compartments, several medium ones, a row of small square ones along the bottom. No traditional header, no nav bar, no footer-of-links. The grid *is* the navigation: each cell is one facet of "the day." - **The tray:** an outer frame of ~24px matte-grey "lacquer" border with softly rounded inner corners (radius ~14px on each cell), and a 2px dark gutter between every compartment so each one reads as physically separate — like real bento dividers. The gutter never animates; it is the still skeleton everything else lives inside. - **Cell roster (suggested):** 1. **大 — THE DAY** (largest, top-left): the word "today" set in **oversized-display** type that bleeds past the cell's padding; below it, a live ticking time in mono. 2. **大 — THE BLOOM** (large, right): the daisy rendered as flat **vector-art** line geometry, its center a slowly pulsing neon dot. 3. **中 — DAWN / NOON / DUSK / NIGHT** (four medium cells, or one medium cell that cycles): each holds a single **waveform** drawn in SVG, its amplitude and accent colour shifting per phase of day. 4. **中 — A SENTENCE** (medium): one short line of prose about the day, max ~12 words, centered, lots of air. 5. **小×N — THE HOURS** (a strip of small squares): 6–8 tiny tiles, each just a two-digit hour numeral; on hover the active hour's neon underglow brightens and a faint waveform animates inside it. - **Negative space is a material.** At least one compartment is *intentionally near-empty* — just a centered dot, or a single faint horizontal line — to let the grid breathe. Muji would leave the shelf half-bare; so do we. - **Responsive behavior:** on narrow screens the bento *re-stacks* into a single vertical column of compartments (still guttered, still rounded) — never a cramped 2-up squeeze. The tray frame stays. - **Scroll discipline:** ideally the whole composition fits one viewport (a "tray you look down into"). If content overflows on small screens, scrolling is plain and slow — no scroll-jacking, no parallax layers. ## Typography and Palette **Typography** — all from Google Fonts: - **Display / hero numerals & "today":** **"Archivo Black"** — a heavy, wide, almost industrial grotesque; set ENORMOUS (clamp up to ~14vw), letter-spacing slightly negative, often clipped by its cell's edges so it feels *bigger than the box*. This is the **oversized-display** voice. (Alternate acceptable: **"Anton"** for an even more condensed shout, but Archivo Black's width suits the bento squares better.) - **Body / labels / the one sentence:** **"Inter"** (Regular & Light) — neutral, Muji-clean Swiss-ish humanist sans. Small sizes, generous line-height (~1.7), labels in small-caps tracking. - **Mono / timestamps / hour numerals / "system" whispers:** **"DM Mono"** — used tiny and tracked-out for the live clock, the "06:00" style stamps, and any micro-caption. Reinforces the quiet-instrument feel. - **Type rules:** at most these three families. No italics except a single optional italic line in Inter for the daisy's caption. Headlines are flush-left or dead-centered within their cell — never both on the page. **Palette** — **dark-neon**: a near-black raw-paper base, warm-grey "lacquer" mid-tones, and a small kit of neon accents used *one per compartment*, never together at full strength: - `#0B0C0E` — **sumi black** — the deepest cell backgrounds / the void between compartments. - `#15171A` — **charcoal tray** — default compartment fill. - `#2A2D31` — **graphite divider / lacquer frame** — gutters, borders, inactive strokes. - `#9AA0A6` — **paper grey** — primary body text on dark; the "Muji label" colour. - `#ECECEA` — **off-white / daisy petal** — the flower's line-art, the oversized "today", high-emphasis text. - `#3DF5C4` — **mint neon** — accent A (dawn / the daisy's center pulse). - `#FF4D8D` — **bloom pink neon** — accent B (noon / the one sentence's underline). - `#5B8CFF` — **cobalt neon** — accent C (dusk). - `#C77DFF` — **ultraviolet neon** — accent D (night / hover glows on the hour tiles). Neon is applied as **thin strokes, small dots, and soft outer glow** (`box-shadow`/`filter: drop-shadow` at low spread) — never as large fills. The page should read ~85% greyscale, ~15% glow. ## Imagery and Motifs - **The daisy (hinagiku)** — the single hero illustration, drawn as **vector-art**: a clean ring of ~12 overlapping ellipse-petals in 1.5px off-white stroke, a stippled or concentric-ring center, sitting on a single straight stem. Flat, geometric, never a photograph, never cute clip-art. Its center dot carries the mint-neon pulse. It may appear at small scale once more as a "favicon-like" mark in a tiny cell. - **Wave-forms** — the recurring decorative system. Each "phase of day" cell holds an SVG **waveform**: a horizontal baseline with a single smooth sine-ish swell whose amplitude grows toward noon and flattens toward night, stroked in that cell's neon accent. They double as quiet dividers. Optionally one waveform very faintly (6–10% opacity) bleeds across the gutter behind several cells, tying the tray together. - **The numeral-as-ornament** — the oversized hour digits and the giant "today" *are* the decoration; treat them as graphic shapes, letting them crop at compartment edges like a magazine masthead. - **Skeleton placeholders as aesthetic** — see implementation; the loading state's grey blocks are part of the visual language, not a stopgap. - **Almost no icons.** If any: hairline 1.5px line-icons only (a tiny sun-arc, a tiny moon-crescent), monochrome paper-grey, never filled, never coloured unless "active." - **Texture:** the merest hint of fibrous paper grain on the lacquer frame (subtle SVG noise at ~3% opacity). Otherwise surfaces are flat matte. No gradients-as-decoration; if any gradient exists it is a 4–6% vignette in a cell to suggest depth in the "drawer." ## Prompts for Implementation - **Build the bento first, content second.** Start from a CSS Grid (`grid-template-areas` is ideal here) that lays out the unequal compartments; give every cell `border-radius`, a `1px`/`2px` divider via gap + background, and `overflow: hidden` so oversized type clips at the edges. The tray frame is a fixed-size padded wrapper with a slightly lighter matte border. - **Skeleton-loading is the entrance, not a fallback.** On first paint, render *every* compartment as a featureless `#1d1f23` block with a slow, low-contrast shimmer sweeping left→right (a `linear-gradient` keyframe at ~1.6s, eased, **not** flashy). Then, **compartment by compartment, staggered ~120ms apart**, each skeleton dissolves and its real content fades/settles in: first "today" types in, then the daisy's petals draw on, then each waveform animates its amplitude up from a flat line, then the hour tiles pop in last. The whole reveal should feel like a drawer organizer being *filled*, calmly. Respect `prefers-reduced-motion`: skip shimmer & stagger, show content immediately. - **Living, quiet motion only.** The daisy's neon center should pulse on a slow ~3.5s ease (opacity & glow radius, tiny scale). The "today" clock ticks in DM Mono. The phase-of-day cell may slowly cross-cycle DAWN→NOON→DUSK→NIGHT every ~12–20s, swapping accent colour and re-animating its waveform — a slow tide, never a carousel. Nothing bounces, nothing slides aggressively, no cursor-trail particle storm. - **Hover = a compartment "lights up."** Hovering any cell raises its neon underglow from ~0 to a soft bloom and brightens its accent stroke; the giant numerals get a faint chromatic edge. Hour tiles additionally animate a tiny waveform inside on hover. Transitions ~200–280ms ease-out. No 3D tilt, no flip. - **Waveforms via inline SVG ``** so they can be animated (stroke-dashoffset draw-on, then a subtle `d`-morph or `transform: scaleY` breathing). Keep stroke widths 1.5–2px; apply `filter: drop-shadow(0 0 6px )` for the neon. - **Storytelling stance:** this is a *full-screen contemplative artifact*, not a marketing page. The "narrative" is the day moving through the tray — dawn warming the waveforms, the daisy opening, dusk cooling the palette to cobalt, night going ultraviolet. Let the visitor just *sit in the grid*. - **AVOID:** call-to-action buttons, sign-up forms, pricing tables, feature comparison grids, stat counters, testimonial carousels, hamburger menus, sticky headers, hero "Get Started" bars. There is nothing to buy and nothing to click toward. AVOID large neon fills, rainbow gradients, glassmorphism panels, drop-shadow-heavy cards, parallax scenes, and decorative stock photography. ## Uniqueness Notes Differentiators from other designs in the set: 1. **"Muji shelf at 3 a.m." — restraint *plus* a single cold neon pilot-light.** Most dark-neon designs go cyberpunk/Y2K/maximal-glow; this one is ~85% matte greyscale with neon used only as thin strokes, dots, and faint underglow — one accent per compartment, never a wash. Muji minimalism wearing one LED. 2. **Bento as a literal lacquered compartment tray, viewed top-down, ideally one viewport.** Not "card grid with rounded corners" — a real divider/gutter skeleton where *one cell is deliberately left near-empty* as negative-space material, and oversized display type is allowed to clip past compartment edges. 3. **Skeleton-loading reframed as the choreographed *entrance* of the whole site** — staggered compartment-by-compartment reveal that mimics a drawer organizer being filled — rather than a throwaway spinner state. Plus a slow DAWN→NOON→DUSK→NIGHT tide that recolours the tray. 4. **Subject = "one day" as a contemplative object** (not news, not a calendar app): waveforms as the day's pulse, a vector daisy as its bloom, oversized numerals as masthead-scale ornament. Tone is genuinely minimal — one-word labels, max-12-word sentence, zero CTAs. 5. **Type system of exactly three Google fonts** — Archivo Black (oversized-display), Inter (Muji-label body), DM Mono (instrument whispers) — with no italics and no font soup. Chosen seed / style: **aesthetic: muji, layout: bento-box, typography: oversized-display, palette: dark-neon, patterns: skeleton-loading, imagery: vector-art, motifs: wave-forms, tone: minimal.** Avoided per frequency analysis: no hand-drawn/glassmorphism aesthetic (96% / 66% — way overused), no photography imagery (99%), no full-bleed/card-grid/centered default layout reflex, no gradient/warm palette default (98% each), no parallax/cursor-follow/spring/stagger-as-primary-gimmick patterns (96–80%), no mono-as-only-typeface cliché (95% — mono is present but tertiary), no pastoral-romantic/warm-inviting tone (36% / 28%). Leans into underused: muji (2%), oversized-display (3%), dark-neon (5%), skeleton-loading (3%), vector-art (3%), wave-forms (2%), bento-box (14%), minimal tone.