# Design Language for namu.style

## Aesthetics and Tone

namu.style is a **xylological couture codex** — a speculative atelier where individual tree species are catalogued not as botanical specimens but as garments. The Korean word *namu* (나무, "tree") collides head-first with the suffix *.style*, and the site lives inside that collision: each page treats a poplar, a hornbeam, a Korean red pine as if it were a haute-couture house with its own silhouette, palette, fabric hand, and seasonal mood.

The aesthetic register is **avant-garde fashion lookbook** filtered through **fairycore** — but a *severe* fairycore, the kind found in Iris van Herpen's runway notes and Kazuko Koike's MUJI essays, not in pastel Pinterest moodboards. There are no toadstools, no glitter, no soft-focus haze. Instead the mood is **opulent and grounded-earthy**: the dim, oxblood velvet hush of a private dressing room at Maison Margiela in autumn, where a single tree-branch sculpture leans against a draped mirror and a leather-bound dendrochronology folio sits open on a brass tray. The site whispers in the same register that a couture archive whispers — slowly, with reverence, with a hand running across grain.

The voice carries a **scholarly-intellectual** undertone: every species page reads like a catalogue raisonné essay (1500-2000 word ranges, third-person, nominalized verbs, occasional Latin binomial in italics), but the prose is interrupted by *fashion-spread captions* — single italicized lines like *"Quercus mongolica, autumn. Cropped at the shoulder. Tannin-rust on the tongue."* That tension between dendrology and fashion is the entire personality.

There is **stillness** here. The page does not entertain the reader. It expects the reader to slow down, scroll one section at a time, let the leaf-paths finish drawing themselves before clicking. If the user is in a hurry, this site is not for them. The site is comfortable with that.

## Layout Motifs and Structure

The macro-structure is a **magazine-spread lookbook** descending the viewport in numbered "looks" (Look 01 through Look 12), one species per look, with the entire site presented as a single seasonal collection: *Fall/Winter — namu archives*. There is no top navigation. There is no hamburger. There is a single fixed element in the upper-right: a thin vertical column of 12 hairline tick-marks, one per look, that fills with terracotta as the reader descends — a **ring-counter** echo of tree rings.

Each look is a **diagonal-sections** spread (not parallax) — the content sits inside a parallelogram clipped at exactly 4° off the horizontal, an angle echoing the rake of a felled trunk. This 4° tilt is consistent throughout the site and is the single most identifying structural mark. Headlines, image frames, pull-quotes, and section dividers all share that 4° rake. The 4° is *measured*, not vibey: every implementation must hit `transform: rotate(-4deg)` exactly, and counter-rotate child text by `+4deg` so reading remains horizontal.

The micro-grid inside each look is a **broken-grid** of 14 columns (not 12) over a 24-row baseline. The baseline is **24px**, deliberately tall, generating an unhurried vertical rhythm. The 14-column grid is asymmetric on purpose — the reader's eye is forced left of center, where the species' Latin binomial sits in 9pt small-caps, while the common Korean name (e.g., *소나무*, *자작나무*, *느티나무*) anchors the right gutter at 18vw, set huge, 4° tilted, in elegant serif.

Every look contains exactly four zones, in this order down the spread:

1. **Plate** — a full-width botanical illustration zone (1.4 viewport heights), showing the species rendered as a hybrid: half taxonomic plate, half clothing technical sketch. The leaf-veins are drawn with stroke-dasharray path-draw on scroll-trigger.
2. **Swatch row** — a 14-column horizontal strip of "fabric swatches," each a 96px square, each filled with a procedurally-generated wood-grain pattern derived from the species' actual ring structure (tight rings = corduroy hatch; loose rings = chiffon wash).
3. **Codex column** — the long-form essay column, set in the same baseline rhythm, with marginalia in the right gutter (small caps, 8.5pt, terracotta) for binomial cross-references.
4. **Garment line** — a single horizontal scrolling band (slow, mouse-wheel-locked, not autoplay) where the species-as-garment is shown in 6 silhouette poses — like a runway contact sheet in pure line art.

Between looks: a **lookbook turn-page** transition — the lower 18% of the viewport curls upward like the corner of a heavy paper page, revealing the next look's terracotta seal underneath. Triggered by IntersectionObserver, never autoplay.

There is no footer in the conventional sense. After Look 12, the page closes with a **colophon spread**: the typeface specimen, the palette as wood-stain pours on linen, a single hand-drawn tree-ring with the publication date carved into its center.

## Typography and Palette

**Display face — Korean common names and look numerals:** *Cormorant Garamond* (Google Fonts), weight 500 italic for the species' Korean name set at clamp(4.2rem, 11vw, 9.5rem), tracking -0.018em, line-height 0.86. Cormorant's old-style tail on the *Q* and the calligraphic ductus of its italic feels like an 18th-century botanical plate's hand-engraved title cartouche. Korean glyphs (한글) are rendered in *Noto Serif KR* (Google Fonts) at the same optical size, weight 500, with a 4px rightward optical kerning to compensate for the Hangul's heavier visual weight against Cormorant's airier Latin counters.

**Editorial body face — codex column:** *Lora* (Google Fonts), weight 400 / 500-italic, set at 17px / 1.7 line-height on the 24px baseline (so two lines = three baseline units). Lora is a contemporary serif with calligraphic roots and just enough warmth to carry 1500-word essays without becoming brittle. Drop caps (3 lines tall) are set in Cormorant Garamond italic, terracotta filled, with a hand-drawn leaf flourish trailing off the descender.

**Caption / marginalia face:** *IBM Plex Sans Condensed* (Google Fonts), weight 500 small-caps, 8.5pt, tracking 0.14em — used exclusively for Latin binomials, plate numbers, and color-stain identifiers (e.g., *PLATE VII · QUERCUS MONGOLICA · STAIN N°4*).

**Numerals:** All numerals throughout the site use *Cormorant Garamond's* old-style figures (1, 3, 4, 5, 7, 9 descend below baseline) — never lining figures. This is non-negotiable.

**Palette — five stains and one ground:**

- `#1a1410` — *ground.charcoal-bark*: the base background, an almost-black with a 4% red shift, the hue of wet ironbark at dusk
- `#f4ede0` — *paper.unbleached-linen*: the warm cream of an unbound rag-paper folio, used for codex column backgrounds and plate grounds
- `#b3502b` — *stain.terracotta-tannin*: the dominant accent — a baked terracotta with tannin warmth, used for tick-marks, drop caps, marginalia
- `#5a3a1f` — *stain.walnut-ink*: a deep walnut-ink brown for body type on cream grounds and for botanical line work
- `#4a5d3a` — *stain.sap-green-aged*: a muted, oxidized sap green (NOT bright forest green) for leaf veins, accents, and the ring-counter fill at depth markers
- `#9a8259` — *stain.brass-mordant*: a tarnished brass for hover states, hairline rules, and the colophon's tree-ring signature

The combinatorics matter: terracotta on charcoal-bark is the high-contrast pair (logo, look numerals); walnut-ink on unbleached-linen is the body-reading pair (codex column); sap-green-aged on charcoal-bark is the data-overlay pair (leaf-vein paths). Brass-mordant appears only on hover — a tiny piece of metal touched by candlelight.

The palette is explicitly **terracotta-warm + earth-tones with a deep-burgundy base** — three palette tags that sit at 0%, 5%, and 2% in the corpus respectively. None co-occur in the existing 340 designs.

## Imagery and Motifs

**Zero photography. Zero 3D renders. Zero gradient meshes. Zero stock anything.**

The entire visual vocabulary is **custom botanical-illustration** rendered as if drawn with a 0.18mm Rapidograph on cold-press cotton paper, then scanned at high enough fidelity to preserve nib bleed and the occasional graphite under-trace. Every illustration must feel hand-made by *one* botanical illustrator with a consistent fist — not a stock-pack.

**Three illustration registers, used in this order per look:**

1. **The full-plate** (per look, one): a complete species-as-garment hybrid — the Korean red pine drawn as a structured shoulder cape with the cones rendered as oversized buttons; the silver birch as a tiered slip-dress with peeling-bark pleats; the ginkgo as a kimono with fan-leaf hem. Each plate is signed in the lower-right corner with a hand-drawn monogram (a tilted N over a leaf vein). Inks are walnut-ink on unbleached-linen.
2. **The swatch row** (per look, fourteen): tight, 96px square procedurally-generated wood-grain SVGs. The generation algorithm: take the species' actual mean ring-spacing (in pixels), draw concentric arcs with Perlin-noise distortion, vary stroke-width by ring age. Tight-ring species (Korean red pine) read as corduroy; loose-ring species (poplar) read as raw silk.
3. **The garment runway** (per look, six): pure-outline 1.25px walnut-ink contour drawings of the species-as-garment in six runway poses (frontal, three-quarter, back, hem-detail, shoulder-detail, cuff-detail). No fill. No shading. The outline alone must carry the silhouette.

**Recurring decorative motifs:**

- **Tree rings as ornament** — every section break uses a partial concentric-ring fragment as a divider. Ring count signals section depth (3 rings = section, 5 = chapter, 7 = look-break).
- **Pressed-leaf annotations** — small (40-60px) walnut-ink leaf silhouettes float in the gutters as bullet-replacements; each leaf is the *correct* species for the look it appears in (Quercus mongolica look = real oak silhouettes, not generic).
- **Tannin-stain rings** — the terracotta accent is sometimes deployed as a soft circular wash, the way a wet teacup leaves a ring on paper. These appear behind look numerals and at hover-anchor points.
- **The four-degree rake-mark** — an inscribed angle marker (a tiny degree-symbol with "4°" beside it) appears once per look, lower-right of the plate, as a self-aware structural credit.

**Strictly forbidden imagery:** any photograph; any neon glow; any glassmorphism; any gradient mesh; any "AI-generated forest" cliche; any pastel watercolor wash; any geometric-flat-illustration; any emoji; any svg blob.

## Prompts for Implementation

**Architecture.** A single static HTML document. No framework. No build step. No router. Vanilla CSS (custom properties for the six palette stains and the 24px baseline), vanilla JS for the path-draw, the ring-counter, the lookbook turn-page transition, and the wheel-locked garment-runway scroll. Honor `prefers-reduced-motion`: all path-draws complete instantly, the page-curl transition becomes a fade, the runway becomes a static six-up grid.

**The 4° rake.** Define a single CSS custom property `--rake: -4deg`. Apply via `transform: rotate(var(--rake))` to look-frames, plate-frames, swatch-rows, and the colophon. Counter-rotate text containers with `transform: rotate(calc(-1 * var(--rake)))` so reading stays horizontal. Every implementer must sanity-check that text never tilts — only frames tilt.

**The path-draw on leaf veins.** Each species plate is an inline SVG. Veins use `stroke-dasharray` and `stroke-dashoffset` keyed to scroll progress through the look (IntersectionObserver + requestAnimationFrame). The vein draws over ~600ms once 30% of the look is in view, easing on a hand-drawn jitter curve (cubic-bezier(0.32, 0.72, 0.43, 0.99)). Inks are stroke `#5a3a1f` walnut-ink at 1.25px on cream grounds, `#4a5d3a` sap-green-aged at 1.0px on charcoal-bark.

**The ring-counter (right rail).** Twelve hairline tick marks (1px × 14px, 18px apart) fixed at top: 50% transform: translateY(-50%); right: 32px. Each tick fills with terracotta as its corresponding look reaches the viewport center. The currently-active tick grows to 22px and gains a 4px-radius terracotta dot to its left. Do not use scroll-jacking; use plain IntersectionObserver thresholds. The active tick has a subtle `text-shadow`-like glow done in pure CSS box-shadow.

**The wood-grain SVG generator.** Write a tiny pure-JS function `generateGrain(species, size=96)` that takes a species ring-spacing parameter (1-4) and outputs an inline SVG with concentric arcs warped by 1D Perlin noise (~80 lines of JS, no library). Run it once per swatch on `DOMContentLoaded`. Cache the output. Do not regenerate on resize.

**The lookbook turn-page transition.** When a look enters the viewport, the lower-right 18% of the *previous* look's frame curls upward via a CSS `clip-path: polygon(...)` whose vertices are animated through a 700ms `transform` that simulates a single thick paper page lifting. The reverse motion plays on scroll-up. Below the curl, a 32px terracotta wax-seal monogram is briefly revealed.

**The garment runway (per look).** A horizontal-scrolling strip locked to mouse-wheel inside the look, six contour-drawn poses spaced 200vw apart. Wheel-y is captured and translated to translate-x on the runway only when the runway is in viewport center; outside that band, the page scrolls vertically as normal. This is a magic-window pattern — implement carefully so it does not trap the user.

**Type loading.** Self-host nothing. Use Google Fonts via a single preconnect + a single `<link rel="stylesheet">`. Load `Cormorant Garamond` (italic + roman, 400/500), `Lora` (400/500 + italic), `IBM Plex Sans Condensed` (500 small-caps), and `Noto Serif KR` (500). Display: swap. Set body line-height first against a *fallback* (Georgia for Lora, Times for Cormorant) that has near-identical x-height to minimize FOUT shift.

**Color application discipline.** Body type is `#5a3a1f` walnut-ink on `#f4ede0` unbleached-linen — never pure black, never pure white. Charcoal-bark `#1a1410` is reserved for full-bleed ground sections (the plate background, the ring-counter rail). Terracotta is rationed: it must not exceed 8% of any viewport's painted area at any time. If a designer is tempted to add another terracotta element, they must remove an existing one.

**No carousels, no modals, no tabs, no toggles, no accordions, no lightboxes, no pricing tables, no feature-stat grids, no CTA buttons, no email-capture popups, no social-proof rows, no FAQ collapses, no testimonial cards, no pricing tiers.** This site is a magazine. Not an app. Not a SaaS landing page. Not a portfolio template. If a feature can be replaced with an unbroken paragraph and a beautiful illustration, it is.

**The story arc.** The reader descends through twelve species. Look 01 opens with *Pinus densiflora* (소나무) — the Korean red pine — as the canonical winter coat. Look 06 sits at the equinox with *Ginkgo biloba* (은행나무) and the first golden swatch row appears. Look 12 closes with *Zelkova serrata* (느티나무), the village-elder tree, dressed as a long ceremonial robe — and below it, the colophon. The whole site is a single seasonal turn. No conclusion paragraph. No call-to-action. The last visible element is the inscribed tree-ring with the publication date.

## Uniqueness Notes

**Chosen seed (from assignment):** *avant-garde fashion lookbook* (aesthetic: avant-garde / aesthetic-overlay: fairycore-severe; layout: magazine-spread + diagonal-sections; typography: serif-revival + playfair-elegant adjacent (Cormorant Garamond); palette: terracotta-warm + deep-burgundy + sap-green-aged earth-tones; patterns: path-draw-svg + scroll-triggered; imagery: custom-illustration + line-illustration; motifs: leaf-organic + retro-patterns (tree-rings); tone: scholarly-intellectual + opulent-grand + grounded-earthy).

**Differentiators from the 340-site portfolio (per frequency analysis):**

1. **First xylological–couture hybrid in the corpus.** No existing design treats trees as garments or operates as a fashion lookbook of botanical species. The closest neighbors — *cottagecore* (4%), *botanical* aesthetic (19%), *floral-botanical* motifs (2%) — are all read as soft, friendly, pastel registers. namu.style is none of those; it is severe, slow, opulent. The collision of *avant-garde fashion* (3%) with *botanical-illustration* imagery (6%) appears nowhere else in 340 sites.

2. **Terracotta-warm palette deployed as a primary, not an accent.** The `terracotta-warm` palette tag sits at 0% in the corpus — completely unused. Combined with `deep-burgundy` (2%) and `earth-tones` (5%), this design occupies a genuinely empty cell in the palette matrix. The specific stain `#b3502b` does not appear in any extant site palette.

3. **The 4° structural rake as a singular identifying mark.** No site in the portfolio commits to a single, measured tilt angle as its primary structural language. *diagonal-sections* sits at 4% but is typically used as a one-off section divider, never as a global frame rotation. The site's identity is literally a number — `-4deg` — applied with discipline.

4. **No carousel, no tabs, no CTA, no pricing — a magazine, not an app.** Many portfolio sites lean on *card-grid* (50%), *dashboard* (74%), and *centered* (59%) layouts; namu.style refuses all three. Its layout is *magazine-spread* (6%) + *diagonal-sections* (4%), both dramatically underused.

5. **Cormorant Garamond + Noto Serif KR + Lora + IBM Plex Sans Condensed as a four-face pairing.** The corpus is dominated by *mono* (81%) and *humanist* (39%); *playfair-elegant* sits at 2%, *garamond-classic* at 5%, *serif-revival* at 10%. The four-face mix here — display-Cormorant-italic / body-Lora / Latin-binomial-Plex-condensed-small-caps / Korean-Noto-Serif-KR — does not appear elsewhere. Particularly, the **explicit pairing of a Latin classical serif with a Korean Noto Serif KR at matched optical size** is a near-empty cell.

6. **Procedurally-generated species-accurate wood-grain SVG swatches.** Generative texture tied to *real dendrological data* (ring-spacing per species) is absent from the corpus. *generative-art* sits at 3%, but always as decorative background, never as a per-section data-faithful artifact.

7. **The Korean–English bilingual editorial voice.** The site treats Korean common names (소나무, 은행나무, 느티나무) as primary display elements rather than translation overlays. Among Korean-domain sites in the corpus this is rare; among style/fashion-category sites it is unique.

**Avoided overused patterns (per frequency analysis):**
- Avoided **photography (80%)** — replaced entirely with custom botanical illustration
- Avoided **gradient palettes (81%)** — replaced with discrete walnut-ink stains
- Avoided **warm gradient (80%)** — palette is *warm* but flat-pour, not gradient
- Avoided **mono typography (81%)** — only one mono accent face (Plex Condensed) used in 8.5pt small-caps marginalia
- Avoided **dashboard layouts (74%)** — replaced with magazine-spread
- Avoided **parallax (77%)** — replaced with scroll-triggered path-draw and turn-page transitions
- Avoided **stagger animations (68%)** — replaced with single, deliberate path-draw and curl transitions
- Avoided **hand-drawn aesthetic (75%)** — the illustrations are *engraved-plate* register, not casual hand-drawn doodle
- Avoided **friendly tone (66%)** — replaced with scholarly-intellectual + opulent-grand
- Avoided **card-grid (50%)** — there are no cards anywhere; the document is a continuous spread
- Avoided **CTA/pricing/stat-grid blocks** — none exist anywhere on the site
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:49:40
  seed: is none of those
  aesthetic: namu.style is a **xylological couture codex** — a speculative atelier where indi...
  content_hash: b0c9c2cf459c
-->