# Design Language for economics.day ## Aesthetics and Tone economics.day draws its visual identity from the physical spaces where economic thought was forged: the oak-paneled seminar rooms of the London School of Economics in the 1930s, the chalkboard-heavy lecture halls where Keynes debated Hayek, the burnished copper reading lamps of the Bodleian Library where Adam Smith's original manuscripts are stored under glass. The aesthetic is **corporate** in the original sense of the word -- "corpus," a body of knowledge made tangible -- not the sanitized SaaS corporate of gradient hero sections and stock-photo handshakes. This is the corporate of institutional weight: leather-bound ledgers with gilt-stamped spines, the dense columns of the Financial Times circa 1962, the precise ruled grids of double-entry bookkeeping invented in Renaissance Florence. The tone is **professional** -- not the performative professionalism of a LinkedIn carousel but the genuine professionalism of a discipline that takes its own rigor seriously. There is a deliberate gravitas here, a sense that the information being presented has been weighed and measured before being committed to the page. The mood is that of a well-lit research office at dawn: focused, unhurried, deeply competent. The site feels like opening a first-edition copy of Samuelson's "Economics" and finding the margins annotated in precise pencil by someone who understood every equation. Color temperature runs warm throughout -- not the warmth of comfort but the warmth of aged paper, tanned leather, oxidized copper, and the amber glow of incandescent light falling across mahogany. Every surface carries the implicit patina of accumulated knowledge. There is nothing cold, nothing chrome, nothing that suggests the data being presented is ephemeral. Economics.day treats economic data as what it is: the accumulated record of human decision-making across centuries. ## Layout Motifs and Structure The layout follows a **modular-blocks** architecture inspired by the structure of economic models themselves -- discrete, self-contained systems that interact through clearly defined inputs and outputs. The page is composed of rectangular content modules arranged on a 12-column grid, but unlike typical card-grid layouts, these modules have variable heights and widths that create a visual rhythm analogous to a balance sheet: some blocks are dense and narrow (a column of figures), others are wide and spacious (an explanatory narrative). The grid system uses **grid-lines** as a literal visual element. Thin rules in #C4A77D (oxidized brass) are visible at the column boundaries, extending the full height of the page, creating the impression of a ruled ledger or accounting worksheet. These lines are not merely structural -- they are decorative, part of the visual identity. Content blocks sit within and across these ruled channels, sometimes spanning 3 columns, sometimes 7, sometimes the full 12. The irregularity is intentional: it mirrors the way economic data resists neat categorization. **Module Types:** 1. **Data Blocks** -- Compact modules (3-4 columns wide) with a dark header bar (#4A3728, burnt umber) containing a label in geometric sans-serif, and a body filled with a single data visualization or key figure. These blocks have a 2px left border in #B87333 (copper). 2. **Narrative Blocks** -- Wider modules (7-9 columns) with generous padding (clamp(2rem, 4vw, 4rem)) containing long-form text. Background: #FAF3E8 (aged vellum). Text flows in two internal columns for blocks wider than 8 grid columns, mimicking the dual-column format of academic economic journals like the American Economic Review. 3. **Equation Blocks** -- Full-width modules (12 columns) with a centered mathematical expression or economic formula rendered in a serif italic, surrounded by generous whitespace. Background: #FFFDF5 (clean paper). These serve as visual punctuation between sections, the way an equation serves as punctuation in an academic paper. 4. **Index Blocks** -- Narrow sidebar modules (2-3 columns) that function as a running table of contents or key-figure sidebar, positioned along the right edge of the grid. These scroll independently (position: sticky) and provide persistent reference data. Vertical spacing between modules follows an 8px baseline grid, with gaps of 24px (3 units) between adjacent blocks and 64px (8 units) between major sections. The page reads top-to-bottom with no horizontal scrolling, but the variable block widths create visual horizontal movement that keeps the eye active. There is no traditional hero section. The page opens with a full-viewport moment: the domain name "economics.day" set against a field of faintly visible grid lines on a warm cream background, with a single economic indicator (a stylized yield curve or supply-demand intersection) rendered as a thin copper-colored SVG in the lower-right quadrant. The effect is that of opening a textbook to its title page. ## Typography and Palette **Typography:** - **Headlines / Module Titles:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with optically even strokes and a distinctly architectural quality. Its clean, slightly Art Deco letterforms evoke the titling on 1930s institutional buildings -- the kind of chiseled-in-stone typography you see above the entrance to a Federal Reserve branch. Weight 600 (SemiBold) for primary headings at `clamp(1.6rem, 2.5vw + 0.5rem, 2.8rem)`. Weight 300 (Light) for sub-headings at `clamp(1.1rem, 1.5vw + 0.3rem, 1.6rem)`. All headings set in #3B2F2F (espresso). Letter-spacing: 0.03em for headings, 0.06em for labels (creating a slightly expanded, authoritative feel). - **Body Text:** "Source Serif 4" (Google Fonts) -- a transitional serif designed for readability at extended lengths. Its moderate x-height and careful stroke modulation make it ideal for the kind of sustained analytical reading that economics demands. Weight 400 (Regular) for body text at `clamp(0.95rem, 1.1vw + 0.3rem, 1.15rem)`. Line-height: 1.72 (generous, to match the airy precision of academic typesetting). Color: #4A3F35 (dark walnut) for primary body text, #6B5E52 (medium walnut) for secondary/caption text. - **Data / Figures / Labels:** "DM Sans" (Google Fonts) -- a geometric sans with a humanist touch, highly legible at small sizes. Used for axis labels, chart annotations, figure captions, and table headers. Weight 500 (Medium) at `clamp(0.7rem, 0.8vw + 0.2rem, 0.85rem)`. All-caps with letter-spacing 0.08em for labels. Color: #8B7355 (tobacco) for axis labels, #B87333 (copper) for highlighted data points. - **Accent / Equations:** "Cormorant Garamond" (Google Fonts) -- italic weight 300 -- used exclusively for mathematical expressions, economic equations, and pull-quotes. Its delicate hairlines and classical proportions evoke the typesetting of academic journals from the mid-20th century. Size: `clamp(1.3rem, 2vw + 0.5rem, 2.2rem)` for display equations. **Palette:** The palette is **warm-earthy** -- drawn entirely from the natural materials of institutional economics: aged paper, tanned leather, oxidized copper, dark wood, and the warm amber of reading-lamp light. | Role | Color | Hex | Reference | |------|-------|-----|-----------| | Background (primary) | Aged Vellum | #FAF3E8 | The cream of economic journal pages | | Background (modules) | Warm Parchment | #F5EDE0 | Slightly warmer for data blocks | | Background (dark) | Espresso | #3B2F2F | Deep brown for header bars and inversions | | Background (equation) | Clean Paper | #FFFDF5 | Near-white for mathematical clarity | | Accent (primary) | Copper | #B87333 | Oxidized copper of institutional fixtures | | Accent (secondary) | Burnt Umber | #4A3728 | Dark leather binding | | Text (primary) | Dark Walnut | #4A3F35 | Rich, warm black for body text | | Text (secondary) | Medium Walnut | #6B5E52 | For captions and secondary information | | Text (labels) | Tobacco | #8B7355 | Warm mid-tone for data labels | | Grid Lines | Oxidized Brass | #C4A77D | Visible column rules | | Highlight | Terracotta | #C67A4A | For interactive states and emphasis | | Indicator (positive) | Sage Green | #7A8B6A | Economic growth / positive trends | | Indicator (negative) | Dusty Rose | #A85C5C | Contraction / negative trends | No pure blacks or whites appear anywhere. The darkest value is #3B2F2F; the lightest is #FFFDF5. This constrained value range creates a sense of warmth and cohesion that feels like looking at a page through amber glass. ## Imagery and Motifs **Data Visualization as Primary Visual Language:** All imagery on economics.day consists of **data-viz** -- specifically, the visual language of economic charts reinterpreted as aesthetic objects rather than purely informational graphics. These are not standard Chart.js bar graphs or off-the-shelf D3 dashboards. They are hand-crafted SVG compositions that treat economic data the way a calligrapher treats letterforms: with attention to the beauty of the line itself. Visualization styles include: - **Supply-Demand Curves:** The iconic X-shaped intersection rendered as flowing Bezier curves in copper (#B87333) against cream (#FAF3E8), with the equilibrium point marked by a small filled circle. These appear as decorative elements in Equation Blocks, scaled to fill the space like a piece of abstract art. - **Yield Curves:** Smooth, ribbon-like curves that arc across full-width blocks, rendered with a gradient stroke that shifts from sage green (#7A8B6A) to dusty rose (#A85C5C) to indicate the transition from short-term to long-term rates. No axes visible -- these are purely expressive. - **Lorenz Curves:** The curve of inequality rendered as a thick copper stroke below the 45-degree line of perfect equality (rendered as a thin dashed line in #C4A77D). The area between them is filled with a semi-transparent terracotta (#C67A4A at 0.08 opacity). - **Time Series:** Long horizontal sparklines that run across the bottom of Narrative Blocks, rendered in a single color (#8B7355, tobacco) at 1px weight, with subtle area fills below the line at 0.04 opacity. These represent real or abstracted economic time series and serve as visual footers for text blocks. **Grid-Line Motifs:** The visible column grid lines extend beyond their structural role into a decorative system. At the top and bottom of each major section, the grid lines fan outward at slight angles (2-3 degrees), creating a subtle vanishing-point perspective effect that implies depth -- as if the data extends infinitely in both directions. Where grid lines cross section boundaries, small diamond-shaped nodes appear at the intersections, rendered in copper (#B87333) at 4px diameter. These nodes pulse gently on scroll (a 1.5-second opacity cycle from 0.3 to 0.8), creating a sense of the grid as a living system. **Ruled-Line Accents:** Horizontal rules (1px, #C4A77D) appear below every heading and above every data block, mimicking the ruled lines of a ledger. In Narrative Blocks, the first line of each paragraph is separated from the heading by a double rule (two lines 3px apart), referencing the double-entry bookkeeping tradition that is the foundation of modern accounting and economics. **No Photographs. No Icons. No Illustrations.** The visual language is entirely typographic, linear, and data-driven. Where other sites might use a hero image, economics.day uses a large-scale data visualization. Where others use icons, economics.day uses small inline SVG chart fragments. The entire visual identity is built from text, numbers, lines, and curves -- the fundamental materials of economic communication. ## Prompts for Implementation **Full-Screen Narrative Experience:** economics.day opens to a full-viewport title sequence. The background is #FAF3E8 (aged vellum). Faint vertical grid lines (#C4A77D at 0.15 opacity) are visible across the full width, spaced at 12-column intervals. The domain name "economics.day" fades in letter by letter (fade-reveal animation, 80ms per character, using Josefin Sans weight 300 at `clamp(3rem, 6vw + 1rem, 5.5rem)`) positioned at 35% from the top, left-aligned to the 2nd grid column. Below the domain name, a thin horizontal rule draws itself left-to-right (800ms, ease-out). Below the rule, a subtitle in Cormorant Garamond italic: "The study of how societies allocate scarce resources" fades in after a 400ms delay. In the lower-right quadrant (columns 8-11, bottom 30% of viewport), a supply-demand curve SVG draws itself with a path-draw animation: the demand curve first (left-to-right, 1200ms), then the supply curve (right-to-left, 1200ms), with the equilibrium point appearing last as a filled copper circle that scales from 0 to 1 (300ms, spring easing). **Fade-Reveal Animation System:** The primary animation pattern is **fade-reveal** -- elements emerge from transparency rather than sliding in from offscreen. This is a deliberate philosophical choice: economic data does not arrive from somewhere else; it is revealed as you look closer. Implementation: - All content blocks begin at `opacity: 0; transform: translateY(12px)` and transition to `opacity: 1; transform: translateY(0)` when they enter the viewport (IntersectionObserver at threshold 0.15). - Transition timing: 600ms with `cubic-bezier(0.25, 0.1, 0.25, 1.0)` (gentle deceleration). - Stagger: When multiple blocks enter the viewport simultaneously, they reveal sequentially with a 120ms offset between each block, left-to-right then top-to-bottom. - Data visualizations within blocks have their own secondary fade-reveal: the axes appear first (200ms), then the gridlines (200ms delay), then the data marks/lines (400ms delay). This staged reveal mimics the experience of reading a chart -- you orient yourself with the axes before interpreting the data. **Grid-Line Breathing Animation:** The visible column grid lines are not static. They pulse with a slow "breathing" animation: their opacity cycles between 0.08 and 0.20 over a 6-second period (`animation: breathe 6s ease-in-out infinite`). Different columns are offset in their cycle by 0.5 seconds each, creating a subtle wave effect that moves left-to-right across the page. This is barely perceptible -- it registers as ambient life rather than distracting motion. The animation pauses when any content block is in active scroll, resuming 1 second after scroll stops. **Interactive Data Visualizations:** All SVG data visualizations respond to hover/touch. When the user hovers over a supply-demand curve, the equilibrium point expands and a tooltip appears (fade-in, 200ms) showing the coordinates in DM Sans. Lorenz curves reveal their Gini coefficient on hover. Time-series sparklines expand vertically on hover to show more detail, with the vertical scale doubling over 300ms (ease-out). All interactive states use the terracotta highlight (#C67A4A) as the active color. **Scroll-Linked Progress Indicator:** A thin horizontal line (2px, #B87333 copper) at the very top of the viewport fills left-to-right as the user scrolls, indicating reading progress. This is not a standard scroll progress bar -- it is rendered as a time-series line that has tiny fluctuations (a procedurally generated random walk overlaid on the linear progress), so it looks like a stock price chart rather than a smooth fill. The fluctuations are seeded deterministically so they are consistent across visits. **Section Transitions:** Between major sections, a full-width horizontal rule (1px, #C4A77D) draws itself left-to-right over 500ms as it enters the viewport. Small diamond nodes at each grid-column intersection appear with a 60ms stagger, creating a pointillistic dotted-line effect before the full rule connects them. **AVOID:** - CTA-heavy layouts with "Get Started" or "Sign Up" buttons - Pricing blocks or tier comparison tables - Stat-grids with big numbers in circles (the data visualizations here are richer and more narrative) - Hero images or background photography - Gradient backgrounds or glassmorphic cards - Parallax scrolling (the modular-block grid should feel grounded, not floating) - Neon colors, dark mode aesthetics, or anything that suggests fintech startup culture **PREFER:** - Long-form reading experiences with clear typographic hierarchy - Data visualizations that reward close attention - Subtle ambient animation that suggests a living document - The warmth and weight of physical materials (paper, copper, wood, leather) - Academic rigor expressed through visual precision ## Uniqueness Notes **Differentiators from other designs:** 1. **Economic Data-Viz as Aesthetic Foundation:** No other design in the portfolio uses data visualization as its primary visual language. While the data-viz imagery category sits at only 2% frequency, economics.day makes it the entire basis of the visual identity -- supply-demand curves, Lorenz curves, yield curves, and sparklines replace all conventional imagery. These visualizations are treated as aesthetic objects (like abstract art) rather than informational tools, creating a visual language that is simultaneously beautiful and intellectually meaningful. 2. **Visible Structural Grid as Decorative Element:** The grid-lines motif (5% frequency) is used here not as a background pattern but as a fully visible architectural element -- the oxidized-brass column rules are always present, always visible, and they animate (breathing, node-pulsing). This transforms the page layout's skeleton into a design feature, which no other design in the portfolio attempts. The grid lines are the visual equivalent of exposed-brick architecture: structure made decorative. 3. **Warm-Earthy Institutional Palette Without Nature References:** The warm-earthy palette (3% frequency) is typically associated with organic/natural themes (forests, soil, ceramics). economics.day recontextualizes these colors as institutional materials -- not earth and wood as natural elements, but earth and wood as the manufactured materials of institutional spaces (leather bindings, copper fixtures, mahogany desks, vellum paper). This creates a warm palette that feels authoritative rather than rustic. 4. **Typography as Economic Language:** The four-font system (Josefin Sans for titles, Source Serif 4 for body, DM Sans for data, Cormorant Garamond for equations) mirrors the multiple registers of economic communication: institutional announcements, analytical prose, quantitative data, and mathematical formalism. No other design assigns specific fonts to specific types of content with this level of semantic precision. 5. **Fade-Reveal as Epistemological Metaphor:** The fade-reveal animation pattern (7% frequency) is used here with a specific conceptual justification: economic data is not delivered, it is discovered. The staged reveal of charts (axes first, then gridlines, then data) teaches the user to read a visualization the way an economist reads one -- structure before content. This pedagogical animation approach is unique in the portfolio. **Documented Seed/Style:** aesthetic: corporate, layout: modular-blocks, typography: geometric-sans, palette: warm-earthy, patterns: fade-reveal, imagery: data-viz, motifs: grid-lines, tone: professional **Avoided Patterns (from frequency analysis):** - playful aesthetic (98% -- massively overused) - centered layout (99% -- default everywhere, deliberately avoided here) - scroll-triggered pattern (98% -- replaced with fade-reveal) - mono typography (99% -- no monospace fonts in this design) - friendly tone (97% -- replaced with professional tone) - parallax pattern (78% -- deliberately excluded; the modular-block grid should feel solid and grounded) - vintage motifs (72% -- the warm materials here are institutional, not nostalgic) - photography imagery (66% -- entirely absent; data-viz replaces all photography)