# Design Language for economics.day ## Aesthetics and Tone economics.day embraces a maximalist aesthetic -- visual abundance that mirrors the overwhelming complexity of global economic systems. ".day" frames it as a daily economic experience. Imagine the trading floor of a stock exchange reimagined by a baroque artist: screens overflowing with data rendered in gold-and-black luxury, art-deco display typography announcing market movements as dramatic headlines, and mixed-media collages of economic imagery layered to the point of sensory overload. The visual language draws from the information density of Bloomberg terminals, the ornamental excess of Gustav Klimt's gold period, and the dynamic typography of Italian Futurist manifestos. The palette is gold-black-luxury -- maximum contrast, maximum opulence. Vintage motifs (economic propaganda posters, historical stock certificates) add temporal depth. The tone is futuristic-cutting-edge -- economics as a technological frontier. ## Layout Motifs and Structure The layout uses a **hud-overlay** structure -- content is arranged as a heads-up display overlay on a data-rich background, like a financial analyst's augmented reality interface. **Primary structure:** - **Market open (100vh):** A black background with multiple overlaid data elements: a large title "ECONOMICS.DAY" in art-deco display type at center, small "ticker tape" text strips scrolling horizontally at top and bottom (CSS animation), and a gold-and-black gradient pulse in the background. - **HUD panels (variable, ~350vh):** Content is arranged in floating HUD panels -- semi-transparent dark rectangles with gold borders, positioned at various viewport locations. Panels contain: market analysis text, economic indicator numbers in art-deco type, and mixed-media collage elements (CSS-composed visual mashups of economic imagery). - **Gold Klimt section (100vh):** A visual climax inspired by Klimt's gold paintings. A background of repeating gold geometric patterns (CSS repeating-linear-gradient in gold and black), overlaid with content in white panels. Vintage economic motifs (stylized factory silhouettes, wheat sheaves, gear icons) in gold. - **Glitch transition zone (80vh):** An abrupt shift -- the gold-and-black luxury glitches out. RGB splits, horizontal displacement, noise. This represents market crashes and economic disruption. - **Closing bell (50vh):** The glitch resolves. Clean black background. "SESSION CLOSED" in gold art-deco type. Silence after the storm. **Spacing philosophy:** Dense in the HUD panels (8-16px gaps). The Klimt section uses medium density (24px). The glitch zone is deliberately chaotic. The closing bell is maximally sparse. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Bungee" (Google Fonts) -- a bold, geometric, art-deco-influenced display font designed for attention. Weight 400. Size clamp(36px, 6vw, 80px). - **Body text:** "Inter" (Google Fonts) -- interface clarity for data-dense content. Weight 400. Size clamp(14px, 1vw, 16px). Line-height: 1.65. - **Data/Ticker:** "Fira Code" (Google Fonts) -- monospaced for financial data and ticker elements. Weight 400, size 13px. **Palette:** - **Market Black** `#0A0A0A` -- primary background - **Gold Standard** `#D4A830` -- primary gold accent - **Luxury White** `#F0E8D0` -- text on dark backgrounds - **Crash Red** `#C03030` -- glitch zone and negative indicators - **Bull Green** `#30A040` -- positive indicators - **Gold Bright** `#FFD060` -- highlighted gold for emphasis ## Imagery and Motifs **Core visual motifs:** - **HUD overlay panels:** Semi-transparent dark rectangles (background: rgba(10,10,10,0.85), border: 1px solid Gold Standard at 40% opacity) positioned absolutely within sections. These "float" over background content like augmented reality overlays. - **Art-deco display typography:** Headlines use Bungee with gold color and subtle text-shadow (0 2px 0 rgba(0,0,0,0.5)) creating an embossed effect. Numbers and data in the same treatment. - **Mixed-media economic collage:** CSS-composed visual elements combining gold geometric patterns, vintage-style icons (factories, currencies, wheat), and modern data visualization elements (progress bars, mini-charts as CSS gradients). - **Glitch disruption effects:** In the glitch zone: RGB text-shadow splits (3-6px offset), horizontal displacement bands (2-4px height, full-width, shifted content), and brief full-screen flashes (white opacity pulse, 100ms). - **Ticker tape scrolling text:** Thin strips (24px height) at top and bottom of the hero section with economic text scrolling continuously (CSS translateX animation, loop). - **Vintage economic motifs:** Gold silhouettes of factories, wheat sheaves, scales, and gears rendered as simple CSS/SVG shapes. These appear throughout the Klimt section as a decorative vocabulary. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like experiencing a day on the global economic stage -- the overwhelming data of market open, the gold-gilded analysis, the traumatic glitch of a crash, and the quiet of market close. **Opening animation sequence:** - Frame 0-200ms: Market Black background. - Frame 200-600ms: Ticker tapes begin scrolling at top and bottom. - Frame 600-1200ms: "ECONOMICS" appears in Bungee with gold text-shadow, scaling from 0.9 to 1.0. - Frame 1200-1600ms: ".DAY" appears below with a gold gradient pulse behind it. - Frame 1600-2200ms: HUD panels begin materializing at various viewport positions (staggered fade-in, 100ms apart). **Scroll behavior:** HUD panels scroll at different rates (slight parallax via translateZ). The Klimt section's gold patterns animate continuously (background-position shifting). The glitch zone triggers aggressively when entering the viewport -- RGB splits intensify, displacement bands flash, the entire section vibrates (translateX oscillation +-2px for 500ms). **Interaction details:** - HUD panels brighten border on hover (gold opacity from 40% to 80%). - Ticker tape pauses on hover. - Vintage motif icons in the Klimt section rotate slightly on hover (15deg). - Glitch elements in the crash zone intensify on hover. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Gold-Klimt economic maximalism:** The section inspired by Gustav Klimt's gold period applied to economic content creates a unique visual statement -- economics as ornamental art, data as gold. 2. **HUD-overlay financial interface:** Positioning content as floating semi-transparent panels over a data-rich background creates an augmented-reality financial-analyst experience unique to this design. 3. **Glitch zone as market crash:** Using glitch visual effects specifically to represent economic disruption and market crashes creates a narrative-visual metaphor where the design itself breaks when the economy breaks. 4. **Ticker-tape hero framing:** The scrolling text strips at top and bottom of the hero section create a financial-terminal frame that establishes the economic context immediately. **Chosen seed/style:** aesthetic: maximalist, layout: hud-overlay, typography: art-deco-display, palette: gold-black-luxury, patterns: glitch, imagery: mixed-media, motifs: vintage, tone: futuristic-cutting-edge **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. Avoided mysterious-moody (74%) tone. Used hud-overlay (7%) layout, art-deco-display (7%) typography, and gold-black-luxury (7%) palette.