# Design Language for economics.day ## Aesthetics and Tone **economics.day** sits at a strange and wonderful junction: the cold precision of economic data delivered through the warm, glittering lens of fairycore. The domain name implies dailiness — a morning ritual, a check-in, a small ceremony. The aesthetic leans into that ceremony with star maps pressed into marble, pastel nebulae behind supply-demand charts, and headline figures set in Bebas Neue at sizes that would look at home on a stadium fascia board. Fairycore here is not illustrated mushrooms and cottagecore fonts. It is the *feeling* of fairycore — soft luminosity, iridescent shimmer, a sense that numbers are magical objects rather than cold facts. Economic indicators glow like bioluminescent plankton. A marble slab veined in pale rose and powder blue becomes the hero backdrop, as if the GDP of a small nation were etched into living stone. The tone is **approachable-casual**: knowledgeable but not intimidating, like a friend who genuinely enjoys explaining interest rate mechanics. No jargon walls. Numbers are celebrated, not buried. The copy speaks directly ("Today the Fed moved. Here's what it actually means for you.") without being condescending. The overarching mood: standing in a planetarium at closing time, phone in hand, reading the news under a dome of projected constellations — strangely peaceful, quietly electrified. ## Layout Motifs and Structure The layout is **full-bleed with gravity-anchored panels** — a series of viewport-filling sections where each data story owns its full screen real estate. Unlike the 92%-prevalent centered hero-stack, sections here break into a **split-depth composition**: one edge carries the large typographic data value (left or right, alternating), while the opposite edge holds the marble-texture imagery that bleeds off the frame. Specific structural rules: - **No gutters at the viewport edges.** Everything bleeds to the frame. Marble texture panels are `100vw` wide, clipped to safe reading zones by internal padding only. - **Asymmetric data blocks**: key figures (e.g., "−0.3%", "$4.2T") anchor to one side at massive scale; explanatory prose floats in a narrower column on the opposite side, typeset small and airy. - **Vertical rhythm in multiples of 8px** (base unit), but section heights are set in viewport units (`100vh`, `60vh`, `80vh`) to preserve the full-bleed intent. - **Skeleton-loading as structural scaffolding**: before any live data loads, the page renders content-shaped skeleton bones in `#E8D5EC` (blush bone) that pulse at 1.8s intervals — the skeleton IS the layout; it doesn't disappear and re-render, it dissolves into real content in place. - Navigation is a single floating strip at `position: fixed`, translucent frosted blush (`rgba(255, 240, 248, 0.72)`), 40px tall, no hamburger, links in Bebas Neue at 13px tracked wide. - **Star map overlay**: a subtle SVG constellation layer sits at `z-index: 2`, opacity 0.14, over every marble panel. Stars are `r=1.2px` circles in `#D4C4E8`, connected by `stroke-opacity: 0.06` lines. It breathes (CSS opacity oscillation, 6s ease-in-out) but never distracts. ## Typography and Palette **Typography (all verified Google Fonts):** - **Display / Data Headlines**: [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — the sole display face. Set at `clamp(5rem, 12vw, 11rem)` for hero data values. Tracking at `0.02em`. Color: `#3D1F5C` (deep amethyst) on light marble, `#F2E6FF` (pearl lavender) on dark panels. Bebas Neue's condensed caps carry economic figures with the authority of a stock ticker board while remaining readable at massive scale. - **Body / Explanatory Prose**: [Plus Jakarta Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans) — weight 400 for body, 600 for pull-quotes and callout labels. Size `clamp(0.95rem, 1.4vw, 1.1rem)`, line-height 1.7. Its humanist warmth keeps the casual register alive beneath the dramatic display face. - **Labels / Metadata / Axis text**: [DM Mono](https://fonts.google.com/specimen/DM+Mono) — weight 300, size `0.75rem`, tracking `0.08em`, uppercase. Used for chart axis labels, data source attributions, timestamps ("MAY 06, 2026 · 14:32 UTC"), and skeleton-loading placeholder text that reads "LOADING···" in faint mono. **Palette — pastel with celestial depth:** | Role | Name | Hex | |---|---|---| | Marble base (light) | Pearl Rose | `#F9EFF5` | | Marble base (mid) | Blush Quartz | `#EDD8EB` | | Marble vein (dominant) | Soft Mauve | `#C9A8D4` | | Marble vein (accent) | Powder Periwinkle | `#A8B8D8` | | Deep panel background | Dusk Amethyst | `#2A1540` | | Primary text (on light) | Deep Plum | `#3D1F5C` | | Primary text (on dark) | Pearl Lavender | `#F2E6FF` | | Accent / highlight | Candied Mint | `#B8E8D0` | | Star points | Ghost White | `#EEE8F8` | | Skeleton pulse color | Blush Bone | `#E8D5EC` | The marble is generated as a CSS gradient + SVG filter (`feTurbulence`, `feDisplacementMap`) to avoid any image dependency for the base texture. Swirling veins of `#C9A8D4` and `#A8B8D8` cross the `#F9EFF5` field at irregular angles. ## Imagery and Motifs **Marble texture — the primary imagery system.** No photography (avoided: 85% corpus rate). The marble is procedurally generated via layered `conic-gradient` and `radial-gradient` on `::before` pseudo-elements, with an SVG `feTurbulence` displacement filter applied at the canvas level. Result: each section's marble backdrop is unique and renders in-browser at zero HTTP cost. Panel 1 leans rose-dominant. Panel 3 shifts to cool periwinkle-dominant. Panel 5 inverts to the dark amethyst field with pale vein tracing. **Star-celestial motifs — the structural connective tissue:** - A custom SVG star field (150–200 stars, algorithmically scattered via JavaScript `Math.random()` with fixed seed `0x4EC0`) overlays every section at low opacity. - Constellation line-art: six custom constellations named for economic concepts — "The Bull" (bullish market), "The Bear", "The Yield Curve" (a bent arc of five stars), "The Fed Dot" (a loose scatter mimicking the FOMC dot plot), "The Invisible Hand" (an open five-point pattern), "The Arbitrage" (two mirror-image triangles). These are inline SVGs, `stroke: #D4C4E8`, `stroke-width: 0.8px`. - Star twinkle: CSS `@keyframes twinkle` changes `opacity` from 0.6 → 1 → 0.6 over 3–7s (randomized per star via `animation-delay`). No JS required. - Shooting star animation: one SVG line element traces a 200px diagonal path every 12–18s (randomized interval via JS), fading from `opacity: 1` to `opacity: 0` over 600ms. **Skeleton-loading as visual motif:** The skeleton state uses `#E8D5EC` rounded rectangles (`border-radius: 4px`) with a shimmer — a `linear-gradient` that sweeps from left to right over 1.8s, using `#EDD8EB → #F9EFF5 → #EDD8EB`. The skeletons are content-faithful: a skeleton for a headline data value is 280px × 80px; a skeleton for a body paragraph is three lines at 100%, 100%, 65% width. When data resolves, the skeleton fades out (`opacity: 0`, `transition: 0.4s`) and the real content fades in underneath. ## Prompts for Implementation **The story to tell:** The visitor arrives at economics.day each morning like opening a window. The first full-bleed section is a marble expanse — pale rose, veined in powder blue — with the single most important economic number of the day set in Bebas Neue at 10vw. Under it, in Plus Jakarta Sans, a single plain-language sentence explains what the number means and why it matters today. No other content competes. The number has the stage. Scrolling forward, the marble shifts tone (warmer in the second section, cooler in the third). Each section tells one story: the jobs number, the yield curve, a central bank decision. Star constellations drift overhead, named after the story being told. The skeleton state should feel *intentional* — the blush-bone pulses are beautiful on their own, and the reveal of real data into those exact shapes should feel like a magic trick, not a loading spinner. **Critical implementation guidance:** - Build the marble texture entirely in CSS/SVG — no `` tags for backgrounds. - The skeleton-loading system must be activated for every numeric data point. Numbers arrive via `fetch()` from a mock JSON endpoint; while pending, skeletons show. This makes the page feel alive even before data loads. - The star field SVG should be `pointer-events: none` and `aria-hidden="true"` — purely decorative. - Bebas Neue should be loaded with `font-display: swap` and subset to uppercase Latin + numerals only (`unicode-range: U+0020-005A, U+0030-0039, U+002E, U+002C, U+0025, U+002B, U+002D`). - Avoid: CTA blocks, pricing tables, stat grids, hamburger nav, hero buttons, testimonials, social proof rails. - Embrace: generous whitespace within sections (despite full-bleed), editorial restraint (one story per section), ambient motion (stars, marble shimmer) that never distracts from the data. - The overall page scrolls at a 1:1 ratio with no parallax (parallax at 91% in corpus — deliberately avoided) to keep the data legible and the experience grounded. ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Fairycore applied to economic data — completely novel in the registry (0% frequency).** No prior design in the registry combines a finance/economics domain with a soft-luminous fairycore aesthetic. The pairing is deliberately strange: pastel marble, constellation overlays, and Bebas Neue displaying interest rate numbers. The friction between the warm-magical visual language and the cold precision of economic data IS the brand identity. 2. **Skeleton-loading as primary UX motif, not just a loading state (2% frequency).** Where most sites treat skeleton screens as a brief purgatory before real content, this site makes the skeleton state beautiful enough to stand alone. The blush-bone shimmer skeletons ARE part of the design — they appear at page load, hold the layout, and transition into data without layout shift. Combined with the approachable-casual tone, this makes latency feel contemplative rather than frustrating. 3. **Procedural marble texture generated entirely in CSS/SVG (marble-texture imagery at effectively 0% in corpus for CSS-generated marble).** No stock photography, no texture image files. The marble is created with `feTurbulence` + `feDisplacementMap` SVG filters combined with layered CSS gradients, making every section's texture unique and requiring zero network requests for imagery. This is technically novel and keeps the site fast on slow connections. 4. **Constellation motifs named for economics concepts (star-celestial at 2%), replacing the standard vintage/tech/circuit motif vocabulary (vintage at 66% — deliberately avoided).** "The Yield Curve", "The Fed Dot", "The Bull", "The Bear" as star patterns turns abstract data relationships into sky-mythology — a form of economic storytelling that no other site in the registry attempts. **Chosen seed/style:** aesthetic: fairycore, layout: full-bleed, typography: bebas-bold, palette: pastel, patterns: skeleton-loading, imagery: marble-texture, motifs: star-celestial, tone: approachable-casual **Avoided patterns from frequency analysis:** - hand-drawn aesthetic (74%) — avoided entirely - centered layout (92%) — replaced with asymmetric full-bleed split-depth - mono typography (91%) — DM Mono used only for micro-labels, not primary - parallax pattern (91%) — 1:1 scroll ratio throughout - warm palette (95%) — pastel/cool-mauve instead of warm browns/oranges - vintage motifs (66%) — constellation/celestial replaces vintage ornament - stagger animation (67%) — skeleton-loading shimmer replaces stagger entrance - gradient palette (88%) — procedural marble texture replaces gradient washes