# Design Language for economics.day ## Aesthetics and Tone economics.day is **The Lithograph of the Invisible Hand** — a retro, single-column, salon-printed broadsheet about the *day-by-day weather of an economy*, as imagined by an old line-engraver who lost faith in graphs and started drawing mountains instead. The premise is unhurried and elegant: imagine that a quietly eccentric 1908 atelier in the Engadine valley still publishes a one-page daily under the masthead **"economics.day — A Daily Almanac of Cause, Effect & Altitude."** Every number — interest rate, exchange parity, supply-shock magnitude — is reinterpreted as a feature of an imaginary alpine landscape. A 25-basis-point hike is a switchback ridge. A liquidity glut is a glacial lake at high pasture. A debt cliff is, of course, a literal cliff — drawn in fine pen-line with a single thread of mist trailing off its lip. The mood is **elegant-sophisticated** but never austere. Think of the soft *whump* of letterpress impression on damp cotton paper, the way an early-edition Baedeker guide smells of glue and pipe-tobacco, the way Hokusai's Hundred Views of Mt. Fuji show the *same* mountain across an entire economy of weather and commerce. There is no urgency, no marketing voice, no stat-grid. The visitor arrives mid-thought, as though pulling a card from a long oak drawer at the Société de Géographie Économique on a slow Tuesday afternoon. Light enters through a tall north-facing window; somebody is humming Erik Satie two rooms over; the visitor stays as long as they like and leaves slightly more thoughtful about price discovery than when they came in. This is **retro** in the European belle-époque sense — not 70s vapor, not 90s pixels — and the **ethereal-blue** palette gives it the high-altitude air of a mountain at first light. The whole tone whispers rather than declares; the only typographic shout is the masthead, and it shouts in copper-plate script, politely. ## Layout Motifs and Structure The composition is a **strict single-column** (15% in the corpus, deliberately chosen to resist the corpus-wide reflex toward card-grids and full-bleed splash). The viewport is treated as **one tall, narrow broadsheet**, 640px wide centered in a sea of pale-blue paper, with generous symmetrical margins of ethereal sky on either side. There is no sidebar, no off-canvas drawer, no horizontal navigation; the entire experience is read top-to-bottom like a printed page from 1908. **Vertical rhythm — the broadsheet rule:** The page is built on a 24px baseline grid with a 4-stage vertical hierarchy: 1. **The Masthead Stratum** (top 14vh) — title, dateline, weather of the day rendered as one micro-pictogram (sun behind a mountain peak, currents of air drawn as four parallel hatch-strokes). 2. **The Lead Engraving** (next ~70vh) — a single full-width SVG line-illustration of a mountain landscape that *is* today's economic chart. It looks like a 19th-century steel engraving but its silhouette is generated from real economic data on first paint: x-axis becomes the horizon, y-axis becomes ridgeline elevation. The visitor sees a mountain; an economist sees a yield curve. 3. **The Reading Strata** (the rest of the document, vertically stacked) — eight lettered sections **A through H**, each an essay-paragraph with a small drop-cap initial in copper-plate, exactly one inline diagram, and exactly one running-foot footnote. No two sections look alike but all share the same column width. 4. **The Colophon** (bottom 18vh) — printer's mark, year, faint impression of a quill nib, and the only navigation: a thin vertical index dot-leader running up the left margin that quietly tracks reading progress. **Progressive disclosure — the unfolding letter:** Crucially this is a **progressive-disclosure** layout (1% in the corpus, virtually unused) — the deepest motif of the page. Every section starts collapsed to a single illustrated *seal*: a wax-seal-style circular SVG containing the section letter and a one-word précis ("A. ALTITUDE", "B. BARTER", "C. COVENANT"). The visitor clicks (or hovers, on desktop) and the seal fractures with a slow CSS clip-path animation, the section paragraph unfurls downward over 1200ms with an ease-out-quart curve, and the diagram inside redraws its line stroke-by-stroke. Sections opened stay opened; their seals reform if dismissed. This isn't an accordion in the SaaS sense — it's the gesture of opening sealed correspondence one envelope at a time, in order, on a winter afternoon. The visitor controls pace; the document rewards patience. **No cards. No grid. No bento. No hero CTA. No pricing block.** A column, a mountain, eight sealed envelopes, a colophon. That is all. ## Typography and Palette **Typography — an eclectic-hybrid of four Google Fonts (5% in the corpus), arranged like a printers' drawer of a 1908 atelier.** Each face has one and only one job; none compete. - **`Cormorant Upright`** (Google Fonts, variable wght 400–700) — the body voice. An upright serif drawn in 2015 by Christian Thalmann in deliberate homage to Garamond's earliest alpine-era specimens; airy counters, slightly extended ascenders, very high readability at small sizes. Used at 17.5px, 1.72 line-height, walnut-ink on pale-blue paper. The bulk of the document is set in this face. - **`IM Fell DW Pica`** (Google Fonts) — used **only** for the eight section seals and their dropcap initials. An authentic 17th-century revival with rough ink-bleed edges and uneven weight; gives every seal the look of being struck once with a hand-press and left to dry. Sized at 28px on the seals, 64px as section dropcaps. - **`Pinyon Script`** (Google Fonts) — used **only** in the masthead and the dateline ("Vol. MMXXVI · Issue CXXIX · 9 May"). A delicate copper-plate script with extreme contrast and high curl-tails; the masthead is rendered at 56px, the dateline at 18px in italic. Nowhere else. - **`Cormorant SC`** (small-caps companion, Google Fonts) — used **only** for the running footnote callouts and the section letter that appears beside each opened seal ("§ A "). Tracks at +60 letter-spacing. Never longer than four words. **Palette — `ethereal-blue` (5% in the corpus), in the exact hues of a Bernese alpine sunrise:** - `#E8EEF2` — **Pale Glacier Paper.** The page background. Reads as nearly white but is unmistakably blue under direct comparison; the entire document floats on it. - `#C7D5E0` — **First-Light Sky.** The wide outer margin tone; reserved for the body around the column. - `#7A92A8` — **High-Pass Mist.** Used for thin rule-lines, hatch-strokes inside line illustrations, and 60% of all SVG stroke colors. - `#3D5872` — **Slate-Mountain Ink.** The body-text color; deep but not black. Reads warm-cool against the paper. - `#1A2A3D` — **Midnight Tarn.** The masthead, dropcaps, and seal centers. The deepest tone in the document and used very sparingly. - `#B89968` — **Aged Brass.** The single warm accent. Appears only on the wax-seal rings, the colophon's printer's mark, and the dot-leader index nibs in the left margin. Less than 3% of total visible pixel area, deliberately rationed. - `#F5DCC4` — **Candle Halo.** A soft cream used at 30% opacity behind the masthead and behind any seal hovered with the cursor — mimicking a small reading-light cast across the page. The palette is **analogous-with-one-warm-accent**. There is no gradient anywhere on the site (97% of the corpus uses gradients; this design abstains entirely). All color depth comes from cross-hatching density, ink opacity, and the soft 8%-opacity paper-grain SVG filter overlaying the entire viewport. ## Imagery and Motifs **Imagery — `line-illustration` (3% in the corpus), exclusively SVG, with a clear stylistic ancestry:** Every image on the site is a hand-drawn-feeling SVG line drawing in the manner of *Edward Whymper's Scrambles Amongst the Alps* (1871) crossed with *Ernst Haeckel's Kunstformen der Natur* (1904) — pen-and-ink with cross-hatch, exact 0.5px and 1.0px stroke weights, no fills except for solid silhouettes of mountain massifs in `#1A2A3D`. There is **no photography** anywhere. No 3D render. No raster. No stock vector. No AI-generated bitmap. If a thing must be shown, it is drawn in line. **The motif — `mountain-landscape` (3% in the corpus), recurring at three scales:** - **The grand engraving** (Lead Engraving, ~70vh tall): a panoramic alpine ridgeline rendered as a single SVG path, with stroke-dasharray animation that draws itself across 4.5 seconds on first load (path-draw-svg, 27% in corpus — the only common pattern this design embraces). Behind the ridgeline, three layers of receding mountains in progressively lighter tints of mist (`#3D5872` → `#7A92A8` → `#C7D5E0`) creating aerial-perspective depth without parallax. - **The diagrammatic mountainlets** (one per opened section): small 320×180 SVG vignettes inside each section paragraph. These are the *real* economic charts in disguise. A normal yield curve appears as a long gentle ascent to a single peak. An inverted yield curve appears as a steep cliff with a small hanging valley. Stagflation is drawn as a desert plateau with cracked riverbeds. Each diagram has a small inscription in `Cormorant SC` small-caps reading e.g. "FIG. III — LIQUIDITY GLACIER, AFTER THUNNERSTRÖM." - **The micro-glyphs** (printer's-ornament scale, ~16px): four hand-drawn mountain-landscape pictograms — a snow-capped peak, a mist-line, a tarn, a switchback path — used as bullet-replacements, footnote-anchors, and the section-seal rim decorations. They appear in the same style as botanical printer's ornaments from a 1908 typecase. **One additional motif: `book-scholarly` printer's marks.** The colophon at the bottom of the page contains a delicate quill-nib emblem and a circular *anno publicationis* device with the year set in roman numerals — drawn once, used once. **No glassmorphism. No neon. No mesh-gradients. No photography. No icons-from-a-set. No emoji. No third-party badges.** Every visual element is a stroke of imaginary ink on imaginary cotton paper. ## Prompts for Implementation **Storytelling spine — the document as a slow read:** The site is a single tall vertical document. No router, no menu, no header-nav, no hamburger, no footer-CTA, no email-capture, no pricing, no testimonials, no logo-strip. There is the masthead, the engraving, eight sealed envelopes opened one at a time, and the colophon. That is the narrative. ```
  1. …
  2. …
``` **Animation — slow, paper-true, never showy:** - **`progressive-disclosure`** is the spine. Each seal opens with a `clip-path: polygon(...)` morph from a 28px circle into the full content rectangle, over 1200ms `cubic-bezier(.22, 1, .36, 1)`. The seal halves rotate slightly outward like wax fragments. The dropcap initial fades in last. - **`path-draw-svg`** — the lead engraving's mountain ridgeline draws itself stroke-by-stroke across 4500ms on first paint, easing out at the summit. Each section's inline diagram redraws (450ms) when its seal is opened, never before. - **`fade-reveal`** — body paragraphs fade in at 30% opacity → 100% over 800ms as their parent seal opens; absolutely no slide-up, no scale, no stagger. - **No `cursor-follow`. No `magnetic`. No `tilt-3d`. No `spring`. No `parallax`.** The corpus over-uses these (74–94% saturation each); economics.day refuses them. The only cursor reaction permitted is a soft 30%-opacity `#F5DCC4` candle-halo that follows the cursor *only when it is over a closed seal* — like a reading lamp held close. - **Reduced-motion** disables progressive-disclosure entirely and renders all eight sections pre-opened in their reading order. **Type-setting cues:** - Body paragraphs use `text-rendering: geometricPrecision` and `font-feature-settings: "lnum" 1, "kern" 1, "liga" 1`. Line length cap at 62 characters. - The masthead uses `font-variant-ligatures: discretionary-ligatures` so the Pinyon Script swash-tails connect properly. - Drop caps are real CSS `::first-letter` styled in `IM Fell DW Pica` at 64px, floated with 6 lines of body text wrapping around. - All small-caps in `Cormorant SC` use `letter-spacing: 0.06em`. **The mountain-as-chart engine (the soul of the page):** A small inline `