# Design Language for bada.quest ## Aesthetics and Tone `bada.quest` is **a digitized monograph of an unfinished 19th-century Korean naval cartographer whose ink-and-iron-gall sea-charts have, three centuries later, been struck by a slow electromagnetic glitch** — imagine the marginalia of *Daedongyeojido* (the great 1861 Korean atlas) re-imagined by a future archive-keeper whose scanner is failing in calm, beautiful ways: chrome-bleed along every coastline, crystalline interference fringes blooming around the compass-roses, page-frames slipping out of register by exactly 7 pixels. The site is a **scholarly atlas of the sea (바다) that was never finished** — the cartographer disappeared mid-survey somewhere off Ulleungdo in 1873 — and what we present is the *digitization* of his surviving notebooks: hand-drawn ink charts, crystallographic margin sketches, monograph footnotes, and the scanner's own quiet failures (chromatic-aberration along the gutter, a 1px horizontal shear every 11th scanline, the corner-bracket of one folio drifting off the broken grid). The aesthetic register is the **rarest dialect of glitch** in the corpus: not the loud cyberpunk-VHS-tear glitch, not the green-on-black hacker glitch, not the vaporwave-pink Memphis glitch — but **scholarly glitch**, what we might call *archive-decay glitch* or *the glitch of patient failure*. The interference is never aggressive; it is melancholic, methodical, and reverent. A scanner is dying; an archivist is recording the dying with monographic care. The chrome-metallic shimmer is the *signal* — the cold trace of digitization itself — laid as a thin wet film over warm ink-on-paper. The mood is **hushed, scholarly, oceanic, and slightly haunted** — the reading room at the National Library of Korea at 2:47 AM, with the building lights down to half, and one lamp warm over a folio of broken coastlines. The tone is **scholarly-intellectual** — long footnotes, marginal annotations in Latin and Hanja, citation numerals in superscript metallic chrome, a glossary at the bottom of every chapter, hover-lifts that reveal the *editorial apparatus* (which line of which folio a phrase came from). No marketing voice. No CTAs. No conversion paths. The reader is treated as a graduate student in maritime history who has just been granted access to an unprocessed archive and asked to be quiet. The dominant emotional registers are **patience, reverence, scholarly melancholy, the cold beauty of a chrome surface, and the warm tactility of pulped 1873 hanji paper** — held together, unresolved, in the same frame. ## Layout Motifs and Structure The site is structured as **a broken folio-grid of seven crystallographic charts** — seven full-viewport "folios" (single-column-tall, 100vh+ each), each a hand-drawn cartographic study of one fragment of the unfinished atlas. Within each folio, the layout is a **deliberately broken 12-column grid** where roughly 30% of the elements have been *manually nudged* off the column lines (by between 3px and 14px, in pseudo-random but seeded directions) — to record the fact that hand-drawn folios were never perfectly aligned, and to record the fact that the scanner was failing. **The folio grid (the broken twelve):** The base grid is `12 cols × var(--baseline) row`, with `--col-gap: clamp(20px, 2.4vw, 36px)` and `--baseline: 28px`. The horizontal gutters are unequal: cols 1–4 use a 20px gutter; cols 5–8 use a 32px gutter; cols 9–12 a 28px gutter — the page is *not* symmetric. Inside this grid, every element snaps to a nominal cell, then carries a `transform: translate(var(--shear-x), var(--shear-y))` where `--shear-x` and `--shear-y` are seeded per-element from the folio number (so the same folio renders identically on every load, but folios differ from one another). The shear is small (≤14px) and almost — but not quite — invisible. The reader feels the page is *wrong* in a way they cannot name. **The seven folios (vertical sequence):** 1. **Folio I — *Title-Plate* (the wakes-up moment).** Full bleed. The wordmark **bada.quest** is rendered in Commissioner Variable at clamp(5.6rem, 10vw, 9.2rem), VOLM −60, FLAR +40, weight 200, set in cold chrome (#C8CDD3 over #1A1F26). Below it, a single hand-drawn ink coastline (SVG, single 1.4px black stroke) wanders across the page like a dropped sentence. The shear-vector for this folio is (+7px, −2px) — the page knows it is offset. 2. **Folio II — *The Index of Lost Soundings*.** A two-column layout: left column (cols 1–5) is a hand-drawn ink list of 18 toponyms in Hanja and Hangul (e.g., 鬱陵島 / 울릉도, 獨島 / 독도, 莞島 / 완도), each followed by a depth-sounding measurement in fathoms (`33 ⅔ fath.`, `127 fath.`, `unsounded — 1873`). Right column (cols 7–12) is a single hand-drawn crystalline diagram (a hexagonal-bipyramid wireframe — see Imagery section) representing the cartographer's mineralogical interest in the *salt crystal as cartographic ground-truth*. The gutter between columns is *broken* — the right column is shifted upward by `--shear-y: -11px`. 3. **Folio III — *Coastline as Wave-form*.** Full-bleed canvas. A long horizontal hand-drawn coastline (the southern coast of the Korean peninsula, Wando to Tongyeong) is rendered as a single SVG path. Above it, a chrome-metallic glitch-strip (a 14px-tall horizontal band) drifts slowly leftward, and *only the pixels of the strip's bounding-box re-render the coastline with a 3px chromatic-aberration split* (cyan offset −3px, red offset +3px) — a localized, patient glitch. The reader watches the strip pass and the line break and re-form. 4. **Folio IV — *The Crystallographic Margin*.** Three-column layout (cols 1–4 / 5–8 / 9–12), each column showing one hand-drawn crystal habit (cubic, hexagonal, monoclinic) with a Latin caption set in Commissioner italic 400 at 16px (`Habitus cubicus. Halite, Ulleung-do, 1873.`). The columns are not the same height: column 1 is 78vh, column 2 is 92vh, column 3 is 84vh — the *broken* in broken-grid is vertical here. Under each crystal is a hand-drawn caption block bordered by a single hairline rule that doesn't quite meet at the corner (a 2px gap at the lower-right — a deliberate scribal imperfection). 5. **Folio V — *The Footnote Sea*.** Full-bleed. A single dense column of body text (cols 4–9, ~58 char/line), set in Commissioner 420 weight at 19px / 32px line-height, narrating in scholarly third-person the cartographer's last surviving entry (June 14, 1873, off Ulleungdo, fog, no soundings). Beside the body in the right margin (cols 10–12), a stack of footnotes set in Commissioner 380 at 13px / 19px, each preceded by a chrome-metallic superscript numeral. The footnotes hover-lift on hover (translateY −3px, drop a 1px chrome shadow) and reveal a third tier of *meta-annotation*. 6. **Folio VI — *The Broken Compass-Rose*.** A single hand-drawn compass-rose, dead-center, but the cardinal directions are mis-labeled: the N is where E should be, E is where S, S is where W, W is where N — a 90° clockwise rotation of the labels but not the rose. The hand-drawn rose has 32 points; eight of them are subtly chrome-shimmered (a 1px metallic stroke laid over the ink). The shear-vector for this folio is (+0, +0) — the only folio that does *not* shear, because the compass itself is the broken thing. 7. **Folio VII — *Colophon and Glossary*.** A two-column layout: left (cols 1–7) is the colophon — a paragraph in Commissioner italic 400 at 17px naming the (fictional) editor, the archive, the date of digitization, the scanner model (`Hasselblad H6D-400c, calibrated 2025-03-12, drift +0.3%`), and the (fictional) ISBN. Right (cols 8–12) is a glossary of 12 cartographic and crystallographic terms, each term set in Commissioner small-caps 14px with the definition below in 13px italic. The footer is a 1px chrome rule across all 12 columns, with the wordmark `bada.quest` in tiny 11px chrome at the right-aligned end. **Vertical rhythm:** the seven folios are stacked, each 100vh+ tall, with no transitional whitespace except a 1px chrome rule between folios — so the scroll is continuous and the rule reads as a *page-edge*. Between folios, the chromatic-aberration glitch-strip (Folio III's signature) re-passes briefly across the rule itself, so the act of scrolling is also a slow scan. **Navigation:** there is none in the conventional sense — no menu, no header, no skip-links. Instead, the **left margin (cols 0, the 24px outside col 1)** hosts a thin vertical chrome-rule with seven folio-indicator dots, which pulse-fade as the corresponding folio enters viewport. Click a dot → smooth-scroll to that folio. That is the navigation. Total. ## Typography and Palette **Typography — Commissioner-Versatile is the load-bearing voice; one mono whisper for measurements only:** - **Primary display, body, footnotes, glossary, colophon — [Commissioner](https://fonts.google.com/specimen/Commissioner)** (Variable, axes `wght 100→900`, `FLAR −50→100`, `VOLM −100→100`, `slnt 0→−12`, `XOPQ`, `XTRA`, italic). Commissioner is the only typographic family the site needs because its three exposed style axes (`FLAR` — flare on terminals, `VOLM` — volume / contrast, `slnt` — slant) let one family speak in five distinct registers: - **Wordmark**: weight 200, FLAR +40, VOLM −60 — gives a thin, flared, almost-engraved character that reads as cold metal. - **Folio titles** (II, III, IV, …): italic 360 at clamp(2.4rem, 4.6vw, 4.0rem), tracking +1.2%, FLAR +20, VOLM 0. - **Body**: regular 420 at 19px / 32px line-height, tracking +0.4%, FLAR 0, VOLM −20 — a calm reading voice. - **Footnotes & glossary definitions**: italic 380 at 13px / 19px, tracking +0.8%, FLAR −10, VOLM −30 — quieter, smaller, less assertive. - **Glossary terms, colophon names**: small-caps 540 at 14px, tracking +6%, FLAR +10, VOLM +20 — slightly louder, slightly more present. - **Measurements only — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** (Variable wght 200→800). Used *only* for fathom-soundings, calibration drift values, ISBN, scanner model, and the chrome-strip readout (`λ = 633.0 nm Δ = +3.0 px`). Always at 13px, weight 280, in chrome (#C8CDD3) — never warm, never large. This is the cold register; Commissioner is the warm register; the contrast is the entire visual argument. **Palette — chrome-metallic ground over warm hanji-paper warmth:** Twelve declared colors. The site is bichromatic in spirit (warm paper + cold chrome) but the supporting greys are essential. - **Background paper — `#F2EBDD`** (warmth-3): the dominant surface. A warm hanji-paper cream, slightly desaturated, slightly aged. ~92% of the page is this color. - **Background paper, deeper — `#E8DFCB`** (warmth-2): used for the gutter strips and the within-folio panel grounds. About 8% surface. - **Ink (primary text, hand-drawn lines) — `#1A1F26`** (ink-1): not pure black, a deep cold-blue-black; reads as iron-gall ink under archive light. - **Ink (secondary, footnote, glossary) — `#3B434F`** (ink-2): a lighter ink for the editorial apparatus. - **Chrome metallic 1 (light highlight) — `#DCE0E5`** (chrome-1): the lightest face of every chrome strip and rule. - **Chrome metallic 2 (mid) — `#C8CDD3`** (chrome-2): the workhorse chrome. Used for the wordmark, the folio-rules, the superscript numerals, all metric mono numerals. - **Chrome metallic 3 (mid-dark) — `#9CA3AC`** (chrome-3): the shadow side of every chrome surface. Combined with chrome-1 and chrome-2 in a subtle linear-gradient(112deg, …) to fake the polished-metal luster. - **Chrome metallic 4 (deep) — `#5E6671`** (chrome-4): the darkest chrome; used for the chromatic-aberration glitch-strip's outer edges and for the small chrome dots on Folio VI's compass-rose. - **Aberration cyan — `#5DB1B9`** (cyan-aberration): used *only* in the −3px split of the chromatic-aberration glitch on Folio III. About 0.2% surface. - **Aberration magenta — `#B8567A`** (magenta-aberration): the +3px split. About 0.2% surface. - **Sea-foam stain — `#A6C2C0`** (foam-stain): a single muted sea-glass green, used *only* for the four small inkblots on the hand-drawn coastline of Folio III, where the cartographer's iron-gall ink reacted with the salt-water page (a watercolor "halo" around four specific points). About 0.4% surface. - **Annotation red — `#8E2A1F`** (annotation-red): the only warm chromatic note. Used *only* for the Latin marginalia on Folio II (`obs.`, `vide`, `q.v.`, `circa`) — three or four words, total. About 0.05% surface. The chrome-metallic palette is rare in the corpus (6%); the declaration of it as a *cold film over warm paper* — rather than as a saturated pop color or a y2k-fashion accent — is the differentiator. The chrome here is **scientific instrumentation chrome**, the chrome of a Hasselblad scanner-bed or of a 1970s analytical microscope, not the chrome of a fashion editorial. ## Imagery and Motifs **No photography. No stock. No 3D renders. No icons-from-a-pack.** Frequency analysis shows photography at 93% of corpus; this site opts out completely. All imagery is **hand-drawn ink as inline SVG, with deliberate hand-jitter on every path** (1.4px ink-1 strokes, anchor-points perturbed by ±0.6px from the mathematical ideal), composited with chrome-metallic gradients and the chromatic-aberration overlay. There are five visual families. **Family 1 — Hand-drawn ink coastlines (the sea, 바다, the principal motif).** Every folio carries at least one ink coastline. These are SVG paths drawn in ink-1 (#1A1F26) at 1.4px stroke-width, no fill. The coastlines are *fictional but legibly Korean* — they suggest the southern Korean coast, Ulleungdo, Jeju, Wando, and the contour of the East Sea — without literal accuracy. Every path has been hand-jittered: each anchor-point of the SVG is offset by a seeded `±0.6px` perturbation, so the line *vibrates* like a hand drawing it. The coastlines are sometimes interrupted by small ink-foam stains (foam-stain #A6C2C0) — four of them on Folio III, at coordinates the cartographer marked as "saltwater-damaged" in the (fictional) reproduction notes. **Family 2 — Hand-drawn crystalline diagrams (the crystallographic margin, the second principal motif).** Crystalline appears in only 2% of the corpus — this is the signature differentiator. Every folio carries one or more hand-drawn crystal habits: cubic (halite), hexagonal-bipyramid (quartz), monoclinic (gypsum), rhombohedral (calcite), tetragonal (rutile). Each crystal is a *wireframe SVG* (no fills) showing both the visible edges (1.4px ink-1) and the *hidden edges* (0.8px ink-1 dashed `2,2`), so the reader sees the full 3D structure. Each crystal carries a Latin caption in italic Commissioner ('*Habitus cubicus*. Halite, Ulleung-do, 1873.'). The crystals function as the *unit of scholarly observation* — the sea is mapped, but the *salt of the sea* is mapped at a finer scale. The atlas is mineralogical as well as cartographic. Folio IV is wholly crystalline. **Family 3 — Chrome-metallic strips and rules (the digitization layer).** Every folio carries at least one horizontal chrome strip (1px to 14px tall) rendered as a `linear-gradient(112deg, chrome-1 0%, chrome-2 28%, chrome-3 52%, chrome-2 78%, chrome-1 100%)` — a four-stop polished-metal gradient. The thin 1px chrome rules separate folios; the 14px-tall strip on Folio III is the *glitch-strip* that drifts leftward and produces the chromatic-aberration. The chrome strips read as **the scanner's optical bar passing across the page** — they are the digitization itself, made visible as a small horizontal seam. **Family 4 — Chromatic-aberration glitch overlay (the patient failure).** A localized SVG `` using `feOffset` + `feColorMatrix` + `feComposite` creates the cyan-magenta channel split. It is applied **only inside the bounding-box of the chrome strip on Folio III**, only on the coastline path, and only with `feOffset dx="-3"` (cyan) and `feOffset dx="+3"` (magenta). The split is `0.18` opacity. The strip drifts leftward at 14px/sec (CSS animation, 1px-stepped via `steps()` so it reads as scan-bar motion, not smooth slide). The glitch is **methodical**, not chaotic — a 14px-wide window, traveling at constant velocity, producing a tiny patient failure exactly where it passes. The reader can see the coastline glitch and re-form, glitch and re-form. This is **the entire JS animation budget of the site** — there is one glitch, it runs forever, and it is enough. **Family 5 — Editorial apparatus marks (footnote daggers, citation chrome-numerals, marginalia bracket).** Tiny ink marks: the dagger † (footnote 2), double-dagger ‡ (footnote 3), section § (footnote 4), pilcrow ¶ (paragraph break) — all drawn as inline SVGs with the same hand-jitter as the coastlines, in chrome-2 (#C8CDD3). Citation numerals are JetBrains Mono superscript in chrome-2. The Latin marginalia (`obs.`, `vide`, `q.v.`) are in annotation-red Commissioner italic 400 at 12px. The marginalia bracket `]` (a single ink-1 hand-drawn vertical bracket, 24px tall, 0.8px stroke) appears in the right margin beside any annotated paragraph. **Crystalline as connective motif:** the seven folio-indicator dots in the left rule are not dots — they are **tiny hexagonal-bipyramid crystal silhouettes**, each 8px × 14px, rendered in chrome-2 wireframe. As the reader scrolls, the dot of the active folio fills with chrome-2 (the crystal is *crystallized*); the others remain wireframe. The navigation is, literally, **a crystal index**. ## Prompts for Implementation Build `bada.quest` as **a digitized monograph atlas of the unfinished Korean sea, structured as seven folio-pages on a deliberately broken twelve-column grid, rendered in hand-drawn ink and chrome metallic glitch**. The story is the entire experience: a scholarly graduate-student-in-maritime-history sits down, very late, to read seven folios of a never-finished 1873 atlas, while the scanner that digitized them fails patiently, beautifully, and on a fixed 14px-wide glitch-strip that drifts leftward forever. **Implement as one `index.html` + one `style.css` + one `main.js` (vanilla, no framework, no bundler, no npm).** Total payload target: under **96KB** excluding the Commissioner and JetBrains Mono web fonts. The page is single-load, scroll-only, no routing, no fetch. **Storytelling beats — full-screen narrative, no CTAs, no pricing-blocks, no stat-grids:** 1. **Folio I** is the wake-up. Wordmark in cold chrome thin-flared Commissioner, a single dropped-sentence coastline below. No subtitle, no tagline, no "Get Started." The reader knows, within 0.6 seconds, that this is not a marketing page. 2. **Folio II** introduces the *register* of scholarly intellect: Hanja toponyms, fathom soundings, a hand-drawn crystalline figure in the right column. The reader learns: this is a scholar's page, and the language is dual (Hanja/Hangul, ink/chrome, paper/metal). 3. **Folio III** is the **glitch reveal** — the moment the reader notices the scanner-bar drift. The bar moves left; the coastline beneath splits cyan/magenta as the bar passes; the bar exits frame; the coastline re-forms. The reader has just witnessed the entire visual language in one continuous gesture: warm ink + cold chrome + patient failure. 4. **Folio IV** is the **crystallographic interior** — three crystal habits, each in its own broken-height column, each captioned in Latin italic. The reader is now deep inside the cartographer's mind: he was not just mapping the sea, he was mapping *the salt of the sea*. 5. **Folio V** is the **dense-text resting page** — the entire site's reading-text budget. ~600 words of scholarly third-person narrative. Footnotes that hover-lift to reveal third-tier annotations. 6. **Folio VI** is the **paradox** — the broken compass-rose. The directions are wrong by 90°. The reader either notices or does not. If they notice, the site rewards them silently (a tooltip, on long hover-lift, says: *editorial note: cardinal labels rotated as in original — see folio note 14*). The site never explains. It footnotes. 7. **Folio VII** closes with **colophon and glossary** — the apparatus that tells the reader this was an *edition*, made by an *editor*, in a *time*, on a *machine*. The site signs itself with care. **Critical implementation notes:** - **Broken-grid math:** every grid cell stores a `--shear-x` and `--shear-y` custom property, seeded by folio number and element index (`mulberry32(seed)` in JS, returns a deterministic 0..1, mapped to ±14px). Apply via `transform: translate(var(--shear-x, 0px), var(--shear-y, 0px))`. Set on first paint, never re-seeded. Layout is broken once, forever, on this device. - **Hand-jitter on every SVG path:** when generating the 18 coastline + crystal SVGs, run every path through a `jitter(path, 0.6)` function in JS that perturbs each absolute anchor point by a seeded `±0.6px` (uniform). This produces *the same* jittered paths every load on a given device — never re-randomize on scroll. The hand-drawnness is a fact, not an animation. - **The glitch-strip animation (the only JS-driven motion):** a single 14px-tall `
` absolutely positioned over Folio III, with a chrome linear-gradient background and a `requestAnimationFrame` loop translating it leftward at 14px/sec. The chromatic-aberration filter is applied *to the underlying SVG path* only when the strip's bounding-box overlaps the path's bounding-box — toggled via `IntersectionObserver` per scanline. The strip wraps to the right edge and continues. It runs forever. It is the only thing that moves. - **Hover-lift on footnotes (the second motion register):** every footnote `