# Design Language for nlbd.dev ## Aesthetics and Tone **nlbd.dev** is read as *"Notes from a Long, Bad Dream"* — a developer's nocturnal logbook: the place where half-remembered architectures, debugging fever-dreams, and 4 a.m. epiphanies are transcribed before they evaporate. The aesthetic is **surreal nightscape rendered with the discipline of a printed almanac** — not whimsical, not cute, not glitchy. Think of an old astronomical ephemeris reprinted on cheap blue paper under a single sodium-vapour streetlight: the grain of bad photocopying, the cold of pre-dawn, the warm sickly amber of the one lamp still on. The mood is **mysterious-moody crossed with dreamy-ethereal**, but kept rigorous and quiet — every page feels like it was *typeset*, not designed; like a field notebook that happens to dream. The site never shouts. It never sells. There is no onboarding, no "get started", no comparison table. It is a single long descent through a remembered dream, narrated in the calm, slightly disoriented voice of someone who just woke and is writing fast before the thread snaps. The emotional target: the specific melancholy of a thought you *almost* kept. ## Layout Motifs and Structure A **single uninterrupted vertical scroll** built on an **editorial-flow / broken-grid** spine — explicitly NOT a card-grid, NOT a bento box, NOT centered hero blocks. The page is laid out like the spread of a stitched notebook: a **narrow 9-column manuscript grid** where the *text column* deliberately drifts — sometimes hugging the left margin (column 1–5), sometimes pushed to the gutter-right (column 4–9), sometimes split mid-paragraph by a ruled horizontal line, as if the dreamer ran out of room and continued on the next available space. Margins are generous and asymmetric: a fat left margin (18vw) on "waking" passages, near-zero margin on the "deep sleep" passages where the type runs edge to edge. Structural motifs: - **Marginalia rail** — a thin left-side column reserved for hand-typed annotations: timestamps ("03:47"), fragments ("see also — the elevator"), and small celestial glyphs. It scrolls slightly slower than the body (gentle parallax), like notes pinned to the spine. - **Ruled interruptions** — full-bleed 1px horizontal rules in dim amber that split the dream into "REM cycles" (sections), each labeled with a Roman numeral and a fictional sleep-stage name (*I — Hypnagogia*, *II — The Long Corridor*, *III — Recursion*, *IV — The Page That Wasn't There*, *V — Surfacing*). - **Drift columns** — at two points the layout fractures into two unequal columns running different paragraphs at once; the reader chooses which thread to follow, the other greys out as it leaves the viewport. - **No footer in the conventional sense** — the dream just *ends* on a half-finished sentence and a single blinking caret in the margin, then a hairline rule and a 10px monospace colophon. ## Typography and Palette **Type system — Google Fonts only:** - **Body / narrative serif:** `Spectral` (weights 300, 400, 500; italic used heavily). Spectral is a screen-tuned serif with a slightly literary, slightly cold cut — open counters, low contrast, a faint newspaper-revival flavour. Set at 19px / 1.7 line-height, `-0.003em` tracking. Dream passages drop to `Spectral` italic 300 at 17px to feel softer, more slurred. - **Marginalia / timestamps / colophon / code fragments:** `IBM Plex Mono` (weights 400, 500). Used at 11–13px, letter-spacing `0.02em`, for everything that feels *recorded* rather than *written* — the annotations, the section codes, the inline `snippets` the dreamer half-remembers as code. - **Section headers / sleep-stage titles:** `Newsreader` (weights 400, 500; optical-size large; italic). A high-contrast Scotch-revival display serif — used at oversized 56–88px, italic, in the dim amber, for the Roman-numeral REM-cycle headers. It looks like the running head of an old journal. - **The single waking word:** the very last word of the page is set in `Bebas Neue`, 120px, cold white — the one moment the dream becomes a fact. Used exactly once. **Palette (cool, deliberately *not* warm — defies the 98% warm convention):** - `#0B1020` — *ink-night*: near-black with a blue undertone, the base of the page. - `#141B33` — *deep-rem*: slightly lifted panel blue for the "deep sleep" full-bleed passages. - `#1E2A4A` — *corridor-blue*: mid blue used for ruled boxes and the drift-column dividers. - `#C8D4F0` — *moonpaper*: the primary text colour — a cold, faintly lavender off-white, like paper under moonlight (never pure #fff for body). - `#7E8AAE` — *fog-grey*: secondary / greyed-out thread text and marginalia default. - `#E6A23C` — *sodium-lamp*: the ONLY warm colour — the single amber accent, used for ruled interruptions, section numerals, the blinking caret, and link underlines. It should feel like the one streetlight still burning. - `#F4F7FF` — *waking-white*: reserved exclusively for the final Bebas word. Roughly 92% of the palette is cold blue/grey; the amber appears in maybe 4% of pixels. Contrast is high but never neon. ## Imagery and Motifs No photography (defies the 98% photography convention). All imagery is **generative line-art and risograph-grain texture**, drawn as SVG/canvas: - **Star-celestial chart fragments** — faint constellation-style line drawings in the margins, but the constellations are *wrong*: they connect into shapes like a keyboard, a staircase, a door, a recursive spiral. Drawn at ~6% opacity in fog-grey, with the connecting lines animated to draw themselves (path-draw) as you scroll past. - **The recurring door** — a single rectangular doorway outline, hand-measured with little dimension-arrows like an architect's sketch, reappearing at three different scales through the page (small in margin → page-width at REM cycle IV → finally drawn as just two vertical lines and nothing between them). It is the dream's leitmotif. - **Riso-grain overlay** — a fixed, very subtle film-grain / halftone-dot texture (think cheap 2-colour risograph misregistration) layered at ~5% over everything via a tiled PNG or SVG turbulence filter, with the amber channel offset 1–2px from the blue channel for that printed-wrong shimmer. - **Floating fragment-cards** — occasional small (~200px) rotated rectangles, like torn notebook scraps, holding a single italic sentence each; they drift up *very* slowly (parallax, 0.85× scroll speed) and rotate ±2°. Not interactive — they are debris, not buttons. - **The caret** — a single amber `▏` block-caret that lives in the marginalia rail and blinks at a slow, irregular interval (1.0s, 1.0s, 1.4s, 0.6s — a hand-tuned non-uniform loop), as if a cursor were waiting for the dreamer to keep typing. - **Numeral seals** — each REM-cycle header gets a small circular "seal" containing the Roman numeral, drawn like a faint embossed stamp in corridor-blue with an amber ring. ## Prompts for Implementation Build **nlbd.dev** as a **single HTML page + one CSS file + one ES module** — no framework, no build step, no router. The entire experience is a ~2-minute downward read through a remembered dream in five "REM cycles". There is **no navigation bar, no CTA, no pricing, no signup, no testimonials, no stat grid, no logo wall, no FAQ, no contact form, no cookie banner, no chatbot**. The only "navigation" is scrolling and an optional keyboard `j/k` to step between REM cycles. **Narrative spine (five sections, vertical scroll):** 1. **Prelude — the colophon-at-the-top.** Before the dream: three lines of IBM Plex Mono in fog-grey, hung in the left margin — a date that's slightly impossible (`Februrary 31`), a "transcribed at" time, and the single line *"these are notes from a long, bad dream. read downward. do not try to wake."* The page title `nlbd.dev` sits small, lowercase, in the corner — never enlarged. 2. **I — Hypnagogia.** Short paragraphs, wide left margin, Spectral 400 → drifting into 300 italic. Marginalia timestamps tick. The first wrong-constellation draws itself. Establish the door (small, in the margin). 3. **II — The Long Corridor.** Type pushes to the right gutter. A drift-column fracture: two threads — one describing walking, one describing *being walked*. The unfollowed thread greys out. Riso-grain becomes slightly more visible. 4. **III — Recursion.** Full-bleed deep-rem blue panel; type runs edge to edge, line-height tightens, a paragraph literally repeats itself with one word changed each time (animate the word swap on scroll, very subtly — `blur-focus` micro-transition). Floating fragment-cards drift through. 5. **IV — The Page That Wasn't There.** The door reappears at page width, drawn with architect dimension-arrows. Then a passage about a notebook page that's blank — and here the actual page goes nearly blank: a single italic line in the vertical centre of an otherwise empty viewport, lots of `ma` negative space. 6. **V — Surfacing.** Margins snap back to symmetric, type warms in *weight* (not colour) from 300 → 500, paragraphs shorten, the constellations fade out. The last sentence is unfinished — "and the thing I was supposed to remember was" — then a line break, the blinking amber caret, and one beat later the single word **"gone."** in Bebas Neue 120px, waking-white, centred. Hairline rule. 10px mono colophon: `nlbd.dev — transcribed before it could be kept.` **Animation & interaction guidance:** - **Scroll-driven, never scroll-jacked.** Native scroll. Use `IntersectionObserver` + a small scroll-progress signal to trigger: constellation path-draw, the recursion word-swaps, the door scale changes, marginalia parallax. - **Parallax layers, gentle:** marginalia rail 0.92×, fragment-cards 0.85×, riso-grain fixed (1.0× but `position:fixed`), body 1.0×. - **Typewriter, used sparingly:** only the prelude lines and the final unfinished sentence type themselves in IBM Plex Mono / Spectral respectively — slow, with the non-uniform caret cadence. Nothing else types. - **`prefers-reduced-motion`:** collapse all parallax and path-draw to instant; the caret still blinks (slow, uniform); the recursion word-swaps become a static stacked list. - **Cursor:** no cursor-follow blob, no magnetic buttons. The only cursor flourish: when the pointer is still for >3s, a faint amber underline draws itself under whatever word is nearest the cursor, then erases when you move — "the dream noticing you stopped reading." - **Colour discipline in code:** ship a CSS custom-property palette; assert in comments that `--sodium-lamp` may only be applied to: rules, section numerals, the caret, link underlines, the cursor-pause underline. Body text is always `--moonpaper`. The waking-white is used on exactly one element. - **Type the dream content as real prose** — write ~6 short evocative passages of genuine dream-logic text (corridors that loop, a door with a number that keeps changing, code that compiles only while you're not looking). Placeholder lorem is forbidden. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card-grid hero sections, glassmorphism panels, hand-drawn doodle decoration, warm gradient meshes, stock photography, hamburger menus, sticky headers. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Cold-blue palette in a corpus that is 98% warm.** Almost every other design leans honeyed/terracotta/sunset; nlbd.dev is sodium-streetlight blue with a single 4%-of-pixels amber accent. It is the cold of pre-dawn, not the warmth of a cottage. 2. **An editorial-flow / broken-grid manuscript layout, not a card-grid.** 90% of the corpus uses card-grid; this one uses a drifting 9-column notebook spine with marginalia, ruled interruptions, and two-thread drift-columns — the page reads like a stitched journal, never like a dashboard or a bento box. 3. **Serif-revival body type (Spectral / Newsreader) over the corpus's 94% mono-default** — mono is demoted here to *marginalia only*, deliberately inverting the usual hierarchy. The dream is *written* in a literary serif; only the *recorded annotations* are monospace. 4. **No imagery photography at all** — pure generative wrong-constellation line-art + risograph-misregistration grain, against the 98%-photography norm. 5. **Surreal aesthetic in a *quiet, almanac* register** rather than a glitchy or maximalist one — and a structure with literally zero conversion surface (no CTA, no form, no nav), which is rare even among the immersive-scroll minority. **Chosen seed / style:** *aesthetic: surreal + grainy-textured, layout: editorial-flow / broken-grid, typography: serif-revival + tech-mono (inverted hierarchy), palette: midnight-blue + single sodium-amber accent, patterns: typewriter-effect + path-draw-svg + blur-focus, imagery: generative-art / line-illustration / grain-overlay, motifs: star-celestial + floating-elements + sharp-angles, tone: mysterious-moody + dreamy-ethereal* — derived from the underused seeds "surreal dreamscape promo" and "experimental type layout". **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (79%), card-grid (90%), full-bleed-hero/centered (88/83%), warm palette (98%), gradient palette (95%), photography (98%), cursor-follow (89%), magnetic (81%), parallax-as-spectacle, pastoral-romantic tone (35%), mono-as-body-default (94%).