# Design Language for jeongchi.boo ## Aesthetics and Tone jeongchi.boo occupies the visual space of a Korean scholar's private study at dawn -- the kind of room where a yangban official once composed memorials to the throne by candlelight, where ink-wet calligraphy dries on mulberry hanji paper beside a celadon tea bowl, and where the concept of governance is inseparable from the practice of self-cultivation. "Jeongchi" (정치) means politics in Korean, but its Hanja roots -- 政 (correct/upright) and 治 (to govern/order) -- speak to an older idea: that to govern the world, one must first govern the self. The aesthetic is **zen governance**: the visual language of political thought stripped to its most essential forms, where every element on the page carries the weight and intentionality of a single brushstroke on an empty scroll. The mood draws from the sarangbang (사랑방), the scholar's quarters in traditional Korean architecture -- a room defined not by what it contains but by what it deliberately omits. Bare wood floors. A single hanging scroll. The view through paper-screened doors to a courtyard rock garden. This is not the zen of Western appropriation (floating lotuses, generic meditation apps) but the specific Korean interpretation called "yeobaegeui mi" (여백의 미) -- the beauty of empty margins, the eloquence of what is left unsaid. The political dimension adds gravity: this emptiness is not passive tranquility but the charged silence of a deliberation chamber before a decision is rendered, the held breath between question and answer in a parliamentary hearing. Color is used the way ink is used in sumi-e painting: sparingly, decisively, with each mark carrying maximum meaning against vast white ground. The site should feel like encountering a political treatise that has been refined over centuries until only the irreducible remains -- not austere for austerity's sake, but concentrated, like a poem compressed to its final syllable. ## Layout Motifs and Structure The layout follows a **centered vertical axis** inspired by the hanging scroll (掛幅, gwaepok) format -- content descends along a single central column the way a viewer's eye travels down a mounted calligraphic work in a tokonoma alcove. But this is not a generic single-column blog layout. The centered axis is treated as a gravitational line: elements hover near it, are attracted to it, occasionally cross it, but always acknowledge its presence as the organizing principle, the way political discourse orbits around a central question without always directly addressing it. **Spatial Architecture:** - **Section 1 (The Threshold -- 門, mun):** Full viewport, entirely empty except for the domain name rendered in the dead center. The background is Hanji White (#F5F0E8) -- not pure white but the warm, fibrous off-white of handmade Korean mulberry paper. The domain "jeongchi.boo" appears letter by letter, each character fading in with a 400ms delay between them, as if being written by an invisible brush. No navigation visible. No scroll indicator. The emptiness IS the statement. After 3 seconds of stillness, a single thin horizontal line (1px, #1A1A1A) extends from the center outward to 40% viewport width on each side, like a horizon line establishing ground. - **Section 2 (The Garden -- 庭, jeong):** Below the fold, content blocks appear as discrete "stones" in a dry landscape garden (karesansui/석정). Each content element is a rectangular block of text with generous padding (6rem top/bottom, 4rem sides), positioned along the center axis but with subtle asymmetric offsets -- one block shifted 2vw left, the next 1.5vw right -- creating the naturalistic irregularity of placed stones. Between blocks, vast negative space (minimum 30vh) serves as the raked gravel -- empty but intentional, each gap calibrated to create breathing rhythm. - **Section 3 (The Study -- 書齋, seojae):** A denser section where text blocks compress together, simulating the accumulated wisdom of stacked manuscripts. Line spacing tightens. Margins narrow. The central axis holds firm but content presses closer to it, like scholars gathering around a shared text. This section introduces the only non-text visual element: thin vertical hairline rules (0.5px, #3A3A3A at 30% opacity) that flank the text column like the ruled margins of traditional manuscript paper. - **Section 4 (The Courtyard -- 마당, madang):** The site opens up again to full emptiness. A single concluding element -- perhaps a date, a single word, or the domain repeated -- sits in the lower third of a full viewport of negative space. This is the courtyard viewed from the scholar's window: open, quiet, complete. **Navigation:** There is no traditional navigation bar. The site is a single continuous scroll, like unrolling a scroll painting. If navigation must exist, it manifests as small, nearly invisible ink-dot markers (6px circles, #1A1A1A at 40% opacity) fixed to the right edge of the viewport, each corresponding to a section. On hover, they expand to 8px and a section name fades in beside them in 10px condensed type. ## Typography and Palette **Typography:** - **Display / Domain Title:** "Barlow Condensed" (Google Fonts) at weight 300 (Light) -- chosen for its tall, narrow letterforms that echo the vertical proportions of Hangul jamo and the elongated character columns of classical Chinese/Korean manuscripts. The condensed proportions create a sense of formality and compression -- ideas tightly packed, language disciplined. Applied at 2.8rem for the domain title with `letter-spacing: 0.35em` and `text-transform: uppercase`, which transforms "JEONGCHI.BOO" into something resembling a carved stone inscription or a seal stamp rendered in Latin characters. Line-height set to 1.0 for maximum vertical density. - **Body / Content:** "Noto Serif" (Google Fonts) at weight 400 (Regular) -- the most scholarly, unadorned serif available, with coverage across Latin, Korean, and CJK characters should bilingual content appear. Its stroke contrast is moderate, avoiding the flashiness of high-contrast display serifs while maintaining the gravitas of traditional book typography. Applied at 1.05rem with `line-height: 1.85` and `letter-spacing: 0.01em` for exceptionally open, readable text blocks that allow each word to breathe like characters spaced on manuscript paper. Paragraphs set with `text-indent: 2em` and no space between paragraphs, emulating traditional Korean book typesetting. - **Captions / Navigation / Metadata:** "Barlow Condensed" at weight 400 (Regular), 0.7rem, `letter-spacing: 0.2em`, `text-transform: uppercase`. Used for dates, section labels, and navigation dots. This creates a hierarchy where condensed sans-serif handles structural/administrative text while serif handles substantive content -- mirroring the distinction between the government's procedural language and the scholar's deliberative prose. **Palette:** The palette is strictly monochromatic, built from a single value scale between handmade paper white and brush ink black, with each value assigned a specific semantic role: | Role | Name | Hex | Usage | |------|------|-----|-------| | Ground | Hanji White | #F5F0E8 | Page background -- warm off-white evoking mulberry paper fiber | | Primary Text | Meok (墨) Black | #1A1A1A | Headlines, domain name, primary body text -- the black of fresh calligraphy ink | | Secondary Text | Brushtip Gray | #4A4A4A | Body text, secondary content -- ink diluted with water for the second pass | | Tertiary / Rules | Mist Stone | #8A8A87 | Hairline rules, navigation dots, metadata captions -- stone viewed through morning fog | | Hover / Active | Seal Vermillion | #B8372D | Single accent used ONLY on hover/active states -- the red of an official inkan (印鑑) seal stamp, the one splash of color in a monochrome scroll | | Divider / Subtle | Smoke Wash | #D4D0C8 | Section dividers, background tints for the Study section -- pale as wood ash | | Deep Background | Inkstone | #2A2A28 | Optional dark mode or footer background -- the wet surface of a suzuri inkstone | The Seal Vermillion (#B8372D) is the critical differentiator: it appears nowhere on initial page load. Only through interaction -- hovering over the navigation dots, clicking a link, activating an element -- does this single warm color emerge, like pressing a carved seal into red cinnabar paste to authenticate a document. This makes every interaction feel like an act of official endorsement, a deliberate gesture in a field of restraint. ## Imagery and Motifs **Minimal Imagery as Governing Principle:** The site contains no photographs, no illustrations, no icons, no SVGs, no decorative graphics. Imagery is achieved entirely through typography, spacing, and the two CSS-generated texture elements described below. This is radical minimalism rooted in the Korean aesthetic of yeobaegeui mi -- the conviction that the most powerful visual statement is the one that shows almost nothing. **Nature Motifs Through Abstraction:** Rather than depicting nature directly, nature is evoked through structural metaphors: 1. **Ink Wash Gradient (수묵, sumuk):** A single CSS radial gradient positioned at the top of the page, centered, using only Hanji White (#F5F0E8) transitioning to Smoke Wash (#D4D0C8) over 120vh. This creates an atmospheric depth effect -- like mist settling in a mountain valley at dawn. The gradient is so subtle it is barely perceptible, but it gives the upper viewport a quality of luminous emptiness distinct from the flatness of a solid color background. It should feel like the paper itself has absorbed moisture from the air. 2. **Grain Texture (한지, hanji):** An extremely subtle noise overlay (CSS `background-image` using an inline SVG with `` at 2-3% opacity) applied to the body background. This simulates the tactile fiber texture of hanji (Korean handmade paper), giving the white ground a material quality -- not a flat screen but a physical surface with tooth and grain. The texture should be invisible at normal viewing distance but become perceptible when the user leans in or zooms, rewarding close attention the way real paper reveals its structure under scrutiny. 3. **Stone Garden Spacing:** The negative space between content blocks is not uniform but follows the proportional rhythms of traditional Korean garden stone placement -- roughly following a 1:1.618:1:2.618 ratio across the four inter-section gaps. This Golden Ratio-derived spacing creates a natural, organic rhythm that feels grown rather than engineered, as if the content settled into its positions over time like river stones finding equilibrium. 4. **Seasonal Breath (optional, scroll-based):** As the user scrolls past the midpoint of the page, the background Hanji White shifts by an almost imperceptible 2 degrees warmer (toward #F5F0E4), as if the light in the scholar's study has moved from the cool blue of early morning to the warmer amber of mid-morning. This is nature expressed as time -- the passage of hours registered only in the temperature of ambient light. **Motif: The Horizon Line** The single horizontal line that extends in Section 1 serves as the site's signature motif. It recurs in modified form: as a thin rule separating sections, as the underline that appears beneath navigation dots on hover, as the border-bottom of the final element. This line represents the ground plane -- the earth beneath the scholar's feet, the horizon of a Korean plain viewed from a mountain pavilion, the ruled baseline of a manuscript page. It is always 1px, always #1A1A1A or lighter, always centered, and always extends to exactly the same width (40% viewport on each side of center = 80% total). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must feel like unrolling a munbangsau (文房四友) -- the four treasures of the scholar's study: brush, ink, paper, inkstone. The experience IS the paper. The user's scroll IS the brush. The text IS the ink. And the interaction states (the Seal Vermillion) are the inkstone where intention is prepared before being committed to the page. **Opening Sequence (Critical):** 1. Page loads to pure Hanji White (#F5F0E8) with the subtle hanji grain texture. Nothing else visible. Hold for 800ms. 2. The domain title "JEONGCHI.BOO" begins to appear, letter by letter, each character fading from opacity 0 to 1 over 300ms with a 400ms stagger between characters. Use Barlow Condensed Light, `letter-spacing: 0.35em`, centered both horizontally and vertically in the viewport. The fade should feel like ink bleeding into wet paper -- not a mechanical reveal but an organic emergence. 3. After all letters are visible (total sequence: ~5.5 seconds), hold for 1.2 seconds of complete stillness. 4. The horizon line extends outward from center: a 1px #1A1A1A line that grows from 0 width to 80vw over 1.5 seconds, using an ease-out timing function that starts quickly and decelerates, like a brush stroke that begins with pressure and lifts at the end. The line is positioned exactly at the vertical center of the viewport, bisecting the space below the domain title. 5. The entire hero unit then begins a slow upward drift (translateY from 0 to -20vh over 8 seconds, triggered only when the user initiates their first scroll), carrying the domain name and horizon line upward as new content fades in below. **Scroll Behavior:** - All content appears via **fade-reveal** only: opacity transitions from 0 to 1 as elements enter the viewport. No sliding, no scaling, no bouncing, no parallax. Just presence emerging from absence, the way objects materialize from fog. - Intersection Observer triggers at 20% visibility threshold. - Transition duration: 1.2 seconds per element, with `ease` timing. - Stagger between adjacent elements in the same section: 300ms. - The stagger creates a reading rhythm -- elements appear in the order they should be read, guiding the eye without arrows or visual cues. **Interaction Design:** - **Navigation dots:** On hover, the 6px dot expands to 8px and shifts from Mist Stone (#8A8A87) to Meok Black (#1A1A1A) over 400ms. Simultaneously, a label appears 12px to the left, fading in over 300ms in Barlow Condensed uppercase at 10px. The label uses Seal Vermillion (#B8372D) -- this is the ONLY moment color enters the composition, making each hover feel significant. - **Text links (if any):** No underline by default. On hover, a 1px Seal Vermillion line draws from left to right beneath the text over 500ms (using `background-size` animation from `0% 1px` to `100% 1px`). This is the underline-draw pattern executed in the accent color. - **Scroll progress:** An optional 1px line at the very top of the viewport (position: fixed) that fills from left to right in Mist Stone (#8A8A87) as the user scrolls. It should be barely visible -- a whisper of progress, not a progress bar. **CSS Architecture:** - No CSS framework. Hand-written CSS using custom properties for the seven palette colors. - `box-sizing: border-box` universally. - Body: `max-width: 100vw; overflow-x: hidden; background: #F5F0E8;` - Content container: `max-width: 42rem; margin: 0 auto; padding: 0 2rem;` - All animations via CSS `@keyframes` and `transition` -- no JavaScript animation libraries. The only JavaScript is for Intersection Observer (fade-reveal triggers) and the optional scroll progress indicator. - `prefers-reduced-motion: reduce` must disable all animations, showing content at full opacity immediately. **AVOID:** Call-to-action buttons, pricing blocks, stat grids, testimonial carousels, hero images, gradient overlays, card grids, hamburger menus, sticky headers, social media icons, footer link columns, newsletter signup forms. These belong to the commercial web. This site belongs to the contemplative web. ## Uniqueness Notes **Differentiators from other designs:** 1. **Seal Vermillion Interaction-Only Color:** No other design in the portfolio uses a color that is completely invisible on page load and only appears through user interaction. The Seal Vermillion (#B8372D) exists exclusively in hover and active states, making color itself an interactive element rather than a decorative one. This transforms the monochrome palette from a limitation into a narrative device -- the user "stamps" the page with color through their attention, echoing the Korean tradition of the official seal (도장, dojang) as an act of authentication. 2. **Hangul-Informed Latin Typography:** While the site renders in Latin characters, the typographic system -- Barlow Condensed with extreme letter-spacing, vertical axis dominance, condensed proportions -- is designed to evoke the structural characteristics of Hangul syllable blocks and the vertical reading order of classical Korean/Chinese manuscripts. No other design in the portfolio derives its Latin typography choices from a non-Latin writing system's proportional logic. 3. **Yeobaegeui Mi (여백의 미) as Structural Principle:** The site's negative space is not merely "white space" used for readability or modern aesthetic convention. It is a specific cultural design principle -- the Korean concept of "beauty in blank margins" -- applied systematically: the 30vh minimum gaps between content blocks, the empty full-viewport opening, the courtyard-like conclusion. This transforms emptiness from a passive absence into an active compositional element with specific cultural roots, distinguishing it from generic minimalist designs. 4. **Scholar's Study Metaphor Over Generic Zen:** Rather than drawing on the diluted Western interpretation of "zen" (floating particles, rounded corners, meditation imagery), this design grounds its zen aesthetic in a specific historical space: the sarangbang (사랑방) of Joseon-era Korea, where political thought and contemplative practice were inseparable. The architectural metaphor (Threshold-Garden-Study-Courtyard) structures the entire page flow in a way no other design attempts. 5. **No Visual Content Whatsoever:** This is the only design in the portfolio that achieves its visual identity with absolutely zero imagery -- no photos, illustrations, icons, SVGs, or decorative graphics. The only visual elements beyond text are two CSS-generated textures (radial gradient and noise grain) and geometric lines. This is a radical commitment to the typographic and spatial, distinguishing it from every other design. **Chosen seed/style:** aesthetic: zen, layout: centered, typography: condensed, palette: monochrome, patterns: fade-reveal, imagery: minimal, motifs: nature, tone: minimal **Avoided patterns from frequency analysis:** - Avoided playful aesthetic (95% overused) -- chose zen (7%) instead - Avoided warm palette (100% overused) -- chose monochrome (11%) instead - Avoided scroll-triggered as primary pattern (96% overused) -- chose fade-reveal (10%) as dominant motion - Avoided mono typography (99% overused) -- chose condensed (19%) instead - Avoided friendly tone (97% overused) -- chose minimal tone instead - Avoided vintage motifs (79% overused) -- chose nature (31%) with abstract rather than literal interpretation - Avoided parallax (80% overused) -- no parallax effects anywhere in this design - Avoided photography imagery (73% overused) -- chose minimal with zero photographic content