# Design Language for ncbd.dev ## Aesthetics and Tone ncbd.dev is **a quiet, dark observatory of swarms — a candlelit reading room for a distributed system that has no center, only neighbors.** The site name unfolds as *"Not Centralized, But Distributed"*, and the entire visual language refuses the genre conventions of distributed-systems pages: there are no green-on-black terminal cosplay, no neon hexagonal mesh diagrams, no "decentralization" stock vectors of glowing nodes on grids. Instead, ncbd.dev is a slow, **warm-dark room** where soft luminous bubbles drift in three-dimensional space — each bubble a peer, each connection a gossip whisper — and the reader scrolls down through a sequence of stacked vitrines, watching the swarm rearrange itself, gossip, repair, and forget. The mood is **friendly, slightly nocturnal, and unhurriedly didactic**. It is the tone of a librarian explaining anti-entropy at 11pm, with cocoa, to someone who has just understood why Paxos exists. Nothing about the page is aggressive: there are no "Get Started" CTAs in primary color, no accent-colored hover states screaming for attention, no testimonials, no pricing ladder, no logo carousel. The page does not sell — it *converses*. When the user mistypes a peer-id in the input demo, the field does not flash red; it gives a gentle, three-pixel rubbery jiggle, as if the field is tilting its head, mildly puzzled, like a polite cat asking *"are you sure?"*. Errors are not failures — they are part of how the swarm stays honest. The aesthetic register is **dark-mode** but explicitly *not* the cyberpunk dark-mode that dominates this corpus. Where 9% of designs use dark-mode and almost all of them pair it with neon accents, sci-fi HUDs, or chrome metallics, this design pairs dark-mode with **muted earth-tones**, **slab-serif**, and **chubby playful bubbles**. The result is closer in feel to a **vintage Pelican Books cover printed on indigo cardstock at 2am**, or to the inside of an aquarium-shop after closing — bioluminescent, warm-cool, friendly, scholarly, and slightly absurd. It is dark-mode as *a comfortable evening*, not as a *threat*. The deeper philosophical conceit: a distributed system has no privileged observer. Likewise, the site has no privileged hero — no big punchy product shot, no logo lockup at the top. The first thing the reader sees is **a swarm of 144 small drifting bubbles**, all roughly equal in visual weight, each one a peer that *could* be the entry point, none of which is. The reader picks one, hovers, and the swarm reveals itself, neighbor by neighbor, as a story about resilience without rulers. ## Layout Motifs and Structure The page is **a vertical procession of seven stacked rooms**, each a full viewport tall, each one a discrete chapter in the gentle pedagogical arc *"why distribute, and how"*. This is **stacked-sections** used as serious architecture — not as a fallback for a card grid, but as the deliberate rhythm of a long, calm reading. Each room has its own ambient color cast (still within the muted palette), its own micro-soundscape of drifting bubble motion, and its own piece of teaching. The reader walks the room, reaches the threshold, and steps into the next. **The Seven Rooms (top-to-bottom):** - **Room I — The Swarm.** A 100vh full-bleed dark canvas containing 144 floating, slightly translucent bubbles in muted indigo, ochre, sage, and dusk-rose. Bubbles drift in a slow Lloyd's-relaxation field, never colliding, occasionally exchanging a faint 1px gossip-line with their nearest 3 neighbors. The page name `ncbd.dev` is rendered in slab-serif at the lower-left, small, almost a footnote. There is no headline at the top. The subtitle reads, in lowercase italics: *"a network of equals; please scroll."* - **Room II — The Census.** A stacked-sections band introducing data-viz as the page's primary illustration mode. A single large hand-stroked **time-series strip chart** runs across the full width, showing the heartbeat of an example swarm of 24 peers over 30 minutes. The chart is drawn as if etched: 1px slab-serif tick labels, no axes filled in, gridlines as faint hairlines. - **Room III — The Whisper.** A teaching vignette on **gossip protocols**. A small interactive simulation occupies the right two-thirds; the left third holds slab-serif body copy explaining anti-entropy in two paragraphs. Hover any bubble in the simulation and a *whisper-trace* propagates outward through the swarm at the visible speed of gossip (about 8 hops per second, eased). - **Room IV — The Quorum.** **Consensus without a king.** A radial diagram (drawn as a soft circle of bubbles around a notional empty center) demonstrates how the swarm reaches agreement on a value, with one bubble at a time briefly enlarging as it casts its vote. The empty center is the entire point: there is no king-bubble. - **Room V — The Forget.** **Eventual consistency and the dignity of forgetting.** A slow time-lapse strip showing how a write propagates and how stale replicas update over time. A small sidebar quotes a single epigraph — *"a system that cannot forget cannot heal."* - **Room VI — The Mishap.** **Failure modes, gently demonstrated.** This is the room where `shake-error` lives in concentrated form: a small input asks the reader to "send a message to peer 0xab43...". Mistyped peer-ids, partition events, and split-brain conditions each provoke a *different* shake — an apologetic 3-pixel jitter for typos, a slow asymmetric sway for a partition (one half of the swarm visibly leaning away from the other), a brief slow-motion stagger for a crash-recovery cycle. The reader is invited to *cause* failures and watch the swarm absorb them. - **Room VII — The Garden.** Closing room. Slab-serif essay-length text in a single 56ch column, set against a faint, motionless tile of bubbles in the background — the same swarm from Room I, now still and asleep. A small, low-key footer bears the site name again and a single internal link: *"return to the swarm"*, which scrolls smoothly back to Room I. **Grid system.** A 12-column underlying grid at 1440px max width, but every room breaks it differently: Room I is a full-bleed canvas; Room II spans columns 1–12 for the chart, 3–10 for the body; Room III splits 5/7 between body and simulation; Room VI is centered to columns 4–9 with overflow allowed for shaking elements. Vertical rhythm follows a 1.5× modular scale anchored to 18px body type. Generous *ma* (negative space): 18–24vh of dark room above and below each chart. **Transitions between rooms.** A 12vh dark "threshold" zone separates each room. As the reader scrolls into a new room, the previous room's bubbles do not vanish — they *thin out*, drifting upward and out of frame, and a fresh constellation drifts in from below to populate the next room. Continuity matters: the swarm is *the same swarm* throughout the page; only its arrangement changes. This is a soft anti-cut: the page is one long continuous sky. **No CTAs, no pricing, no stat-grid.** Per the assignment's bias: no card-grid hero, no bento, no dashboard, no testimonial slab, no logo wall. The page sells nothing. ## Typography and Palette **Typography (Google Fonts only):** - **Headings & display: "Roboto Slab" (Google Fonts).** Slab-serif sits at only 2% of the corpus, making it a deliberately rare register here. Roboto Slab carries warmth and didactic clarity without the bookish formality of a Bodoni or Caslon. Used at clamp(2.5rem, 5.5vw, 5.25rem) for room titles, weight 500, letter-spacing -0.01em. Its blocky serifs read as friendly buttons stacked into letters — an architectural counter to the floating bubbles. - **Body: "Source Serif 4" (Google Fonts).** A modern, slightly humanist serif with broad apertures and a calm color on the page. Set at 18px / 1.65 line-height for long-form prose in Rooms II, V, and VII. Its open italics carry epigraphs and marginalia. - **Numerics & data labels: "JetBrains Mono" (Google Fonts).** The only mono on the page, reserved exclusively for hex peer-ids, latency milliseconds, and chart tick numbers. Mono is 81% of the corpus; here we contain it strictly to data, never to UI text — so that the page's *typography* feels slab-serif first, mono second. - **Lowercase ethic.** All headlines and most labels are lowercase, including the room titles ("the swarm", "the whisper", "the forget"). The lowercase softens the slab-serif's authority into something whispered rather than declared, reinforcing the friendly tone. **Palette (muted, dark-mode, eight named colors):** - `#0F1320` — *deep indigo paper.* Primary background of every room. Not pure black; a navy-leaning indigo that reads as the inside of a bookbinding. - `#1A2032` — *slate vellum.* Secondary surface for in-room cards (input fields, chart frames). 1 step lighter than the background. - `#E8E2D0` — *parchment cream.* Primary type color. A warm off-white, not a hard `#FFF`. This is the slab-serif's home. - `#A8A292` — *muted oat.* Secondary type color for marginalia and captions. - `#7C8C9C` — *fog blue.* Tertiary type color for chart axes and faint labels. - `#C99A6E` — *muted ochre.* The first accent. Bubble color #1, used sparingly for highlights. - `#8AAE8E` — *sage moss.* Bubble color #2, the "live and well" peer state. - `#B47B8A` — *dusk rose.* Bubble color #3, the "stale / forgetting" peer state. The palette is deliberately **muted** (24% of corpus) and explicitly *not* gradient-rich (gradient is in 81% of corpus and avoided here entirely). Where other dark-mode pages would reach for neon cyan or hot magenta accents, ncbd.dev uses muted ochre, sage, and dusk rose — colors that look like book illustrations rather than UI states. No saturated red for errors; the *shake* itself communicates error, and the bubble simply pauses its breathing. **Color application rules:** - All chart strokes are 1px and one of: `#A8A292`, `#7C8C9C`, `#C99A6E`. No filled chart areas. - Bubbles in the swarm draw their fill from `{#C99A6E, #8AAE8E, #B47B8A}` at 70% alpha against the indigo, with a 1px inner stroke of `#E8E2D0` at 12% alpha to give a faint candle-glow halo. - Hover state on any interactive bubble: a 3px outer ring at `#E8E2D0` 35% opacity, no color change. Color signals state, not interactivity. - Focus rings (keyboard): 2px solid `#C99A6E`, offset 3px. Required for the accessibility of the input demo, even though this design is otherwise *not* obsessing over accessibility audits. ## Imagery and Motifs **Data-viz as the primary illustration mode.** This page does not use photography, hand-drawn humans, or stock illustrations. Every non-textual element is a piece of **functional data-viz** — drifting bubble swarms, time-series strips, radial consensus diagrams, propagation traces, partition graphs. The data is sometimes real (a small live counter showing actual recent visits as drifting motes, if telemetry is configured) and sometimes synthetic (the simulation in Room III), but it is *always* a chart, never a decoration. Data-viz is in 5% of the corpus; here it is 100%. **The bubble.** The single, dominant decorative *and* structural motif. Each bubble is a circle of radius 14–22px, with: - a 70%-alpha fill in one of the three accent colors, - a 1px inner stroke of cream at low opacity (the candle halo), - a slow, breathing scale animation (scale 1.0 → 1.04 → 1.0 over 4.2s, each bubble out of phase with its neighbors by a small randomized offset), - a faint drift trajectory governed by Lloyd's relaxation against its 6 nearest neighbors (so the swarm looks alive but never overlaps), - and an optional gossip-trace: when triggered, it shoots a 1px hairline of cream toward 3 random neighbors over 320ms and fades. Bubbles are *bubble-playful* (4% of the corpus) but here they are not childlike — they are scientifically observed, like a frame from a microscope slide of a culture of paramecia, lit from below. **Gossip-traces.** The only "line" decoration on the entire page. Each trace is 1px, cream at 25% alpha, drawn as a quadratic Bezier between two bubbles with a small midpoint perturbation. Traces appear during interactive demos and during the autonomous breathing of the swarm (one trace every ~600ms in Room I). They never form a static graph; the network is only ever *visible in flashes*. **Aurora-margin.** A single subtle decorative element: along the left and right edges of every room, a 2vw-wide vertical band of *very faint* aurora-like vertical stripes — pale stripes of `#7C8C9C` and `#C99A6E` at 4% opacity, drifting upward at 8px/second. This is the only ambient motion in the page that isn't a bubble. It frames the rooms like the border of a wood-block print. (This is not an aurora-lights motif in the LED sense — it's quiet, almost imperceptible, more like the warmth of a far-off lamp through a curtain.) **Hand-drafted chart language.** All charts use **broken hairlines** rather than perfect 1px strokes. Each line, when drawn (via `path-draw-svg` over 1.4s on scroll into view), uses a `stroke-dasharray` of "120 1.5" with a tiny irregular jitter, giving the line the slight tremor of an etcher's needle. Numbers are set in JetBrains Mono at 12px, never animated up from zero — they fade in from 0 to 1 alpha over 800ms as the chart completes drawing. **No icons.** No icon font, no icon set, no inline SVG icons for "feature lists". The page lists features only in prose. The bubble is the universal pictogram. **No photography, no illustrated humans, no organic blobs.** All curvature is the bubble's circle. ## Prompts for Implementation **Narrative spine.** Build the site as a single `
` containing seven `
` elements, each `min-height: 100vh`. Use vertical scroll, no scroll-hijacking. The reader controls pace. The page is a *book of rooms*, not a guided tour with forced transitions. **Bubble swarm engine (Room I, used throughout).** - Maintain a single `BubbleField` JS module with 144 bubbles. Each bubble has `{x, y, vx, vy, hue, phase, neighbors[]}`. On `requestAnimationFrame`, for each bubble: compute Lloyd's relaxation force against 6 nearest neighbors (gentle repulsion at distance < 60px), apply 0.92 damping, add a tiny brownian jitter (±0.04px/frame), and clamp to a soft circular boundary that fits the current room's canvas. - Render with `` not `
` (144 animated DOM elements at 60fps would jank). Bubble fills are pre-baked sprites for each of the three hues so the canvas can `drawImage` rather than `arc` + `fill` per frame. - Across rooms, the same `BubbleField` is reused: when the reader scrolls from Room I to Room II, the field smoothly *resamples* — 36 of the 144 bubbles fade up into the chart-strip as data points; the other 108 drift offscreen above. When the reader returns to Room I (via the footer link), they fade back. The swarm is *one* swarm, not seven swarms. **Gossip propagation (Room III).** When any bubble is hovered or clicked, schedule a propagation: the source bubble emits a 320ms gossip-trace to each of its 3 random neighbors; each receiver, after a 220ms delay, does the same to *their* 3 neighbors; this continues for 5 hops then dies. Use a simple BFS with a `Set` to avoid revisits. The wave should *visibly fade and slow* as it expands — total propagation should reach the whole swarm in ~2.4s. **Shake-error vocabulary (Room VI).** Implement three named shakes, each a CSS keyframe + JS trigger: - `shake-typo`: 3 cycles of ±3px horizontal translate, 280ms, ease-out. Used when the reader types an invalid hex peer-id. - `shake-partition`: a 1.6s asymmetric rotation, max ±1.4deg, on the entire swarm canvas, where the *left half* and *right half* of the swarm rotate in opposite directions and re-align. Triggered by a "simulate partition" button. - `shake-recovery`: a 900ms slowed wave passing left-to-right across the swarm, each bubble bobbing 4px down and back as the wave reaches it, like a row of standing buoys absorbing a pulse. Triggered by a "simulate crash & recover" button. None of these shakes ever uses a saturated red. The shake *is* the error signal. **Scroll-triggered drawing.** All charts (Rooms II, IV, V) draw themselves on entering the viewport (via IntersectionObserver, threshold 0.4). Use `path-draw-svg` via `stroke-dasharray` / `stroke-dashoffset` animated over 1.4s. After drawing, numbers fade in (800ms). Charts redraw if the reader scrolls back up and into view again — the system is *always rehearsing*. **Storytelling, not features.** Each room's prose is two-to-five short paragraphs, in plain English, set in Source Serif 4 at 18px on a 56ch measure. No bullet lists. No "key benefits". No headline followed by three feature cards. The teaching is a small essay, illustrated by the live data-viz. **Cursor.** The default cursor is left as the OS default — no custom blob, no magnetic ring, no aurora trail. The bubbles are the *only* moving cursor of attention. **Sound (optional, default off).** A small toggle in the footer: a low ambient pad (one drone, ~120Hz, almost subliminal) and a gentle "tick" when a gossip-trace passes a bubble near the cursor. The default is silent. If the reader enables sound and then mistypes, the shake-typo also produces a single soft *tup* — an audio analog of the visual nudge. **Reduced motion.** Honor `prefers-reduced-motion: reduce`: bubbles cease drifting (they hold their last position), gossip-traces become instant single-frame flashes, shakes become a 1-frame outline pulse instead of a translate. The page remains beautiful at rest. **Performance budget.** Target 60fps on a 2018 MacBook Air. Cap the canvas pixel ratio at 2. Pre-bake bubble sprites. Throttle gossip-trace generation to one every 600ms in idle Room I. **No CTA, no signup, no email capture.** The page closes with a single internal link ("return to the swarm") and a small line of body copy in Room VII. There is nothing to buy or subscribe to. The page is content, not funnel. **Bias toward storytelling immersion:** the entire vertical scroll is a guided contemplation, not a marketing landing. Treat scroll position as the reader's heartbeat through a quiet building. Do not interrupt with modals, banners, cookie bars dressed as carnival rides, or chat widgets. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Slab-serif as the dominant voice on a dark-mode page.** Slab-serif is in 2% of the corpus; dark-mode is in 9%; their intersection is rare and almost always handled as either a brutalist editorial (sharp slabs, bright accents) or an old-typewriter mood. Here, the slab-serif is *Roboto Slab in lowercase, on warm cream against muted indigo* — a register more like a Pelican paperback at midnight than any existing dark-mode design in the dataset. This is `aesthetic: dark-mode` reimagined as a comfortable evening, not a threat. 2. **Bubble-playful as a serious data-viz vocabulary.** Bubble-playful appears in only 4% of designs and is almost universally used in cute, pastel, energetic landings (think: SaaS, kids' apps, vapor-pop). Here, bubbles are deployed as **scientifically observed peers in a distributed system** — animated by Lloyd's relaxation, exchanging gossip-traces, demonstrating Byzantine quorum and partition failure modes. Bubble-playful + data-viz + dark-mode + muted is, per the frequency report, an unprecedented combination. The bubbles are playful only in shape; their *behavior* is a teaching aid for anti-entropy. 3. **Shake-error as the only error signal, in muted color.** Shake-error is in 3% of the corpus and is normally accompanied by red flashes, hard shadow outlines, and aggressive haptics. Here, the shake is *the entire error vocabulary* — there is no red, no exclamation icon, no toast, no aria-live announcement of "Error". The page's gentle-cat jiggle, slow partition-sway, and post-crash buoy-bob are the full failure language. This makes errors feel like *participation in the swarm*, not punishment. 4. **A page about distributed systems with no terminal cosplay.** The corpus has 23% terminal aesthetic and 7% circuit motif. ncbd.dev refuses both. There is no `$` prompt, no `green-on-black`, no monospace headlines, no ASCII art, no fake `tail -f`. Mono is contained strictly to data labels (peer-ids, ms numbers). The visual register is library, not console. 5. **No CTA, no pricing, no stat-grid, no logo wall.** Per the SDESIGN bias, all five of these patterns are absent. The page exists only as *contemplative explanation*. There is no "Start Building" button. There is no "Trusted by" row. There is no "10x faster" stat tile. The single internal link in the entire page is `return to the swarm` in the footer. 6. **One swarm, seven rooms.** The continuity rule — that the 144 bubbles persist across all seven sections, drifting between roles (peer / chart-mark / quorum-vote / propagation-frontier / asleep-tile) — is, to the author's knowledge, not used elsewhere in the corpus, where stacked-sections (5%) typically reset visual elements between sections. The swarm is *the same swarm* from first scroll to last. This continuity *is* the product: a small lived demonstration of the page's thesis (the network has no center; only neighbors over time). 7. **Muted palette in a dark theme, no gradients.** The corpus pairs dark-mode overwhelmingly with neon, gradient, or chrome. ncbd.dev uses **eight muted, hand-named colors**, no gradients, no neon, no metallics. The accents (`#C99A6E`, `#8AAE8E`, `#B47B8A`) are the colors of old Penguin paperback bands, not LEDs. **Chosen seed (from assignment):** `aesthetic: dark-mode, layout: stacked-sections, typography: slab-serif, palette: muted, patterns: shake-error, imagery: data-viz, motifs: bubble-playful, tone: friendly`. **Avoided patterns (from frequency analysis):** - **hand-drawn aesthetic** (75%) — replaced by *etched* hand-drafted hairlines in data-viz only; no whimsical scribbles, no sketchy human icons. - **photography imagery** (80%) — entirely absent. Every visual element is functional data-viz. - **mono typography as primary voice** (81%) — mono is strictly contained to data; the page *speaks* in slab-serif. - **gradient palette** (81%) — entirely absent. Flat muted fills only. - **warm palette** (80%) — replaced with a cool indigo background and warm-but-muted accents; the overall temperature is cool-warm balanced, not warm-dominant. - **dashboard layout** (74%) — explicitly refused; the page is a stacked reading procession, not a tile grid of metrics. - **card-grid** (50%) — absent. There are no cards. - **parallax pattern** (77%) — absent. Scroll moves the page, not layers. - **stagger pattern** (68%) — replaced by gossip-propagation, which is staggered *in network-topological order*, not in DOM order. - **terminal aesthetic** (23%) — explicitly refused for a distributed-systems page that would conventionally adopt it. - **friendly tone via cute illustration** — friendly is achieved through *prose voice* and *gentle motion*, not through cartoon characters or rounded sans.