# Design Language for jeongchi.boo ## Aesthetics and Tone jeongchi.boo is a **haunted broadcast archive** -- a one-page tribute to the dead medium of late-twentieth-century political television, rendered as a single magazine spread that has been salvaged from a fire-damaged broadcast vault. "Jeongchi" (정치, Korean for politics) suffixed by ".boo" makes the conceit explicit: this is the *ghost* of politics, the residue of authority left behind on degaussed magnetic tape and water-damaged paper. The site presents itself as a centerfold from an imaginary 1978 Korean news magazine that someone has scanned at 4am, badly, with the wrong settings, and which has continued to corrupt itself for forty-eight years inside a forgotten server. The mood is **nostalgic-retro** in its rarest, most underused form: not the candy-coated Y2K nostalgia of vaporwave nor the warm sepia of mid-century revival, but the specific, slightly carcinogenic glow of a CRT tuned to a dead channel at 3am, the specific yellow-brown of newsprint left in an attic, the specific smell-you-can-almost-see of a basement archive. It is the feeling of finding your grandfather's pamphlets and realizing the people who wrote them are all dead and the regime they argued about has been dead longer. Aesthetically, the site fuses **minimalist** restraint (one spread, two columns, severe whitespace, no scrolling beyond the fold) with **glitch-art** intrusion: the layout is a strict editorial grid, but the *content* glitches -- headlines tear themselves apart on cursor proximity, images de-resolve into scanlines, captions duplicate themselves as if printed twice on a misfeeding press. The discipline of the grid is the haunted-house, and the glitches are the ghost moving through it. Tone is melancholy, archival, faintly conspiratorial. Copy reads as if quoted from a 1978 op-ed: long sentences, formal Hanja-leaning vocabulary in the Korean fragments, dry English translations underneath in editor's brackets. Nothing on the site sells anything. Nothing asks the visitor to subscribe. The page behaves as if it has forgotten there was ever supposed to be an audience. ## Layout Motifs and Structure **Primary layout: magazine-spread** rendered full-viewport, edge-to-edge, with a **broken-grid** intrusion of glitch artifacts. The viewport is treated as a single double-page spread of a folio-format political magazine. A subtle vertical seam runs down the geometric center of the screen at exactly 50vw -- a 1px line of slightly darker burgundy with a 4px soft shadow on each side, suggesting the gutter where two pages meet. This seam is the *spine* of the page and everything composes against it. Content respects the seam: nothing crosses it casually, and when something does cross (a headline, a redaction bar) it does so deliberately, like an editor's choice. **Left page (0 -- 50vw):** - Top quarter: A 36pt magazine masthead -- "JEONGCHI" in a wide industrial sans, with an issue line beneath: "VOL. XLVIII / NO. 04 / SPECTRAL EDITION / KRW NIL". A thin double rule sits beneath the masthead in deep burgundy. - Middle half: The lead image well -- a square placeholder filled with a procedurally generated **glitch-art** composition (described in Imagery). The image has a four-line caption set in italic micro-type, ranged left, with a credit reading "[ORIGINAL: ANONYMOUS, RECOVERED FROM TAPE 1978-04, RE-DIGITISED 2026]". - Bottom quarter: A pull-quote in oversized serif italic, set against a cream-paper background, attributed to "-- 무명 / Unknown". **Right page (50vw -- 100vw):** - Top eighth: A folio number ("p. 4-5") and section heading ("부록 / APPENDIX: GHOSTS OF GOVERNANCE") in small caps. - Body: Two narrow columns of justified body copy, hard-hyphenated, with proper drop caps on the first paragraph of each column. The columns are filled with an essay fragment (~280 words) about political amnesia, discontinued constitutions, and the half-life of decrees. The fragment terminates mid-sentence at the bottom margin -- the article *continues on a page that does not exist.* - A footnote rule and three numbered footnotes set in 9pt mono. **Page furniture:** - Folio numbers in the bottom-outer corners. - A thin horizontal rule 24px from the top edge spanning the full viewport, broken at the seam. - A repeating decorative ornament (a tiny dot-dot-dash-dot circuit-board glyph -- see Motifs) running along the bottom margin as a footer ornament. - Crop marks at all four outer corners -- 12px crosshairs in burgundy, the kind that survive into a final print run when the prepress is sloppy. **Glitch intrusion (broken-grid layer):** On top of this disciplined editorial layout, a non-destructive *glitch layer* operates. At cursor-controlled regions of the page, scanlines drift, RGB channels separate by 2--6px, type tears horizontally as if struck by a tape dropout. The grid never breaks geometrically -- the boxes stay put -- but their *contents* hemorrhage. This is the only departure from strict magazine convention, and it is the design's central metaphor: the form of the political document survives intact while its content disintegrates. The page does not scroll. Everything is within one viewport (min-height 100svh, min-width 1200px with a graceful narrow-viewport fallback that stacks pages). There is no navigation, no menu, no footer links, no theme toggle. There is the spread, and there is the visitor. ## Typography and Palette **Typography (all from Google Fonts):** - **Display / Masthead:** "Archivo Black" -- a heavy, narrow grotesque used at clamp(2.4rem, 5vw, 4.2rem) with letter-spacing: -0.02em, text-transform: uppercase. Archivo Black sits at the industrial end of the **sans-grotesk** family and reads convincingly as a 1970s news-magazine masthead. The single weight (900) is intentional -- mastheads of this era did not have weight choices. - **Sub-Masthead and Section Headings:** "Space Grotesk" (weight 500, then 700 for emphasis). A contemporary grotesque with a slightly mechanical character that pairs with Archivo Black without fighting it. Used at 14--18px with letter-spacing 0.18em, text-transform: uppercase, for issue lines, section labels, and folio markers. Space Grotesk's faint geometric quirks (the open spurless 'a', the angled terminal on 't') give the page a typographic signature that feels both period-correct and slightly off-kilter. - **Body:** "Cormorant Garamond" (weight 400, italic 400, weight 600 for drop caps). A high-contrast Garamond revival used at 15px / 22px line-height, justified, with hyphens: auto. The high stroke contrast plays against the heavy grotesque masthead the way old magazines played a heavy slab nameplate against an Old Style body. Cormorant has the slightly damp, slightly old-paper quality the design needs. - **Captions, Footnotes, Crop-Mark Glyphs:** "JetBrains Mono" (weight 400, weight 700) at 9--11px, used sparingly. Mono is the type of the apparatus -- credits, file paths, version stamps, brackets, the framing material around the article rather than the article itself. - **Quote / Pull Quote:** "Cormorant Garamond" italic at clamp(1.4rem, 2.8vw, 2.2rem) with line-height 1.3 and a -0.01em letter-spacing. The masthead, sub-masthead, and footnote/mono together place this design firmly in the **sans-grotesk** typography category (currently 3% in the corpus), with a serif body that grounds it in editorial print convention rather than tech-magazine convention. **Palette (deep-burgundy primary, currently 1% in the corpus):** - `#3A0A1F` -- *Vault Burgundy.* The primary ink color. Deep, almost-black, oxidized blood. Used for masthead, body type at full contrast, and the ornamental rules. This is the "ink" of the magazine. - `#5C1730` -- *Decree Wine.* A slightly lifted burgundy used for accents: the seam shadow, drop-cap fills, glitch-channel offsets. Reads as a printer's second hit slightly off-register. - `#8B1F3A` -- *Censor Crimson.* A hotter, more saturated red-burgundy reserved for redaction bars, crop marks, and the moment a glitch breaks fully. Used at <5% page coverage; it is the color of intrusion. - `#F2E8D5` -- *Aged Stock.* The paper. A warm cream that pretends to be 48-year-old newsprint. Background of the entire spread. Has a subtle SVG noise texture overlaid at 3% opacity for grain. - `#D4C5A0` -- *Foxed Margin.* A darker biscuit tone used at the page edges as a vignette gradient, simulating the way old paper darkens at exposed edges. Drawn as a radial gradient hugging the viewport corners. - `#1A0810` -- *Spine Shadow.* Near-black with a violet undertone. Used only in the gutter seam shadow and in the deepest glitch artifacts. Never used for type. - `#7A6B4F` -- *Footnote Sepia.* A muted brown-ochre for crop marks, folio numbers, and the dot-dash circuit ornament. Reads as a slightly faded second-color print pass. **Light-on-dark inversion:** None. The site is dark-on-light throughout. This is a printed magazine, not a screen interface. ## Imagery and Motifs **Core Visual Motifs:** 1. **The Lead Plate (procedural glitch-art).** The square image well on the left page contains no photograph. It contains a procedurally rendered **glitch-art** composition built entirely in SVG and CSS: - A base "portrait" silhouette -- a generic suited torso-and-head outline (the universal politician), drawn as a flat black `` filled at 70% opacity over the cream background. - A horizontal scanline pattern (`repeating-linear-gradient`) at 2px/3px intervals overlaid at 18% opacity in Spine Shadow. - Three offset "RGB" copies of the silhouette displaced by (-4px, +2px, -2px) in Censor Crimson, Decree Wine, and Spine Shadow with `mix-blend-mode: multiply`. This produces the chromatic-aberration look of misregistered color print or a damaged tape head, with the burgundy palette filling the role usually occupied by red-green-blue. The aberration intensifies on cursor proximity. - Periodic horizontal "tape dropouts" -- thin (1--3px) horizontal slices of the silhouette displaced 8--40px to the right or left, animated to flicker into and out of existence on a long, irregular interval (3--11s, weighted toward longer pauses). - A 4px-wide Censor Crimson redaction bar across the eyes of the silhouette, immobile, with the words "REDACTED / 검열됨" set in 8pt mono inside it. This is the only label permitted on the image. 2. **Circuit Ornaments (motifs: circuit, currently 7%).** The decorative furniture of the page is built from a custom dingbat alphabet of tiny circuit-board glyphs -- not realistic traces, but stylized, almost folk-art versions: a dot, a dot-dash, a right-angle trace, a small empty square representing a chip pad, a three-pin transistor symbol. These run along the bottom margin as the footer ornament (repeated every 18px), separate the footnotes from the body, and bullet the issue line. The circuit ornaments imply that this magazine was somehow *broadcast*, that its information traveled through wires, that the dead medium had a substrate. They are drawn in Footnote Sepia at 12px line height. 3. **The Crop Marks.** Functional-decorative. Four crosshairs at the viewport corners, drawn as thin (1px) lines in Censor Crimson, 12px arms each, with a 2px gap from the corner. They animate subtly: every 14s one of the four crops twitches by 1px and resets, as if the printing press is misfeeding once per minute. 4. **The Seam.** Already described in Layout, but worth repeating as a motif: a 1px Vault Burgundy vertical line at 50vw with a 4px Spine Shadow soft glow, terminating 24px from the top and bottom edges. Functions as the gutter of the spread and as the design's only true vertical axis. 5. **Redaction Bars.** Sized to specific words inside the body copy. About 6 words across the entire essay are redacted, each replaced with a Censor Crimson bar of identical width to the original word. On cursor hover, the bar lifts 2px and reveals the word beneath -- but the word is itself glitched, channels separated, illegible. The "secret" is that the secret was destroyed. The bars are the design's only purely interactive content element. 6. **Issue Stamp.** A faint, rotated "DEPOSIT COPY -- DO NOT CIRCULATE" stamp in Censor Crimson at 8% opacity, rotated -7deg, anchored to the top-right of the right page. Set in JetBrains Mono Bold uppercase. Adds the archival-illicit flavor without being literal. 7. **Cursor Trail (patterns: cursor-follow, currently 6%).** The cursor itself is replaced -- when over the spread -- with a small Censor Crimson 12px crosshair. As the cursor moves it leaves a trail of three trailing crosshairs at 60% / 30% / 15% opacity, fading over 400ms. Where the cursor passes within 80px of any text element, that element's RGB channels separate proportional to proximity (closer = more separation, max 6px). The cursor is the *reader's eye on the page*, and the page reacts to being looked at. **Imagery NOT used:** No photography. No stock images. No illustrations beyond the procedural glitch portrait. No icons (the circuit dingbats are typography, not icons). The page is almost entirely typographic with one composed image-zone. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site loads on a fully blanked viewport filled with Aged Stock (#F2E8D5). For the first 600ms, nothing renders. At 600ms, an audible *click* (optional, off by default, behind a small mute toggle in the corner -- or omit entirely) accompanies the appearance of the four crop marks at the corners, drawn in 200ms each in a staggered sequence (top-left, top-right, bottom-right, bottom-left). At 1400ms, the seam draws itself from top to bottom in 700ms (Vault Burgundy line growing from 0 to 100% height). At 2100ms, the masthead "JEONGCHI" types itself letter-by-letter in 900ms (not a true typewriter -- each letter snaps into place with a 40ms duration and 60ms stagger, no caret). At 3000ms, the rest of the spread fades up over 1200ms with a slight upward translate of 8px per element, staggered so the lead plate appears first, then the right-page columns last. By 4200ms the site is fully composed and quiet. This entire opening sequence is gated behind `prefers-reduced-motion: reduce`, which collapses it to a single 300ms fade. It also runs only once per session (sessionStorage flag); revisits go straight to the composed state. After load, **the page does nothing on its own.** No autoplay glitches, no scroll-triggered reveals (there is no scroll), no carousel. All motion from this point is **cursor-follow** and entirely user-driven. This is essential: the site is a haunted document, and the haunting only manifests when looked at. **Cursor-driven behavior (the central interaction model):** 1. The default cursor is hidden (`cursor: none`) over the spread surface and replaced with a custom 12px crosshair in Censor Crimson, rendered as a fixed-position SVG that follows pointer position with a 60ms easing lag (slight, to imply weight). 2. A trail of three additional crosshairs follows the primary at 80ms / 160ms / 240ms lag, opacities 0.6 / 0.3 / 0.15. Implemented as three additional fixed SVGs with `transform: translate3d` updated in a single `requestAnimationFrame` loop. 3. **Proximity glitch field.** Every text element on the page (`[data-glitch]`) computes its distance to the cursor on each frame. Within 200px the element receives an RGB-split treatment: three duplicate text layers offset by `(distance-mapped-px, 0)` in Censor Crimson, Decree Wine, and Spine Shadow with `mix-blend-mode: multiply`. Within 60px the offset maxes at ±6px and a horizontal "tape tear" effect activates -- a `clip-path` polygon randomly slices the text into 2--4 horizontal bands offset by ±3px independently. 4. **Lead Plate intrusion.** The image well intensifies its existing chromatic aberration based on cursor proximity. At >300px distance, aberration is at baseline (2px). At <100px, aberration is at 10px and the scanline opacity rises from 18% to 38%. The redaction bar over the eyes does *not* react -- it is the one stable element. 5. **Redaction bar lift.** The six redaction bars in the body copy each have a hover state: lift 2px (translate-Y), shadow grows from 0 to 4px Spine Shadow, the word beneath is revealed but rendered with a permanent maximal RGB-split (12px) so it cannot be read. Mouseout returns the bar to rest in 240ms. 6. **Crop mark twitch.** Independent of cursor: every 14s, one randomly chosen crop mark twitches 1px in a random direction for 80ms then resets. This is the only autonomous motion on the page. **Implementation guidance for storytelling:** - **HTML structure:** `
` with two children, `
` and `
`. The masthead, lead plate, and pull quote are in `.page-left`. The folio header, two columns of body, and footnotes are in `.page-right`. Use semantic article/figure/blockquote elements -- this is a magazine, treat the markup like one. - **CSS:** Use CSS Grid for the spread (two columns of 50vw, full viewport height). Inside each page use a 12-column sub-grid with 24px gutters and 48px outer margins. Body columns are CSS columns (column-count: 2, column-gap: 24px). Use `font-feature-settings: "liga", "dlig", "onum", "kern"` on Cormorant for proper old-style figures and ligatures in body copy. - **Glitch effect (RGB split):** Implement as a CSS custom property mutation. Each `[data-glitch]` element renders its text three times via `::before` and `::after` pseudo-elements containing `attr(data-text)`, positioned absolutely with `mix-blend-mode: multiply` and translated by `var(--glitch-x)`. JS updates `--glitch-x` per frame based on cursor distance. This avoids re-rendering text on every frame. - **Lead plate:** Build entirely in SVG. The silhouette is one ``. The scanlines are a `` filled into a ``. The chromatic copies are three additional `` elements of the silhouette with translate transforms and color filters. The tape dropouts are a small set of `` clip-bands animated via SMIL or Web Animations API with irregular keyframe timing. No raster imagery whatsoever. - **Body copy generation:** Write a single ~280-word fragment in third-person archival prose about the half-life of decrees, the way constitutions become brittle, the specific damp smell of legal-archive basements. End the fragment mid-sentence with an em-dash and the words "[continued on p. 6]" -- where p. 6 does not exist. The mid-sentence cutoff is a critical narrative beat. - **No CTAs, no pricing, no stat grids, no testimonials, no logos-of-clients strip, no "subscribe to the newsletter," no contact form, no social links.** The site is a piece of recovered media. It does not transact. **Narrow viewport (<1100px):** The spread "folds" -- the right page slides under the left page and the visitor scrolls vertically through them as if turning a page. The seam becomes a horizontal rule between them. The cursor effects degrade to touch-tap pulses at the touch coordinate. This is a graceful degradation, not the primary experience. **Final atmospheric note for implementation:** When everything is built, sit with the page in stillness for 60 seconds. If it feels like a loud tech demo, you have over-built it. The page should feel almost dead until touched, and even when touched it should feel reluctant. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Magazine-spread used as a single static viewport, not a scrolling experience.** Magazine-spread layout appears in 12% of the corpus, but in nearly every case it is used as one section among many in a longer scrolling page, or as a multi-page horizontal scroller. This design treats the magazine spread as a *terminal* layout: the entire site is one spread, no scroll, no second page. The constraint is the concept. No other design in the corpus refuses scroll this completely while invoking magazine-spread. 2. **Deep-burgundy as the only chromatic family (1% in corpus, lowest tier of palette use).** Where corpus designs reach for warm earth tones, gradients, and high-contrast neon, this design uses burgundy in five graded values plus one cream and one near-black. There is no gradient. There is no warm photography. There is no green, no blue, no yellow except as a cream-paper substrate. The discipline of a single-hue palette is rare in the corpus and is essential to the period-correct feel. 3. **Glitch-art imagery (0% in the corpus before this design).** The imagery category shows glitch-art at 0%, meaning *no* prior design has used it as its primary imagery strategy. This design centers glitch-art -- not as a stylistic flourish but as the entire image vocabulary -- with a procedurally generated, fully-SVG glitch portrait as the only "photograph" on the page. 4. **Nostalgic-retro tone (0% in the corpus).** The tone vocabulary shows nostalgic-retro at 0%. Where the corpus is dominated by mysterious-moody (94%) and authoritative (24%), this design occupies the empty quadrant: melancholy, archival, period-specific. It is not "moody" in a contemporary cinematic sense -- it is *nostalgic* in the precise sense of mourning for a specific historical artifact (the 1970s political news magazine). 5. **Sans-grotesk typography (3% in corpus, sub-tier).** Used here for masthead and section labels rather than the more common mono (93%) or humanist (33%). The pairing with Cormorant Garamond serif body copy is unusual -- most sans-grotesk corpus designs pair with mono or with another grotesque, producing a tech feel. The serif body shifts the design firmly toward editorial print rather than digital interface. 6. **Cursor as a reading metaphor, not a UI device.** Cursor-follow appears at 6% in the corpus. In most cases it is used for magnetic buttons or trailing decorative effects. Here, the cursor is *the reader's eye*, and proximity to text *damages* the text. This inverts the conventional cursor-follow logic (cursor reveals / animates / highlights) into cursor *destabilizes*. The reading experience is haunted by the reader. 7. **No navigation, no CTA, no transactional elements at all.** Most corpus designs include at least vestigial navigation, a hero CTA, or footer links. This design has zero. It is a single magazine spread that has been recovered from a vault and posted. The visitor reads it and leaves. There is nothing to click to "learn more" because there is no more to learn. 8. **Circuit-board ornaments as period dingbats.** Circuit motifs appear in 7% of corpus designs, almost always in a futurist / cyberpunk register. Here they are recontextualised as *folk-art print ornaments* -- tiny dot-dash glyphs running along the bottom margin in Footnote Sepia, treated like ornamental dingbats from a Victorian printer's case rather than tech imagery. The same vocabulary, repurposed for a 1970s archival aesthetic. **Document chosen seed/style:** aesthetic: minimalist, layout: magazine-spread, typography: sans-grotesk, palette: deep-burgundy, patterns: cursor-follow, imagery: glitch-art, motifs: circuit, tone: nostalgic-retro **Patterns avoided based on frequency analysis:** No gradient palette (95% in corpus); no parallax (68%); no stagger reveals beyond the one-time entrance (56%); no mysterious-moody tone (94%); no centered or full-bleed standard layout (91% / 44%); no mono-typography-as-primary (93%); no scroll-triggered animation (36%); no spring physics (43%); no counter-animate (90%). The design deliberately occupies the empty corners of the corpus pattern space.