# Design Language for nfth.ing ## Aesthetics and Tone nfth.ing is a **museum of nothing** — a hushed, almost empty digital pavilion built around the joke and the koan hiding inside the domain: the bare consonants `nfth` collapsing across the dot into the word *nothing*. The site refuses the thing it is named after; it is a website that is mostly absence, deliberately under-furnished, treating empty space not as a failure to fill but as the exhibit itself. The mood is **japanese-minimal** crossed with **zen-contemplative**: the silence after a temple bell, a single white room with one object in it, a sheet of rice paper holding one stroke of ink. Think of the *ensō* — the hand-drawn Zen circle, painted in one breath, deliberately left open — and of *mu* (無), the famous "nothing/no-thing" answer in the Mu kōan. The tone is dry, patient, faintly witty: the site knows it is a stunt about emptiness and commits to it with total seriousness, the way a tea ceremony is serious about an empty bowl. Nothing flashes. Nothing demands. The visitor is meant to feel they have wandered into a very quiet gallery five minutes before it opens, and decided to stay. The frequency analysis is the second author here. The corpus is drowning in `hand-drawn` (96%), `glassmorphism` (79%), `warm` palettes (98%), `gradient` (95%), `parallax` (92%), `cursor-follow` (89%), `card-grid` (90%), `full-bleed` (88%). nfth.ing does the opposite of nearly all of it: cool near-monochrome, almost no gradient, no parallax, no card grid, single column, restraint as a flex. The one borrowed-from-the-crowd move is a single, disciplined `path-draw-svg` ensō — and even that is rare enough (40%, and almost never used this way) to feel deliberate. ## Layout Motifs and Structure A strict **single-column** spine — frequency shows `single-column` at only 17%, against `card-grid` 90% and `full-bleed` 88%, so the column alone is a uniqueness move — running down the dead center of a viewport that is overwhelmingly empty. The page is built as a vertical sequence of **seven empty rooms**, each one a full 100vh band. Each room is `ma-negative-space` (15% in the corpus) taken to an extreme: text and marks are confined to a central measure of roughly 34rem, and the surrounding 60–70% of every screen is intentionally, conspicuously blank — a wide silent margin that the eye is invited to rest in. - **Room 0 — The Threshold.** A single centered word: `nothing`, set very small (1rem), tracked wide, low on the screen. Above it, four-fifths of the viewport is empty paper. A faint hairline (1px, near-invisible) runs across the page at the exact vertical center, the only structural mark. - **Room 1 — The Ensō.** Centered in the void, a single hand-drawn circle, ~40vmin diameter, stroke-drawn over ~4 seconds when it scrolls into view, then left to sit. It does not loop. It is drawn once. The circle's gap (every ensō has one) faces lower-right. - **Room 2 — Mu.** The character 無 rendered enormous (38vmin), nearly the same value as the background so it is barely there — a watermark you have to lean in to see. A one-line gloss below it in small mono: `the answer to the kōan is not a thing`. - **Room 3 — The Inventory.** A list of what the site contains, set as a single tall narrow column of lines, each line a dash and then empty: `—`, `—`, `—`, `—`. Six of them. A caption: `contents`. The joke lands quietly. - **Room 4 — Negative Space, Named.** A short essay-fragment (4–6 lines, 18px) on *ma* (間), the Japanese concept of the meaningful interval — the pause in music, the gap between buildings, the empty area of a painting. This is the only room with more than one sentence of prose. It sits left-of-center, breaking the column once, on purpose. - **Room 5 — The Counter.** A number, large but thin, that counts: `0`. It never changes. Below: `things added since launch`. A static counter is its own small piece of `anti-design` wit against the corpus's love of `counter-animate` (14%). - **Room 6 — Exit.** The word `nothing` again, same size as the threshold, now at the top of the screen, with the rest below it empty — a mirror of Room 0. A final hairline. Then real blank space: a full extra 60vh of nothing before the document ends, so the scrollbar tells you there is more, and there isn't. No header. No nav bar. No footer with links. No `card-grid`. No `dashboard`. No `hero-dominant` splash. The scroll itself is the only interface, and it is mostly scrolling through emptiness — which is the content. ## Typography and Palette **Typefaces — Google Fonts only, two families:** - **Zen Kaku Gothic New** (weights 300, 400, 500) — yes, it is literally named "Zen", and it is a real Google Font, a clean Japanese-Latin gothic with calm, even proportions. Used for: the wordmark `nothing` (weight 300, tracking +0.4em, lowercase), the 無 watermark in Room 2 (weight 300, the typeface's CJK glyph), all body prose in the *ma* fragment (weight 400, 18px, 1.9 line-height — generous leading is part of the emptiness), and the large thin `0` in Room 5 (weight 300, 14vmin). Its restraint is the point; it never shouts. - **Space Mono** (weights 400, 700) — the corpus is 94% `mono` so monospace is not itself novel, but here it is used sparingly and coolly, only for the small annotations: `contents`, `things added since launch`, `the answer to the kōan is not a thing`, the dash-lines in the Inventory. Set tiny (12–13px), tracked slightly, in a muted grey. It is the museum placard typeface — small text beside an empty plinth. **Palette — cool near-monochrome, the deliberate inverse of the corpus's 98% warm / 95% gradient:** - `--paper: #F4F5F3` — a cool off-white with the faintest green-grey cast, like unbleached gallery wall, like the back of rice paper. The dominant color by far; ~95% of every screen. - `--ink: #2B2E2C` — a soft near-black with a green-grey undertone, never pure #000. The ensō stroke, the wordmark, the prose. - `--mist: #DDE0DC` — pale grey-green, used for the 無 watermark, the hairlines, and disabled-looking elements. Barely a step from the paper. - `--placard: #8C928D` — a muted sage-grey for all Space Mono annotations and the Inventory dashes. The only "secondary" color. - `--seal: #B0473B` — a single muted, dusty vermilion (the color of an inkstone seal / hanko), used exactly once on the whole site: a tiny 12px square in the lower-right of the ensō room, the artist's stamp beside the circle. One spot of color in an otherwise colorless site, and never repeated. No gradients except one: an almost-imperceptible vertical wash on `--paper` from #F4F5F3 to #F0F1EF, top to bottom, so soft it reads as light, not color. That is the entire concession to the corpus's gradient addiction. ## Imagery and Motifs The site has, in effect, **almost no imagery** — and that is the design. - **The Ensō (path-draw-svg).** The single hero image of the entire site: one SVG circle, drawn with an irregular, brush-like variable-width stroke (built as a closed path with `stroke-dasharray`/`stroke-dashoffset` animation, ~4s ease-out, fired once via IntersectionObserver). The path is deliberately imperfect — slightly elliptical, the stroke tapering at the open gap, a faint "second pass" overlap where a real brush would double back. It is `ink` on `paper`. It never loops, never resets, never follows the cursor. After it draws, it is just there, the way a painting is just there. - **The 無 watermark.** Room 2's giant `mu` glyph, set in `--mist` against `--paper` — a typographic image more than a character. Optionally given a 1px hand-jittered SVG outline so it reads as "drawn" rather than "typed", but kept whisper-faint. - **Hairlines.** 1px rules in `--mist`, full-width, used as the only structural decoration — in Rooms 0 and 6, and nowhere else. They evoke the fold-line of a folded sheet, the horizon, the single ruled line of a notebook. - **The seal.** The lone 12px `--seal` vermilion square (Room 1), the only saturated pixel on the site. It is the punctuation mark of the whole experience. - **Grain.** An extremely subtle paper-grain noise overlay (SVG `feTurbulence`, opacity ~0.025, `mix-blend-mode: multiply`) — `grain-overlay` is only 9% in the corpus — to keep the vast empty `--paper` from looking like a flat unloaded ``. It should be invisible until you put your face near the screen. No photography (the corpus is 98% photography — opting out is itself the statement). No icons. No illustrations beyond the ensō. No `organic-blobs`, no `gradient-mesh`, no `glassmorphic-cards`. The decorative budget for the entire site is: one circle, one character, two hairlines, one tiny red square, and some grain. ## Prompts for Implementation Build this as a **single static HTML document** — no SPA, no framework, no router, no build step. Vanilla HTML, vanilla CSS (custom properties + a couple of `clamp()`s for fluid type), and one tiny JavaScript file (~2KB) that does exactly two things: fire the ensō stroke animation on first scroll-into-view (IntersectionObserver), and respect `prefers-reduced-motion` (if reduced, the ensō appears already-drawn, no animation). Total page weight target: well under 60KB before fonts. The whole site should feel like it loaded instantly because there is, genuinely, almost nothing to load. **Storytelling spine — the visit to the museum of nothing:** The visitor arrives at a near-empty page (Room 0): a small lowercase `nothing` floating low on a pale, almost-blank screen, one hairline across the middle. They scroll — and keep scrolling through emptiness, because each room is 100vh and most of each room is blank `--paper`. The narrative is the act of moving through deliberate vacancy: the open circle being drawn (Room 1) and then just *sitting* there with its tiny red seal; the barely-visible 無 (Room 2); the list of contents that is just six dashes (Room 3); the one small meditation on *ma*, the meaningful interval (Room 4); the counter stuck at `0` (Room 5); and the mirror-image exit (Room 6) followed by a final stretch of literal nothing before the page ends. The arc is: *enter expecting content → realize the emptiness is the content → sit with it → leave.* **Motion language:** almost none. The corpus is 92% `parallax`, 89% `cursor-follow`, 85% `spring`, 81% `magnetic` — nfth.ing has zero of those. The only animation on the whole site is the one-time `path-draw-svg` ensō stroke. Optionally, give the centered prose and the wordmark a single, very slow `fade-reveal` (opacity 0→1 over 1.4s) as each room enters the viewport — `fade-reveal` is only 19% in the corpus and used at this slowness reads as breathing, not transition. No hover effects. No `tilt-3d`. No `morph`. No `ripple`. Buttons do not exist because there are no buttons. The cursor is the default cursor. Scrolling is native, smooth-behavior off (let the OS do it). **Layout in CSS:** a single centered column, `max-width: 34rem`, `margin: 0 auto`, inside `
`s that are each `min-height: 100vh`, `display: grid`, `place-items: center`. Room 4 alone shifts its column left with `justify-self: start` and a left margin, the one intentional break. Use generous `padding-block` (≥ 14vh) so even within a room the content never touches the fold. Type sizes mostly fixed-small; the only large things are the ensō (vmin-based), the 無 (vmin-based), and the `0` (vmin-based) — everything textual stays quiet at 12–18px. AVOID, explicitly: CTA buttons, "Get started" anything, pricing tiers, stat grids ("10k+ users"), feature card grids, testimonial carousels, logo walls, mega-footers, sticky nav bars, hero gradients, animated counters, parallax layers, cursor-trailing blobs, glassmorphic panels, and warm sunset color washes. If a layout instinct points toward any of those, do the empty version instead. The brief is: a website that is mostly nothing, on purpose, beautifully. ## Uniqueness Notes Differentiators this design commits to. No other site in the corpus should duplicate them. 1. **Emptiness as the exhibit.** Where 90% of the corpus is `card-grid` and 88% `full-bleed`, nfth.ing is a single 34rem column adrift in 65% blank `--paper` per screen, structured as seven 100vh "empty rooms". The negative space is not styling around content — it *is* the content, framed and titled like museum vacancies. `single-column` (17%) + `ma-negative-space` (15%) pushed to an extreme almost nobody attempts. 2. **Cool near-monochrome in a 98%-warm, 95%-gradient corpus.** The palette is `--paper #F4F5F3` / `--ink #2B2E2C` / `--mist #DDE0DC` / `--placard #8C928D`, with exactly one saturated pixel-cluster on the whole site (`--seal #B0473B`, a 12px square). One barely-there light wash is the only gradient. This is a deliberate, near-total opt-out of the corpus's color habits. 3. **Near-zero motion; one breath of ink.** Against 92% `parallax`, 89% `cursor-follow`, 85% `spring`, 81% `magnetic`, this site's entire animation budget is a single one-time `path-draw-svg` ensō stroke (~4s, never loops) plus an optional 1.4s slow `fade-reveal` per room. No hover states. Default cursor. The stillness is the signature. 4. **The static-`0` counter and the six-dash inventory** — `anti-design` (4%) wit deployed deadpan: a `counter-animate`-style number that refuses to animate or change, and a "contents" list that lists nothing. Jokes told in a whisper. 5. **No photography at all** in a corpus that is 98% photography. The only graphic content is one imperfect hand-drawn SVG circle, one faint 無 glyph, two hairlines, one red seal, and sub-3% grain. Chosen seed/style: **japanese zen portfolio** (from seeds.json) — reframed from "portfolio" to "museum of nothing", leaning on `japanese-minimal` (2%), `zen` (9%), `zen-contemplative` tone, and a touch of `anti-design` (4%), all underused. Avoided patterns from the frequency analysis: `hand-drawn` aesthetic at scale (96% — used here only for one circle), `glassmorphism` (79%), `warm` palette (98%), `gradient` (95%), `parallax` (92%), `cursor-follow` (89%), `magnetic` (81%), `spring` (85%), `card-grid` (90%), `full-bleed` (88%), `photography` (98%), `dashboard` (33%), `hero-dominant` (12%).