# Design Language for namu.day
## Aesthetics and Tone
namu.day channels a **futuristic-cutting-edge editorial** sensibility — imagine a luxury fashion magazine published in 2087, printed on smart paper that responds to touch. The palette is anchored in deep, oxidized burgundy (#4A0E22) against near-black charcoal (#0D0D0F), with flickers of antique gold (#C9A84C) and cold arctic white (#F0EDE8) as punctuation.
The mood is one of **deliberate tension**: retro-patterned ornamental geometry colliding with sharp, forward-facing sans-serif type at outsized scales. Think brutalist structure dressed in velvet — authority and elegance in the same breath. "Namu" (나무, tree in Korean) grounds the aesthetic in something organic, ancient, and rooted — but refracted through a speculative futurist lens where nature is revered as a high-technology artifact.
Every page reads as a **single editorial spread**: slow, intentional, almost cinematic in pacing. No noise, no urgency. The interface breathes.
## Layout Motifs and Structure
The grid is a **4-column editorial card grid** with asymmetric column weights — columns 1–2 carry a wide narrative anchor card, while columns 3–4 host a vertical stack of narrow secondary cards. Gaps are generous (40px minimum) to let the deep background breathe.
- **Hero zone**: Full-viewport editorial masthead — a single oversized typographic headline spanning 70 vw, set at a slight clockwise rotation (–2°), anchored bottom-left. No images. Pure typographic architecture.
- **Card system**: Cards have no border-radius. Hard corners, thick 2px burgundy-tinted rule separating the card header from content. Cards use a subtle inset dark-burgundy background (#1C0912) against the near-black canvas, creating a layered depth without shadows.
- **Retro ornamental dividers**: Between sections, full-width horizontal rules are decorated with repeating dot-dash SVG ornamental motifs — Victorian telegraph-era border geometry rendered in gold (#C9A84C at 40% opacity).
- **Vertical rhythm**: Section spacing is driven by multiples of 96px. Headers never stack over body text — they are always separated by at least one full typographic "breath" unit.
- **Shake-error state**: Form inputs and interactive elements emit a precise 3-keyframe horizontal shake (±8px, 120ms total) on validation error, with a momentary flash of saturated crimson (#D4213D) border — like a typewriter carriage jerking back.
## Typography and Palette
**Primary typeface — Headings**: "Nunito" (Google Fonts) — a rounded-sans with humanist warmth. Used at extreme contrast scales: 96px display, 11px caption. The roundness of Nunito reads as retro-futurist when set tightly at large sizes and spaced liberally at small.
**Secondary typeface — Body/Cards**: "DM Sans" (Google Fonts) — clean, optical-size-aware, excellent for both dense editorial paragraphs and sparse UI labels.
**Accent typeface — Ornamental labels**: "Playfair Display SC" (Google Fonts, small caps variant) — used exclusively for section headers and card category labels, always tracked +0.12em, always in gold or white.
**Palette:**
- `#0D0D0F` — Canvas Black (base background)
- `#1C0912` — Deep Burgundy Shadow (card backgrounds, recessed panels)
- `#4A0E22` — Core Burgundy (primary accent, borders, active states)
- `#C9A84C` — Antique Gold (ornamental rules, Playfair labels, hover highlights)
- `#F0EDE8` — Parchment White (primary text, headings)
- `#D4213D` — Error Crimson (shake-error flash, validation states only)
- `#2E1A2E` — Warm Noir (subtle card hover tint, gradient stops)
## Imagery and Motifs
**Abstract shapes**: Floating geometric fragments — truncated circles, irregular polygons, and thin-rule triangles — rendered as SVG elements layered behind card grids. These shapes use the burgundy and gold palette at 8–15% opacity, creating a subliminal structural texture without competing with content. Each shape is assigned a slow drift animation (40–80s loop, `ease-in-out`, 6–10px translation range) to suggest living, breathing space.
**Retro-pattern tile**: A repeating `background-image` SVG tile of interlocking Art Nouveau–adjacent diamond lattice — 24px unit cell, stroke `#C9A84C` at 6% opacity — applied to the full canvas as an ultra-subtle grain. This is the "retro-pattern" signature: just barely visible, only perceptible on close inspection, but fundamentally changing the tactile quality of the surface.
**Card imagery treatment**: When card thumbnails are used, they are treated with a CSS `mix-blend-mode: luminosity` + `hue-rotate(320deg)` filter that maps all hues into the burgundy-gold range, keeping the page monochromatic.
**Iconography**: No icon libraries. All UI glyphs are hand-drawn SVG micro-illustrations — 2px stroke, round linecap, Parchment White — depicting tree branches, growth rings, and root systems as metaphors for content hierarchy.
**Cursor behavior**: A custom circular cursor (16px, 2px gold ring) that expands to 40px with 200ms spring easing on interactive element hover, leaving a brief gold `radial-gradient` trail that fades over 600ms.
## Prompts for Implementation
**HTML/CSS/JS — Core Structure:**
- Build as a single-page document with full-viewport scroll sections, each `min-height: 100vh`.
- Use CSS Grid with `grid-template-columns: 2fr 1fr 1fr` for the main content zone.
- Implement the card grid inside a `display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px` container.
- All section transitions use `scroll-snap-type: y mandatory` on the scroll container with `scroll-snap-align: start` per section.
**Typography animation:**
- On page load, the hero headline performs a character-by-character staggered reveal: each letter begins at `opacity: 0; transform: translateY(24px)` and transitions to its final position over 600ms with 40ms stagger per character.
- Use `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)` for card category labels to produce a wipe-in reveal on scroll entry.
**Shake-error implementation:**
```css
@keyframes shake-error {
0% { transform: translateX(0); border-color: #4A0E22; }
25% { transform: translateX(-8px); border-color: #D4213D; }
75% { transform: translateX(8px); border-color: #D4213D; }
100% { transform: translateX(0); border-color: #4A0E22; }
}
.input-error {
animation: shake-error 120ms ease-in-out;
}
```
**Retro ornamental divider SVG:**
```svg
```
**Background lattice tile:**
```svg
```
**Floating abstract shapes:**
Each shape element gets a unique `--drift-x` and `--drift-y` CSS custom property, animated via:
```css
@keyframes drift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(var(--drift-x), calc(var(--drift-y) * 0.5)) rotate(1.5deg); }
66% { transform: translate(calc(var(--drift-x) * -0.3), var(--drift-y)) rotate(-1deg); }
}
```
**Storytelling approach — avoid marketing patterns:**
- NO hero call-to-action buttons above the fold. The hero section is typographic architecture only.
- NO pricing blocks, stat grids, or feature comparison tables.
- Lead with a full-screen editorial statement — a 3–5 word headline in 96px Nunito, lowercase, left-aligned, that names a feeling rather than a product.
- Secondary sections reveal themselves through scroll-triggered fade + translate entrances using `IntersectionObserver` with `threshold: 0.15`.
- Card grid functions as a curated index — each card is a portal, not a product listing.
## Uniqueness Notes
1. **Rounded-sans at maximum scale as futurist statement**: Using Nunito — a font associated with friendly UI — at 96px display size with tight tracking (-0.02em) transforms its warmth into something austere and architectural. This inversion is the typographic core of the design.
2. **Retro-pattern as subliminal texture, not surface decoration**: The diamond lattice tile is tuned to near-invisibility (6% opacity) — it is felt before it is seen. Most retro-pattern implementations use bold, visible repetition; this design buries the pattern in the negative space.
3. **Burgundy as depth dimension, not accent color**: The palette treats burgundy as a spatial layer rather than a highlight — `#1C0912` (deep shadow), `#4A0E22` (mid-depth), with lighter accent colors (gold, parchment) reading as "surface." This reverses conventional dark-mode logic where the palette lightens toward interaction.
4. **Abstract shapes as slow architecture**: The drifting SVG shapes (40–80s loop) operate at a timescale below conscious attention. Visitors may spend minutes on the page before noticing the background has shifted. This creates subliminal dynamism without distraction.
5. **Tree iconography as navigational metaphor**: Custom SVG branch/root glyphs replace generic icons, grounding the "namu.day" brand identity (tree) in every UI affordance — not as decoration but as a coherent visual language.
**Chosen seed**: aesthetic: editorial, layout: card-grid, typography: rounded-sans, palette: deep-burgundy, patterns: shake-error, imagery: abstract-shapes, motifs: retro-patterns, tone: futuristic-cutting-edge
**Avoided overused patterns**: helvetica-neutral (12%), content-cards (10%), minimal-whitespace (9%), dark-mode-default (8%), gradient-hero (7%) — all avoided in favor of hard-cornered editorial cards, near-black canvas with depth-layered burgundy, and pure typographic heroes.