# Design Language for luv.st ## Aesthetics and Tone luv.st is **a kintsugi workshop at the blue hour** — a quiet room where broken things are mended with gold, and where the cracks are not hidden but celebrated as the most beautiful part. The governing aesthetic is **wabi-sabi imperfect ceramic**: the beauty of the incomplete, the asymmetrical, the weathered. This is a site about love understood as repair — the patient, unglamorous, golden-seamed work of staying. It refuses the saccharine vocabulary of dating-app design (no hearts, no pink gradients, no swipe metaphors). Instead it borrows from the Japanese pottery studio: a low wooden bench, a bowl with a hairline fracture, a thin brush, a dish of urushi lacquer dusted with real gold powder, the smell of clay and rain. The tone is **zen-contemplative, leaning grounded-earthy** — unhurried, tactile, slightly melancholy in the way that all genuinely tender things are. Copy is sparse and lowercase, set like the inscription on the base of a tea bowl. Nothing shouts. The whole experience has the pacing of someone slowly turning a cup in their hands, finding each chip and worn glaze-pool and deciding to keep it. The mood word is *naoshi* — "the mending." Warmth here is not the warmth of neon or sunset gradients (98% of the corpus); it is the warmth of bare clay, of beeswax, of a kiln that has cooled overnight. ## Layout Motifs and Structure The composition is **ma-negative-space** as the load-bearing structural choice (only 7% of the corpus) — vast asymmetrical voids of unglazed paper-white, with the content pushed deliberately off-center, the way a single flower sits to one side of a tokonoma alcove. There is **no grid in the conventional sense**; there is a single irregular spine that runs down the page like the gold seam of a repaired bowl — never perfectly vertical, kinking gently left and right at each section, drawn as an animated SVG path. - **The seam-spine.** A 2–3px golden line runs the full scroll height, off to one side, wandering. Every section of the page is "attached" to the seam at one point — a small gold node, like a staple in kintsugi's *kasugai* (stitch) method. The line draws itself as you scroll (path-draw-svg, at 30% — used here but not for the usual underline flourish). - **Off-center vessels.** Each "section" is a single irregular blob of content — never a card, never a box with a rule around it. Content sits inside soft, hand-drawn ceramic silhouettes (a bowl profile, a cup, a shallow dish, a chipped plate), each one slightly different, each one rotated a degree or two off true. - **Asymmetric weighting.** If text is on the left, the right two-thirds of the viewport is empty cream. The eye is given room to rest. Section heights are uneven on purpose — one might be 70vh, the next 130vh — like pottery drying at different rates. - **No header bar, no footer bar.** Navigation, if any, is three tiny gold dots in a corner — the *kasugai* stitches again. The page is a continuous scroll-poem, not a document with chrome. - **Single route.** One HTML file. One vertical journey of roughly six "vessels," top to bottom, ending where it began — at an empty bowl, now seamed in gold. ## Typography and Palette **Fonts — all Google Fonts, two voices: one for the inscriptions, one for the body murmur.** - **Display & headings — *Cormorant Garamond* (weights 300 and 500, italic available).** A high-contrast old-style serif with long, almost calligraphic ascenders — it reads like something brush-lettered onto porcelain before firing. Used at large sizes (clamp 2.5rem → 6rem), always lowercase, generous letter-spacing on the smallest instances, tight on the largest. Its delicate hairline strokes echo the thinness of a crack. - **Body & captions — *Spectral* (weights 300 and 400).** A screen-tuned serif with a slightly soft, humane texture — warmer and more readable than the Cormorant, used for the longer murmured passages. Set at a calm 1.05–1.2rem, line-height 1.8, max-width ~36em, ragged-right. - **Annotation / micro-labels — *Cormorant Garamond* italic, 300, very small (0.7rem), letter-spaced** for things like "i. the bowl arrives broken" — Roman-numeral section markers, like notations in a restorer's logbook. **Palette — the colors of bare ceramic, raw clay, and the gold that joins them. Warm, yes, but earthbound — not a single gradient required, though one optional soft radial of warm light is permitted at the center of the final vessel.** - `#F2EBDD` — *unglazed bisque* — the dominant background, the colour of greenware before firing, a warm off-white with a breath of grey. - `#E5D8C3` — *kaolin shadow* — a slightly deeper clay tone for the soft-shadowed insides of the vessel silhouettes. - `#3A332B` — *kiln-smoke ink* — the near-black warm brown used for all text; never pure #000. - `#C9A227` — *true gold seam* — the kintsugi gold; used only for the seam-spine, the *kasugai* dots, the cracks, and hover states. Used sparingly, it must always feel precious. - `#8C6A3F` — *urushi bronze* — a darker antique-gold for the underside of the seam, giving the gold line a hint of dimensionality. - `#A8453A` — *iron-oxide red* — a single accent of *bengara* (red-iron oxide glaze) used at exactly one moment in the page (the heart of the third vessel) and nowhere else. - `#6B7268` — *celadon dusk* — a muted greyed-green, used for one or two leaf or shadow accents, the colour of old celadon glaze pooling thick. ## Imagery and Motifs **Everything is hand-built SVG or CSS — no photography (98% of the corpus uses it; this site uses none), no 3D renders, no stock anything. The visual vocabulary is the pottery studio.** - **Ceramic vessel silhouettes.** Six irregular, hand-drawn bowl/cup/dish/plate outlines, each used as a content container. They are not symmetrical — one wall bulges, one rim dips. Drawn with a slightly wobbly stroke (2px, `#3A332B` at low opacity) and filled with `#E5D8C3` at 40%. - **The crack.** Each vessel carries one or more fine fracture lines — thin jagged SVG paths. On scroll-into-view, gold "flows" along the crack: a `#C9A227` stroke with a `stroke-dasharray` reveal, gathering into tiny pooled droplets at the crack's ends. This is the central recurring gesture: *the wound becomes the ornament.* - **Gold leaf flecks.** Sparse, irregular small polygons of `#C9A227` scattered in the margins — like the flecks of gold powder that fall onto the workbench. They drift very slowly (a 0.5px parallax) and occasionally catch a glint (a brief CSS brightness pulse). Never more than ~12 on screen. - **The brush stroke.** Section transitions can be marked by a single dry-brush sweep — a textured SVG path with a rough, bristled edge, in `#8C6A3F`, drawn left-to-right as you arrive. - **Pressed botanicals (sparse).** One sprig — a single celadon-green stem with two leaves (`#6B7268`), pressed flat against the bisque near the final vessel, the way a flower might be left beside a finished bowl. Hand-drawn, slightly asymmetrical, never a "pattern." - **No icons.** Where a UI affordance is needed, it is a tiny gold dot or a hairline. The three-dot nav is the only "icon" and it is just three circles. - **Grain.** A very subtle paper/clay grain overlay (CSS `background` noise or a tiled SVG turbulence at ~3% opacity) over the whole page, giving the bisque a tooth. ## Prompts for Implementation Build luv.st as **a single-route, vertically-scrolled meditation in six vessels** — one HTML file, one CSS file, one small JS module (vanilla; an IntersectionObserver and a scroll listener are plenty; GSAP optional but not required). Treat the whole page as a 70–90 second walk through a kintsugi studio at dusk: the reader arrives at a broken bowl, watches it mended, and leaves changed. **Narrative structure — six vessels, threaded by the wandering gold seam-spine:** 1. **The bowl arrives broken.** The page opens nearly empty — vast bisque, a single off-center hand-drawn bowl silhouette with one clear fracture, and the lowercase title `luv.st` set in large Cormorant Garamond to one side. A line of Spectral beneath: *"every bowl worth keeping has been broken once."* The seam-spine begins here, anchored at a single gold node. Slow fade-in, stagger of ~120ms between title and line. 2. **What love actually is.** Scroll reveals a second, differently-shaped vessel. As it enters view, gold flows along its crack (the signature animation). Murmured copy reframes love not as a spark but as *naoshi*, the mending — patient, repeated, golden-seamed. The seam-spine kinks left to reach this vessel's node. 3. **The red moment.** The third vessel is the only place `#A8453A` iron-oxide red appears — a small pooled glaze at the vessel's heart. This is the page's emotional fulcrum: a single short sentence about the moment you choose to stay. Hold it; give it the most negative space of any section (130vh). Let the cursor, if it moves near the red, cast the faintest warm glow (cursor-follow, used with restraint, not the 88%-of-corpus magnetic-everything treatment). 4. **The wear shows.** A vessel with many fine cracks, all of them gold. Copy: the worn glaze, the chipped foot, the years — listed almost tenderly, the way a restorer notes each flaw in a logbook. Roman-numeral micro-labels appear here in Cormorant italic. 5. **The repair holds.** The seam-spine, which has been wandering, here runs nearly straight and strong. A vessel that is more gold-seam than clay — visibly mended many times, visibly whole. A pressed celadon sprig rests beside it. Copy is at its quietest: two short lines. 6. **The empty bowl.** Return to the opening composition — the same bowl, same position — but now its fracture is fully gold, healed, and a soft warm radial of light sits at its center (the one permitted gradient). The seam-spine terminates in a final gold node. A last lowercase line in Spectral, then the title `luv.st` again, smaller. The page ends in stillness. **Motion & feel:** - Everything is **slow**. Transitions 600–1200ms, easing on gentle curves (`cubic-bezier(.22,1,.36,1)`). Nothing bounces, nothing springs hard. The page should feel like clay, not rubber. - The **gold-flows-along-the-crack** animation is the hero gesture — get it right: a dashed `` stroke that reveals on scroll-into-view, with two small `` pooled droplets that scale up at the ends as the reveal completes. - **Seam-spine path-draw** tied to scroll progress: the gold line draws from 0 to full as you descend, kinking at each vessel node. - **Parallax** only on the gold leaf flecks and very subtly on the vessel shadows — a few px at most. No aggressive parallax layers. - **Reduced motion:** if `prefers-reduced-motion`, the cracks render already-gold and the seam already-drawn; no scroll animation, just a static, complete kintsugi page. It should be beautiful even frozen. - **AVOID:** CTA buttons, sign-up forms, pricing tables, stat grids, testimonial rows, feature-card grids, "how it works" 3-step strips, app-store badges, hero-with-headline-and-button. There is none of that. This is a poem about repair, not a landing page. ## Uniqueness Notes Differentiators, each a deliberate move away from the patterns the frequency analysis flagged as saturated: 1. **Wabi-sabi as the literal subject, not a vibe.** Wabi-sabi sits at 3% in the aesthetic frequency table, and where it appears it tends to be a loose "imperfect/organic" gesture. luv.st makes kintsugi — golden-seamed repair — the structural metaphor for *everything*: the layout spine, the hero animation, the colour story, the narrative arc. The cracks are the design. 2. **A site about love with zero hearts, zero pink, zero gradients (almost).** Against a corpus where 96% use gradients and 98% are warm-in-the-sunset-sense, luv.st is warm only in the bare-clay sense, uses exactly one near-gradient (a single radial in the final vessel), and reframes "love" entirely through the pottery studio rather than dating-app iconography. 3. **ma-negative-space as the load-bearing layout (7%), with a wandering SVG seam-spine instead of a grid.** No card-grid (89%), no centered hero-dominant block (86% / 11%), no bento. The composition is asymmetrical voids threaded by a single irregular gold line that kinks at each section node — drawn from kintsugi's *kasugai* stitch method. 4. **No photography at all (vs. 98%), no 3D renders, no stock illustration** — every visual is a hand-built, deliberately-asymmetrical SVG ceramic silhouette with hand-drawn fracture lines. 5. **Restraint as a feature.** Cursor-follow and parallax exist but are dialed almost to nothing (against 88% cursor-follow / 95% parallax / 80% magnetic corpora), and the page is engineered to be fully beautiful with `prefers-reduced-motion` — a complete, static kintsugi bowl. Chosen seed/style: **wabi-sabi imperfect ceramic** (aesthetic: wabi-sabi, layout: ma-negative-space, typography: elegant-serif, palette: honeyed-neutral, patterns: path-draw-svg, imagery: line-illustration, motifs: leaf-organic, tone: zen-contemplative). Avoided patterns from the frequency analysis: hand-drawn-cute (97%), glassmorphism (72%), photography (98%), warm-sunset gradient (96–98%), card-grid (89%), centered hero (86%), cursor-follow-everything (88%), spring/magnetic motion (86%/80%), mono typography (93%).