# Design Language for nanohana.moe ## Aesthetics and Tone nanohana.moe is a **digital field-notebook for the canola bloom** — the *nanohana*, the rapeseed flower that turns whole hillsides of Japan into a level sea of acid-yellow for two short weeks in March. The site is not a celebration of that yellow as decoration; it is a **slow botanical observance**, the way a single naturalist would sit at the edge of one field and record the same square meter at dawn, noon, and dusk over the course of a season. The dominant register is **japanese-minimal meets dry-pressed herbarium sheet**: enormous quiet, enormous white, a near-monochrome page of warm paper and ink — and then, sparingly, deliberately, the *one* color the whole site has been withholding: a flat, almost chemical canola yellow that arrives like the smell of the field hitting you before you see it. The tone is **zen-contemplative**, but it is the zen of *attention*, not the zen of emptiness — there is a great deal happening on this page, it is simply happening at the speed of a flower opening. Nothing is "delightful." Nothing winks. The yellow is never used for buttons, never for emphasis, never for hover states; it appears only where an actual blossom would be, and only when the page's internal clock says the bloom is open. When the bloom is closed (the site has a quiet day/night cycle tied to the visitor's local hour), the entire page is ink-on-paper, and the yellow is just a faint absence — a pencil outline of where it will be. This is a website that asks you to come back at a different time of day. Inspiration: Karl Blossfeldt's *Urformen der Kunst* plates; the *oshibana* pressed-flower tradition; Hiroshi Sugimoto's seascapes (one horizon, repeated); the cataloguing pages of an old Makino *Illustrated Flora of Japan*; the way a single column of haiku sits on an otherwise blank tanzaku card. Reference points end there — no mood-boarding past those. ## Layout Motifs and Structure The page is a **single horizontal field**, scrolled left-to-right (`horizontal-scroll`), because a canola field *is* a horizon — it has width, not depth. The visitor moves along the edge of one continuous field from one end of the season to the other. There is **no card grid, no bento, no hero block, no nav bar.** Vertical scroll does nothing; the wheel and trackpad are remapped to lateral travel with a long, low-friction ease (no spring, no bounce, no magnetic snap — it coasts and settles like a boat). **Structural skeleton — six "stations" along the field, each one full-viewport-width:** 1. **Station 01 · 立春 — The Ground** (Risshun / first stirrings). Bare warm-paper viewport. A single hairline drawn across the lower third: the soil line. One seed, drawn as a 2px ink dot, sits on it. The site title `nanohana` is set very small in the upper-left, vertical (top-to-bottom, like a book spine), and never moves for the rest of the visit. 2. **Station 02 · 萌芽 — Germination.** As you arrive, an SVG path *draws itself* (`path-draw-svg`) from the seed-dot: a thin cotyledon, two leaves, a stem. No fill yet. Pure line. 3. **Station 03 · 群落 — The Colony.** The single plant repeats — 40, then 400, then a stipple-field of plants receding to the horizon line, all still in ink outline. This is the "stat" station, but it is told as *density*, never as a number-grid: the count is felt as the page getting busier, not as "400 plants" in big type. 4. **Station 04 · 開花 — Anthesis.** The yellow finally arrives — but only if the visitor's local clock is between roughly 6am and 6pm. Each outlined blossom-cluster fills with the flat canola yellow in a slow staggered cascade left-to-right (`stagger`, `scroll-triggered`), like sunlight crossing the field. If it's night for the visitor, the blossoms stay as empty outlines and a single line of small text near the soil reads *"the field is sleeping — come back when it's light where you are."* 5. **Station 05 · 余白 — Ma.** A deliberate near-empty viewport: just the horizon line, a wide band of nothing, and one floating fragment of text — a translated line from a Bashō or Buson spring hokku, set small, centered, with vast `ma-negative-space` around it. The yellow does not appear here at all, even in daytime. This is the exhale. 6. **Station 06 · 採種 — Going to Seed.** The blossoms drain of color from left to right; outlines thicken into seed-pods; pods split; the field returns to ink dots on the soil line — back to Station 01's single seed, but now there are hundreds. The "footer" is just this: the field gone quiet again, and the title still sitting vertical in the corner. No links, no copyright cluster, no social row. A slim **progress horizon** runs along the very bottom of every station — a 1px ink rule that fills with yellow from left to right as you travel, so the bottom edge of the screen is *itself* a tiny canola field filling in. That is the only persistent UI besides the spine-title. ## Typography and Palette **Type system — Google Fonts only:** - **Display / Latin headings — `Fraunces`** (variable; used at its softer optical sizes, weight 300–400, with the "soft" SOFT axis dialed up where the variable face allows). Fraunces is a `serif-revival` face with a wobbly, hand-cut warmth and gorgeous swashy italics — it reads like the engraved caption under a botanical plate, not like a magazine masthead. Used for the six station names' Latin transliterations (*Risshun*, *Anthesis*, *Ma* …) and for the one hokku fragment, always in italic, always small-to-medium, never huge. - **Japanese — `Shippori Mincho`** (weights 400–600). A modern Mincho with a calm, slightly old-fashioned print texture; carries the kanji station markers (立春, 萌芽, 群落, 開花, 余白, 採種) set *vertically* (CSS `writing-mode: vertical-rl`) beside each station. This is the only place vertical type appears besides the spine-title. - **Captions / micro-labels / the "field is sleeping" line — `Zen Kaku Gothic New`** (weight 300/400). A quiet, even-textured humanist sans (a `humanist` choice but a deliberately under-seen one — not Inter, not Work Sans); used at 11–13px with `letter-spacing: 0.04em` for the few utilitarian strings on the page. Never used large. Type is **never animated kinetically** — no typewriter, no scramble, no morph. The only motion type performs is fading in slowly when its station enters frame. **Palette — a withheld-color scheme (high-contrast, near-monochrome + one note):** - `#F4F0E6` — **Komezu paper.** The base field. A warm, faintly grey-green off-white, like rice paper that's seen one summer. - `#FAF7EF` — **Bleached margin.** A lighter paper tint for the `ma` station and the topmost sky-band. - `#23211B` — **Sumi ink.** Near-black warm charcoal. Every line, every outline, every glyph. Never pure `#000`. - `#7C7763` — **Faded pencil.** A muted khaki-grey for secondary lines, the dormant (night) blossom outlines, and micro-labels. - `#E8C200` — **Nanohana yellow.** The withheld color. A flat, slightly green-leaning chrome-yellow — *not* a warm honey-gold, *not* a gradient. It appears only as solid fills inside blossom shapes during the daytime cycle, and as the fill of the bottom progress-horizon. It is forbidden everywhere else. - `#B79A00` — **Pollen shadow.** A darker mustard, used at ~20% opacity only as the soft cast-shadow beneath open blossom clusters, so the yellow has weight. No gradients anywhere except a single, almost-invisible 4%-opacity vertical wash at the top of each station that suggests "sky" above the field. The contrast model is stark: ink on paper, with yellow as a binary event. ## Imagery and Motifs **No photography.** Everything is **line-illustration drawn as SVG** in Sumi ink, in the flat, frontal, specimen-plate style of a herbarium sheet — every plant drawn as if pressed and pinned, slightly too symmetrical, captioned. - **The single canola plant** (Station 02–03): one master SVG — taproot, two cotyledons, a lyrate basal leaf, a branching raceme tipped with four-petalled cruciferous blossoms (botanically correct: *Brassica* flowers have 4 petals in a cross — this *cross* shape becomes a quiet recurring motif). Drawn with a living, slightly uneven 1.6px stroke (not a perfect vector — give it a hand-cut wobble via tiny path irregularities). - **The colony** (Station 03): the master plant instanced and scaled down into a stipple-field — near, midground, and a dotted blur at the horizon. Density, not duplication-as-decoration. - **The four-petal cross** as a structural micro-motif: used as the station bullet (a tiny 6px ink cross instead of a number or dot), used as the only "icon" on the whole site. - **The horizon line** is sacred — one continuous 1px rule that runs through *every* station at the same vertical position, tying the six panels into one field. Plants grow up from it; pods fall back to it. - **Pressed-flower texture**: in Stations 04 and 06, a faint paper-grain and a few "ghost" outlines of blossoms slightly off-register, as if the sheet was pressed twice — `paper-aged` feel, done with subtle SVG filters, not stock textures. - **Pollen drift**: in the daytime bloom station only, a dozen 1px yellow specks drift very slowly rightward across the field — the *only* particle effect, and so slow it reads as stillness. Decorative restraint is the motif. If something doesn't grow from the soil line, it probably shouldn't be on the page. ## Prompts for Implementation Build nanohana.moe as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a **slow lateral walk along the edge of one canola field, across one season, with a day/night cycle tied to the visitor's local hour.** **Hard exclusions — none of these may appear:** no CTA, no buttons, no pricing, no plans, no stats-grid / counter-animate, no testimonials, no logo wall, no email capture, no newsletter, no contact form, no FAQ, no chatbot, no cookie banner, no card grid, no hamburger menu, no top nav, no footer link cluster, no social row. The only interactive affordance is *travel along the field* (wheel/trackpad → horizontal scroll, plus arrow keys, plus dragging). **Storytelling spine (six stations, horizontal scroll, slow-coast easing):** 1. **Risshun · The Ground.** Open on bare paper. Draw the soil line over ~1.2s as an animating `stroke-dashoffset` path. Place one 2px seed-dot. Set the vertical spine-title `nanohana` upper-left (`writing-mode: vertical-rl`, small, ink). Hold. Let the visitor sit a beat before anything invites scrolling — a single faint `→` micro-glyph fades in near the soil after 3s. 2. **Germination.** On entering frame, animate an SVG path drawing the cotyledons → first leaf → stem from the seed-dot (one continuous path, `stroke-dashoffset` over ~2s, eased like growth — slow start, slower end). No fills. 3. **The Colony.** As the visitor travels right, instance the master plant: a few near, more midground, a stipple of dots at the horizon. Tie instance count to scroll progress so density *grows under the wheel*. Caption it small in Fraunces italic: *"one field — Brassica rapa — counted not in numbers but in mornings."* No big number, ever. 4. **Anthesis.** Compute `isDaylight = (localHour >= 6 && localHour < 18)` at load. If daylight: cascade-fill each blossom outline with `#E8C200` left-to-right via a staggered transition triggered as the station enters view (`scroll-triggered` + `stagger`, ~80ms apart, ease over ~0.6s each), with the `#B79A00` cast-shadow fading in beneath at 20%. Start the slow rightward pollen-speck drift. If night: leave all blossoms as `#7C7763` outlines, drift nothing, and fade in one line of `Zen Kaku Gothic New` near the soil: *"the field is sleeping — come back when it's light where you are."* Also fill the bottom progress-horizon with yellow only in daylight; at night it fills `#7C7763`. 5. **Ma.** A near-empty viewport — horizon line, a wide band of nothing, one centered Fraunces-italic fragment of a translated spring hokku (rotate among 3–4 at load; e.g. *"a field of mustard — / the whale-spouts of spring / rise far at sea"* after Buson). No yellow here, day or night. Generous `ma`: the text occupies maybe 18% of the width, dead center, everything else void. 6. **Going to Seed.** Reverse the bloom: drain blossom fills left-to-right, thicken outlines into seed-pods, split a few pods (small path morph), and let dozens of new seed-dots settle onto the soil line — closing the loop back to Station 01's single seed, now multiplied. End on the quiet field; the spine-title still there; nothing else. No footer. **Persistent UI (the only chrome):** the vertical spine-title `nanohana` upper-left; a 1px ink progress-horizon along the very bottom edge that fills with `#E8C200` (day) or `#7C7763` (night) as you travel — the bottom of the screen is itself a tiny field filling in; and six tiny 6px ink-cross marks along that bottom rule, one per station, the active one slightly larger. That is all. **Motion rules:** everything eases *slow* — entrances are `cubic-bezier(0.16, 1, 0.3, 1)` or slower; nothing springs, nothing bounces, nothing snaps, nothing follows the cursor. The lateral scroll coasts with a long decay. Path-draws and fill-cascades are the headline animations. Honor `prefers-reduced-motion` by skipping the path-draws and cascades and just showing end states (still respecting day/night). Performance and accessibility specifics beyond reduced-motion are out of scope for this brief — bias every call toward the immersive, narrative, single-field experience. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Color as a withheld, time-gated event — not a palette.** Almost every site in the corpus (98% warm, 95% gradient) treats color as ambient decoration. nanohana.moe is ink-on-paper *until the page's clock says the bloom is open*, and even then the yellow appears only inside botanically literal blossom shapes. The signature color can be entirely absent for half of all visitors. No other design makes its hero color conditional on the visitor's local hour. 2. **A horizontal-scroll field with a single sacred horizon line.** Horizontal-scroll is at ~7% and `ma-negative-space` ~14%; combining them as "you are walking the *edge* of one continuous field, and one 1px rule ties all six panels into one horizon" is structurally unlike the card-grid (90%) / centered (84%) / hero-dominant norms. The bottom progress bar literally *is* a miniature canola field filling in. 3. **Herbarium line-illustration, zero photography.** Against 98% photography, this site is entirely SVG specimen-plate linework with a hand-cut wobble, captioned like a Makino flora page — the four-petal *Brassica* cross used as the only icon. No stock imagery, no gradient-mesh, no glassmorphic cards. 4. **Density instead of a stat grid; a hokku instead of a value prop.** The "numbers" station is told as a field getting visually busier under the scroll wheel — never a counter-animate or stat-grid. The "rest" station is a single translated spring hokku in vast negative space, not a testimonial or CTA. **Avoided overused patterns (from frequency analysis):** no hand-drawn UI cuteness (96%), no glassmorphism (79%), no photography (98%), no warm-gradient palette (98%/95%), no parallax (91%), no cursor-follow (89%), no spring (85%), no magnetic (81%), no mono type (94%), no card-grid (90%), no full-bleed hero stacks, no centered single-column default. Underused choices leaned into instead: `horizontal-scroll`, `ma-negative-space`, `japanese-minimal`, `serif-revival` (Fraunces) + Mincho + a less-seen humanist sans, `path-draw-svg`, `scroll-triggered`, `line-illustration`, `paper-aged`, `leaf-organic` / `flowing-curves` motifs, `zen-contemplative` tone. **Chosen seed / style:** `japanese zen portfolio` — realized as *aesthetic: japanese-minimal · layout: horizontal-scroll + ma-negative-space · typography: serif-revival (Fraunces) + Mincho + humanist · palette: monochrome warm-paper + one withheld high-contrast nanohana yellow · patterns: path-draw-svg + scroll-triggered + stagger · imagery: line-illustration + minimal + paper-aged · motifs: leaf-organic + flowing-curves + the four-petal cross · tone: zen-contemplative*.