# Design Language for namu.style ## Aesthetics and Tone namu.style channels the wabi-sabi philosophy through the lens of a 1920s Parisian jeweler's atelier that has been reclaimed by forest growth -- imagine cracked art-deco display cases with emerald moss creeping through gold-leaf seams, sapphire brooches resting on weathered bark, and the geometric precision of jazz-age ornamentation slowly surrendering to organic entropy. The domain name "namu" (Korean for "tree") becomes the conceptual anchor: a living thing that grows through and around rigid structures, cracking them open to reveal something more honest beneath the polish. The tone is energetic but not frantic -- it carries the vitality of new growth pushing through old stone, the electric green of spring shoots against aged copper patina. There is motion here, but it is purposeful: the unstoppable slow-motion force of roots splitting marble. Every visual decision balances geometric precision (the art-deco heritage) against organic disruption (the wabi-sabi soul). Surfaces are never pristine -- they carry the patina of use, the hairline cracks of thermal cycling, the tarnish that proves something is real metal and not plastic. But this imperfection is celebrated with the full-throated confidence of a jazz trumpet solo: loud, alive, unapologetic. The emotional register oscillates between reverent stillness (the contemplation of a single cracked glaze) and kinetic exuberance (the burst of a seed pod scattering geometry into the wind). This duality is the design's heartbeat. ## Layout Motifs and Structure The layout is built on a **hexagonal-honeycomb** grid system -- not as a decorative overlay but as the fundamental spatial logic governing all content placement. The hexagonal grid references both the geometric precision of art-deco tilework and the organic efficiency of beehive architecture, a structure that nature has optimized over millions of years and that deco designers independently elevated to decorative canon. **Honeycomb Grid Implementation:** - **Base Grid:** The viewport is divided into a honeycomb tessellation of hexagonal cells. On desktop, approximately 5-6 columns of hexagons span the viewport width. Each hexagon is defined by `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)` applied to content containers. The grid uses CSS Grid with alternating row offsets (odd rows shifted right by half a cell width) to achieve true honeycomb packing. - **Broken Honeycomb:** Not every cell is filled. The grid is deliberately incomplete -- some cells are empty voids (negative space that breathes), some contain content, and some are partially collapsed or cracked, their hexagonal borders rendered with irregular SVG strokes that suggest erosion. This broken-honeycomb pattern prevents the layout from feeling like a rigid dashboard and injects the wabi-sabi imperfection into the geometric skeleton. - **Scale Variation:** Hexagonal cells exist at three scales: micro (icon/accent size, ~80px across), standard (content cards, ~280px across), and macro (full-section dominance, spanning 3-4 standard cells merged into one irregular super-hexagon). The macro cells serve as focal points -- they hold primary imagery or headline text and break the grid's rhythm to create visual weight. - **Vertical Flow:** Content flows downward through the honeycomb in a cascading pattern, not left-to-right reading order. The eye is guided by color intensity and scale rather than by conventional text flow. Each "row" of the honeycomb is a self-contained compositional unit, but rows overlap and interlock through the hexagonal offset, creating a sense of continuous interconnection. - **Edge Dissolution:** At the viewport edges, hexagonal cells are cropped and fade, as though the honeycomb extends infinitely beyond the screen. This is achieved by allowing overflow-hidden to clip edge cells while applying opacity gradients to cells approaching the boundary. The effect suggests a vast structure of which we see only a fragment. - **Navigation:** There is no conventional navigation bar. Instead, a single hexagonal cell in the top-left corner pulses gently (a subtle scale oscillation between 1.0 and 1.03 over 4 seconds) and serves as the sole interactive anchor. Tapping it triggers a radial expansion of navigation hexagons that bloom outward from the anchor point like crystalline growth, each cell containing a section label in art-deco display type. ## Typography and Palette **Typography:** - **Headlines / Display:** "Poiret One" (Google Fonts) -- a pure art-deco geometric display typeface with perfectly circular O's, uniform stroke weight, and the unmistakable DNA of 1920s Parisian poster design. Its skeletal elegance and extreme geometric precision make it the ideal voice for the deco half of this design's duality. Used at 3rem to 7rem for headlines, with `letter-spacing: 0.15em` and `text-transform: uppercase` to emphasize its architectural quality. The wide letter-spacing creates a sense of stately procession, each letter a column in a geometric colonnade. - **Body / Reading:** "Libre Baskerville" (Google Fonts) -- a refined transitional serif with generous x-height and elegant contrast between thick and thin strokes. Its warmth and readability ground the geometric display type with human-scale intimacy. Used at 1rem to 1.15rem with `line-height: 1.75` and `letter-spacing: 0.01em`. Paragraphs are set with `max-width: 38ch` to maintain optimal reading rhythm within the hexagonal containers. - **Accent / Labels:** "Space Mono" (Google Fonts) -- used exclusively for metadata, labels, and UI micro-copy at 0.75rem to 0.85rem. Its monospaced geometry echoes the hexagonal grid's mathematical precision. Set with `letter-spacing: 0.08em` and `text-transform: uppercase` for a technical, catalog-like quality. - **Typographic Detail:** Headlines in Poiret One are never rendered in a single solid color. Instead, they use a CSS `background-clip: text` technique with a gradient that shifts from deep emerald (#0B6E4F) to burnished gold (#C4A35A), creating the effect of patinated metal lettering catching light at different angles. The gradient direction varies per headline (some left-to-right, some diagonal) to prevent visual monotony. **Palette -- Jewel Tones with Wabi-Sabi Patina:** The palette draws from gemstones displayed in a tarnished art-deco vitrine -- intense, saturated hues muted slightly by age and wear, as though viewed through antique glass with a faint amber cast. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary | Deep Emerald | `#0B6E4F` | The forest pushing through -- rich, alive, dominant | | Secondary | Burnished Gold | `#C4A35A` | Art-deco metalwork tarnished to a warm brass | | Accent 1 | Sapphire Dusk | `#1B3A5C` | Deep twilight blue, the shadow inside a geode | | Accent 2 | Amethyst Haze | `#6B3FA0` | Purple crystal viewed through smoke | | Accent 3 | Ruby Ember | `#8B2252` | Garnet caught in candlelight, not neon red | | Background | Aged Ivory | `#F0E8D8` | Not white -- the warm, yellowed tone of century-old paper | | Surface Dark | Obsidian Warm | `#1A1A14` | Near-black with a warm olive undertone, like volcanic glass | | Neutral | Tarnished Silver | `#8A8A7A` | The grey-green of oxidized silver, for borders and dividers | **Color Application Rules:** - Backgrounds alternate between Aged Ivory (#F0E8D8) and Obsidian Warm (#1A1A14) per honeycomb section, creating a day/night rhythm as the user scrolls. - Jewel tones (#0B6E4F, #1B3A5C, #6B3FA0, #8B2252) are never used as flat fills. They always appear as gradients, overlays on textured surfaces, or through transparency effects that reveal grain beneath. - Gold (#C4A35A) is reserved exclusively for interactive elements and typographic accents -- it is the "click here" color, the signal of possibility. ## Imagery and Motifs **Line Illustration as Primary Visual Language:** All imagery is rendered as line illustration -- specifically, the style of early 20th-century botanical and architectural engravings, where every form is described entirely through lines of varying weight, with no solid fills. This technique bridges the design's two worlds: the precise draftsmanship of art-deco architectural drawings and the organic subject matter of wabi-sabi nature. **Illustration System:** - **Botanical Line Drawings:** Trees, branches, leaves, root systems, and bark textures rendered in single-weight SVG strokes (#1A1A14 on light backgrounds, #F0E8D8 on dark). The line weight is consistently 1.5px at standard viewport, scaling proportionally. These illustrations are never photorealistic -- they carry the stylization of ukiyo-e woodblock prints crossed with Alphonse Mucha's linear decorative style. Branches curve with art-nouveau fluidity but terminate in geometric, almost crystalline leaf forms that reference deco faceting. - **Architectural Fragments:** Partial line drawings of art-deco architectural elements -- chevron cornices, sunburst radiators, stepped facades, zigzag friezes -- rendered as incomplete fragments. A cornice appears with half its detail dissolved into scattered dots. A sunburst is missing several rays, replaced by organic branch-like forms growing into the gaps. These hybrid illustrations embody the design's core theme: geometric precision being reclaimed by organic growth. - **Crack-Pattern Overlays:** Thin SVG line networks that simulate the craquelure (crack patterns) of aged ceramic glaze or the crazing of old varnish. These are layered over content sections at very low opacity (0.08-0.12) as textural backgrounds. The crack patterns follow Voronoi tessellation mathematics, creating an organic cellular pattern that subtly echoes the hexagonal grid while breaking its perfection. - **Vintage Motifs Reimagined:** The vintage motif vocabulary includes art-deco fan shapes, radiating sunbursts, stepped pyramids, and chevron borders -- but each one is rendered with deliberate imperfection. Lines are not perfectly straight (achieved via SVG path perturbation with +-0.5px noise). Gold elements (#C4A35A) show simulated tarnish (darker spots achieved with radial gradient overlays). Geometric patterns have hairline gaps where lines fail to connect, as if the printing plate has worn. **Animation of Illustrations:** Line illustrations are not static. They are drawn progressively as the user scrolls into their viewport, using SVG `stroke-dasharray` and `stroke-dashoffset` animation. Each illustration takes 2.5-4 seconds to complete its drawing animation, with different elements of the same illustration starting at staggered intervals (branches draw first, then leaves unfurl, then decorative deco frames materialize around them). This progressive revelation transforms every illustration into a miniature performance. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a full-viewport Obsidian Warm (#1A1A14) screen. In the center, a single hexagonal frame (outlined in Burnished Gold at 1px weight) contains the domain name "namu.style" set in Poiret One at 5rem, uppercase, with the emerald-to-gold gradient text treatment. The hexagonal frame draws itself on load -- six lines meeting at six vertices over 1.8 seconds -- and the text fades from 0 to 1 opacity after the frame completes. Below the name, a single line in Libre Baskerville italic at 0.95rem reads a poetic subtitle. Nothing else. No navigation, no scroll indicator, no CTA. Silence and geometry. **Scroll Behavior:** As the user scrolls, the opening hexagon shrinks and migrates to the top-left corner (becoming the navigation anchor), and the honeycomb grid materializes from the center outward in a radial bloom animation. Hexagonal cells appear in concentric rings, each ring delayed by 120ms from the previous, creating a crystallization effect as though the page is growing from a seed point. Each cell fades in while simultaneously being clipped from a point-size to its full hexagonal shape. **Shake-Error Pattern as Signature Micro-Interaction:** The shake-error animation pattern is repurposed from its conventional "wrong input" context into a deliberate aesthetic gesture. When the user hovers over a hexagonal cell, the cell performs a brief, sharp horizontal shake (3px amplitude, 3 cycles over 300ms, ease-in-out) before settling into its hover state (a subtle glow of gold at the hexagonal borders). This shake is not communicating an error -- it is communicating vitality, the tremor of a living thing responding to touch, the vibration of a tuning fork struck against stone. The animation uses `@keyframes hexShake { 0% { transform: translateX(0); } 15% { transform: translateX(-3px) rotate(-0.5deg); } 30% { transform: translateX(3px) rotate(0.5deg); } 45% { transform: translateX(-2px) rotate(-0.3deg); } 60% { transform: translateX(2px) rotate(0.3deg); } 75% { transform: translateX(-1px); } 100% { transform: translateX(0); } }`. Additionally, when the navigation bloom is triggered, each emerging navigation hexagon shakes once as it appears, as though the force of its materialization sends a tremor through it. And when the user clicks any interactive element, a single sharp shake pulse (one cycle, 200ms) confirms the interaction with tactile immediacy -- replacing the ubiquitous opacity fade with something that feels physical. **SVG Line Drawing Animation:** Every section transition is punctuated by a line-illustration drawing sequence. As one honeycomb section scrolls away and the next enters, a horizontal band of botanical-architectural hybrid line art draws itself across the viewport boundary. These transitional illustrations serve as visual palate cleansers and section dividers, each one unique: one might be a branch growing through a deco chevron, another a root system threading through geometric tilework, another a sunburst whose rays morph into tree rings. **Texture and Materiality:** All surfaces carry subtle texture. The Aged Ivory backgrounds include a CSS noise grain (using a tiled 200x200 PNG noise overlay at 4% opacity) that simulates old paper. The Obsidian Warm backgrounds carry a finer noise (2% opacity) suggesting volcanic glass microstructure. Hexagonal borders are rendered as 1px lines that use a dashed pattern (`stroke-dasharray: 8 3`) rather than solid strokes, creating a hand-drawn, imperfect quality. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie-cutter hero-features-footer structures, parallax scrolling (too overused at 77%), generic scroll-triggered fades (96% saturation), friendly/playful tone (98% saturation), centered layouts (99% saturation). The honeycomb inherently breaks centering conventions. All motion should serve the narrative, not decorate it. **Interactivity:** - Hexagonal cells respond to hover with the shake-error tremor followed by a border-color transition to gold over 400ms - SVG illustrations can be "touched" -- hovering over a drawn branch causes secondary micro-branches to sprout from the contact point (CSS-animated pseudo-elements) - The background noise-grain texture shifts subtly in response to scroll position (parallax on the texture layer only, at 0.1x scroll speed, keeping content stationary) - Color transitions between light and dark sections use a 600ms cross-fade that sweeps diagonally across the viewport rather than a hard cut ## Uniqueness Notes **Differentiators from other designs:** 1. **Hexagonal Grid as Fundamental Architecture:** At only 2% usage, the hexagonal-honeycomb layout is nearly absent from the portfolio. While other designs layer hexagonal decorative elements onto conventional grids, namu.style uses the hexagon as its atomic unit of spatial organization -- all content, navigation, and imagery exist within or in relation to the honeycomb tessellation. This is not a grid overlay; it is the grid itself. 2. **Shake-Error as Aesthetic Vocabulary, Not Error State:** The shake animation (2% frequency) appears nowhere else as a deliberate design language. By repurposing a UI error pattern into a vitality signal -- the tremor of life, the vibration of struck metal -- namu.style inverts user expectation and creates a tactile interaction vocabulary that is entirely its own. Every hover, every click, every element materialization carries this signature tremor. 3. **Line Illustration as Sole Imagery Mode:** At 1% frequency, line-illustration is the rarest imagery approach in the portfolio. namu.style uses no photography, no gradients, no 3D renders -- only single-weight line drawings that fuse botanical and architectural subject matter. This constraint creates absolute visual coherence and a handcrafted quality that no other design achieves. 4. **Art-Deco / Wabi-Sabi Collision:** While wabi-sabi (4%) and art-deco-display typography (3%) each appear rarely, their deliberate collision -- geometric precision being consumed by organic imperfection -- creates a conceptual tension that generates the design's entire visual identity. No other design in the portfolio attempts this specific cultural synthesis. 5. **Jewel-Tone Palette on Textured Surfaces:** The jewel-tones palette (5%) is always applied through texture and gradient rather than as flat color, creating a materiality (aged gemstone, tarnished metal, cracked glaze) that distinguishes it from the dominant warm/muted palettes that saturate 100%/69% of existing designs. 6. **Non-Centered, Non-Linear Content Flow:** By routing content through a honeycomb cascade rather than a centered column or conventional grid, the reading experience is fundamentally different from the 99% of designs that use centered layouts. The eye navigates spatially rather than linearly, discovering content through visual weight and color pull rather than top-to-bottom text flow. **Documented Seed/Style:** `aesthetic: wabi-sabi, layout: hexagonal-honeycomb, typography: art-deco-display, palette: jewel-tones, patterns: shake-error, imagery: line-illustration, motifs: vintage, tone: energetic` **Avoided Overused Patterns:** - Centered layout (99%) -- replaced with hexagonal-honeycomb grid - Scroll-triggered animation (96%) -- replaced with shake-error and SVG path-draw - Friendly tone (98%) -- replaced with energetic tone - Warm palette (100%) -- replaced with jewel-tones - Minimal imagery (94%) -- replaced with line-illustration - Photography (73%) -- replaced with line-illustration - Parallax (77%) -- used only as micro-texture shift, not as section-level parallax - Mono typography (98%) -- replaced with art-deco-display (Poiret One) - Playful aesthetic (94%) -- replaced with wabi-sabi