# Design Language for namu.works ## Aesthetics and Tone namu.works ("namu" meaning "tree" in Korean) channels the visual DNA of a 1970s Tokyo urban planning office that somehow received a firmware update from 2087. The aesthetic is **retro-futuristic** in the truest sense -- not the chrome-and-fins Americana of Fallout, but the quieter, more cerebral retro-futurism of Syd Mead's city sketches, Kenzo Tange's Metabolist architecture proposals, and the muted CRT glow of early Tektronix oscilloscopes. Imagine a sepia-toned blueprint of a megastructure city where trees grow through elevated highways and data cables wrap around trunks like ivy. The site feels like opening a forgotten technical manual from a parallel 1978 where urban planners used isometric projection software running on wood-paneled terminals. The tone is **friendly** -- but friendly in the way a knowledgeable librarian at a specialized architecture archive is friendly: warm, genuinely helpful, slightly nerdy, eager to show you something interesting in the collection. There is no corporate polish, no startup hype. The friendliness comes through in the gentle pacing of information, the approachable scale of typography, and small moments of delight -- a counter ticking up, an isometric building assembling itself piece by piece, a tree graphic that grows a new branch when you hover. The emotional register sits at the intersection of nostalgia and optimism: the sepia warmth of analog technology married to the forward-looking ambition of city-scale design. It is a place where old blueprints dream of forests. ## Layout Motifs and Structure The layout follows a **layered-depth** architecture -- a z-axis composition where visual elements exist on distinct depth planes, creating a diorama-like spatial quality. Unlike flat card grids or simple scrolling columns, every viewport presents information as if arranged on transparent glass panes stacked in front of a distant backdrop. **The Depth Stack:** Three persistent depth layers define the spatial model: 1. **Background Plane (z: -3):** A slowly drifting isometric city grid rendered in faded sepia lines (#C4A97D at 20% opacity). This grid is purely decorative and scrolls at 0.15x the scroll speed, creating a deep parallax basement. The grid lines are 1px, spaced at 48px intervals, drawn at 30-degree isometric angles. At wide viewports (>1200px), occasional isometric building outlines (simple extruded rectangles, no fill, just stroked paths) appear at random grid intersections, fading in and out on a 12-second CSS animation cycle. 2. **Content Plane (z: 0):** The primary information layer. Content is organized in a **staggered two-column layout** on desktop (55% left / 40% right, with a 5% gutter) where the right column is offset vertically by approximately 120px, creating a descending-staircase rhythm. On mobile, this collapses to a single column but retains alternating left/right alignment of content blocks (via alternating padding-left and padding-right of 8%), preserving the staggered feel. Each content block is a "card" with a subtle 1px border in #8B7355 and a 2px left-edge accent in #D4A257 (amber). Cards have a faint warm shadow (0 4px 24px rgba(139, 115, 85, 0.12)) suggesting they float slightly above the background grid. 3. **Overlay Plane (z: +2):** Sparse foreground elements -- navigation labels, floating counter-animate numbers, and small isometric icon indicators -- that sit on top of content. These use a slightly brighter value and stronger opacity than content-plane elements, reinforcing the depth illusion. The navigation bar is not a traditional sticky header but a set of 4-5 short labels positioned in a vertical column along the left viewport edge (left: 24px, top: 50%, transform: translateY(-50%)), each label rotated -90 degrees, acting as section waypoints. Active section label is highlighted with #D4A257 amber underline (drawn on with a 0.3s CSS transition). **Structural Rhythm:** Sections are separated not by horizontal rules or background color changes but by **depth transitions** -- moments where the background grid density increases (lines at 24px instead of 48px) and the content cards shift their shadow depth (from 4px to 12px blur), creating the sensation of "moving closer" to the content. Each section transition occupies approximately 80px of vertical scroll space and is triggered at the section boundary. The overall page is long-scroll (5-7 full viewport heights) but never feels like an infinite feed because the layered depth provides constant spatial orientation. You always know where you are in the stack. ## Typography and Palette **Typography:** - **Primary / Body and UI Text:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface designed for technical readability with a warm, slightly rounded character that softens the typical coldness of monospace fonts. Used at 1rem (16px) for body text, 0.875rem for captions and metadata. Line-height: 1.7 for body, 1.4 for UI elements. The monospace grid aligns naturally with the isometric grid background, creating a subliminal cohesion between text and spatial structure. Color: #3D3225 (dark umber) on light backgrounds. - **Headlines / Section Titles:** "Space Mono" (Google Fonts) -- a monospaced display font with a more geometric, assertive character than Share Tech Mono. Used at 2.5rem-4rem for section headings, weight 700 (Bold). Letter-spacing: 0.08em. All section titles are set in uppercase, which at these sizes creates the visual effect of embossed labels on equipment panels. Color: #5C4A32 (deep sepia brown). Headlines include a decorative prefix of "//—" (two slashes, em-dash) rendered in #D4A257 (amber) at the same font size, evoking commented-out code or technical notation. - **Accent / Counters and Data:** "IBM Plex Mono" (Google Fonts) -- used exclusively for numerical displays, counters, and data-like content. Weight 400 at 1.25rem-3rem. This font's more industrial, IBM-heritage character distinguishes data from narrative text, reinforcing the retro-technical theme. Color: #D4A257 (amber) for active counters, #8B7355 (muted bronze) for static numbers. **Palette:** The palette is **sepia-nostalgic** -- a warm, desaturated spectrum that evokes aged paper, amber instrument displays, and oxidized copper. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background | Parchment Cream | #F5EFE0 | Primary page background; the color of 50-year-old drafting paper | | Surface | Warm Linen | #EDE4D0 | Card backgrounds, elevated surfaces; slightly darker than page | | Primary Text | Dark Umber | #3D3225 | Main body text; rich dark brown instead of black | | Heading Text | Deep Sepia | #5C4A32 | Headlines and section titles; slightly warmer and lighter than body | | Accent Primary | Blueprint Amber | #D4A257 | Interactive elements, counters, active states, highlights | | Accent Secondary | Patina Bronze | #8B7355 | Borders, secondary text, muted UI elements | | Depth Grid | Faded Khaki | #C4A97D | Background isometric grid lines at low opacity | | Highlight | Warm Terracotta | #B8734A | Hover states, emphasis markers, link hover | | Shadow | Deep Walnut | #2A1F14 | Used only in shadows and deepest overlays at low opacity | All colors pass contrast requirements against their intended backgrounds. The palette contains zero pure grays -- every "neutral" is a warm brown variant, maintaining the sepia atmosphere across all UI states. ## Imagery and Motifs **Isometric Icon System:** The primary visual language is **isometric-icons** -- a library of small (48px-96px) isometric illustrations rendered in a consistent 30-degree projection. Every icon is constructed from simple geometric volumes (cubes, cylinders, wedges) using only the palette colors as flat fills with a single shade direction (top-right light source). No gradients, no shadows beyond a 1px darker edge on the shadow-facing planes. Icon subjects are drawn from a **city-urban** vocabulary: 1. **Urban Infrastructure:** Isometric buildings -- not generic skyscrapers but specific types: a water tower with visible tank ribs, a brutalist parking structure with visible ramp spirals, a rooftop greenhouse with transparent walls showing green interior, a telecommunications tower with radial antenna arrays, a subway entrance with descending stairs. 2. **Tree-City Hybrids:** The signature motif -- isometric trees growing through, around, or on top of urban structures. A tree whose trunk is a concrete column. A building whose upper floors are replaced by a canopy. Roots that lift and crack a sidewalk tile. These hybrids are the visual thesis of "namu.works" and appear at section transitions and as decorative anchors. 3. **Technical Instruments:** Isometric representations of retro-futuristic tools: an oscilloscope showing a sine wave, a plotting table with an articulated arm, a rack-mounted server with visible blinking LEDs (animated: the LED is a 4px circle that alternates between #D4A257 and #8B7355 on a 1.5s interval), a drafting compass. **Motif Patterns:** - **City-Urban Skyline Strip:** A horizontal band of isometric city silhouettes (building outlines only, 1px stroke in #C4A97D) runs as a repeating decorative border between major sections. The strip is 64px tall and scrolls horizontally at a very slow rate (0.05x scroll speed), creating a subtle ticker-tape effect of city passing by. - **Tree Growth Motif:** At the very bottom of the page, a single isometric tree begins as a sapling (small trunk, 2 leaves) and, as the user scrolls through the page, grows progressively -- tracked via scroll position -- until at page bottom it is a full mature tree with a wide canopy overarching the final section. This is achieved with 6-8 SVG states swapped or interpolated via scroll-linked CSS transitions. - **Blueprint Grid Overlay:** A subtle 1px grid at 30-degree angles overlays the entire page at 5-8% opacity, giving every surface a slight technical-drawing quality. This grid is a fixed background-image (CSS repeating-linear-gradient at 30deg and 150deg, spaced 48px apart). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport parchment (#F5EFE0) field. The isometric grid fades in over 0.8 seconds (opacity 0 to 0.08). After a 0.3s pause, the site title "NAMU.WORKS" appears center-screen in Space Mono 700 at 5rem, letter-spacing 0.12em, color #5C4A32, with each character appearing sequentially left-to-right at 60ms intervals (a restrained typewriter-effect, not a blinking cursor -- just opacity: 0 to 1 per character via staggered animation-delay). Below the title, after all characters have appeared, a subtitle fades in over 0.5s: "where trees meet infrastructure" in Share Tech Mono at 1.25rem, color #8B7355, letter-spacing 0.06em. Simultaneously with the subtitle, two isometric elements assemble themselves in the lower-left and upper-right quadrants of the viewport: a small isometric tree-building hybrid on the left (SVG path-draw animation, 1.2s, ease-out) and an isometric oscilloscope on the right (same technique). These anchor illustrations establish the retro-futuristic city-nature vocabulary before any scrolling occurs. **Counter-Animate Data Moments:** At two points in the scroll narrative, numerical data is presented using the **counter-animate** pattern. Each number starts at 0 and counts up to its target value over 2 seconds with an ease-out curve, triggered when the element enters the viewport. Numbers are displayed in IBM Plex Mono at 3rem, color #D4A257, with a small Share Tech Mono label beneath in #8B7355. The counters do not have surrounding card chrome -- they float directly on the content plane with generous whitespace (minimum 48px padding on all sides), letting the animated number itself be the focal point. Counter subjects should relate to the namu.works theme: "trees planted," "structures designed," "blueprints archived," or similar. **Scroll-Linked Tree Growth:** A persistent SVG element, positioned fixed at the bottom-right corner of the viewport (right: 32px, bottom: 32px, width: 120px), depicts the growing tree. Its growth state is mapped to document scroll percentage: 0-20% scroll = bare trunk, 20-40% = first branches, 40-60% = small leaves appear, 60-80% = full branch structure, 80-100% = complete canopy with a small isometric building visible at the base. Each state transition uses a CSS transition (opacity crossfade between SVG layers, 0.6s ease). This element acts as a passive progress indicator and a persistent visual delight. **Section Transitions:** Between each major content section, a 80px-tall zone contains the city skyline strip motif. As this zone enters the viewport, the isometric buildings in the strip perform a subtle "rise" animation (translateY from 8px to 0, opacity 0.3 to 0.7, staggered by 0.1s per building, 0.5s total duration). This creates a gentle pulse of urban life between content zones. **Navigation Interaction:** The vertical sidebar navigation labels (rotated -90deg, left edge) respond to hover with a quiet amber underline that draws itself from left to right (width: 0 to 100%, 0.3s, ease-out, border-bottom in #D4A257). Clicking a label smooth-scrolls to the target section. The active label is always underlined; inactive labels show the underline only on hover. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images with stock photography, dark mode, neon color accents, card-flip animations, modal popups. The experience is a continuous, unhurried scroll through a layered urban-botanical world. **Bias:** Full-screen narrative. Let the story breathe. Every viewport should feel like a page in a beautifully illustrated technical manual -- information-dense but never cluttered, warm but precise. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Retro-Futuristic Aesthetic (4% frequency):** While most designs cluster around playful (95%), editorial (25%), or corporate (30%) aesthetics, namu.works commits to retro-futuristic -- a category with only 4% representation. The specific variant here (1970s Japanese Metabolist architecture + analog instrumentation) is entirely unrepresented in existing designs, which tend toward either chrome-heavy Western retro-futurism or generic sci-fi. This is warm retro-futurism, sepia-toned and botanical, not cold and metallic. 2. **Isometric-Icons Imagery (1% frequency):** Only 1% of existing designs use isometric-icons as their primary imagery strategy. Most designs rely on minimal (94%) or photography (74%) imagery. The fully developed isometric icon system -- with its specific city-urban vocabulary of tree-building hybrids, retro instruments, and infrastructure elements -- creates a visual language that has no parallel in the current portfolio. 3. **Counter-Animate Pattern (2% frequency):** While 97% of designs use scroll-triggered animations and 77% use parallax, only 2% employ counter-animate as a featured pattern. Here, counter-animate is not a gimmick but a thematic device: numbers counting up evoke the slow accumulation of urban growth, trees adding rings, cities adding floors. The pattern is used sparingly (only 2 instances) to preserve its impact. 4. **City-Urban Motifs (1% frequency):** The city-urban motif category sits at just 1% frequency. Nearly all designs default to vintage (85%) or nature (30%) motifs. namu.works fuses both -- urban infrastructure and natural growth -- into a single coherent motif language where neither dominates. The tree-building hybrid icons are the specific visual innovation that makes this fusion concrete rather than conceptual. 5. **Layered-Depth Layout (7% frequency):** Most designs use centered (99%) or asymmetric (51%) layouts. The layered-depth approach -- with its three explicit z-planes (background grid, content cards, overlay navigation) and scroll-linked depth transitions -- creates a spatial experience that is fundamentally different from the flat, single-plane composition of typical web layouts. The staggered two-column structure on the content plane adds lateral variety within the depth model. 6. **All-Warm-Brown Palette with Zero Grays:** The sepia-nostalgic palette (6% frequency) is deployed here without any gray values at all. Every neutral, shadow, and muted tone is a brown variant (#2A1F14, #3D3225, #5C4A32, #8B7355). This total commitment to the sepia spectrum creates an atmosphere that is materially different from the cool-warm mixes that dominate the portfolio. **Chosen seed / style:** - aesthetic: retro-futuristic - layout: layered-depth - typography: tech-mono - palette: sepia-nostalgic - patterns: counter-animate - imagery: isometric-icons - motifs: city-urban - tone: friendly **Patterns avoided from frequency analysis:** - playful aesthetic (95% -- overrepresented) - centered layout (99% -- universal default) - scroll-triggered as primary pattern (97% -- used only as secondary mechanism, not featured) - minimal imagery (94% -- replaced with specific isometric icon system) - vintage motifs (85% -- replaced with city-urban, which is thematically adjacent but visually distinct) - warm palette (100% -- while the palette is technically warm, it is sepia-nostalgic specifically, a 6% subcategory, not the generic warm default)