# Design Language for haru.plus ## Aesthetics and Tone haru.plus is a **midnight vaporwave pastoral** — picture a Japanese spring field (haru = 春, spring) seen at 3 a.m. through the glow of an old CRT television. The site behaves like a slow night-train window: meadows of wireframe wheat scrolling past, paper lanterns drifting, a chrome sun that never quite sets behind a low ridge of mountains rendered as a single hard polyline. The tone is **pastoral-romantic but nocturnal** — letters written to someone far away, soft and unhurried, yet wrapped in the cold synthetic shimmer of late-80s computer graphics. Nothing screams; everything hums. The vibe word is "yokan" (a premonition of spring) crossed with "after-hours arcade." We deliberately reject the hot-pink-and-cyan cliché of mall vaporwave: this is vaporwave cooled to indigo, the temperature of a lake before dawn. Grain is present but gentle, like film, not noise. The whole experience should feel like opening a music box that plays one note per scroll tick. ## Layout Motifs and Structure The page is a stack of **modular blocks** — discrete, generously-padded panels that snap together like a child's wooden blocks, each one its own little world. No edge-to-edge bleed; instead every block floats on a deep midnight ground with a 24px–48px gutter of breathing space around it, so the page reads as a *column of separate postcards* rather than a continuous scroll. - **Block grid:** a 12-column conceptual grid, but blocks only ever occupy 4 / 6 / 8 / 12 columns — never odd spans — reinforcing the snap-together toy-block feel. - **Sharp-angle seams:** where two blocks meet, the divider is never a straight horizontal line. Each block has a single hard diagonal cut on its top or bottom edge (a `clip-path` chevron or 8–18° slash), so the column looks like shards of glass laid in a tray. Corners of blocks alternate between fully rounded (border-radius 28px) and razor-cut 90° points — the contrast of pillow-soft and knife-sharp is the signature. - **Opening sequence:** a full-viewport "platform 0" block — the night-train window — then the column begins. Navigation is a single floating rounded pill, lower-left, with three dots; clicking expands it into a small vertical menu, never a top bar. - **Rhythm:** blocks are sized to roughly 70–90vh so one block ≈ one screen, encouraging a deliberate, page-turning scroll. A thin progress filament runs down the left margin like a kite string. - **No CTA walls, no pricing tiers, no stat grids.** Where lesser sites would put "Sign up free," haru.plus puts a block containing one drifting lantern and one line of verse. ## Typography and Palette **Fonts (all Google Fonts):** - **Display / headings:** `Fredoka` — playful-rounded, bubbly terminals, used at large sizes for block titles. Letters set wide, almost balloon-like, in the chrome treatment. - **Secondary display / Japanese accents:** `Baloo 2` — for short interstitial words and the occasional kana-styled Latin word; rounder and softer than Fredoka, used at medium size. - **Body / verse:** `Quicksand` — geometric, rounded, airy at 400 weight; line-height 1.9 to give the pastoral letters room to breathe. - **Micro-labels / timestamps:** `M PLUS Rounded 1c` at 500 — tiny rounded sans for captions, the kite-string progress numerals, and the nav pill. **Palette (midnight-blue core, vaporwave chrome accents):** - `#0B1026` — **midnight ground** (the deep page background, almost black-blue) - `#141B3C` — **dusk panel** (default block fill, one shade up from the ground) - `#1E2A5E` — **indigo ridge** (block fill variant, the mountain silhouette color) - `#7C83FF` — **periwinkle glow** (primary accent — links, active states, lantern light) - `#A5C8FF` — **frost blue** (secondary text, wheat-wireframe lines, the kite filament) - `#F2C6DE` — **dawn rose** (a single muted pastoral pink, used *sparingly* — petals, one heart, the chrome sun's underside) - `#FFE8B0` — **lantern cream** (the warm point-light color inside lanterns and the rising-sun core) - `#EAF0FF` — **paper white** (display text, the brightest tone, used only for big rounded headings) Gradients are allowed but kept cool: periwinkle→indigo→midnight, or a thin chrome strip (frost-blue → paper-white → periwinkle) on the sun and on hovered block edges. Text is overwhelmingly frost-blue and paper-white on dusk panels; dawn-rose appears maybe three times in the whole page, like a held breath. ## Imagery and Motifs Imagery is **minimal and constructed, never photographic** — everything is drawn with CSS and SVG so it stays crisp and synthetic: - **Wireframe spring meadow:** an SVG of wheat / tall grass drawn as thin frost-blue strokes only — outline, no fill — swaying with a slow CSS keyframe. It tiles along the bottom of two or three blocks. - **The chrome sun:** a low semicircle with a horizontal chrome-strip gradient and 3–4 thin horizontal slits (classic outrun sun) — but recolored to lantern-cream + dawn-rose + frost, sitting behind the indigo ridge polyline. - **Sharp-angle mountains:** the ridge is one bold `polyline` of hard zig-zag peaks — no curves — in indigo-ridge color, sometimes mirrored as a faint reflection below. - **Paper lanterns:** simple rounded-rectangle SVGs with a soft inner glow (lantern-cream), 2–4 of them drifting at different parallax depths, each with a thin string. - **Floating shards:** small triangular and trapezoidal glass slivers (sharp-angles motif) that drift slowly upward in the background of dark blocks, catching faint chrome highlights — the cold counterpoint to the soft lanterns. - **Falling petals:** dawn-rose teardrop shapes, very few, very slow — pastoral romance, rationed. - **Grid horizon:** a single perspective grid (vaporwave staple) appears in *one* block only — the floor of the "platform 0" opening — drawn in frost-blue, fading into the midnight ground. - **Iconography:** all icons are rounded-stroke line icons (matching Quicksand/Fredoka roundness), 1.75px stroke, periwinkle. ## Prompts for Implementation - Build it as **one tall scroll of modular block sections**, each a `
` with its own background panel, generous padding (clamp 2.5rem–5rem), and a `clip-path` chevron/slash on at least one edge. Alternate which corners are rounded vs. sharp from block to block. - The hero ("platform 0") is **full-viewport**: midnight sky, perspective grid floor, chrome sun behind a hard zig-zag ridge, two drifting lanterns, big `Fredoka` title with a subtle chrome-strip text gradient and a slow shimmer sweep. Below it a single line of `Quicksand` verse — pastoral, like the first line of a letter ("Came back to find the field still here, still blue."). - **Lottie animations are the centerpiece of motion**: embed `lottie-web` (or `dotlottie`) and use it for (a) the lanterns gently bobbing and the flame flickering, (b) a petal-fall loop, (c) a small "music box" mark near the footer that winds when scrolled into view, (d) the nav pill's dots blooming into a menu. Each Lottie is recolored to the palette above — keep them subtle, low-amplitude, looping forever; the page should feel *alive but sleepy*, never busy. - Scroll-trigger each block to rise 24px and fade in over ~700ms with a soft ease; stagger child elements by 60ms. Parallax the lanterns and glass shards at 3–4 different speeds. As blocks enter, their sharp-cut edge can "draw" with a quick SVG path-draw. - **Storytelling spine:** the blocks form a single nocturnal journey — *arrive at the empty platform → board → fields scroll by → pass the chrome sun and zig-zag ridge → lanterns gather → the music box → a closing block that is just the meadow wireframe, one lantern, and the last line of the letter.* The site is the journey, not a brochure of it. - Microtype: numerals on the left-margin kite filament tick up as you scroll, in `M PLUS Rounded 1c`. Links underline with a rounded periwinkle stroke that draws left-to-right on hover. - **AVOID:** CTA-stacked hero buttons, pricing/plan blocks, stat counters and number grids, testimonial carousels, feature-card grids of identical tiles, dense top navigation bars, stock photography of any kind, hot-pink/cyan Miami vaporwave clichés. If a section feels like a landing page, replace its content with a lantern and a line of verse. ## Uniqueness Notes Differentiators from other designs in this batch: 1. **Cooled-down vaporwave** — outrun sun, perspective grid and chrome strips re-tinted to a midnight-blue + periwinkle + lantern-cream key, rejecting the ubiquitous neon-pink/cyan vaporwave palette; only one rationed dawn-rose accent. 2. **Toy-block column, not a flowing scroll** — discrete modular blocks floating on a deep gutter, each with a hard diagonal `clip-path` seam and alternating rounded-vs-razor corners; no full-bleed continuity anywhere except the opening hero. 3. **Soft × sharp tension as the whole identity** — pillow-rounded Fredoka/Baloo/Quicksand typography and bobbing lanterns set against zig-zag polyline mountains and drifting glass shards (sharp-angles motif); roundness and knife-edges share every screen. 4. **Lottie-driven, sleepy motion** — animation is carried by recolored Lottie loops (lanterns, petals, a wind-up music box, the nav pill) rather than scroll-jank or video; the site is "alive but half-asleep." 5. **Letter-as-journey content model** — a nocturnal night-train narrative spine with pastoral-romantic verse fragments instead of CTAs, pricing, stat grids, or feature cards. Chosen seed/style: aesthetic: vaporwave, layout: modular-blocks, typography: playful-rounded, palette: midnight-blue, patterns: lottie-animation, imagery: minimal, motifs: sharp-angles, tone: pastoral-romantic. Avoided per frequency analysis: hand-drawn aesthetic (96%), glassmorphism (64%), photography imagery (99%), full-bleed (94%), card-grid (86%), centered (83%), gradient/warm palettes (97%), parallax-as-everything / cursor-follow / spring / stagger / magnetic over-reliance (79–96%), mono typography (95%). Leaned into the underused: vaporwave (11%), modular-blocks layout (3%), playful-rounded type (3%), midnight-blue palette (6%), lottie-animation (3%), minimal imagery (15%), sharp-angles motif (3%).