# Design Language for namu.style ## Aesthetics and Tone namu.style (Namu — 나무(木), Korean for "tree") channels a muji aesthetic — the pure, unadorned beauty of essential forms where the material itself becomes the decoration, applied to a tree-themed style and design inspiration platform. The site is a gallery of natural material — wood grains, stone surfaces, and the understanding that trees themselves are the ultimate style reference. Inspiration draws from Muji's material-first philosophy, the timber architecture of Kengo Kuma, the natural palette of Aesop's retail spaces, and the refined simplicity of Japanese joinery where no nails are needed because the form is perfect. The tone is mysterious-moody — atmospheric, shadow-rich language that treats style as an ancient force expressed through natural forms. ## Layout Motifs and Structure The layout uses a **hexagonal-honeycomb** architecture — content organized in hexagonal cells that mirror the molecular structure of wood and the geometric efficiency found in nature's own designs. **Hexagonal Honeycomb Architecture:** - Hexagonal grid using CSS clip-path: polygon() for hex shapes - Desktop: 3 hex columns with offset rows - Each hex cell: approximately 280px wide - Feature hexes span 2 cells for prominent style showcases - Container: max-width: 1000px centered - The hexagonal pattern references wood cell structure under microscope **Section Sequence:** 1. **Grain:** Hero with playfair-elegant title on burgundy-cream gradient, marble-texture wood-grain surface treatment, abstract-tech geometric wood cell overlays 2. **Patterns:** Style patterns in hexagonal grid — counter-animate interactive cells with marble-texture material showcases 3. **Material:** Featured materials in expanded hexagonal displays with abstract-tech molecular structure graphics 4. **Craft:** Style techniques in honeycomb arrangement with marble-texture finish samples and abstract-tech construction diagrams 5. **Patina:** Footer as aged finish — mysterious-moody closing with marble-texture dark wood grain and abstract-tech geometric sign-off ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) — elegant high-contrast serif at 2.2rem-3rem, weight 700. Its refined authority creates the sophisticated, established quality of high-end material design. - **Body Text:** "Noto Sans" (Google Fonts) — universal sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Playfair Display" at 1.1rem, weight 400, italic for material descriptions and style commentary. - **Labels:** "Noto Sans" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Burgundy Deep:** #481828 — deep burgundy for dark sections - **Wine Surface:** #5c2838 — rich wine for panels - **Cream Warm:** #f4ece0 — warm cream for light backgrounds - **Parchment:** #e8dcc8 — parchment for card surfaces - **Gold Antique:** #b89848 — antique gold for primary accent - **Rose Dust:** #a07070 — dusty rose for secondary accent - **Text Burgundy:** #1a0c10 — deep burgundy-black for body text - **Border Wine:** rgba(92,40,56,0.15) — wine-tinted border ## Imagery and Motifs **Marble-Texture Material Surfaces:** Hex cells feature marble/wood-grain-like textures — layered CSS gradients: repeating-linear-gradient with slight color variations at varied angles (30deg, 75deg, 150deg) in Cream Warm and Parchment shades creating the organic striping of natural materials. Each hex cell appears as a cross-section of a different wood or stone. **Counter-Animate Material Counts:** Style pattern statistics animate as counters — numbers increment from 0 to final value using CSS counter with @keyframes. Each hex displays a count (patterns, materials, techniques) that rolls into view over 800ms when the cell scrolls into viewport. The counting catalogues the depth of natural style vocabulary. **Abstract-Tech Wood Cell Graphics:** Thin geometric overlays (SVG, hexagonal wireframe fragments, 1px strokes in Gold Antique at 0.06 opacity) suggesting microscopic wood cell structure. The abstract-tech treatment reveals that natural style operates at multiple scales — from forest canopy down to cellular architecture. **Burgundy-Cream Warm Contrast:** The palette alternates between deep burgundy warmth and cream lightness — creating the rich contrast of dark heartwood against light sapwood in a cross-cut log. Burgundy sections: background: #481828 with radial glow (rgba(184,152,72,0.03)). Cream sections: #f4ece0. **Hexagonal Tessellation:** The hex grid creates a continuous tessellation — cells fitting together without gaps, each one a different material sample. Thin borders between hexes (1px, Border Wine) define cells while maintaining the unified surface quality of a material board. ## Prompts for Implementation Build the page as a Muji style honeycomb. Hex grid: .hex-grid { display: flex; flex-wrap: wrap; justify-content: center; } .hex-cell { width: 280px; height: 242px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); margin: -30px 2px; } Counter-animate: .material-count { font-variant-numeric: tabular-nums; } .material-count.visible { animation: countUp 800ms ease-out forwards; } Marble texture: .wood-grain { background: repeating-linear-gradient(75deg, rgba(244,236,224,0.8), rgba(232,220,200,0.6) 2px, rgba(244,236,224,0.8) 4px); } Abstract-tech: .cell-overlay { position: absolute; inset: 0; opacity: 0.06; } .cell-overlay svg { stroke: #b89848; stroke-width: 1; fill: none; } Burgundy atmosphere: .dark-section { background: #481828; color: #f4ece0; } .dark-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 50% 50%, rgba(184,152,72,0.03), transparent 60%); } AVOID: Fashion-forward style platforms, trend-chasing design sites, and fast-fashion marketplace aesthetics. Let Muji material truth and mysterious-moody atmosphere create a style platform where tree-inspired design feels as timeless as the heartwood of a centuries-old oak. ## Uniqueness Notes 1. **Muji for tree-style platform:** Material-first philosophy reveals that trees themselves are the original style reference — no embellishment needed. 2. **Hexagonal-honeycomb as wood cells:** Hex grid mirrors the cellular structure of wood, connecting visual design to natural microscopic architecture. 3. **Counter-animate as material cataloging:** Rolling numbers convey the vast depth of natural style vocabulary waiting to be explored. 4. **Marble-texture as material samples:** Surface textures transform each hex cell into a cross-section of different natural materials. 5. **Burgundy-cream as heartwood/sapwood:** Color contrast references the natural tonal variation found in cross-cut tree wood. **Seed/Style:** aesthetic: muji, layout: hexagonal-honeycomb, typography: playfair-elegant, palette: burgundy-cream, patterns: counter-animate, imagery: marble-texture, motifs: abstract-tech, 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 muji aesthetic, hexagonal-honeycomb layout, burgundy-cream palette, marble-texture imagery, and mysterious-moody tone.