# Design Language for namu.market

## Aesthetics and Tone

namu.market ("namu" meaning "tree" in Korean) channels the visual world of a naturalist's field journal discovered in a tropical fish market on a humid Southeast Asian coast -- the kind of place where hand-scrawled price tags are stuck to tanks with tape, where faded chalk illustrations of angelfish and arowanas decorate the walls, and where the overhead fluorescent flickers create a permanent sense of low-fi surveillance. The aesthetic is **hand-drawn** in the literal sense: every visual element should look as though it was sketched by a marine biologist with a felt-tip pen on damp paper. There is no pretension of polish here; the beauty emerges from the accumulation of careful, imperfect observation.

The tone is **authoritative** -- not in a corporate or institutional sense, but in the manner of a field expert who has spent decades cataloguing species. When namu.market speaks, it speaks with the quiet certainty of someone who knows exactly which fish they are looking at. The authority is earned, not declared. Text is direct, declarative, spare. No exclamation marks. No marketing superlatives. The voice is that of a naturalist's notebook: "This specimen was observed at 3.2m depth. Coloration suggests seasonal variation." Applied to whatever namu.market actually sells or communicates, this translates to copy that is factual, precise, and trusts the reader to recognize quality without being told.

The overall mood sits at the intersection of documentary rigor and hand-crafted warmth -- a HUD-like information overlay floating above hand-drawn tropical illustrations, as if a scientific instrument display has been projected onto the pages of a field sketchbook.

## Layout Motifs and Structure

The layout employs a **HUD-overlay** architecture: a persistent translucent information frame sits at the edges of the viewport while content flows beneath it, creating the sensation of viewing a natural habitat through an observation instrument or aquarium glass.

**The HUD Frame:**
A thin border (1px, color #5B3A29 at 40% opacity) runs 24px inside all four viewport edges, creating an inset rectangular frame that persists through scroll. At the four corners of this frame, small L-shaped bracket marks (reminiscent of camera viewfinder brackets) are drawn using SVG paths with a hand-tremor effect -- slight waviness applied via JavaScript noise on the path coordinates. The top-left bracket contains the domain "namu.market" in a small monospace label. The top-right displays a rotating ambient data readout (e.g., "depth: 2.4m | temp: 27.3C | salinity: 34.2ppt") that cycles through values on a 6-second interval using CSS animation. The bottom-left shows a minimal navigation index ("01 / 02 / 03 / 04") where each number corresponds to a major scroll section, with the current section highlighted by a subtle pulse animation. The bottom-right displays a small hand-drawn compass rose SVG that rotates very slowly (360deg over 120 seconds).

**Content Flow Within the Frame:**
Inside the HUD frame, content is organized in a **single vertical stream** that avoids centering. Text and imagery sit with a leftward bias, occupying 50-65% of the viewport width, beginning roughly 80px from the left edge of the HUD frame. The right side remains deliberately sparse -- punctuated occasionally by floating hand-drawn specimen illustrations that drift slightly on a slow CSS transform oscillation (translateY cycling +/-8px over 10 seconds).

**Section Transitions:**
Between major content zones, full-width "observation dividers" appear: horizontal lines that are not straight but hand-drawn SVG paths with gentle undulation, resembling the surface of water viewed from below. These dividers span the full width of the HUD frame interior and are colored in the terracotta palette's muted tones (#C4724E at 30% opacity).

**Spatial Rhythm:**
Generous vertical spacing (minimum 120px between sections) creates the unhurried pace of underwater observation. Content does not crowd. Each section has breathing room equivalent to a slow exhalation. The page should feel like drifting through a warm, shallow reef -- information arrives at the pace the environment dictates, not at the pace of commerce.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Caveat" (Google Fonts) -- a true handwriting-style font that maintains legibility at large sizes. Used at weights 400-700, sizes ranging from `clamp(2rem, 4vw + 0.5rem, 4.5rem)` for primary headings. This font provides the hand-drawn character that anchors the entire aesthetic. Headlines are always sentence case, never uppercase. Letter-spacing: -0.02em to keep the handwritten feel tight and natural rather than artificially spaced.

- **Body Text:** "Literata" (Google Fonts) -- an elegant variable serif designed for long-form reading. Used at weight 350 (light-regular) with optical sizing enabled via `font-variation-settings: 'opsz' 14`. Size: `clamp(1rem, 1.1vw + 0.5rem, 1.2rem)`. Line-height: 1.72. The serif construction provides the scholarly authority that complements the hand-drawn display type -- the pairing says "this was sketched by someone who then went home and wrote a proper paper about it."

- **HUD / Data Labels:** "IBM Plex Mono" (Google Fonts) -- used exclusively for the HUD frame elements, data readouts, navigation indices, and any numerical or taxonomic information. Weight 400, size 0.75rem, letter-spacing: 0.06em, text-transform: uppercase. Color: #5B3A29 at 70% opacity. This creates the instrument-panel contrast against the organic typography.

- **Accent / Annotations:** "Kalam" (Google Fonts) -- a second handwriting font used sparingly for margin annotations, labels on illustrations, and interactive tooltip text. Weight 300-400, size 0.85rem. This complements Caveat without duplicating it -- Kalam is more casual, like pencil margin notes, while Caveat is the main field journal hand.

**Fluid Typography System:**
All type sizes use CSS `clamp()` for variable-fluid scaling. The system defines a type scale based on a 1.25 ratio (major third) with viewport-responsive interpolation:
```
--step-0: clamp(1rem, 0.5vw + 0.875rem, 1.2rem);
--step-1: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
--step-2: clamp(1.563rem, 1.2vw + 1.1rem, 1.875rem);
--step-3: clamp(1.953rem, 2vw + 1rem, 2.8rem);
--step-4: clamp(2.441rem, 3vw + 1rem, 4.5rem);
```

**Palette:**

The palette is **terracotta-warm** -- drawn from the clay, sand, coral, and warm water of a tropical coastline.

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Bleached Shell | #F7F0E8 | Page background, primary canvas |
| Surface | Warm Sand | #EDE3D5 | Card backgrounds, HUD frame fill at 15% opacity |
| Primary Text | Kiln Dark | #2E1F14 | Body text, headings |
| Terracotta | Fired Clay | #C4724E | Primary accent, links, active states, illustration strokes |
| Secondary | Reef Coral | #D4956A | Secondary accent, hover states, annotation text |
| Deep Water | Tide Pool | #1B4B5A | Contrast accent for data labels, HUD readouts, depth information |
| Warm Highlight | Sunlit Fin | #E8A948 | Highlights, pulse-attention glows, selected navigation |
| Muted Ground | Driftwood | #8B7355 | Borders, divider lines, secondary UI elements |
| Dark Accent | Volcanic Sand | #3D2B1F | Footer background, deep section backgrounds |

The palette deliberately avoids pure white and pure black. The darkest value (#2E1F14) is a warm near-black with brown undertones. The lightest (#F7F0E8) is a warm off-white with yellow-pink warmth. This keeps the entire experience within a terracotta thermal range where nothing feels cold or clinical.

**Gradient Usage:**
A subtle radial gradient (`radial-gradient(ellipse at 30% 40%, #F7F0E8 0%, #EDE3D5 60%, #D4C4A8 100%)`) provides depth to the background canvas, simulating the natural variation of aged paper or sun-bleached wood. This gradient shifts its center point slowly via a 30-second CSS keyframe animation to create a living, breathing background.

## Imagery and Motifs

**Hand-Drawn Tropical Fish Illustrations:**
The primary visual motif is **hand-drawn tropical fish** rendered as SVG illustrations with a deliberately sketchy quality. Each fish is drawn with:
- Multiple overlapping stroke paths rather than clean filled shapes, creating the look of a pen sketch with several passes
- Stroke width variation via `stroke-dasharray` and `stroke-dashoffset` animation to simulate the pressure variation of a real pen
- Fill colors from the terracotta palette applied at 20-40% opacity beneath the strokes, like watercolor washes under ink lines
- Species-specific accuracy: the fish should be recognizable as real species (betta splendens, pterois volitans, amphiprion ocellaris, zanclus cornutus) rather than generic cartoon fish

**Specimen Card Pattern:**
Fish illustrations appear within "specimen card" containers -- rounded-corner rectangles (border-radius: 4px) with a 1px dashed border in Driftwood (#8B7355) and a subtle inner shadow (`box-shadow: inset 0 0 20px rgba(139,115,85,0.08)`). Each card includes:
- The illustration centered
- A handwritten label beneath in Kalam font ("Pterois volitans -- Red Lionfish")
- A small data block in IBM Plex Mono showing fabricated but plausible measurement data ("length: 38cm | weight: 1.2kg | observed: 2024.03")
- Cards float in the right margin of the layout, partially overlapping the HUD frame edge, as if pinned to a board

**SVG Path Animation:**
Fish illustrations are progressively drawn on scroll using `stroke-dashoffset` animation triggered at intersection observer thresholds. When a fish enters the viewport, its outline draws itself over 2.5 seconds in a smooth easing curve (`cubic-bezier(0.4, 0, 0.2, 1)`), followed by the watercolor fill fading in over 1.2 seconds. This creates the sensation of watching a naturalist sketch in real time.

**Water Surface Motifs:**
Horizontal section dividers use SVG `<path>` elements that simulate a gently undulating water surface. These paths are generated with 4-5 sine wave components of different frequencies and amplitudes overlaid, producing a naturalistic wave pattern. The paths slowly animate their phase offset via CSS keyframes (20-second cycle), so the water line perpetually ripples.

**Coral Texture Backgrounds:**
Certain deep-content sections use a background pattern generated from repeated small SVG circles and branching paths (2-3% opacity in Driftwood) that suggest coral branch structures. This texture is subtle enough to read as "visual warmth" rather than "patterned wallpaper."

**Compass Rose:**
The HUD's bottom-right compass rose is a hand-drawn SVG with 8 directional points, line weight varying from 1.5px to 0.5px from cardinal to intercardinal directions. It rotates continuously but imperceptibly slowly, contributing to the sense of drifting on water.

## Prompts for Implementation

**Full-Screen Narrative Opening:**
The site opens to a full-viewport canvas of Bleached Shell (#F7F0E8) with the slow radial gradient animation active. The HUD frame draws itself in from the four corners over 1.8 seconds using SVG path animation -- the corner brackets appear first, then the connecting lines extend to meet. During this 1.8-second reveal, nothing else is visible. Once the frame is complete, the domain name "namu.market" fades in at the center in Caveat at `clamp(3rem, 5vw, 5rem)`, positioned at 38% from top. Below it, a single line in Literata at var(--step-0) reads a tagline, followed by 600ms later by a small downward-pointing hand-drawn arrow SVG that pulses gently (the pulse-attention pattern: scale oscillating between 1.0 and 1.08 on a 2-second infinite ease-in-out loop). No navigation menu, no hamburger, no links. Just the frame, the name, and the invitation to scroll.

**Scroll-Driven Specimen Reveals:**
As the user scrolls past the hero, content sections unfold one by one within the HUD frame. Each section entry triggers:
1. The section heading writes itself in Caveat using a typewriter-adjacent reveal (each character appears with a 40ms stagger, but using opacity transition rather than literal typewriter -- the effect is more "ink drying" than "keyboard clacking")
2. Body text fades in paragraph by paragraph with 200ms stagger between paragraphs
3. Any associated fish illustration begins its SVG path-draw animation
4. The HUD's bottom-left section indicator pulses once on the newly active section number (the pulse-attention pattern: a brief scale-up to 1.3x with a #E8A948 glow shadow, then settle back over 600ms)

**The Observation Log Section:**
One major section should be designed as an "observation log" -- a series of entries that look like field journal pages. Each entry is a horizontal card spanning 70% of the HUD interior width, with:
- A date stamp in IBM Plex Mono at top-left
- A hand-drawn fish illustration at the right
- Handwritten-style text in Caveat describing the "observation"
- A bottom border that is a hand-drawn wavy line
- Cards stack vertically with 40px gaps and stagger-animate into view (each card sliding in from 20px below with opacity 0 to 1, staggered 150ms per card)

**Ambient Data Animation:**
The HUD's top-right data readout continuously cycles through pseudo-scientific readings using a JavaScript interval that cross-fades values:
```
depth: 2.4m --> depth: 3.1m --> depth: 1.8m
temp: 27.3C --> temp: 26.8C --> temp: 28.1C
salinity: 34.2ppt --> salinity: 33.9ppt --> salinity: 34.7ppt
```
Values transition via CSS opacity (fade out 300ms, update text, fade in 300ms). The numbers should feel like live instrument readings, reinforcing the HUD-overlay conceit.

**Interactive Specimen Hover:**
When hovering over a fish specimen card, the card tilts very slightly toward the cursor (max 3deg rotation on each axis, calculated from cursor position within the card) and the illustration's stroke color shifts from Driftwood (#8B7355) to Fired Clay (#C4724E) over 400ms. The data block text in IBM Plex Mono briefly highlights each value in sequence (a rapid pulse through length, weight, observed -- each highlighting for 200ms with Sunlit Fin #E8A948 color before returning to Tide Pool #1B4B5A).

**Color Temperature Shift on Scroll:**
As the user scrolls deeper into the page, the background gradient's warm center drifts slowly from the upper-left toward the lower-right, and the overall background hue shifts very subtly from Bleached Shell (#F7F0E8) toward a slightly deeper Warm Sand (#EDE3D5). This is achieved via a CSS custom property (`--scroll-warmth`) updated by a lightweight scroll listener that maps scroll percentage to a `color-mix()` interpolation. The effect should be nearly imperceptible consciously but contribute to a feeling of "diving deeper."

**AVOID:**
- CTA buttons, pricing tables, feature comparison grids, stat counters, testimonial carousels
- Generic stock photography -- all imagery is hand-drawn SVG
- Bright/saturated accent colors that break the terracotta warmth
- Snap-scroll or scroll-jacking -- the scroll must be natural and fluid
- Cookie banners, popup modals, newsletter signup overlays -- nothing that breaks the HUD immersion
- Card-grid layouts, masonry layouts, or any tiled arrangement that suggests e-commerce

## Uniqueness Notes

**Differentiators from other designs:**

1. **HUD-Overlay as Architectural Frame:** At only 3% frequency in the portfolio, the HUD-overlay layout is deeply underused. This design makes it the primary structural device -- not a decorative afterthought but the literal frame through which all content is perceived. The persistent viewport-inset frame with corner brackets, cycling data readouts, and section indicators creates a spatial experience that no centered/asymmetric/full-bleed layout can replicate. The HUD here is recontextualized from its typical sci-fi/tech associations into a naturalist's observation instrument, which is entirely novel.

2. **Hand-Drawn Tropical Fish as Primary Imagery:** The tropical-fish motif sits at 2% frequency, and hand-drawn imagery is rare in the portfolio (most designs use photography at 73% or minimal imagery at 94%). By making hand-drawn SVG illustrations of specific, taxonomically accurate tropical fish species the sole visual content -- no photographs, no abstract shapes, no icons -- this design occupies a visual territory that no other site approaches. The progressive SVG path-draw animation (fish sketching themselves on scroll) reinforces this as a living illustration rather than a static image.

3. **Variable-Fluid Typography at 3% Frequency with Four-Font System:** While most designs use 2-3 fonts, this design deploys a deliberate four-font system (Caveat, Literata, IBM Plex Mono, Kalam) where each font occupies a distinct semantic role (field journal headings, scholarly body, instrument data, margin annotations). Combined with the full `clamp()`-based variable-fluid scaling system, this creates a typographic hierarchy that is both more nuanced and more responsive than the typical mono/humanist pairings that dominate the portfolio.

4. **Scientific Authority Without Corporate Sterility:** The authoritative tone (18% frequency) is almost always paired with corporate or tech aesthetics elsewhere. Here, authority comes from naturalist expertise -- the voice of a marine biologist, not a CEO. This creates an entirely different emotional register: authority through knowledge and observation rather than through brand positioning. The HUD data readouts, specimen cards with measurement data, and taxonomic labels all reinforce this earned authority.

5. **Terracotta-Warm Palette as Underwater Environment:** At 2% frequency, the terracotta-warm palette is deeply underused. More importantly, it is never (in existing designs) associated with underwater or aquatic themes -- terracotta typically reads as "desert" or "pottery." This design deliberately subverts that association by using terracotta warmth to evoke tropical shallow water, coral reefs, and sun-filtered marine light. The inclusion of Tide Pool (#1B4B5A) as the sole cool accent provides just enough chromatic contrast to suggest water without abandoning the warm palette commitment.

**Documented Seed/Style:**
`aesthetic: hand-drawn, layout: hud-overlay, typography: variable-fluid, palette: terracotta-warm, patterns: pulse-attention, imagery: hand-drawn, motifs: tropical-fish, tone: authoritative`

**Avoided Overused Patterns:**
- Avoided centered layout (99%) in favor of hud-overlay (3%)
- Avoided playful aesthetic (94%) in favor of hand-drawn (23%)
- Avoided mono typography (98%) as primary -- used only for HUD data labels, with variable-fluid as the system
- Avoided minimal imagery (94%) and photography (73%) entirely -- all imagery is hand-drawn SVG
- Avoided vintage motifs (85%) in favor of tropical-fish (2%)
- Avoided friendly tone (98%) in favor of authoritative (18%)
- Avoided scroll-triggered as the sole pattern (96%) -- primary animation pattern is pulse-attention (5%) complemented by stagger reveals and SVG path-draw
<!-- DESIGN STAMP
  timestamp: 2026-03-10T16:38:49
  seed: unspecified
  aesthetic: namu.market ("namu" meaning "tree" in Korean) channels the visual world of a nat...
  content_hash: 8693c34710d1
-->