# Design Language for haru.works ## Aesthetics and Tone haru.works is **a craftsman's leather portfolio case left open on a black workbench, where every pocket and card-slot has quietly turned to liquid hologram** — the stitched cowhide is real and matte and worn, but the things tucked inside it diffract. The domain reads two ways at once and the design refuses to choose: *haru* (春 — the Japanese word for spring, but also "to stretch, to set, to mount on a frame" — 張る) crossed with *works* — so the page is **a spring atelier**, a workshop where seasons are assembled by hand, where the first warm light of the year is treated as a material you cut, fold, and pin into a display case. The governing mood is **zen-contemplative**, but not the airy white-gallery kind. This is the stillness of a leatherworker's bench at dawn: the smell of oil and beeswax, a single low lamp, the quiet certainty of someone who has burnished the same edge ten thousand times. Nothing rushes. Plates breathe in and settle. The holographic shimmer is never frantic — it moves at the speed of a slow tilt of the wrist, the speed of light crawling across an oil-slick puddle when a cloud passes. The contemplation is *tactile*: you are invited not to meditate on emptiness but on the grain of a thing, the way thread bites leather, the way a season is actually a sequence of small repairs. The emotional arc, top to bottom: **the case opens** (cold black, a seam of light) → **the pockets reveal themselves** (bento compartments of leather, each holding one diffracted artifact) → **a card is drawn and turned over** (the card-flip reveal, the worked face shown) → **the case is left open, lamp still on** (a slow, patient close that never quite closes — the workshop stays available). It should feel like being shown someone's life's work by a master who barely speaks, letting the objects do the talking. This is emphatically **not** a SaaS landing page, an agency site, or a product showcase. There are no plans, no pricing, no logo wall, no "trusted by," no stat counters, no CTAs stacked above the fold. The only "conversion" is *staying* — running your cursor along the stitching, flipping every card, watching the hologram answer the light. ## Layout Motifs and Structure The page is a **bento-box composition** — the seed's `bento-box` constraint taken at full strength and reframed as **the fitted interior of a leather portfolio case**. A bento box is a tray of compartments where each food has its own walled cell; here the walls are **raised leather welts** (rendered as CSS — beveled `box-shadow` + a hair-thin embossed inner stroke), and each cell holds exactly one diffracting artifact. The grid is **deliberately irregular**: a tall narrow slot on the left for the case's "spine," a wide shallow slot across the top like a pen-loop, two large square pockets, three small card-slots, one ribbon-thin slot at the very bottom. Compartments do not all align — some are inset 8px from their neighbors, as if the leather were cut by hand and not a CNC. **Desktop (≥1024px):** a 12-column CSS Grid, 8 rows, with named grid-areas literally named after case parts — `spine`, `penloop`, `breast-pocket`, `card-slot-a/b/c`, `business-slot`, `ribbon`. The whole tray is **max-width 1180px, vertically centered with generous black margin around it** so the case floats on the workbench. The bento is *one screen* on first load — no scroll needed to see the closed-then-opening case — and then scrolling does not move the page; instead scroll drives a **single slow "tilt"**: the entire tray rotates 3–5° on X and Y as you scroll, and *that tilt* is what makes the holographic foils shift hue. Scroll is a light source you steer, not a conveyor belt. **Tablet (768–1023px):** the bento collapses to a 6-column grid; `spine` becomes a horizontal band across the top, the card-slots stack into a 2×2 fan. **Mobile (<768px):** compartments stack into a single column, but each retains its leather welt and its inset jitter — it reads as a *stack of pocketed cards*, not a list. The tilt becomes device-orientation-driven (with a static fallback). There is **no conventional navigation bar.** The `spine` compartment carries the only nav: four words burned into the leather (烙印 branding-iron treatment) — *Atelier · Seasons · The Drawer · Colophon* — which on click do not route anywhere but cause the corresponding card in the tray to flip face-up and the others to dim. The whole site is **one page, four flippable faces, zero page loads.** A persistent thin element: a **single waxed thread** (1.5px, the dark-neon magenta) that runs as an SVG `path` stitched *through* every compartment — entering one welt, crossing the gap, exiting the next — animated with `path-draw-svg` on load so the case appears to be *being sewn shut*, then sitting still. It is the literal "stitching together" of the bento cells and the only thing that visually unifies the irregular grid. ## Typography and Palette **Type stack — Google Fonts only, three families, with one of them set in deliberate motion.** - **Sora** (variable, weights 100–800) — the **kinetic-animated** voice and the page's display face. Sora's geometric-but-slightly-soft letterforms are the headline of every compartment, set large (clamp 2.2rem → 4.5rem). It is "kinetic" not via gimmick but via **a slow per-letter weight-and-tracking wave**: on load and on every card-flip, each glyph in a heading animates its variable `wght` axis from 200 → 600 → 200 in a staggered ripple (≈40ms offset per letter), so the word looks like it's **inhaling**. Tracking widens by 0.02em at the wave's crest. Headings also do a one-time `path`-less "settle": they arrive 6px low and slightly blurred, then rise and sharpen. Nothing bounces; everything *eases-out into stillness* — the kinetic energy is always spending itself, never gathering. - **Newsreader** (variable, optical-size axis live) — the body and caption voice. A warm, slightly literary serif that reads like the handwritten label glued inside a real portfolio case. Body copy is set at weight 400, 1.65 line-height, max 62ch, on the leather-toned panels. Captions and the colophon use the small optical size, italic, in the muted gold — the voice of someone annotating their own work in pencil. - **Space Mono** — used *sparingly and only* for the "spec stamps": tiny monospace labels in the corner of each compartment (e.g. `PLATE 03 · SPRING · LEATHER №7 · FOIL: AURORA`), uppercase, letter-spaced 0.18em, in a dim cyan. This is the workshop's inventory hand — it grounds the holographic shimmer in something that feels catalogued and real. **Palette — `dark-neon`, but read through oiled leather, not glass or chrome.** - `#0B0A0D` — **bench black.** The void around the case. Not pure black — a hair of warm purple in it, like a dark room with a lamp somewhere. - `#16131A` — **case interior shadow.** The recess of each bento compartment; the gradient floor of every pocket. - `#3A2A1E` — **worn cordovan.** The base leather tone of the welts and panels — a deep oxblood-brown. The whole tactile substrate is built from this color plus CSS noise. - `#5C4632` — **burnished tan.** Highlight on the leather's raised edges, the color the welts catch under the lamp; also the muted-gold body-accent voice. - `#FF2D95` — **filament magenta.** The dark-neon primary. The waxed thread, the active-nav glow, the hottest band in the holographic foils. Used like a single neon tube reflected in oil — present but never flooding. - `#16E0C8` — **oxidized cyan.** The dark-neon secondary. The spec-stamp text, the cool edge of the diffraction sweep, the rim-light on flipped cards. - `#8A6BFF` — **iris violet.** The dark-neon tertiary, the mid-tone of every holographic gradient where magenta hands off to cyan. - `#E9E1D2` — **paper label.** The near-white reserved exclusively for the inset handwritten labels and the heading text at the wave's crest — warm, like aged index card, never clinical white. Holographic surfaces are **always** the magenta→violet→cyan triad swept across a `conic-gradient` or layered `linear-gradient` with `background-blend-mode: color-dodge` over the leather, masked so the shimmer only appears *inside* the artifacts, never on the leather frame itself. ## Imagery and Motifs **No stock photography. No 3D renders. No Lottie. No icon font. No illustration library. No PNG textures.** Every visual is one of these hand-authored, code-only asset types: 1. **The leather substrate (CSS-only).** The welts, panels, spine, and pen-loop are built from `#3A2A1E` base + a multi-layer `repeating-radial-gradient` and fine `feTurbulence`-driven noise (one inline SVG filter, `baseFrequency` ≈ 0.9) for grain, + a soft `inset` `box-shadow` for the burnish, + a 0.5px embossed light stroke along the top edge of each welt. Pores and creases are a second, coarser noise layer at 6% opacity. It should read as **full-grain vegetable-tanned leather** — matte, slightly uneven, alive. 2. **Hand-stitching (inline SVG path).** The single waxed thread (`#FF2D95`, `stroke-dasharray` for the lockstitch rhythm — short dash, short gap — `stroke-linecap: round`), drawn through every compartment. On load it animates `stroke-dashoffset` to zero (the "being sewn" reveal) over ~2.2s, then is static. A faint duplicate path offset 1px down in `#16131A` is the thread's shadow in the leather channel. 3. **Holographic foils (CSS conic/linear-gradient + blend).** Each artifact inside a compartment carries a foil: a `conic-gradient` cycling magenta→violet→cyan→violet→magenta, layered with `mix-blend-mode: color-dodge` and a subtle `linear-gradient` highlight band. The foil's `--angle` custom property is bound (via a tiny `requestAnimationFrame` loop) to the tray's current scroll-tilt, so **the diffraction genuinely tracks the "light."** A `mask-image` keeps the foil strictly within the artifact's rounded rect. 4. **Wave-forms (the recurring motif).** A thin, slow **standing wave** drawn as an SVG `path` with an animated `d` attribute (3–4 control points lerping on a sine), appearing: (a) as the contour of the "spring water" artifact in the breast-pocket, (b) as a horizontal ripple separating the heading from body text in two compartments, (c) as the loading "seam of light" before the case opens — a single horizontal wave-line of `#16E0C8` that flexes once and splits the black. The waves are always **low-amplitude and long-period** — the visual equivalent of a held breath. They are the bridge between *haru* (spring water, the first thaw) and the holographic theme (light is a wave). 5. **The card faces (the four flippable artifacts).** Each card-slot holds a card with a leather *back* and a holographic *front*; the front, when revealed, shows a code-drawn vignette: *Atelier* = an abstract bench with a lamp-glow radial; *Seasons* = four nested wave-rings tinted through the year; *The Drawer* = a row of thin vertical "tools" each a 1px gradient line; *Colophon* = pure text on near-black with a single foil seam. No raster art anywhere. 6. **Branding-iron nav (CSS text-shadow + filter).** The four nav words in the spine look *burned in*: `#5C4632` text with a dark `inset`-style char-glow via stacked `text-shadow`, slightly irregular baseline (each word nudged ±1px), and on hover a brief `#FF2D95` "ember" glow that cools back to tan over 600ms. 7. **Spec stamps (typographic only).** The Space Mono inventory labels described above — treated as printed-then-faded ink: 70% opacity `#16E0C8`, `letter-spacing: 0.18em`. ## Prompts for Implementation Build haru.works as **one HTML file, one CSS file, one ES module, and a small bundle of inline SVG defs** (1 leather-grain turbulence filter, 1 stitch path + shadow, 4 card-front vignette groups, 1 standing-wave path used by-reference, 1 mask for the foils). No framework, no router, no build step, no SPA shell. **No GSAP, no Three.js, no Lottie, no canvas, no WebGL.** The entire motion budget is: CSS transitions/animations, one `IntersectionObserver` (to trigger each compartment's settle-in as the page first paints), and one `requestAnimationFrame` loop whose *only* job is to read the scroll position, compute the tray's tilt, write two CSS custom properties (`--tilt-x`, `--tilt-y`) and one (`--foil-angle`) on `:root`. Everything else — the leather, the foils, the kinetic headings, the card flips — keys off those variables and CSS keyframes. The rAF loop must `cancelAnimationFrame` when the document is hidden. **The narrative is the whole point. Write it as a sequence, full-bleed, no scroll-jacking beyond the tilt:** - **Cold open (≈1.2s):** bench black. A single horizontal `#16E0C8` wave-line draws across the middle (`stroke-dashoffset`), flexes once (animated `d`), then *splits* — the top and bottom halves of the leather case sliding apart from that seam to reveal the bento tray. This is the case opening. Respect `prefers-reduced-motion`: skip straight to the open case. - **Reveal (staggered, ≈1.8s total):** compartments settle in one by one (the `IntersectionObserver`/initial-paint stagger), each arriving 6px low + 2px blurred + foil dim, then sharpening. The waxed thread sews itself through all of them last. Each compartment's heading does its Sora `wght` ripple as it settles. - **Dwell (indefinite):** the user tilts the tray by scrolling; foils shift hue; headings re-ripple gently every ~14s on a slow loop (so the page is never fully dead, never busy). Hovering a compartment lifts it 4px (`hover-lift`) and brightens *its* foil only; the nav words ember on hover. - **The flip (on nav click or card click):** the targeted card does a `transform: rotateY(180deg)` over 700ms `cubic-bezier(.2,.8,.2,1)` — the `card-flip` pattern, realized as **turning over a worked piece to show the finished face**. Mid-flip, at the edge-on moment, fire a quick foil-angle sweep so the holo "catches" as it passes through the light. The other three cards dim to 55% and desaturate slightly. A second click flips it back. - **The non-close (footer):** the very bottom `ribbon` compartment holds the colophon — fonts, palette, "made by hand, no images, no frameworks," a date stamp in Space Mono. Below it, the leather case halves drift *almost* back together but stop 40px short, leaving the seam of cyan light glowing. The workshop stays open. No newsletter, no "back to top" rocket, no social row. **Hard avoids:** no hero with a CTA pair; no pricing/plan cards; no stat grid ("10k+ projects"); no logo wall; no testimonial carousel; no feature-icon 3-column; no cookie-banner-as-design-element; no parallax of stacked marketing sections. If a section would look at home on a startup landing page, it does not belong here. Bias every decision toward *fewer compartments, more craft per compartment, slower motion, deeper black*. **Tone enforcement:** keep copy sparse and a little oblique — labels, not paragraphs of marketing. The voice is a leatherworker who shows rather than tells. Whitespace (here: black space) is structural, not decorative. When in doubt, take something *out* and make what remains more tactile. ## Uniqueness Notes This design targets a deliberately vacant cell in the registry's 230-design frequency map. Concrete differentiators: 1. **holographic (10%) × leather-texture (3%) at full strength is unattempted.** The registry's leather-texture imagery is paired with luxury-gold, deep-burgundy, or vintage motifs; its holographic aesthetic is paired with 3d-render, gradient-mesh, or chrome-metallic. **Matte oiled leather as the frame and liquid hologram as the contents — diffraction trapped inside cowhide — appears nowhere in the corpus.** This is the design's anchor. 2. **bento-box (14%) read as a fitted leather portfolio interior, with hand-cut irregular cells stitched together by an animated SVG thread.** Existing bento-box layouts in the registry are clean dashboard/SaaS grids; none treat the dividers as physical raised welts or unify the cells with a literal "being sewn shut" path-draw. The grid-areas are named after case parts (`spine`, `pen-loop`, `breast-pocket`). 3. **kinetic-animated typography (4%) realized as a variable-font *wght-axis breathing wave* that always spends its energy into stillness — not bouncing, not glitching, not typewriter.** Paired with `zen-contemplative` tone (4%), the kinetics are explicitly *calm*: motion that decelerates into rest. This calm-kinetic pairing is rare; most kinetic type in the corpus is energetic or playful. 4. **wave-forms motif (2%) used three ways as the conceptual bridge** between the domain's *haru* meaning (spring thaw, first water) and the holographic concept (light is a wave) — as the cold-open "seam of light," as section dividers, and as the contour of the "spring water" artifact. Wave-forms is one of the least-used motifs in the registry. 5. **dark-neon palette (4%) deliberately under-saturated and oil-filmed** — neon as a single tube reflected in beeswax, not a flooded cyber scene. The neon triad (magenta/violet/cyan) is masked to appear *only* inside the artifacts; the leather frame stays in warm cordovan/tan. This restraint distinguishes it from the corpus's typical dark-neon crypto/dashboard treatments. 6. **card-flip (14%) reframed as "turning over a worked piece"** — the flip is a craftsman's gesture (showing the finished face of something you made), with a mid-flip holographic catch, not a generic UI card toggle or product-spec reveal. Combined with: no hero CTA, no pricing, no stats, no logo wall, no parallax marketing stack — a single-page, four-flippable-face, zero-route experience. **Avoided overused patterns from frequency analysis:** sidestepped hand-drawn (96%) and glassmorphism (64%) aesthetics; photography (99%) and gradient-mesh imagery; full-bleed (94%)/card-grid (86%)/centered (83%) generic layouts in favor of an irregular bento; gradient (97%)/warm (97%) default palettes in favor of dark-neon-over-leather; mono (95%)/humanist (53%) default type in favor of kinetic variable Sora + literary Newsreader (Space Mono is used only as a deliberate small accent). Used cursor-follow/spring/magnetic at most incidentally — the dominant interaction is scroll-as-light-tilt, which is uncommon in the corpus. Documented chosen seed/style: **aesthetic: holographic, layout: bento-box, typography: kinetic-animated, palette: dark-neon, patterns: card-flip, imagery: leather-texture, motifs: wave-forms, tone: zen-contemplative.**