# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz channels a watercolor aesthetic — the soft bleeding edges, transparent washes, and luminous wet-on-wet quality of watercolor painting applied to a prediction and expectation exploration platform — yesang (예상) meaning "prediction" in Korean. The site flows — with the pigment-diffusion beauty of J.M.W. Turner's atmospheric washes, the controlled spontaneity of sumi-e ink painting, and the transparent honesty of a prediction platform where forecasts are rendered with the beautiful uncertainty of paint meeting water. Inspiration draws from the watercolor design trend in contemporary branding by studios like Cocorrina, the translucent layering of David Hockney's pool paintings, the forecast-visualization elegance of artistic data presentation, and the nostalgic warmth of hand-painted scientific illustration. The tone is nostalgic-retro — warmly retrospective language that evokes the hand-crafted quality of predictions made with artistic intuition alongside data. The watercolor treatment transforms a prediction platform from clinical forecast interface into artistic impression — probabilities rendered as watercolor washes where intensity indicates confidence, trend lines painted with brush-stroke fluidity, and the inherent uncertainty of prediction celebrated through watercolor's beautiful imprecision. Each component carries watercolor's translucent quality — soft edges, layered transparency, and color that bleeds gently beyond strict boundaries. The nostalgic-retro tone adds warmth — predictions recalled with the fond imprecision of painted memory. ## Layout Motifs and Structure The layout uses a **sidebar** architecture — main content with supporting sidebar creating the art-studio quality of a primary canvas with a palette and tools arranged alongside. **Sidebar Studio System:** - Main canvas: 65% width for primary prediction content - Sidebar palette: 35% width for tools, categories, and navigation - Combined max-width: 1080px centered - Gap: 32px between canvas and sidebar - The sidebar creates the art-studio quality of primary work with supporting tools at hand **Section Sequence:** 1. **First Wash:** Hero with futura-geometric typography floating over watercolor gradient ground, crystalline refractive light motifs, progressive-disclosure interactive layers revealing through transparency 2. **Primary Layer:** Core predictions in main canvas — progressive-disclosure interactive depth revelation with crystalline light-refraction accents alongside vintage sidebar navigation 3. **Wet-on-Wet:** Detailed forecasts in generous watercolor layout with vintage-photography aged reference imagery and crystalline decorative prism elements 4. **Dry Brush:** Quick-reference predictions in textured sidebar format with crystalline minimal refractive accents 5. **Final Wash:** Footer as closing wash — nostalgic farewell with crystalline last light refraction **Spatial Philosophy:** - Sidebar creates the art-studio quality of canvas with palette alongside - Watercolor washes create the artistic quality of predictions rendered with beautiful uncertainty - The painting metaphor makes exploring forecasts feel like studying an artist's atmospheric impressions ## Typography and Palette **Typography:** - **Headlines:** "Jost" (Google Fonts) — futura-geometric at 2.0rem-2.8rem, weight 700. Its clean geometric forms create precise contrast with watercolor's organic imprecision. - **Body Text:** "Libre Baskerville" (Google Fonts) — elegant serif at 0.9rem, weight 400, line height 1.8. - **Data:** "Fira Code" (Google Fonts) — monospace at 0.8rem for probability data, forecast timestamps, and confidence metrics. - **Labels:** "Jost" at 0.6rem, weight 600, uppercase, letter-spacing 0.14em. **Color Palette:** - **Watercolor White:** #faf8f4 — warm paper-white for primary background - **Wash Blue:** #6a9ac4 — soft watercolor blue for primary accent (coastal) - **Wash Coral:** #d48a7a — soft coral for secondary accent (coastal blend) - **Wash Sage:** #8aaa8a — muted sage for tertiary accent - **Paper Warm:** #f0ece4 — warm paper for sidebar background - **Pigment Dark:** #2a2828 — soft dark for primary text - **Wash Gray:** #8a8480 — warm gray for secondary text - **Bleed Edge:** rgba(106,154,196,0.1) — blue-tinted border for watercolor edges ## Imagery and Motifs **Vintage-Photography Aged References:** Prediction sources displayed with vintage photograph treatment — filter: sepia(0.15) contrast(0.95); border-radius: 4px creating the archival quality of historical forecast documents with hand-tinted warmth. **Progressive-Disclosure Layered Revelation:** Content reveals through progressive interaction — initial display shows watercolor wash overview, interaction reveals detailed data beneath, creating the wet-paper quality of transparent layers where deeper content shows through the surface. **Crystalline Light Refraction:** Decorative elements suggesting light passing through crystal — SVG prism shapes with rainbow-gradient at 0.03 opacity creating the optical quality of light refracting through watercolor's transparent medium. **Watercolor Card Treatment:** Prediction cards with watercolor-wash appearance — background: linear-gradient(135deg, rgba(106,154,196,0.06), rgba(212,138,122,0.04)); border: 1px solid rgba(106,154,196,0.1); border-radius: 12px; padding: 28px. The treatment creates the painted-edge quality of watercolor bleeding softly beyond precise boundaries. **Wet-Edge Gradients:** Section transitions with soft watercolor bleed — linear-gradient with 0.04 opacity palette colors creating the wet-edge quality of paint spreading on damp paper. ## Prompts for Implementation Build the page as a watercolor prediction platform. Sidebar: .studio-layout { display: grid; grid-template-columns: 65% 35%; gap: 32px; max-width: 1080px; margin: 0 auto; } .studio-sidebar { background: #f0ece4; padding: 24px; border-radius: 12px; } Watercolor card: .forecast-wash { background: linear-gradient(135deg, rgba(106,154,196,0.06), rgba(212,138,122,0.04)); border: 1px solid rgba(106,154,196,0.1); border-radius: 12px; padding: 28px; } Progressive disclosure: .wash-summary { cursor: pointer; } .wash-detail { max-height: 0; overflow: hidden; opacity: 0; transition: all 500ms ease-out; } .wash-summary.active + .wash-detail { max-height: 500px; opacity: 1; } AVOID: Clinical forecast dashboards, sterile data-science interfaces, and corporate prediction platforms. Let watercolor's beautiful imprecision and nostalgic warmth create a prediction platform where uncertainty is celebrated as artistic rather than feared as limitation. ## Uniqueness Notes 1. **Watercolor for prediction platform:** Translucent washes transform clinical forecasting into artistic impression where uncertainty becomes beauty. 2. **Sidebar as art-studio palette:** Side panel creates the working-artist quality of tools arranged alongside the primary creative canvas. 3. **Nostalgic-retro tone as painted memory:** Retrospective language evokes the hand-crafted quality of artisanal prediction. 4. **Crystalline as light refraction:** Prism elements suggest the optical quality of seeing futures through refractive transparent media. 5. **Progressive-disclosure as layer revelation:** Interactive depth creates the wet-paper quality of transparent layers revealing content beneath. **Seed/Style:** aesthetic: watercolor, layout: sidebar, typography: futura-geometric, palette: coastal-blend, patterns: progressive-disclosure, imagery: vintage-photography, motifs: crystalline, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses watercolor aesthetic, sidebar layout, futura-geometric typography, coastal-blend palette, progressive-disclosure patterns, vintage-photography imagery, and nostalgic-retro tone.