# Design Language for quietjoon.com ## Aesthetics and Tone quietjoon.com is imagined as the private archive of a 19th-century Korean aesthete who, through some impossible fold of time, has become fluent in the language of glitch and signal degradation. The site does not announce itself — it *surfaces*, the way a silver-gelatin print surfaces in developer fluid: slowly, in patches, from darkness into form. The dominant mood is **dark-academia meets corrupted memory** — the sensation of finding a leather-bound journal inside a malfunctioning hard drive. The palette is a severe **duotone** of deep onyx charcoal and a single cadmium-warm cream-gold, with no mid-tones permitted except where glitch artifacts introduce them involuntarily. The site feels like a museum at 2 AM: the cases are lit, the marble pedestals are present, but the labels are partially erased by time and signal noise. Every typographic element carries the weight of something carved, not printed. Every glitch is not a failure — it is what happens when the archive is *accessed too honestly*. The tone is **elegant-sophisticated** throughout: no urgency, no conversion anxiety, no loud announcements. The site speaks in lowercase. It lets silence be architectural. Inspiration sources: Hiroshi Sugimoto's long-exposure theaters, early 20th-century Korean calligraphy specimens, the interference patterns of analog television, and the marble veining of Calacatta Gold. Core aesthetic vocabulary: dark-mode, vintage-photography filtered to duotone, glitch-as-patina, marble as structural metaphor, and serif letterforms used with the restraint of a funeral inscription. ## Layout Motifs and Structure The structure is a **hud-overlay** system — not the neon-tactical HUD of sci-fi video games, but something closer to the targeting reticle of a large-format camera or a Victorian scientific instrument: precise, minimal, purposeful. The HUD is executed in one-pixel hairlines of `#B8975A` (warm gold) on `#0D0D0D` (void-black), with crosshair ornaments at exact viewport corners and a central registration mark that pulses with a 4-second heartbeat animation. **Page structure (single vertical scroll, five acts):** 1. **Act I — The Dark Room.** Full-viewport opening: 100vw × 100vh. No text except the domain name set in 7vw Cormorant Garamond italic, center-registered. A single vintage photograph — a marble corridor, or an empty theater — bleeds full-bleed behind a `#0D0D0D` overlay at 72% opacity. The hud crosshairs animate in at 1.8 s via `stroke-dashoffset`. The photograph periodically glitches: a horizontal scan-line tear, 80ms duration, randomized at 12–24 second intervals. 2. **Act II — The Index.** A narrow centered column (560px max-width) — a typographic index of the site's contents, formatted like a manuscript table of contents. Each entry is set in 14px Cormorant Garamond small caps with a gold leader dot (`·`) and a right-aligned page-number analog. The background behind this column is slightly lighter — `#111111` — so the column reads as a vellum sheet laid on the dark ground. 3. **Act III — The Plates.** Three full-bleed vintage photographs, each cropped to exactly `100vw × 80vh`, displayed as a slow horizontal slideshow that advances only on user scroll (no auto-advance). Each plate is duotoned: shadows to `#0D0D0D`, highlights to `#D4B97A`. A glitch artifact — a chromatic aberration split, 2–4px horizontal offset — appears on each plate for exactly 120ms every 18 seconds. 4. **Act IV — The Inscription.** A block of body text, max 680px wide, set in 18px Cormorant Garamond at 1.75 line-height. The paragraph begins with a 4-line drop capital. The left margin holds a thin gold vertical rule (1px, `#B8975A`) running the full height of the text block. Marginalia — small fragments of italic text at 12px — appear in the right gutter at 0.6 opacity, as if penciled in by a previous reader. 5. **Act V — The Colophon.** A footer spanning full viewport width, height 180px. The footer contains only: the domain name in 11px monospaced tracking, a gold horizontal rule, and a single line of attribution. No social icons. No copyright year. No newsletter field. **Spatial logic:** All horizontal margins are 6vw minimum. The hud hairlines — top, bottom, left, right — are always visible, framing whatever section the user is in. On scroll, the HUD elements fade to 30% opacity and return to 100% when scrolling stops, so the framing device never competes with content. **Navigation:** A single vertical sidebar of six characters maximum per entry, set in 10px Cormorant Garamond tracked to 0.3em, positioned at 3vw from the right edge, centered vertically. No hover states. Active section indicated by the gold crosshair marker shifting to align with the current link. ## Typography and Palette **Palette — strict duotone with three permitted values:** | Role | Hex | Name | |------|-----|------| | Ground / void | `#0D0D0D` | Void Black | | Surface / lift | `#141414` | Velvet Slate | | Inscription / accent | `#B8975A` | Calacatta Gold | | Highlight / duotone light | `#D4B97A` | Pale Amber | | Text primary | `#E8DFC8` | Vellum Cream | | Text secondary | `#8A7F6A` | Dusk Umber | No other colors. Glitch artifacts may briefly introduce a desaturated red-cyan split (`#C44040` and `#4080C4`) during the 80–120ms glitch event only — these are not palette colors, they are *events*. **Typefaces — two families, used with inscription discipline:** - **Display / body:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weights 300 (light italic for marginalia), 400 (body), 600 (small caps index), 700 italic (display headlines). Set at `font-optical-sizing: auto`. Numerals are old-style (`font-variant-numeric: oldstyle-nums`). Tracking on display sizes: `-0.02em`. Tracking on small caps: `0.15em`. - **HUD / mono labels:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — weight 400 only, size 10–13px, tracking `0.08em`. Used exclusively for HUD coordinate labels, the navigation sidebar, and the colophon domain name. Never used for body text. **Scale:** - Domain display: 7vw, Cormorant Garamond 700 italic - Section heading: 2.8rem, Cormorant Garamond 600 small caps - Body: 18px / 1.75 line-height, Cormorant Garamond 400 - Marginalia: 12px / 1.6, Cormorant Garamond 300 italic - HUD labels: 10px / 1.0, Space Mono 400 - Colophon: 11px / 1.5, Space Mono 400, tracking 0.12em ## Imagery and Motifs **Photography — vintage, duotoned, glitch-scarred:** Every photograph on the site is treated as if pulled from a deteriorating estate archive — silver-gelatin prints that have been digitized but not restored. The treatment pipeline: 1. Source: high-contrast architectural photographs — marble staircases, empty theater auditoriums, stone corridor vaults, classical sculpture close-ups (hands, drapery, eyelids). 2. Convert to grayscale with a warm-orange channel blend (channel mixer: R+15%, G-5%, B-10%). 3. Apply duotone: shadows mapped to `#0D0D0D`, highlights mapped to `#D4B97A`. 4. Add grain: 18% noise, monochromatic, gaussian distribution, applied via CSS `filter: contrast(1.08) brightness(0.96)` plus a `grain.svg` feTurbulence overlay at 0.12 opacity. 5. Glitch events: implemented via a CSS `@keyframes` animation that briefly `transform: translateX(3px)` the red channel (simulated via a second absolutely-positioned copy with `mix-blend-mode: screen` tinted `#C44040`). **Marble motifs — structural, not decorative:** Marble is not used as a background texture. It is used as a *spatial metaphor*: the veining of Calacatta Gold marble (white ground, warm gold veins, occasional charcoal intrusions) is translated into the site's thin-line system. The HUD hairlines follow the geometry of a marble vein — they are not straight; each line has a 0.3px SVG `stroke` with a `pathLength` attribute that gives it a barely-perceptible organic curve. This is the only place where straight lines are forbidden. **Glitch motifs — as patina, not decoration:** All glitch events are timed, brief, and never interactive. They cannot be triggered by user action. They arrive on their own schedule, like the creak of a museum floor. The glitch vocabulary is restricted to: - Horizontal scan-line tears (2–4px vertical displacement of a 1px slice) - Chromatic aberration (RGB channel offset, 2–4px) - Brief luminance spike (0.15 opacity white overlay, 40ms) No CRT static. No pixel sorting. No data moshing. The glitch is a symptom of the archive being old, not a performance of edginess. **Ornamental system:** Four SVG ornaments, all drawn in `#B8975A`: 1. Corner registration crosshair (4 instances, viewport corners) 2. Section divider: a single centered lozenge (`◆`), 8px, used between Acts 3. Drop capital initial: the first letter of the inscription set in 4-line drop cap with a thin gold left-border rule 4. Sidebar marker: a 6px solid circle that tracks the active navigation item ## Prompts for Implementation Treat quietjoon.com as a **single-page archive of five acts**, scrolled vertically on one continuous surface. It is not a portfolio. It is not a landing page. It is a *reading experience* — the digital equivalent of opening a leather-bound folio in a quiet room. **Implementation priorities:** - The dark-room opening must feel like immersion, not loading. Use a CSS fade-in on `DOMContentLoaded` that brings `body` from `opacity: 0` to `opacity: 1` over 1.2s with `ease-out`. - The HUD crosshair system must be implemented as a single `` element in fixed position (`position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100`). It must never scroll. The hairlines must animate in via `stroke-dashoffset` transitions on `DOMContentLoaded`. - Glitch events are JavaScript `setInterval` timers with randomized jitter. The core pattern: select a target element, apply a CSS class for exactly 80–120ms (randomized), remove the class. Never stack glitch events. - The vintage photograph plates in Act III must use `scroll-snap-type: x mandatory` on the container with each plate as a `scroll-snap-align: center` child. No JavaScript carousel. - The marginalia in Act IV must be implemented as `

` elements. - The navigation sidebar must use `writing-mode: vertical-rl; text-orientation: mixed` so labels read bottom-to-top on the right edge. - **DO NOT implement:** hero CTA buttons, pricing tables, feature card grids, testimonial carousels, social proof counters, newsletter signup forms, cookie banners, loading spinners, hamburger menus, sticky headers that change color on scroll. - **DO NOT animate:** page transitions (no page-level slide/fade). Scrolling is the only navigation mechanism. - Use `prefers-reduced-motion: reduce` to disable all glitch events and crosshair animations for users who request it. - The grain overlay must be implemented as a `` element in fixed position with `pointer-events: none; opacity: 0.06; mix-blend-mode: overlay`. - The colophon footer must contain no interactive elements except the domain name (which is a plain `` linking to `/`, with no underline and no hover color change — only `opacity: 0.7` on hover). - Typography must load from Google Fonts with `font-display: swap` and a preconnect hint in ``. **Narrative throughline:** The site tells no explicit story. The visitor assembles the story from the index, the plates, the inscription, and the marginalia. The marginalia are the most personal element — they should feel like handwritten additions by a previous reader, not designed UI elements. ## Uniqueness Notes 1. **HUD-overlay at 5% frequency, merged with elegant-serif at 2% frequency.** This combination exists in zero other designs in the corpus. HUD systems in the corpus are consistently paired with sci-fi or tech aesthetics (monospace, neon, geometric-sans). quietjoon.com inverts this: the HUD is the instrument of a classical scholar, not a pilot. The crosshairs are not tactical — they are the registration marks of a large-format camera. 2. **Glitch-as-patina, not glitch-as-performance.** The corpus shows glitch at 10% frequency, but in every instance it is used as a *stylistic statement* — the glitch is loud, frequent, interactive, or thematic. quietjoon.com restricts glitch to rare, brief, timed events that function as evidence of age rather than aesthetic identity. The glitch is something the archive *has*, not something the site *does*. 3. **Marble as vector geometry, not texture.** Marble-texture imagery appears in only 4% of designs, and in all cases it is used as a photographic background tile. quietjoon.com uses marble veining as the generative logic for the HUD hairline curves — straight lines are replaced with organically-curved SVG paths that trace the geometry of Calacatta Gold veining. This is the only design in the corpus that uses marble as a *drawing system* rather than an image. 4. **Duotone-photo at 3% frequency, applied to vintage-photography at 3% frequency.** This compound rarity — both categories underused — produces a visual register that the corpus entirely lacks: silver-gelatin-warm-amber, which reads as neither black-and-white nor color but as something from before the distinction mattered. The warmth of `#D4B97A` against the `#0D0D0D` void produces a luminance relationship close to 19th-century albumen prints. 5. **Seed:** aesthetic: dark-mode, layout: hud-overlay, typography: elegant-serif, palette: duotone, patterns: glitch, imagery: vintage-photography, motifs: marble-classical, tone: elegant-sophisticated. Avoided patterns from frequency analysis: hand-drawn (58%), editorial (53%), centered (84% — used only for Act II column, not as primary layout logic), full-bleed (65% — present in Acts I and III only, not as default layout), photography-unfiltered (87% — all photography is duotone-treated, never raw).