# Design Language for namu.club ## Aesthetics and Tone namu.club (Namu — 나무(木), Korean for "tree") channels a grainy-textured aesthetic — the warm, tactile quality of film photography and risograph printing applied to a tree-themed community club platform. The site feels printed — every surface carries the organic grain of handmade paper, the speckled warmth of vintage photographs, and the imperfect beauty of ink that bleeds slightly beyond its intended edges. Inspiration draws from the textured editorial design of Apartamento magazine, the grainy photography of Wolfgang Tillmans, the risograph art of Hato Press, and the analog warmth of Polaroid instant photography. The tone is conversational — casual, friendly language that makes the tree club feel like chatting with a knowledgeable neighbor over a garden fence. ## Layout Motifs and Structure The layout uses a **timeline-vertical** architecture — content arranged chronologically along a vertical axis, mirroring the upward growth of a tree through seasons and years. **Timeline Vertical Architecture:** - Central vertical line (2px, muted vintage) as timeline spine - Content blocks alternate left/right of the timeline - Date/season markers along the spine - Each block connects to timeline via horizontal connector (1px line) - Container: max-width: 900px centered - The timeline grows like a tree trunk through the page **Section Sequence:** 1. **Seedling:** Hero with garamond-classic title on muted-vintage gradient, marble-texture grainy surface treatments, floral-botanical seed and sprout illustrations 2. **Growth:** Club history along timeline — spring-animated nodes that bounce into view with marble-texture grainy card surfaces 3. **Canopy:** Current activities branching from timeline with floral-botanical leaf and branch decorations 4. **Harvest:** Member achievements in timeline format with marble-texture award card surfaces and floral-botanical fruit illustrations 5. **Dormancy:** Footer as winter rest — conversational seasonal closing with floral-botanical bare branch motif and warm sign-off ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.2rem-3rem, weight 700. Its warm, scholarly authority creates the established, rooted quality of a long-standing tree club. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.75. - **Accent:** "EB Garamond" at 1.1rem, weight 400, italic for seasonal quotes and member stories. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Vintage Cream:** #f0e4d0 — warm vintage cream for backgrounds - **Aged Paper:** #e0d0b8 — aged paper tone for cards - **Muted Olive:** #708048 — muted olive green for primary accent - **Faded Rose:** #b07868 — faded vintage rose for secondary accent - **Amber Vintage:** #c09848 — warm amber for tertiary accent - **Text Sepia:** #302820 — warm sepia for body text - **Stone Muted:** #908070 — muted stone for secondary text - **Border Vintage:** #c8b498 — vintage warm border ## Imagery and Motifs **Marble-Texture Grainy Surfaces:** Cards and panels feature grainy, marble-like texture — CSS background using layered gradients with soft color variation (rgba(112,128,72,0.03), rgba(176,120,104,0.02)) plus SVG noise filter (feTurbulence at 0.02 frequency) at 0.04 opacity. The grain gives every surface the tactile quality of handmade paper or vintage photographic prints. **Spring-Animated Timeline Nodes:** Timeline connection points (12px circles on the spine) bounce into view on scroll — animation using CSS spring-like easing: transform: scale(0) to scale(1) with overshoot (scale(1.2) at 80%, scale(1) at 100%) over 400ms. The spring bounce suggests the irrepressible energy of new growth in spring. **Floral-Botanical Tree Illustrations:** Club activities illustrated through botanical tree art — SVG line drawings (36-60px) of leaves, flowers, fruit, branches, and roots in Muted Olive and Faded Rose. Thin strokes (1.5px) with no fill, slight path irregularities for hand-drawn quality. Each illustration represents a season in the tree's annual cycle. **Muted-Vintage Film Atmosphere:** Color treatment across the site uses muted, slightly desaturated tones — as if viewed through vintage film stock. All accent colors appear at 80% saturation maximum. Backgrounds carry warm undertones (rgba(192,152,72,0.02)) suggesting the yellowing of aged photographs. **Timeline Spine Growth:** The central timeline line uses a gradient that transitions from root brown (Text Sepia at 0.2 opacity) at the bottom to leaf green (Muted Olive at 0.2 opacity) at the top, visually representing growth from soil to canopy. ## Prompts for Implementation Build the page as a grainy tree-club timeline. Timeline: .timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 60px 24px; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to top, rgba(48,40,32,0.2), rgba(112,128,72,0.2)); } Timeline blocks: .timeline-block { width: 45%; } .timeline-block:nth-child(odd) { margin-left: 5%; } .timeline-block:nth-child(even) { margin-left: 50%; } Spring-animate: .timeline-node { transform: scale(0); } .timeline-node.visible { animation: springIn 400ms ease-out forwards; } @keyframes springIn { 0% { transform: scale(0); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } } Grainy texture: .vintage-card { background: #e0d0b8; position: relative; } .vintage-card::after { content: ''; position: absolute; inset: 0; opacity: 0.04; background: url("data:image/svg+xml,..."); /* SVG noise */ } Floral illustrations: SVG with stroke: #708048 or #b07868, stroke-width: 1.5, fill: none. AVOID: Modern tech club platforms, corporate community sites, and digital-first social layouts. Let grainy-textured warmth and conversational friendliness create a tree club where membership feels like joining a centuries-old tradition of people who care about growing things. ## Uniqueness Notes 1. **Grainy-textured for tree club:** Film-grain and print textures give the digital platform the tactile warmth of a community scrapbook. 2. **Timeline-vertical as tree growth:** Chronological vertical flow mirrors the upward growth of a tree through seasons and years. 3. **Spring-animated as new growth:** Bouncing timeline nodes capture the irrepressible energy of spring sprouts and new beginnings. 4. **Floral-botanical as seasonal cycle:** Tree illustrations map club activities to the annual cycle of growth, flowering, fruit, and rest. 5. **Muted-vintage as aged warmth:** Desaturated, film-stock color treatment suggests the long history and established tradition of the club. **Seed/Style:** aesthetic: grainy-textured, layout: timeline-vertical, typography: garamond-classic, palette: muted-vintage, patterns: spring, imagery: marble-texture, motifs: floral-botanical, tone: conversational **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 grainy-textured aesthetic, timeline-vertical layout, muted-vintage palette, marble-texture imagery, and conversational tone.