# Design Language for economic.day ## Aesthetics and Tone economic.day is **The All-Night Diner at the End of the Trading Day** — a glassmorphic, hand-lettered, neon-drenched late-shift visual essay that looks the way a friendly bartender talks about money after the markets have already closed and the only light left is the buzz of the open sign and the soft blue gleam of a bus-stop shelter across the street. The premise: the global economy is a 24-hour diner that never closes, and this is the booth in the back corner where someone has spread their handwritten notes across the laminate table — receipts, indices, pencil-drawn supply curves, a cocktail napkin with a wage equation on it — all illuminated by a low pendulum lamp filled with motion. The visitor is invited to slide into the booth, push aside the menu, and read the notes. The tone is **friendly** (15% in the corpus, comfortably mid-band but rendered here in a register that very few designs use — *late-shift friendly*, the friendliness of the third-shift waitress who refills your coffee without being asked). There is no jargon. There is no prediction. There is no chart that points up and to the right. Where every economics site in the visible world is either Bloomberg-grim or Robinhood-gamified, economic.day is the third option that almost nobody attempts: **a calm, hand-lettered, slightly conspiratorial, slightly tender conversation about the economy as a thing that happens to people on a Tuesday**. The voice writes "rent went up" before it writes "CPI rose." It writes "the bank is asleep" before it writes "M2 contracted." Headlines are scrawled in a soft handwritten script across the glass panels of the diner; the long-form text is set in a calm humanist body face that reads like a friend explaining something patiently across the table. The aesthetic spine is **glassmorphism** (68% in the corpus — heavily used, but here recast deliberately against the grain) executed in a **dark-neon palette** (4% in the corpus — almost virgin) and crossed with **handwritten typography** (35% — used here in a much more intimate way than the usual blog-banner) and **circuit motifs** (5% — almost untouched). The tension between these four is the whole point: glassmorphism normally lives in a bright corporate SaaS dashboard; here it is the condensation on the back of the diner's neon-lit window at 2am. Handwriting normally lives on a bakery site; here it is the quick scrawl of a tired economist working out a budget on a paper place-mat. Dark-neon normally lives on a crypto-bro landing page; here it is the soft cyan-and-magenta wash of a half-broken open-24-hours sign reflected on a wet sidewalk. Circuit motifs normally live on a chip-fab marketing page; here they are the faint copper-trace patterns running underneath the diner's glass tabletop, visible only when you press your face close. Crucially, **none of the four planned-seed elements are used in their default register**. Glassmorphism becomes condensation and neon-window-haze, not card-overlay UI. Handwriting becomes booth-side scrawl, not display banner. Dark-neon becomes diner-sign-glow-on-wet-asphalt, not synthwave grid. Circuits become copper-trace placemat patterns, not abstract tech wallpaper. The site refuses every cliché of the economics category: no candlestick chart, no DXY ticker, no Wall Street stock photography, no green-and-red arrows, no bull-and-bear icons, no roll-counter for "trillions tracked." What appears instead is **a single long booth-table viewed from across the booth, scrolled through as if you were leaning forward to read each scrap of paper on it in turn**, while the neon outside the window pulses gently and a slow parallax of streetlights drifts past the glass. ## Layout Motifs and Structure The composition is **parallax-sections** (1% in the corpus, almost completely unused — chosen for that reason and because it is the perfect mechanical fit for the metaphor of "the visitor leans across the booth and the world outside the window slides past"). The screen is a single full-bleed booth interior, scrolled vertically through nine parallax tiers, with the diner window forming the back wall of every section and the booth table forming the foreground. The nine parallax tiers, from back to front, each scrolling at a different rate: 1. **The Wet Street** (0.62× scroll) — a hand-painted SVG of a rain-slicked sidewalk, full of soft reflected neon smears in cyan and magenta, drifting laterally as the visitor scrolls down. 2. **The Crosswalk Buses** (0.74× scroll) — three slow-moving silhouette buses that cross the diner window during the long scroll, each carrying a single hand-lettered word on its destination marquee (*WAGES*, *PRICES*, *RENT*). 3. **The Open-24-Hours Sign** (0.84× scroll) — the iconic neon "OPEN" sign hanging in the diner window, flickering with a 0.4-second irregular pulse, casting cyan-magenta light onto every layer in front of it. 4. **The Window Glass** (0.92× scroll) — the actual glass plane of the window, with rain-streaks, a faint ghost-reflection of the booth interior, and a single condensation handprint in the lower-right corner that fades in over twelve seconds when the visitor first arrives. 5. **The Pendant Lamp** (1.00× scroll, locked to viewport) — a single brass pendant lamp hanging directly over the booth, its frosted-glass shade containing a slow swirl of glassmorphic vapor; this is the only element that does not move with parallax, providing a fixed anchor for the whole composition. 6. **The Booth Booth** (1.06× scroll) — the high red-vinyl booth-back behind the table, slightly cracked, with a single coat-hook visible at the corner. 7. **The Table Surface** (1.14× scroll) — the laminate booth-table, viewed in oblique perspective, covered in nine hand-arranged scrap-paper tiles; this is where 90% of the content actually lives. 8. **The Scattered Receipts** (1.22× scroll) — a procession of small receipt-strip glass panels that drift very slightly as the visitor scrolls, each holding a one-line economic anecdote. 9. **The Coffee Cup Steam** (1.30× scroll) — a single SVG steam plume rising from a half-empty coffee cup at the visitor-side of the booth, generated procedurally with three sine-summed noise paths, drifting upward and slightly toward the visitor as they scroll. **Section structure on the table layer (Tier 7), reading top-to-bottom:** 1. **The Place-Mat** — the opening hand-lettered statement, scrawled in dark-neon cyan ink across a paper place-mat, with faint copper-trace circuit lines visible underneath the paper as if printed on the table beneath it. 2. **The Index Card on Wages** — a single 3×5 index card pinned with a stick of butter, holding three handwritten lines about what a wage actually is. 3. **The Cocktail Napkin Equation** — a paper napkin with a hand-drawn supply-and-demand sketch, but the curves are labeled "MOM" and "RENT" instead of S and D, and they cross at a point labeled "the kitchen table." 4. **The Receipt Cascade** — eleven small CVS-style receipt strips arranged in an asymmetric fan, each one carrying a single line-item economic observation (the price of milk in 1994; the price of milk now; the gap; etc.). 5. **The Folded Letter** — a single airmail-paper letter, half-folded, half-glassmorphic-translucent, addressed to the reader, three paragraphs long. 6. **The Tip Jar** — a small glass jar full of soft-glowing coins, where the coins are tiny circuit-stamped tokens; on hover, one coin rises out of the jar and rotates slowly. 7. **The Last Word** — a final hand-lettered phrase scratched directly into the laminate of the table, in small letters, that the visitor has to lean in to read. **Spatial relations:** every paper element on the table tier is rotated by a small irregular angle (between -4° and +5°) so the surface feels arranged by a tired hand, not a designer. The whole table surface tilts in oblique perspective at a fixed -8° rotateX, which gives the booth its depth without requiring any 3D rendering. The diner window above the booth occupies the upper 38% of the viewport at all times; the booth interior occupies the middle 22%; the table surface occupies the lower 40%. This 38/22/40 split is intentional and load-bearing — it places the visitor at the booth's eye level, looking up and out, and it lets the neon do the lighting work. **Scroll behavior:** smooth parallax across the nine tiers using `IntersectionObserver` and CSS custom properties updated in a single `requestAnimationFrame` loop. **No `scroll-snap` and no fullscreen sections** — the page reads as one long booth-side scroll. Within the table tier, micro-interactions are restrained: each paper element responds with a **scale-hover** transform (the planned-seed pattern, used at 2% in the corpus and almost entirely untouched in this register), scaling to 1.04× and rising 4px on hover with a 320ms cubic-bezier(0.22, 1, 0.36, 1) ease. No magnetic, no cursor-follow, no tilt-3d, no spring. The cursor is allowed to be a cursor — but every paper scrap rises a little when you point at it, the way a bartender slides a coaster a half-inch closer when you settle in. ## Typography and Palette **Typography — handwritten as the lead voice (35% in the corpus, but used here in a character almost no other site has tried — *late-shift handwriting*, not *bakery handwriting*).** The site builds its voice on three Google Fonts handwritten faces, each cast for a specific role, paired with one calm humanist body face for the long-form passages. - **`Caveat`** (Google Fonts, variable wght 400–700) — the lead handwritten voice, used for the section headlines and the place-mat opener. A modern handwriting face by Impallari Type with confident downstrokes and a slight forward tilt. Used at clamp(2.4rem, 5.6vw, 4.4rem) for headlines, in dark-neon cyan ink, with letter-spacing 0 and line-height 1.2. The forward tilt is the design's subtle motion: every headline already feels like it is leaning toward the visitor. - **`Shadows Into Light Two`** (Google Fonts) — used for the index card, the cocktail napkin equation labels, the receipt-strip line-items, and the last-word scratch. A thinner, scrappier handwriting face that reads as a tired economist's quick scrawl, not a calligrapher's display piece. Used at 18–22px in muted-coral ink for the receipts and in pale-mint ink for the napkin curves. - **`Caveat Brush`** (Google Fonts) — used **once and only once**, on the tip-jar coin labels, where it gives the impression that someone has marked each token by hand with a thick felt-tip pen. One face, one weight, one place. Scarcity is the design. - **`Lora`** (Google Fonts, variable wght 400–700, ital) — the calm body voice for the folded letter, the long paragraphs that don't belong on a scrap of paper. A serif by Cyreal with calligraphic warmth and steady text-color, set at 17px / 1.7 / -0.005em on the airmail-paper background. The letter is the design's one moment of typographic stillness — three paragraphs, no scrawl, just a friend writing carefully in a quiet voice. **Type rules:** the place-mat headline is set in `Caveat 700` at 5.4vw with a hand-drawn underline-stroke that is itself a 2px SVG path (not a CSS underline), drawn with a faint waver in the line. Body paragraphs in the folded letter never exceed 58 characters per line. Receipt-strip text is monospace-aligned to the right edge of each strip, the way a real receipt aligns prices, but the *labels* are handwritten and the *numbers* are tabular-figure `Lora` — a deliberate hybrid that mirrors the design's whole thesis (the human story on the left, the cold number on the right). All handwritten ink colors are slightly transparent (88% opacity) so the paper texture beneath shows through faintly, the way real ink on real paper does. **Palette — dark-neon (4% in the corpus, almost untouched).** Nine colors, all calibrated to the specific lighting of a 2am diner where the only light sources are a buzzing neon sign, a brass pendant lamp, and the streetlights leaking through rain-streaked glass. - `#0A0E1A` — **asphalt-black** (the wet-street base color, the deepest layer of the parallax stack) - `#141826` — **booth-shadow** (the unlit corners of the booth interior, the fallback page background) - `#1E2438` — **midnight-vinyl** (the booth-back upholstery, the table laminate base) - `#2B3450` — **window-haze** (the slightly lighter band of glass-glow at the bottom of the window where condensation collects) - `#22D3EE` — **open-sign cyan** (the dominant neon-glow color, used for the OPEN sign, the place-mat ink, and the steam-plume) - `#F472B6` — **lipstick-magenta** (the secondary neon, used for the bus-marquee letters, the wet-street reflection highlights, and the link underlines) - `#FCD34D` — **brass-lamp warm** (the warm pendant-lamp glow, used very sparingly — only the lamp's halo and the butter-stick that pins the index card) - `#A7F3D0` — **menthol-mint** (the napkin-equation pencil-stroke color and the tip-jar token glow, used as a third accent) - `#FBF1C7` — **paper-cream** (the only warm light value, used for all paper-scrap surfaces — place-mat, index card, napkin, receipts, letter) The palette refuses every economic-site cliché: no green-up, no red-down, no Wall-Street-blue, no gold-bar yellow. It is a **palette borrowed from the inside of a diner at 2am in the rain**, and that borrowing is the whole point. **Glassmorphism rules.** Glassmorphic surfaces in this design are **not** the typical white-on-color blurred card. They are condensation. The window-glass tier uses `backdrop-filter: blur(8px) saturate(1.4)` with a 6%-opacity `#FBF1C7` overlay and a soft 1px inner-stroke in `#22D3EE` at 18% opacity — the result is a pane of glass with neon haze caught in its condensation, not a UI card. Receipt-strip overlays use the same blur but at 4px and with the lipstick-magenta inner-stroke. The folded letter uses a slightly different recipe: `backdrop-filter: blur(2px)` with no overlay, so the airmail paper feels translucent enough to show the table beneath without being fully glassy. ## Imagery and Motifs **Imagery — noise-texture (3% in the corpus), used at three distinct scales across the entire site.** No photography, no 3D render, no AI-raster, no stock vector. The whole page is built from inline SVG and CSS gradients, with three independent noise layers performing three different jobs: 1. **The Asphalt Grain** — a 320×320 SVG `feTurbulence` (baseFrequency 0.78, numOctaves 2) tiled across the wet-street tier at 18% opacity, giving the asphalt its rain-slick mottle. 2. **The Paper Tooth** — a finer SVG `feTurbulence` (baseFrequency 1.6, numOctaves 1) applied as a 12%-opacity multiply layer on every paper-scrap element (place-mat, index card, napkin, receipts, letter), giving each scrap the faint tooth of real paper held at a slant. 3. **The Window Condensation** — a slow-animated SVG noise (baseFrequency 0.12 → 0.18 across an 80-second loop) at 8% opacity on the window-glass tier, creating the impression of condensation slowly forming and reforming as the night goes on. **Decorative motif — circuit (5% in the corpus, almost untouched).** Below the place-mat, faintly visible through the paper as if printed on the laminate table beneath it, runs a procedurally-generated copper-trace circuit pattern. The traces are not abstract — they are wired between four small "components" arranged at the cardinal points of the place-mat: a tiny labeled dot reading *labor*, a tiny labeled dot reading *capital*, a tiny labeled dot reading *land*, and a tiny labeled dot reading *time*. The traces between these four nodes form a loop, with the *time* node visibly pulsing once every six seconds, sending a 2px-wide bright-cyan pulse traveling along each trace in turn — the pulse is implemented as a single SVG `` with `` along the trace path, repeated four times with different `begin` offsets. This is the design's quietest and most idiosyncratic gesture: an economic-cycle diagram hidden under the place-mat, visible only because the paper is slightly translucent and the light is right. **The collage cast (each appears once across the seven table-tier sections):** - **The Place-Mat** — a 4:3 cream paper rectangle with a printed border in faded brick-red (the only color in the entire site that is not in the palette, used at 6% opacity to feel ghosted), beneath which the circuit-trace economic-loop pulses. - **The Index Card** — a white 3×5 card with a single faint blue rule-line, pinned by a pat of butter rendered as a small SVG with an `feGaussianBlur` highlight; the butter melts very slowly (3% scale shrink across 40 seconds) and reforms when the card is hovered. - **The Cocktail Napkin** — a folded-corner paper napkin with the supply-and-demand sketch drawn in pale-mint ink that is itself an SVG path with `stroke-dasharray` animation drawing the curves on first reveal in 1.4 seconds total. - **The Receipt Fan** — eleven receipt-strips, each with a faint lipstick-magenta header, each at a different rotation; the fan spreads slightly when the visitor scrolls past it (a 0.3-second once-only animation triggered by `IntersectionObserver`). - **The Folded Letter** — airmail paper with a red-and-blue striped border, half-folded so only three paragraphs are visible; the unfolded portion lifts on hover (a scale-hover variant — the paper rises 8px and rotates +1° on the y-axis, briefly). - **The Tip Jar** — a faceted glass jar in `backdrop-filter: blur(3px)`, half-full of small token-coins each stamped with a tiny circuit motif; on jar-hover, one random coin levitates 12px out of the jar and rotates slowly through 360° over 4 seconds before settling back. - **The Last Word** — a hand-scratched phrase in the laminate of the table, set in `Shadows Into Light Two` at 14px in `#2B3450` (windowhaze, almost the same value as the laminate), so it reads only when the visitor is close enough to lean in. This is the design's quietest line and it is meant to be missable. **The neon-sign render.** The OPEN sign at parallax tier 3 is a single SVG with two `` elements stacked: a back layer with a heavy 8px Gaussian-blur in `#22D3EE` to provide the neon-halo glow, and a front layer with a sharp 1px stroke in the same cyan to provide the tube. The sign flickers via a 12-frame keyframe with irregular timing (0%, 4%, 4.2%, 5%, 100% — three flicker events per ten seconds). The flicker is the design's only timing-based animation that is deliberately uneven; everything else moves on a metronome. The flicker is what makes the site feel alive and slightly tired at the same time. ## Prompts for Implementation **Storytelling spine (HTML structure):** The site is a **single long parallax-scrolling document** with no traditional navigation, no menu, no logo wall, no CTA, no pricing block, no stat-grid, no testimonial section, no logo carousel, and no footer beyond a single hand-lettered colophon. The entire experience is read top-to-bottom in approximately five to seven minutes and is designed to leave the visitor feeling that they had a calm conversation about the economy with a friend, and that the conversation respected their intelligence and their time. ```
``` **No React. No Vue. No Svelte. No bundler. No build step. No npm.** The entire site is one HTML file, one CSS file, one small ES module of approximately 130 lines, and a `collage/` directory of inline-SVG assets for the place-mat, the receipts, the napkin sketch, the letter, the tip jar, the lamp, the buses, the sign, and the steam. Total payload under 110KB on cold cache, including all four Google Fonts loaded with `font-display: swap`. **CSS techniques to use:** - CSS custom properties for the nine palette colors (`--asphalt-black`, `--open-sign-cyan`, etc.) declared on `:root`. - A single `transform: translate3d(0, calc(var(--scroll-y) * var(--rate)), 0)` per tier, with `--scroll-y` updated once per `requestAnimationFrame` from a single passive scroll listener and `--rate` set per tier from the `data-rate` attribute via a small init script. - `backdrop-filter` for all glassmorphic surfaces (window-glass, receipt-strips, tip-jar, folded-letter) with documented fallbacks for browsers that do not support it (a flat fallback color from the palette, no graceful blur). - `aspect-ratio` for every paper-scrap element so the booth-table holds its proportions across viewport widths. - One single `` element per noise-layer with an `` containing `feTurbulence` + `feColorMatrix` (to push the grain into the dark-neon palette range, not pure black/white). - A `prefers-reduced-motion` media query that *completely* disables the parallax (every tier locks to `--rate: 1`), the OPEN-sign flicker (locked to "on"), the circuit-trace pulse, the steam-plume drift, the receipt-fan spread animation, and the butter-melt loop. The site must remain readable and emotionally legible without motion. - `mix-blend-mode: screen` very sparingly — only on the OPEN-sign halo and the wet-street neon-reflection layer — to let the cyan and magenta lift through the dark base without sitting on top of it. **JS responsibilities (intentionally small):** 1. A single passive `scroll` listener that writes the current scroll offset into a CSS custom property `--scroll-y` once per animation frame. No per-tier listeners. 2. An `IntersectionObserver` that triggers the receipt-fan spread, the napkin SD-curve draw, and the letter's first-arrival fade, each once. 3. A single `requestAnimationFrame` loop that updates the OPEN-sign flicker phase using a deterministic PRNG seeded from the current minute (so the flicker is the same for everyone in the same minute, and gently different across minutes). 4. The circuit-trace pulse uses pure SVG ``; no JS required. 5. The steam-plume uses CSS keyframes on three stacked SVG paths; no JS required. **No fetch. No analytics. No third-party scripts. No cookies. No service worker. No WebGL. No canvas (the steam is SVG, the noise is SVG-filter, the circuit is SVG).** The site is self-contained and respectful of attention. **Animation timings (carefully tuned for the late-shift friendly tone):** - Scale-hover on paper scraps: 320ms `cubic-bezier(0.22, 1, 0.36, 1)`, scale 1.04, translateY -4px. - Folded-letter lift: 480ms `cubic-bezier(0.22, 1, 0.36, 1)`, scale 1.02, rotateY +1°, translateY -8px. - Tip-jar coin-rise: 4000ms total — 1200ms rise / 2200ms rotate / 600ms settle, all `ease-in-out`. - Receipt-fan spread: 280ms `ease-out`, once per session, on first scroll-into-view. - OPEN-sign flicker: irregular keyframe across a 10-second loop, three flicker events. - Circuit-trace pulse: 6000ms `linear`, infinite, with four offset-staggered pulses. - Steam-plume drift: 14000ms `linear`, infinite. - Butter-melt loop: 40000ms `ease-in-out alternate`. - Window-condensation noise: 80000ms baseFrequency animation. - Smooth-scroll between paper scraps when triggered by a keyboard shortcut: disabled — the visitor scrolls at their own pace. **Tone-of-voice rules (load-bearing):** - No exclamation points anywhere on the site. - No word "seamless," "powerful," "revolutionary," "innovative," "robust," "leverage." - No prediction, no forecast, no chart pointing up. - Every economic concept introduced via a kitchen-table metaphor first, the technical term second, in parentheses. - Exactly four em-dashes per scrap-section, placed deliberately for breath. - The folded-letter must address the visitor as *you*, sign off as *the diner*, and never name itself. - The last-word scratched in the laminate is the only place the word *economy* appears on the page. **AVOID, deliberately:** CTA-heavy sections, pricing blocks, stat-grids, logo walls, testimonial blocks, hero-dominant layouts, candlestick charts, ticker-tape, animated counters that count up, bull-and-bear icons, briefcase icons, dollar-sign icons, gold-bar icons, hand-shake stock photography, "Get Started," "Learn More," "Sign Up," "Subscribe to Newsletter," and every word in the standard SaaS marketing register. None of these appear on the page. Their absence is the design. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Parallax-sections at 1% adoption + nine-tier deep-Z parallax.** Almost no other design uses parallax-sections as its primary structural metaphor; this design uses nine independent parallax tiers (street / buses / sign / glass / lamp / booth / table / receipts / steam) to build a coherent diner-interior diorama, treating parallax as architecture rather than decoration. 2. **Dark-neon at 4% adoption + diner-window-at-2am register.** Where the other dark-neon designs go cyberpunk or synthwave, this one goes *late-shift diner* — neon as condensation-glow on rainy glass, not as gridline-on-purple-haze. 3. **Glassmorphism at 68% adoption recast as condensation.** The glass surfaces here are not UI cards; they are the actual back wall of the diner window, the airmail-paper letter, the faceted tip-jar, and the receipt-strips. Glassmorphism becomes physical glass instead of visual chrome. 4. **Handwritten typography at 35% adoption recast as booth-side scrawl.** Three handwriting Google Fonts cast for three distinct hands (confident headline scrawl in Caveat, tired-economist scrawl in Shadows Into Light Two, felt-tip coin-mark in Caveat Brush), against a humanist serif body voice (Lora) that no economics site uses. 5. **Circuit motif at 5% adoption recast as economic-cycle-loop under the place-mat.** The circuit traces are wired between *labor / capital / land / time* nodes and pulse on a six-second economic-cycle metaphor, not as abstract tech wallpaper. 6. **Scale-hover at 2% adoption used as "the bartender slides a coaster closer."** Scale-hover is almost untouched in the corpus; here it is the entire micro-interaction language of the page, used once per paper-scrap and tuned to feel like attention rather than feedback. 7. **Noise-texture at 3% adoption used at three independent scales** (asphalt / paper-tooth / window-condensation), each with its own baseFrequency and opacity. 8. **Friendly tone at 15% adoption rendered in the rare *late-shift* register** — not the bakery-friendly default, but a calm, slightly conspiratorial, slightly tender economist's voice that is essentially absent from the rest of the corpus. 9. **The economics category re-imagined as a diner**, with no ticker, no candlestick, no Wall-Street stock photography, no green-and-red arrows, no bull-and-bear iconography, no "trillions tracked" counter, and no CTA whatsoever — a category-refusal that almost no other economics-domain design in the corpus attempts. **Avoided patterns from frequency analysis:** photography (98%), full-bleed-with-card-grid (92%/81%), parallax-as-decoration (94%) used here as parallax-as-architecture instead, cursor-follow (82%), spring (80%), stagger (75%), magnetic (74%), warm gradients (97%/97%), mono-as-dominant-typography (95%), and the entire SaaS/dashboard/centered/card-grid layout vocabulary. **Chosen seed:** aesthetic: glassmorphism, layout: parallax-sections, typography: handwritten, palette: dark-neon, patterns: scale-hover, imagery: noise-texture, motifs: circuit, tone: friendly — executed against the grain of every default register, recast as a 2am diner conversation about money.