# Design Language for namu.systems ## Aesthetics and Tone namu.systems is a **submerged dendrological registry** — the public-facing index of an imagined institution called *Sistema Nāmu Subaqua*, which catalogues tree-root-systems that have been swallowed by rising water. The conceit: somewhere between Venice's flooded crypts and a Palauan rock-island lagoon, a marble-clad colonnade has settled three metres beneath a tideline of glass-clear water. Inside its ribbed vaults, the `.systems` registry preserves a taxonomy of *drowned trees* — mangrove tangles, cypress knees, ginkgo roots that grew through Roman aqueducts — each one indexed inside a hexagonal honeycomb cell etched into a slab of Carrara stone. The aesthetic fuses **seapunk** (1990s aquatic web-naïveté: dolphins, cyan ripples, Geocities chlorine palette) with **opulent-grand classical marble** in a way no design in the surveyed registry attempts. Crucially the seapunk register here is *patrician*, not kitsch — closer to a Doge's flooded palace than to a Tumblr GIF. The mood is **reverent, slow, half-drowned**: every animation breathes like a tide; every panel is veined with marble; every cell of the honeycomb behaves as if the user is looking *down through clear chlorinated water* at a stone honeycomb on a lagoon floor. There is no hero CTA, no pricing block, no statistics grid. The user descends into the registry the way a free-diver descends a colonnade: held breath, slow turn of the head, attention to the way light refracts off the limestone-coral capitals. Tone is **opulent-grand-aquatic**: Latin inscriptions co-mingle with Korean *hanja* (木 / 나무), and the copy is written as if engraved by a 17th-century Venetian senate that had pivoted to maintaining a coral reef. Voice is patient, ceremonial, slightly liturgical. Never cute. Never "splashy." Never marketing. ## Layout Motifs and Structure The page is a **submerged hexagonal-honeycomb colonnade** read as a slow vertical descent through six water-strata. There is no top navigation bar. There is no sidebar in the conventional sense. There is no card-grid. The entire chrome is the honeycomb itself — a tessellated lattice of marble hexagons that *is* both layout and ornament. **Stratum I — Surface (0–95vh).** Above the waterline. Pale ethereal-blue sky `#C9DDEE` washing the top edge. A single horizontal line of caustic ripples (animated SVG path) marks the water's surface at 92vh. Above it sits the wordmark **namu.systems** in oversized rounded sans, weight 500, kerned generously. Below the wordmark, in a serif italic small-caps line: *registrum arborum subaquearum* (registry of submerged trees). The caustic line slowly undulates in place; *nothing else moves above it*. The user descends by scrolling, and as they scroll the ripple line passes above the viewport — the user has now "submerged." **Stratum II — Colonnade Vestibule (95vh–230vh).** The first underwater stratum. Background fades from `#C9DDEE` to a richer `#5C8FB4`. Six **fluted Doric columns rendered as flat SVG silhouettes** are anchored at viewport-bottom and rise upward, three on each side, framing a central well. The columns slowly bow inward at the top by 1.4° via a `transform-origin: bottom center` parallax — as if water-pressure is leaning them. Between the columns, a single floating 18-pt italic Latin epigraph: *quae aqua tenuit, lapis numerat* ("what the water has held, the stone enumerates"). No buttons. **Stratum III — The Honeycomb Hall (230vh–460vh).** The site's spatial centerpiece. A full-bleed marble field, veined Carrara `#F0EBE2` with `#7B8895` veining painted as a single noise-driven SVG underlay. Across this field is laid a **hexagonal honeycomb** of 37 cells (a 7-row pyramid: 4-5-6-7-6-5-4) that fills approximately 220vh. Each hex is approximately 22vw across. Every cell is a *registry entry* — one drowned tree-system. The cells are not static cards: each contains one circular sectional drawing of a root system (line-illustration style, weight 0.75px, ink color `#1B2A3A`), one Korean common name engraved into the marble (e.g., **맹그로브**, **편백**, **은행**), one Latin binomial in small caps, and one four-digit *submersion year*. As the user scrolls through this stratum, individual hex cells drift on a layered-depth parallax: the front-most plane (cells in odd rows) translates downward at scroll-speed × 1.06, the middle plane at × 1.0, and the back plane at × 0.94. The result is the optical sensation of *looking down through a metre of water at a stone honeycomb that is itself slightly tipping in the current*. **Stratum IV — The Cartouche Aisle (460vh–600vh).** A horizontally-banded section. Three large rectangular **marble cartouches** mounted as if on the wall of a flooded apse, each presenting one long-form catalogue narrative (a single drowned tree's full record: locality, hydrology, the year the roots were last seen above water, the names of the families who once climbed it). The cartouches are framed in oxidised-bronze beading (rendered as inset `box-shadow`, never raster). Background marble continues but darkens to `#5C7891`. **Stratum V — The Apse Reflection Pool (600vh–740vh).** A perfectly mirrored vertical pair of compositions, the lower one rotated 180° and softened by a 12% Gaussian blur, simulating the page's own reflection in a still indoor pool. Used to host the *Donor Inscriptions* and the *Index of Surviving Sister-Systems* without resorting to a footer-nav. The horizontal mirror-axis is rendered as a single 1px caustic-animated SVG ripple — the mirror-axis itself moves, almost imperceptibly. **Stratum VI — The Tide-Mark Footer (740vh–820vh).** A flat band of `#2A3F4F`, the deep-water plate. A single line of mono text gives the registry's volume number, the timestamp of the last entry, and the line *fluctus continet, lapis recordatur*. No social icons. No mailing list. The page ends. The skeleton key of the layout is the hexagon: every container, every divider, every cursor-hover bloom uses a 30°-incremented hex — never a circle, never a square, never a rounded-rectangle. Hexagonal-honeycomb appears in only 5% of the surveyed registry and is overwhelmingly used for tech/sci-fi, not for marine-classical material — this site reclaims it for the patrician seapunk register. ## Typography and Palette **Fonts (Google Fonts only):** - **Quicksand** (rounded-sans, weights 400/500/600) — primary display and UI register. Quicksand's softly rounded terminals are read here as *water-rounded stone*, the way limestone edges are smoothed by centuries of tide. Used for the wordmark **namu.systems** at `clamp(3.4rem, 6vw, 5.2rem)` weight 500, letter-spacing 0.04em; for honeycomb-cell common names at 1.05rem weight 500; for body running text at 1.0625rem weight 400 line-height 1.62. - **Cormorant Garamond** (italic 400) — used *only* for Latin epigraphs, the *registrum* subtitle, and the cartouche running headers. 18–22 pt italic, letter-spacing +0.02em. - **Cinzel** (weight 500, all caps, letter-spacing +0.18em) — used *only* for the binomial small-caps line and the donor-inscription block, never for body. Cinzel's incised Roman-square glyphs read as *engraved stone*. - **JetBrains Mono** (weight 400) — used *only* for submersion years, registry volume numerals, and GPS coordinates, never for body or headings. 0.78rem. **Palette — ethereal-blue with marble and bronze (10 stops):** - `#C9DDEE` — surface sky, the air-side of the waterline. - `#5C8FB4` — vestibule water, mid-stratum cool blue (the base ethereal-blue note). - `#3D6B8E` — colonnade shadow water, used for type on light backgrounds. - `#2A3F4F` — deep-water plate, the footer band and engraved-text fill. - `#F0EBE2` — Carrara marble base, the honeycomb field. - `#E2D9C4` — warm marble vein, secondary stone tone. - `#7B8895` — cool marble vein, the noise underlay. - `#9B7A3F` — oxidised-bronze beading, frames and cartouche edges. - `#5A4422` — engraved-bronze deep, used for inset shadow on bronze elements. - `#A8C9D9` — caustic-highlight, the moving light-ripple color. The palette deliberately violates seapunk's expected hot-cyan/pink-coral pairing in favour of a *mineralised* aquatic register. The warm Carrara stones (`#F0EBE2`, `#E2D9C4`) are the registry; the cool blues (`#5C8FB4`, `#3D6B8E`, `#2A3F4F`) are the water above it; the bronze tones (`#9B7A3F`, `#5A4422`) are the institution's seal. No gradient mesh is used — gradients here are exclusively single-axis vertical, simulating water-column light attenuation (top brighter, bottom darker). ## Imagery and Motifs **Zero stock photography. Zero AI-generated imagery. Zero gradient meshes.** - **Carrara marble field.** A single hand-painted SVG noise-vein layer at 22% opacity over the `#F0EBE2` ground, spanning Stratum III in full bleed. The vein is generated from a fixed Perlin path; vein color `#7B8895`. The marble must read as *quarried, polished, slightly damp* — never as a Photoshop pattern. - **Leather-texture cartouches.** The Stratum IV record-cartouches are bound in a faintly visible **chestnut-leather inset texture** (`#5A4422` at 6% opacity over `#E2D9C4`). The leather appears only inside the cartouche frame, never outside it. This grounds the institutional voice and bridges seapunk's ephemerality with archival permanence. - **Hand-drawn root-system sectional plates.** Inside each honeycomb cell, a single circular root-system illustration in 0.75px line weight, monochrome `#1B2A3A`, drawn as if from a 1903 Korean forestry monograph. Mangrove (Rhizophora), cypress-knee (Taxodium), ginkgo (Ginkgo biloba), banyan (Ficus benghalensis), and 33 others — each unique, never repeated. - **Caustic light overlay.** A single full-page animated SVG element that draws three slow horizontal sine-bands of `#A8C9D9` at 14% opacity, animated at 22-second period (very slow), `mix-blend-mode: soft-light`. This causes a moving water-light-ripple to crawl across the marble field. Used everywhere except the deepwater footer. - **Dolphin glyph.** A single tiny 14×14px dolphin glyph (a wink at seapunk's Internet ancestry) appears *exactly once* on the page, engraved into the bottom-right hex of Stratum III at 38% opacity. The user must find it. - **Hexagon as universal frame.** All borders, cell windows, button hover-areas, and cursor blooms use a 30°-incremented hexagonal path. Never a rectangle. Never a circle. - **Latin engravings.** Three short Latin lines are engraved into the marble in Cinzel small-caps at three depths (Stratum II, IV, VI). They are recessed into the stone via inset `text-shadow` only — never raster. - **Marble-classical capitals.** The six Doric column-tops in Stratum II are flat SVG silhouettes drawn as Greek-revival fluted columns with abacus and echinus, but each capital has a subtle barnacle encrustation at its base — half a dozen tiny irregular dots in `#1B2A3A`. This single detail collapses the seapunk and marble-classical registers into one image. ## Prompts for Implementation - Build the page as a single static HTML document with one CSS file and one small vanilla JS module. No framework. No build step. No analytics. No service worker. No web fonts beyond the four Google Fonts named above. - Total page length: **820vh**. Six strata, sequenced as described. Honeycomb hall (Stratum III) is the centerpiece — give it the most vertical real estate. - The honeycomb is generated via CSS only: `clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%)` on each cell, arranged on a 7-row pyramid grid (rows of 4-5-6-7-6-5-4 cells). Use CSS Grid with explicit row/column placement, **not** absolute positioning. Total: 37 cells. - All parallax is **scroll-linked**, never time-based. Implement via `IntersectionObserver` + `requestAnimationFrame`, adjusting only `transform: translate3d(0, …, 0)`. Three planes in Stratum III: `× 1.06`, `× 1.0`, `× 0.94`. Parallax appears in 77% of the registry — the differentiator here is the *triple-plane water-column depth* effect, which is rare. - The caustic-light overlay is a single SVG with three `` elements animated via `` `translateX` over 22s. `mix-blend-mode: soft-light`. This element is `position: fixed`, `pointer-events: none`, `z-index: 60`, and covers the entire viewport throughout strata II–V. - Cursor on the honeycomb cells: hovering a cell triggers an *opulent-grand bloom*: the cell's marble field deepens by 4% lightness, a 0.5px hexagonal ring of `#9B7A3F` (oxidised-bronze) draws around the perimeter via `stroke-dasharray` over 480ms, and the inner root-system illustration scales to 1.04 with `transition-timing-function: cubic-bezier(.2,.7,.2,1)` (a slow, water-resisted ease). - The waterline ripple at 92vh is a single SVG `` animated via SMIL or a tiny JS sin-loop that updates `d=` every frame. Period: 6 seconds, amplitude: 4px. This is the only animation that runs *above* the waterline. - The Stratum V apse-reflection is built by duplicating the Stratum V upper composition into a `
` with `transform: scaleY(-1)` and `filter: blur(0.7px) opacity(0.78)`. The mirror seam is a single 1px caustic-line element identical to (but slower than) the Stratum I waterline. - All Korean *hanja* / *hangul* (木, 나무, 맹그로브, 편백, 은행, etc.) is set in Quicksand if the glyph is present in the font; for *hanja* not present in Quicksand, fall back to Noto Serif CJK only as a system fallback declaration in `font-family`. - The narrative voice across the page must read as if the entire site is the ceremonial public face of a real, slow-moving aquatic institution. Write copy for: the wordmark, the registrum subtitle, three Latin epigraphs, 37 cell-records (one per drowned tree), three cartouche long-form records, five donor-inscription names, one tide-mark footer line. Every copy block is **opulent-grand** in tone — long, periodic, ceremonial, never urgent. No verbs of conversion. No first-person plural marketing voice. The institution speaks; the user listens. - Bias **strongly** toward narrative immersion, full-screen environment, and reverent slowness. Avoid: CTAs of any kind, pricing, statistics-grids (no "120,000+ trees indexed"), social proof, testimonials, FAQ accordions, comparison tables, signup forms. The closest the page comes to interaction is the cursor-bloom on a honeycomb cell. - Performance and accessibility are **not** the point of this design — visual aesthetics, atmospheric depth, and typographic ceremony are. ## Uniqueness Notes **Chosen seed (from assignment):** *aesthetic: seapunk, layout: hexagonal-honeycomb, typography: rounded-sans, palette: ethereal-blue, patterns: parallax, imagery: leather-texture, motifs: marble-classical, tone: opulent-grand.* **Differentiators against the surveyed 340-design registry:** 1. **Patrician seapunk.** Seapunk does not appear at any meaningful frequency in the registry; when aquatic registers appear they are coded as "ocean-deep calming spa" or "tropical-fish playful." This design pulls seapunk *toward classical opulence* — a flooded-Doge's-palace register that no other site touches. The dolphin-glyph easter egg is the single tongue-in-cheek concession; everything else is reverent stone. 2. **Hexagonal-honeycomb used for archival-aquatic, not tech.** Hexagonal-honeycomb appears in 5% of designs and is, in every surveyed instance, deployed for sci-fi, crypto, or technical-documentation registers. Here it is the floor-tile of a submerged Roman apse — a 37-cell pyramid of marble cells indexing drowned trees. The honeycomb is *load-bearing layout*, not decoration. 3. **Marble-classical fused with seapunk.** Marble-classical motifs appear in ~6% of designs (always in luxury / academic registers); seapunk is functionally absent. Their *fusion* — Carrara veining holding a registry of submerged mangroves under chlorine-blue caustics — is unique in the registry. 4. **Triple-plane water-column parallax.** Parallax appears in 77% of designs (overused — flagged in frequency analysis as AVOID), but almost universally as single-plane scroll-translate. This design uses *three explicit depth planes* in a single section (`× 1.06`, `× 1.0`, `× 0.94`) to render an actual *optical-water-column depth illusion* — the parallax is no longer mere motion, it's a depth-cue. This reframes a saturated pattern through purpose. 5. **Quicksand re-cast as water-rounded stone.** Quicksand is read in the registry as a friendly/playful display face. Here it is paired with Cormorant italic and Cinzel small-caps engravings to behave as *limestone smoothed by centuries of tide* — the rounded terminals are no longer cute, they are eroded. This is a typographic register the surveyed designs do not attempt. 6. **No CTA, no card-grid, no statistics, no hero photograph.** The page is a registry, not a landing page. Card-grid (50%), full-bleed (47%), centered (59%), and dashboard (74%) layouts dominate the registry — none of them appears here. The honeycomb is the *only* primary layout primitive. **Avoided patterns from frequency analysis:** dashboard (74% — overused), card-grid (50% — overused), centered (59% — overused), hand-drawn aesthetic (75% — overused), warm palette (80% — overused), gradient palette (81% — overused), photography imagery (80% — overused), mono typography as primary face (81% — overused), friendly tone (66% — overused), parallax-as-motion (77% — reclaimed here as parallax-as-depth-cue, used purposefully rather than ornamentally), stagger (68% — not used). **Underused patterns deliberately preferred:** hexagonal-honeycomb (5%), marble-classical motifs (6%), opulent-grand tone (5%), leather-texture imagery (2%), rounded-sans typography (3%), ethereal-blue palette (3%), seapunk aesthetic (2%) — all selected from the bottom of the frequency table to occupy genuinely sparse design territory.