# Design Language for namu.club

## Aesthetics and Tone

**namu** (나무) means *tree* in Korean — a living organism that grows upward, branches outward, roots deep, and returns each year in new colors. The site interprets this as a **dopamine-laced aurora grove**: a forest at the exact moment the northern lights ignite above the canopy, when every leaf edge catches a different band of the spectrum and the entire scene becomes both deeply calm and quietly electric.

The aesthetic is **retro-dopamine calm** — a paradox that resolves in practice because "dopamine" here is not frantic or overwhelming but rather the sustained low-hum pleasure of a perfect gradient, a satisfying counter tick, a silhouette that resolves into meaning. Think of a 1970s Japanese travel poster repainted in aurora pigments: the composition is serene and geometric, the color is joyful without being loud, the mood is meditative rather than urgent.

Inspiration: NHK World travel photography, Soviet-era enamel pin collections, Scandinavian folk ornament redrawn with neon ink, the exact color temperature of an aurora borealis photographed from a birch forest in Hokkaido at 2:00 AM.

The site does not sell anything. It does not ask for signups, clicks, or conversions. It is a **quiet place on the internet** — a clearing in the grove — where the domain name becomes a visual poem about growth, light, and belonging.

## Layout Motifs and Structure

The structure is **layered-depth stacking** — five distinct Z-planes stacked vertically with explicit parallax relationships, each plane carrying a different opacity and scroll velocity. There is no conventional grid or column system. Each layer is a full-bleed horizontal band of content that exists at a specific "altitude" in the depth stack.

**The five planes (back to front):**

1. **Aurora Sky** (z: -5, scroll multiplier: 0.1) — a fixed, slow-drifting SVG gradient aurora stretched across the full viewport height. Greens and violets bleed into each other. This layer never fully stops moving.
2. **Forest Silhouette** (z: -3, scroll multiplier: 0.35) — a row of ink-black tree silhouettes (stylized retro-folk style) along the bottom of the sky. Pine and birch shapes alternating. This layer drifts upward as the user scrolls, giving the illusion the visitor is descending into the grove.
3. **Ground Plane** (z: 0, scroll multiplier: 1.0) — the primary content surface. A dark forest-floor tone (#0e1a12) with subtle grain texture (SVG feTurbulence noise at 2% opacity). All text content and icon grids live here.
4. **Icon Constellation** (z: +1, scroll multiplier: 1.15) — floating retro icon glyphs that orbit slightly faster than the main content, giving them a tactile foreground presence. 24 icons arranged in loose organic clusters, not a strict grid.
5. **Counter HUD** (z: +2, static) — a pinned, minimal counter display (three digits each) showing numbers that animate upward in a slow, satisfying odometer roll. Positioned upper-right, always visible, never interactive.

**Scroll narrative:**
The visitor begins above the canopy (aurora visible) and descends gently into the grove as they scroll. By the midpoint of the page, they are in the forest interior — the sky has scrolled away, the silhouettes frame the sides, and the ground content is fully visible. The descent feels inevitable and calm.

**No columns. No sidebar. No nav.** The layout is a single full-width vertical experience. The only horizontal repetition is the icon constellation row, which wraps organically at the viewport edge.

## Typography and Palette

**Typography:**

All fonts from Google Fonts. The typographic system is **condensed display + geometric mono**, a pairing that echoes vintage Japanese/Soviet poster lettering (tight, purposeful, every letter load-bearing) without literal pastiche.

- **Display / Wordmark**: [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed), weight 700, uppercase, tracking +0.05em. Used for the domain wordmark `namu.club`, section labels, and any large-format text. Set at clamp(4rem, 10vw, 9rem) for the wordmark. The condensed structure gives the impression of trees standing close together.
- **Body / Captions**: [DM Mono](https://fonts.google.com/specimen/DM+Mono), weight 400, size 0.875rem, line-height 1.7. All descriptive text, counter labels, and icon captions. The mono spacing creates a quiet grid without needing visible rules.
- **Accent / Pull-quotes**: [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed), weight 300 italic, size clamp(1.4rem, 3vw, 2.2rem). Used sparingly — one or two lines per section maximum. Creates the feeling of a subtitle on a vintage cinema poster.

**Palette (aurora-gradient):**

The palette is extracted from a real aurora photograph — specifically the color sequence that appears along the vertical axis from zenith to horizon in a strong KP-7 geomagnetic storm.

- `#0e1a12` — **Forest Floor** — near-black with a faint green cast. Primary background, ground-plane surface.
- `#0a2e1a` — **Deep Canopy** — the color of bark and moss at 3:00 AM. Secondary background panels, icon wells.
- `#1b5e3a` — **Mid Canopy** — dark forest green, visible in the silhouette fill.
- `#3dd68c` — **Aurora Lime** — the primary accent. The exact lime-green of a strong auroral band. Button borders, counter digits, icon stroke on hover.
- `#7b2fff` — **Aurora Violet** — deep violet from the zenith of the aurora. Counter glow, gradient highlight, decorative rule under the wordmark.
- `#c084fc` — **Pale Violet** — soft lilac, the color of aurora "curtains" at low intensity. Section headings, caption text, secondary accents.
- `#e0ffd4` — **Phosphor White** — near-white with a green tint. Body text on dark backgrounds, icon glyphs, counter digits.
- `#2d1b6b` — **Aurora Indigo** — the deep transition between violet sky and forest. Used as gradient stops in the aurora layer.

**Gradient recipe (aurora backdrop):**
```
background: linear-gradient(
  170deg,
  #2d1b6b 0%,
  #7b2fff 20%,
  #1b5e3a 50%,
  #0a2e1a 75%,
  #0e1a12 100%
);
```
A subtle CSS animation shifts the gradient position by 8% over 12 seconds (ease-in-out, infinite alternate) to simulate the slow drift of auroral bands.

## Imagery and Motifs

**No photography.** The corpus uses photography at 89% — this site refuses entirely. All visual material is icon-heavy SVG.

**Retro Icon System (24 icons, all inline SVG, stroke-only, 2px stroke):**

The icons form a personal iconography vocabulary drawn from three source traditions: Soviet enamel travel pins, Japanese family crest (*kamon*) geometry, and 1960s Nordic folk ornament. Each icon is monochrome in its resting state (`#e0ffd4` on dark) and blooms to `#3dd68c` on hover with a 0.3s ease transition.

The 24-icon set includes:
- **Nature cluster**: pine tree (silhouette), birch branch, pine cone, falling leaf, root system, mushroom
- **Sky cluster**: crescent moon, aurora wave (abstract sinusoid), star with 8 points (*kamon* style), comet arc
- **Craft cluster**: hand with seed, woven circle (Nordic knot), lantern, compass rose (simplified), shield with leaf crest
- **Community cluster**: two interlinked circles, house with tree, speech bubble with leaf, path through trees, open book with leaf bookmark
- **Abstract cluster**: concentric rings (growth rings), upward triangle with roots below, spiral (fern unfurl), dot grid in diamond formation

Each icon is 64×64px SVG with a 2px stroke, no fill, rounded line caps. Icons are arranged in the **Icon Constellation** layer as a loose scatter — not a grid — using CSS `position: absolute` with hand-crafted `left/top` percentages that feel organic rather than mechanical.

**Retro Patterns:**

Two decorative SVG patterns used as texture overlays at low opacity (8–12%):

1. **Kamon Diaper** — a repeating diamond lattice where each diamond contains a simplified pine-needle *kamon* motif. Tiled at 80px × 80px. Applied as a subtle SVG `<pattern>` fill on the ground-plane layer.
2. **Nordic Chain Border** — a repeating horizontal band of interlocked S-curves in the folk-art style, 12px tall. Appears as a divider between the aurora sky and the forest silhouette layers, and again at the page footer.

**Tree Silhouette Row:**

Five pine and four birch silhouettes, each 180–280px tall, drawn as simplified geometric shapes (three triangles stacked for pine, two oval clouds on a stem for birch). Filled solid `#0e1a12` (forest floor black). Positioned at the bottom edge of the aurora sky layer, creating the horizon line.

## Prompts for Implementation

**The story to tell.** A visitor opens `namu.club` and finds themselves at the edge of a grove at night. The sky above the trees is alive — bands of lime and violet drift in slow undulation. As they rest on the page and let their eyes adjust, individual icons begin to resolve from the darkness: the silhouette of a lantern, a pine cone, an interlinked pair of rings. Three counters tick upward in the upper-right corner with the patience of tree rings forming. There is no urgency. The grove is not selling anything. It simply exists, growing, counting, offering light.

**Animation contracts (critical):**

1. **Aurora drift** — CSS `@keyframes` shifts the `background-position` of the linear gradient by 8% on the Y-axis, 12s, ease-in-out, infinite alternate. This must be a CSS animation on the `::before` pseudo-element, not JavaScript, to remain buttery at 60fps.

2. **Counter animate (odometer roll)** — Three counters, each displaying a 3-digit number. Each digit rolls upward as an odometer: the digit slot has `overflow: hidden; height: 1em` and a `<span>` that translates from `translateY(0)` to `translateY(-100%)` when the counter increments. Increment rate: slowest counter every 4.7s, middle every 2.3s, fastest every 0.9s. The numbers are arbitrary (not real metrics) — they represent growth, time, belonging. Label them with DM Mono captions: `GROWTH`, `ROOTS`, `LIGHT`.

3. **Icon hover bloom** — On `mouseenter`, each icon's stroke color transitions from `#e0ffd4` to `#3dd68c` (0.3s ease), and a radial glow (`box-shadow: 0 0 18px #3dd68c44`) expands outward (0.3s ease). On `mouseleave`, reverse.

4. **Parallax depth** — Use `IntersectionObserver` + `requestAnimationFrame` to drive the five-layer parallax. On scroll, read `window.scrollY` and apply `transform: translateY(scrollY * multiplier)` to each layer. Multipliers: sky 0.1, silhouette 0.35, icons 1.15, counter 0 (static).

5. **Icon constellation entrance** — On first viewport intersection, each icon fades in with `opacity: 0 → 1` and `translateY(+16px → 0)`. Stagger delay: 80ms per icon, starting from the top-left of the scatter. Total entrance duration: ~2s. Use `animation-fill-mode: both`.

6. **Kamon diaper pattern** — Render as an inline `<svg>` `<defs><pattern>` and apply via `fill: url(#kamon-diaper)` on a full-bleed `<rect>` set to `opacity: 0.09`. Do not use external image files.

**Implementation priorities (in order):**
1. Aurora gradient animation (sets the whole mood)
2. Parallax depth stack (creates immersion)
3. Counter odometer rolls (dopamine hook)
4. Icon constellation with hover blooms (tactile delight)
5. Retro SVG pattern overlays (texture depth)
6. Typography rendering (Barlow Condensed wordmark must render at 700 weight, no fallback substitution)

**Layout blueprint:**
```
<body> [bg: #0e1a12, overflow-x: hidden]
  <div.aurora-layer>       [fixed, full viewport, z: -5, aurora gradient + drift animation]
  <div.silhouette-layer>   [absolute, bottom-aligned, z: -3, tree SVG row]
  <div.ground-layer>       [relative, z: 0, grain texture overlay, main content]
    <header>               [wordmark: NAMU.CLUB in Barlow Condensed 700]
    <section.icons>        [icon constellation scatter]
    <section.narrative>    [3–4 lines of DM Mono body text, centered]
    <footer>               [Nordic chain border + minimal domain credit]
  <div.icon-layer>         [absolute, z: +1, floating icon ghosts]
  <div.counter-hud>        [fixed, top-right, z: +2, three odometer counters]
```

**AVOID in implementation:**
- CTA buttons of any kind
- Pricing blocks or feature grids
- Testimonials or social proof
- Navigation menus or hamburger icons
- Sticky headers (the counter HUD is the only persistent element)
- Any text beyond what serves the grove narrative

**Color rendering note:** All aurora colors contain non-sRGB-representable purples. Use `@media (color-gamut: p3) { color: color(display-p3 0.48 0.19 1.0) }` for the `#7b2fff` violet to ensure it renders at full intensity on P3-capable displays (modern Mac/iOS).

## Uniqueness Notes

**Differentiators from every other design in the registry:**

1. **Dopamine-calm paradox, not dopamine-frenetic.** The frequency report shows `dopamine` is underused (<5%). In every other registry design that uses dopamine, it manifests as neon bursts, fast animation, and dense color. This design inverts the convention: dopamine through *slow satisfaction* — a counter that ticks quietly, a gradient that drifts on its own clock, icons that bloom rather than flash. Calm and dopamine are not opposites; they are the two ends of a sustained pleasure. No other registry entry combines these registers.

2. **Layered-depth parallax as primary narrative device, not decoration.** The frequency report shows parallax and depth effects at <10% usage, and in those cases they are decorative (hero image parallax behind text). Here, the five Z-planes *are* the story: the visitor literally descends from sky to forest floor as they scroll. The layout itself is the arc. No other registry entry uses depth-stacking as the primary compositional logic.

3. **Retro icon system drawn from *kamon* and Soviet enamel pin traditions, not from modern icon libraries.** The frequency report shows `icon-heavy` at 5% — nearly all instances use Heroicons, Feather, or similar geometric-neutral sets. This design uses a bespoke 24-icon vocabulary drawn from three culturally specific retro traditions (*kamon* family crests, Soviet constructivist enamel pins, Nordic folk ornament). The icons carry narrative weight specific to the grove/tree/growth theme. No icon library can substitute.

4. **Aurora-gradient palette derived from real geomagnetic event color sequencing**, not from generic "neon gradient" palettes. The specific violet-lime-black progression (`#2d1b6b → #7b2fff → #1b5e3a → #0e1a12`) reproduces the actual vertical color layering of a KP-7 aurora. Most aurora-inspired designs in the registry use generic cyan-pink or teal-purple. This palette is ecologically accurate and therefore subtly distinctive — it reads as correct to anyone who has seen a real aurora, even if they cannot name why.

5. **Counter HUD as a non-metric, poetic element.** Counters in the registry (frequency ~12%) invariably count real product metrics: users, uptime, features. This design's three counters — `GROWTH`, `ROOTS`, `LIGHT` — count nothing. They are purely contemplative: a meditation on accumulation, on deep systems, on invisible processes. The odometer roll is the same mechanism used for stat grids but evacuated of commercial purpose. This inversion is unique in the registry.

**Chosen seed:** aesthetic: dopamine, layout: layered-depth, typography: condensed, palette: aurora-gradient, patterns: counter-animate, imagery: icon-heavy, motifs: retro-patterns, tone: calm-serene

**Avoided patterns (from frequency analysis):**
- photography (89% in registry — avoided entirely, zero photographic elements)
- hand-drawn (58% — avoided; icons are geometric/structural, not hand-drawn)
- editorial (50% — avoided; no editorial column layout, no article-style text blocks)
- botanical (27% — avoided; trees and nature are present but through geometric icon language, not botanical illustration style)
- terminal (30% — avoided; DM Mono is used but purely for quiet typographic texture, not terminal/hacker aesthetic)
<!-- DESIGN STAMP
  timestamp: 2026-05-09T13:38:49
  seed: text blocks
  aesthetic: namu** (나무) means *tree* in Korean — a living organism that grows upward, branch...
  content_hash: 2b734e707db9
-->