# Design Language for yesang.org ## Aesthetics and Tone yesang.org channels a flat-design aesthetic — the bold simplicity, crisp edges, and color-block confidence of flat design applied to a prediction and forecasting platform — yesang (예상) meaning "prediction" or "expectation" in Korean. The site projects — with the color-block clarity of Microsoft's Metro design language, the geometric confidence of Swiss poster design, and the information-forward directness of a prediction platform where forecasts are presented with unambiguous visual clarity. Inspiration draws from the flat design principles of Google's early Material Design, the bold color blocking of Dutch De Stijl movement, the forecasting interface precision of weather visualization platforms, and the editorial confidence of data-journalism publications like FiveThirtyEight. The tone is energetic — vibrant, dynamic language that matches flat design's bold visual confidence with enthusiastic prediction engagement. The flat-design treatment transforms a prediction platform from data-heavy dashboard into bold visual statement — forecasts rendered as confident color blocks, probability distributions displayed as crisp geometric shapes, and prediction categories organized with the decisive clarity of information that refuses visual ambiguity. Each component carries flat-design's decisive quality — hard edges without shadows, bold color fills without gradients, and typography that communicates with direct, unmodulated confidence. The energetic tone amplifies visual boldness — enthusiastic prediction delivery through crisp visual channels. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — editorial spreads creating the publication quality of a prediction journal where forecasts are presented with the authority of magazine feature stories. **Magazine Spread System:** - Spreads: alternating full-width and 2-column layouts at max-width: 1080px centered - Feature predictions: full-width hero treatment - Category forecasts: 2-column with bold headers - Gap: 0px between spread elements (seamless editorial flow) - The magazine spread creates the publication quality of predictions presented as authoritative editorial content **Section Sequence:** 1. **Forecast Banner:** Hero with condensed typography in flat-design bold color block, bubble-playful floating prediction indicators, parallax interactive layered forecast depth 2. **Prediction Spread:** Core forecasts in magazine layout — parallax interactive layered data visualization with bubble-playful floating probability markers 3. **Analysis Feature:** Detailed prediction analysis in mixed-media editorial spread with bubble-playful animated accent elements 4. **Trend Section:** Historical trends in flat-design data blocks with bubble-playful minimal floating indicators 5. **Final Forecast:** Footer as closing prediction — energetic farewell with bubble-playful last floating element **Spatial Philosophy:** - Magazine spreads create the editorial quality of predictions presented as authoritative journalism - Flat color blocks create the confidence quality of forecasts that are bold and unambiguous - The journal metaphor makes browsing predictions feel like reading a prestigious forecast publication ## Typography and Palette **Typography:** - **Headlines:** "Barlow Condensed" (Google Fonts) — condensed at 2.2rem-3.2rem, weight 700. Its condensed proportions create the headline quality of bold magazine mastheads maximizing impact. - **Body Text:** "Source Sans 3" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.7. - **Data:** "Fira Code" (Google Fonts) — monospace at 0.85rem for probability percentages, confidence intervals, and forecast timestamps. - **Labels:** "Barlow Condensed" at 0.6rem, weight 700, uppercase, letter-spacing 0.12em. **Color Palette:** - **Cloud White:** #f4f2ee — soft warm white for primary background - **Flat Blue:** #2a6aaa — strong blue for primary accent - **Flat Coral:** #e06a4a — warm coral for secondary accent (coastal blend) - **Flat Teal:** #2a8a7a — medium teal for tertiary accent (coastal blend) - **Sand Light:** #e8e2d8 — warm sand for section backgrounds - **Ink Deep:** #1a1a2a — dark for primary text - **Slate Medium:** #6a6a7a — medium gray for secondary text - **Block Edge:** rgba(42,106,170,0.1) — blue-tinted border for flat-design edges ## Imagery and Motifs **Mixed-Media Prediction Displays:** Forecast content supported by mixed-media elements — flat-design charts, bold iconography, and color-coded probability bars creating the data-journalism quality of predictions supported by multiple visual formats. **Parallax Layered Depth:** Content sections with parallax scroll creating layered depth — background data at 0.5x scroll speed, foreground predictions at 1x, creating the editorial quality of magazine spreads with photographic depth behind text content. **Bubble-Playful Floating Indicators:** Probability indicators with gentle floating animation — circular elements with transform: translateY oscillation (3px amplitude, 6s cycle) creating the forecast quality of prediction bubbles drifting through possibility space. **Flat-Design Card Treatment:** Prediction cards with crisp flat styling — background: #ffffff; border: 2px solid rgba(42,106,170,0.1); border-radius: 0; padding: 28px; box-shadow: none. The treatment creates the bold quality of flat-design information blocks refusing decorative ambiguity. **Color-Block Section Dividers:** Sections separated by bold color blocks — 4px solid bands of palette colors creating the editorial quality of magazine section dividers that are bold design elements rather than mere separators. ## Prompts for Implementation Build the page as a flat-design prediction platform. Magazine: .prediction-spread { max-width: 1080px; margin: 0 auto; } .spread-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .spread-full { width: 100%; } Flat card: .forecast-card { background: #ffffff; border: 2px solid rgba(42,106,170,0.1); border-radius: 0; padding: 28px; } Bubble float: .probability-bubble { width: 48px; height: 48px; border-radius: 50%; background: #2a6aaa; color: #fff; display: flex; align-items: center; justify-content: center; animation: bubbleFloat 6s ease-in-out infinite; } @keyframes bubbleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } AVOID: Complex data dashboards, sterile analytics platforms, and gradient-heavy forecast interfaces. Let flat-design bold simplicity and energetic enthusiasm create a prediction platform where forecasts are presented with confident, unambiguous visual clarity. ## Uniqueness Notes 1. **Flat-design for predictions:** Bold color-block simplicity transforms data-heavy forecasting into confident visual statements. 2. **Magazine-spread as editorial authority:** Publication layout positions predictions as authoritative editorial content. 3. **Energetic tone as forecast enthusiasm:** Vibrant language matches flat design's bold visual confidence with genuine prediction excitement. 4. **Bubble-playful as probability markers:** Floating elements create the possibility-space quality of predictions drifting through uncertain futures. 5. **Color-block dividers as bold editorial design:** Section separators become design elements rather than mere structural breaks. **Seed/Style:** aesthetic: flat-design, layout: magazine-spread, typography: condensed, palette: coastal-blend, patterns: parallax, imagery: mixed-media, motifs: bubble-playful, tone: energetic **Avoided Overused Patterns:** corporate aesthetic, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses flat-design aesthetic, magazine-spread layout, condensed typography, coastal-blend palette, parallax patterns, mixed-media imagery, and energetic tone.