# Design Language for haru.club ## Aesthetics and Tone **haru** is the Japanese and Korean word for *spring* — and haru.club is the imagined headquarters of a secret society of seasonal aesthetes who collect fleeting moments the way Victorian naturalists collected pinned moths. The aesthetic is **neubrutalism-as-botanical-archive**: raw, exposed construction (thick #1a1a1a borders, blunt drop shadows offset at +6px/+6px, flat cream backgrounds) in aggressive structural tension with the delicate, perishable beauty of candy-bright spring ephemera — cherry blossom pinks, new-growth greens, pollen yellows, rain-sky blues. The tension is intentional and the site never lets it resolve. A pressed flower mounted behind a thick black frame. A field journal bound in cracked amber leather, its pages full of color swatches that have no business being in an archive. The neubrutalist bones are exposed everywhere — raw borders, visible grid lines rendered as botanical measurement marks, stacked cards that cast hard flat shadows — but every surface is inhabited by living, breathing spring color and texture. Tone: **elegant-sophisticated** within a raw structural container. The site speaks like a curator who wears latex gloves to handle specimens but has peonies tattooed on both arms. Never precious. Never clinical. The sophistication is in the confidence that rawness and elegance belong in the same room. The brand voice is that of a private club with no velvet rope — the exclusivity is aesthetic, not social. Anyone who can see the beauty of a mud-spattered magnolia blossom has already been admitted. ## Layout Motifs and Structure The site is built as a **naturalist's pinboard wall** — a large-format masonry grid where every card is a pinned specimen from a different spring: a pressed ginkgo leaf, a torn page from a garden notebook, a Polaroid of rain on glass, a hand-lettered plant label, a swatch of embossed leather. The masonry is **deliberately irregular**: no two columns are the same height, cards have randomized rotations between -3° and +3°, and every card sits inside a neubrutalist mounting frame (thick black border, flat offset shadow). **Masonry is not Pinterest here.** It is the wall of a 19th-century collector's study, rebuilt as code. The visual rhythm is intentional asymmetry: wide cards (spanning 2 columns, ~640px) alternate with narrow specimens (single column, ~280px), tall portrait items alternate with small square thumbnails, and the eye is led by diagonal sight lines across the wall rather than down any single column. **Structural bones:** - 3-column fluid masonry at ≥1200px, 2-column at 600–1199px, 1-column below 600px - Column gutter: 24px, carrying a 1px #1a1a1a rule (a botanical measurement grid) - Every card has: `border: 3px solid #1a1a1a`, `box-shadow: 6px 6px 0 #1a1a1a`, `border-radius: 0` — zero rounding on containers (rounded-sans type inside; hard edges outside) - Cards carry pin-holes: small SVG circles at the top corners of each card, `fill: #c0392b` or `fill: #1a1a1a` - Site header is a full-bleed banner with neubrutalist type set at ~18vw, overlaid on a leather-texture background - Navigation is a single horizontal row of neubrutalist pill-buttons (thick border, no fill, hover state inverts to black/cream) - The masonry wall has a subtle cream paper background pattern (noise grain at 3% opacity over `#FAF7F0`) **No hero slider. No carousel. No parallax background image.** The wall IS the page. ## Typography and Palette **Typography (Google Fonts only):** - **Display — [Nunito](https://fonts.google.com/specimen/Nunito)**, ExtraBold 800–900, letter-spacing -1.8%, used at 10–18vw for the site name in the header and at 4–6vw for section labels. Nunito's rounded terminals are the sole "soft" element against the hard neubrutalist frame — the roundness reads as organic, spring-like. The display text is set in `#1a1a1a` on cream or `#FAF7F0` on dark fields. - **Body / Card Labels — [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans)**, Regular 400 and SemiBold 600, 15–17px, line-height 1.65. Specimen labels, captions, and descriptive text. Nunito Sans drops the extreme roundness of Nunito just enough to feel like typed field notes rather than a children's book. - **Accent / Handwritten Notes — [Caveat](https://fonts.google.com/specimen/Caveat)**, Regular 400, used sparingly (card annotations, marginal notes on wide cards, the site tagline). Caveat mimics the handwriting in a field journal — quick, legible, personal. Always set at `#6b4f3a` (leather-brown ink color) or in a candy color. - **Monospace / Taxonomy Labels — [DM Mono](https://fonts.google.com/specimen/DM+Mono)**, Regular 400, 12–13px, used for botanical-style taxonomy labels (`CLASS: Prunus serrulata`, `SEASON: spring 2024`) in small-caps via `font-variant: all-small-caps`. These appear at the bottom of each specimen card. **Palette — 7 colors:** - `#FAF7F0` — bone cream (page/card background, the color of aged paper) - `#1a1a1a` — near-black (borders, shadows, primary type — the neubrutalist anchor) - `#FF6B9D` — candy sakura (primary accent, cherry blossom pink — used on 30% of cards) - `#A8E063` — new-growth chartreuse (secondary accent, fresh spring green — 25% of cards) - `#FFD166` — pollen gold (tertiary accent — sun/dandelion warmth — 20% of cards) - `#74C0FC` — rain-sky blue (quaternary accent — spring rain — 15% of cards) - `#6b4f3a` — leather brown (handwriting, journal ink, leather texture shadow tint) Each card's background is a muted 10% tint of its assigned candy color over the bone cream, so the wall reads as a gently chromatic field rather than a flat cream grid. Card borders and shadows remain `#1a1a1a` regardless of card color — the structural grid never softens. ## Imagery and Motifs **No stock photography.** Every image on the wall is either: 1. **Botanical SVG illustrations** — hand-drawn-style line art of spring specimens (cherry branch, ginkgo leaf, dandelion clock, rain droplets, magnolia bud, fern frond). Line weight 1.5–2px, stroke `#1a1a1a`, no fill or subtle 20% candy-color wash. These are the medium-format specimens. 2. **Leather-texture panels** — large SVG/CSS-generated surfaces that mimic embossed saddle leather: crosshatch grain pattern in `#6b4f3a`/`#8b6f4e`, with debossed text (club name, Latin binomials, season stamps). These serve as the wide hero-card that anchors the top of the masonry wall and reappears as divider cards. 3. **Torn-paper swatches** — CSS `clip-path: polygon()` shapes with irregular torn edges, filled with candy palette colors, used as background elements inside wide cards and as decorative separators. 4. **Field-journal page fragments** — CSS-generated notebook-lined backgrounds (horizontal rules at 24px intervals, `#1a1a1a` at 8% opacity) used inside the annotation-heavy cards. **Recurring visual motifs:** - **The push-pin** — SVG circles with a CSS drop-shadow at the top corner of every card, in `#c0392b` (red wax seal red). Pulled from the idea of pinning specimens to a corkboard. - **The botanical measurement rule** — a thin horizontal SVG ruler with centimetre marks, `1a1a1a` stroke, appears at the base of tall cards as a scale indicator. - **The leather deboss stamp** — a `border: 2px solid rgba(0,0,0,0.15)` rectangle inside the leather cards, with embossed-style text (`text-shadow: 1px 1px 0 rgba(255,255,255,0.4), -1px -1px 0 rgba(0,0,0,0.3)`). - **The wax seal** — an SVG circle with irregular edge (12-point star clipped), `#FF6B9D`, used as a decorative closure element on the leather cards and in the site header. - **Scattered dots / pollen grid** — a CSS radial-gradient dot pattern at 4% opacity used as the grain on the page background, evoking both pollen dispersal and the fine-grain noise on aged paper. ## Prompts for Implementation Treat haru.club as a **single wall you walk up to** — not a page you scroll down. The masonry grid is not a content listing; it is the entire experience. There is no "above the fold" moment; the wall exists all at once, and the scroll-triggered animations reveal it the way you focus your eyes when you step into a room. **Scroll-triggered animation strategy (subvert the overused pattern):** Scroll triggers are not used for the standard "fade in from below" reveals. Instead, each card on the masonry wall uses scroll position to trigger a **pin-drop reveal**: the card appears to drop from above, rotating from -8° to its final tilt (between -3° and +3°), with the flat shadow growing from 0px to 6px as it lands. The effect is a naturalist dropping specimens onto the wall as you scroll past each row. CSS: `transform: rotate(var(--tilt)) translateY(0)`, transition `cubic-bezier(0.34, 1.56, 0.64, 1)` (slight overshoot bounce). No opacity fade-in — the cards appear at full opacity, as if they always existed but you only now looked at them. **Leather-texture implementation:** The main hero card (full-width, 280px tall) at the top of the masonry wall uses a CSS `repeating-linear-gradient` crosshatch at 45°/135° to simulate leather grain, with a base color of `#8b6f4e` and grain color `#6b4f3a`. The surface carries debossed lettering `HARU.CLUB — SEASON MMXXIV` in DM Mono small-caps. On hover, the leather card shifts its CSS filter to `sepia(0.1) contrast(1.05)`, deepening the leather tones. **Narrative arc (masonry wall, top to bottom):** 1. **Row 1 anchor** — Full-width leather card (hero specimen case). The club name at ~14vw in Nunito ExtraBold inverted (cream on leather). Wax-seal SVG bottom-right. Tagline in Caveat: *"the spring that keeps repeating."* 2. **Row 2** — First wave of specimens: one wide botanical illustration card (cherry branch, candy sakura background tint), one narrow journal-page card with handwritten notes in Caveat, one narrow taxonomy label card in DM Mono. 3. **Row 3** — Color-swatch cards: three narrow cards, each a torn-paper swatch in candy colors, with a single Nunito Bold season label. 4. **Row 4** — Wide card: a field journal spread (lined paper texture, two columns of DM Mono field notes, a botanical SVG centered between the columns). Narrow card: a leather deboss stamp card. 5. **Row 5 onward** — Alternating specimen types continue down the wall. Every 4th row introduces a full-width divider card (alternating leather texture and candy-color torn paper). **Interaction details:** - Card hover: translate(-3px, -3px), shadow grows to 9px 9px — the card lifts off the wall slightly. - Pin-hole hover: the SVG pin-circle scales to 1.3 and turns from `#c0392b` to `#FF6B9D` (from red to sakura). - Navigation buttons: thick border, no fill, font Nunito SemiBold 14px. On hover: background fills with `#1a1a1a`, text color inverts to `#FAF7F0`. - Page background: the pollen-grain dot pattern is fixed (does not scroll), giving the sense that the wall is a physical object in front of a static room. - No full-screen takeovers, no modal overlays, no typed-text animations. The wall is static once loaded; motion is only in transitions. **AVOID:** hero video backgrounds, three-column feature grids, pricing tables, testimonial carousels, CTA banners. The site has no commercial structure at all — it is a membership wall of collected specimens, not a landing page. ## Uniqueness Notes 1. **Neubrutalism + elegant-sophisticated is an unexplored contradiction.** At 1% frequency, neubrutalism in this corpus is always raw and aggressive. haru.club is the first design to use neubrutalist structure (hard borders, flat shadows, exposed grid) as a *containing frame* for elegance rather than a statement of defiance. The rawness is archival (a museum vitrine, a specimen case) rather than anti-design. No other design in the corpus pairs this aesthetic with an elegant-sophisticated tone. 2. **Masonry reimagined as a Victorian naturalist's pinboard, not a Pinterest grid.** The corpus uses masonry in 11% of designs, almost always as an image gallery or content listing. haru.club uses masonry as a literal physical metaphor — a wall of pinned specimens with rotation, push-pin SVGs, and card-drop scroll reveals. The structural bones of masonry (variable-height columns) become the irregular beauty of an archive wall rather than a tidy layout. 3. **Scroll-triggered animations that avoid the fade-from-below cliché.** At 38% frequency, scroll-triggered reveals are the single most overused pattern in the corpus and always mean "content fades up into view." haru.club uses scroll triggers for a pin-drop physics animation — cards rotate from tilted to final angle with a spring bounce curve — subverting the motion verb entirely without abandoning the trigger mechanism. 4. **Leather-texture as structural surface, not decoration.** Leather texture at 5% of the corpus is typically used as a background image or a premium brand signal. Here it is the primary material of the hero specimen case and the recurrent divider cards — debossed, measured, labeled — a material that carries the club's archival identity rather than functioning as ambient atmosphere. 5. **Seed:** aesthetic: neubrutalism, layout: masonry, typography: rounded-sans, palette: candy-bright, patterns: scroll-triggered, imagery: leather-texture, motifs: nature, tone: elegant-sophisticated. Avoided overused patterns: opacity fade-in scroll reveals, Pinterest-style image masonry, decorative leather background, hero video, feature grids.