# Design Language for namu.day ## Aesthetics and Tone namu.day (Namu — 나무(木), Korean for "tree") channels a scandinavian aesthetic — the clean, light-filled functionality of Nordic design applied to a daily tree appreciation and nature connection platform. The site carries the clarity of a Nordic morning — white surfaces that reflect maximum light, functional elegance in every element, and the understanding that nature is not decoration but the fundamental framework of daily life. Inspiration draws from the functional beauty of Alvar Aalto's furniture, the clean editorial design of Kinfolk magazine, the light-filled interiors of Norm Architects, and the considered simplicity of Hay Design. The tone is futuristic-cutting-edge — forward-looking language that positions daily tree connection as the next evolution in human-nature integration. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — content divided into two complementary halves, mirroring the dual nature of trees: roots below and canopy above, bark outside and heartwood within. **Split Screen Architecture:** - Desktop: display: grid, grid-template-columns: 1fr 1fr - Each half independent in scroll or fixed/scroll pairing - Left side: imagery/illustration. Right side: text content (alternating) - Full-width sections break the split for featured content - Container: max-width: 1100px centered - The split reflects the duality inherent in trees and nature **Section Sequence:** 1. **Daybreak:** Hero split — condensed title on left against complementary color, water-bubbles rain droplet illustration on right with wave-forms wind pattern 2. **Observe:** Daily tree observations in split layout — fade-reveal interactive text paired with water-bubbles nature illustrations 3. **Connect:** Tree species features in alternating split pairs with wave-forms growth pattern graphics 4. **Practice:** Daily practices in split layout — action steps on one side, water-bubbles atmospheric illustration on the other 5. **Nightfall:** Footer as day's end — futuristic-cutting-edge closing with wave-forms gentle oscillation and quiet sign-off ## Typography and Palette **Typography:** - **Headlines:** "Barlow Condensed" (Google Fonts) — condensed sans at 2.5rem-3.5rem, weight 700, uppercase. Its efficient, vertical proportion creates the tall, reaching quality of tree trunks. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Inter" at 1rem, weight 500 for daily observation highlights. - **Labels:** "Barlow Condensed" at 0.7rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Nordic White:** #f8f6f2 — clean Nordic white for backgrounds - **Birch Gray:** #e8e4dc — warm birch gray for secondary backgrounds - **Pine Deep:** #2a5040 — deep pine green as primary complement - **Sky Complement:** #5088a8 — cool sky blue as secondary complement - **Amber Complement:** #c08840 — warm amber as tertiary complement - **Text Nordic:** #181c18 — cool near-black for body text - **Mist:** #909888 — cool mist for secondary text - **Border Frost:** #d0ccc4 — frost-colored border ## Imagery and Motifs **Water-Bubbles Rain and Dew:** Nature moments illustrated through water — SVG circles (6-20px) with gradient fills simulating water droplets and bubbles. Clustered near content edges in Sky Complement and Pine Deep at 0.08-0.15 opacity. Some circles with thin borders (0.5px) suggesting surface tension. The water connects daily tree appreciation to the rain that sustains growth. **Fade-Reveal Daily Content:** Daily observation content fades in on scroll — opacity transitions from 0 to 1 over 500ms with slight vertical movement (translateY: 12px to 0). Different sections fade at staggered intervals, creating a sequential revealing like the gradual brightening of dawn. **Wave-Forms Growth Patterns:** Gentle sine-wave SVG patterns (stroke: 1px, Pine Deep at 0.06 opacity) running horizontally across section backgrounds. The waves suggest wind through branches, seasonal growth rhythms, and the oscillating patterns of natural systems. **Complementary Color Balance:** The split-screen format uses complementary color relationships — Pine Deep paired with warm amber accents, Sky Complement with warm grays. Each split half uses its complementary partner, creating visual harmony that mirrors the balanced ecosystems trees create. **Scandinavian Light Quality:** Backgrounds use maximum lightness with subtle warmth — Nordic White (barely warm) with very faint radial glows (rgba(192,136,64,0.02)) suggesting filtered sunlight through tree canopy. The light quality recreates a Nordic forest clearing on a bright morning. ## Prompts for Implementation Build the page as a Scandinavian tree-day platform. Split: display: grid, grid-template-columns: 1fr 1fr, gap: 0. Container: max-width: 1100px, margin: 0 auto. Fade-reveal: .daily-content { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; } .daily-content.visible { opacity: 1; transform: translateY(0); } Water bubbles: .water-drop { width: var(--size, 10px); height: var(--size, 10px); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(80,136,168,0.15), rgba(42,80,64,0.08)); position: absolute; } Wave forms: .wave-bg { background-image: url("data:image/svg+xml,..."); /* SVG sine wave */ background-repeat: repeat-x; background-size: 200px 20px; opacity: 0.06; } Split sections: .split-left { padding: 60px 40px 60px 24px; } .split-right { padding: 60px 24px 60px 40px; } @media (max-width: 768px) { .split-layout { grid-template-columns: 1fr; } } AVOID: Dense nature databases, complex botanical interfaces, and data-heavy environmental platforms. Let Scandinavian clarity and futuristic-cutting-edge optimism create a daily tree platform where connecting with nature feels as clean and essential as Nordic morning light. ## Uniqueness Notes 1. **Scandinavian for daily tree practice:** Nordic clarity and functionality make nature connection feel essential rather than decorative. 2. **Split-screen as natural duality:** Divided compositions reflect the inherent dualities in trees — root/canopy, bark/heartwood, sun/shade. 3. **Water-bubbles as rain connection:** Droplet illustrations connect daily appreciation to the water cycle that sustains all tree life. 4. **Fade-reveal as dawn progression:** Gradual content revealing recreates the sequential brightening of a morning in the forest. 5. **Complementary palette as ecosystem balance:** Color pairs mirror the balanced relationships that define healthy forest ecosystems. **Seed/Style:** aesthetic: scandinavian, layout: split-screen, typography: condensed, palette: complementary, patterns: fade-reveal, imagery: water-bubbles, motifs: wave-forms, tone: futuristic-cutting-edge **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 scandinavian aesthetic, split-screen layout, complementary palette, water-bubbles imagery, and futuristic-cutting-edge tone.