# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz channels a victorian-ornate aesthetic — the lavish ornamentation, elaborate scrollwork, and decorative abundance of Victorian design applied to a budget and financial planning platform — yesan (예산) meaning "budget" in Korean. The site adorns — with the gilded excess of Victorian parlor interiors, the intricate filigree of Art Nouveau ironwork, and the ornamental confidence of a budget platform that treats financial planning as an art worthy of elaborate presentation. Inspiration draws from the Victorian design revival in contemporary branding by studios like Hoefler & Co., the ornamental typography of 19th-century letterpress, the financial gravitas of traditional banking aesthetics, and the decorative border art of Victorian-era stock certificates. The tone is friendly — warm, approachable language that makes Victorian ornamental elegance feel inviting rather than intimidating. The victorian-ornate treatment transforms budget planning from sterile spreadsheet into decorative ledger — expense categories displayed in ornamental frames like Victorian shop signs, budget allocations presented in elaborate scrollwork borders, and financial data rendered with the decorative confidence of hand-engraved currency. Each component carries Victorian decorative richness — ornamental borders, serif typography with period-appropriate weight, and decorative corner treatments suggesting hand-crafted engraving. The friendly tone makes ornamental complexity approachable — warm guidance through elaborately decorated financial tools. ## Layout Motifs and Structure The layout uses a **card-grid** architecture — organized cards creating the ledger-page quality of Victorian accounting books where each entry has its own decorative frame. **Card Grid System:** - Grid: 2-column at max-width: 960px centered - Feature cards: full-width for budget summaries - Category cards: equal columns for expense categories - Gap: 28px with decorative divider elements - The card grid creates the ledger quality of Victorian financial documents with ornamental entry frames **Section Sequence:** 1. **Grand Foyer:** Hero with slab-serif typography in victorian-ornate decorative frame, sharp-angles geometric precision motifs within ornamental borders, bounce-enter interactive elements arriving with decorative flourish 2. **Ledger Hall:** Budget overview in ornamental card grid — bounce-enter interactive category cards with sharp-angles precise angular accents within Victorian frames 3. **Treasury Room:** Detailed financials in icon-heavy illustrated grid with sharp-angles analytical geometric motifs and ornamental data borders 4. **Counting House:** Tools and calculators in functional ornamental cards with sharp-angles minimal geometric precision 5. **Closing Seal:** Footer as Victorian seal — friendly farewell with sharp-angles final geometric ornament **Spatial Philosophy:** - Card grid creates the ledger quality of individually framed financial entries - Ornamental borders create the hand-engraved quality of Victorian financial documents - The treasury metaphor makes budget planning feel like managing an ornate financial estate ## Typography and Palette **Typography:** - **Headlines:** "Zilla Slab" (Google Fonts) — slab-serif at 2.0rem-2.8rem, weight 700. Its sturdy slab serifs create the engraved-letterpress quality of Victorian financial signage. - **Body Text:** "Lora" (Google Fonts) — elegant serif at 0.9rem, weight 400, line height 1.75. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for budget figures, percentages, and financial calculations. - **Labels:** "Zilla Slab" at 0.6rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Parchment Cream:** #f8f4ec — warm cream for primary background - **Ledger Tan:** #ece4d4 — warm tan for card surfaces - **Burgundy Deep:** #6a2a3a — rich burgundy for primary accent - **Forest Ink:** #2a4a3a — deep forest for secondary accent - **Gold Gilt:** #b8922a — warm gold for tertiary accent (complementary) - **Mahogany Dark:** #2a1e18 — rich dark for primary text - **Walnut Medium:** #6a5a4a — warm brown for secondary text - **Filigree Border:** rgba(106,42,58,0.12) — burgundy-tinted border for ornamental lines ## Imagery and Motifs **Icon-Heavy Financial Illustrations:** Budget categories supported by ornamental icons — decorative line icons with Victorian styling (2px stroke, Burgundy Deep, ornamental corners) creating the illustrated-ledger quality of Victorian accounting books with hand-drawn category symbols. **Bounce-Enter Decorative Arrival:** Elements enter with bounce animation — transform: scale(0.8) to scale(1) with overshoot to scale(1.03) over 400ms, creating the theatrical-curtain quality of Victorian parlor reveals where content arrives with decorative flourish. **Sharp-Angles Geometric Precision:** Decorative elements using angular geometry within ornamental frames — SVG diamond shapes and angular borders (1.5px stroke, Burgundy Deep at 0.08 opacity) creating the precision quality of Victorian geometric ornament within elaborate decoration. **Victorian Card Treatment:** Budget cards with ornamental frame treatment — background: #ece4d4; border: 2px solid rgba(106,42,58,0.12); border-radius: 4px; padding: 32px; box-shadow: 0 2px 8px rgba(42,30,24,0.06). Corner decorations via ::before and ::after pseudo-elements. **Ornamental Dividers:** Section separators with Victorian scrollwork — SVG ornamental line with central motif (1px stroke, Gold Gilt at 0.2 opacity) creating the chapter-break quality of decorated Victorian typographic dividers. ## Prompts for Implementation Build the page as a victorian-ornate budget platform. Card grid: .budget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 960px; margin: 0 auto; } .budget-feature { grid-column: 1 / -1; } Victorian card: .budget-card { background: #ece4d4; border: 2px solid rgba(106,42,58,0.12); border-radius: 4px; padding: 32px; box-shadow: 0 2px 8px rgba(42,30,24,0.06); position: relative; } Bounce enter: .budget-card { animation: bounceIn 400ms ease-out; } @keyframes bounceIn { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } } AVOID: Sterile fintech interfaces, minimalist budget apps, and corporate financial dashboards. Let Victorian ornamental richness and friendly warmth create a budget platform where financial planning feels like maintaining an ornate Victorian ledger. ## Uniqueness Notes 1. **Victorian-ornate for budget platform:** Lavish ornamentation transforms sterile financial planning into decorative art worthy of elaborate presentation. 2. **Card-grid as ornamental ledger:** Individually framed cards create the hand-engraved quality of Victorian financial documents. 3. **Friendly tone as parlor warmth:** Approachable language makes ornamental complexity inviting rather than intimidating. 4. **Sharp-angles as geometric precision:** Angular motifs create the measurement quality of Victorian engineering within decorative frames. 5. **Bounce-enter as theatrical reveal:** Animated arrivals create the parlor-curtain quality of content presented with Victorian theatrical flair. **Seed/Style:** aesthetic: victorian-ornate, layout: card-grid, typography: slab-serif, palette: complementary, patterns: bounce-enter, imagery: icon-heavy, motifs: sharp-angles, tone: friendly **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, minimal imagery. This design uses victorian-ornate aesthetic, card-grid layout, slab-serif typography, complementary palette, bounce-enter patterns, icon-heavy imagery, and friendly tone.