# Design Language for economics.quest ## Aesthetics and Tone economics.quest is a **shattered-glass econometrics theater** — imagine a Bauhaus data terminal that has been hit by a seismic event and is still broadcasting. The aesthetic is anti-design: UI chrome peels away from the surface, typographic elements jut at slight rotations, borders are deliberate and raw (single-pixel, sometimes broken), and the grid refuses to resolve into comfort. Yet the tone is elegant-sophisticated — this is not chaos for chaos's sake but *controlled rupture*, the way a broken graph line can carry more meaning than a smooth curve. The mood draws from 1930s financial newspapers seen through cracked glass: art-deco gilding on a terminal that may be failing. The site feels like receiving critical economic intelligence from a future radio station transmitting through interference. Anti-design principles applied deliberately: information hierarchy achieved through *absence* rather than hierarchy; whitespace is conspicuous and asymmetric; UI labels are exposed as labels; invisible infrastructure becomes visible ornament. ## Layout Motifs and Structure **HUD-overlay architecture.** The entire page is conceived as a heads-up display projected onto a mountainous horizon. Key structural elements: - A persistent top bar (thin, 36px) carries the domain name in spaced art-deco caps and a single status indicator — this bar never scrolls away - Content panels float as HUD tiles: rectangular, fixed-width columns that don't fill the viewport but are *placed* within it like instrument readouts, leaving deliberate negative space - A faint mountain-landscape silhouette occupies the lower 30% of the viewport as a non-scrolling backdrop — pale, almost invisible, ghost-blue — the HUD tiles float *above* the mountains - Tile corners use exposed corner marks (L-bracket, ⌐ ¬ style) rather than rounded borders, reinforcing the readout aesthetic - The grid is a 12-column system with columns 2–5 and 7–11 occupied, columns 1, 6, and 12 left as deliberate gaps — the asymmetry is structural - Vertical rhythm is set to 8px base unit; panels snap to multiples of 64px in height **Anti-design layout tension:** One panel per viewport section is visually "misaligned" by 2–4px — a calculated imperfection that reads as signal degradation rather than error. ## Typography and Palette **Primary display font:** Poiret One — geometric art-deco letterforms, ultra-light strokes with high-contrast terminals. Used for headlines, domain name, and large numeric figures. Available on Google Fonts. **Secondary body font:** DM Mono — clean monospaced, used for all body text, data labels, axis annotations, and running copy. Pairs with Poiret One's formality while reinforcing the terminal/instrument aesthetic. **Accent serif:** Cormorant Garamond — used sparingly for pull quotes and long-form economic commentary. Narrow optical size, high contrast, elegantly antique. Available on Google Fonts. **Palette — Ethereal Blue:** - `#0B1523` — Deep void: primary background, near-black with a blue undertone - `#1A3356` — Abyss blue: secondary background for HUD tiles, slightly lighter than void - `#2A5F8F` — Structural blue: borders, grid lines, corner marks, the mountain silhouette - `#5BA3D4` — Signal blue: primary accent, used for active states, key data highlights, and hover glows - `#A8D4F0` — Ghost blue: de-emphasized text, the mountain silhouette fill, subtle HUD chrome - `#E8F4FF` — Ice white: primary text, headlines, maximum-contrast labels - `#C9A84C` — Art-deco gold: single accent for domain name, decorative hairlines on panel borders, the shake-error glyph The palette is near-monochromatic with one warm intrusion (gold). Ethereal quality comes from the blue range feeling like bioluminescence seen through fog. ## Imagery and Motifs **Geometric-abstract imagery:** All illustrative elements are constructed from SVG geometry — no photographs, no illustrations that reference the human figure. Economic concepts are rendered as abstract compositions: a yield curve becomes a precise arc with exposed construction lines; a trade relationship becomes two overlapping geometric forms with a shared edge; volatility is a tessellated field of irregular quadrilaterals. Construction-line aesthetics are prominent — shapes appear partially drawn, as if the measurement scaffolding was left visible. This reinforces both the art-deco technical-drawing tradition and the anti-design principle of exposed process. **Mountain-landscape motif:** A low-contrast SVG range of stylized mountain peaks — triangular, geometric, not naturalistic — occupies the viewport's lower background layer. The peaks are built from straight lines and sharp angles (no curves), rendered in `#2A5F8F` at 15% opacity. This is purely atmospheric; it anchors the horizon and gives the HUD tiles something to float above. **Decorative motifs from art-deco vocabulary:** Stepped chevrons, fine parallel hatching (2px lines, 4px spacing), sunburst segments radiating from panel corners. These appear as micro-ornaments, never as primary layout elements — dressing on the HUD chrome. **Shake-error pattern:** A micro-animation applied to specific data states — when a statistic represents a shock, anomaly, or crisis event, the element receives a 200ms horizontal shake at 3px amplitude, then settles. The shake uses `transform: translateX()` on a tight keyframe sequence. It is used deliberately, never decoratively — only when the *data* justifies it. A quiet site that occasionally convulses is more powerful than constant motion. ## Prompts for Implementation **Core experience:** The page should feel like monitoring an economic intelligence feed during a period of unusual activity. Data is arriving; some of it is alarming; the instrument is functioning but the world it is measuring is not entirely stable. **Animation approach — sparse and purposeful:** - Fade-in on page load: HUD tiles reveal sequentially at 120ms intervals, opacity 0→1, no movement - Shake-error: `@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }` — applied via `.state-shock` class, duration 200ms, ease linear - Mountain silhouette: completely static — it is an anchor, not a performer - Corner marks on HUD tiles: 0.4s CSS transition on border-color from `#2A5F8F` to `#5BA3D4` on hover **Typography implementation:** - Poiret One at 48–120px for hero figures; letter-spacing: 0.15em throughout - DM Mono at 13–14px for body; line-height: 1.7 - All-caps labels with letter-spacing: 0.25em for HUD panel titles - Cormorant Garamond at 19px, italic, for editorial callouts only **HTML/CSS structure:** - CSS custom properties for all palette values on `:root` - HUD tiles use `position: absolute` within a relative container rather than flexbox — placement is explicit, not computed - The mountain SVG is `position: fixed`, `z-index: 0`, `bottom: 0`, `width: 100vw` - Content tiles sit at `z-index: 10–20` depending on layer - Anti-design misalignment: one tile gets `transform: translate(3px, -2px)` as a global style — no interaction, always slightly off **Avoid:** Any layout that resolves into a conventional grid of equal cards. Avoid CTA buttons styled as buttons — if there is a call-to-action, it is text with a hairline underline. Avoid warm colors outside the single gold accent. Avoid smooth, comfort-seeking curves anywhere in the UI. **Bias toward:** Negative space. Raw typographic hierarchy (size alone, not color-coded backgrounds). The sense that the screen is an instrument panel, not a brochure. ## Uniqueness Notes 1. **HUD-overlay at 0% frequency** — no site in the current corpus uses this layout. economics.quest has structural novelty at the layout level. 2. **Ethereal-blue palette at 1%** — almost entirely absent from the corpus. The near-monochrome blue-void palette with a single gold intrusion is structurally opposite to the warm-dominant corpus. 3. **Anti-design + elegant-sophisticated pairing is paradoxical and rare.** Anti-design sites in the corpus trend toward aggressive/punk tones. economics.quest applies rupture aesthetics to a sophisticated financial intelligence register — the broken interface broadcasts authoritative data. 4. **Mountain-landscape at 1%** redeployed as HUD backdrop geometry rather than naturalistic scenery — the motif is present but completely abstracted and subservient to the instrument-panel framing. 5. **Shake-error at 2%** used semantically (data-state-driven) rather than decoratively — a behavioral pattern, not a visual flourish. This is the site's primary motion language. 6. **Construction-line geometric imagery** (incomplete SVG geometry, exposed scaffolding) is not present in the corpus — an original visual vocabulary for financial data visualization. 7. **Art-deco gold as the sole warm accent** in a cold palette creates a controlled temperature rupture — the gilded terminal readout from a 1930s bank vault transplanted into a future crisis-monitoring station. **Chosen seed (planned):** *aesthetic: anti-design, layout: hud-overlay, typography: art-deco-display, palette: ethereal-blue, patterns: shake-error, imagery: geometric-abstract, motifs: mountain-landscape, tone: elegant-sophisticated* **Avoided overused patterns (per frequency analysis):** photography (88%) → 0%; warm palette (96%) → 0% (inverted to cold-blue); parallax (85%) → 0%; stagger (55%) → 0% (replaced with sequential HUD tile reveal); scroll-triggered (55%) → 0% (HUD tiles are placed, not scrolled-into); vintage motifs (81%) → not used (art-deco is present but through geometric precision, not nostalgia). **Preferred underused patterns (per frequency analysis):** hud-overlay (0%) → primary layout; ethereal-blue (1%) → primary palette; mountain-landscape (1%) → atmospheric backdrop; shake-error (2%) → primary motion language.