# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz ("예산" — budget, fiscal planning) is conceived as a surreal meditation on the invisible architecture of public money. The visual language draws from the tradition of Korean bureaucratic ledgers — columns of vertically written hanja, vermillion seal stamps, the dense grids of government account books — but reimagined as if the numbers have broken free from their cells and begun drifting through an impossible space. Think of Magritte's "The Treachery of Images" applied to spreadsheets: columns of figures that cast shadows in the wrong direction, pie charts that melt like Dalí clocks, budget lines that extend into vanishing points at impossible angles. The tone is scholarly-intellectual with a quiet strangeness — an economics professor's lecture notes discovered inside a dream. Every surface hints at rigorous analysis, but the spatial logic refuses to behave. The experience should feel like wandering through a fiscal white paper that has been folded into origami and placed inside a snow globe. ## Layout Motifs and Structure The page is organized around **diagonal sections** — content panels that slice across the viewport at 8-12 degree angles, created using `clip-path: polygon()` and `transform: skewY()`. Each diagonal band contains a discrete narrative zone (a concept, a data point, a philosophical aside about wealth), and the bands alternate in direction: the first tilts upper-left to lower-right, the next reverses, creating a zigzag descent that evokes the jagged line of a budget graph or a seismograph recording fiscal tremors. **The Diagonal Grid:** - The viewport is divided into 5-7 diagonal bands, each 60-90vh tall - Bands overlap by 15-20% at their slanted edges, creating triangular intersection zones where content from adjacent sections bleeds together - Within each band, content is laid out on a subtle 8-column grid that itself is rotated to match the band's angle, so text and elements sit "level" relative to their tilted container - A persistent thin vertical line (1px, semi-transparent) runs down the exact center of the viewport as a plumb line — a visual anchor against the diagonal chaos, representing fiscal balance **Intersection Zones:** The triangular overlaps between bands serve as transition moments. They contain small "marginalia" elements — annotations, seal stamps, tiny diagrams — that connect the themes of adjacent sections. These zones use `mix-blend-mode: multiply` to create visual depth where the gradient backgrounds of two bands merge. **Navigation:** A minimal fixed sidebar on the right edge displays section indicators as small tilted rectangles (matching each band's angle), acting as both progress markers and click targets. No traditional navbar. The domain name "yesan.xyz" appears once at the very top, typeset vertically in the Korean reading direction. ## Typography and Palette **Display Headings:** "Outfit" (Google Fonts) — a clean, geometric rounded-sans typeface with friendly terminals and excellent legibility at large sizes. Used at weights 600-700 for section titles. Size: clamp(2.5rem, 5.5vw, 4.5rem). Letter-spacing: -0.02em. Each heading is placed at the precise angle of its containing diagonal band, then counter-rotated 2-3 degrees so it sits almost-but-not-quite level — a subtle surreal disorientation. **Body Text:** "Nunito Sans" (Google Fonts) — a rounded humanist sans-serif that pairs naturally with Outfit while providing superior readability for longer passages. Weight 400 for body, 600 for emphasis. Size: clamp(1rem, 1.2vw, 1.15rem). Line-height: 1.7. Text blocks are set with generous `max-width: 42ch` to maintain a scholarly reading rhythm. **Accent/Data:** "IBM Plex Sans KR" (Google Fonts) — used for numerical figures, annotations, and any Korean text. Its bilingual coverage and tabular number features make it ideal for the budget/fiscal theme. Weight 300 for annotations, 500 for data callouts. **Color Palette — "Fiscal Gradient":** - `#1B1145` — Deep Indigo (primary background of odd-numbered bands; the color of a government ledger's binding) - `#2D1B69` — Royal Purple (primary background of even-numbered bands; suggests authority and institutional weight) - `#6C3CE0` — Vivid Violet (gradient midpoint; the color of computation, the moment a number transforms) - `#A78BFA` — Soft Lavender (text highlights, hover states, the glow of a balanced equation) - `#F0EBFF` — Ghost White (primary text color; warm enough to avoid sterility, cool enough to feel institutional) - `#E04E6A` — Vermillion Rose (accent for seal stamps, warnings, deficit indicators — referencing the red ink of traditional Korean seals) - `#14B8A6` — Teal Surplus (secondary accent for positive indicators, balanced budgets, growth markers) - `#0D0B1A` — Void Black (deepest background layer behind all bands, visible in the gaps) Each diagonal band carries a gradient that shifts along its angle: odd bands gradient from `#1B1145` to `#2D1B69`, even bands from `#2D1B69` to `#6C3CE0`. The gradients follow the diagonal direction of each band, reinforcing the tilted geometry. ## Imagery and Motifs **No photographs. No stock imagery.** All visual elements are constructed from CSS, SVG, and typographic treatments. **The Floating Ledger:** Throughout the page, semi-transparent numbers (Korean fiscal terms like "세입" (revenue), "세출" (expenditure), "결산" (settlement)) drift slowly across band backgrounds using CSS keyframe animations. They are set in IBM Plex Sans KR at opacity 0.04-0.08, size 8-15rem, creating a wallpaper of ghostly fiscal data — as if the page itself is a palimpsest of erased budgets. **Seal Stamps (도장):** Circular SVG elements mimicking traditional Korean official seals appear at section transitions. Each is a 64x64px circle with a 2px border in `#E04E6A`, containing a single hanja character (歲, 算, 政, 計) rendered in a slightly rough stroke. These seals are placed at the intersection zones between diagonal bands, rotated to match neither band's angle — floating free. **Diagonal Grid Lines:** Faint lines (0.5px, `#A78BFA` at 0.1 opacity) run parallel to each band's angle, spaced 80px apart, creating ruled-paper texture within each section. These evoke ledger lines while reinforcing the diagonal geometry. **Surplus/Deficit Indicators:** Small CSS-drawn triangles (pointing up in `#14B8A6` for surplus, down in `#E04E6A` for deficit) appear as decorative elements scattered through the margins, as if fragments of a chart have escaped their graph and are migrating through the page. **The Plumb Line:** The central vertical 1px line pulses gently (opacity oscillating between 0.15 and 0.35 over 4 seconds), symbolizing the search for fiscal equilibrium amidst the diagonal disorder. ## Prompts for Implementation Build yesan.xyz as a single-page vertical descent through 6 diagonal content bands on a void-black (`#0D0B1A`) background. The experience should feel like reading an economics treatise that has been sliced diagonally and reassembled with dreamlike precision — scholarly in content, surreal in presentation. **Diagonal Band Construction:** - Each band is a `
` with `clip-path: polygon()` defining its trapezoidal shape - Odd bands: `clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%)` - Even bands: `clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%)` - Bands overlap via negative margins (`margin-top: -8vh`) so their clipped edges interleave - Each band has its own diagonal gradient background applied at the matching angle using `linear-gradient(8deg, ...)` or `linear-gradient(-8deg, ...)` **Hover-Lift Interactions:** - Content cards within bands (data callouts, annotation boxes) use `transform: translateY(0); box-shadow: 0 4px 12px rgba(107, 60, 224, 0.1)` at rest - On hover: `transform: translateY(-8px) rotate(0.5deg); box-shadow: 0 20px 40px rgba(107, 60, 224, 0.25)` with `transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)` - The slight rotation on hover (0.5deg) adds a surreal wobble, as if the card is being picked up and examined - Seal stamps on hover scale to 1.15 and rotate 15 degrees with a spring easing **Scroll Behavior:** - As the user scrolls, diagonal bands slide into view with a subtle parallax offset (each band moves at a slightly different rate relative to scroll position) - The floating ledger text (background fiscal terms) moves in the opposite direction to scroll, creating a gentle counter-motion - The persistent plumb line fades to full opacity as the user reaches the midpoint of the page, then fades back — the moment of fiscal balance **Animation Timing:** - On page load, the first diagonal band slides in from the left over 0.8s with `cubic-bezier(0.16, 1, 0.3, 1)` - Seal stamps appear with a stamping motion: scale from 1.4 to 1.0 with a bounce, opacity from 0 to 1, over 0.5s - Content within bands fades in with 200ms stagger between elements - Floating background numbers begin their drift animation after a 1.5s delay **Storytelling Arc:** - Band 1: "예산이란" (What is a budget?) — philosophical introduction, large typography - Band 2: "수입과 지출" (Revenue and Expenditure) — the fundamental duality, split content - Band 3: "균형의 환상" (The Illusion of Balance) — surreal centerpiece, the plumb line moment - Band 4: "숫자 너머" (Beyond the Numbers) — cultural/historical context of Korean fiscal traditions - Band 5: "미래의 계산" (Calculations of the Future) — forward-looking, data-aesthetic section - Band 6: "결산" (Settlement) — minimal conclusion, single seal stamp, domain name **AVOID:** CTA buttons, pricing tables, stat-counter grids, testimonial carousels, hero images, traditional navigation bars, footer link columns. This is a narrative experience, not a product page. ## Uniqueness Notes 1. **Diagonal-section layout as fiscal metaphor:** The zigzag descent of angled content bands directly mirrors the peaks and valleys of a budget graph, making the layout itself a visual argument about fiscal volatility. No other design in this collection uses diagonal clip-path sections as the primary structural device tied to thematic meaning (diagonal-sections at 5% frequency). 2. **Korean bureaucratic surrealism:** The fusion of traditional Korean fiscal vocabulary (hanja seal characters, terms like 세입/세출/결산) with a Magritte-influenced spatial logic creates a cultural-surreal hybrid that is entirely specific to this domain. The floating ledger text and escaped chart fragments (surplus/deficit triangles) treat budgetary data as dreamlike artifacts rather than dashboard metrics. 3. **Rounded-sans typography in a scholarly context:** Using Outfit and Nunito Sans (both rounded-sans faces, 3% frequency) for an intellectual/fiscal topic deliberately subverts the expectation that scholarly content requires serif typography. The softness of rounded terminals against the hard diagonals of the layout creates productive visual tension — approachable intellect rather than forbidding authority. 4. **Indigo-to-violet gradient as institutional color language:** The palette avoids the warm tones (98% frequency) and corporate blues that dominate financial websites, instead building an unusual indigo-purple gradient system (gradient at 66%, but this specific cool-purple range is distinctive) punctuated by vermillion seal accents that reference Korean documentary traditions rather than Western "red = danger" conventions. 5. **The plumb line as interactive metaphor:** The single persistent vertical line running through all diagonal bands — pulsing, fading, reaching full opacity at the page midpoint — serves as both a navigational anchor and a conceptual symbol (fiscal equilibrium). This kind of minimal interactive metaphor is absent from other designs in the collection. **Seed/Style:** surreal, diagonal-sections, rounded-sans, gradient, hover-lift, minimal, cultural, scholarly-intellectual **Avoided overused patterns:** corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97%), warm palette (98%), parallax animation (98%), mono typography (76%), friendly tone (45%) **Preferred underused patterns:** surreal (9%), diagonal-sections (5%), rounded-sans (3%), hover-lift (4%), cultural motifs (7%), scholarly-intellectual tone (9%)