# Design Language for quietjoon.net ## Aesthetics and Tone quietjoon.net is **The Anechoic Archive** — a hushed, slow, ascetic web-room that presents itself as the public catalogue of a one-person institution devoted to *cataloguing kinds of silence*. The name reads as "quiet" + "joon" (준 — a Korean given-name syllable meding "to permit / to be ready"), and the site treats that literally: it is a place that *permits quiet* and is *ready to listen*. There is no product, no service, no founder photo, no manifesto-in-bold. Instead the visitor walks through a sequence of nine numbered **Specimens of Silence** — "the silence inside a sealed jar," "the silence of a phone that has stopped ringing," "the silence between two people who used to talk every day," "the silence of snow at 4am," "the silence of a held breath," "the silence after the last note of a record," "the silence of a switched-off machine still warm," "the silence of a language no one speaks anymore," "the silence of this page when you stop scrolling" — each given an accession number, a short curator's note, a measured "duration," and a single restrained mark. The mood is **zen-contemplative crossed with the cool of an anechoic chamber**: not cozy, not spa-soft, not "mindfulness app." It is closer to standing alone in a museum after closing — the air a little cold, the lighting even and shadowless, your own footsteps suddenly audible. The aesthetic seed is **"japanese zen portfolio"** (zen ~9% in the corpus, japanese-minimal ~3% — both deliberately *under*-used), but bent away from the usual stone-garden-and-bamboo cliché toward something more institutional and slightly clinical: index cards, acoustic foam, a tuning fork, a sound-level meter pinned forever at its lowest reading. Everything is reductive on purpose. White is the loudest thing here. ## Layout Motifs and Structure The layout is **single-column** (~17% in the corpus) wedded to **ma / negative-space** (~16%) — explicitly *not* card-grid (91%), *not* full-bleed hero (88%), *not* dashboard, *not* bento. The content well is narrow — `min(640px, 92vw)` — and lives inside an enormous pale margin so that on a wide screen the text is a thin warm thread down a vast still field. There is **no top navigation bar, no logo lockup, no hamburger, no sticky header, no footer columns, no CTA strip**. Wayfinding is one element: a **vertical "level meter"** fixed to the left edge — a single thin rule with nine faint tick marks and a small dot that rides the scroll position, the dot never climbing past the second tick, because nothing here is loud. Hovering a tick reveals the specimen's accession number as a 10px monospace label; clicking it scrolls there. Each of the nine Specimens is a **full-viewport-tall "vitrine"**: enormous top padding (≥30vh) pushes the content into the lower-middle of the screen so that emptiness is always *above* it, the way a single object sits low in a too-tall display case. Within a vitrine the rhythm is fixed and identical every time — accession line (mono, tiny), then the specimen title (large serif), then a one-to-three-sentence curator's note (humanist sans, generous leading), then a thin horizontal hairline, then a "duration" readout and a single mark (an SVG or a typographic gesture). The repetition *is* the structure: the visitor learns the cadence and then the silences between vitrines start to feel like part of the exhibit. Between specimens there is a deliberately oversized blank band — a full empty viewport with nothing in it but the level meter — labelled, if anything, only by a faint centered `· · ·` that fades in after you've been still for two seconds. Section transitions are **fade-reveal** (~21%) and gentle **blur-focus** (~9%): text arrives slightly soft and settles into sharpness over ~900ms, like an eye adjusting to dim even light. No parallax, no tilt-3d, no magnetic cursor, no spring overshoot — those would be noise. ## Typography and Palette **Fonts — Google Fonts only, two voices, both restrained:** - **`Spectral`** (weights 300, 400, 600) — the display and title face. A quiet, slightly literary transitional serif with low contrast and calm proportions; it reads like the typeface of an old exhibition placard. Used for specimen titles (clamp `2rem → 3.2rem`, weight 300, letter-spacing `-0.01em`) and for the single short epigraph that opens the page. Tracking is loose, leading is tall — a title should look like it is exhaling. - **`Inter`** (weights 400, 500) — the running-text voice for curator's notes and the level-meter labels. Set small (`0.95rem`), with `line-height: 1.85` and `max-width: 34em`, so every paragraph has more whitespace around its words than ink. - **`Space Mono`** (weight 400) — used *only* for the instrument elements: accession numbers (`SIL-001 / 09`), the "duration" readouts (`00:00:00 — indefinite`, `4.3 sec`, `one winter`), and the level-meter tick labels. It is the chamber's instrumentation, never body copy. **Palette — `monochrome` (~16%) leaning to a hair of `warm` (~98% — but here used as the faintest possible undertone, not a glow):** - `#F4F2EC` — **bone paper**, the page ground; an off-white the colour of a clean index card under museum light. - `#FBFAF6` — **chamber white**, slightly brighter, used for the vitrine "platform" panels and the empty inter-specimen bands so the eye registers a barely-there step in lightness. - `#1B1A18` — **graphite ink**, near-black with a touch of warm brown, for titles and the level meter rule. - `#5C5A54` — **dust grey**, for curator's-note body text — soft enough to feel quiet, dark enough to read. - `#A8A59B` — **felt grey**, for accession numbers, tick marks, hairlines, the `· · ·`. - `#7A6E5C` — **archive tan**, the single accent — used *once per specimen at most*, only on the mark/diagram stroke, never on text, never as a fill larger than a thumbnail. It is the colour of an old paper label, and it is rationed like the last warm thing in a cold room. No gradients. No neon. No glass. No shadows except one: a single 1px hairline `box-shadow` under each vitrine platform, `rgba(27,26,24,0.06)` — the faintest suggestion that the object rests on something. ## Imagery and Motifs **No photography. No 3D renders. No stock imagery. No "hand-drawn doodle" charm.** Every visual is a **precise, thin-stroke SVG diagram** in graphite or (rationed) archive-tan, ≤1px, drawn like a scientific instrument plate, never wobbly-for-cuteness. The recurring grammar is **the instrument and the specimen jar**: 1. **The level meter** (persistent) — a calibrated vertical scale, nine ticks, a dot pinned low. The site's only navigation and its central metaphor: a measurement of loudness that never rises. 2. **Specimen marks (one per vitrine, all in the same line-weight family):** - *SIL-001 — the sealed jar:* a simple cross-section of a stoppered laboratory jar with nothing drawn inside it; the emptiness is the exhibit. - *SIL-002 — the stopped phone:* a single rotary-phone outline with the bell shape struck through by one faint tan line. - *SIL-003 — the two who stopped talking:* two small open quotation marks facing each other across a wide empty span, with a hairline measuring the gap and the label `distance: undefined`. - *SIL-004 — snow at 4am:* a horizon line, a few dots of falling snow drawn as the tiniest possible plus-signs, and a clock reading 04:00. - *SIL-005 — the held breath:* a single lung-curve drawn fully inflated, with a small `pause ▮▮` glyph beside it. - *SIL-006 — the last note of a record:* a vinyl groove spiral that simply *ends*, mid-arc, with `lead-out` labelled where the line stops. - *SIL-007 — the warm switched-off machine:* a plain box outline, power symbol crossed, and three faint heat-shimmer waves rising — the only "motion lines" on the site. - *SIL-008 — the dead language:* a single glyph from a script the visitor won't recognise (an invented sigil), boxed and tagged `pronunciation: lost`. - *SIL-009 — this page, stilled:* literally the cursor outline, drawn at rest, with the label `you stopped scrolling at 00:00`. It catches the visitor in the act. 3. **The acoustic-foam wedge** — a small repeated SVG wedge motif (the pyramid shape of anechoic-chamber foam) used *only* as the bullet/divider glyph and the favicon, never as a background pattern. 4. **Grain** — an extremely faint static-noise overlay (`opacity ~0.02`, a tiled SVG `feTurbulence`) over the whole page — the visual equivalent of room tone, the hiss you only notice in true quiet. ## Prompts for Implementation Build quietjoon.net as **one HTML page, one CSS file, one small ES module — no framework, no build step, no router, no analytics, no cookie banner.** Treat the page as a slow 70–90-second walk through a near-empty exhibition of silences; the visitor should leave feeling like the volume of their own life got turned down a notch. - **Forbidden by design:** no CTA, no "get started," no pricing block, no stat-grid, no testimonial row, no logo wall, no FAQ accordion, no newsletter capture, no contact form, no chatbot, no social icons, no "as seen in." Nothing is for sale; this is a catalogue, not a store. If a section feels like it's asking the visitor to *do* something, delete it. - **Structure:** `` → `.grain` overlay (aria-hidden) → `.meter` left-edge level meter (nine `.tick`s + one `.bead`) → `.epigraph` (one short Spectral line, e.g. *"A catalogue of the kinds of quiet."* — set large, alone in a near-empty first viewport) → nine `
` each with `.accession` (mono), `.title` (Spectral 300), `.note` (Inter), `
`, `.duration` (mono), `.mark` (inline SVG) → between each pair, a `
` that holds only the `· · ·`. No `