# Design Language for jungchi.boo

## Aesthetics and Tone
jungchi.boo (정치, Korean for "politics") inhabits the visual world of a political cartoonist's sketchbook washed ashore on Jeju Island -- pages warped by salt spray, ink lines softened by humidity, margin notes smeared into tidal watercolor gradients of cerulean and driftwood beige. The aesthetic is **hand-drawn coastal editorial**: the loose, expressive energy of political caricature and editorial illustration meets the unhurried, salt-bleached calm of a Korean coastal village. Every surface feels touched by a human hand -- wobbly ink outlines, imperfect hatching, pencil textures visible beneath watercolor washes -- but the subject matter carries the weight of civic discourse: governance, debate, the tension between power and the people, rendered not as stern institutional iconography but as warm, accessible, almost folksy illustration.

The mood draws from the tradition of Korean minhwa (민화, folk painting) reimagined for political commentary: bold outlines, flat but expressive color fills, symbolic creatures and objects carrying meaning beyond their literal form. A tiger does not just decorate; it represents authority. A wave does not just flow; it carries the voice of the public. This is politics made approachable through the language of illustration and the softening filter of coastal light -- as if the entire discourse were happening at a beachside pojangmacha (포장마차), scribbled on napkins between bowls of haemul pajeon.

The tone is friendly but not frivolous: the warmth of a well-drawn editorial cartoon that makes you smile before it makes you think. There is genuine substance here -- civic engagement, democratic ideals, the importance of political literacy -- but it arrives wrapped in hand-drawn charm and the calming palette of where the land meets the sea. The .boo TLD adds a gentle playfulness, a whisper of the unexpected: politics that dares to be approachable, governance that allows itself to be drawn in crayon if the crayon speaks truth.

## Layout Motifs and Structure
The layout follows an **organic-flow** paradigm -- content does not conform to rigid column grids or symmetrical frameworks but instead arranges itself like objects scattered across a cartoonist's desk by an ocean breeze: naturally clustered, overlapping at edges, with generous negative space that lets each element breathe like open sky above a coastline. Sections are not rectangular containers but irregularly bounded zones defined by hand-drawn border illustrations -- a wavy ink line here, a cluster of illustrated seashells there, a torn-paper edge that reveals the next content area beneath.

**Flow Architecture:**

- **Section 1 (Tidal Scroll Entry):** Full-viewport. The viewport opens with a vast field of Seafoam Mist (#E8F1EE), empty except for a single hand-drawn ink line that animates in from the left edge, wobbling slightly as it draws itself across the screen -- this line is simultaneously a coastline contour and the baseline for the domain name "jungchi.boo" which appears in handwritten type along its curve. As the line reaches the right edge, it curls upward and transforms into an illustrated wave that frames the top of the next section. Below the domain name, a subtitle in Korean (정치를 그리다 -- "Drawing Politics") fades up in a lighter weight. The entire composition floats in the upper 60% of the viewport, with the lower 40% left as breathing space -- a deliberate use of organic negative space.

- **Section 2 (The Cartoonist's Desk):** Scrolling into this section reveals a top-down illustrated desk surface -- scattered with drawn objects: a pencil, an ink bottle, crumpled paper balls, a coffee cup with steam rendered as wobbly SVG spirals, and several small "cartoon panels" that serve as content cards. These panels are hand-drawn rectangles with slightly uneven borders (achieved via SVG path randomization), each containing a topic area. The panels are not aligned to any grid; they overlap slightly, cast subtle hand-drawn drop shadows (hatched lines, not CSS box-shadow), and rotate at slight angles (-3deg to +4deg). Each panel bounces in with a spring animation as it enters the viewport.

- **Section 3 (The Coastal Forum):** A horizontal band of illustrated ocean (layered SVG waves in three shades of blue-green) separates the desk from a "forum" space below. This section uses a loose, organic two-column flow where illustrated speech bubbles of varying sizes contain content blocks. The speech bubbles have hand-drawn outlines with visible pen wobble, and their tails point to small illustrated character figures positioned along the edges -- simplified, friendly faces representing "the people" in political discourse. Content bubbles drift into position with bounce-enter animations, arriving from different directions.

- **Section 4 (The Sketchbook Spread):** The viewport transitions to resemble an open sketchbook -- a cream-colored background (#FBF7F0) with visible paper texture (CSS noise filter), a drawn spiral binding running down the center, and content arranged as "sketches" on left and right pages. Each sketch is an illustrated vignette with accompanying text in a humanist typeface. The pages have hand-drawn margin lines in light blue (#B8D4E3) like real sketchbook paper.

- **Section 5 (Horizon Close):** The final section opens to a full-viewport illustrated horizon -- where the sea meets the sky in a gradient wash of coastal blues and warm sunset amber. A single illustrated lighthouse (line-drawn, with a pulsing animated light) anchors the center. Surrounding it, small floating text elements contain closing thoughts. The entire scene gently parallax-scrolls at different rates: the lighthouse is fixed, the sea moves at 0.3x, the sky at 0.1x, and floating text elements at 0.7x.

**Spatial Principles:**
- No element snaps to a mathematical grid; positions are "felt," not calculated
- Overlapping is encouraged -- elements peek behind and in front of each other
- Rotation is subtle but persistent: nearly every content block carries a -2deg to +3deg rotation
- White space is not empty; it is "sky" or "sand" or "paper" -- it has conceptual identity
- Vertical rhythm follows breathing patterns rather than pixel-perfect baselines

## Typography and Palette
**Typography:**

- **Headlines / Display:** "Caveat" (Google Fonts) -- a flowing, connected handwriting font with natural stroke variation that evokes a pen moving quickly across a sketchbook page. Used at 3.5rem-7rem for section titles and the domain name. Its connected letterforms feel personal and immediate, like someone wrote the headline just for you. Applied with `letter-spacing: 0.005em` and `line-height: 1.05`. Headlines are rendered in Ink Dark (#2C3A4B) for rich, ink-like legibility against light backgrounds. For the Korean subtitle text, Caveat is replaced with "Nanum Pen Script" (Google Fonts) to maintain handwritten energy with proper Korean glyph support.

- **Body / Reading:** "Nunito Sans" (Google Fonts) -- a humanist sans-serif with rounded terminals and generous x-height that reads as warm, approachable, and clear. It avoids the cold precision of geometric sans-serifs and the formality of traditional serif faces. Used at 1rem-1.25rem for paragraph text, captions, and navigational labels. Weight range: 400 (regular) for body, 600 (semibold) for emphasis, 700 (bold) for callouts. Applied with `line-height: 1.7` and `letter-spacing: 0.01em` for comfortable reading. Body text is set in Driftwood (#4A4A48) for softened contrast against light backgrounds.

- **Accent / Labels:** "Architects Daughter" (Google Fonts) -- a hand-printed (non-cursive) font with the character of careful handwriting in block letters, as if labeling a diagram or annotating a sketch. Used at 0.85rem-1.1rem for tags, labels, small annotations, and illustrated element captions. Applied in Tide Blue (#3D7A8A) to create visual distinction from body text.

**Color Palette:**

| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Primary Background | Seafoam Mist | #E8F1EE | Main canvas, section backgrounds, breathing space |
| Secondary Background | Warm Sand | #FBF7F0 | Sketchbook pages, card interiors, speech bubbles |
| Primary Text | Ink Dark | #2C3A4B | Headlines, strong text, primary illustrations |
| Body Text | Driftwood | #4A4A48 | Paragraphs, descriptions, secondary content |
| Accent Primary | Tide Blue | #3D7A8A | Links, labels, interactive elements, wave illustrations |
| Accent Warm | Sunset Coral | #E07A5F | Highlights, hover states, important callouts, lighthouse glow |
| Accent Deep | Kelp Green | #2D6A4F | Secondary illustrations, nature elements, active states |
| Coastal Gradient Start | Horizon Blue | #87BFCE | Sky gradients, decorative washes, section transitions |
| Coastal Gradient End | Golden Hour | #F0C987 | Sunset elements, warm accent gradients, glow effects |
| Ink Line | Charcoal Sketch | #3B3B3B | All hand-drawn borders, outlines, hatching |

The palette is **coastal-blend**: not a single temperature but the full thermal range of a shoreline at golden hour -- cool blues and greens where the water lives, warm sands and corals where the land breathes, and the transitional amber-to-cerulean gradient of sky meeting sea at the horizon. Colors are never used at full saturation; they are always slightly muted, as if filtered through sea mist or seen through sketchbook paper.

## Imagery and Motifs
**Custom Illustration as Sole Visual Language:**
All imagery is custom hand-drawn illustration. There are no photographs, no stock vectors, no generated graphics. Every visual element is rendered in a consistent illustration style: loose ink outlines with visible pen wobble (SVG paths with randomized control points at 1-2px variance), selective watercolor-style fills using semi-transparent CSS gradients that deliberately extend slightly beyond their outlines (achieved via slightly larger clip-paths than stroke-paths), and cross-hatching for shadows rendered as thin parallel SVG lines at 45-degree angles.

**Illustration Subjects:**
- **Political Symbols Reimagined:** A ballot box drawn as a treasure chest half-buried in sand. A megaphone sprouting seagrass. A gavel resting on a rock like a tide pool creature. These are political objects made coastal, familiar made strange, institutional made organic.
- **Character Figures:** Small, simplified human figures (5-6 head-heights tall, round faces, minimal features -- two dots for eyes, a curved line for a smile) populate the margins. They sit on speech bubbles, lean against illustrated borders, point at content areas. They wear no suits; they are barefoot, in casual clothes, drawn with three or four ink strokes each. They represent "the people" -- not politicians but citizens engaged in discourse.
- **Coastal Flora/Fauna as Political Metaphor:** An octopus with arms reaching into different topic areas (representing interconnected policy). A school of fish moving in formation (collective action). Seabirds carrying scrolls (information distribution). A lighthouse whose beam illuminates text (transparency).
- **Organic Blob Shapes:** Content areas are not bounded by rectangles but by organic blob shapes -- rounded, amoeba-like SVG outlines that feel like tide pool formations or cloud shapes drawn by a child. These blobs use `border-radius` values of 30% 70% 70% 30% / 30% 30% 70% 70% and similar asymmetric combinations, with subtle CSS animation that slowly morphs the blob shape over 8-12 second cycles (keyframe animation shifting border-radius values by 5-10%).

**Decorative Motifs:**
- **Wave Borders:** Section dividers are not horizontal rules but hand-drawn wave lines -- three to four layered SVG paths in decreasing opacity of Tide Blue (#3D7A8A), Horizon Blue (#87BFCE), and Seafoam Mist (#E8F1EE), undulating with slightly different periods to create a natural wave-stack effect.
- **Ink Splatters:** Small decorative ink splatter marks (2-4px organic SVG shapes in Charcoal Sketch #3B3B3B at 15-25% opacity) are scattered sparingly across backgrounds, suggesting the working surface of an active illustrator.
- **Dotted Paths:** Navigation hints and scroll indicators use hand-drawn dotted lines (SVG dashed strokes with randomized dash lengths) that meander across the page like trails in sand.
- **Paper Texture Overlay:** A subtle noise texture (`filter: url(#noise)` using an SVG feTurbulence filter at very low intensity, 0.03 baseFrequency) covers all background surfaces, giving every area the tactile quality of thick drawing paper.
- **Torn Paper Edges:** Section transitions use SVG clip-paths shaped like torn paper edges -- irregular, jagged lines that reveal the next section's background color beneath, as if pages were ripped from a sketchbook and layered.

## Prompts for Implementation
**Full-Screen Narrative Experience:**
The entire site must feel like paging through a political cartoonist's personal sketchbook that was left open on a beach. The experience is one continuous hand-drawn narrative -- not a collection of sections but a story that flows from coastline to desk to forum to sketchbook to horizon. There is no traditional navigation bar, no hamburger menu, no fixed header. Navigation is contextual: small illustrated hand-pointer icons in the margins suggest scroll direction, and a tiny drawn compass rose in the bottom-right corner serves as a minimal position indicator (its needle rotates based on scroll position).

**Bounce-Enter Animation System:**
The primary motion pattern is bounce-enter: elements arrive in the viewport with an elastic overshoot animation. Implementation uses CSS `@keyframes` with a cubic-bezier timing function approximating spring physics: `cubic-bezier(0.34, 1.56, 0.64, 1)`. Elements scale from 0.85 to 1.03 (overshoot) to 1.0, and simultaneously translate from 30px below to -5px above (overshoot) to 0px, with opacity transitioning from 0 to 1 over the first 40% of the animation duration. Total duration: 600-800ms per element, with staggered delays of 80-120ms between sibling elements. Trigger: IntersectionObserver at 0.15 threshold. Elements that have bounced in remain in place; they do not re-animate on re-entry.

**Hand-Drawn Line Animation:**
The coastline/title animation in Section 1 uses SVG `stroke-dasharray` and `stroke-dashoffset` animation. The SVG path is drawn with a total length calculated via `getTotalLength()`, then animated from full offset to zero over 2.8 seconds with an ease-out timing. The pen wobble in the path itself is baked into the SVG coordinates -- control points are offset by random 1-3px values from a mathematically smooth curve, calculated at design time and hardcoded.

**Blob Shape Morphing:**
Organic blob containers use CSS `border-radius` animation with keyframes that cycle through 4-5 different asymmetric border-radius configurations over 10-second loops. Each blob has a different animation duration (8s, 10s, 12s, 14s) and a random `animation-delay` to prevent synchronized movement. The morphing is subtle -- no more than 10% variation in any individual border-radius value -- creating a gentle, breathing quality like tide pools slowly reshaping.

**Wave Section Dividers:**
Implemented as layered SVG paths absolutely positioned between sections. Three wave paths with identical shape but offset by 8-12px vertically and 20-40px horizontally, each in a progressively lighter opacity (100%, 60%, 30%) of the wave color. A CSS animation translates the middle wave layer by 15px horizontally over a 6-second loop, creating subtle lateral drift.

**Speech Bubble Content Cards:**
Each speech bubble is an SVG-clipped container with a hand-drawn outline rendered as a separate SVG stroke overlaid on the container. The tail of each bubble points to a character figure positioned in the margin. On hover, the bubble lifts slightly (transform: translateY(-4px)) and the character figure's expression changes (a CSS class swap that adjusts the SVG mouth-curve from neutral to smiling).

**Scroll-Position Compass:**
The bottom-right compass rose is a 40x40px hand-drawn SVG illustration. Its needle element has a CSS `transform: rotate()` property bound to scroll position via a lightweight JavaScript scroll listener (requestAnimationFrame-throttled). At scroll position 0%, the needle points up (North); at 100%, it points down (South). The compass has a subtle fade-in on scroll (opacity 0 at top, 1 after 200px scroll).

**Color Temperature Shift:**
As the user scrolls from top to bottom, the overall page background subtly shifts from cool (Seafoam Mist #E8F1EE) through neutral (Warm Sand #FBF7F0) to warm (a gentle blend toward Golden Hour #F0C987 at reduced opacity). This is implemented via a fixed background div with a CSS gradient that responds to scroll position, creating the sensation of time passing -- from morning sea mist to golden hour.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, corporate dashboards, rigid symmetry, stock photography, neon colors, glassmorphism effects, dark mode, terminal aesthetics, any element that feels institutional or bureaucratic. Politics here is human, hand-drawn, and coastal -- never cold, never corporate.

## Uniqueness Notes
**Differentiators from other designs:**

1. **Political-Coastal Metaphor Fusion:** No other design in the portfolio merges political subject matter with coastal illustration aesthetics. Political sites typically use institutional colors (navy, red, white) and formal typography. jungchi.boo subverts this entirely by rendering governance through the lens of a beachside sketchbook, making civic discourse feel as natural and inviting as watching waves. The political content is not merely decorated with coastal elements -- the metaphors are structural (lighthouse = transparency, tidal waves = public voice, tide pools = interconnected policy).

2. **Minhwa-Inspired Character System:** The simplified citizen figures populating the margins draw from Korean folk painting (minhwa) traditions of depicting human figures with minimal, symbolic strokes. No other design uses a cast of recurring illustrated characters who interact with the UI elements themselves -- sitting on speech bubbles, leaning against borders, pointing at content. These figures transform the interface from a page to a populated place.

3. **Scroll-Driven Temperature Gradient:** The progressive color temperature shift from cool seafoam to warm golden hour as the user scrolls is unique in the portfolio. Rather than static section backgrounds, the entire chromatic experience evolves continuously, creating a sense of temporal passage -- morning to evening, cool observation to warm engagement -- that reinforces the narrative arc.

4. **Compass Rose Navigation:** Using a hand-drawn compass rose as the sole navigation/position indicator is unprecedented in the collection. It replaces conventional scroll indicators, progress bars, and nav dots with a single illustrated object that rotates with scroll position, reinforcing the coastal-cartographic metaphor while providing genuine utility.

5. **SVG Pen-Wobble Illustration System:** While other designs use hand-drawn aesthetics, jungchi.boo commits to a specific technical approach -- SVG paths with randomized control point offsets -- applied consistently to every visual element: borders, dividers, character figures, content containers, decorative elements. This creates a unified illustration language where the wobble frequency and amplitude are consistent, as if one specific artist with one specific pen drew every element on the page.

**Documented Seed/Style:**
`aesthetic: hand-drawn, layout: organic-flow, typography: humanist, palette: coastal-blend, patterns: bounce-enter, imagery: custom-illustration, motifs: organic-blobs, tone: friendly`

**Avoided Overused Patterns:**
- Avoided `centered` layout (99% frequency) -- organic-flow positions elements asymmetrically
- Avoided `mono` typography (99% frequency) -- no monospace fonts anywhere in the design
- Avoided `warm` palette as sole temperature (100% frequency) -- coastal-blend uses cool-to-warm range
- Avoided `gradient` as primary palette strategy (90% frequency) -- gradients are used only for the horizon scene and temperature shift, not as a design system foundation
- Avoided `scroll-triggered` as primary animation (96% frequency) -- bounce-enter is the signature motion, with scroll only used for the temperature gradient and compass
- Avoided `parallax` as primary motion (80% frequency) -- parallax appears only in the final horizon scene, not as a site-wide system
- Avoided `vintage` motifs (80% frequency) -- motifs are organic-blobs and coastal nature, not retro/vintage
- Avoided `minimal` imagery (94% frequency) -- custom illustration fills every visual surface
- Avoided `photography` imagery (73% frequency) -- zero photographs in the entire design
- Avoided `playful` aesthetic (95% frequency) -- hand-drawn is the chosen aesthetic, and while friendly in tone, the design's political substance prevents it from reading as merely playful
<!-- DESIGN STAMP
  timestamp: 2026-03-09T15:36:09
  seed: aesthetic, and while friendly in tone, the design
  aesthetic: jungchi.boo (정치, Korean for "politics") inhabits the visual world of a political...
  content_hash: 195da3ce4f5a
-->