# Design Language for economic.day ## Aesthetics and Tone economic.day is a **brutalist luxury ledger** — imagine a 1920s Weimar-era financial broadsheet printed on hand-pressed vellum, then crumpled, dried, and unfolded by someone who found it stuffed inside a gold-lacquered strongbox. The site refuses the clean modernism of financial dashboards entirely; instead it treats economic information as *artifact*, as *relic*, as a thing the world deposited and time made strange. The aesthetic is **brutalist-meets-opulent**: raw concrete grid logic meets gold-leaf ornament. Think the Bundesbank's brutalist tower seen through a jeweler's loupe. The tone is whimsical-creative — the site doesn't lecture about economics; it performs economics as theatre. Numbers appear as stage props. Dates are tombstones with witty epitaphs. Prices move across the page like characters in a Weimar cabaret. Color language is strict: deep obsidian blacks (`#0B0905`, `#1A1208`) against molten-gold and aged-paper (`#C9A84C`, `#B8922A`, `#E8D5A0`), with one shock of tarnished verdigris (`#4A7B6F`) for structural accents. No white. No blue. No gradients. Gold is either flat or has the micro-texture of hammered leaf. The mood is **opulent-grand** crossed with **whimsical-creative**: the ledger of a civilization that found the whole thing amusing in retrospect. ## Layout Motifs and Structure The layout is **immersive-scroll** with brutalist grid discipline. The page is constructed as a single vertical broadsheet column (max-width 900px centered on desktop, full-bleed on mobile) but the *internal* composition deliberately breaks that column with brutalist overhangs and gold-rule interruptions. **Structural architecture:** - **MASTHEAD BLOCK** — full-height viewport entry. "economic.day" set as a slab of compressed display type, left-aligned, stacked vertically in 3 lines with extreme letterspacing. A single horizontal gold rule (3px, `#C9A84C`) bisects the viewport at 62% height. Below the rule: a rotating subhead cycling through archaic economic definitions ("the science of the scarce", "the art of the ledger", "the dream of the market") — each swapping on a 4-second morph transition. - **THE LEDGER SCROLL** — the main body. Content is organized as ledger entries in two asymmetric columns (65% / 35% split, gutter: 32px) broken by full-bleed gold-ruled section dividers. Left column carries the narrative; right column carries marginalia numbers, dates, and gloss annotations — typeset smaller, rotated 90° on desktop. - **FOLDED SECTIONS** — every major section break is signaled by an animated "fold" — the page appears to crease and unfold, revealing the next entry. This is achieved via CSS 3D transform (rotateX) on scroll, creating the sensation of turning a broadsheet page. - **GOLD-RULE INTERRUPTIONS** — at irregular intervals (not modular, deliberately arbitrary), a horizontal rule of varying weight (1px, 3px, 6px) in `#C9A84C` cuts across the full width of the container. Some rules carry a single label ("ENTRY 04", "ANNO DOMINI MMXXVI") in a condensed all-caps serif. - **FOOTER AS COLOPHON** — the final section is typeset like a 19th-century printer's colophon: centered on the page, surrounded by ornamental dingbats (SVG — no icon fonts), declaring the domain, year, and a brief absurdist statement of purpose. Navigation: none. No nav bar, no hamburger menu, no sticky header. The site is one linear read; a floating "RETURN TO TOP" anchor (styled as a wax-seal SVG button in gold on black) appears after 200px of scroll. ## Typography and Palette **Typography (Google Fonts only):** - **Primary Display — `Playfair Display`** (Google Fonts, serif, variable wght 400→900): Used for the masthead wordmark and all H1 elements. Set at `clamp(4rem, 12vw, 10rem)`, weight 900, letter-spacing `-0.02em`. The compressed tracking gives it the density of a broadsheet headline. On scroll past the masthead, the wordmark shrinks via CSS scroll-driven animation: `font-size` interpolates from 10rem → 2.4rem as the masthead exits viewport, transitioning to a fixed top-bar label in gold. - **Body/Ledger Text — `Libre Baskerville`** (Google Fonts, serif, wght 400/700): All running body text, ledger entries, and annotations. Set at `1.125rem / 1.9` (line-height), color `#E8D5A0` on `#0B0905` background. The combination of Baskerville's ink-trap details at body size and the aged-paper foreground color creates the sensation of reading from a physical ledger page. Bold weight used only for ledger entry headings. - **Marginalia / Numbers — `Space Grotesk`** (Google Fonts, sans-serif, variable wght 300→700): All numerical annotations, dates, percentage figures, and sidebar marginalia. Set at `0.8rem`, weight 300, tracking `0.08em`, color `#C9A84C` (gold). The contrast between Space Grotesk's geometric structure and the Baskerville body creates productive typographic tension — numbers feel like they were stamped in gold leaf by a different hand than wrote the prose. - **Accent / Dingbats / Labels — `IM Fell English`** (Google Fonts, serif, wght 400 italic): Used sparingly for pull-quotes, ornamental labels, and the rotating definition subhead. Its deliberate roughness evokes 17th-century type founding — slightly irregular letterforms that feel physically printed. **Palette (exact hex values):** - `#0B0905` — Near-black with warm brown undertone. Primary background, used everywhere. - `#1A1208` — Slightly lifted black for card/block backgrounds within the main field. - `#C9A84C` — Molten gold. Primary accent: rules, numbers, hover states, gold-rule dividers. - `#B8922A` — Aged gold. Secondary accent: borders, wax-seal button fill. - `#E8D5A0` — Aged vellum. Primary text color for all body copy. - `#4A7B6F` — Tarnished verdigris. Structural accent only: section fold indicators, footnote markers. - `#2C2015` — Dark umber. Used for subtle section background variation to avoid flat monotony. ## Imagery and Motifs **All imagery is custom SVG — no photography, no stock, no raster.** Photography appears at 91% in the registry; this design abstains entirely, replacing it with: **1. Paper-aged texture system:** The entire page background has a CSS-generated paper texture: a noise layer (SVG `` filter applied to a full-viewport ``) at 4% opacity over `#0B0905`, creating the sensation of aged stock without photography. The noise frequency is `0.65` (medium grain), color `#C9A84C` (gold grain on black — reversed from typical sepia). **2. Layered-depth motifs:** - Every section has multiple SVG layers: a background grain layer (z-index 0), a content layer (z-index 10), and a foreground ornament layer (z-index 20) of decorative gold hairlines and corner brackets — the same "register marks" a printer uses to align plates. This creates physical depth without 3D transforms. - Floating "annotation ghost" elements: translucent SVG circles (40% opacity, `#C9A84C` stroke only, no fill, 0.5px stroke) drift slowly across the background at different speeds, suggesting the ghost of a currency symbol or decimal point. **3. Gold-leaf ornamental system (custom SVG):** - Corner brackets (┐┘└┌ variants) appear at section intersections — each is a distinct SVG path, slightly irregular, suggesting hand-ruled. - Ornamental dividers: a repeating SVG pattern of small diamond-lozenges (`◆`) in `#C9A84C`, spaced every 24px along horizontal rules. - A single large background SVG per section: a faint architectural linedrawing of a brutalist structure (a vault door, a ledger book spine, a strongbox) drawn at 8% opacity in `#C9A84C` — visible only at certain scroll positions via clip-path reveal. - **Wax seal** — the "RETURN TO TOP" button is rendered as an SVG wax seal: a filled circle in `#B8922A` with a stylized "E·D" monogram in `#0B0905`, surrounded by a serrated edge suggesting pressed wax. **4. Morph transitions:** The rotating subhead cycles between economic definitions using a CSS `morph` technique: characters dissolve and re-form using SVG text path morphing (GreenSock MorphSVG or a lightweight vanilla CSS clip-path approach). Each transition takes 600ms with a slight gold shimmer (text-shadow pulse from `#C9A84C` at 0% to 100% opacity). **Recurring motifs:** - Ledger-line grids (horizontal only, no vertical) as structural underlays - Gold corner-brackets as section delimiters - Verdigris footnote markers (small SVG daggers †) for marginal annotations - "Fold crease" — a single diagonal SVG line at 1px, `#4A7B6F`, 30% opacity — running from bottom-left to top-right of each section, suggesting a broadsheet fold ## Prompts for Implementation Build economic.day as a **single-page immersive scroll experience** — a living economic broadsheet that rewards slow, attentive reading. There is no app functionality, no user accounts, no CTA. The entire experience is one continuous artifact. **The story:** A visitor unrolls a very long ledger that was found in a vault. The ledger contains entries about economics — definitions, observations, absurdities, the occasional price of bread in 1923 Weimar Germany — typeset with such beauty and care that the subject (economics) becomes secondary to the *experience* of the document itself. Scroll is the only interaction. The visitor is a reader, not a user. **Section-by-section blueprint:** 1. **MASTHEAD** (`100vh`) — Wordmark "economic.day" in Playfair Display 900, enormous, left-aligned. Gold rule at 62%. Rotating IM Fell English subhead cycling definitions. Background: SVG paper texture + faint vault-door linedrawing at 8% opacity. 2. **ENTRY I: THE DEFINITION** — A brutalist ledger entry. Left column: a 3-paragraph prose definition of "economy" that is deeply strange and slightly funny (written as if by a 1920s academic who found the whole thing suspect). Right column: marginalia numbers — GDP figures rotated 90°, a date-stamp of "ANNO MMXXVI". 3. **FOLD TRANSITION** — CSS 3D crease animation revealing ENTRY II. 4. **ENTRY II: THE PRICE** — Full-bleed section. A single large number (typeset at `clamp(8rem, 25vw, 20rem)` in Space Grotesk 300, color `#C9A84C`) — a price. Below it: a brief legend in Libre Baskerville 400 italic. Left margin: a small SVG illustration of a Weimar-era strongbox. 5. **ENTRY III: THE LEDGER** — Three-column comparison of economic "entries" — formatted like actual double-entry bookkeeping (Debit / Credit / Balance) but with absurdist economic observations instead of figures. Column headers set in Playfair Display 900 small-caps. 6. **FOLD TRANSITION** — second crease. 7. **ENTRY IV: THE MARKET** — A single sentence set at display scale, wrapping across the full column width: a found quote about markets (Keynes, Hayek, someone unexpected). Below it: a gold-rule, then a pull-quote in IM Fell English italic, centered, 120% of body size. 8. **COLOPHON** (`60vh`) — The printer's colophon. Centered, surrounded by SVG ornamental dingbats. "economic.day — est. MMXXVI — a day in the life of the ledger." Wax-seal "RETURN TO TOP" button below. **Interactions:** - Scroll-driven masthead shrink (CSS scroll-driven animation, no JS required): `@scroll-timeline` binding wordmark font-size to scroll position. - Section fold: `IntersectionObserver` triggers `transform: rotateX(-8deg) → rotateX(0deg)` with `perspective: 1200px` on section entry. - Morph subhead: vanilla JS cycling through 5 definitions with CSS clip-path morph transition (600ms, ease-in-out). - Gold-rule pulse: on section entry, the horizontal rule "draws" from left to right via `scaleX(0) → scaleX(1)` transform, `transform-origin: left`, 800ms ease-out. - Annotation ghosts: CSS `animation: drift` — slow translate + opacity oscillation, staggered start times, 20–40s duration. - Hover on marginalia numbers: `color` transitions from `#C9A84C` → `#E8D5A0` with `letter-spacing` expanding 0.08em → 0.14em over 200ms. **AVOID:** CTA buttons, pricing blocks, stat dashboards, navigation menus, photography, hero images with text overlays, gradient backgrounds, card grids, testimonial sections. **HTML/CSS notes:** - Use CSS custom properties for all palette values. - The paper texture is a single SVG filter applied via `filter: url(#paper)` on the `body` — no image files. - All ornamental SVGs are inline in the HTML; none are external files. - Use `font-display: swap` for Google Fonts. - The page should be functional with JavaScript disabled (morph subhead shows first definition; scroll animations degrade gracefully to static). ## Uniqueness Notes **Differentiators from the existing registry:** 1. **Gold-on-black brutalist typography as the primary register (registry-rare).** The frequency analysis shows gold-black-luxury at only 2% of designs, brutalist at 10%, and immersive-scroll at 4%. This design combines all three — no other registry entry uses a brutalist grid system with gold-leaf ornament on near-black stock. The nearest neighbors (corporate dark-mode, editorial) use gold as accent only; here it is the primary structural color. 2. **Ledger-format content architecture (registry-first for domain).** The double-entry bookkeeping layout — with 90°-rotated marginalia numbers in a fixed right column — does not appear in any current registry design. The formal is borrowed from pre-digital financial documents, not from web conventions. The asymmetric 65/35 split avoids the centered (91%) and sidebar (26%) overuse. 3. **SVG paper-texture as the sole imagery (no photography).** Photography appears at 91% of registry designs. This design replaces it entirely with a procedural CSS/SVG paper grain filter — a technique used in <1% of registry entries. The combination with the gold-grain color (not the usual sepia) is novel. 4. **CSS scroll-driven animation for typography morphing (no JS scroll listeners).** Using the native `@scroll-timeline` / `animation-timeline: scroll()` spec for the masthead font-size transition avoids JavaScript and produces GPU-composited animation. Only 5% of registry designs use `fade-reveal`; none document CSS-native scroll-driven font scaling. 5. **Whimsical-creative tone applied to financial/economic domain (cognitive dissonance as design intent).** Tone frequency shows whimsical-creative at 1% — near-zero. Applying it to an economics domain (which conventionally demands authoritative or professional tone at 31%/7%) creates productive dissonance. The site is about economics the way a Dadaist collage is about war: through oblique estrangement, not explanation. **Seed:** aesthetic: brutalist, layout: immersive-scroll, typography: expressive-variable, palette: gold-black-luxury, patterns: morph, imagery: paper-aged, motifs: layered-depth, tone: whimsical-creative **Overused patterns avoided:** photography (91%), centered layout (91%), parallax (91%), warm palette (95%), gradient palette (88%), hand-drawn aesthetic (74%), scroll-triggered stagger (67%), mono typography (91%). **Underused patterns prioritized:** gold-black-luxury palette (2%), whimsical-creative tone (1%), brutalist aesthetic (10%), paper-aged imagery (4%), immersive-scroll layout (4%), layered-depth motifs (5%), morph pattern (12%), hud-overlay / hero-dominant layout (0%).