# Design Language for haru.systems

## Aesthetics and Tone

haru.systems is **a goblin's field manual for the systems that run the forest floor** — a tech tutorial written not for cloud infrastructure but for *mud infrastructure*: mycelium routing tables, the compost pipeline, the acorn-cache eviction policy, the protocol by which a beetle hands off a dewdrop to a leaf. The domain word *haru* (春 — spring, in Japanese) is read at its most literal and least romantic: spring is **the season the forest floor un-pauses** — frost releases, the leaf-litter starts processing again, the underground network reboots after a long cold sleep. "systems" is read the way a goblin would read it: not as a SaaS dashboard, but as **the tangled, damp, working machinery of rot and renewal**, and the page is its documentation.

The mood is **grounded-earthy and patiently instructional** — the voice of someone crouched in wet bracken at dawn, sleeves muddy to the elbow, pointing at a mushroom and saying *"okay, watch — here's how the handshake works."* It is goblincore in the truest sense: not the sanitized cottagecore of sunlit picnic blankets, but the **hoarder's delight in the unglamorous** — chipped enamel, bottle caps gone iridescent, snail shells, rusted keys, a single perfect acorn cap kept in a pocket for years. Beauty is found in **decay, asymmetry, dampness, and accumulation**. Nothing is precious; everything is *kept*. The page should feel like it was assembled on a workbench made of a fallen log, by lamplight, by someone who genuinely cannot wait to show you the diagram they drew of how worms move soil.

It is **warm but never cute**. The warmth comes from earth tones, lamp-glow, and the generosity of someone explaining something they love — not from rounded corners and pastel mascots. There are no smiling blobs here. There are beetles, and they are doing important work.

## Layout Motifs and Structure

The page is a **vertical stack of full-height sections** — the seed's `stacked-sections` taken at full strength and reframed as **the strata of the forest floor, read top to bottom like a soil core extracted and laid on a table**. There is no card grid, no bento box, no hero-with-three-columns. Just **seven to nine stacked plates**, each one a complete "layer" of the system, each occupying roughly `100vh` (or growing taller as content demands), each visually a distinct horizon of soil, litter, and life. You scroll *downward into the ground*.

The stack reads as a tutorial table of contents made physical:

1. **Plate 00 — "the surface"** — title plate. The domain `haru.systems` rendered enormous in the fluid display face, set on aged paper that looks pinned to a corkboard with actual push-pins (CSS box-shadow + a small SVG pin). A one-line thesis underneath: *"a field manual for the machinery under the moss."* Beneath the fold-line, the first soil horizon begins to peek up — a torn paper edge revealing dark loam.

2. **Plate 01 — "leaf litter / the ingest layer"** — how fallen leaves enter the system. A tutorial step. Annotated like a textbook plate: a big hand-drawn-style leaf (SVG), with **dotted leader-lines** running out to margin notes ("cuticle: water-resistant, slows decomposition", "tannins leach out first").

3. **Plate 02 — "the mycelium mesh / routing"** — the network layer. A full-bleed tangle of thin, threadlike SVG paths (the hyphae) that **draw themselves in** on scroll, branching, with little glowing nodes where threads meet. Margin notes explain it like a packet-routing tutorial: *"a nutrient packet enters here. the network has no central node. it finds the hungriest neighbour and forwards."*

4. **Plate 03 — "the acorn cache / storage & eviction"** — how a goblin (or a jay, or a squirrel) caches food, and what happens to forgotten caches (they sprout). Drawn as a literal **chest of drawers built into a log**, each drawer labelled, one drawer left ajar with a sprout pushing out. Tutorial framing: cache hit, cache miss, "stale entry becomes a tree."

5. **Plate 04 — "decomposition pipeline / the worker pool"** — beetles, woodlice, fungi, worms, each a "worker" in a pipeline. A horizontal procession of small annotated creature illustrations, each with its job title in the fluid face. *"stage 3: the springtail. throughput: small. reliability: total."*

6. **Plate 05 — "the compost reactor / the warm core"** — the section that glows. A cutaway of a compost heap with heat shimmer (CSS), explained like a chemistry tutorial: thermophilic phase, the temperature curve drawn as an actual SVG line chart styled like a pencil sketch on graph paper.

7. **Plate 06 — "spring / the reboot"** — *haru* itself. Frost releases, the system un-pauses. The whole accumulated palette warms a notch; a single seedling unfurls (SVG path animation) through the leaf litter. Tutorial framing: cold-start, warm-up, steady state.

8. **Plate 07 — "the goblin's pocket / the index"** — instead of a footer with a CTA, an **open palm holding the kept treasures**: bottle cap, acorn cap, snail shell, rusted key, a smooth river pebble. Each treasure is a navigation anchor back to a plate. A line: *"that's the system. take a pebble. come back when the frost lifts."*

**Tilt as the structural verb.** The seed's `tilt-3d` is the page's signature motion (and one of the rarer interaction patterns in the corpus at 26% — used here at full strength and given a *physical* justification). **Every annotated illustration plate sits on a slight 3D tilt** — as if the field-manual page were lying flat on the workbench and you're leaning over it. As you scroll, plates **gently rotate on the X-axis** between roughly `4deg` and `-4deg`, so the "page on the table" subtly catches the lamplight differently as it passes through the viewport. The treasures in Plate 07 each respond to cursor proximity with a small `rotateX/rotateY` tilt-toward-cursor, as if you're tipping the palm to see the shell better. Tilt is never decorative-only here: it always reads as *a flat thing on a table being looked at by a crouching person*.

Margins matter. Every content plate keeps a **generous right (or alternating left) margin reserved for annotation notes** — handwritten-feeling marginalia in a smaller weight of the fluid face, connected to the illustration by **dotted SVG leader-lines** that draw themselves in. The margin is the tutorial's voice; the center is the diagram.

No sticky nav bar. Navigation is the **soil-horizon ruler down the left edge** — a thin vertical scale, like a geologist's depth marker, with tick marks at each plate ("00 surface", "−2cm litter", "−8cm mesh", "−15cm cache"...). Current plate's tick glows lamp-amber.

## Typography and Palette

**Type stack — Google Fonts only, three families, with the variable-fluid face doing the heavy lifting.**

- **Fraunces** (variable — optical size, weight, and the `SOFT` and `WONK` axes). This is the seed's `variable-fluid` face, chosen because Fraunces is one of the few Google Fonts that genuinely *changes character* fluidly: it's a "soft-serif" that goes from delicate-bookish at small optical sizes to chunky, slightly-wonky, almost botanical at display sizes. Used for **all display type and headlines**, set with `font-optical-sizing: auto` and a **fluid `clamp()` size** so the title `haru.systems` is huge on desktop and the WONK axis is dialed up a touch at large sizes so the serifs look a little hand-cut, a little goblin-made. Headlines animate their weight and `SOFT` axis subtly on entry (a "settling" motion, like a stamp pressing into damp paper). Body-adjacent uses (plate intros, the thesis line) use Fraunces at a softer optical size, weight ~340.

- **Spectral** (serif, weights 300/400/500, plus italics). The **reading voice** — body copy, the tutorial steps, the longer explanatory passages. Spectral is warm, screen-tuned, slightly literary without being precious — it reads like a well-loved field guide reprinted many times. Italics carry the Latin names of fungi and the asides. Set at a comfortable `1.15rem`/`1.7` line-height on aged-paper backgrounds, color `--ink` not pure black.

- **Gloria Hallelujah** (handwritten, single weight). Used **only and sparingly** for the margin notes / leader-line annotations and the labels on the chest-of-drawers and creature plates — the goblin's own pencil. Never for more than ~12 words at a stretch. It should feel like notes scrawled in the margin of a borrowed book, not a typeface choice. Slightly desaturated brown ink color, faint rotation (`-1.5deg` to `1deg`) per note.

**Palette — warm-earthy, the seed taken literally: this is the color of wet ground and lamplight, with exactly two living accents.**

| Token | Hex | Role |
|---|---|---|
| `--loam` | `#2A1F14` | Deepest background — wet dark soil, the page base behind everything |
| `--humus` | `#3D2E1C` | Section base for the lower (deeper) plates |
| `--bark` | `#5C4327` | Mid-tone — drawers, log structures, dividers, the depth-ruler |
| `--paper-aged` | `#E8DAB8` | The aged-paper surface of the field-manual plates — warm, foxed cream |
| `--paper-shadow` | `#C9B68C` | Paper in shadow, torn edges, the underside of curled pages |
| `--ink` | `#3A2C1E` | Primary text on paper — dark sepia-brown, never `#000` |
| `--pencil` | `#6E5A3F` | Margin-note ink, leader-lines, secondary text |
| `--moss` | `#6B7A3A` | Living accent #1 — moss, sprouts, the mycelium-mesh node glow when "active" |
| `--lamp-amber` | `#D99A3C` | Living accent #2 — lamplight, the compost reactor's warm core, the active depth-tick, the title's WONK highlight |
| `--patina` | `#5E8B7E` | Tertiary accent — the iridescent green-blue of an old bottle cap / oxidized copper key; used *very* sparingly on hovered treasures |

Backgrounds darken as you scroll *down into the ground* (`--loam` → `--humus`), except the compost-reactor plate, which warms toward `--lamp-amber` (the heat), and the final spring/reboot plate, which lifts a notch toward `--paper-aged` (the thaw). The two living accents (`--moss`, `--lamp-amber`) are the **only** saturated colors on the page — everything else is mud, paper, ink, and bark. Goblincore restraint: the page hoards browns, and the green is rationed like something precious.

## Imagery and Motifs

**No stock photography. No 3D render. No icon font. No illustration library. No Lottie.** Every visual is one of six hand-authored asset types:

1. **Aged paper, CSS+SVG only.** The field-manual plates are built from a layered `radial-gradient` + `repeating-conic-gradient` "foxing" composite, an inline SVG `<feTurbulence>` low-frequency displacement on the edges so the paper looks deckle-cut and slightly buckled, and **torn edges** between plates rendered as SVG `clipPath`s with jagged Bézier paths (no two tears alike — vary the path per plate). Subtle `box-shadow` lifts each plate off the `--loam` background so it reads as paper *resting on dark soil*, not paper *as* the page. This `paper-aged` treatment is the page's most-loaded technique and the reason the design exists; it appears under every annotated section.

2. **Botanical-textbook plate illustrations (SVG).** The leaf, the mycelium tangle, the seedling, the compost cutaway, the temperature chart — all hand-built inline SVG in a **single-weight ink line style** (stroke `--ink`, no fill or pale `--paper-shadow` fill), the way a 1900s field-guide plate looks. Hatching for shadows (parallel SVG lines, not gradients). The mycelium mesh is a generative-ish tangle of ~40 thin cubic-Bézier paths that share endpoints; nodes are small circles that pulse `--moss` when the "packet" animation passes.

3. **Goblin's hoard objects (SVG).** Acorn + acorn cap, bottle cap, snail shell, rusted key, river pebble, beetle, woodlouse, springtail, worm. Same ink-line style. These are the navigation treasures (Plate 07) and the "workers" (Plate 04). Each rendered with enough wonk that it looks drawn, not vectorized — slightly off-symmetry on purpose.

4. **Chest-of-drawers-in-a-log structure (CSS).** A skeuomorphic-ish wooden cabinet built from `--bark` gradients and box-shadows, drawers as flat rectangles with tiny SVG pull-knobs, one drawer translated open with a `--moss` sprout SVG poking out. Goblincore hoarding made architectural.

5. **Heat shimmer & lamp glow (CSS).** The compost reactor plate gets a faint `filter`-based shimmer (animated `backdrop-filter` blur ripple, very subtle) and a radial `--lamp-amber` glow that pulses ~6s. The lamp glow also appears, dimmer, behind the title plate (the workbench lamp). No flares, no bokeh — just warm light bleeding into brown.

6. **Dotted leader-lines (SVG, animated).** Thin `stroke-dasharray` lines connecting illustrations to margin notes, drawn in on scroll via `stroke-dashoffset` animation. They terminate in a tiny circle at the illustration and the note begins there. This is the connective tissue of the "tutorial" feel.

**Motifs that recur:** `nature` at its earthiest — leaf litter, hyphae, sprouts, beetles, soil horizons; the **goblin pocket** (kept treasures, accumulation, the chest of drawers); the **field-manual page** (push-pins, foxed paper, plate numbers, marginalia, depth rulers); **lamplight in the dark** (the warm core, the workbench). Nothing celestial, nothing geometric-abstract, nothing chrome. If it isn't found on the ground or kept in a pocket, it isn't on this page.

## Prompts for Implementation

Build haru.systems as **one HTML file, one CSS file, two ES modules, ~14 inline SVG `<defs>` (torn-edge clipPaths ×8 one per plate boundary, the push-pin, the leader-line marker, the feTurbulence paper-displace filter, the mycelium-node glow filter, the heat-shimmer filter)**. No framework, no router, no SPA shell, no build step. No GSAP, no Three.js, no Lottie, no canvas, no WebGL. The animation surface is **CSS transitions + custom properties + one `IntersectionObserver` (driving plate-tilt, leader-line draw, weight-settle) + one scroll-progress `requestAnimationFrame` loop dedicated solely to (a) the per-plate `rotateX` tilt interpolation and (b) the left-edge depth-ruler active-tick + glow**. Cursor-proximity tilt on the Plate 07 treasures is a tiny separate `mousemove` handler scoped to that section only, throttled.

**Tell the tutorial as a descent, not a pitch.** The page is *a person explaining how the forest floor works*, plate by plate, calmly, with diagrams. Copy is instructional-warm: short tutorial steps ("Step 1 — a leaf falls. Watch what the litter layer does with it."), Latin names in italics, margin asides that feel hand-scrawled. Each plate is a self-contained lesson; the whole is a guided walk downward into the soil and back up into spring. The reader should arrive at Plate 07 feeling they were *shown something*, by someone who loves it — and leave with a pebble.

**Tilt is the camera, not a gimmick.** Implement the per-plate `rotateX` so it always reads as "a flat field-manual page lying on a workbench, seen from a crouch." Tilt magnitude scales with the plate's distance from viewport center: a plate entering from below tips toward you (`rotateX(4deg)`), settles flat near center (`0deg`), tips away as it exits the top (`rotateX(-4deg)`). Keep `perspective` on the scroll container around `1400px` so it's gentle, lived-in, never carnival. Pair with a faint moving `--lamp-amber` highlight band on each plate's paper so the tilt visibly catches light.

**Animate things that grow, not things that pop.** Hyphae draw themselves branching. The forgotten-cache sprout unfurls (`stroke-dashoffset` + a slight `scaleY` ease-out-back). The seedling on the spring plate pushes up through the litter on a long, slow ease. The compost temperature curve traces left-to-right like a pencil drawing it. The Fraunces headlines "settle" on entry — a quick `font-variation-settings` weight/SOFT/WONK transition from light-and-soft to set-and-slightly-wonky, like a stamp pressing into damp paper, ~600ms. Leader-lines draw, then their margin notes fade up. Nothing bounces in from offscreen; everything either grows, unfurls, or settles.

**Honor `prefers-reduced-motion`:** freeze plate tilt at `0deg`, render all SVG path animations in their completed state, drop the heat shimmer and lamp pulse to static, keep only opacity fades.

**AVOID:** CTA-stacked hero, "Get Started" buttons, pricing tiers, feature-comparison tables, stat counters / big-number grids ("10,000+ users"), testimonial carousels, logo walls, newsletter modals, generic three-column "Why us" rows, sticky top nav, hamburger overlays, full-bleed glassmorphic cards, neon gradients, pure-black backgrounds, smiling-blob mascots, and anything that looks like a SaaS landing page. This is a field manual that happens to be a website — keep it that way.

## Uniqueness Notes

This design is built to occupy a **near-vacant intersection** in the registry's 230-design frequency map.

**Concrete differentiators from the existing corpus:**

1. **goblincore (2%) is one of the three rarest aesthetics in the entire corpus** — and almost every nature-leaning design in the registry is cottagecore (11%), botanical (24%), fairycore (3%), or watercolor (13%): *sunlit, pastel, pretty*. This design is deliberately the **damp, hoarding, decay-loving opposite** — mud over meadow, beetles over butterflies, kept-junk over fresh-cut flowers. No other design treats nature as machinery-of-rot.

2. **`paper-aged` imagery (5%) as the primary, load-bearing surface — not a texture overlay.** Most paper/grain designs in the corpus use it as a faint top-layer noise. Here the aged-paper field-manual *plate* is the structural unit of the whole page, with per-plate torn SVG edges and feTurbulence buckling. Combined with **`stacked-sections` layout (3%)** reframed as soil horizons, this is a layout/imagery pairing the corpus has not attempted.

3. **`variable-fluid` typography (3%) realized through Fraunces' WONK/SOFT axes for a goblin-handmade serif feel** — variable fonts in the corpus are mostly used for kinetic display stunts; here the variability is *characterful*, not kinetic: headlines "settle" like a stamp into damp paper, and the WONK axis makes the serifs look hand-cut. Paired with Gloria Hallelujah marginalia (not a common Google-Fonts choice in the registry) and Spectral as the field-guide reading voice.

4. **`tech-tutorial` tone (3%) applied to a *forest floor* instead of code** — the corpus's tech-tutorial sites are about software. This one documents mycelium routing, acorn-cache eviction, and the decomposition worker pool with a straight face. The juxtaposition (instructional rigor + goblincore mud) is the design's whole joke and whole heart.

5. **`tilt-3d` (26%) given a literal physical justification** — instead of generic card-hover tilt, every plate is "a field-manual page on a workbench seen from a crouch," tilting on `rotateX` with the scroll as if you're leaning over the table. Pairs with **`warm-earthy` palette (4%)** that hoards browns and rations its only two living colors (moss-green, lamp-amber) like treasures.

**Frequency analysis — patterns deliberately AVOIDED:** glassmorphism (64%), hand-drawn aesthetic label (96% — note: this design uses hand-*built* SVG ink-line illustration, but is *not* the registry's "hand-drawn" aesthetic), card-grid (86%), centered (83%), photography imagery (99%), gradient palette (97%), parallax (96%), cursor-follow (86%), spring (85%), stagger (80%), magnetic (79%). Patterns deliberately PREFERRED for being underused: stacked-sections layout (3%), goblincore aesthetic (2%), warm-earthy palette (4%), paper-aged imagery (5%), variable-fluid typography (3%), tech-tutorial tone (3%).

**Chosen seed (verbatim from assignment):** aesthetic: goblincore, layout: stacked-sections, typography: variable-fluid, palette: warm-earthy, patterns: tilt-3d, imagery: paper-aged, motifs: nature, tone: tech-tutorial
<!-- DESIGN STAMP
  timestamp: 2026-05-10T12:54:58
  seed: seed
  aesthetic: haru.systems is **a goblin's field manual for the systems that run the forest fl...
  content_hash: 9b8805261373
-->