# Design Language for economic.wiki ## Aesthetics and Tone economic.wiki inhabits the visual world of a private reading room in a 19th-century economics faculty -- the kind of place where Adam Smith's marginalia sits under glass, where bound volumes of The Quarterly Journal of Economics line mahogany shelves in date order, and where the afternoon light falls through leaded-glass windows onto pages dense with supply-and-demand curves drawn in India ink. The aesthetic is **light academia**: not the aspirational TikTok version of plaid skirts and coffee shops, but the genuine article -- the worn leather of a chair that has held three generations of scholars, the particular ivory of handmade paper that has yellowed just enough to feel precious, the quiet authority of knowledge accumulated over centuries and distilled into precise, elegant prose. The tone is **scholarly-intellectual** without being forbidding. This is the voice of a brilliant professor who lectures without notes, who makes Ricardo's comparative advantage feel like a revelation, who draws connections between Keynes and Kant with the ease of someone who has lived inside both. There is warmth here, but it is the warmth of intellectual generosity, not casual friendliness. Every visual choice communicates: *this knowledge matters, and it is presented with the care it deserves.* The mood draws from specific sources: the typography of Penguin's Pelican imprint from the 1960s (those iconic blue-and-white covers that made economics accessible without dumbing it down); the layout sensibility of The Economist's print edition (dense but never cluttered, authoritative but never pompous); the material quality of a Moleskine notebook filled with careful annotations; and the spatial feeling of the reading room at the British Museum -- vast knowledge contained within human-scale architecture. ## Layout Motifs and Structure The layout follows an **editorial-flow** architecture inspired by the physical page layout of academic journals and intellectual magazines. Content moves in a continuous vertical river, but unlike a simple single-column blog, it employs structured rhythm changes that create visual breathing and intellectual pacing. **The Folio System:** The primary content area occupies a 680px measure (optimal for long-form reading in Garamond at 19px), positioned with a deliberate rightward bias -- roughly 55% from the left edge of the viewport on desktop. This asymmetry mirrors the traditional book spread where the text block sits toward the outer edge, leaving the inner gutter for binding. The left margin becomes a **scholarly margin** -- a 240px column reserved for sidenotes, marginal annotations, pull quotes, and small diagrams. This is not a sidebar in the navigation sense; it is a marginalia column, appearing and disappearing as the content demands, like handwritten notes in a professor's personal copy of a textbook. **Rhythm Architecture:** Content alternates between three distinct section types, each with its own spatial personality: 1. **Exposition Blocks** -- Standard editorial flow. The 680px text column with Garamond body text, sidenotes in the margin column. Generous line-height (1.72) and paragraph spacing (1.4em margin-bottom). These blocks feel like reading a well-typeset book page. 2. **Theorem Panels** -- Full-viewport-width sections that break the reading column to present key concepts, definitions, or data. These panels use a deep jewel-tone background (#1B3A4B on navy, #4A1942 on amethyst, or #2D3A1E on forest) with centered display text in EB Garamond at 2.8rem. They function like the boxed theorems in an economics textbook -- moments where the reader pauses, absorbs a core idea, and then continues. Padding is extreme: 12vh top, 16vh bottom, creating a cathedral-like sense of vertical space around the idea. 3. **Evidence Spreads** -- Two-column sections that present photographic or diagrammatic evidence alongside analytical text. The image or chart occupies 55% width, the analysis text 40%, with a 5% gutter. These feel like opening a folio-sized art book within the text -- a moment of visual expansion before the editorial column reasserts itself. **Vertical Spacing Logic:** Between Exposition Blocks: 4rem. Between an Exposition Block and a Theorem Panel: 8rem of empty space (the content fades into nothing before the panel begins, creating anticipation). Between a Theorem Panel and an Evidence Spread: 6rem. This variable spacing creates an organic rhythm that mimics the experience of reading a physical book where some pages are dense text and others are full-plate illustrations. **Navigation:** A minimal fixed header -- just the domain name "economic.wiki" in EB Garamond Small Caps at 0.85rem, letterspaced at 0.18em, positioned top-left with 2rem padding. No hamburger menu, no links visible. On scroll past the first viewport, a thin rule (1px, #C4A882 at 40% opacity) appears below the header, and a subtle chapter indicator appears top-right showing the current section name in Crimson Pro at 0.7rem, transitioning with a 400ms fade. ## Typography and Palette **Typography:** - **Display / Headlines:** "EB Garamond" (Google Fonts) -- the definitive digital Garamond, based on Claude Garamond's original 16th-century punches with Georg Duffner's meticulous digital interpretation. Used at weights 500 and 700. Display sizes: 4.5rem for the hero title (with optical sizing enabled via `font-feature-settings: 'onum' 1, 'liga' 1`), 2.8rem for Theorem Panel headings, 2.2rem for section headers. Always set with old-style figures and standard ligatures. The italic variant is used for emphasis within headings -- never bold italic, which would be vulgar in this context. EB Garamond carries the specific gravity of economic thought: it was the typeface of the Enlightenment, the face that set Voltaire and Montesquieu, and it brings that intellectual heritage into every letterform. - **Body Text:** "Crimson Pro" (Google Fonts) -- a transitional serif with larger x-height than EB Garamond, making it more readable at body sizes (18-19px) while maintaining the scholarly character. Weight 400 for body, 600 for bold. Line-height 1.72 for the 680px measure. Crimson Pro's open counters and moderate stroke contrast make long-form economics writing -- with its technical terminology and complex sentence structures -- feel approachable rather than dense. - **Marginal Notes / Captions / UI:** "Source Sans 3" (Google Fonts) -- a humanist sans-serif that provides clear contrast against the serif body text without introducing the coldness of a geometric or grotesque sans. Weight 300 for marginalia, 400 for captions, 600 for UI labels. Size 0.8rem for margin notes, 0.75rem for captions. Source Sans 3 reads as the modern editorial voice annotating the classical text -- the scholar's penciled notes beside the printed word. - **Monospace (for data, formulas):** "JetBrains Mono" (Google Fonts) -- used exclusively for inline code, economic formulas, and data tables. Weight 400, size 0.88em relative to surrounding text. Its distinctive ligatures for mathematical operators (!=, >=, <=) serve the domain perfectly. **Palette:** The palette draws from the jewel-tone tradition -- the deep, saturated colors of illuminated manuscripts, stained glass in Oxford chapels, and the leather spines of bound economic treatises -- but tempered with the warm neutrals of aged paper and reading-room wood. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Parchment | Warm ivory | #F7F3EB | Primary background, text column | | Ink | Deep charcoal-brown | #2C2418 | Body text, primary typography | | Sapphire | Deep scholarly blue | #1B3A4B | Theorem Panel backgrounds, link color | | Amethyst | Muted royal purple | #4A1942 | Accent for key concepts, theorem highlights | | Emerald | Dark institutional green | #2D3A1E | Secondary accent, success states, nature metaphors | | Gilt | Warm burnished gold | #C4A882 | Decorative rules, marginal ornaments, hover states | | Ruby | Deep cardinal red | #8B1A1A | Footnote markers, critical annotations, warning | | Slate | Cool medium gray | #6B7B8D | Captions, metadata, secondary text | | Vellum | Lighter warm cream | #EDE6D6 | Card backgrounds, marginalia column fill | The jewel tones are never used at full saturation for large areas -- they appear as deep, enveloping backgrounds for Theorem Panels (with text in #F7F3EB) or as precise accents against the warm parchment ground. The overall impression is of richness without garishness, like a well-lit room full of old books where the gilt lettering on the spines catches the lamplight. ## Imagery and Motifs **Photography Direction:** The imagery mode is **photography**, but of a highly specific kind: documentary photographs of the material culture of economic thought. Not stock photos of businesspeople shaking hands or generic cityscapes. Instead: 1. **Archival Textures** -- Close-up photographs of aged paper, ledger books, handwritten economic calculations, old currency, stock certificates from the 1920s, ticker tape, the worn brass of bank counters. These are used as background textures within Evidence Spreads, at very low opacity (0.08-0.15) to add tactile depth without competing with text. 2. **Institutional Spaces** -- Wide-angle photographs of reading rooms, lecture halls, trading floors (both historic and modern), central bank interiors, the marble halls of treasuries. Used full-bleed within Evidence Spread sections, always with a color treatment: desaturated by 40%, then tinted with a wash of #1B3A4B (sapphire) at 12% opacity via CSS `mix-blend-mode: multiply`, creating a cohesive blue-inflected documentary look that ties disparate images into a single visual family. 3. **Portrait Fragments** -- Cropped photographs of economists, thinkers, and historical figures -- never full portraits, always fragments: a hand holding a pen, the spine of a specific book, the corner of a blackboard with equations. These appear in the marginalia column as small, gem-like images (160px wide, with 4px borders in #C4A882) that feel like illustrations in an annotated edition. **Book-Scholarly Motifs:** - **Chapter Ornaments:** Small decorative dividers between major sections, rendered as SVG. The motif is an open book viewed from above, abstracted into a simple geometric form -- two angled rectangles meeting at a spine line, flanked by thin horizontal rules. Rendered in #C4A882 (gilt) at 60% opacity. These appear centered between Exposition Blocks, 2rem tall. - **Marginal Notation Marks:** In the marginalia column, key annotations are prefixed with traditional scholarly marks: a pilcrow (¶) for new arguments, a manicule (☞) for important points, a dagger (†) for footnotes, an asterism (⁂) for thematic breaks. These are set in EB Garamond at 1.4rem, colored #8B1A1A (ruby). - **Drop Capitals:** The first letter of each major section uses a 4-line drop cap in EB Garamond at weight 700, colored #1B3A4B (sapphire), with a subtle 1px #C4A882 text-shadow at 0.5px offset to simulate gilt illumination. The drop cap is floated left with 0.4em right margin and 0.1em bottom margin. - **Footnote Superscripts:** Footnote numbers are set as superscripts in #8B1A1A (ruby), and on hover, they reveal the footnote text in a tooltip-like popover styled as a parchment card (#EDE6D6 background, 1px #C4A882 border, 6px border-radius, `box-shadow: 0 4px 16px rgba(44, 36, 24, 0.12)`). - **Pull Quote Styling:** Pull quotes are indented 2em from both sides, set in EB Garamond Italic at 1.4rem, with a 3px left border in #4A1942 (amethyst). Above and below, thin rules in #C4A882 at 30% opacity, extending 40% of the column width from center. - **Section Numbering:** Sections are numbered in the academic style (I, II, III...) using Roman numerals, set in Source Sans 3 at weight 300, letterspaced at 0.3em, colored #6B7B8D (slate), positioned in the marginalia column aligned with the section heading. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport foyer. The background is #F7F3EB (parchment). Centered vertically at 40% from top, the domain name "economic.wiki" appears in EB Garamond Small Caps at 5vw, letterspaced at 0.25em, colored #2C2418. Below it, separated by 2rem, a single line in Crimson Pro Light (weight 300) at 1.1rem reads as a subtitle -- something like "An encyclopedia of economic thought" -- colored #6B7B8D. Below the subtitle, at 60% from top, a small downward-pointing chevron (a simple CSS triangle or thin SVG arrow) pulses gently with a `translateY` animation (4px amplitude, 2.5s duration, ease-in-out, infinite). No navigation, no buttons, no call to action. The foyer is a title page, and title pages do not sell. On scroll, the foyer content fades upward with `opacity` transitioning to 0 and `translateY` shifting -40px over 600ms, using `IntersectionObserver` to trigger when the scroll passes 15vh. The first content section then fades in from opacity 0 and translateY(30px) with a 300ms delay. **Scroll-Triggered Reveals:** Since scroll-triggered patterns are required by the seed (and are common at 98% frequency), differentiation comes from the *character* of the animations rather than their presence. All scroll animations in economic.wiki use a **typographic reveal** motif: text doesn't just fade in, it *composes itself* as if being typeset. - **Heading Reveals:** When a section heading enters the viewport (observed at 20% threshold), the text appears character by character from left to right at 18ms per character, using CSS `clip-path: inset(0 100% 0 0)` animated to `clip-path: inset(0 0% 0 0)` with per-character spans. This mimics the action of a letterpress composing stick being filled, character by character. Easing: `cubic-bezier(0.25, 0.1, 0.25, 1.0)`. - **Body Paragraph Reveals:** Paragraphs fade in as complete blocks (not per-character), using `opacity: 0 → 1` and `translateY(16px) → translateY(0)` over 500ms with `cubic-bezier(0.4, 0, 0.2, 1)`. Stagger delay between consecutive paragraphs: 120ms. This is subtle and doesn't distract from reading. - **Theorem Panel Reveals:** The deep-colored panels grow vertically from their center line -- `scaleY(0) → scaleY(1)` with `transform-origin: center` over 800ms with `cubic-bezier(0.22, 1, 0.36, 1)` (an overshoot curve). After the panel reaches full height (200ms delay), the text within fades in at 400ms. This creates a dramatic "curtain opening" effect that gives the theorem the gravitas it deserves. - **Evidence Spread Reveals:** The image slides in from the left (`translateX(-60px) → 0`, 700ms) while the text slides in from the right (`translateX(40px) → 0`, 700ms), with the image leading by 100ms. This bilateral movement creates the feeling of opening a book to a spread. - **Marginal Note Reveals:** Notes in the marginalia column fade in with a slight rightward drift (`translateX(-8px) → 0`, 300ms) timed to appear when the related body text paragraph enters the viewport. They feel like annotations materializing beside the text as you read. **Hover and Interaction Micro-Details:** - Links are styled in #1B3A4B (sapphire) with no underline by default. On hover, a 1px underline in #C4A882 (gilt) animates in from left to right using `background-size: 0% 1px → 100% 1px` over 300ms. This is the underline-draw pattern, bringing the frequency of that pattern up slightly. - Footnote superscripts, on hover, scale to 1.15x and transition color from #8B1A1A to #4A1942 (amethyst) over 200ms, before the popover appears. - The chapter indicator in the fixed header transitions between section names with a vertical slide: the outgoing name moves up and fades out while the incoming name slides up from below and fades in, over 400ms. **Performance Note (ignored per rules, but for reference):** All animations use `transform` and `opacity` only -- no layout-triggering properties. IntersectionObserver handles all scroll detection; no scroll event listeners. Font loading uses `font-display: swap` with system serif fallback stack. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids -- this is a knowledge site, not a SaaS product - Hero images with overlaid text and gradient scrims -- this is not a landing page - Testimonial carousels, partner logo bars, feature comparison tables - Modal popups, notification banners, cookie consent overlays in the design (implementation concern, not design) - Generic "above the fold" conversion-focused layouts - Excessive motion that interferes with reading comprehension ## Uniqueness Notes **Differentiators from other designs:** 1. **Marginalia Column as Active Design Element:** No other design in the portfolio uses a dedicated marginalia column as a core layout component. While sidebar layouts exist (27% frequency), the marginalia column here is fundamentally different -- it is not navigation or secondary content, but a scholarly annotation layer that activates contextually. Sidenotes, Roman numeral section markers, portrait fragments, and traditional scholarly notation marks (pilcrow, manicule, dagger) populate this space organically, creating a reading experience that is genuinely bookish rather than merely "editorial." This is unique among all 104 analyzed designs. 2. **Jewel-Tone Palette on Light Academia Ground:** The combination of deep jewel tones (#1B3A4B sapphire, #4A1942 amethyst, #2D3A1E emerald, #8B1A1A ruby) against a warm parchment base (#F7F3EB) is architecturally distinct from other designs. Jewel-tones appear at only 4% frequency in the corpus, and when they do appear, they are typically used in dark-mode or maximalist contexts. Here, they are deployed as *accents and environments* against a warm light ground, creating the visual logic of illuminated manuscript color -- precious pigments applied sparingly on vellum. No other design achieves this specific combination. 3. **Typographic Reveal Animations (Letterpress Composing):** While scroll-triggered animations are nearly universal (98%), the specific implementation here -- per-character heading reveals that mimic a letterpress composing stick, bilateral Evidence Spread reveals that mimic opening a book spread, and vertical Theorem Panel reveals that mimic a curtain -- constitutes a unique animation vocabulary tied to the book-scholarly motif system. The animations tell a story about how knowledge is composed and presented, rather than being generic fade-and-slide effects. 4. **Theorem Panel Interruptions:** The full-viewport jewel-toned Theorem Panels that break the reading column are structurally unique. They function like the boxed theorems in economics textbooks or the colored plates in academic monographs, creating moments of contemplative pause within the editorial flow. No other design uses this specific rhythm of reading-column → full-bleed panel → reading-column. 5. **Scholarly Notation System:** The use of traditional typographic marks (¶, ☞, †, ⁂) as functional design elements in the marginalia column creates a semiotic layer that is genuinely unique. These marks are not decorative -- they carry meaning (new argument, important point, footnote, thematic break) and create a visual shorthand that rewards attentive readers, much like the notation systems in critical editions of classical texts. **Chosen Seed/Style:** `aesthetic: light-academia, layout: editorial-flow, typography: garamond-classic, palette: jewel-tones, patterns: scroll-triggered, imagery: photography, motifs: book-scholarly, tone: scholarly-intellectual` **Avoided Overused Patterns (from frequency analysis):** - `playful` aesthetic (98%) -- replaced with `light-academia` (1%) - `centered` layout (99%) -- replaced with asymmetric editorial-flow with marginalia column - `mono` typography (99%) -- replaced with `garamond-classic` (2%) paired with Crimson Pro and Source Sans 3 - `warm` palette as sole identity (100%) -- warmth is present in the parchment ground but the identity is jewel-tones (4%) - `friendly` tone (97%) -- replaced with `scholarly-intellectual` (1%) - `vintage` motifs (72%) -- while historical elements exist, the motif system is `book-scholarly` (4%), which is specific and functional rather than generically vintage - `minimal` imagery (97%) -- replaced with directed `photography` in the documentary/archival mode - `parallax` patterns (78%) -- no parallax effects; all motion is scroll-triggered reveals with typographic character