# Design Language for economic.day ## Aesthetics and Tone economic.day adopts a pixel-art aesthetic -- the charming, nostalgic visual language of early video games applied to economic concepts. ".day" suggests an event or daily update. Imagine a retro game console displaying economic data as pixel-art cityscapes where buildings grow and shrink based on GDP, pixel-art coins bounce across the screen, and economic indicators are presented as game-style health bars and score counters. The visual language draws from early SimCity, the 8-bit sprite art of NES-era games, and the chunky pixel typography of ZX Spectrum displays. The palette is muted-vintage -- desaturated versions of primary colors that recall the limited color palettes of early gaming hardware. The tone is friendly, making economics feel like a game that anyone can learn to play. ## Layout Motifs and Structure The layout uses a **bento-box** structure -- economic data modules arranged in a grid, like a game UI dashboard. **Primary structure:** - **Game start screen (100vh):** A muted-vintage background with pixel-art "ECONOMIC.DAY" title (using a pixel font that renders cleanly at large sizes). Below, a simplified pixel-art city skyline (CSS rectangles of varying heights in muted colors). A "PRESS START" style prompt blinks below. - **Economic bento dashboard (variable, ~300vh):** A CSS Grid of 8-10 modules containing: "GDP Meter" (pixel-art progress bar), "Employment" (mixed-media pixel/text), "Market Report" (text with pixel-art icons), "Currency Exchange" (card-flip cards showing different currencies). Each module has a 2px border in muted-vintage colors. - **Pixel landscape panorama (100vh):** A horizontal pixel-art landscape (CSS rectangles creating a simplified economic-themed panorama: factories, farms, banks, markets) spanning the full viewport. - **Floating coin field (80vh):** Pixel-art coins (CSS rotated squares with inner circles) float upward across the section (CSS animation), each labeled with an economic concept. - **Game over footer (50vh):** Dark background with "SESSION COMPLETE" in pixel type. Score/stats summary in a retro game format. **Spacing philosophy:** Bento modules have 4px gaps (pixel-perfect alignment). Internal padding is 16px (aligned to an 8px grid). Everything snaps to an 8px grid for pixel-art consistency. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Press Start 2P" (Google Fonts) -- authentic 8-bit pixel display font. Weight 400. Size clamp(16px, 2vw, 32px). Letter-spacing: 0.02em. - **Body text:** "DM Sans" (Google Fonts) -- clean sans for readable body text alongside pixel elements. Weight 400. Size clamp(14px, 1vw, 16px). Line-height: 1.7. - **Data labels:** "VT323" (Google Fonts) -- pixel-style monospace for data values and counters. Weight 400, size 16px. **Palette:** - **Console Grey** `#D8D0C0` -- primary background, muted vintage grey - **Pixel Dark** `#2A2A3A` -- primary text - **Coin Gold** `#C8A840` -- muted gold for economic positive indicators - **Market Red** `#B04040` -- muted red for negative indicators - **Growth Green** `#508850` -- muted green for growth metrics - **Sky Vintage** `#88A8C0` -- muted blue for backgrounds and headers ## Imagery and Motifs **Core visual motifs:** - **Pixel-art city skyline:** CSS rectangles of varying heights (20-80px wide, 40-200px tall) in muted vintage colors, arranged side by side to create a simplified city skyline. Buildings have small pixel-art "windows" (4px squares in lighter shades). - **Mixed-media economic modules:** Bento boxes combining pixel-art icons (8-16px CSS squares and circles) with modern sans-serif body text, creating a hybrid retro/contemporary aesthetic. - **Card-flip currency cards:** Small cards (100x140px) showing pixel-art currency symbols on the front, economic data on the back. Flip on hover (rotateY(180deg)). - **Floating pixel coins:** CSS-drawn coins (16px rotated squares with 8px circular inner elements) that float upward (translateY animation, 8-15s cycles) across the floating coin field section. - **Retro game UI elements:** Progress bars styled as game health bars (pixelated segments that fill in blocks rather than smoothly). Score counters using VT323 font with leading zeros. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like booting up a retro economics simulation game. The start screen sets the tone. The bento dashboard is the game's UI. The landscape panorama is the game world. The session complete footer wraps up. **Opening animation sequence:** - Frame 0-200ms: Console Grey background. - Frame 200-800ms: Pixel skyline builds from left to right (each building rising with a stepwise height transition, 100ms per building). - Frame 800-1400ms: "ECONOMIC.DAY" types in Press Start 2P font (character reveal with CRT-style cursor). - Frame 1400-2000ms: "PRESS START" blinks below (opacity toggle, 500ms interval). - Frame 2000-2600ms: First bento modules card-flip into existence. **Scroll behavior:** Bento modules enter with card-flip animations. Pixel landscape scrolls horizontally within its section as user scrolls vertically (scroll-linked translateX). Floating coins are always animating when visible. **Interaction details:** - Currency cards flip on hover. - Pixel buildings in the skyline "grow" by 1 pixel on hover (height transition). - Progress bar segments fill incrementally on hover (width steps). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Pixel-art economics simulation:** Presenting economic data through the lens of retro gaming aesthetics makes complex financial concepts feel approachable and gamified. 2. **8px grid alignment system:** Strict alignment to an 8px grid creates pixel-perfect consistency that reinforces the retro gaming visual language. 3. **Pixel skyline as economic visualization:** Building heights in the CSS pixel skyline can represent actual economic data (GDP, growth rates), making the decoration simultaneously informational. 4. **Game-UI economic dashboard:** Bento modules styled as game UI panels (health bars, score counters, status indicators) create a unique economic data presentation format. **Chosen seed/style:** aesthetic: pixel-art, layout: bento-box, typography: sans-grotesk, palette: muted-vintage, patterns: card-flip, imagery: mixed-media, motifs: floating-elements, tone: friendly **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography as primary. Avoided mysterious-moody (74%) tone. Used pixel-art (2%) aesthetic, muted-vintage (1%) palette, and bento-box (5%) layout -- all underused.