# Design Language for namu.land ## Aesthetics and Tone namu.land ("namu" means "tree" in Korean) inhabits the visual world of a dark-academia arboretum -- a forbidden wing of an old university library where botanical specimen plates are pinned to mahogany walls with brass tacks, where leather-bound field journals lie open beside brass compasses, and where the study of trees becomes a metaphor for the study of knowledge itself: branching, rooted, alive beneath bark. The aesthetic is **dark-academia** filtered through the lens of dendrology and cartographic science: rich, warm, scholarly darkness punctuated by the amber glow of reading lamps reflected off aged vellum. This is not the romanticized dark-academia of social media -- no posed coffee cups or decorative Latin. This is the working scholar's environment: ink-stained fingers, pencil shavings curled on oak desks, the faint chemical smell of photographic developing fluid used to document root systems. The tone is **elegant-sophisticated** -- the sophistication of deep expertise worn lightly, the elegance of a well-organized herbarium where every pressed leaf tells a story spanning centuries. The overall mood evokes a late evening in a Victorian-era natural history institute, where gas lamps have been replaced by warm amber LEDs but the spirit of patient, obsessive cataloguing remains. Surfaces are dark but never black -- always the deep brown of walnut heartwood or the charcoal of aged oak bark. Light exists as intrusion: warm, golden, arriving through small apertures to illuminate specific specimens or text fragments. ## Layout Motifs and Structure The layout employs an **HUD-overlay** architecture -- a system of translucent informational panels that float over a dark, textured background like the heads-up display of a botanical field instrument or the viewing interface of a specimen digitization scanner. This is not a gaming HUD; it is a scientific instrument interface, precise and purposeful, where every panel serves a taxonomic or navigational function. **HUD Panel System:** - **Primary Viewport:** The full screen serves as a dark specimen stage -- a deep walnut-brown (#2A1F14) textured surface that simulates the grain of aged wood. All content floats above this surface in semi-transparent panels with subtle inner glow. - **Overlay Panels:** Content containers are rectangular with clipped corners (8px diagonal cuts at top-left and bottom-right corners only, creating an asymmetric chamfer). Each panel has a 1px border of muted amber (#8B6914 at 40% opacity) and a background of rgba(42, 31, 20, 0.85) -- dark but not fully opaque, allowing the wood-grain texture beneath to whisper through. - **Information Ribbons:** Thin horizontal strips (28px tall) that span the viewport width at strategic vertical positions, carrying metadata like coordinates, timestamps, or taxonomic classifications. These ribbons use a slightly lighter background (#3D2E1F at 90% opacity) and contain small-caps text in Fira Sans at 0.7rem. - **Corner Anchors:** Fixed-position indicators at viewport corners displaying navigational metadata: top-left shows the current section as a Latin botanical name; top-right shows a simulated coordinate readout; bottom-left holds a miniature progress dendrogram; bottom-right carries the domain watermark. **Grid Logic:** The underlying grid is an 8-column system where content panels occupy either 3, 5, or 8 columns, never 4 (avoiding symmetry). Vertical spacing follows the Fibonacci sequence scaled to viewport height: gaps between major sections are 89px, between sub-sections 55px, between elements 34px. The asymmetry is deliberate -- content gravitates toward the left 60% of the viewport, leaving the right 40% for specimen imagery, branch diagrams, and ambient decoration. This leftward bias mimics the layout of a naturalist's field notebook: text on the left page, drawings on the right. **Progressive Disclosure Architecture:** Content does not exist all at once. The HUD panels appear through a **progressive-disclosure** system where scrolling activates layered reveals: 1. First, the panel border fades in (200ms) 2. Then the background opacity transitions from 0 to 0.85 (300ms, 100ms delay) 3. Then text content types in character by character at 12ms per character 4. Finally, any associated imagery dissolves in from a 2% blur (400ms, staggered 200ms after text completes) This four-stage disclosure creates a sense of the interface "booting up" or calibrating, reinforcing the scientific-instrument metaphor. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- weight 600, regular and italic. This is a refined, high-contrast Garamond revival with elegant proportions that evoke 18th-century scientific publishing. The tall ascenders and deep descenders give it a vertical rhythm reminiscent of tree trunks. Used at 2.8rem-5rem for section headings, always in sentence case. Letter-spacing: -0.02em to keep the classical density. - **Body Text:** "Fira Sans" (Google Fonts) -- weight 300 (Light) and 400 (Regular). The Frutiger-lineage humanist sans-serif provides the **frutiger-clean** typographic character: highly legible, warm without being soft, modern without being cold. Fira Sans carries the DNA of Frutiger's airport signage philosophy -- designed to be read quickly and accurately under suboptimal conditions, which maps perfectly to the HUD-overlay concept where text must be legible against semi-transparent, textured backgrounds. Used at 0.95rem-1.1rem for body text, 0.8rem for metadata and labels. Line-height: 1.65 for body, 1.3 for labels. - **Monospace / Data:** "Fira Code" (Google Fonts) -- weight 400. Used exclusively for the HUD metadata elements: coordinates, timestamps, taxonomic codes, and the corner anchor readouts. The programming ligatures in Fira Code create visual interest in the data displays. Used at 0.75rem-0.85rem, always uppercase with letter-spacing: 0.12em. - **Accent / Latin Names:** "Cormorant Garamond" italic weight 400 at smaller sizes (0.9rem-1rem) for botanical Latin names, species classifications, and scholarly citations. The italic Garamond carries centuries of scientific typographic tradition. **Palette (Warm-Earthy):** | Swatch | Hex | Name | Usage | |--------|-----|------|-------| | Primary Dark | #2A1F14 | Walnut Heartwood | Main background, specimen stage | | Secondary Dark | #3D2E1F | Aged Bark | Panel backgrounds, information ribbons | | Warm Amber | #C4973B | Lamp Amber | Primary accent, borders, interactive elements | | Deep Gold | #8B6914 | Brass Patina | Secondary accent, HUD borders at reduced opacity | | Vellum Light | #E8D5B5 | Aged Vellum | Primary text, headings | | Parchment | #D4B896 | Field Journal | Body text, secondary content | | Root Brown | #6B4E37 | Exposed Root | Tertiary elements, dividers, subtle backgrounds | | Canopy Green | #4A6741 | Understory | Rare accent for living-specimen indicators, growth markers | | Charcoal Bark | #1E1710 | Deep Bark | Deepest shadows, viewport edges | The palette operates on a warm-earthy spectrum that never touches true black or true white. The darkest value (#1E1710) is a deep brown-black like charred wood; the lightest (#E8D5B5) is the color of vellum aged 200 years. The Canopy Green (#4A6741) appears sparingly -- only for elements representing living or growing things, creating a subtle shock of life against the preserved-specimen warmth of the rest. ## Imagery and Motifs **Geometric-Abstract Dendrograms:** The primary imagery mode is **geometric-abstract** -- specifically, abstract tree diagrams (dendrograms) rendered as pure geometry. These are not illustrations of trees; they are schematic representations of branching structures using only lines, circles, and angles. Every dendrogram is built from: 1. **Trunk Lines:** Vertical SVG strokes of 2px width in Warm Amber (#C4973B), originating from the bottom of their container and branching upward. 2. **Branch Angles:** All branches fork at exactly 34 degrees (a Fibonacci-adjacent angle found in actual phyllotaxis). Each branch is thinner than its parent by 0.3px, creating a natural taper. 3. **Node Circles:** At each fork point, a 4px-radius circle filled with Brass Patina (#8B6914) at 60% opacity marks the branching node. Terminal nodes (leaf positions) use 3px circles filled with Canopy Green (#4A6741). 4. **Root Systems:** Below the trunk origin, an inverted dendrogram mirrors the canopy structure but rendered in Root Brown (#6B4E37) at 50% opacity, creating a reflection/root metaphor. These dendrograms serve as both decorative elements and navigational structures. The main navigation dendrogram in the right 40% of the viewport is interactive: hovering over a branch node reveals its associated content section in a tooltip panel. **Futuristic Motifs:** Despite the dark-academia grounding, the **futuristic** motifs manifest as scanning-line effects and data-stream visualizations that overlay the dendrograms: 1. **Scan Lines:** A thin horizontal line (1px, Warm Amber at 30% opacity) that slowly descends through dendrogram panels at 0.5px per frame, simulating a specimen scanner. When the scan line intersects a branch node, the node briefly pulses brighter (opacity jumps to 100% for 150ms with a 4px glow). 2. **Growth Rings:** Concentric circle patterns (like tree cross-sections) rendered as SVG circles with 0.5px strokes in Brass Patina at varying opacities (10%-40%). These appear as background textures within HUD panels, rotating very slowly (one full rotation per 120 seconds) to create subliminal motion. 3. **Data Streams:** Vertical columns of tiny characters (botanical abbreviations, taxonomic codes) in Fira Code at 0.6rem that scroll slowly upward at 0.2px per frame, visible through semi-transparent panel backgrounds. These streams are decorative -- the text is real botanical data (genus abbreviations, collection dates) but functions as ambient texture. 4. **Coordinate Crosshairs:** At the center of each major content panel, a faint crosshair pattern (two intersecting lines extending to the panel edges, 0.5px stroke in Lamp Amber at 15% opacity) provides a targeting/specimen-identification motif. **Specimen Plates:** At key narrative moments, full-panel "specimen plates" appear -- geometric-abstract compositions that fill a 5-column-wide panel with a single dendrogram rendered at high detail (50+ nodes). These plates have a double border (outer: 1px Brass Patina at 30%; inner: 0.5px Warm Amber at 50%, offset 6px inside) and a small label block at the bottom containing a specimen number, Latin name, and date in Fira Code uppercase. ## Prompts for Implementation **Full-Screen Narrative HUD Experience:** The site opens to a full-viewport walnut-dark specimen stage (#2A1F14 with a CSS noise texture at 3% opacity to simulate wood grain). For 800ms, nothing is visible -- only the dark surface and the corner anchor metadata fading in character by character in Fira Code (top-left: "NAMU.LAND // SPECIMEN ARCHIVE"; top-right: a slowly incrementing coordinate readout; bottom-left: a 3-node dendrogram seed; bottom-right: "EST. 2026"). This initial emptiness is critical -- it establishes the instrument-calibration metaphor. After 800ms, a single horizontal scan line in Warm Amber at 40% opacity descends from the top of the viewport at 1.5px per frame. As it passes through the vertical center, it triggers the progressive disclosure of the main title: "namu.land" in Cormorant Garamond at 4.5rem, centered horizontally but positioned at 38% from the top (golden ratio vertical placement). The title characters type in at 40ms intervals, each character accompanied by a microscopic amber flash (a 2px circle that expands to 8px and fades in 100ms). Below the title, a subtitle in Fira Sans Light at 1rem fades in over 400ms: a single poetic line about trees and knowledge. **Scroll-Activated Specimen Panels:** As the user scrolls, the HUD panels materialize through the four-stage progressive disclosure sequence. The first scroll section reveals a wide information ribbon ("FIELD NOTES // SECTION I") followed by a 5-column text panel on the left containing the site's primary narrative content in Fira Sans Regular at 1rem against the dark panel background. Simultaneously, in the right 3 columns, a dendrogram begins to draw itself -- SVG path-drawing animation where the trunk line extends upward, then branches fork outward at 34-degree angles, each branch drawing in 200ms with a 50ms delay between sequential branches. The complete dendrogram takes 2.5 seconds to fully render. **Interactive Dendrogram Navigation:** The right-column dendrogram functions as a living table of contents. Each terminal node corresponds to a content section. On hover, the node pulses from Canopy Green to Warm Amber and a small chamfered panel appears adjacent, showing the section title in Cormorant Garamond Italic at 0.9rem. On click, the viewport smoothly scrolls to the corresponding section while the dendrogram redraws to highlight the active branch path (the active branch thickens from 2px to 3px and shifts to full Warm Amber opacity while inactive branches dim to 30% opacity). **Specimen Plate Transitions:** Between major content sections, full-viewport specimen plates serve as visual chapter breaks. These use CSS clip-path to reveal: the plate starts as a 1px horizontal line at viewport center, then expands vertically over 600ms to fill the screen. The detailed dendrogram within draws itself during this expansion. After 3 seconds of viewing, scrolling past the plate causes it to collapse back to a horizontal line and slide off-screen upward. **Ambient Animation Layer:** Beneath all content, a persistent ambient layer provides subtle life: - Growth ring patterns rotate at 3 degrees per second - Data stream columns scroll upward at 0.2px per frame - The scan line descends continuously, resetting to the top when it exits the bottom - Corner anchor coordinate readouts update their last two digits every 800ms, simulating a live instrument **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, centered symmetric compositions, bright white backgrounds, generic hero images, stock photography, card-grid arrangements, playful or whimsical tone, neon colors, generic gradient washes. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Dark-Academia + HUD-Overlay Fusion (novel combination):** No other design in the portfolio combines the scholarly warmth of dark-academia (2% frequency) with the technical precision of a HUD-overlay layout (3% frequency). This collision creates a unique visual language: scientific instruments rendered in the materials of a Victorian naturalist's study. The HUD is not cold or clinical -- it is built from amber light, wood grain, and brass, making it feel like a steampunk specimen scanner rather than a video game interface. 2. **Dendrogram as Primary Visual and Navigation System:** While geometric-abstract imagery appears at 2% frequency across the portfolio, no other design uses dendrograms (tree-branching diagrams) as both the primary decorative motif AND the interactive navigation structure. The dendrogram is not ornamental -- it is structural, serving as table of contents, visual rhythm generator, and thematic anchor simultaneously. The 34-degree phyllotaxis branching angle grounds the geometry in actual botanical science. 3. **Frutiger-Clean Typography on Dark-Academia Backgrounds (1% frequency typography):** The frutiger-clean typographic category appears in only 1% of designs. Pairing Fira Sans (a direct descendant of Frutiger's humanist design philosophy) with dark, warm-earthy backgrounds is counterintuitive -- Frutiger-lineage faces are typically associated with airports, signage, and clean modernism. Here, the legibility-first ethos of Frutiger serves the HUD-overlay perfectly: text must be instantly readable against semi-transparent, textured panels. The pairing of Cormorant Garamond for display with Fira Sans for body creates a temporal collision -- 18th-century scholarly elegance meets 21st-century information design. 4. **Four-Stage Progressive Disclosure with Instrument-Calibration Metaphor:** While progressive-disclosure appears at 6% frequency, no other design implements it as a four-stage sequence (border, background, text, imagery) that simulates a scientific instrument powering up. This transforms a standard reveal animation into a narrative device: the interface is not loading, it is calibrating; it is not appearing, it is focusing. 5. **Warm-Earthy Palette Without Daylight (2% frequency palette):** The warm-earthy palette operates entirely in the dark register. Most warm-earthy implementations skew toward sunlit terracotta and cream. namu.land keeps the warmth but removes the daylight: walnut heartwood, brass patina, aged vellum illuminated by amber lamplight. The single accent of Canopy Green (#4A6741) appears so rarely that it functions as a visual event -- a flash of life in a preserved-specimen world. **Documented Seed/Style:** ``` aesthetic: dark-academia layout: hud-overlay typography: frutiger-clean palette: warm-earthy patterns: progressive-disclosure imagery: geometric-abstract motifs: futuristic tone: elegant-sophisticated ``` **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with dark-academia (2%) - centered layout (99%) -- replaced with asymmetric HUD-overlay (3%) - mono typography (98%) -- Fira Code used only for data elements, not as primary face - warm palette (100%) -- warm-earthy variant at 2% used instead - friendly tone (98%) -- replaced with elegant-sophisticated (6%) - scroll-triggered as sole animation (96%) -- progressive-disclosure is the primary pattern - minimal imagery (94%) -- geometric-abstract dendrograms provide rich visual content - photography (73%) -- zero photographic imagery; all visuals are geometric SVG constructions - vintage motifs (85%) -- replaced with futuristic scanning/data motifs (10%) - parallax (76%) -- no parallax effects; depth achieved through opacity layering - gradient palette (90%) -- no gradients; palette relies on discrete color stops and opacity variation