# Design Language for haru.club ## Aesthetics and Tone haru.club is **a watercolor pool-party flyer that got xeroxed onto a CRT monitor at 3am, then scanned back into watercolor, three times in a row** — until the pigment learned to glow. The domain word *haru* (春 — spring) is read literally: the page is the moment a March puddle catches a fluorescent sign and refracts it into something soft, smudged, and faintly electric. The "club" suffix is read as **an after-school art club**, not a venue — the kind with mismatched chairs, a leaky kettle, and a teacher who lets you ruin paper. So the whole site is the **clubroom bulletin board** at the end of a Friday: pinned watercolors, half-curled, lit by a hum-buzzing tube of magenta neon someone smuggled in. The mood is **approachable-casual** — first-name-basis, "come in, take off your shoes." There is no sales voice, no growth language, no "join the community" CTA. The page does not try to convert; it tries to **let you sit down**. Copy speaks at a 4th-grade reading level when warmth is required and at a 9th-grade level when sincerity is. The tone explicitly avoids two adjacent tones common in the watercolor cohort: it is **not pastoral-romantic** (no "wildflower meadow at dusk" copy, no flowing handwritten serif waxing about "moments") and **not whimsical-creative** (no Comic Sans cousins, no "let your imagination dance"). It sits between them, on a stool, drying a brush on a paper towel. The aesthetic conflict that powers everything: **watercolor pigment over neon-electric voltage**. Wet edges meet hard scanlines. A bubble made of cobalt-and-rose pigment encases a 1px CRT raster glitch. A slab-serif headline is laid over a wash that is bleeding into a vertical-hold-tear. Nothing is purely soft; nothing is purely sharp. Every surface in the page is **either pigment-pretending-to-be-electric** or **electric-pretending-to-be-pigment**. The two languages negotiate, sometimes badly. The badness is the point — wabi-sabi for a CRT generation that grew up taping printer paper to the screen and tracing. Inspirational anchors (for the implementer's mental model, not for citation in copy): - **Yuko Shimizu's wash-and-ink illustration** for the way pigment can sit on a hard line. - **The intro to the 1990 NHK animation** *Nadia: Secret of Blue Water* — TV-saturated cyans bleeding past their plates. - **Risograph zines from the late 2010s Seoul indie scene** — fluoro pink and bottle-green misregistered by 2px on rough paper. - **The bulletin board outside any high school art club room** — pushpins, curl, fingerprints, a watermark from a juice box. - **An old `ZX Spectrum` color-clash bug** rendered onto a 300gsm cold-press sheet. The page is a **clubroom on a Friday**, not a brand. It is in no hurry. It does not introduce itself. You walk in. ## Layout Motifs and Structure The page is a **left-anchored sidebar layout** — the seed's `sidebar` constraint, taken at full strength and reframed as **the corkboard's wooden frame**. The sidebar is **300px wide on desktop, fixed-position, full viewport height**, finished as a **vertical strip of corkboard-grade cork** (rendered as a CSS noise+gradient composite, no image). It carries the entire site's navigation, the time, the weather (text-only, scraped at build), the club's fictional roster, and a single rotating watercolor swatch. The sidebar **does not collapse on tablet**; on mobile (<720px) it converts to a **bottom-edge horizontal cork-rail**, 96px tall, swipeable. The main canvas to the right of the sidebar is a **single vertical scroll of bulletin-board "plates"** — eight watercolor pages pinned at slight rotations (–4° to +6°, randomized at build, deterministic per plate so the layout never re-rolls between visits). Each plate is **between 70vh and 110vh tall**, never the same height twice, never aligned to a grid baseline. The page is **explicitly broken-grid**: there is no 12-column scaffolding. Plates overlap their neighbors by 32–96px on the y-axis, with the lower plate's pin tucked under the upper plate's curl. The structural unit is the **plate**, defined as: - A **deckle-edged watercolor rectangle** (irregular SVG `clipPath`, four unique paths total, randomly assigned). - A **pin** (top-left or top-right, alternating per plate, rendered as a small SVG of a pushpin with a colored bead). - A **curl** at one corner (the corner *opposite* the pin), rendered with `box-shadow` and a `transform: rotate(...) skew(...)` on a child element to fake paper lift. - A **content well** inside the deckle edge with 64px of "margin" that reads as the page's wet-edge bleed. - A **glitch register** — a thin (1–3px) horizontal sliver where a single CRT-style chromatic-aberration tear cuts across the plate. The glitch tear is the seed's `patterns: glitch` realized as **one tear per plate**, never more. The eight plates, in order: 1. **The Greeting Plate** — the title "haru.club", the date, the weather, a one-sentence "today we are" line. Glitch tear horizontal across the title's baseline. 2. **The Roster Plate** — the (fictional) club's seven members, each a name + watercolor blob portrait. Glitch tear runs through one randomly-chosen member's name. 3. **The Notebook Plate** — a long-form note in handwriting-on-slab-serif, ~400 words about what the club is making this week. The glitch tear is in the margin, like a redaction. 4. **The Bubble Plate** — the seed's `bubble-playful` motif at full force: 17 hand-painted watercolor bubbles floating across the plate, each with a tiny lens-flare star at its top-left highlight. No copy except a single floating word per bubble (one-syllable Korean+Japanese+English mix: 봄, haru, blue, 물, drift, soak, 雨, ok, club, …). 5. **The Lens-Flare Plate** — a single huge watercolor sun, off-center, with a 6-spike anamorphic lens-flare drawn in pure CSS gradients overlaid in `screen` blend mode. Below it, three short paragraphs about a real spring afternoon. Glitch tear vertical, slicing the sun. 6. **The Inventory Plate** — the club's supplies, listed as a bulleted slab-serif inventory: "no. 8 round, no. 12 mop, two jars of water, one jar of slightly worse water, a roll of masking fluid we shouldn't have left open." Each line has a watercolor swatch beside it. Glitch tear runs vertically through the swatch column. 7. **The Visitor Plate** — a guestbook-style invitation to type a one-line note. The note appears as a **new plate** stacked under this one, written in the same slab-serif but rendered as if wet-on-wet. (No backend — the note is `localStorage`-persisted.) 8. **The Goodbye Plate** — a single watercolor smudge that says **"문 닫고 가요"** ("close the door on your way out") in slab-serif Korean, with a hand-drawn arrow pointing back at the sidebar. Glitch tear horizontal at the bottom edge. There is **no hero, no CTA, no pricing block, no stat grid, no testimonial carousel, no "trusted by" logo wall, no email capture, no cookie popup as a design element**. The page is all interior. The bulletin board is the product. Between plates there are **interstitial cork patches** — narrow horizontal strips of cork showing between the plates' deckle edges, with occasional crumbs of detail: a stray pushpin without a paper, a piece of washi tape with nothing under it, a watercolor drip that runs from one plate down into the next. These are not negative space; they are **the wall**. The sidebar's cork strip carries the **vertical anchor nav** — eight pin-colored beads, one per plate. Click a bead, scroll to that plate. The active plate's bead is the only one **glowing neon-electric** (the only neon glow in the sidebar at any time), and the glow has a watercolor halo painted around it. ## Typography and Palette **Type stack — Google Fonts only, three families, intentional friction.** - **Roboto Slab** (variable, weights 100–900). The **slab-serif** voice — the seed's `typography: slab-serif` realized as the *page's primary type*. Used for headlines, body, captions, navigation, and the visitor's typed note. Set at **weight 500 for body** (not 400 — the slab needs presence on watercolor wash backgrounds), **weight 800 for headlines**, **weight 200 for the date and weather strip in the sidebar** (so the metadata reads as a thin pencil annotation against the cork). Tracking: `-0.012em` body, `-0.028em` display, `+0.18em` for the sidebar's vertical-text labels. Optical size: body `clamp(17px, 1.05vw + 13px, 21px)`, display `clamp(56px, 9vw, 144px)`. Roboto Slab is chosen specifically against the watercolor cohort's tendency to default to handwritten or serif-revival — the slab insists on a **schoolroom seriousness** under the wash. It is the slab on the chalkboard, not the brush on the paper. - **Gowun Batang** (Korean serif, regular + bold). Used for **all Korean copy** — the goodbye plate, the bubble words, occasional inline Korean in the notebook plate. Gowun Batang is a soft modern Korean serif with rounded terminals; against the slab-serif Latin it reads as **intimate, hand-written-in-a-better-hand**. Korean and Latin set on the same baseline, with `font-feature-settings: "palt"` for proper kerning of mixed scripts. - **Caveat** (handwritten, weights 400–700). Used **sparingly** — only for the visitor's typed note (rendering live as Caveat at 22px, weight 500), pin-bead labels, and the rare hand-margin annotation on plate 3. Caveat appears on **no more than 6% of the page's total text by character count**. The handwritten voice is a guest, not a host. Three families is the maximum. There is no monospace. There is no display face. The slab does the heavy lifting; the Korean serif and the handwriting are **register changes**, not new voices. **Palette — watercolor pigment + neon-electric voltage, named for what they *are*.** The palette is built as **two stacks** that are layered in the browser, never mixed: *Stack A — Watercolor Pigments (the wet plates):* - **Cold-Press Cream** `#F4ECDD` — the paper. Used as the plate's interior fill, slightly varying per plate via a CSS filter rotation. - **Cobalt Wash** `#2E5A9E` — the dominant cool pigment. Used in plate backgrounds at 22–48% opacity. - **Madder Rose** `#C24A6E` — the dominant warm pigment. Used for accents, bubble fills, the goodbye smudge. - **Bottle Sap** `#3E6B45` — the green that lives on the cork's edge. Used for a single plate's accent and the roster's blob portraits. - **Indigo Bleed** `#1A2745` — the deep wet shadow under every wash. Used at 60–80% opacity as the under-shadow of every deckle edge. *Stack B — Neon-Electric Voltage (the CRT glitches):* - **Magenta Voltage** `#FF1F8C` — the dominant neon. Used for the active sidebar bead's glow, half of every glitch tear's chromatic aberration, and the lens-flare star on bubbles. - **Cyan Voltage** `#16E7FF` — the secondary neon. Used for the *other* half of every glitch tear (chromatic-aberration pairs always magenta+cyan), the lens-flare's secondary spike. - **Lemon Voltage** `#FFEE3B` — the rarest neon. Used **only** on the lens-flare plate's sun-rays and one bubble per visit (deterministic by visit hash). *Connector tones:* - **Pulp Black** `#0A0E14` — the body text color. Never pure black. Reads warm on cream, cold under wash. - **Wet-Edge Charcoal** `#2B2F38` — the deckle's drop-shadow. - **Cork Tan** `#B89770` — the sidebar's cork base. - **Cork Shadow** `#6E563A` — the cork's pinhole inset shadow. The two stacks **never blend**. Pigments use `mix-blend-mode: multiply` against the cream; voltages use `mix-blend-mode: screen` over the pigments. The page therefore has **two distinct light models running at the same time** — subtractive (paint on paper) and additive (light on phosphor). This is the design's central technical commitment, and it is what makes the watercolor look **lit from inside** on the lens-flare plate and **bruised** on the glitch tears. Contrast: body copy on cream paper is 13.8:1, comfortably high. Neon on cream is intentionally **lower** (3–4:1) to read as light, not as ink. ## Imagery and Motifs **No stock photography. No 3D render. No Lottie. No icon set. No illustration library.** Every image on the page is one of seven hand-authored asset types: 1. **Watercolor washes (CSS-only).** Each plate's background pigment is built from **3–5 layered radial-gradient stops** in CSS, with `filter: url(#watercolor-displace)` referencing a tiny inline SVG `` + `` filter. No PNG washes. The displacement seed varies per plate by `--plate-seed: `. This is the page's most-loaded technique and it is the reason the design exists. 2. **Deckle edges (SVG clipPath).** Four hand-drawn deckle paths, each with ~120 vertices, randomly assigned per plate. Stored inline in the page's `` defs, total weight ~3KB. 3. **Pushpins (SVG).** One pushpin glyph, a 24×24 SVG with five `` elements (head highlight, head fill, head shadow, needle, needle shadow). Reused 8 times per page with varied bead colors drawn from the pigment stack. 4. **Bubble-playful motifs (SVG + CSS).** The seed's `motifs: bubble-playful` is the **page's signature motif**. Bubbles are rendered as **two stacked SVG circles per bubble**: an outer circle (cobalt-and-rose wet-on-wet pigment, painted via gradient) and an inner highlight crescent (cream, 60% opacity, `mix-blend-mode: screen`). Each bubble carries a **lens-flare star** at its 10-o'clock position — a 4-spike or 6-spike SVG drawn in Magenta Voltage with Cyan Voltage cross-spikes. Bubbles range 24–96px diameter. They float on plate 4 and appear singly on plates 1, 5, and 8. They never form a "field" — they are **spaced like real bubbles in real water**, asymmetric, with one cluster of 3–4 and the rest singletons. 5. **Lens-flare elements (SVG + CSS).** The seed's `imagery: lens-flare` is concentrated on **plate 5** but appears as small star-glints on every bubble. The big flare on plate 5 is a **6-spike anamorphic lens-flare**: a horizontal magenta-to-cyan elongated ellipse (the "streak"), six radial spikes at 60° intervals, and a secondary "ghost" disc 23% to the upper-right. All in pure SVG with CSS `mix-blend-mode: screen`. The flare is **not photorealistic** — it is a watercolor's *idea of a lens flare*, with the streak's edges painted with a `feGaussianBlur stdDeviation="2.5"`. It looks like someone painted a lens flare in cobalt and then a fluorescent tube reflected in the painting. 6. **Glitch tears (CSS + SVG).** Each plate has **exactly one glitch tear**, 1–3px tall, a horizontal or vertical sliver where the page's content is **chromatic-aberration-split**: the same line of text/image rendered three times, shifted by `translate3d(2px,0,0)` magenta and `translate3d(-2px,0,0)` cyan, the original in Pulp Black on top. The tear sits inside an `clip-path: inset(...)` so the aberration only shows in the sliver. The tear's vertical position is **fixed per plate** (not animated), but the magenta-cyan offsets oscillate at 0.6Hz with a 16% chance of momentary 12px jump. This is the seed's `patterns: glitch` rendered as **page punctuation**, not page foundation — there are 8 tears total, and they are the page's only sharp edges. 7. **Cork texture (CSS + noise).** The sidebar and interstitials are cork. Built from a base `#B89770`, a `feTurbulence` noise layer at 12% opacity, and a `repeating-radial-gradient` of 2px-diameter "pinhole" dots at 24px spacing. No PNG. **Motif vocabulary across the eight plates:** - Plate 1 — one bubble, one tear, the title in slab. - Plate 2 — seven blob portraits, one tear, no bubbles. - Plate 3 — one tear, no bubbles, two hand-margin annotations in Caveat. - Plate 4 — seventeen bubbles, no tear from the plate but a tear *between* this plate and plate 5. - Plate 5 — one big lens-flare, one vertical tear, one bubble. - Plate 6 — six watercolor swatches (paint blobs), one vertical tear, no bubbles. - Plate 7 — no bubbles, no tear (the visitor is a guest; the page is gentle). - Plate 8 — one watercolor smudge, one horizontal tear, one tiny bubble drifting upward. **No human figures.** No faces, no hands, no bodies. The roster's "blob portraits" are abstract watercolor blobs with two dot-eyes, like a child drew a friend from memory. **No photographs of actual flowers, water, or paint.** All references to spring, water, paint are made through the rendering itself. The page does not show watercolor; it **is** watercolor. ## Prompts for Implementation Build haru.club as **one HTML file, one CSS file, two ES modules, eight inline SVG defs (4 deckle clipPaths, 1 pushpin, 1 bubble template, 1 flare template, 1 watercolor displacement filter), one localStorage shim for the visitor note**. No framework, no router, no SPA shell, no build step required. No GSAP, no Three.js, no Lottie, no canvas, no WebGL. The animation surface is **CSS transitions + a single `IntersectionObserver` + a 60Hz `requestAnimationFrame` loop dedicated solely to the glitch tears' chromatic offsets** — that is sufficient. **Storytelling is the organizing principle.** The page is a Friday afternoon at the club. The visitor walks in (sidebar fades up from the wall, plate 1 already pinned), reads the bulletin board top to bottom (scroll), maybe leaves a note (plate 7), and is told to close the door (plate 8). The page is **complete**, has a **beginning and an end**, and **does not loop or refresh** unless the user reloads. There is no infinite scroll. There is no dynamic content. There is one fictional clubroom and you are inside it for the time you are here. **Animation choreography:** - **On load** — the cream paper fades up over 600ms with a slight `filter: blur(4px) → 0` transition. The deckle edges draw in last, via `clip-path` reveal (90% → 100%) over 800ms. **No bouncing, no springing on entry.** The page **arrives like wet paper laid down**. - **On scroll** — each plate, as it crosses 30% viewport height, runs a one-time `paint-in` animation: the plate's pigment wash becomes more saturated over 1.4s (`filter: saturate(0.4) → 1`). The glitch tear on that plate **starts** its 0.6Hz oscillation at the same moment. Once started, the tear oscillates for the rest of the visit (deliberate ambient noise — a tube light buzzing in the room). - **On hover over a bubble (plate 4)** — the bubble grows to 1.08× over 240ms with `transition-timing-function: cubic-bezier(0.34, 1.16, 0.64, 1)`. The lens-flare star inside the bubble brightens from 60% → 100% opacity. **No magnetic cursor follow, no tilt-3D, no card-flip.** This is a watercolor on a wall; it is not a 3D widget. - **On hover over a sidebar bead** — the bead's neon glow expands by 6px and pulses once (single pulse, not loop). The plate that bead links to **brightens by 4%** in the main canvas, as a "this is the one" preview. Click smooth-scrolls to it over 720ms with `scroll-behavior: smooth` and a custom `easing: cubic-bezier(0.65, 0, 0.35, 1)`. - **On focus of the visitor input (plate 7)** — the input's underline draws across in slab-serif weight, magenta voltage, over 280ms. The input's caret is **a 2px-wide cyan voltage bar**, blinking at 1Hz. The placeholder text "tell us about your spring" fades on focus. - **On submit of the visitor note** — the note appears below the input as a **new sub-plate** that drops into place from y: -8px to 0 over 360ms, with a paper-curl shadow easing in over 500ms after. The note is stored in `localStorage` and re-rendered on next visit, so returning visitors see their own previous notes pinned to the wall. **Glitch tear loop (the only `requestAnimationFrame` consumer):** The loop runs at the page's natural refresh rate (60Hz typical). For each visible tear, it computes a 0.6Hz sine for the chromatic-aberration offset: ``` offsetX = 2 + 0.8 * sin(t * 2π * 0.6) ``` Once every ~6 seconds (16% chance per second), a single tear performs a **kick**: a 60ms 12px jump, then snap back. The loop is paused via `IntersectionObserver` for off-screen tears and via `prefers-reduced-motion: reduce` (in which case all tears render at the static `offsetX = 2`). **The 17 bubbles on plate 4** are positioned via deterministic seeded random (Mulberry32 with a build-time seed) so their layout is stable across loads. Their floating motion is **CSS-only**: `@keyframes drift-{i}` with 8 unique 14–22 second drifts, randomly assigned across the 17 bubbles. Drift amplitude is small (±18px in x, ±32px in y) — these are bubbles in still water, not in a stream. **Performance notes.** First-paint target is **the cream paper and the sidebar cork** — both pure CSS, both loadable in the first 14KB. The watercolor washes paint in via `feTurbulence`, which is heavy on the GPU on first frame; the page lazy-applies the filter only to plates within 1.5 viewports of current scroll, swapping between `filter: url(#watercolor-displace)` and `filter: none` (`none` showing flat gradient washes that still read as watercolor at small scale). The lens-flare on plate 5 is the page's only `mix-blend-mode: screen` stack of more than 3 layers — it gets its own `will-change: opacity, transform`. Total payload target: **under 90KB** ungzipped, including all SVG, fonts (subset to the characters actually used), and the two ES modules. **Forbidden in implementation:** - No CTA section, anywhere. No "Sign up." No "Get started." No "Learn more." - No pricing, no plans, no tiers. - No stat grid ("250M downloads / 12K stars / 99.9% uptime"). The page has zero numbers except the date and the time. - No testimonial carousel. No social proof. - No email capture. No cookie banner styled as design. No newsletter modal. - No "what is haru.club?" explainer block. The page is the explanation. - No dark-mode toggle. The page is one mood. - No mobile menu hamburger. The sidebar becomes the bottom rail; that is the menu. - No favicon as a logo treatment in the header — the header has no logo; the title on plate 1 is the only branding. **The page is small, soft, and lit from one weird angle.** Build it that way. ## Uniqueness Notes This design is constructed to occupy a **vacant intersection** in the registry's 220-design frequency map. Six concrete differentiators from the existing corpus: 1. **Watercolor (12%) × neon-electric (5%) at full strength is unprecedented.** Frequency analysis shows watercolor sits at 12% in the registry and neon-electric at 5%. **Their combination has not been attempted.** Every existing watercolor design in the registry is paired with creamy-pastel, warm-earthy, ethereal-blue, or sepia-nostalgic palettes — soft over soft. Every existing neon-electric design is paired with cyberpunk, dopamine, or dark-mode aesthetics — sharp over sharp. haru.club deliberately puts **wet pigment over CRT voltage** as its central conflict, with a strict two-stack layering rule (multiply for pigment, screen for voltage, never blended). This is the design's identity. 2. **Slab-serif (5%) as the *primary* type voice on a watercolor page.** Every watercolor design in the corpus uses handwritten (35% of all sites) or serif-revival type. Slab-serif on watercolor is **counter-cohort by construction** — the slab brings schoolroom seriousness under the wash, which is the *exact* tonal lift this design needs to avoid pastoral-romantic drift. Roboto Slab + Gowun Batang + a sliver of Caveat is a typographically rare stack across the corpus. 3. **Bubble-playful (4%) × lens-flare (7%) co-occurrence.** Both motifs are individually underused, and their **combination as a single rendered unit** — every bubble carries a lens-flare star at its highlight — is unique in the registry. The bubble *is* the lens; the lens is on the bubble. This single visual primitive does work that elsewhere requires two separate decoration systems. 4. **Approachable-casual tone (4%) is rare and appropriate here.** The watercolor cohort skews pastoral-romantic (36% of all sites). haru.club explicitly steps off that path. The page reads at a 4th–9th grade level, has zero sales voice, and treats the visitor as someone walking into an art-club room, not a customer entering a funnel. No CTA, no growth verbs, no "join the community." Tone-as-design-constraint, audited per copy block. 5. **Sidebar layout (24%) reframed as the corkboard's wooden frame.** Most sidebar designs in the corpus are dashboard-adjacent or documentation-adjacent — the sidebar is a navigation chrome. Here the sidebar is **part of the diegesis**: it is the cork strip of the bulletin board, with the navigation rendered as pin-beads on cork. This is the only sidebar in the corpus that is a *physical object inside the design's fictional world*, not a UI affordance. 6. **Glitch (13%) as page punctuation, not page foundation.** Most glitch designs in the corpus deploy glitch as a pervasive surface treatment (every element shimmers, full-bleed glitch washes, RGB-split logos). haru.club uses **exactly 8 glitch tears** total — one per plate — each 1–3px tall. The glitch is the tube light buzzing in the corner of a calm room; it is **measurable, countable, and sparse**. This is structurally counter to the typical glitch deployment. **Documented chosen seed:** *aesthetic: watercolor, layout: sidebar, typography: slab-serif, palette: neon-electric, patterns: glitch, imagery: lens-flare, motifs: bubble-playful, tone: approachable-casual.* **Avoided patterns from frequency analysis:** - **Avoided:** photography (99% — overused, no photos here), full-bleed (94% — broken-grid plates instead), card-grid (85% — bulletin board plates with overlap, not a grid), centered (82% — left-anchored sidebar instead), parallax (95% — no scroll-coupled transforms), cursor-follow (86% — no magnetic cursor anywhere), spring (85% — paper does not spring), stagger (79% — no list-stagger entries), magnetic (79% — no magnetic hovers), warm palette (97% — palette is *cool* pigment + neon voltage), gradient palette (97% — page is wash + voltage, not gradient-driven UI), mono typography (95% — no monospace anywhere), humanist (53% — slab-serif primary instead). - **Preferred:** the underused intersections noted above. The design's frequency footprint is intentionally weighted to the long tail. **One-line identity:** haru.club is **a watercolor bulletin board with a magenta-and-cyan tube light buzzing in the corner**, and that tube light is the only thing in the room that does not love you back.