# Design Language for jungchi.boo ## Aesthetics and Tone jungchi.boo is **a pirate-radio broadcast beamed out of a half-collapsed Risograph print shop** — politics (정치, *jungchi*) re-imagined not as the marble chamber of the official spelling but as the **back-alley xerox of it**: the slightly wrong romanization, the bootleg pamphlet, the zine someone stapled together at 3 a.m. and slipped under doors. Where the sibling site `jeongchi.boo` is a tended greenhouse and `diplomatic.boo` is a sunlit chancellery library, **jungchi.boo is the one that got expelled from both** — it kept the same subject (collective decision-making, power, the machinery of who-decides) but it prints its findings on cheap paper, in jewel-bright spot inks, on a diagonal, with the edges deliberately misregistered. The governing image is **light passing through a stack of old, foxed paper held up against the sky** — the "ethereal" register here is not soft-focus angels and pastel mist; it is the *glow you get when sun comes through translucent aged stock*: the amber bloom at the paper's edge, the ghost of the page behind showing through, the dust motes lit like a censer. The site looks like it is **lit from behind**. Aged paper as a *light source*, not a texture swatch. That is the whole mood — fragile material, luminous treatment. The `.boo` is not spooky and not the soft "boo" of a friend's ambush either; here it is the **heckle from the back of the room** — the "*boooo*" you hear when a politician says something self-serving. The tone is **edgy-rebellious** (2% in the corpus, the single rarest tone term) without being edgelord: it is the rebelliousness of *the underground press*, of pamphleteers and pirate broadcasters, of the person who photocopies the suppressed report and tapes it to the lamppost. Witty, distrustful of polish, allergic to the corporate-civic register — but warm toward *people* and cold only toward *power*. Think the energy of a 1970s feminist mimeograph collective crossed with a present-day mutual-aid Telegram channel, art-directed by someone who loves Risograph misregistration and jewel-tone spot color the way other people love sunsets. Inspirations to hold in mind: the **Risograph zine** (limited spot inks, deliberate offset, the paper showing through everywhere); **WPA / Constructivist agitprop posters** (diagonal thrust, type as a megaphone, the slogan that *leans*); **the foxed, sun-bleached broadsheet** pinned to a kiosk for a decade; **light-leak photography** (the orange-magenta bloom across the frame); and the **xerox aesthetic** of punk flyers — but executed with jewel-tone *precision*, not muddy grunge. Crisp diagonal geometry, luminous paper, saturated ink, dust in the light. ## Layout Motifs and Structure The layout is **a true diagonal-sections composition** — diagonal-sections sits at only 5% in the corpus, and almost everything that claims it actually means "one slanted divider between two otherwise rectangular blocks." This site means it literally: **the entire page is built on a single shear axis of roughly -8°**, and *content rides that axis*. Sections are not stacked boxes with a zigzag fringe; they are **overlapping parallelograms of aged paper**, each one a slightly different stock, tilted, with the one above casting a soft printed shadow onto the one below — like sheets fanned across a light table. As you scroll, you are not scrolling *down* so much as **scrolling along the diagonal**: the content's baseline grid itself is sheared, so reading the page feels like reading a banner unfurled across a wall on a slant. There are **five "broadsides"** (not "sections" — broadsides, the single-sheet printed proclamations): 1. **THE MASTHEAD** — a full-bleed light-table: a stack of three or four translucent aged-paper parallelograms, the topmost bearing the wordmark `jungchi` set huge and tilted, the misspelling owned proudly (a tiny printed-correction-mark caret near it, as if an editor flagged it and the printer ran it anyway). Behind the stack, a slow orange light-leak bloom drifts across the "sky." A single line of body copy sets the thesis. No nav bar in the chrome sense — instead, **four printed "stamps"** in the corners (DATE, EDITION No., the heckle "*boo*" rendered as a rubber-stamp, and a "PASS IT ON →" mark) that act as anchors. 2. **THE LEDGER OF WHO-DECIDES** — a sheared editorial spread: two columns of "dispatches" — short, punchy paragraphs about a single political concept each (quorum, veto, filibuster, coalition, reform, the whip, the recess) — each dispatch printed on its own little parallelogram of paper, jewel-tone ink, with a hand-stamped serial number. The columns are *not vertical*; they march up-and-to-the-right along the shear axis. A reader scrolls and the dispatches slide past on the slant. 3. **THE LIGHT TABLE** — the centerpiece interaction zone: a darkened "table" on which lie several semi-transparent aged sheets. Moving the cursor is moving **a desk lamp**: a soft circular pool of warm light follows it, and *only the paper inside the pool reveals its printing* (the ink fades up out of the amber glow). Off the pool, the sheets are near-blank, just the ghost of foxing. This is the site's signature: **you read by lamplight, one patch at a time.** 4. **THE OVERPRINT** — a single tall parallelogram where the same short manifesto-paragraph is printed *four times*, each in a different jewel ink, each offset a few millimeters along the diagonal, so the text is legible only where the impressions align and chromatic-fringed where they don't. It is the design's argument made visual: *the official record is a misregistered overprint of what actually happened.* Scrolling here gently animates the offset converging and diverging. 5. **THE COLOPHON / PASS IT ON** — the foot: a small printed colophon block (set tiny, like a real zine's: "Printed on a dying duplicator. Jewel inks: Garnet, Viridian, Amethyst, Topaz. Set in Sora & Spline Sans Mono. No part of this may be sold; all of it may be copied.") and a single mark — "PASS IT ON" — that on hover stamps an extra ink impression onto the page with a soft *ka-chunk*. No CTA, no email capture, no social-icon row, no "trusted by." A zine doesn't ask you to subscribe; it asks you to photocopy it. Spatial rules: **everything is a parallelogram** (use `clip-path: polygon(...)` and `transform: skewY(-8deg)` with counter-skewed inner content so text stays readable); **paper overlaps paper** with `mix-blend-mode: multiply` so overlap regions darken like real translucent stock on a light table; **the background is "sky"** — a very pale warm gradient with a slow-drifting radial light-leak — so the paper genuinely reads as *backlit*; **negative space is generous** (the diagonal needs air to breathe, and zines have wide margins because the duplicator can't print to the edge). Card-grid (88%), centered (86%), hero-with-CTA — explicitly refused. ## Typography and Palette **Typefaces — Google Fonts only:** - **Sora** — the primary **geometric-sans** voice (geometric-sans is 4% in the corpus — nearly untouched). Sora is a low-contrast, slightly quirky geometric sans with a faintly *technical-protest-poster* flavor — circular bowls, open apertures, a touch of personality in the `a` and `g`. Used for the wordmark and all headlines. The `jungchi` wordmark: Sora 800 (ExtraBold), letter-spacing `-0.02em`, tracking tight, set at `clamp(3.2rem, 11vw, 9rem)`, sheared with the page axis, in Garnet ink on the topmost paper. Broadside titles ("THE LEDGER OF WHO-DECIDES" etc.): Sora 700, **UPPERCASE**, letter-spacing `0.14em`, `clamp(1.3rem, 3.2vw, 2.1rem)` — set as if it were a poster's banner line. - **Spline Sans Mono** — the secondary voice and the "printed-machinery" texture: a humanist monospace with rounded-ish terminals (still **mono**, which is 94% in the corpus — but used here *against type*, as the *typewriter-and-duplicator* register rather than the dev-terminal one). Used for: serial numbers and rubber-stamp marks (`EDITION No. 047`, `Q.0.RUM`), the colophon, the corner stamps, dispatch labels, and the date stamp. Spline Sans Mono 400 and 500, `0.9–1rem`, often slightly rotated (±2–4°) as if hand-stamped. - **Newsreader** (or its italic) — used *only* for the body copy of the dispatches and the manifesto, at `1.05–1.2rem`, line-height `1.55`: a low-contrast, slightly inky text serif designed for screen news reading, which gives the "actually-a-pamphlet-someone-wrote" warmth that pure sans would lose. Newsreader 400 for body, 400 italic for the pull-phrases and the censorship-bar captions. (If a build wants to drop to two families, drop Newsreader and set the body in Sora 400 — but the three-family setup is preferred.) **Palette — jewel-tones (4% in the corpus) over aged paper, lit from behind:** The substrate (three "paper stocks", warm and foxed): - `#F4ECD8` — **Newsprint Cream**, the lightest stock and the page "sky" base. - `#E7D7B4` — **Foxed Manila**, the mid stock, used for most dispatch parallelograms. - `#D9C290` — **Sun-Bleached Kraft**, the darkest stock, for the masthead's lowest sheet and the colophon. The jewel inks (saturated, four spot colors, like a real Riso run): - `#7A1733` — **Garnet** (deep ruby red) — the wordmark, primary headlines, the heckle stamp. - `#0F5E4E` — **Viridian** (deep jewel green) — second ink, dispatch numbers, the "PASS IT ON" mark. - `#3B2A6B` — **Amethyst** (deep violet) — third ink, the overprint layer, captions, the censorship bars. - `#B5781A` — **Topaz** (burnt-gold ochre) — fourth ink and the *light* — the light-leak bloom, the lamp pool's warm core, hover glows. Ink for body text and the colophon: `#241C12` — **Press Black** (a warm near-black, never `#000`, because a duplicator never prints true black). Usage discipline: **paper colors are surfaces, jewel inks are marks, Press Black is text, Topaz is light.** Overlap regions of paper-on-paper go to roughly `#C9AE7C` via `multiply`. Ink-on-ink overlap (the Overprint broadside) fringes toward muddy plum/teal where impressions miss — *that's intentional*. The light-leak gradient: a slow-drifting `radial-gradient` of `#B5781A` at ~12% opacity over the cream sky, plus a faint magenta-edge (`#7A1733` at ~6%) trailing it — pure 35mm light-leak. ## Imagery and Motifs **Imagery is bespoke, mostly procedural, and *zero photography*** (photography is 98% in the corpus; this site uses none). Everything is "printed." - **Paper-aged as the dominant visual language** (paper-aged is only 4% in imagery). Every parallelogram is a procedural aged sheet: a base paper color, plus a **foxing layer** (small irregular sepia-brown stains, generated as a handful of layered low-opacity radial gradients or a tiled SVG `feTurbulence` mask tinted toward `#9C7B3E`), plus **deckled/torn edges** (an SVG path with a slightly ragged baseline, not a clean polygon, for at least the topmost sheets), plus a faint **horizontal "duplicator drum" banding** (very low-opacity repeating-linear-gradient, the ghost of a tired photocopier). Critically, the paper is **translucent** — `opacity: 0.86–0.94` — so stacked sheets show each other through, and the "sky" glows behind them. This is paper-aged used as *backlit film*, which is what makes the "ethereal" reading land without a single drop of mist. - **Risograph misregistration as the core decorative motif.** Headlines and the wordmark get a **2–4px chromatic offset duplicate** in a second jewel ink underneath (Garnet headline with a Viridian or Amethyst ghost shifted along the diagonal) — the classic Riso "the second drum was slightly off" look. Used sparingly: the wordmark, the five broadside titles, the Overprint block. Not on body text. - **Rubber-stamp / hand-stamp marks** (vintage motif, 23% — common, but the *underground-press* flavor of it is the differentiator): edition numbers, dates, the `boo` heckle, "PASS IT ON," "DRAFT," "UNOFFICIAL," "DO NOT FILE" — all rendered as Spline Sans Mono inside thin rounded-rect or oval strokes, slightly rotated, slightly broken-up (a mask that eats ~8% of the ink so it reads as a worn stamp), in a single jewel ink each. - **Censorship bars as a recurring graphic device.** Throughout the dispatches, a few words are covered by **solid Amethyst or Press-Black bars** — and on hover the bar *slides aside* (a `micro-interaction`) to reveal the word, with a tiny printed `[redacted by ████]` caption fading in below in Newsreader italic. It's the redacted-government-document gag, made playful and clickable. (Underused: `micro-interactions` at 4% in patterns — and used here in its truest sense, dozens of tiny per-element reveals rather than one big animation.) - **The desk lamp pool** — the only "imagery" that moves with the cursor: a soft `radial-gradient` of Topaz, ~280–360px, multiplied over the dark light-table, that *develops* the printing inside it. - **Dust motes in the light** — within the light-leak bloom and the lamp pool, ~20–30 tiny `1–2px` warm specks drift slowly (cheap CSS keyframes or a single tiny canvas). Lit dust, like a beam through a window. This is the literal "ethereal" texture. No icons in the UI-library sense. No glassmorphism, no neon glow, no 3D render, no stock photos, no logo strip. ## Prompts for Implementation **Build it as a single sheared light-table broadside, not a marketing page.** One HTML document, no SPA router, no build step beyond a Google Fonts link, one CSS file, and one small JS file (the lamp pool, the scroll-driven shear/overprint, the censorship-bar reveals, the "PASS IT ON" stamp, the dust motes). Target under ~95KB HTML+CSS+JS before fonts and SVGs. Progressive enhancement: with JS off, you still get a beautiful static slanted zine — the lamp just becomes a soft fixed glow and the redacted bars become permanently lifted. - **The shear axis.** Wrap the whole article in a stage with a CSS custom property `--shear: -8deg`. Each broadside is `transform: skewY(var(--shear))`; each broadside's *inner* content wrapper is `transform: skewY(calc(var(--shear) * -1))` so text and images sit flat while their *containers* tilt. Parallelograms beyond the broadside frame (dispatch chips, stamps) get their own `clip-path: polygon()` cut on the same angle. Honor `prefers-reduced-motion` by *keeping* the static shear (it's structural, not motion) but disabling the scroll-driven animations. - **Backlit paper.** Body background is a fixed warm gradient (`#F4ECD8` → `#EFE4C8`) with a `::before` pseudo-element holding the drifting light-leak (`radial-gradient` of `#B5781A`/`#7A1733` ellipses, animated `background-position` over ~40s, `mix-blend-mode: soft-light`). Each paper parallelogram is a `
` with `background: `, `opacity: ~0.9`, a procedural foxing layer (an inline SVG `feTurbulence`→`feColorMatrix` filter tinted sepia, or a tiled PNG-free SVG `data:` URI), `mix-blend-mode: multiply` against its neighbors, and a soft printed `box-shadow` (offset *along the diagonal*, low blur, `#241C12` at ~10%) so it floats above the sheet below. - **The Light Table interaction.** A dark section (`#241C12` overlaid at high opacity, or a Press-Black parallelogram) holding 3–5 absolutely-positioned aged sheets at ~`opacity: 0.12` (just foxing visible). A `pointermove` handler sets `--lampx`/`--lampy`; a single `radial-gradient` element of Topaz follows it via `transform: translate()`. The reveal trick: each hidden sheet has its printing in a child element with `opacity: 0` whose opacity is driven by a CSS `radial-gradient` mask anchored to `--lampx/--lampy` — i.e. the ink's *mask* is the lamp pool, so it fades up exactly where the light is. On touch devices, the lamp gently auto-orbits a slow Lissajous path so the content still develops. Story beat: this broadside literally says "you only ever see the part of politics someone shines a light on." - **The Overprint broadside.** Four absolutely-stacked copies of the same `

` manifesto, each in a different jewel ink, each `transform: translate()`'d a few px along the diagonal. A scroll-linked value (IntersectionObserver + scroll progress, or `animation-timeline: view()` where supported) animates the four offsets *converging* toward registration as the block reaches center-screen, then *diverging* as it leaves — the record briefly snaps into focus and falls apart again. Add per-letter chromatic fringing via stacked text-shadows in the off-registration state. - **Censorship bars.** Wrap redacted words in ``; default state is a solid Amethyst/Press-Black box (`color: transparent; background: `). On `:hover`/`:focus` the box slides off (`transform: translateX(110%)`, `transition: transform .28s cubic-bezier(.2,.7,.2,1)`), color returns, and a `::after` prints `[unredacted]` in Newsreader italic, tiny, in Viridian. Keyboard-reachable (`tabindex="0"`). These are the "micro-interactions" — make there be *many* of them, scattered, rewarding poking. - **Stamps & wordmark.** The `jungchi` wordmark: Sora 800, the deliberate misspelling, a tiny editor's caret + the official `정치` set micro beside it like a margin correction the printer ignored on purpose. Headlines get the 2–4px Riso ghost (a `::before` duplicate, second ink, `translate` along the diagonal). Corner stamps and serial numbers in Spline Sans Mono, rotated ±2–4°, with a worn-ink mask. - **"PASS IT ON".** The only "action": a stamp-shaped element at the foot; on click it appends another faint ink impression of itself to the page (slightly offset, slightly rotated, lower opacity) with a quick `scale(1.06)→1` "ka-chunk" and a soft thunk in CSS (no audio). It does nothing else — no link, no form. The whole site's call to action is "copy this," expressed as a stamp you can keep stamping. - **Dust motes.** ~24 tiny absolutely-positioned warm dots inside the light-leak and lamp zones, each with a slow randomized `@keyframes` drift + opacity flicker. Pure CSS; kill them under `prefers-reduced-motion`. - **Copy voice.** Underground-press, dry, anti-power not anti-people. The dispatches read like a smart pamphlet ("QUORUM, n. — the number of people who must be in the room before the room is allowed to pretend it speaks for everyone."). The colophon is a real zine colophon. No growth-speak, no "revolutionize," no emojis. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, "trusted-by" logo strips, hero-with-button, card-grids of features, cookie-banner-as-card, footer social-icon rows, stock photography, glassmorphism, neon glow. ## Uniqueness Notes Differentiators against the ~280-design corpus: 1. **"Politics rendered as an underground-press Risograph zine — aged paper used as a *backlit light source*, the misspelled domain owned as the bootleg-pamphlet of the official one" is unprecedented.** The corpus has plenty of civic/political domains and several "vintage" treatments (vintage at 23%), but none treats *aged paper as luminous backlit film* lit by a drifting light-leak, and none builds its concept around *being the xerox of its more respectable sibling site*. The sibling `jeongchi.boo` is a botanical greenhouse; `diplomatic.boo` is a chancellery library; **jungchi.boo is deliberately the one that prints the leaked report on a dying duplicator.** 2. **A genuine full-page diagonal-sections build, not a slanted divider.** diagonal-sections is 5% in the corpus and almost always means "one angled line between two rectangles." Here the *entire content grid is sheared -8°* — parallelogram broadsides, sheared baselines, scroll-along-the-diagonal — which essentially nothing in the corpus actually does. Combined with **geometric-sans** (4% — Sora) and **jewel-tones** (4% — Garnet/Viridian/Amethyst/Topaz spot inks) and **paper-aged imagery** (4%) and **edgy-rebellious tone** (2%, the rarest tone term), this design sits almost entirely in the corpus's underused vocabulary. 3. **The Light Table interaction — "you read by lamplight, one patch at a time" — is a bespoke metaphor mechanic, not a generic cursor-follow glow.** Most cursor-follow uses (88% of the corpus has *some* cursor reactivity) are decorative parallax or a halo. Here the cursor is a desk lamp and the page's printing is *masked by the lamp pool* — content literally develops where you point — and it carries the site's thesis (you only see the politics someone shines light on). Paired with the **Overprint broadside** (the same paragraph mis-printed four times, snapping into registration on scroll) and **dozens of redacted-bar micro-interactions**, the interactivity is all in service of one argument about the official record. 4. **A zine that refuses the entire conversion-funnel vocabulary on purpose.** No CTA, no signup, no pricing, no stat-grid, no logo strip — the only "action" is a rubber stamp that says PASS IT ON and just stamps another ink impression on the page. The anti-marketing posture is itself the brand. Avoided overused patterns per the frequency analysis: no hand-drawn aesthetic (96%), no glassmorphism (70%), no card-grid (88%), no centered layout (86%), no full-bleed photography (93% imagery), no pastoral-romantic / warm-inviting tone (35% / 27%), no humanist-default body type as primary, no big-spring/magnetic flourishes as the headline interaction (instead: many small micro-interactions). Chosen seed/style — **aesthetic: ethereal, layout: diagonal-sections, typography: geometric-sans, palette: jewel-tones, patterns: micro-interactions, imagery: paper-aged, motifs: vintage, tone: edgy-rebellious** — interpreted as *backlit-zine* rather than the predictable misty-pastel reading of "ethereal."