# Design Language for namu.market ## Aesthetics and Tone **namu** (나무) is the Korean word for tree — but stripped of its bark and lit in neon, it becomes something alien and beautiful: a bioluminescent skeleton of a tree rendered in three dimensions, floating against absolute black, its branches dripping electric color. The site is a **market** — a place of exchange — but it refuses the transactional vocabulary entirely. No price tags, no carousels, no filter sidebars. Instead, the market is experienced as a **zero-gravity celestial bazaar**: a void in which objects orbit, glow, and drift. The dominant tension is **minimalist calm meeting dopamine neon**. A black void gives the composition space to breathe; then, from that silence, objects bloom in electric violet, acid green, and plasma magenta. The tone is **calm-serene** — not the calm of grey corporate restraint, but the calm of deep space: vast, silent, crystalline, charged with latent energy. The visitor feels the way an astronaut feels floating above Earth at night, watching city grids pulse far below. This is not a marketplace of friction. It is a marketplace of wonder. **Mood board:** deep-space observatory + Korean convenience store at 3am + Zaha Hadid's unbuilt museums + a tree seen through a plasma globe. ## Layout Motifs and Structure The layout is a **magazine-spread**: two pages laid open, horizon-crossing, cinematic. On desktop, the viewport is split into two zones by an invisible vertical axis — the left half is narrative/typographic, the right half is three-dimensional object space. The two zones breathe together rather than subdivide into boxes. **Structural logic:** - **The Void Column (left, 55% width):** Black. A single column of sparse text — brand wordmark in large geometric sans, one or two lines of description. Text anchors to the left margin with 8vw padding. The column never has a visible container, border, or card — it is simply type floating in black. - **The Object Stage (right, 45% width):** A full-height 3D canvas (WebGL). Geometrically simple 3D forms — spheres, tori, low-poly asteroids — hang in the space, each one emitting neon rim light. They rotate slowly on independent axes. No background image, just pure black and glow. - **The Horizon Bar:** A single 1px horizontal line at viewport center-left, colored in the primary neon accent (`#B8FF57`), running only 30% of viewport width from the left edge. It is the only ruled element on the page — a horizon, a market stall counter, a tree branch. It glows with a 4px `box-shadow` blur. - **Below the fold:** The layout collapses to a single centered column for mobile. Sections stack vertically with generous negative space (min 20vh between blocks). No cards, no grids, no columns on mobile. - **Scroll behavior:** On scroll, the left text column fades out upward (translate -40px, opacity 0) while new content fades in from below. The 3D stage objects reposition — a slow orbital drift. No jarring repaints. The sensation is a page turn in zero gravity. - **No navigation bar.** There is a single floating wordmark in the top-left corner (the only persistent element). All navigation is gesture-triggered: a swipe-left or click on the right stage reveals a radial orbit menu, where each nav node is a glowing sphere. **Grid:** 12-column CSS grid underneath, but only for internal alignment math — no column lines are ever visible. All content ignores the grid visually, producing an asymmetric editorial rhythm. ## Typography and Palette **Typefaces (all verified Google Fonts):** - **Wordmark / Display:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 700, tracked at `0.08em`. Used exclusively for `namu.market` and primary section headers. The geometric circularity of its `O`, `G`, `C` echoes the orbital spheres in the 3D stage. Set at `clamp(3.5rem, 8vw, 9rem)` for the wordmark. - **Body / Narrative:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 300 for body paragraphs, weight 500 for pull quotes. DM Sans reads airy and clean against black; its humanist geometry prevents the coldness of pure geometric grids. Set at 1rem / 1.75 line height. - **Accent / Korean Labels:** [Noto Sans KR](https://fonts.google.com/specimen/Noto+Sans+KR), weight 300. Used sparingly for Korean script annotations — the word `나무`, market category labels in hangul. Hung in the margin as ghost text at 60% opacity. **Palette — Dopamine Neon on Void Black:** | Role | Name | Hex | |------|------|-----| | Background void | Absolute Black | `#030305` | | Primary neon | Acid Chartreuse | `#B8FF57` | | Secondary neon | Plasma Violet | `#C264FF` | | Tertiary neon | Electric Coral | `#FF4D6D` | | Cyan signal | Hyperblue | `#00E5FF` | | Surface / card ghost | Deep Slate | `#0E0E18` | | Text primary | Glacier White | `#F0F2FF` | | Text muted | Fog | `#7A7D9C` | All neon values are used with `text-shadow` or `box-shadow` glow at 0px 0px 18px (full color, 70% alpha) for objects in light-emitting contexts. The glows never overlap — each neon occupies its own spatial region. ## Imagery and Motifs **Imagery is exclusively 3D renders** — no photography, no flat illustration. All 3D objects are created in WebGL (Three.js) and rendered live in the browser at runtime. No pre-rendered PNGs. **The object vocabulary:** 1. **Namu Spheres:** Perfect spheres with a procedural bark-vein displacement map on the surface, rim-lit with `#B8FF57`. Up close, the sphere reads as a glowing planet with tree-ring latitude lines. Diameter scales with viewport. 2. **Torus Rings:** Three nested tori at slightly different radii, each rotating on a different axis, colored in `#C264FF`. They represent the market's exchange loops — circular economies of value. 3. **Low-Poly Asteroids:** Six to eight irregular polyhedra, each small, drifting in slow elliptical paths around the main sphere. Each asteroid has a different neon edge-glow color drawn from the palette. They represent product items drifting in orbit, waiting to be claimed. 4. **Star Field:** A WebGL particle system — 2,000 points at z-depth far behind all objects, white at 15% opacity, slowly drifting parallax as the user moves the mouse. The starfield is the market's ambient texture. **Glitch motifs — deployed surgically, not decoratively:** The glitch pattern is not RGB channel-split cyberpunk. Here, glitch is **market data corruption as aesthetic event** — brief, unexpected, and structural. Specific glitch applications: - The wordmark `namu.market` on hover runs a 0.3s CSS clip-rect glitch: the text slices into 3 horizontal fragments, each offset `±4px` on x, then snaps back. Triggered on hover only. - On slow scroll sections, a single line of body text occasionally (1 in 6 paragraph entries, random JS) renders with a 2-frame glitch — a horizontal white bar 2px tall passes through it at 60fps, like a scan-line artifact. - The horizon bar pulses once every 8 seconds: its `box-shadow` glow expands to 20px then contracts to 4px over 200ms, like a signal spike. **Star-celestial motifs:** The star motifs are woven throughout as structural elements: - Section dividers use a 7-point star (`★`) in `#B8FF57`, size 0.6rem, placed at the left margin, as the only ornamental mark between sections. - In the 3D stage, a faint constellation wireframe (six stars connected by `0.5px` lines in `#C264FF` at 20% opacity) slowly rotates in the background behind the main sphere, like a star map superimposed on the market. - Micro-interaction: when a user clicks an asteroid, it spins rapidly and emits a burst of 12 `★` glyphs that radiate outward from the click point in CSS keyframe animation, fade out over 600ms, and vanish. ## Prompts for Implementation **The story to tell.** A visitor arrives at namu.market the way they arrive at an open-air night market in Seoul at 1am — not to buy a specific thing, but to wander, to be attracted by light, to discover. The entire single-page experience is that wandering. There is no defined purchase flow, no hero CTA, no "Get Started" button. There is only the void, the tree-sphere glowing in the middle of it, the asteroids orbiting, and occasional Korean text whispering in the margin. **Scene 1 — The Arrival (viewport 0-100vh):** Full-screen 3D stage is visible immediately. The Namu Sphere rotates at 0.003 rad/frame. The wordmark fades in from opacity 0 over 1200ms with a subtle upward translate. The horizon bar draws itself left-to-right over 800ms on load. No text except wordmark for the first 2 seconds — let the 3D breathe. **Scene 2 — The Orbit (100vh-250vh):** On scroll, the sphere moves to the right quadrant of the 3D stage. Three content cards (ghost-surface `#0E0E18`, 1px border `#B8FF57` at 15% opacity) float into the left column in staggered intervals (150ms between each). Each card is a market "category" — written in both English and hangul. Cards have no hover lift; instead, on hover the card border glow intensifies to 100% opacity and the relevant asteroid in the 3D stage glows brighter. **Scene 3 — The Constellation (250vh-400vh):** The 3D stage rotates to show the constellation wireframe front-and-center. The sphere is now small in the upper corner. The left column shows a single long paragraph about the market — written as a constellation myth, not a product description. Typography only: Space Grotesk header, DM Sans body, occasional `★` dividers. **Scene 4 — The Colophon (400vh+):** A final full-width section, dark slate background `#0E0E18`. The Korean word `나무` centered, Space Grotesk 700, `clamp(8rem, 20vw, 22rem)`, color `#B8FF57`. Below it: `namu.market` in DM Sans 300 at 1rem, muted fog color. One more slow 3D scene: all asteroids have gathered into a loose cluster. The horizon bar reappears, full-width this time, glowing `#C264FF`. **Animation directives:** - All CSS transitions: `cubic-bezier(0.16, 1, 0.3, 1)` (expo ease-out). No linear timing anywhere. - Three.js framerate cap: 60fps with `requestAnimationFrame`. Delta-time smoothed. - Glitch effects: CSS `clip-path` manipulation only — no canvas overdraw. - Particle star-burst on asteroid click: pure CSS `@keyframes` with `transform: translate()` and `opacity`, no JS animation library. - Scroll animations: `IntersectionObserver` with `threshold: [0, 0.1, 0.5, 1.0]` — four trigger points per element for granular control. **Implementation constraints:** - No pricing blocks, no stat grids, no testimonial carousels, no FAQ accordions. - No hero section with a headline + subheadline + two buttons. The wordmark IS the hero. - No footer with links. The colophon is the end. - Three.js loaded via CDN, WebGL canvas positioned `fixed` in the right zone, `pointer-events: none` except for the asteroid click zones (use raycasting). ## Uniqueness Notes 1. **Live WebGL as compositional element, not decoration.** The corpus shows 3d-render at only 2% imagery usage — almost always as pre-rendered PNG hero images. namu.market uses live Three.js as the right-half of the magazine-spread layout, replacing the typical photography panel entirely. The 3D objects are not decoration; they ARE the layout structure. 2. **Dopamine neon as silence, not noise.** At 3% usage, dopamine-neon in the corpus is treated as "candy-bright maximalism." This design subverts that: neon is placed against absolute black with maximum negative space. The neon glows serve as the only color, making each instance land with full impact — a single chartreuse sphere in a sea of black is more dopaminergic than a rainbow confetti page. 3. **Glitch as market data event, not cyberpunk aesthetic.** Glitch-art sits at 2% usage in the corpus. Every existing use follows the RGB channel-split/cyberpunk convention. This design re-contextualizes glitch as signal noise in a market feed — the text scan-line and wordmark clip-rect feel like Reuters terminal artifacts, not Blade Runner backgrounds. 4. **Korean language as ornamental typography, not i18n afterthought.** No other design in the corpus uses hangul as a visual motif. The word `나무` at `clamp(8rem, 20vw, 22rem)` in the colophon is purely visual — a calligraphic monument made of geometric-sans pixels. Noto Sans KR weight 300 at scale reads as abstract geometry before it reads as text. 5. **Star-celestial motifs as structural grammar.** Star-celestial is at 4% in the corpus, always used as background decoration (starfield wallpapers, zodiac art). Here, stars are structural: the `★` glyph is the section divider, the constellation wireframe is a navigational metaphor, and the asteroid click interaction releases stars as micro-feedback. The motif does functional work. **Chosen seed:** aesthetic: minimalist, layout: magazine-spread, typography: geometric-sans, palette: dopamine-neon, patterns: glitch, imagery: 3d-render, motifs: star-celestial, tone: calm-serene **Avoided from frequency analysis (overused):** - `centered` layout (86%) — replaced with asymmetric magazine-spread left/right zone split - `hand-drawn` aesthetic (59%) — replaced with precise geometric-sans and 3D render vocabulary - `photography` imagery (89%) — replaced entirely with live WebGL renders - `parallax` pattern (77%) — replaced with orbital drift and glitch micro-events - `warm` palette (88%) — replaced with void black and electric neon accents - `gradient` palette (77%) — gradients used only as glow halos, never as backgrounds or fills