# Design Language for nlbd.dev ## Aesthetics and Tone nlbd.dev is **a smoke-stained 1928 hotel ballroom retrofitted as a peer-to-peer telegraph exchange** — the only place in the portfolio where Art Deco's vertical worship of the Single Tall Spire (the boss, the leader, the apex) has been *deliberately knocked sideways* into a horizontal lattice of equal copper rivets. The conceit is that the page is a **field manual for a leaderless network**, written in the nicotine-tinged voice of an old wire-room operator who has watched a thousand "primaries" fail and now trusts only the gossip of equals. There is no master node here, no hero block, no apex CTA — every section has the same standing as every other, and the page makes that fact visible by its very structure. The mood is **lacquered dusk**: the burnt-orange of a cooled radio tube glowing inside a black bakelite cabinet; the warm haze of brass under varnish; the soot of a steam-electric converter shed at 4 a.m. Nothing here is bright. Nothing here is glassy. Nothing here is "premium." This is **raw, road-worn, hand-built infrastructure that survived because it had no single point of failure** — and the visual register has to *feel* that. The typography is grand the way a depression-era municipal building is grand: vertical fluting, reeded thresholds, beveled chamfers — but cracked, slightly mis-registered, photographed through Vaseline-coated glass. The tone of the writing is **first-person plural and exhausted**: "we have not had a leader since 1971 and we do not miss him." Confidence without sales. Conviction without a pitch. This is **not a marketing site for a database**. It is a moody, almost-noir essay about why the leaderless topology is the honest one — staged inside a setting that looks like a forgotten Western Union switching room found behind a boarded-up movie palace. ## Layout Motifs and Structure The page is built on a **layered-depth** stack of seven translucent z-planes, each a flat plane of content that the reader perceives as floating at a measurable physical distance from the reader's eye. We are not stacking *sections*; we are stacking *strata*. From back to front: - **z=−6 — Soot field.** A dark, slightly noisy gradient-mesh that occupies the entire viewport, fixed-position, 0.92 opacity. This is the hotel's back wall. - **z=−4 — Reeded copper plate.** A repeating vertical-fluting pattern in `#7A3416` at 0.18 opacity, drawn as inline SVG stripes 6px wide / 11px gap, blurred 1.5px. This is the wainscoting; it scrolls 0.35× the viewport (parallax-by-depth, but only as a *scenographic* device — the reeded plate is part of the building, not a "parallax effect"). - **z=−2 — The ledger sheet.** An aged paper texture (sepia gradient mesh, faintly mottled) that scrolls 0.7× and carries small typewritten marginalia: dates, names of historical leaderless protocols (Paxos 1988, Chord 2001, Bitcoin 2008, Raft 2014), set in tiny mono. - **z=0 — The content stratum.** Where the reader's eye lives. Content cards float here. Scrolls 1.0×. - **z=+2 — The brass armature.** Thin chamfered Art Deco rules, corner ornaments, and section numerals in `#C97A3D`. Subtle, structural — the bones of the room. - **z=+4 — The dust.** Slow-drifting particle layer of warm-amber motes (canvas, ~24 particles, lazily floating right-to-left at 0.3px/frame). Scrolls 1.15×. - **z=+6 — The lens.** A faint full-bleed sepia vignette and a barely-visible scanline-on-glass shimmer that re-affirms we are *looking through* something old. Scrolls 1.3×. Within the content stratum (z=0) the **layout is a horizontal seven-node ring**, not a vertical column. The page introduces itself with a 100vh title plate, then the reader scrolls down and sideways into a circular cluster of **seven content nodes arranged on the points of a regular heptagon**, each node a card with its own stratum-set. The user can read them in any order — the page never picks a "first" one — and a thin SVG line draws between any node and any other when the cursor is near (the magnetic gossip channel). Below the heptagon, a final 100vh closing plate — also non-hierarchical, three equal-weight footnotes side-by-side, no "main" footnote. Crucially: **no full-width hero, no CTA strip, no pricing table, no stat-grid, no testimonials carousel, no feature columns**. The heptagon-of-equals *is* the content, and its geometric refusal to elect a top is the entire argument. The grid is `display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: auto;` — fourteen columns because seven node-positions × two visual halves each, never twelve, never sixteen. The fourteen-column reedwork is faintly visible as a 1px copper rule between every column at 0.06 opacity, only on `:hover` of any node. ## Typography and Palette **Display face — "Limelight" (Google Fonts).** A 1920s Art Deco display face with sharp chamfered terminals and tall, narrow, vertically-fluted capitals — the typographic equivalent of a Chrysler-building elevator door. Used for the wordmark `nlbd.dev` at `clamp(3.4rem, 11vw, 9rem)`, all-uppercase, letter-spacing `0.04em`, line-height `0.85`. Section titles in Limelight at `clamp(2.0rem, 5vw, 4.2rem)`. The dot in `nlbd.dev` is rendered as a small filled diamond `◆` in `--ember`, the Art Deco placeholder for a missing keystone. **Secondary display — "Poiret One" (Google Fonts).** Even thinner, more geometric Deco — used only for section numerals (I — VII), set in Roman numerals at `clamp(4rem, 9vw, 7rem)`, `font-weight: 400`, color `--brass-tarnish` at 0.45 opacity. The numerals sit *behind* their section titles at z=−1, half-clipped — they are the room's date-stones, not headings. **Body face — "EB Garamond" (Google Fonts), 400/500/italic 400.** A warm, slightly-old-bookish humanist serif that carries the "wire-room operator's notebook" voice. 1.06rem, 1.72 line-height, color `--ledger-cream` at 0.88 opacity. Italic used for inline historical asides ("*as Lamport observed in 1978*"). Drop caps at the start of each node, 4-line, in Limelight, `--ember`. **Mono face — "JetBrains Mono" (Google Fonts), 400.** Used only for: protocol names in marginalia, the small heptagon-edge labels (Paxos, Raft, etc.), and the bottom-left diagnostic strip that prints a fake gossip log line every 6 seconds. 0.78rem. **Palette (locked to a burnt-orange spine, NOT the corpus's typical warm-honey gradient):** - `--soot` `#0F0A07` — the hotel back wall; primary background. - `--bakelite` `#1A120C` — interior card surfaces; second-darkest. - `--ledger-cream` `#E8D9B8` — body text on dark; aged-paper warmth, never pure white. - `--ember` `#D6541E` — the burnt-orange anchor color; accents, drop caps, the diamond keystone, hover states. *This is the singular spine color of the design.* - `--ember-deep` `#7A3416` — the cooled-tube hue; reeded wainscoting, secondary accents. - `--brass-tarnish` `#C97A3D` — Art Deco corner ornaments, Roman numerals, hairlines. - `--copper-verdigris` `#3D5A4C` — used *exclusively* for the gossip-link SVG strokes between nodes (the only cool color on the page; reads as oxidized copper, not "blue"). - `--smoke` `#2A1F18` — gradient-mesh midtones in the soot field. No pure black, no pure white, no gradients-of-the-rainbow. The palette has eight stops and seven of them are warm — the verdigris is the lone deliberate dissonance, used only to mark the *connections between equals*, never the equals themselves. ## Imagery and Motifs **Primary imagery — gradient-mesh photographic compositions of vintage telegraph and radio hardware**, treated as if shot on Kodak Verichrome Pan in 1947 and badly stored. Each of the seven heptagon nodes carries one mesh-blended hero illustration: 1. A **brass repeater coil** (multi-tap inductor on a wooden chassis). 2. A **rotary teletype keyboard**, three-quarter view, all keys equal-sized. 3. A **carbon-microphone array** — six identical mics on a circular bracket, no central mic. 4. A **paper-tape gossip ribbon** spilling out of a Creed model 7B punch. 5. A **set of seven brass tuning forks** of identical pitch, mounted in a ring. 6. A **wire-room schematic** in negative — white lines on dark, no labeled "controller" node. 7. A **smoke-glass voltmeter** at idle, needle exactly at center. Each is generated as a **layered gradient-mesh in CSS** (no raster images for the heroes — the entire site is bandwidth-light). The mesh uses 5–7 conic-gradient layers stacked with `mix-blend-mode: multiply` to produce the soft photographic edge-fall of an old salt print. Over each, a deterministic `.svg` line-overlay draws the *outline* of the implied object in `--brass-tarnish` at 1.2px stroke, so the object reads as a half-painted, half-engraved diagram — not a photograph and not a vector, but the residue between them. **Motif — vintage, narrowly defined as 1920–1950 American electrical-mechanical infrastructure.** Avoided: typewriters as "writing romance," phonograph horns as "music nostalgia," art-deco-as-Gatsby. Embraced: load coils, cross-bar switches, kilocycle dials, signal flags, brass nameplates with stamped-serial numbers, paper insulator cones, oilcloth-bound technical manuals. **Decorative ornaments:** Each section corner carries a small Art Deco corner-piece in inline SVG — three reeded vertical lines stepping up to a chamfered diamond — drawn from the *real ornamental vocabulary of late-1920s switchboard cabinetry*, not the ballroom-side of Deco. Section dividers are `||| ◆ |||` in `--brass-tarnish`. The wordmark `nlbd.dev` is flanked left and right by two miniature reeded columns 14px wide. Roman numerals I–VII are the section glyphs; never Arabic, never icons. **Typed marginalia:** The z=−2 ledger stratum carries faint italic Garamond annotations in the gutter — real historical sentences such as *"Cannot find a primary; gossiping with peers."* (from a 1979 Tandem NonStop log) and *"All forks are equal."* — a single sentence per scroll-thousand-pixels. They are not decoration; they are the page whispering to itself. ## Prompts for Implementation **Single static HTML document, no build step, no framework, no router.** The page is a long descent: 100vh title plate → seven-node heptagon (the user is *invited* to pan and read in any order) → 100vh closing plate. The narrative is the geometry: the reader's eye discovers, without being told, that there is no top of the page. **Open with a 100vh title plate that does NOT pitch.** Center-set wordmark `nlbd.dev` in Limelight, `--ember` for the diamond, `--ledger-cream` for the letterforms, against the soot field with the reeded wainscoting visible at the lower 30%. Below the wordmark, in EB Garamond italic at 1.1rem: *"There has been no leader here since 1971. We do not miss him."* No subtitle slide-in, no scroll-cue arrow, no buttons. Hold for two seconds of stillness on first paint; let the user *find* the scroll on their own. **The heptagon experience occupies a `position: sticky; height: 100vh;` viewport while the page scrolls vertically — but the user navigates it horizontally with cursor + magnetic attraction.** Center of the viewport is the unmarked center-of-heptagon (no node lives there — *the absence of the leader is a literal pixel*). Seven cards are placed at the seven vertices. As the cursor moves, each card subtly leans 4–8px *toward* the cursor (the magnetic pattern), and a `--copper-verdigris` SVG line draws from the cursor-nearest card to its two heptagonal neighbors only — gossip links, not broadcasts. Click a card and the page does NOT navigate; it expands the card *in place* using a slow card-flip-feel reveal (not a card-flip — a brass-hinge swing, 720ms cubic-bezier(.62,.04,.38,1)) into a full-card reading view, while the other six cards drift outward slightly to make room. Esc or click-outside collapses it. The URL hash updates so any node is shareable, but the default state has *no* hash — there is no canonical entry point. **Magnetic attraction — done correctly, not as a gimmick.** The seven cards have an attractive pseudo-physics: each frame, each card computes `dx, dy` between its center and the cursor; if `distance < 320px`, it offsets its translate by `(dx/distance) * easing(distance) * 8px`. Cards farther than 320px do not move. Crucially, **no card ever moves more than the others when the cursor is equidistant** — they are equals. The animation runs in a single `requestAnimationFrame` loop, gated by `prefers-reduced-motion: reduce` (in which case the cards remain perfectly still and the gossip links draw on focus instead of hover). **Layered-depth scroll — done as scenography, not parallax-as-fashion.** The seven z-planes (described in Layout Motifs) each move at their own multiplier on `scroll`. Reduced-motion freezes all of them at 1.0×; the soot, ledger, brass, dust, lens layers stop drifting and become a single still photograph. **The gossip-log diagnostic strip.** Bottom-left, fixed, 240px wide, JetBrains Mono 0.72rem, `--brass-tarnish` at 0.55 opacity, prints a synthesized gossip log line every 6 seconds: `04:17:22 peer-3 -> peer-5 [seq=8842 ack=8841] OK`. Lines scroll up and fade at the top after five of them. The log is **fake but plausible** (real Raft-style sequence-and-ack semantics; never a fabrication that would mislead a real engineer reading it). **Each of the seven node-cards** has its own internal layout — long-form Garamond essay (4–7 paragraphs) prefixed by a Limelight Roman numeral and a short Limelight title in `--ember`. A pull-quote in italic EB Garamond at 1.6rem is inset right. At the foot of each card, three small `--brass-tarnish` rules followed by a single italic line of marginalia (the wire-room operator's voice signing off: *— op. 7, second shift*). **Closing plate (100vh, after heptagon).** Three side-by-side equal-weight columns titled `LEDGER`, `WIRE`, `INDEX` — never `Resources / Contact / Newsletter`. Each is a list of plain `` links in EB Garamond, underlined hairline `--brass-tarnish`. No newsletter signup, no social-icon strip, no copyright-as-corporate-stamp; just a Roman-numeral year `MMXXVI` and a single line: *"This network has no center. It has only edges."* **Performance and craft.** All seven hero illustrations are pure CSS conic-gradient meshes + inline SVG outlines — total page weight target under 90KB excluding fonts. Fonts are subset to Latin + Roman numerals + ◆. Print stylesheet renders the heptagon as a flat seven-row table of essays (the print fallback also has no leader — it is alphabetized by node name). **AVOID without exception:** no full-width hero CTA, no pricing block, no stat-grid (e.g. "99.999% uptime"), no logo wall of "trusted by," no testimonials carousel, no glassmorphic blur on cards, no neon glow, no animated SVG of a "blockchain," no rotating cube, no bento-box, no comparison table against "centralized databases." The site argues by what it *is*, not by what it claims. ## Uniqueness Notes Differentiators from the 340-design corpus: 1. **The seed-stack `dark-mode + layered-depth + art-deco-display + burnt-orange + magnetic + gradient-mesh + vintage + raw-authentic` is unique in the portfolio.** Per the frequency report: art-deco-display sits at 4%, burnt-orange palette at 2%, layered-depth layout at 10%, raw-authentic tone at 3%. No prior site combines all four — and crucially, no prior site has paired Art Deco *typography* with a `raw-authentic` *tone*. The corpus's existing art-deco sites lean luxurious or opulent-grand (e.g. namu.works and oning.stream). nlbd.dev is the first to take the Deco vocabulary and *de-glamorize* it — the Chrysler Building's elevator doors as imagined inside a 1947 wire-room rather than a 1929 ballroom. 2. **The page architecturally refuses leadership.** The seven content nodes sit on a regular heptagon with mathematically equal weight; the cursor-center-of-heptagon is *empty by intention*; URL has no canonical hash; print fallback alphabetizes; closing plate has no "primary" footnote. This is the only site in the corpus where the leaderless distributed-systems thesis is enforced by *layout geometry* rather than illustrated by graphics. (Frequency report: card-grid 50%, dashboard 74%, hero-dominant 7% — every common layout *has* a leader. Heptagon-of-equals has zero precedent.) 3. **No CTA, no pricing, no stats, no testimonials — by design constraint, not omission.** Per orchestrator guidance and the bias toward full-screen narrative experiences. The only "calls" on the page are to *read* a node and to *follow a link*; neither is styled as a button. The closing plate's three columns deliberately rename the conventional footer trio to break the pattern muscle-memory. 4. **Burnt-orange used as a *singular spine* color, not a gradient stop.** The 80% of the corpus that uses `gradient` palette and 80% that uses `warm` palette typically *blend* warm hues into honey-and-peach gradient meshes. Here `--ember` `#D6541E` is a discrete, named color used only for: the wordmark diamond, drop caps, hover affordances, and the diagram outlines. It never blends. It never fades. It is the page's only saturated voice, and its sparingness is the point — like a single ember in a cooled forge. 5. **Avoided overused patterns:** parallax (77%) is reframed as scenographic z-stack rather than the standard scrolling-image-trick; stagger (68%) is unused — the seven nodes appear *simultaneously*, because a stagger would imply ordinal hierarchy; spring (34%) and scroll-triggered (31%) are unused for the same reason. Embraced the underused magnetic (19%) and explicit layered-depth (10%) instead. 6. **Documented chosen seed (planned):** `aesthetic: dark-mode, layout: layered-depth, typography: art-deco-display, palette: burnt-orange, patterns: magnetic, imagery: gradient-mesh, motifs: vintage, tone: raw-authentic`.