# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz (예산, Korean for "budget/estimate") presents fiscal planning through a cinematic hexagonal-honeycomb lens -- budgets visualized not as boring spreadsheets but as an interconnected organic structure where every cell contains a piece of the financial picture. The hexagonal grid evokes beehive efficiency (nature's optimal space-filling solution), while the cinematic aesthetic brings dramatic lighting, shallow depth-of-field effects, and narrative framing to financial data. The tone is authoritative -- a confident financial advisor who presents budgets as beautiful, comprehensible stories. Inspiration from honeycomb architecture, financial data visualization art, Korean government budget infographics, and the cinematic color grading of Korean dramas. ## Layout Motifs and Structure A **hexagonal-honeycomb** layout where content is organized into hexagonal cells, creating an organic grid that represents the interconnected nature of budget items. **Primary structure:** - **Budget cinema hero (100vh):** A soft pastel gradient background (#e8e0f0 to #f0e8e0, lavender to cream) with "예산" in massive playful-rounded type (25vw) centered. Below: "YESAN.XYZ" in smaller English subtitle. A single hexagonal wireframe (SVG, 200px) slowly rotates behind the text at 0.1 opacity. - **Honeycomb grid:** Hexagonal cells arranged in a honeycomb pattern (CSS clip-path: polygon for hexagonal shapes). Each cell contains a budget category with an icon, a number (animated via glitch counter on scroll), and a short description. Cells are color-coded by budget type using pastel tints. - **Nature elements corridor:** Between the honeycomb and footer, a section with organic nature illustrations (honeybees, flowers, honeycomb cross-sections) in thin line art, connecting the geometric budget structure to its natural inspiration. - **Bubble-playful navigation:** Circular navigation elements (20px) floating in the right margin, each representing a budget section. Bubbles have slight bounce animation and connect to their sections via thin lines. - **Glitch counter numbers:** Budget figures use a brief glitch effect during their count-up animation -- numbers briefly show scrambled digits before settling on the correct value. **Spatial relationships:** Hexagonal cells: 160px wide (flat-top orientation). Arranged in offset rows (even rows shifted right by half a cell width). Gap between cells: 4px. Grid max-width: 960px, centered. ## Typography and Palette **Fonts:** - **Display/Korean:** "Jua" (Google Fonts) -- a playful, rounded Korean-supporting display font with bouncy personality, used at clamp(36px, 6vw, 80px). Weight 400 (single weight, inherently bold). The rounded forms make budget data feel approachable rather than intimidating. - **Body text:** "Noto Sans KR" (Google Fonts) -- a comprehensive Korean-supporting sans-serif at 15px/1.7 line-height. Weight 400 for body, 700 for emphasis. Essential for Korean fiscal terminology. - **Numbers/Data:** "Space Mono" (Google Fonts) -- monospace for budget figures at 18px. Weight 700. Clear numeral distinction is critical for financial data accuracy. **Color Palette:** - **Background lavender:** #e8e0f0 (soft pastel lavender) - **Background cream:** #f0e8e0 (soft pastel cream) - **Hex income:** #a0d8b0 (soft green for income cells) - **Hex expense:** #f0b0b0 (soft pink for expense cells) - **Hex savings:** #b0c8f0 (soft blue for savings cells) - **Hex investment:** #f0d8a0 (soft gold for investment cells) - **Text primary:** #2a2830 (dark purple-gray) - **Text secondary:** #6a6070 (muted purple for labels) ## Imagery and Motifs **Core visual motifs:** - **Nature elements (honeybee illustrations):** Thin line drawings (1.5px stroke, #6a6070) of honeybees, hexagonal honeycomb cross-sections, and flowering plants. These connect the hexagonal budget layout to its natural-world inspiration, making financial structure feel organic rather than arbitrary. - **Bubble-playful navigation:** Circular elements with radial-gradient highlights (white at upper-left) creating a soap-bubble effect. CSS animation: gentle bounce (translateY: 0 to -4px to 0 over 2s, ease-in-out, infinite with staggered delays). - **Glitch counter animation:** Budget numbers count up from 0 but with a glitch phase: during the count, every 200ms the display briefly (50ms) shows a random number before resuming the count. This creates visual excitement around otherwise dry financial figures. - **Hexagonal clip-paths:** All budget cells use CSS clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) creating perfect flat-top hexagons. ## Prompts for Implementation **Cinematic budget honeycomb:** The site should make budget data visually exciting through the honeycomb structure and cinematic color treatment. Every number should feel important, every category should feel interconnected. **Hexagonal grid implementation:** - Use CSS grid with custom clip-path on each cell. - .hex-grid { display: flex; flex-wrap: wrap; max-width: 960px; margin: 0 auto; } - .hex-cell { width: 160px; height: 184px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); margin: -20px 2px; } - Even rows: margin-left: 82px; for honeycomb offset. **Glitch counter implementation:** - Intersection Observer triggers count animation. - requestAnimationFrame loop: incrementing value toward target. - Every 200ms during count: replace textContent with random number for 50ms, then resume. - After reaching target: display final value with no further glitching. **Bubble navigation:** - .bubble { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), rgba(176,200,240,0.4)); border: 1px solid rgba(176,200,240,0.3); animation: bubble-bounce 2s ease-in-out infinite; } **AVOID:** CTA-heavy layouts, pricing blocks (ironic but the hex grid replaces traditional pricing), stat-grids (hex grid replaces), spreadsheet-like tables. ## Uniqueness Notes **Differentiators from other designs:** 1. **Hexagonal honeycomb as budget visualization:** Using hexagonal cells for budget categories creates a unique visual metaphor -- budgets as organic, interconnected ecosystems rather than linear spreadsheets. 2. **Glitch effect during counter animation:** The brief display of random numbers during count-up adds visual tension and excitement to financial data -- a technique not used in other counter-animate designs. 3. **Honeybee nature elements bridging data and biology:** Line illustrations of bees and honeycomb cross-sections create a conceptual bridge between the geometric layout structure and its natural inspiration, unique to this financial context. **Chosen seed/style:** aesthetic: cinematic, layout: hexagonal-honeycomb, typography: playful-rounded, palette: pastel, patterns: glitch, imagery: nature-elements, motifs: bubble-playful, tone: authoritative **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).