# Design Language for economics.day ## Aesthetics and Tone An infographic-forward economics daily where complex data is presented through bold visual storytelling -- economics.day renders as a data-journalism platform where large numbers, simple charts, and bold typography make economic trends immediately graspable. The infographic aesthetic prioritizes visual impact: numbers are hero-sized, charts are simple enough to understand in 3 seconds, and the color palette helps data tell its own story (green = growth, red = decline). The tone is explainer-accessible: making economics understandable for non-economists through visual clarity and plain language. ## Layout Motifs and Structure **Infographic System:** Full-width viewport sections, each dedicated to a single data point or trend with hero-sized typography. **Section Flow:** 1. **The Number:** Hero with a single massive statistic and one-sentence context. 2. **The Trend:** Sections with CSS-only bar/line chart visualizations. 3. **The Context:** Explanatory sections with standard text layout (max-width 680px, centered). 4. **The Forecast:** Closing section with forward-looking data. ## Typography and Palette - **Hero Numbers:** "Inter" at 8rem-14rem, weight 800, tabular-nums. The massive size makes data visceral. - **Headlines:** "Inter" at 2rem, weight 700. - **Body:** "Inter" at 1rem, weight 400, line-height 1.7. **Palette:** Dark (#0a0e14), White (#f0f0f0), Growth Green (#20c060), Decline Red (#e03030), Neutral Blue (#3070d0), Muted (#607080). ## Imagery and Motifs **Hero Statistics:** Single numbers displayed at extreme size (8-14rem) with color indicating direction (green/red). **CSS Bar Charts:** Simple horizontal bars using percentage-width divs with colored backgrounds. **Trend Indicators:** Small arrow icons (CSS triangles) in green (up) or red (down) next to figures. **Section Alternation:** Dark sections for data, light sections for explanation, creating visual rhythm. ## Prompts for Implementation Build as a data-first daily publication. Each section reveals a data point that is immediately visually impactful. Hero numbers counter-animate from 0 to final value on scroll (CSS or simple JS counter). Bar charts animate their widths on scroll entry. Explanatory sections are deliberately simpler -- text-focused breathing room between data impacts. Everything should be understandable without reading: the numbers, colors, and directions tell the story visually. ## Uniqueness Notes 1. **Hero-sized statistics as primary content:** Using 8-14rem numbers as section centerpieces creates immediate data impact. 2. **CSS-only data visualization:** Bar charts and indicators without libraries maintains design purity. 3. **Color-coded direction system:** Green/red immediately communicating positive/negative creates intuitive data reading. 4. **Data/explanation alternation:** The rhythm between impact (data) and comprehension (text) sections creates effective learning flow. Document chosen seed/style: aesthetic: data-infographic, layout: hero-stat-sections, typography: impact-numbers, palette: dark-data-colors, patterns: bar-charts, imagery: hero-statistics, motifs: trend-arrows, tone: explainer-accessible