# Design Language for nanohana.moe ## Aesthetics and Tone nanohana.moe is an **art-deco** rapeseed-flower almanac — a Cassandre-influenced visual ode to the yellow nanohana (canola) fields of Awaji Island, told in stepped fan-arcs, sunburst rays, and bronze-foil rules. The aesthetic invokes the 1925 Paris Exposition and the streamline moderne of the 1930s, but warmed into a hand-drawn, **friendly** register — every angular fan-arc has a soft sketch line beside it, every chevron has a tiny ink-blot like a friendly typo. The tone is **friendly** — the page introduces itself, names its mountains, makes small jokes. Inspiration draws from Cassandre's *Étoile du Nord* and *Normandie* posters, the stepped Chrysler Building crown, the sunburst chevrons of Erté, and the soft watercolor mountain studies of Hasui Kawase. Visiting feels like opening a 1928 travel brochure that has been gently scribbled in by a tour guide who likes you. ## Layout Motifs and Structure The architecture is **asymmetric** — content is arranged on a 12-column grid where every section deliberately violates symmetry by one or two columns: section A occupies columns 1–7 with a sun-arc decoration in 8–12; section B is columns 4–11 with chevrons sliding off the right edge; section C straddles columns 2–9 with a stepped Art Deco fan-arc anchored to the bottom-right. Five sections in total: *the fields*, *the mountains*, *the festival*, *the recipes*, *the address*. Each section has a one-third-page Art Deco panel (stepped fan-arc, sunburst, ziggurat-stack) anchored to one corner, with hand-drawn marginalia overlaid on top. The page scrolls vertically and uses a **shake-error** pattern on form errors and missing-field interactions — a gentle, comedic 1925 telegram error. ## Typography and Palette **Typography** is led by Manrope Variable (the **sans-grotesk** brief): Manrope 800 at 144pt for section titles set in stacked vertical columns of letters (Art Deco style — vertically stacked single-letter columns for "N A N O H A N A"), Manrope 500 at 19px / 1.6 for body, and Manrope 700 at 13px tracked +200 uppercase for section labels. A display secondary, Limelight at 72pt, is used only for stylized chapter numerals (I, II, III, IV, V) embedded in the Art Deco panels. Hand-drawn marginalia in Caveat at 18px italic for the "tour guide" voice. Tabular figures for date stamps. **Palette** is **triadic** — yellow, blue, brown: - `#FFEED2` — paper cream (page ground) - `#FFC940` — nanohana saturated yellow (primary, key Art Deco panels) - `#F2A521` — burnt yellow (secondary, sunburst shadows) - `#1E3A5F` — Awaji-night blue (typography ground, mountain silhouettes) - `#2D6E8F` — bay blue (secondary blue, chevron lines) - `#7B4A2A` — bronze-leather brown (third triadic, Art Deco bronze rules) - `#0F1418` — ink-black (typography on cream, sketch lines) - `#FFFFFF` — pure white (sunburst rays, paper highlights) The triadic spokes (yellow, blue, brown) are balanced — the Art Deco geometry uses all three in roughly equal area. ## Imagery and Motifs Imagery is built around **hand-drawn** ink illustrations — a stylized nanohana stem repeated as a chapter end-mark, hand-drawn maps of Awaji Island in a single ink line, sketched mountain ranges, and friendly little fox-and-bee marginalia. Art Deco geometric panels (stepped fan-arcs, sunburst rays, ziggurat stacks, chevron bands) are rendered as crisp SVG behind the hand-drawn motifs — the collision of geometric Deco and hand-drawn warm is the site's visual signature. **Mountain-landscape** motifs feature heavily: a Hasui-style two-layer mountain silhouette runs across the bottom of every section in deep blue, gradually paler toward the back row. Decorative furniture includes bronze-foil hairline rules between sections, hand-lettered "Awaji 1925" stamps, and a recurring nanohana glyph (a stylized flower star) used as a section divider. No photographs. ## Prompts for Implementation Build an asymmetric Art Deco almanac with hand-drawn warmth. The signature visual element is the **stepped fan-arc** panel: a 5-stop SVG that draws nested ¼-arcs in nanohana-yellow, burnt yellow, and bronze brown, anchored to one corner of each section, sized 38% of viewport width. Section titles are stacked-letter columns (CSS `writing-mode: vertical-rl` with each letter `text-orientation: upright`) in Manrope 800 144pt. The signature interaction is **shake-error**: on form validation failure or missing-field detection, the offending element gets a `keyframes shake` with translateX(-6px, +6px, -4px, +4px, 0) over 360ms, accompanied by a small hand-drawn "!" appearing 12px to the right with a 200ms scale-in. Body marginalia in Caveat is drawn as SVG paths (not just italic text) where possible, so the "guide's handwriting" actually wobbles. Mountain silhouettes at the bottom of each section parallax at 0.6× scroll speed, with the back layer at 0.4×, creating depth. Avoid CTA stacks, pricing menus, signup ladders, stat grids — this is a travel brochure, not a product. The footer is a hand-lettered Caveat phrase over a stepped fan-arc: "nanohana.moe — Awaji, April, never forget the bees." ## Uniqueness Notes - **Differentiator 1:** Art Deco geometry collided with hand-drawn marginalia — almost no design in the registry pairs `art-deco` aesthetic with `hand-drawn` imagery and a `friendly` tone. - **Differentiator 2:** Stacked-letter vertical title columns (CSS `writing-mode: vertical-rl` + `text-orientation: upright`) — a genuine 1925 typographic motif rarely seen on modern web. - **Differentiator 3:** Shake-error reframed as a comedic 1925-telegram interaction rather than a stiff form-validation flash. - **Differentiator 4:** Triadic palette of yellow/blue/brown in equal area — no dominant color, three Cassandre-spokes balanced. - **Differentiator 5:** Mountain-landscape silhouettes parallax in two layers at different scroll speeds — Hasui-Kawase depth applied to a Deco page. - Planned seed: aesthetic=art-deco, layout=asymmetric, typography=sans-grotesk, palette=triadic, patterns=shake-error, imagery=hand-drawn, motifs=mountain-landscape, tone=friendly. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.