# Design Language for ncbd.dev ## Aesthetics and Tone `ncbd.dev` is a **forest archive seen through a lens left in morning light** — a site that inhabits the precise moment when old-growth timber meets a copper-and-glass instrument, when the smell of moss is interrupted by the clean geometry of a surveyor's theodolite. The dominant register is Muji-disciplined restraint enacted through deep botanical materials: lichen greens, dark loam, aged paper, and the occasional viridian shimmer of light scattering through chlorophyll. The Muji aesthetic here is not the consumer-product catalogue softness the word usually conjures. It is **Muji as epistemological stance**: extreme reduction that insists every remaining element earns its presence on the page. Nothing decorates. The page is a clearing in a dense forest — a natural space that has been very carefully allowed to form. The clearing itself is the design; the light falling into it is the typography. Vintage motifs operate as the counterweight to Muji plainness. Not kitsch vintage, not nostalgia-commodity vintage — but the vintage of a 1910 field naturalist's journal: leather-bound, ruled in faint agate-green ink, bearing pressed specimens under waxed paper, with handwritten species names in iron-gall ink that has faded to a warm brown-green. The site carries this sensibility in its decorative grammar: fine intaglio-style rule lines, specimen-label borders (four corners, two horizontal rules, no box), and a quietly aged color memory built into the base palette. The tone is **elegant-sophisticated** without coldness. The site is a private collection made public with discipline — not a gallery press release, not an agency pitch deck, but the personal monograph of someone who has spent twenty years looking carefully at one specific thing and has finally found the correct sentences for it. --- ## Layout Motifs and Structure The structural concept is **HUD-overlay on a wilderness substrate**. Two distinct spatial registers exist simultaneously: **Layer 1 — The substrate.** A fixed, full-viewport background that renders a generative forest-floor texture: fine-grained Voronoi cells approximating dried moss, rendered as an SVG at ~0.3px stroke in `#2C3D2A` on `#0F1A0D`. This layer never scrolls. It is not animated. It breathes with the cursor. **Layer 2 — The HUD shell.** A set of precision-ruled interface elements that float above the substrate at `position: fixed` and define the navigational and contextual frame. Inspired by a surveyor's instrument overlay, not a video-game HUD: hairline rules (0.5px, `#7A9B6E`), small serif coordinate labels (8px), and a minimal status bar at the bottom of the viewport. The HUD elements are drawn with `SVG` and `CSS custom properties` — they do not reflow, they do not respond to content. **Layer 3 — The content scroll column.** A single 660px reading column, left-aligned with a 120px left margin (forming the implicit gutter the HUD coordinate labels inhabit). Content scrolls normally within this column; the HUD and substrate remain fixed. The effect is of looking through a precision instrument at a document laid on a forest floor. **Section rhythm within the scroll column:** - Section dividers are specimen-label rules: two horizontal lines 4px apart, the space between them filled with a centered ornamental glyph (a fine asterism or dagger, set in the display typeface) - Paragraphs are compact (line-height 1.55, no extra margin between consecutive paragraphs — only section dividers create breath) - Headings live in a 40px offset zone left of the column, in the HUD gutter — they are positioned absolutely at the heading's vertical location, rotated 0deg, set in small caps at 11px tracking 0.2em **No horizontal navigation bar.** The HUD status bar at the bottom carries the site name (`ncbd.dev`), current section indicator, and a single coordinate pair that updates on scroll. Navigation is a single thin vertical rule on the far right (20px from viewport edge) with anchored section glyphs at 1/4, 1/2, 3/4, and end of total page height. --- ## Typography and Palette ### Type System (Google Fonts only, verified) **Display and section headings — `Playfair Display`** - Weights 400 (italic) and 700 (regular) only - Used at two sizes: 52px for the single H1 (italic, tracking -0.02em) and 13px small-caps for the rotated gutter headings - The italic at large size is the primary expressive gesture of the entire page — no other weight or style introduction is needed **Body text — `EB Garamond`** - Weight 400 regular and 400 italic - Body set at 17px / line-height 1.55 / measure 660px - EB Garamond's old-style figures (enabled via `font-variant-numeric: oldstyle-nums`) reinforce the field-journal register throughout **HUD elements — `IBM Plex Mono`** - Weight 300 only - All HUD coordinate labels, section markers, status bar text, and the bottom bar - Set at 8–9px, all-caps, letter-spacing 0.15em - Never appears in the scroll content column — exclusively a structural layer element **Specimen labels and section ornaments — `Cormorant`** - Weight 300 italic for the specimen border captions - Used only for inline botanical specimen labels (~3–4 instances on the page, never for navigation) ### Palette | Role | Name | Hex | |---|---|---| | Background (deep loam) | `--loam` | `#0F1A0D` | | Substrate stroke | `--moss-dark` | `#2C3D2A` | | Body text | `--vellum` | `#D4CEBC` | | Primary accent | `--viridian` | `#4A7A52` | | HUD lines | `--fern` | `#7A9B6E` | | Headings (display) | `--aged-gold` | `#B8A96A` | | Specimen label captions | `--lichen` | `#8FB07A` | | Cursor lens flare bloom | `--flare-core` | `#E8D89A` | | Flare halo | `--flare-halo` | `#4A7A5222` | | Section ornament | `--iron-gall` | `#7A6B3A` | --- ## Imagery and Motifs **No photographs.** The corpus uses photography at ~85% — ncbd.dev operates entirely without it. **Lens-flare as cursor phenomenon.** The sole "imagery" is a procedural lens flare that follows the cursor, implemented in canvas or SVG filter composition: - A primary bloom ellipse at cursor position: radial gradient from `--flare-core` at opacity 0.12 to transparent at radius 80px - Four anamorphic streaks extending from the bloom center at angles 15°, 75°, 165°, 255°: thin SVG lines 0.8px, 140px long, fading from `--flare-core` at opacity 0.18 to transparent - Two secondary hexagonal ghosts offset -0.3× and -0.7× the cursor vector from screen center: filled hexagons at 12px and 7px, `--flare-halo`, opacity 0.09 - The flare does not appear on load — it fades in on first `mousemove` over 800ms - On mobile (no cursor): the flare is replaced by a single ambient radial gradient at viewport center that breathes (scale 0.9–1.1 over 4s ease-in-out) **Substrate texture.** The fixed background SVG is generated from a seeded Voronoi with ~280 cells across the viewport. Cell edges are stroked at 0.3px `--moss-dark`. Selected cells (~12%) receive a slightly lighter fill (`#162614`) to simulate the irregular reflectivity of dried moss. This SVG is generated once at page load via a small inline script and cached in `sessionStorage`. **Vintage ornamental grammar:** - **Specimen-label borders:** Four corner pieces (L-shaped, 8×8px, 0.5px stroke, `--fern`) at the four corners of any designated "specimen block" — inline elements that frame a piece of text like a museum tag without enclosing it in a box - **Section ornament glyphs:** Unicode ✦ (U+2726, four-pointed star) centered between two fine rules as section dividers - **Intaglio rule lines:** Every major section begins with a 0.5px rule spanning the full 660px column width, then 4px gap, then a second 0.5px rule — the double-rule is the sole ornamental intrusion between sections - **Iron-gall marginal marks:** Small `›` chevrons (9px, `--iron-gall`) appear in the left gutter at paragraph starts within body sections, simulating marginalia indexing **No icons.** Navigation state (current section) is indicated by a filled 4px square glyph (`■`) in `--viridian` at the appropriate anchor point on the right vertical navigation rule. --- ## Prompts for Implementation Build ncbd.dev as **a single unscrolling field document**, the private working notes of someone whose research has arrived at a threshold. The site does not sell or explain a product — it presents an argument about a body of work, the way a scientist presents field notes to a colleague. Everything is evidence; nothing is marketing. **The three formal constraints that define implementation:** **Constraint 1 — Two spatial registers, never blended.** The substrate + HUD shell (position: fixed, pointer-events: none on the substrate, pointer-events only on HUD interactive elements) must be entirely separate from the scroll column in the DOM. Never put scroll content inside a fixed layer. Never make HUD elements respond to scroll position (except the section indicator in the status bar, which reads `scrollY` via a passive listener). The perceptual split between the static instrument and the scrolling document is the site's primary formal achievement. **Constraint 2 — The lens flare tracks the cursor without touching the DOM on every frame.** Implement the flare on a `` element (position: fixed, full viewport, pointer-events: none, z-index above substrate, below content). Render on `requestAnimationFrame`. Lerp the canvas draw position toward the actual cursor position at factor 0.08 per frame (smooth lag, not snap). On each frame, clear the canvas and redraw: bloom, four streaks, two hex ghosts. Precompute hex ghost path once. No DOM mutation per frame — only canvas 2D API calls. **Constraint 3 — The Voronoi substrate loads fast and is never regenerated.** Inline a small (~60 line) seeded Voronoi generator in a `