# Design Language for namu.systems ## Aesthetics and Tone namu.systems (Namu — 나무(木), Korean for "tree") channels a victorian-ornate aesthetic — the elaborate decorative richness of Victorian scientific illustration and botanical classification systems applied to a tree systems documentation and analysis platform. The site is a digital Victorian herbarium — ornamental borders framing systematic knowledge, serif typography dripping with taxonomic authority, and the decorative excess of an era that believed scientific precision deserved artistic grandeur. Inspiration draws from Ernst Haeckel's Kunstformen der Natur, the ornate page layouts of Victorian botanical encyclopedias, the decorative typography of William Morris's Kelmscott Press, and the illustrated precision of 19th-century tree identification manuals. The tone is raw-authentic — unvarnished, direct language that documents tree systems with the unflinching precision of a field researcher's unedited notes. ## Layout Motifs and Structure The layout uses a **broken-grid** architecture — content blocks arranged in deliberately asymmetric compositions that mirror the branching, non-uniform structure of real tree systems. **Broken Grid Architecture:** - Base: 6-column grid with content spanning irregular column ranges - Major content at 4 columns, offset 1-2 columns from edge - Supporting annotations in 2-column sidebars - Overlapping ornamental borders between blocks - Container: max-width: 1060px centered - The broken arrangement mirrors tree branching patterns **Section Sequence:** 1. **Root System:** Hero with handwritten title on high-contrast dark gradient, 3d-render tree system visualization, floating-elements ornamental botanical decorations 2. **Taxonomy:** Classification system in broken-grid blocks — scroll-triggered interactive taxonomy reveals with 3d-render cellular structure illustrations 3. **Networks:** Tree network analysis in overlapping grid panels with floating-elements interconnection diagrams 4. **Data:** System metrics in broken-grid data blocks with 3d-render visualization treatments and Victorian ornamental frames 5. **Decay:** Footer as decomposition cycle — raw-authentic closing with floating-elements returning-to-earth motif and ornamental memorial border ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) — handwritten script at 2.5rem-3.5rem, weight 700. Its organic, personal strokes create the field-researcher quality of hand-labeled botanical specimens. - **Body Text:** "Crimson Text" (Google Fonts) — literary serif at 0.95rem, weight 400, line height 1.8. - **Accent:** "Crimson Text" at 1rem, weight 600, italic for taxonomic names and system annotations. - **Labels:** "Crimson Text" at 0.7rem, weight 700, uppercase, letter-spacing 0.06em. **Color Palette:** - **Ink Black:** #0c0808 — deep ink black for dark backgrounds - **Panel Dark:** #181210 — warm dark for panels - **Specimen Gold:** #c8a040 — warm specimen-label gold for primary accent - **Leaf Viridian:** #308848 — rich viridian green for secondary accent - **Blood Sap:** #a03030 — deep red-brown sap for tertiary accent - **Parchment:** #f4ece0 — warm parchment for light sections - **Faded Text:** #d0c4b0 — faded warm text on dark - **Border Ornate:** #483828 — ornate warm border ## Imagery and Motifs **3D-Render Tree Visualizations:** System concepts illustrated as dimensional tree renderings — CSS 3D transforms creating perspective views of tree structures. Isometric-style (rotateX(45deg) rotateZ(45deg)) diagrams showing root networks, branch hierarchies, and canopy distributions. Thin strokes in Specimen Gold and Leaf Viridian on dark backgrounds. **Scroll-Triggered Taxonomy Reveals:** Classification content reveals sequentially on scroll — each taxonomic level appears as the user scrolls, kingdom to species, with each level indenting further right and reducing font size. CSS: transform: translateX(calc(var(--level) * 24px)), opacity triggered on intersection. The progressive revelation mirrors the systematic process of botanical classification. **Floating-Elements Ornamental Accents:** Small Victorian ornamental elements (SVG, 16-32px) — botanical flourishes, leaf scrollwork, small vine tendrils in Specimen Gold at 0.08-0.12 opacity floating in content margins. Positioned without animation, creating the static decorative richness of a Victorian printed page. **High-Contrast Scientific Drama:** The palette operates in extreme contrast — near-black backgrounds with bright accent highlights (Specimen Gold, Leaf Viridian at full saturation). The high contrast creates the dramatic visual language of Victorian scientific illustration where specimens were illuminated against dark backgrounds. **Victorian Ornamental Frames:** Content blocks framed with ornamental borders — CSS border-image with repeating decorative patterns, or pseudo-element corner ornaments (SVG scrollwork, 24px) in Specimen Gold at 0.1 opacity. The frames anchor digital content in the visual tradition of Victorian scientific publishing. ## Prompts for Implementation Build the page as a Victorian tree systems herbarium. Broken grid: display: grid, grid-template-columns: repeat(6, 1fr), gap: 16px. Content: .system-block { grid-column: var(--start, 2) / span var(--span, 4); } Container: max-width: 1060px, margin: 0 auto, padding: 60px 24px. Scroll-triggered taxonomy: .taxon-level { opacity: 0; transform: translateX(calc(var(--level) * 24px)) translateY(12px); transition: all 400ms ease-out; } .taxon-level.visible { opacity: 1; transform: translateX(calc(var(--level) * 24px)) translateY(0); } 3D renders: .tree-viz { transform: perspective(800px) rotateX(10deg); transform-style: preserve-3d; } Victorian frames: .ornate-frame { border: 1px solid #483828; position: relative; padding: 32px; } .ornate-frame::before, .ornate-frame::after { content: ''; position: absolute; width: 24px; height: 24px; border: 1px solid rgba(200,160,64,0.1); } .ornate-frame::before { top: -4px; left: -4px; border-right: none; border-bottom: none; } .ornate-frame::after { bottom: -4px; right: -4px; border-left: none; border-top: none; } Floating ornaments: .flourish { position: absolute; opacity: 0.1; } .flourish svg { fill: #c8a040; width: var(--size, 20px); } AVOID: Modern systems documentation, clean tech platforms, and minimalist data dashboards. Let Victorian ornamental grandeur and raw-authentic field notes create a systems platform where tree knowledge is presented with the elaborate scientific reverence of 19th-century natural history. ## Uniqueness Notes 1. **Victorian-ornate for tree systems:** Elaborate decorative design treats systematic tree knowledge with 19th-century scientific reverence. 2. **Broken-grid as branching structure:** Asymmetric compositions mirror the non-uniform, organic structure of real tree branching systems. 3. **Scroll-triggered as taxonomic classification:** Progressive content revealing mirrors the systematic process of identifying and classifying specimens. 4. **3D-render as system visualization:** Dimensional tree diagrams create the analytical depth of scientific illustration. 5. **Handwritten typography as field notes:** Script headlines maintain the authentic, personal quality of a researcher's hand-labeled specimens. **Seed/Style:** aesthetic: victorian-ornate, layout: broken-grid, typography: handwritten, palette: high-contrast, patterns: scroll-triggered, imagery: 3d-render, motifs: floating-elements, tone: raw-authentic **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 victorian-ornate aesthetic, broken-grid layout, high-contrast palette, 3d-render imagery, and raw-authentic tone.