# Design Language for namu.biz ## Aesthetics and Tone namu.biz (Namu — 나무(木), Korean for "tree") channels a zen aesthetic — the contemplative stillness of Japanese rock gardens and the meditative clarity of Buddhist temple design applied to a tree-themed business platform. The site breathes like a garden — generous space between elements, natural materials rendered digitally, and the understanding that what is not present matters as much as what is. Inspiration draws from the raked gravel patterns of Ryoanji temple, the asymmetric pottery of wabi-sabi tradition, the floating world prints of Hiroshige, and the quiet digital presence of Muji. The tone is mysterious-moody — contemplative, fog-shrouded language that treats business as a practice requiring patience and rootedness. ## Layout Motifs and Structure The layout uses a **broken-grid** architecture — content blocks arranged in deliberately unbalanced compositions that echo the asymmetric beauty of naturally grown trees and carefully placed garden stones. **Broken Grid Architecture:** - Base: 8-column grid with content spanning 3-5 columns - Blocks positioned at varying column starts (col 1, col 2, col 4) - Vertical spacing varies dramatically (40-120px) - Feature content breaks grid with full-width moment - Container: max-width: 1000px centered - The asymmetry mirrors natural tree growth patterns **Section Sequence:** 1. **Roots:** Hero with rounded-sans title on terracotta-warm gradient, line-illustration tree root drawings, aurora-lights subtle earth-glow effects 2. **Branches:** Business offerings in broken-grid layout — morph interactive cards that shift shape on hover with line-illustration branch graphics 3. **Canopy:** Featured services as expanded broken-grid section with aurora-lights canopy glow and line-illustration leaf details 4. **Rings:** Growth/history section in concentric broken-grid composition with line-illustration tree-ring patterns 5. **Soil:** Footer as earth foundation — mysterious-moody closing with aurora-lights underground glow and root system sign-off ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2rem-2.8rem, weight 700. Its soft, approachable forms mirror the organic roundness of tree crowns and river stones. - **Body Text:** "Noto Sans" (Google Fonts) — universal sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Noto Serif" (Google Fonts) — serif at 1rem, weight 400, italic for contemplative passages and tree wisdom quotes. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Earth Dark:** #1a1410 — deep earth brown-black for dark sections - **Clay Surface:** #2a201a — warm clay for panels - **Terracotta:** #c07048 — warm terracotta for primary accent - **Moss Green:** #688850 — natural moss green for secondary accent - **Sand Warm:** #d8b888 — warm sand for tertiary accent - **Bark Light:** #f0e4d0 — light bark-cream for backgrounds - **Stone Gray:** #a09080 — warm stone for secondary text - **Border Root:** #c8b098 — root-colored warm border ## Imagery and Motifs **Line-Illustration Tree Anatomy:** Business concepts illustrated through tree anatomy — SVG line drawings (40-64px) of roots, branches, leaves, rings, and bark textures in Terracotta and Moss Green. Thin strokes (1.5px) with no fill. Each illustration connects business concepts to tree growth — branches as diversification, roots as foundation, rings as experience. **Morph Shape Transitions:** Cards and content blocks smoothly change shape on hover — border-radius transitions from 8px to 20px (or from rounded to more organic) over 400ms with ease-in-out timing. The morphing suggests the organic growth and adaptive shaping of trees responding to their environment. **Aurora-Lights Earth Glow:** Soft glowing spots in warm earth tones — radial-gradient(at var(--x) var(--y), rgba(192,112,72,0.04), transparent 50%) layered with Moss Green glows (rgba(104,136,80,0.03)). The aurora effect suggests the subtle energy flowing through earth and root systems, visible only in contemplative stillness. **Terracotta-Warm Earth Atmosphere:** Backgrounds use layered warm earth tones — linear-gradient(180deg, #f0e4d0, rgba(216,184,136,0.3)) for light sections, Earth Dark with warm radial highlights for dark sections. The palette connects every surface to natural earth materials. **Broken-Grid Natural Spacing:** Content blocks separated by intentionally irregular spacing — sections breathe with 80-120px gaps punctuated by small line-illustration accents (SVG leaves, 12px, at 0.1 opacity). The irregular rhythm mirrors the natural spacing of branches on a tree. ## Prompts for Implementation Build the page as a zen tree-business garden. Broken grid: display: grid, grid-template-columns: repeat(8, 1fr), gap: 20px. Content blocks: grid-column: var(--col-start, 1) / span var(--col-span, 5). Container: max-width: 1000px, margin: 0 auto, padding: 60px 24px. Morph: .tree-card { border-radius: 8px; transition: border-radius 400ms ease-in-out; } .tree-card:hover { border-radius: 20px; } Aurora earth glow: .earth-glow { position: absolute; inset: 0; background: radial-gradient(at 30% 50%, rgba(192,112,72,0.04), transparent 50%), radial-gradient(at 70% 40%, rgba(104,136,80,0.03), transparent 50%); pointer-events: none; } Line illustrations: SVG with stroke: #c07048 or #688850, stroke-width: 1.5, fill: none. Organic path curves suggesting hand-drawn quality. Natural spacing: .section { margin-bottom: var(--gap, 80px); } .section:nth-child(odd) { --gap: 120px; } .section:nth-child(even) { --gap: 80px; } AVOID: Corporate business platforms, tech-forward startup sites, and aggressive growth-hack layouts. Let zen contemplation and mysterious-moody atmosphere create a business platform where growth feels as natural and patient as a tree adding another ring. ## Uniqueness Notes 1. **Zen for tree-themed business:** Contemplative garden design frames business activities as natural growth processes requiring patience and rootedness. 2. **Broken-grid as natural growth:** Asymmetric compositions mirror the organic, unpredictable patterns of real tree branch distribution. 3. **Morph as adaptive growth:** Shape-shifting interactions suggest the way trees organically adapt their forms to environmental conditions. 4. **Line-illustration as tree anatomy:** Botanical drawings create visual metaphors connecting business concepts to tree growth stages. 5. **Aurora-lights as earth energy:** Subtle glowing spots suggest the unseen energy flowing through root systems beneath the visible surface. **Seed/Style:** aesthetic: zen, layout: broken-grid, typography: rounded-sans, palette: terracotta-warm, patterns: morph, imagery: line-illustration, motifs: aurora-lights, tone: mysterious-moody **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 zen aesthetic, broken-grid layout, terracotta-warm palette, line-illustration imagery, and mysterious-moody tone.