# Design Language for jeongchi.boo ## Aesthetics and Tone jeongchi.boo is **a parliament that grows in a greenhouse** — politics (정치, *jeongchi*) re-imagined not as a chamber of shouting men but as a surreal botanical conservatory where every motion is a seedling, every coalition a graft, every filibuster a vine that has gotten out of hand and is now politely strangling a column. The `.boo` here is not spooky; it is the **soft "boo" of a friend pretending to startle you out of cynicism** — a gentle ambush of warmth aimed at a subject everyone has agreed to be exhausted by. The site's entire thesis, rendered visually: *the machinery of collective decision-making is alive, it photosynthesizes, and it is — improbably — kind of beautiful when you stop yelling at it.* The aesthetic register is **surreal** in the Magritte-meets-Leonora-Carrington sense, not the glitchy-vaporwave sense. Specifically: 1. **René Magritte's "The Blank Signature" (1965)** — a horsewoman riding *between* tree trunks in a way that is impossible the moment you look twice. jeongchi.boo borrows this: ballot boxes that are also flowerpots, a podium whose microphone has bloomed into a foxglove, a quorum-counter rendered as a row of sunflowers that turn to face whoever scrolled most recently. The impossibilities are quiet. You only notice them on the second pass. 2. **Leonora Carrington's "The Pomps of the Subsoil" (1947)** — that warm, biological surrealism where institutions sprout roots and the roots have opinions. Our "policy lifecycle" is drawn as a single botanical specimen card: *germination → debate-bud → committee-leaf → floor-bloom → archived-pressing*. 3. **A Wardian case in a 19th-century reading room** — a sealed glass terrarium of a constitution, dewy on the inside, with a brass label that has been hand-corrected three times. The site feels *kept*, *tended*, *humid with care*. The tone is **friendly** — and deliberately so, because the corpus frequency analysis shows `friendly` at only 18% while the genre's gravitational default (pastoral-romantic, 35%; warm-inviting, 27%) pulls toward either dreamy escapism or sales-warmth. jeongchi.boo is neither dreamy nor selling. It is the tone of a **botanist-civics-teacher who genuinely likes you** and is showing you their favorite plant: contractions in the copy, second person, the occasional gentle joke, real curiosity, zero condescension. Sentences invite ("come look at this one"), they don't lecture. The serifs are classic and bookish but the voice underneath them is a friend in gardening gloves, not a magistrate. The mood is **a humid mid-morning inside a glass house, sun coming through at a low angle so everything has a soft halo** — which is where the lens-flare lives (see Imagery). Warm, lit, alive, faintly absurd, and on your side. ## Layout Motifs and Structure The layout is a **true masonry garden bed** — not a card-grid pretending to be masonry, but a genuine variable-height Pinterest-style flow where every "plot" is a different size because every plant is. Masonry sits at 8% in the corpus (card-grid at 88%), so this is a deliberate refusal of the uniform-tile reflex. The structure metaphor is a **botanical garden's planting map**: irregular beds of irregular shapes, paths winding between them, some specimens given a whole bed to themselves and some crowded three to a corner. **The bed system:** - The page is a **3-column masonry on desktop, 2 on tablet, 1 on mobile**, gutter 28px, with column widths that are *intentionally unequal* — 38% / 34% / 28% on desktop — so the garden never reads as a spreadsheet. Items flow top-to-bottom-then-next-column (true masonry order), and each item ("plot") has its own organic height. - **Plot types**, each a distinct visual species: - *Specimen plots* — a single large illustrated botanical-style card for one big idea (e.g. "What a quorum actually is"), 1.4–1.8× the height of a normal plot, with a hand-lettered brass-plaque caption at the bottom. - *Seedling plots* — small, square-ish, a single short paragraph and one line-drawn sprout. These are the "did you know" granules. - *Vine plots* — tall, narrow plots whose content (a timeline of a bill, a thread of debate) literally *climbs* — the text and illustration spiral up a drawn trellis from the bottom of the plot to the top. - *Pressing plots* — wide, short plots styled as a pressed-flower-and-tape archive entry: a "historical" political moment flattened between glass, with a typewritten index card. - **The path:** running behind the masonry, a faint hand-drawn **garden-path SVG** meanders top to bottom — a dotted gravel line that weaves between the plots. As you scroll, a small drawn watering-can icon travels the path (the scroll-progress indicator). It is the only persistent navigational element. - **No top nav bar.** Navigation is a **potting-shed shelf** that slides in from the left edge on hover near the edge (or tap on a leaf-tab on mobile): five hand-labeled clay pots — *Roots* (history), *Buds* (current motions), *Cross-pollination* (coalitions), *Pruning* (reform), *The Greenhouse* (about). Clicking a pot doesn't navigate away; it **re-sorts the masonry bed**, with plots animating to new positions. - **The header is a glass roof.** The top ~75vh is a wide illustrated greenhouse interior — wrought-iron arches, condensation, a low sun — with the wordmark "jeongchi.boo" set into a brass arch-keystone. The masonry beds begin *below the roofline* and the first row of plots tucks partway *under* the header's lower edge, so the garden feels like it continues up off-screen. - **The footer is a compost corner** — a small warm pile where "archived" plots go, drawn as a tidy heap of leaf-litter with a single hand-lettered line: *"everything here will eventually be soil for the next argument. boo."* Spatial principle: **irregular but tended.** Generous breathing room around specimen plots, deliberate crowding in the seedling corners, the meandering path tying it all together. The grid exists; it just refuses to be square about it. ## Typography and Palette **Typefaces — Google Fonts only:** - **Cormorant Garamond** — the primary **serif-classic** voice (serif-classic is 2% in the corpus — almost untouched). Used for all headlines and the wordmark, weight 500 for headings and 600 for the wordmark, with the optical-large cut's high-contrast strokes giving the "tended 19th-century reading-room" feel. Headlines at clamp(2.1rem, 4.6vw, 4.2rem), tracking -0.01em, line-height 1.12. The italic (Cormorant Garamond Italic, 400) carries every botanical Latin binomial the site invents for political concepts — *Quorum sufficiens var. greenhouse*, *Filibuster perennis*. - **Spectral** — body copy, weight 400 and 400-italic, 18px / 1.7. Spectral is a screen-tuned classic-serif workhorse with a warm, slightly humanist tone — bookish without being brittle. It reads like a well-thumbed civics primer. - **Gloria Hallelujah** — used *sparingly*, only for the **hand-lettered brass-plaque captions** and the clay-pot labels on the potting-shed shelf and the watering-can's tiny annotations. It is the gardener's own handwriting on the labels. Capped at ~3% of text by area; never used for reading copy. (If a steadier hand is wanted in implementation, **Caveat** is the acceptable substitute — also Google Fonts.) - **IBM Plex Mono** — weight 400, 12px, used *only* for the typewritten index cards in the pressing plots and the vote-tally numbers. The single cool, precise voice — the registrar's typewriter in a room full of plants. The pairing logic: **a classic high-contrast serif for the institution, a warm humanist serif for the conversation, a handwritten face for the gardener's love, a monospace for the cold hard count.** Four registers, clearly hierarchized. **Palette — "gardener's gradient" (gradient is 97% in the corpus, so the differentiation here is *how* it gradients: every gradient in this site is a botanical light-through-leaf gradient, OKLCH-interpolated, never a flat two-stop UI sweep, and the page itself shifts hue with scroll depth like sun moving across a glass house):** - `#FBF6E9` — *Glasshouse Light* — the primary background, the warm milk of morning sun on whitewashed iron. Not pure white; faintly buttered. - `#F2E4C9` — *Potting Cream* — secondary surface for seedling plots and the potting-shed shelf, the color of dry compost mix. - `#E8D3A8` — *Brass Plaque* — the engraved-label color, also the keystone of the greenhouse arch and the watering-can. - `#7FA85B` — *Young Leaf* — the dominant living green, used for sprouts, vines, the path-side foliage. A spring green with sun in it, not a forest green. - `#3F6B3A` — *Deep Frond* — darker green for body-text-on-pale-green panels, vine trellises, the compost-corner. - `#C95F8A` — *Foxglove* — the surreal accent: the bloomed microphone, the sunflower-quorum's heart, hover states. A warm pink-magenta that says "this institution flowered." - `#E0934A` — *Late Sun* — the lens-flare core color and the warmest gradient stop; the low-angle light. - `#2E2A22` — *Pressed Ink* — primary text color, a warm near-black like old iron-gall ink. Never pure black. - `#A6C7D9` — *Glass Cool* — the only cool color: condensation on glass, the typewriter-card paper tint, the brass-label corrections. Used at <5% coverage. **Gradient rule:** every gradient is a 4-to-6-stop OKLCH ramp drawn from this set in a botanically plausible order (*Deep Frond → Young Leaf → Late Sun → Glasshouse Light → Brass Plaque*), masked through leaf-shaped SVG so it always reads as "light coming through a leaf," never as a CSS background. The page background `body` slowly cross-fades along a 3-stop version of this ramp as you scroll from roofline to compost — a 40-second-equivalent eased transition tied to scroll position, so the garden visibly "moves into the afternoon" as you descend. ## Imagery and Motifs **Imagery is bespoke botanical illustration plus a deliberate, restrained use of lens-flare** — and essentially zero photography (photography is 98% in the corpus; this site uses none). - **Botanical-plate illustration as the dominant visual language.** Every specimen plot, seedling, and vine is a custom line-and-wash illustration in the style of a **Curtis's Botanical Magazine plate** (1787–present): confident ink linework, soft watercolor fills in the palette greens and the Foxglove accent, a hand-numbered corner. But the *subjects* are political: a "ballot-box bromeliad" (a ballot slot that is also the cup of a tank bromeliad, holding rainwater = collected votes), a "podium foxglove" (a lectern whose gooseneck mic has become a foxglove spike, each bell a soundbite), a "coalition graft" (two different rootstocks bound with raffia, healing into one stem), a "filibuster ivy" (English ivy that has overgrown a Doric column labeled "Floor Time"), a "quorum sunflower row" (five sunflowers; they track the cursor / last-scrolled element like real heliotropism). Each plate gets an invented Latin binomial in Cormorant italic and a hand-lettered Gloria Hallelujah brass-plaque caption. - **Lens-flare, used surreally and once-per-screen.** Lens-flare is 8% in the corpus and almost always cyberpunk/neon; here it is the **low morning sun through the glasshouse glass**, rendered as a soft warm anamorphic streak in *Late Sun* (#E0934A) with a few ghost-circles. It is a *narrative* element, not chrome: it appears in the greenhouse header (a real flare off the iron arch), and then **exactly one flare per scrolled viewport** drifts across a plot — never two at once — as if the sun were genuinely tracking through the building as you read. It is built as a single SVG/CSS layer with `mix-blend-mode: screen`, low opacity (0.28 peak), feathered, and it *moves with parallax* (faster than the plots) so it reads as light, not as a sticker. On `prefers-reduced-motion` the flare is static, present, and pale. - **Floral-botanical motifs as the connective tissue** (floral-botanical is 3% in the corpus). Beyond the big plates: hairline botanical *spot illustrations* in the margins (a single pressed leaf, a curl of tendril, a seed); the section dividers are **drawn pressed-flower strips** taped at the corners; the bullet points are tiny ink sprouts; the link underlines are drawn as **growing tendrils** that extend on hover (a slow vine-climb, ~400ms). The dotted garden-path SVG behind the masonry has tiny weeds drawn poking up at intervals. - **Pressing/herbarium texture.** The "historical moment" pressing plots have a real **pressed-and-taped-in-an-album** treatment: a flattened, slightly desaturated botanical illustration, washi-tape corners (drawn, semi-transparent), a faint foxing/age speckle (4% SVG `feTurbulence`), and a typewritten IBM Plex Mono index card pinned beside it. - **Texture overall:** a very faint **laid-paper grain** (3–5% opacity) across all surfaces — the tooth of a botanical-magazine page — plus a barely-there *condensation* gradient at the very top of the viewport (a soft foggy band, 6% opacity) reinforcing "inside a glass house." - **No photography, no stock, no icon-library glyphs.** Every mark on the page is drawn for it. **Motifs summary:** floral-botanical (the connective tissue and the spot art), nature (the whole conceit — institutions as living plants), candle-atmospheric *adjacent* but actually *sun-atmospheric* (the lens-flare as warm low light), book-scholarly (the herbarium-album / botanical-magazine framing), and a quiet thread of *surreal impossibility* in every plate. Botanical-floral dominates; nothing competes with it. ## Prompts for Implementation **Build it as a single long masonry "garden bed," not a marketing page.** One HTML document, no SPA router, no build step beyond a Google Fonts link and one CSS file plus one small JS file for masonry layout, the lens-flare-per-viewport logic, the sunflower-cursor-tracking, and the bounce-enter reveals. Target under ~80KB HTML+CSS+JS before fonts and SVGs. - **Masonry engine.** Use CSS `columns` as the no-JS baseline (multi-column, `break-inside: avoid` on each plot) and progressively enhance to a tiny JS absolute-position masonry (measure each plot's height, place into the shortest column) for true Pinterest-flow ordering and for the re-sort animation when a clay-pot filter is clicked. Column count + widths: desktop 3 cols (38/34/28%, 28px gutter), tablet 2 cols equal, mobile 1 col. Plots animate to new positions with a spring on filter change (stiffness ~120, damping ~18). - **bounce-enter as the signature reveal pattern.** bounce-enter is 4% in the corpus — almost no one uses it. Here it is *the* entrance: as each plot scrolls into view, it **drops in and bounces once** — translateY from -24px with an overshoot-and-settle cubic-bezier(.34,1.56,.64,1) over ~520ms — like a seedling popping up out of the soil, or a sprout you just watered springing back. Stagger plots in a row by ~70ms. The greenhouse-header wordmark bounces in on load. The clay-pot shelf items bounce when the shelf slides out. Crucially: **the bounce is small and organic** (one overshoot, ~8% past target, then settle) — never cartoonish, never repeated. On `prefers-reduced-motion`, replace with a plain 200ms fade-up of 8px. - **The sunflower-quorum interaction.** The "quorum sunflower row" specimen plot has five SVG sunflowers whose heads (a `` with `transform-origin` at the stem joint) rotate ±18° to "face" whichever plot was most recently scrolled past the viewport center — a slow heliotropic ease (~900ms). It's the page's one genuinely surreal living detail. Cheap to build: a single `IntersectionObserver` reports the centermost plot's horizontal position; the sunflowers lerp toward it. - **Lens-flare-per-viewport.** Maintain one flare DOM node. As the user scrolls, when a new viewport-height of content enters, choose one plot in that band, animate the flare across it (a 6–9s slow drift, `mix-blend-mode: screen`, opacity 0 → 0.28 → 0, slight scale, parallax-faster than content), then idle until the next band. Never two flares. Header flare is separate and permanent (subtle, off the iron arch). - **Background scroll-hue.** `body` background interpolates a 3-stop OKLCH ramp (*Glasshouse Light → Potting Cream → a touch of Brass Plaque*) keyed to scroll progress, so descending the page = sun moving across the glass house = late morning into early afternoon. Slow, subliminal. - **Tendril link-underlines.** Inline links have an SVG tendril path under them, `stroke-dasharray` drawn from 0 to full over ~400ms on hover with a slight curl at the tip, in *Young Leaf*; on un-hover it retracts. Body-link color shifts to *Foxglove* on hover only at the very end of the draw. - **Storytelling pace.** The page is a *walk through a greenhouse*, plot by plot. Suggested copy registers (friendly botanist-civics-teacher, second person, contractions, gentle): - *Header / The Glass Roof*: "come in — mind the step, it's humid. everything in here is politics, but the good news is it's all alive, and most of it is actually kind of lovely up close. shall we?" - *Roots (history)*: pressing plots — "this one's pressed and labeled. it's older than it looks, and it still smells faintly of the room it came from." - *Buds (current motions)*: vine plots that climb — "this one's still growing. nobody's sure how tall it gets. you can watch it though." - *Cross-pollination (coalitions)*: the graft plate — "two different roots, one stem, a lot of raffia. it takes, or it doesn't. when it takes, it's stronger than either alone — that's the whole trick." - *Pruning (reform)*: "you don't kill the plant. you cut the dead wood so the live wood can breathe. that's it. that's reform." - *The Greenhouse (about) / compost footer*: "everything here will eventually be soil for the next argument. that's not cynicism — that's just gardening. boo." - **Animation principles.** Organic, springy, patient. bounce-enter for arrivals; tendril-draws for hover; sunflower-heliotropism and lens-flare-drift for ambient life; spring-reflow for filter changes. The garden-path watering-can is the only scroll indicator and it just *walks the path*. No strobing, no scroll-hijacking smooth-scroll, no reveal cascades beyond the per-row stagger. The flare and the sunflowers are the only continuously-living things. - **Mobile.** Single-column masonry (which is just a stack, but keep the irregular plot heights). Greenhouse header shrinks to ~55vh. Potting-shed shelf becomes a leaf-tab at the screen edge that expands to a vertical pot list. Lens-flare reduces to one slow static glow near the top. Sunflower plot still tracks, slower. Tendril underlines simplify to a 1px grow-in line. **Bias against generic patterns — do NOT add:** testimonial cards, "trusted by" logo strip, pricing tables, stat-grids / counter-up dashboards, sticky CTA bar, newsletter modal, hero-with-two-buttons, hamburger-menu animation, glassmorphism floating cards over the illustrations (the *only* glass here is the greenhouse roof and the herbarium pressings, both narrative), dark-mode toggle (the greenhouse is a daytime room — night would be a category error), accordion FAQ, "scroll for more" chevron (the watering-can does that job), parallax stock-photo clouds, infinite-scroll content farm. Every one of these would contradict the greenhouse. ## Uniqueness Notes Differentiators against the ~272-design corpus: 1. **"Politics as a tended botanical greenhouse, illustrated as Curtis's Botanical Magazine plates" is unprecedented.** The corpus has political/civic domains and it has botanical aesthetics (botanical at 22%), but no design renders *the machinery of collective decision-making itself* — quorums, filibusters, coalitions, reform — as **specific, named, surreally-hybridized plant specimens** with invented Latin binomials and hand-lettered brass plaques. The surrealism is Magritte/Carrington-quiet (surreal aesthetic is 1% in the corpus), not glitch-surreal. The closest civic neighbors are dashboard-y or authoritative; this one is humid, alive, and on your side. 2. **True variable-height masonry as the entire structural conceit — a "planting map," not a card-grid.** Masonry is 8% in the corpus against card-grid's 88% and centered's 85%. jeongchi.boo commits to genuine Pinterest-flow with *intentionally unequal column widths* (38/34/28%) and four distinct "plot species" of different shapes, plus a winding garden-path SVG and a re-sorting filter. No corpus design uses masonry *as the metaphor* (irregular beds in a garden) rather than as a layout default. 3. **bounce-enter as the signature reveal — seedlings popping out of soil.** bounce-enter is 4% in the corpus, where the headline patterns are parallax (95%), cursor-follow (88%), spring (86%), magnetic (81%), stagger (79%). Making a small organic one-overshoot bounce the *primary* arrival animation — explicitly themed as a sprout springing up — and using it consistently for plots, the wordmark, and the potting-shed shelf, is a position no corpus design takes. 4. **Lens-flare re-purposed as narrative daylight, one-per-viewport, parallax-faster-than-content.** Lens-flare is 8% in the corpus and almost always cyberpunk neon chrome. Here it is the *low morning sun moving through a glass house as you read* — exactly one soft warm anamorphic flare drifts across one plot per scrolled viewport-band, tied to the page's scroll-hue background shift. It's a designed sensation (the building is sunlit and the sun is moving), not a decorative sparkle. No corpus design uses lens-flare this way. 5. **The "friendly botanist-civics-teacher" voice on a political domain.** Friendly tone is 18% in the corpus and the genre default leans pastoral-romantic (35%) or warm-inviting (27%) — escapism or sales-warmth. This site is neither: it's a knowledgeable, curious, non-condescending friend in gardening gloves showing you their favorite plant, applied to *politics* of all subjects. The deliberate de-cynicism is the editorial position; the `.boo` is a gentle "gotcha, it's actually kind of beautiful." 6. **Four-register classic-serif typography (Cormorant Garamond + Spectral + Gloria Hallelujah + IBM Plex Mono) instead of the corpus's mono-default.** Mono typography is 94% in the corpus as a primary face; serif-classic is 2%. jeongchi.boo leads with a high-contrast classic serif for the institution, a warm humanist serif for the conversation, a handwritten face only for the gardener's labels, and mono *only* for the registrar's vote-tally typewriter cards. A clean four-level hierarchy, mono demoted to a cameo. 7. **No CTAs, no pricing, no stats, no testimonials, no footer-with-social — it closes on a compost pile.** The page ends with leaf-litter and one line: *"everything here will eventually be soil for the next argument. boo."* A deliberate abdication of marketing-page conventions in favor of one sustained walk-through-a-greenhouse — consistent with the SDESIGN bias toward full-screen narrative and the specific identity of jeongchi.boo as a *garden you visit*, not a *funnel*. **Chosen seed (per assignment):** aesthetic: surreal, layout: masonry, typography: serif-classic, palette: gradient, patterns: bounce-enter, imagery: lens-flare, motifs: floral-botanical, tone: friendly. **Avoided patterns (per frequency analysis):** - Avoided **hand-drawn aesthetic** (96% — saturated): the illustration here is a specific historical register (Curtis's Botanical Magazine plates), not generic doodle hand-drawn. - Avoided **photography imagery** (98% — overwhelming): zero photography; every mark is drawn. - Avoided **glassmorphism** (69%): the only "glass" is the greenhouse roof and the herbarium pressings, both narrative, never a frosted-card UI device. - Avoided **card-grid** (88%), **centered** (85%), **full-bleed marketing** (93%): replaced with a true irregular-masonry planting-bed. - Avoided **mono typography as primary** (94%): mono is a cameo (vote-tally typewriter cards only); classic serif leads. - Avoided **warm palette as default** (98%) and **flat gradient wallpaper** (97%): the palette is warm but the *only* gradients are leaf-masked light-through-leaf ramps and the scroll-keyed daylight shift — gradient as *the sun*, not as wallpaper. - Avoided **parallax / cursor-follow / spring / magnetic / stagger** as the headline interaction (95/88/86/81/79%): bounce-enter carries the arrival role; parallax appears only as the lens-flare's faster-than-content drift; the only cursor reactivity is the surreal sunflower-heliotropism, not a glow. - Avoided **pastoral-romantic** (35%) and **warm-inviting** (27%) tones: the voice is friendly-knowledgeable-curious, not dreamy and not sales-warm.