# Design Language for namu.works ## Aesthetics and Tone **Namu** (나무) is the Korean word for *tree* — not a metaphor, not a logo, but a thing. A rooted, slow, structural thing that holds everything else up and grows by accretion of rings. Bolted to **.works**, the domain declares that this tree *labors*, that it *functions*, that it is not decorative but instrumental. The site inhabits the intellectual space between dendrology and design theory: the study of how branching systems produce knowledge. The aesthetic is **inflated-3d scholarly** — an unusual crossing of academic rigor with the buoyant, pressurized volume aesthetic of inflated-3d design. Where conventional inflated-3d is playful and bouncy (the "claymation UI" trend of 2023–2025), here the inflation is *restrained and deliberate*: the forms are full of inner pressure but they hold still, the way a carefully prepared herbarium specimen holds the shape of a living leaf under glass. The pressure is intellectual, not exuberant. Every element looks as if it has been inflated with *argument* rather than air. The tone is **scholarly-intellectual** — the register of an annotated field guide written by someone who has spent decades in the forest and also read everything Calvino wrote. There are no marketing claims. There are no testimonials. The page is a *specimen collection* — a curated display of thinking, labeled with precision and presented with the formality of a natural history cabinet. The dominant mood is **late-afternoon amber**. Honeyed neutrals — the color of old vellum, of dried grasses, of the light through a window in a room full of books — provide warmth without sweetness, authority without coldness. Against this amber field, the inflated-3d type and shape elements read as botanical specimens pinned to a collector's board. Inspiration: Katsushika Hokusai's *Thirty-Six Views* (structural precision + compositional drama), Korean pojagi textile patchwork (asymmetric geometric layering), the inflated-3d UI language of Daybreak Games circa 2024, annotated herbarium pages from the Smithsonian botany collection, and the typographic discipline of Otl Aicher's Rotis typeface specimen books. ## Layout Motifs and Structure The page is built on a **full-bleed stacked sections** architecture — each section fills the viewport entirely, edge to edge, with zero visible container or padding chrome. The sections are not identical rectangles: alternate sections tilt 2–3° on the horizontal axis via `clip-path: polygon(0 0, 100% 2vh, 100% 100%, 0 calc(100% - 2vh))`, so the stack reads like overlapping herbarium boards slid at slight angles on a lightbox. **Macro structure (top to bottom, seven leaves):** 1. **Specimen Leaf 1 — The Wordmark Board.** Full-viewport, amber ground (`#C8962A` at 12% opacity over `#F5ECD7`). The wordmark "namu.works" is set in an eclectic-hybrid stack: display word "namu" in a massive inflated-style variable-weight display typeface at 22vw, with heavy weight and extreme letter-spacing compression (-0.04em), while ".works" appears in a condensed mono label at 1.6rem, positioned at the baseline of the display word like a specimen accession number. A botanical SVG line-drawing of a single oak branch (traced, not photographic) anchors the lower-right quadrant, its lines at 0.6px, drawn via `stroke-dashoffset` animation on load. 2. **Specimen Leaf 2 — Field Notes.** Black ground (`#1A1208`). Three inflated-3d typographic cards — styled as if they are pressurized specimen jars with thick, rounded CSS borders (`border-radius: 2.4rem`, `box-shadow: inset 0 0 0 3px #C8962A, 0 12px 48px rgba(0,0,0,0.6)`) — float at staggered vertical positions. Each card contains a single dense paragraph of intellectual content, set in a serif revival face at 1.1rem with generous line-height (1.72). The cards `bounce-enter` into position on scroll-trigger, one by one, with 120ms stagger. 3. **Specimen Leaf 3 — The Taxonomy Grid.** Warm off-white ground (`#F5ECD7`). A CSS grid of 7 cells in a irregular 3-2-2 arrangement (not a uniform grid — the cells have varying aspect ratios like a botanical reference plate layout). Each cell contains a single concept word in Korean followed by its English annotation in smaller type, rendered as inflated-3d "badge" elements with `perspective(800px)` tilt applied via CSS `transform: rotateY(8deg) rotateX(-4deg)`. The badges have a thick embossed border and subtle inner shadow. 4. **Specimen Leaf 4 — The Deep Field.** Full-bleed ambient section. Background: a generative SVG pattern of branching tree-structure fractals (depth 6, stroke `#C8962A` at 8% opacity) tiled across the viewport. A single centered typographic statement — three lines, large — set in the display face at clamp(3.2rem, 7.6vw, 8.4rem). The statement is split across the eclectic-hybrid typography: line 1 bold italic display, line 2 condensed mono, line 3 light serif. This triple-register typographic moment is the visual climax of the page. 5. **Specimen Leaf 5 — Works Index.** Dark amber ground (`#2E1F06`). A vertical list of projects or entries — each item is a full-width horizontal strip with a generous 4rem top/bottom padding. The strip holds: a sequential number in mono (01, 02, …), a title in the display face at 2.8rem, a year in small caps, and an SVG arrow that slides 20px right on hover. On hover, the strip background transitions to `#C8962A` at 18% opacity and the title inflates slightly (`transform: scale(1.03)`) via a `spring` easing CSS transition. 6. **Specimen Leaf 6 — Methodology.** Off-white ground. A full-bleed horizontal rule at the center divides the leaf into two halves. Upper half: a dense block of body text (two columns on desktop, one on mobile), set in the serif face, discussing process and philosophy. Lower half: a single large-form SVG diagram — a radial tree structure, hand-styled with thick inflated-looking strokes (`stroke-width: 8px`, `stroke-linecap: round`, `stroke-linejoin: round`), showing how the disciplines intersect. The diagram animates path-by-path with `stroke-dashoffset` on scroll entry. 7. **Specimen Leaf 7 — Colophon.** Black ground. Minimal footer. The domain "namu.works" set in the display face at 6vw, centered. Below it: a single line in mono, a contact address and year. No social links. No navigation. The page closes the way a field notebook closes: with the handwriting of the person who filled it. **Spatial philosophy:** zero gutters at viewport edges, deliberate negative space *within* sections (large ma-style voids between typographic elements), no sidebar, no sticky header, no modal. ## Typography and Palette **Typography is eclectic-hybrid** — three typefaces chosen from different historical lineages, each assigned a specific register, never interchanged. - **Display: [Fraunces](https://fonts.google.com/specimen/Fraunces)**, a "wonky" optical-size variable serif with a soft, pressurized quality in its heavy weights. Used at weight 900, optical size `opsz` 144 (the "wood type" optical end), for all display headlines and the wordmark. At maximum weight and optical size, the letterforms have the inflated, full-bodied quality of carved wooden type — rounded, pressurized, authoritative. Size range: clamp(4rem, 12vw, 14rem) for the wordmark, clamp(2.4rem, 5.6vw, 6rem) for section heads. Tracking: -0.022em. The variable optical-size axis is animated on scroll via CSS `@property` and `transition` on `--opsz`, shifting from 144 (large, wooden) to 72 (smaller, more refined) as the user moves down the page. - **Label / Annotation: [Space Mono](https://fonts.google.com/specimen/Space+Mono)**, a monospaced typeface with a technical, cataloguing quality. Used at weight 400 (regular) for all accession numbers, labels, captions, dates, and the footer line. Size: 0.82rem–1.1rem. Letter-spacing: 0.12em (wide-tracked, like a label printer). Color: always `#8C7A56` (the mid-amber), never the full dark or white. - **Body: [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)**, a fine, historically-grounded serif with a scholarly, manuscript quality. Used at weight 400 italic for pull-quotes and 300 roman for body paragraphs. Size: 1.08rem, line-height: 1.8, max-width: 64ch. This typeface's extremely high x-height contrast and delicate hairline strokes give the body text an archival, printed-on-vellum quality that anchors the page's intellectual register. **The eclectic-hybrid rationale:** Fraunces (pressurized wooden-type inflated display) + Space Mono (specimen catalog label) + Cormorant Garamond (archival manuscript body) — three registers that never overlap, each borrowed from a different century and industrial context, unified by the amber palette and the botanical subject matter. **Palette — honeyed-neutral:** | Token | Hex | Use | |---|---|---| | `--amber-ground` | `#F5ECD7` | Primary light background — old vellum | | `--amber-warm` | `#C8962A` | Accent, borders, SVG strokes — raw honey | | `--amber-deep` | `#8C7A56` | Mid-tone labels, secondary text — dried grass | | `--bark-dark` | `#2E1F06` | Dark section backgrounds — deep bark | | `--bark-black` | `#1A1208` | True dark — near-black with brown cast | | `--specimen-white` | `#FDFAF3` | Card interiors, light type on dark — warm white | | `--ring-gold` | `#D4A843` | Hover states, active borders — tree ring gold | | `--shadow-neutral` | `#6B5B3E` | Drop shadows on inflated-3d cards — warm shadow | No pure black (`#000000`), no pure white (`#FFFFFF`), no cool grays. Every neutral has a warm amber undertone, as if the entire page is viewed under late-afternoon light through amber glass. ## Imagery and Motifs **Imagery is mixed-media** — three distinct visual registers coexist on the page without hierarchy or apology: 1. **Inflated-3d CSS-native shapes.** Typographic elements and card containers are rendered with CSS `border-radius`, `box-shadow`, `inset box-shadow`, and `perspective` transforms to achieve a pressurized, three-dimensional quality without any 3D engine. Cards have `border-radius: 2.4rem`, a thick amber border (`box-shadow: 0 0 0 4px #C8962A`), a warm inner glow (`box-shadow: inset 0 0 32px rgba(200, 150, 42, 0.12)`), and a bottom-drop shadow at `0 20px 60px rgba(26, 18, 8, 0.45)`. The overall effect is that each card looks like a pressurized specimen container with amber glass. 2. **Hand-styled SVG botanical line drawings.** Three SVG assets — a branching oak limb, a cross-section of a trunk showing annual rings, and a root system diagram — are drawn in a deliberate, annotated scientific illustration style: fine 0.6px strokes for secondary detail, 1.8px strokes for primary structure, `stroke-linecap: round`, all in `#8C7A56` (the dried-grass amber). These are not clipart; they are designed as botanical plates. They animate into existence via `stroke-dashoffset` / `stroke-dasharray` on scroll entry, drawing themselves over 1.8–2.4 seconds. 3. **Generative SVG tree fractal backgrounds.** Behind the deep-field section (Leaf 4), a JavaScript-generated fractal tree structure (L-system, branching angle 22°, depth 7) is drawn at 8% opacity in `#C8962A`. The branches are generated fresh on each page load with a small random perturbation of ±3° per node, so the background is never identical twice. This is the *futuristic* motif: a living, generative system that models natural branching computationally. **Motifs — futuristic:** The futuristic motif here is not chrome or space; it is the *computational model of nature* — the L-system, the algorithmic branching, the parameter-driven growth. The page embeds the idea that trees are already running code (phyllotaxis, Fibonacci branching angles, fractal self-similarity) and that studying them seriously requires tools from computer science as much as botany. This is expressed through: - **Parametric SVG animation:** the SVG botanical drawings are parameterized via CSS custom properties (`--branch-angle`, `--growth-step`, `--opacity-target`) so they respond to scroll position — the branch angle widens as the user descends, mimicking the way sunlight-seeking branches grow more horizontal near the ground. - **The `@property` variable axis:** the Fraunces optical-size axis animates via a registered CSS custom property, a technically advanced CSS feature (Houdini `@property`) that gives the typography a living, responsive quality. - **Accession number system:** every labeled element on the page carries a `NW-YYYY-NNN` specimen identifier in Space Mono, as if the page is a database record in a future natural history museum's digital collection. ## Prompts for Implementation Build namu.works as a **digital specimen cabinet** — seven full-bleed leaves, each a mounted and labeled botanical-intellectual specimen. The visitor moves through the cabinet the way a researcher moves through archival drawers: slowly, with attention, reading the labels and then the specimens themselves. Every implementation decision should serve the feeling that this page was designed by a person who takes both trees and ideas with complete seriousness. **Animation and motion:** - Use `bounce-enter` as the primary entrance pattern for inflated-3d cards: elements enter with `cubic-bezier(0.34, 1.56, 0.64, 1)` (overshoot) and settle into position. The bounce should be *small and controlled* (overshoot by ≤6% of final scale), not cartoonish — the intellectual register of the page must be preserved. - `IntersectionObserver` triggers all animations: elements outside the viewport are invisible (`opacity: 0`, `transform: translateY(32px)`), entering the viewport triggers the `bounce-enter` class with a staggered delay for multiple elements. - The Fraunces `opsz` axis animates via `scroll()` driven animation: `animation: opsz-shift linear; animation-timeline: scroll(root); animation-range: 0 100vh;` — the display face becomes slightly less "wooden" as the user scrolls, going from opsz 144 to opsz 72 across the first viewport. This is subtle — the visitor should feel it rather than notice it. - SVG botanical drawings use `stroke-dasharray: ; stroke-dashoffset: ` on load, transitioning to `stroke-dashoffset: 0` on `IntersectionObserver` trigger, with `transition: stroke-dashoffset 2.1s cubic-bezier(0.22, 1, 0.36, 1)`. - The works index strips use `transition: background-color 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1)` on hover — the spring/bounce in the transform gives the inflated-3d impression. **Typography implementation:** - Load Fraunces with `font-display: swap` and the axes `opsz` and `wght` declared explicitly. - Apply `font-feature-settings: "ss01" on, "onum" on` to Cormorant Garamond for old-style figures and stylistic alternates. - Space Mono labels use `letter-spacing: 0.12em` and `text-transform: uppercase` throughout. They are never bold. They are never interactive. - The eclectic-hybrid "triple register" typographic moment in Leaf 4 is implemented as three separate `` elements within a single `

`, each with its own font-family, weight, and size — the spans are `display: block` so they stack vertically within the prose flow. **Color implementation:** - All colors live as CSS custom properties on `:root`. Dark sections use `background-color: var(--bark-dark)` and set `color-scheme: dark` locally. - The amber accent `--amber-warm: #C8962A` is never used as a text color on light backgrounds (contrast ratio insufficient for body text); it is used only for borders, strokes, decorative elements, and as a tint/overlay. - Card shadows use `box-shadow` with the warm shadow color (`--shadow-neutral: #6B5B3E`) rather than pure black, maintaining the honeyed-neutral warmth. **Full-bleed implementation:** - `body { margin: 0; padding: 0; overflow-x: hidden; }` — no container max-width on section elements. - Each section is `width: 100vw; min-height: 100vh; position: relative;`. - The angled clip-paths on alternating sections are applied via `clip-path: polygon(0 0, 100% 2.4vh, 100% 100%, 0 calc(100% - 2.4vh))`. Adjust the `2.4vh` value in a CSS variable `--section-tilt` so it is easy to modify. - No horizontal scrollbar should appear — all elements are contained within their sections. **AVOID:** CTA buttons, pricing blocks, feature grids, testimonials, star ratings, newsletter signup forms, hamburger menus, sticky headers, hero-with-button layouts, stat counters, progress bars used as loaders, cookie banners, floating chat widgets. This page does not sell; it *presents*. **PREFER:** Generous vertical whitespace between typographic elements (min 6rem between display heads and body), deliberate asymmetry in card placement (cards are not centered; they sit at computed offsets like `margin-left: 14.5%` and `margin-right: 8%`), long-form intellectual content that rewards slow reading, SVG diagrams that carry real information rather than decorative flair. ## Uniqueness Notes 1. **Inflated-3d aesthetic applied to a scholarly-intellectual tone (zero precedent in registry).** The frequency report shows `inflated-3d` at 2% — one prior design — and `scholarly-intellectual` tone at approximately the same low frequency. No other design in the registry crosses these two: inflated-3d is associated with playful/energetic registers in every other instance. Here the inflation is reinterpreted as *intellectual pressure* — the fullness of a carefully constructed argument — making this the only specimen of inflated-3d serving an archival, academic aesthetic. 2. **Fraunces variable font with animated optical-size axis via CSS scroll-driven animation.** No other design in the registry uses a variable font axis as a scroll-driven animation parameter. The `opsz` axis of Fraunces shifts from "wooden block type" at the top of the page to "refined book type" at the bottom, encoding the journey from bold declaration to careful explication in the typography itself. This is a technically and conceptually novel implementation. 3. **Korean-rooted semantic domain with computational-botanical motif fusion.** The `namu` / 나무 etymology anchors the futuristic motif in a specific cultural and linguistic context: Korean botanical vocabulary meets L-system generative tree algorithms. The accession number system (`NW-YYYY-NNN`) frames the page as a future natural history museum database record. No other design in the registry combines Korean linguistic etymology, generative SVG fractals, and archival specimen aesthetics. 4. **Eclectic-hybrid triple-register typography using three families from different centuries.** Fraunces (2019, optical-size variable) + Space Mono (2016, technical) + Cormorant Garamond (2015, revival of 16th-century Garamond) — three typefaces spanning 400+ years of typographic history, unified by subject matter and palette rather than stylistic family. The `eclectic-hybrid` typography tag is at 5% frequency (low) and no other design uses this specific three-way combination. 5. **Chosen seed:** aesthetic: inflated-3d, layout: full-bleed, typography: eclectic-hybrid, palette: honeyed-neutral, patterns: bounce-enter, imagery: mixed-media, motifs: futuristic, tone: scholarly-intellectual. Avoided overused patterns per frequency analysis: `hand-drawn` (high frequency), `fade-reveal` (common default), `parallax` (common default), `sans-grotesk` or `serif-classic` alone (both overused). Preferred underused patterns: `bounce-enter` (low), `eclectic-hybrid` typography (5%), `inflated-3d` (2%).