# Design Language for namu.land ## Aesthetics and Tone **namu** (나무) is the Korean word for *tree* — but this site is not pastoral. It is a tree that grows inside a broken broadcast signal, roots pushing through corrupted scan-lines, canopy dissolving into phosphor noise. The aesthetic is **glitch-naturalism**: organic life force filtered through a dying CRT, where every leaf edge tears into a chromatic aberration and every branch trails a signal-artifact ghost. The mood is urgent, propulsive, and slightly unhinged — the energy of a nature documentary suddenly interrupted by a system crash that turns out to be more beautiful than the original footage. The tone is **energetic and futuristic** — not the cold chrome of science fiction, but the hot electric pulse of something biological trying to survive inside a machine. Like bioluminescent mycelium photographed with a broken lens. Like a forest fire rendered in duotone cyan-and-amber through a corrupted video codec. Inspirations: Ryoji Ikeda's data streams, Nam June Paik's TV gardens, the UI of a 2099 ecological monitoring station whose sensors have been overwhelmed by data it was never designed to handle. The visitor arrives at a **signal intercept** — a HUD interface overlaid on corrupted documentary footage of a forest — and the act of scrolling progressively decodes the transmission, revealing the full signal beneath the noise. ## Layout Motifs and Structure The page is structured as a **HUD overlay on a full-bleed duotone film strip** — a single vertical scroll where a persistent heads-up-display chrome frames the viewport at all times, while the content underneath scrolls as a sequence of "transmission frames." **HUD chrome (position: fixed, pointer-events: none except interactive nodes):** - Top bar: `12px` height, full viewport width, divided into three segments — LEFT: domain wordmark `NAMU.LAND` in caps at `10px`, CENTER: a live-updating scan-line counter `FRAME 0000 / 0007` that ticks as sections enter viewport, RIGHT: a glitch-flicker status indicator `SIG ████░░░░` that fills as the user scrolls deeper - Bottom bar: `8px` height, a single horizontal scan-line progress bar in `#00FFB2` neon-green that fills left to right as user scrolls - Left edge: `28px` wide vertical strip with rotated section labels (`TRANSMISSION_01`, `ROOT_SYSTEM`, `CANOPY_DATA`, etc.) in `7px` mono caps - Right edge: `2px` border in `#00FFB2` with periodic `4px` gap breaks — the "signal dropout" motif **Content frames (scroll-based, full viewport height each):** - Seven frames total, each `100vh` tall, stacked vertically - Each frame has a **duotone photograph** filling the full bleed as background (cyan `#00C8FF` + amber `#FF6B00` duotone treatment) - Over the photo: a **glitch displacement layer** — a thin `mix-blend-mode: exclusion` overlay of horizontal scan-line bars, `2px` tall, repeating every `4px`, at `15%` opacity, creating a CRT texture over the imagery - Text is set inside a floating **signal-decoded panel**: a semi-transparent dark rectangle (`#0A0A0F` at `88%` opacity, `1px solid #00FFB2` border, `2px` inner glow) that sits at `left: 10vw` and `max-width: 580px` **Progressive disclosure sequence:** - Frame 0 (INTERCEPT): Full-screen glitch wash, only the HUD chrome and a single blinking cursor `▋` visible. Title fades in through glitch-dissolve: `NAMU.LAND`. Signal meter at 0%. - Frames 1–5 (DECODE): Each frame reveals one "layer" of the site's content — the signal-decoded panels slide in from left with `transform: translateX(-100%)` → `translateX(0)` as the frame enters viewport - Frame 6 (SIGNAL RESTORED): The glitch layers dissolve, the HUD chrome fades to hairlines only, and a clean duotone image fills the screen — the "fully decoded" state **Grid:** No traditional grid. Panels use `left: 10vw` / `right: 10vw` anchoring. Typography fills its container without gutters. Spatial relationships are determined by the HUD overlay logic, not a column system. ## Typography and Palette **Primary palette — strict duotone cyan + amber on near-black:** - `#0A0A0F` — Signal black (backgrounds, panel fill) - `#00FFB2` — HUD green (all UI chrome: borders, counters, progress bar, labels) - `#00C8FF` — Duotone cyan (photo treatment channel 1, accent text) - `#FF6B00` — Duotone amber (photo treatment channel 2, hover states) - `#F0EDE6` — Signal white (body text, decoded panel text) - `#1A1A2E` — Deep void (section divider fill, beneath-frame background) - `#FF0055` — Glitch magenta (error-state glitch artifacts, chromatic aberration fringe, used sparingly at `<5%` of total visual surface) **Typography — eclectic-hybrid: two radically different typefaces in deliberate collision:** - **Display / HUD labels / wordmark:** [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — a monospace typeface with a military-radio aesthetic. Used for: wordmark `NAMU.LAND` at `clamp(48px, 9vw, 120px)` tracking `0.15em` all-caps; all HUD chrome labels at `7–10px`; section identifiers `TRANSMISSION_01` through `TRANSMISSION_07`. Color: `#00FFB2`. No italics. - **Body / decoded content:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display) — a high-contrast editorial serif. Used for: all long-form text inside the signal-decoded panels, at `clamp(16px, 1.8vw, 22px)` / `line-height: 1.65`. Color: `#F0EDE6`. Italics used for emphasis, creating stark contrast against the mono HUD chrome. The collision of military mono and editorial serif *is* the design. - **Data / accent labels:** [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk) — used exclusively for numeric data, percentages, and the scan-line counter in the HUD at `9–11px`. Color: `#00C8FF`. **Type scale:** - Display (wordmark): `clamp(48px, 9vw, 120px)`, Share Tech Mono, `wght 400`, tracking `0.15em` - Section headers (decoded panels): `clamp(28px, 4vw, 52px)`, Playfair Display, `wght 700`, `line-height: 1.1` - Body: `clamp(16px, 1.8vw, 22px)`, Playfair Display, `wght 400`, `line-height: 1.65` - HUD chrome: `7–10px`, Share Tech Mono, all-caps, tracking `0.2em` - Data labels: `9–11px`, Space Grotesk, `wght 600` ## Imagery and Motifs **Photography treatment — duotone-photo with glitch overlays:** All photography is processed through a strict two-channel duotone: shadows map to `#0A0A0F` (signal black), midtones map to `#00C8FF` (duotone cyan), highlights map to `#FF6B00` (duotone amber). No full-color photography appears anywhere. Source imagery: aerial forest canopy, root systems, mycelium networks, tree cross-sections, bark macros — all nature/biology, all processed through the same duotone filter so they read as scientific data visualizations as much as photographs. **Glitch artifact system (CSS + SVG, no JS libraries):** 1. **Chromatic aberration fringe:** On hover of any interactive element, a `::before` and `::after` pseudo-element duplicate the element's text in `#FF0055` and `#00C8FF`, offset by `±3px` horizontally, at `60%` opacity, creating a split-channel RGB ghost 2. **Scan-line overlay:** A repeating `linear-gradient` background of alternating `transparent` / `rgba(0,0,0,0.08)` bands at `2px` intervals, applied as a fixed `position: fixed` layer over the entire page at `z-index: 1`, `pointer-events: none` 3. **Signal dropout bars:** On the HUD right-edge border, periodic `4px` horizontal gaps appear at pseudo-random vertical positions (computed via `nth-child` offsets) — the border "breaks" intermittently 4. **Frame tear animation:** At transition between sections, a `@keyframes` sequence fires: the incoming frame briefly shows `transform: skewX(0.5deg) translateX(4px)` for `80ms` before settling — the "frame tear" as the tape splice loads **Motifs — futuristic, data-biology crossover:** - **Tree ring data-viz:** In Frame 3, a large circular SVG (diameter `min(60vw, 480px)`) built from concentric rings whose stroke-widths are data-encoded (simulating dendrochronology readout). Rings pulse outward via `@keyframes` at staggered 200ms intervals. Color: `#00FFB2` on `#0A0A0F`. - **Root-network line art:** In Frame 4, a `` element running a branching L-system animation — white lines (`#F0EDE6`) branch recursively from a single origin point at bottom-center, growing upward at 60fps. The branches follow the `FF6B00`→`00C8FF` gradient along their length. - **HUD scan-line counter:** Increments from `FRAME 0000` to `FRAME 0007` as sections enter viewport via IntersectionObserver — purely typographic, no icons - **Signal-strength bar:** The `SIG ████░░░░` indicator in the top-right HUD uses Unicode block characters (`█`, `░`) updated by scroll position — a 8-segment bar that fills as the user scrolls deeper ## Prompts for Implementation Build namu.land as **a corrupted documentary transmission that decodes itself as the viewer scrolls** — seven full-viewport frames, each one a further decoded layer of signal, with a persistent HUD chrome framing the entire experience. **Implementation priorities (in order):** 1. **HUD chrome first.** Build the four-sided `position: fixed` overlay (top bar, bottom progress bar, left label strip, right border) before any content. This is the site's spine — it anchors all spatial relationships. The wordmark `NAMU.LAND` lives in the top-left HUD segment, never in the scrolling content. `pointer-events: none` on all HUD elements except deliberate interactive nodes. 2. **Scan-line texture layer.** A `position: fixed`, full-viewport `
` with `background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px)` and `z-index: 1`, `pointer-events: none`. This sits above all content and below the HUD chrome. It never moves. 3. **Frame sequence (seven `
` elements, each `100vh` tall):** - Frame 0 `INTERCEPT`: Pure `#0A0A0F` background. Only wordmark and blinking cursor visible. Title glitch-in animation: text appears through a sequence of `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)` with three intermediate `skewX` glitch frames at `40ms`, `80ms`, `160ms`. Duration: 1.2s. Signal meter: 0/8 blocks. - Frame 1 `ROOT_SYSTEM`: Duotone aerial root photograph fills full bleed. Signal-decoded panel slides in from left (`translateX(-100%)` → `translateX(0)`, `ease-out`, `600ms`). Content: paragraph about root networks as information systems. Signal meter: 2/8. - Frame 2 `MYCELIUM_LAYER`: Duotone mycelium photograph. Panel at right side (`left: auto; right: 10vw`). Content: data about fungal communication networks. Signal meter: 4/8. - Frame 3 `RING_DATA`: Dark frame (`#1A1A2E` background), no photograph. Center: the concentric ring SVG dendrochronology viz. HUD counter: `FRAME 0003`. Signal meter: 5/8. - Frame 4 `CANOPY_DATA`: Duotone aerial canopy photograph. Canvas L-system root animation overlaid at 40% opacity. Signal meter: 6/8. - Frame 5 `TRANSMISSION_END`: Duotone bark macro photograph. Final decoded panel (centered this time) with the site's core message. Signal meter: 7/8. - Frame 6 `SIGNAL_RESTORED`: Glitch layers dissolve (`opacity: 0`, `transition: 1.5s`). HUD chrome fades to hairlines (`opacity: 0.3`). Clean full-bleed duotone forest image. Signal meter: 8/8, all filled. A single line: `SIGNAL RESTORED` in Share Tech Mono, white, centered. 4. **Progressive disclosure via IntersectionObserver.** One observer per section. `rootMargin: '0px 0px -20% 0px'` so panels trigger slightly before the frame fully enters. The HUD counter updates in the observer callback. Do NOT use scroll events — use IntersectionObserver exclusively. 5. **Glitch animations: CSS-only, no JS.** Chromatic aberration on interactive elements via `::before`/`::after`. Frame-tear on section entry via `@keyframes`. Avoid JS-driven glitch libraries — the entire glitch system must work with CSS `@keyframes` and `animation` properties. 6. **Duotone photo treatment in CSS.** Use `filter: grayscale(1)` + `mix-blend-mode: color` on a `::before` pseudo-element with `background-color: #00C8FF` for the cyan channel, and a second `::after` pseudo-element with `background-color: #FF6B00` and `mix-blend-mode: multiply` for the amber channel. The underlying image is grayscale; the two blend-mode layers apply the duotone. 7. **L-system canvas animation (Frame 4).** A simple recursive branching algorithm: starting point `(canvas.width/2, canvas.height)`, initial angle `-90°`, length `canvas.height * 0.22`. Each iteration: draw forward, branch left by `±25°`, reduce length by `0.72`, recurse until length `< 6px`. Color: interpolate from `#FF6B00` (base) to `#00C8FF` (tips) along branch depth. `requestAnimationFrame` loop with growth rate `+2px length per frame` starting from `0`. 8. **Typography loading.** Google Fonts: `Share+Tech+Mono`, `Playfair+Display:ital,wght@0,400;0,700;1,400`, `Space+Grotesk:wght@600`. Preload the `woff2` formats. No web font fallback that changes layout — size the layout for the loaded fonts. **Avoid:** No navigation menu. No sticky header (the HUD IS the header). No CTAs, no pricing, no testimonials, no stat grids, no card layouts, no modals. No color photography. No full-color anything — the entire visual world is the duotone system plus HUD green. Do not add a footer with columns — if a footer exists, it is a single `