# Design Language for namu.land ## Aesthetics and Tone namu.land (Namu — 나무(木), Korean for "tree") channels a minimalist aesthetic — the disciplined reduction to pure essentials where emptiness becomes the primary material, applied to a tree-themed land and territory exploration platform. The site is a clearing in a dense forest — vast open space defined by the few elements present at its edges, where the absence of visual clutter allows visitors to feel the landscape itself. Inspiration draws from the white-space mastery of the Acne Studios website, the spare elegance of John Pawson's architecture, the photographic stillness of Michael Kenna's landscapes, and the typographic precision of Cereal magazine. The tone is dreamy-ethereal — soft, float-like language that treats land and trees as elements of a waking dream. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — content divided into two halves where one side holds vast emptiness and the other holds considered content, mirroring the relationship between open land and rooted trees. **Split Screen Architecture:** - Desktop: display: grid, grid-template-columns: 1fr 1fr - One half often intentionally left nearly empty (hero image or white space) - Content concentrated in the other half - Alternating sides between sections - Container: max-width: 1100px with splits extending to viewport edges - The split creates the boundary between clearing and forest **Section Sequence:** 1. **Clearing:** Hero split — handwritten title floating in ethereal-blue left void, vintage-photography misty forest on right, sharp-angles minimal geometric accent 2. **Territory:** Land features in split layout — stagger-animated text on one side, vintage-photography landscapes on the other 3. **Roots:** Tree connection section with text splitting against sharp-angles geometric territory markers 4. **Paths:** Exploration routes in alternating splits with vintage-photography trail images and ethereal atmospheric treatments 5. **Horizon:** Footer as vanishing point — dreamy-ethereal closing with sharp-angles horizon line and fading vintage treatment ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) — handwritten script at 2.5rem-3.5rem, weight 700. Its organic, personal quality creates the intimate, hand-drawn-map quality of someone marking their favorite trees on a land survey. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Caveat" at 1.3rem, weight 400 for location names and tree species labels. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Ethereal Ice:** #e8eef4 — cool ethereal ice-blue for primary backgrounds - **Mist Blue:** #d0d8e4 — soft blue mist for secondary backgrounds - **Azure Deep:** #3868a0 — deep azure for primary accent - **Fog Violet:** #6870a0 — foggy violet for secondary accent - **Frost White:** #f4f6fa — near-white frost for lightest surfaces - **Text Shadow:** #181828 — deep blue-black for body text - **Dim Blue:** #707888 — muted blue-gray for secondary text - **Border Frost:** #c0c8d8 — frost-colored border ## Imagery and Motifs **Vintage-Photography Misty Landscapes:** Land and tree imagery presented in vintage photographic style — CSS filters (grayscale(0.2) contrast(0.95) brightness(1.05)) applied to image containers, with warm overlay (rgba(56,104,160,0.04)). Slight vignetting (box-shadow: inset 0 0 80px rgba(24,24,40,0.06)). The vintage treatment creates the timeless quality of landscapes photographed decades ago. **Stagger-Animated Territory Content:** Content blocks within split sections appear in staggered sequence — each element delays 120ms, transitioning from opacity: 0, translateY(16px) to visible over 400ms. The staggering creates the gradual revelation of a landscape emerging from morning mist. **Sharp-Angles Geometric Territory Markers:** Small angular shapes (SVG, 12-24px) — triangles, chevrons, and angled lines in Azure Deep at 0.1-0.15 opacity positioned at content boundaries. These sharp geometric marks suggest surveyor's stakes, compass directions, and the angular precision of cartographic notation against the organic landscape. **Ethereal-Blue Atmospheric Depth:** Backgrounds layer ethereal blues — linear-gradient(180deg, #e8eef4, #d0d8e4) with very subtle radial highlights (rgba(56,104,160,0.02)). The atmospheric blue creates the feeling of looking through morning mist across an open landscape where trees are visible only as silhouettes. **Split-Screen Emptiness:** The intentionally empty halves of split sections carry significance — vast white/ice-blue space representing the open land itself. A single sharp-angle marker or thin line may be the only element in 50% of the viewport, letting the emptiness speak. ## Prompts for Implementation Build the page as a minimalist tree-land exploration. Split: display: grid, grid-template-columns: 1fr 1fr, min-height: 80vh. Container: max-width: 1100px width, splits can extend beyond. Stagger: .territory-block { opacity: 0; transform: translateY(16px); transition: all 400ms ease-out; transition-delay: calc(var(--i) * 120ms); } .territory-block.visible { opacity: 1; transform: translateY(0); } Vintage photo: .vintage-photo { filter: grayscale(0.2) contrast(0.95) brightness(1.05); position: relative; } .vintage-photo::after { content: ''; position: absolute; inset: 0; background: rgba(56,104,160,0.04); box-shadow: inset 0 0 80px rgba(24,24,40,0.06); } Sharp-angles: .territory-marker { position: absolute; opacity: 0.12; } .territory-marker svg { stroke: #3868a0; stroke-width: 1.5; fill: none; } Ethereal atmosphere: .ethereal-section { background: linear-gradient(180deg, #e8eef4, #d0d8e4); } AVOID: Dense land databases, GIS-style mapping interfaces, and information-heavy territory platforms. Let minimalist emptiness and dreamy-ethereal softness create a land platform where trees and territory are experienced as atmosphere rather than data. ## Uniqueness Notes 1. **Minimalist for tree-land exploration:** Radical reduction makes the empty space itself represent the open landscape between trees. 2. **Split-screen as clearing and forest:** Divided compositions mirror the natural boundary between open land and tree-covered territory. 3. **Handwritten typography as personal cartography:** Script headlines create the intimate quality of hand-drawn maps and personal land journals. 4. **Stagger as mist revelation:** Gradual content appearing mirrors landscapes emerging from morning fog. 5. **Sharp-angles as surveyor marks:** Geometric territory markers bring cartographic precision to the dreamy, atmospheric landscape. **Seed/Style:** aesthetic: minimalist, layout: split-screen, typography: handwritten, palette: ethereal-blue, patterns: stagger, imagery: vintage-photography, motifs: sharp-angles, tone: dreamy-ethereal **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses minimalist aesthetic, split-screen layout, ethereal-blue palette, vintage-photography imagery, and dreamy-ethereal tone.