# Design Language for namu.style ## Aesthetics and Tone **Concept: MAISON NAMU — Autumn/Winter Lookbook, F/W ∞. A couture house whose only model, every season for a thousand years, is the same tree.** *Namu* (나무) is Korean for "tree." namu.style is built as a high-fashion lookbook — the printed kind that arrives in a heavy black envelope — except the "collection" is what a single oak wears across one full year, and the "designer" is weather. Bud-fur in March. The chartreuse slip of first leaf. High summer's heavy green couture. The autumn drop — that one week the whole garment changes colour at once, the runway's only true spectacle. Then the bare structural season: branches as armature, frost as embroidery, the body honest and unclothed. The tone is **avant-garde fashion editorial** — cold-elegant, slightly severe, the way real lookbooks are: enormous margins, tiny captions, full-bleed "shots," and a refusal to explain itself. It is opulent without being warm, reverent without being cute. The visitor is a buyer at a private showing, turning pages in a quiet room, deciding nothing — just looking. No "shop the look." No prices. No newsletter. The clothes aren't for sale; they grow back. There is humour underneath the hauteur — calling a leaf a "garment," crediting "STYLING: prevailing wind, NNW" — but the surface stays straight-faced. Editorial deadpan. The joke is that we mean it. ## Layout Motifs and Structure A **horizontal-scroll** lookbook — the rare axis (~7% of corpus) — paired with **magazine-spread** composition (~6%). The page does not scroll down; it scrolls *sideways*, left to right, the way you turn the pages of an oversized fashion book on a table. Wheel and trackpad are remapped to horizontal travel; a thin progress hairline runs along the bottom like a film strip's edge. The structure is **six "spreads"**, each one full-viewport, each a season-look: 1. **COVER** — black page, the house name *MAISON NAMU* set enormous and letter-spaced, a single twig laid diagonally across it like a model's arm. Small type: `LOOKBOOK · F/W ∞ · NO. 001`. A "turn →" cue. 2. **LOOK 01 — "PREMIÈRE"** (late winter / first bud). The tree mostly bare; one branch in focus, swollen buds rendered as tiny fur collars. Caption block lower-left, the way lookbook captions sit. 3. **LOOK 02 — "SLIP"** (spring, first leaf). Translucent chartreuse leaves unfurling — a sheer garment. The "shot" is a tight crop, leaf-edge filling 80% of frame. 4. **LOOK 03 — "MIDSUMMER, FULL DRESS"** (high summer). The whole crown, heavy and saturated — the "ballgown" look. Widest, most maximal spread; the tree fills the page edge to edge. 5. **LOOK 04 — "THE DROP"** (autumn turn). The runway moment: as you scroll into this spread, the leaves *change colour in a wave* across the canopy — green→amber→rust→bare in one continuous transition tied to scroll position. This is the one piece of theatre the lookbook permits itself. 6. **LOOK 05 — "ARMATURE"** (deep winter). Bare branches as pure structure against pale sky, frost picked out like beadwork. Below the branches, the final captions: the full "credits" of the collection. A small "← return to cover" closes the loop. Composition rule borrowed from real lookbooks: **the subject is never centred**. It bleeds off an edge; the caption sits in the negative space (`ma`-style, ~14%), set tiny, ragged-left, in a different typeface from everything else. Lots of black. Lots of empty page. The eye does the work. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with editorial discipline:** - **Bodoni Moda** (the house voice — covers, look titles, the word *MAISON NAMU*). High-contrast Didone, the eternal fashion-magazine letterform — hairline serifs, dramatic thick/thin. Used HUGE: 96–180px on the cover, 56–88px for look titles, weight 400–500, letter-spacing +0.04em to +0.12em. Italic only for the season subtitles ("première", "slip", "the drop") at ~28px. Didone display is rare in the corpus and *exactly* the right register: it says *Vogue, Dior, runway invitation*. - **Archivo** (or "Archivo Expanded" weight when needed) for all working text — the caption blocks, the credit lists, navigation hints. Set TINY: 11–13px, weight 400–600, letter-spacing +0.14em, frequently UPPERCASE — the way lookbook captions and care labels are set. Ragged-left. This is the "fine print of a beautiful object" voice. - **Spectral** for the rare passage of running prose (the one short paragraph per spread that describes the "garment" in straight-faced couture-speak). Italic 300–400, ~18px, generous leading — a whispered aside between the big silent images. **Palette — a fashion-editorial near-monochrome that "wears" the seasons:** - `#0B0B0C` — Runway Black. Backgrounds for cover and credits; the dominant non-colour. Pages are mostly this. - `#F4F1EA` — Gallery Paper. The off-white of expensive matte stock; "winter sky" and the colour of all small type. - `#9FB14E` — First-Leaf Chartreuse. The spring "slip" — sheer, slightly acid, used only on LOOK 02 leaves. - `#3C5A2E` — Midsummer Loden. The heavy green "full dress" of LOOK 03. - `#C6791F` — Drop Amber. The first autumn colour in the wave. - `#8A2B12` — Drop Rust. The deep end of the autumn wave. - `#B9C4CC` — Frost Bead. Pale steel-blue for the LOOK 05 embroidery/highlights. - `#6E6A60` — Bark Grey. Branch and twig structure; the "armature" of every look. Discipline: a single spread shows **black/paper + at most one or two season colours**. The colour arrives like a garment arrives on a runway — one look at a time. The "drop" spread is the only place two season-colours appear together, mid-transition. ## Imagery and Motifs **Everything is SVG / canvas / CSS. Zero stock photography.** The "photographs" are generated. 1. **The tree as figure (leaf-organic + nature motif, ~7%/13%).** One persistent branch/canopy structure, drawn as SVG paths — same skeleton across all spreads, only its "clothing" changes. Buds are tiny rounded shapes clustered at node points; leaves are simple two-curve blades that scale, multiply, recolour, and finally fall per season. Frost in LOOK 05 is small white stroke-dashes along the bark paths — "beadwork." 2. **The autumn wave (the one canvas set-piece).** In LOOK 04, each leaf has a `t` value (its position in the canopy, 0→1). Scroll progress within the spread drives a moving "colour front": leaves below the front are green→amber→rust→transparent based on distance from the front; above it, still summer green; leaves the front has fully passed flutter downward and out of frame. It reads as the whole tree changing outfit in a single sweep — the runway finale. 3. **Lookbook furniture.** A thin film-strip progress hairline along the bottom edge; tiny crop-mark corners (┐ └) at the page corners like a contact sheet; "LOOK 0X" set vertically up the left margin in tiny tracked caps; the "credits" rendered as a real fashion-credit block — `GARMENT: Quercus robur, in-season leaf` / `STYLING: prevailing wind, NNW` / `LIGHT: low sun, golden hour` / `LOCATION: a field, undisclosed` / `MODEL: the tree (1 of 1)`. 4. **Texture.** A faint film-grain over everything (the print-stock look) and, on the black pages only, an almost-invisible vertical "gutter shadow" down the centre as if the book's spine bows the page slightly toward you. ## Prompts for Implementation Build namu.style as **one HTML document, one CSS file, one small vanilla-JS ES module** — no framework, no build step beyond a minify pass. It is **one horizontal lookbook**, ~6 full-viewport spreads side by side in a single flex row, scrolled left→right. There is no menu, no second page, no pricing, no stat-grid, no testimonial wall, no email-capture, no CTA. If a block starts looking like a "feature card," it is not a lookbook page — delete it and make it a silent full-bleed "shot" with a tiny caption instead. **Scroll & motion:** - Remap vertical wheel / trackpad delta to `scrollLeft` on the spreads-row container; keep native horizontal scroll working too; arrow keys ← → page between spreads with a `spring`/`elastic` ease (snap-ish but soft). A thin bottom hairline shows progress; tiny `LOOK 01 … LOOK 05` ticks sit along it. - Per-spread reveal: as a spread enters the viewport, its big Bodoni title does a slow `fade-reveal` upward with a faint `blur-focus` resolve (16px→0), and its tiny caption block `stagger`s in line by line — the way captions feel "set" rather than "animated." Keep it slow and expensive-looking; no bounce. - **LOOK 04 "THE DROP" is the one canvas piece**: bind the autumn colour-front to in-spread scroll progress (an IntersectionObserver + the container's scroll position), animate ~150–400 leaf objects on a ``, fallen leaves drift down-and-off with slight horizontal sway. Provide a `prefers-reduced-motion` fallback: the front jumps to ~0.7 and leaves are static. - Subtle `cursor-follow`: a tiny `+` reticle (contact-sheet style) tracks the cursor with light lag; over the "turn →" cue it grows into an arrow. That's the only cursor effect — restraint is the brand. **Composition / CSS:** - Each spread = `100vw × 100svh`, `position: relative`, generous internal padding (clamp(3rem, 7vw, 9rem)). Subject SVG/canvas bleeds off one edge; caption block absolutely positioned in the opposing empty quadrant. - Captions: Archivo, 11–13px, `letter-spacing: .14em`, mostly uppercase, `text-align: left`, max-width ~22ch, line-height ~1.7. Look titles: Bodoni Moda, clamp huge, `letter-spacing` positive, `line-height: .95`. - Film grain: a tiled SVG `feTurbulence` PNG at ~4–6% opacity, `mix-blend-mode: overlay`, `position: fixed`, `pointer-events: none`. Black-page gutter shadow: a fixed centred `radial`/`linear` darken at ~6%. - Colour per spread is set via a CSS custom property on the spread element (`--season`); the leaf SVGs/canvas read it. Never let a spread hold more than two season colours (the drop spread excepted). - Type loads with `font-display: swap`; the cover holds with a black screen + just the tiny `LOOKBOOK · F/W ∞` line until Bodoni is ready, then the big name resolves in. **Voice in the copy:** straight-faced couture editorial. Look titles are single severe words ("PREMIÈRE", "SLIP", "FULL DRESS", "THE DROP", "ARMATURE"). The one prose paragraph per spread describes a leaf as a garment without ever winking. Credits are a real fashion-credit block. Never break character; never say "tree-themed website." **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card grids, testimonial walls, hero-with-buttons, glassmorphism panels, hand-drawn doodle aesthetic, warm-cozy palettes, vertical long-scroll. This is a cold, sideways, near-monochrome editorial object. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **A fashion lookbook whose only model is a tree, dressed by the seasons.** The site is structured exactly like an oversized printed F/W lookbook — cover, six "looks", a credits block — and the "garments" are bud-fur, first leaf, summer crown, the autumn drop, bare armature. No other site in the corpus frames botany as couture editorial; no other namu.* site uses fashion-magazine grammar at all (the siblings are forestry ledgers, woodshops, etc.). 2. **Horizontal-scroll + magazine-spread + Bodoni Moda Didone display** — three individually rare choices (~7%, ~6%, near-zero) fused into the load-bearing structure. The lookbook is read sideways, page by page, with hairline-serif display type set enormous over near-empty black pages. This combination does not occur elsewhere. 3. **"THE DROP": a single scroll-bound canvas runway finale.** One spread, one set-piece — a moving colour-front sweeps green→amber→rust→bare across ~150–400 procedurally placed leaves as you scroll through that spread, fallen leaves drifting off-frame. It's the only theatrical moment in an otherwise austere object, and it's mechanically unlike any other animation in the corpus (not parallax, not stagger, not tilt — a positional colour-wave keyed to in-section scroll). 4. **Near-monochrome editorial palette that "wears" one season-colour at a time.** Runway Black `#0B0B0C` + Gallery Paper `#F4F1EA` dominate; a single season colour (`#9FB14E` chartreuse / `#3C5A2E` loden / `#C6791F` amber / `#8A2B12` rust / `#B9C4CC` frost) appears per spread like a garment on a runway — never the warm, gradient-heavy, multi-colour treatment that ~95–98% of the corpus uses. 5. **Lookbook furniture as the entire UI.** Contact-sheet crop marks, a film-strip progress hairline, vertical "LOOK 0X" margin labels, a `+` reticle cursor, and a real fashion-credit block ("MODEL: the tree (1 of 1)") — no nav bar, no buttons, no cards. Restraint is the brand. Chosen seed/style: **avant-garde fashion lookbook** (from seeds.json, `"avant-garde fashion lookbook"`). Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (79%), photography (98%), card-grid (90%), full-bleed-as-default with warm gradient palettes (warm 98% / gradient 95%), cursor-follow-heavy + magnetic + spring-everywhere (89%/81%/85%) — used here only minimally and deliberately, parallax (91%, not used), pastoral-romantic / warm-inviting tone (deliberately replaced with cold editorial deadpan). Preferred underused patterns: horizontal-scroll (~7%), magazine-spread (~6%), avant-garde aesthetic (~2%), Didone/elegant-serif display (~7%), ma-negative-space (~14%), monochrome palette (~15%).