# Design Language for namu.works ## Aesthetics and Tone namu.works (Namu — 나무(木), Korean for "tree") channels a glitch aesthetic — the beautiful corruption of digital systems and the art found in technological failure, applied to a tree-themed works and portfolio platform. The site disrupts expectations — clean content interrupted by controlled visual glitches, smooth surfaces broken by data artifacts, and the understanding that trees themselves are nature's own glitch artists — growing around obstacles, splitting concrete, and corrupting human systems with persistent organic force. Inspiration draws from the digital art of Rosa Menkman, the corrupted beauty of Ryoji Ikeda's data sculptures, the pixel-disruption art of Daniel Temkin, and the biological persistence captured in the photography of Michael Grab. The tone is grounded-earthy — practical, soil-deep language that connects digital disruption to the raw force of roots breaking through pavement. ## Layout Motifs and Structure The layout uses a **minimal-navigation** architecture — content with almost no visible navigation chrome, forcing users to explore the works through direct content interaction rather than menu systems. **Minimal Navigation Architecture:** - No visible navigation bar — replaced by subtle edge indicators - Content sections accessed through scroll and inline links - Small floating indicator (current section) at viewport edge - Full-width content sections with no distracting UI chrome - Container: max-width: 960px centered - The minimal navigation forces direct engagement with the work **Section Sequence:** 1. **Fracture:** Hero with grotesque-neo title glitching across high-contrast gradient, generative-art digital-organic pattern, cultural tree-in-code motif 2. **Works:** Portfolio in full-width sections — pulse-attention interactive highlights with generative-art hybrid visuals 3. **Process:** Work methodology in minimal-nav flow with cultural references to tree growth as creative process 4. **Roots:** Foundation/skills section with generative-art root-network visualizations and glitch texture treatments 5. **Undergrowth:** Footer as forest floor — grounded-earthy closing with cultural organic-digital fusion and generative-art sign-off ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) — neo-grotesque geometric sans at 2.5rem-3.5rem, weight 700. Its clean technical quality creates maximum contrast when disrupted by glitch effects. - **Body Text:** "IBM Plex Sans" (Google Fonts) — humanist technical sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "IBM Plex Mono" (Google Fonts) — monospace at 0.85rem for code/system references. - **Labels:** "Space Grotesk" at 0.7rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Void Black:** #080808 — pure deep black for backgrounds - **Disruption Dark:** #121214 — slight purple-tint dark for panels - **Glitch Cyan:** #00e8d0 — vivid cyan for primary accent (glitch highlight) - **Glitch Magenta:** #e800a0 — vivid magenta for secondary accent (glitch complement) - **Static White:** #e8e8e8 — clean white for primary text - **Noise Gray:** #484850 — noise-static gray for secondary text - **Signal Green:** #40c848 — signal/terminal green for tertiary accent - **Border Glitch:** rgba(0,232,208,0.12) — glitchy cyan border ## Imagery and Motifs **Generative-Art Organic-Digital Patterns:** Portfolio backgrounds feature generative patterns — CSS-generated compositions using multiple layered gradients and repeating patterns that suggest both tree ring growth patterns and digital data streams. Concentric circles (tree rings) intersected by horizontal scan lines (digital artifacts) in Glitch Cyan and Glitch Magenta at 0.03-0.05 opacity. **Pulse-Attention Work Highlights:** Featured works pulse to attract attention — a slow, breathing animation: @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,232,208,0); } 50% { box-shadow: 0 0 20px 4px rgba(0,232,208,0.08); } } over 3s infinite. The pulse suggests the living, breathing quality of both trees and active digital systems. **Cultural Tree-in-Code Motifs:** Small cultural references (SVG, 16-32px) combining tree imagery with digital symbols — a tree icon rendered in pixel-grid style, branch patterns that resolve into circuit traces, root networks that mirror network topology diagrams. Glitch Cyan at 0.08-0.12 opacity. The hybrid motifs embody the platform's core theme of organic-digital intersection. **High-Contrast Glitch Drama:** Backgrounds use extreme black with vivid accent punctuation — Glitch Cyan and Glitch Magenta appear only in thin lines, small accents, and glitch moments against Void Black. The high contrast creates the dramatic visual language of terminal interfaces and corrupted data streams. **Glitch Text Treatment:** Headings occasionally feature glitch styling — text-shadow: 2px 0 rgba(0,232,208,0.3), -2px 0 rgba(232,0,160,0.3) creating RGB-split effect. Applied sparingly (hero, section heads only) for maximum impact without readability degradation. ## Prompts for Implementation Build the page as a glitch tree-works portfolio. Minimal nav: no fixed header, use .section-indicator { position: fixed; right: 16px; top: 50%; width: 3px; height: 20px; background: rgba(0,232,208,0.2); border-radius: 2px; } Pulse: .featured-work { animation: pulse 3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,232,208,0); } 50% { box-shadow: 0 0 20px 4px rgba(0,232,208,0.08); } } Glitch text: .glitch-title { text-shadow: 2px 0 rgba(0,232,208,0.3), -2px 0 rgba(232,0,160,0.3); } Generative patterns: .organic-digital { background: repeating-radial-gradient(circle, transparent, transparent 40px, rgba(0,232,208,0.02) 41px, transparent 42px), repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(232,0,160,0.01) 4px, transparent 5px); } Container: max-width: 960px, margin: 0 auto, padding: 60px 24px. Sections: full-width with inner container. AVOID: Clean portfolio platforms, polished showcase sites, and minimal work displays. Let glitch disruption and grounded-earthy authenticity create a works platform where tree-themed projects emerge through the cracks in digital reality. ## Uniqueness Notes 1. **Glitch for tree-works platform:** Digital corruption aesthetics mirror how trees disrupt human systems — growing through cracks, splitting pavement. 2. **Minimal-navigation as forced exploration:** Removing visible nav forces direct content engagement, mirroring how one explores a forest without signs. 3. **Pulse-attention as living breath:** Pulsing highlights give the portfolio the breathing, alive quality of both trees and active digital systems. 4. **Generative-art as organic-digital fusion:** Patterns combining tree rings with scan lines embody the platform's core organic-digital theme. 5. **Cultural tree-code motifs:** Hybrid icons where trees become circuits represent the conceptual intersection of natural and digital systems. **Seed/Style:** aesthetic: glitch, layout: minimal-navigation, typography: grotesque-neo, palette: high-contrast, patterns: pulse-attention, imagery: generative-art, motifs: cultural, tone: grounded-earthy **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 glitch aesthetic, minimal-navigation layout, high-contrast palette, generative-art imagery, and grounded-earthy tone.