# Design Language for economic.wiki ## Aesthetics and Tone economic.wiki is a **field journal of living economies** — handwritten observations about a world that refuses to hold still. The aesthetic is deliberately **anti-design**: margins are intentional but unruly, text doesn't march in columns, ink bleeds past imaginary rules. The site looks like someone tore a page from a naturalist's sketchbook and pinned it to a light table, then forgot to align anything. The domain word "economic" is stripped of its textbook sterility. Here, economics is treated as a branch of ecology: systems that breathe, adapt, overshoot, and recover. The tone is **whimsical-creative** — a scientist who doodles in the margins, who writes formulas in the same hand as grocery lists, who finds supply curves as interesting as root systems. The mood is warm curiosity — not the cold authority of a Bloomberg terminal, not the frictionless slickness of a fintech dashboard. The site feels like afternoon light filtering through translucent curtains, slightly overexposed, where a handwritten note about interest rates sits next to a sketch of a fern. Economic literacy as a sensory experience. Influences: Giorgia Lupi's data humanism, Anna Atkins' cyanotype field guides, vintage Penguin paperback covers, the sticky-note walls of behavioral economists, the unpaginated notebooks of Charles Darwin. ## Layout Motifs and Structure The layout is **minimal-navigation** taken to its logical extreme: there is no traditional navbar, no footer link farm, no sidebar. Navigation is dissolved into the prose itself — a single persistent word in the top-left corner (`wiki`) acts as the only wayfinding element, rendered in handwritten type, always present, never demanding. **Page architecture (single vertical column, left-weighted):** - The canvas is 700px max-width on desktop, left-justified at 8vw from the left edge — *not* centered. Right margin is raw, uncontained, letting ink (text) run toward white space as if the page itself is wider than the container. - No fixed header. No sticky nav. Scroll is clean. - Content is organized in loose **entry blocks** — each block is a wiki entry, roughly equivalent to a paragraph + marginal illustration pairing. Blocks are not separated by borders or card shadows; only vertical rhythm (generous `margin-block: 3.5rem`) and typographic contrast. - **Marginal layer:** A 200px margin-right column (desktop only) exists outside the content column, populated with parenthetical asides, hand-drawn annotations, tiny sketched charts, and page-number-style reference glyphs. This is the "wiki doodle margin" — nothing here is critical to reading, everything here rewards it. - **Focal blur:** Individual entry blocks that are not currently in the viewport are rendered at `filter: blur(1.2px) opacity(0.65)` by default, snapping to full clarity as they enter mid-viewport via `IntersectionObserver`. This creates the sensation of walking through a field journal where only the open page is in focus. - No grid lines, no card borders, no dividers. Composition lives in whitespace alone. - Mobile: margin column disappears, column expands to `92vw`. Single font size increase for body. ## Typography and Palette **Typography (Google Fonts only) — handwritten-first hierarchy:** Three faces, zero mono. - **Primary display / Entry titles:** `Caveat` (Google Fonts, wght 400–700). Used at `clamp(2rem, 4.5vw, 3.2rem)` for H1 entry headings. Slight negative letter-spacing (`-0.01em`). This is the primary handwritten voice — it reads like someone wrote the encyclopedia entry title with a felt-tip pen on a card. The variable weight axis is animated: on `blur-focus` reveal, headings transition from `font-weight: 400` to `600` as they come into focus. - **Body / Running text:** `Nunito` (Google Fonts, wght 300–600). Used at `1.15rem` / `1.85` line-height for all prose. Nunito's rounded terminals give body text a gentle, human quality that reads as "careful note" rather than "typeset paragraph." Weight 300 for body, 500 for inline emphasis. Its roundness pairs with Caveat without competing. - **Marginal asides / annotation layer:** `Patrick Hand` (Google Fonts, wght 400). Used at `0.8rem` for all marginal notes, callouts, sketched labels, and parenthetical additions. Slightly more controlled than Caveat — reads as a second author annotating the first. **Palette — creamy-pastel, all named:** - `#F7F2E8` — Parchment White. Base background. Warm, slightly yellowed, like good bond paper left in afternoon sun. - `#EDE4D0` — Aged Cream. Section alternation background, very subtle. Not a card — just a breath of depth. - `#B8D4C0` — Sage Mist. Primary accent: link underlines, active states, the `wiki` wordmark. Cool enough to breathe beside the warm paper. - `#D4B896` — Amber Dust. Secondary accent: marginal glyph fills, sketch strokes, pull-quote backgrounds. - `#C9D9E8` — Sky Wash. Tertiary: used only in lens-flare overlay elements and very subtle section backdrops. A pale morning-sky tone. - `#3D3530` — Soft Espresso. Primary text. Not black — warm near-black with a slight brown cast, like ink on paper. - `#7A6E65` — Faded Ink. Secondary text, captions, dates, annotations. - `#E8D5C4` — Blush Petal. Hover states, soft background glow on focused entry blocks. No black (`#000`). No white (`#fff`). No gray grids. No gradients. Every color is desaturated and warm. ## Imagery and Motifs **Imagery vocabulary: lens-flare + nature, exclusively.** There are no stock photos of charts, no screenshots of spreadsheets, no icons of coins or graphs. The imagery system has two registers: **1. Lens-flare overlays (CSS/SVG, never raster stock).** Each wiki entry section may carry a subtle lens-flare element — a soft radial gradient bloom rendered as an absolutely-positioned SVG `` or ``, placed at the upper-right corner of the entry, at 18–22% opacity. Colors are drawn from the palette (`#C9D9E8` and `#EDE4D0`). These are not decorative accents — they are the *light source* of the page. The lens flare represents illumination: ideas becoming visible. As an entry comes into `blur-focus` and sharpens, the flare fades from 22% to 8% opacity — clarity replaces light, meaning replaces mystery. Flare radii: small entries get a 120px flare, long entries get a 240px flare. No more than one flare per entry block. Never centered — always offset toward a corner. **2. Nature motifs — hand-drawn SVG line illustrations.** Every wiki entry has one optional marginal illustration — a small (80×80px) hand-drawn SVG line sketch in the margin column. Subjects are drawn exclusively from the natural world, reinterpreted as economic metaphors: - A root system with labels reading "supply chain" at each branch node - A cross-section of a seed, with "capital" at the cotyledon and "growth" at the shoot - A water cycle diagram where rain is labeled "liquidity" and evaporation "inflation" - A mycelium network with "information asymmetry" at the nodes - A bee returning to a hive with "externality" and "commons" labels - A river delta branching, labeled "market segmentation" - A leaf with veins annotated as "fiscal policy paths" - A dandelion releasing seeds, each seed labeled with a school of economic thought All illustrations are SVG, stroke `#3D3530` at 1.5px, fill none, with occasional `#B8D4C0` fills for enclosed shapes. They are drawn at 80×80 viewport, scaled to fit the margin column. **No photography. No 3D renders. No icons (icon fonts, icon libraries). No emoji.** ## Prompts for Implementation Build economic.wiki as a **single-page wiki experience** — not a blog, not a dashboard, not an encyclopedia with a sidebar index. The page is one long, unhurried scroll through economic concepts arranged as field journal entries. The visitor is a naturalist walking through an idea ecosystem. **Macro structure (top to bottom):** 1. **Opening header — the journal cover (`100px` tall, not full-screen).** The wordmark `wiki` set in Caveat at 2.2rem, left-aligned at the 8vw offset. Below it, a one-line subtitle in Patrick Hand: *"economics observed, not explained."* No hero image. No animated headline. No CTA. Just ink on cream paper. A single lens-flare SVG bloom in the upper-right of this header, `#C9D9E8` at 15% opacity, 160px radius. This header has `position: sticky; top: 0; background: #F7F2E8; z-index: 10` — it stays, thin as a thread, as the visitor scrolls. 2. **Entry stream** — the entire remaining page is a sequence of wiki entries. Each entry is: - A Caveat H2 heading (the concept name: e.g., *Opportunity Cost*, *The Invisible Hand*, *Externality*) - 2–4 paragraphs of Nunito body text — written in first-person plural ("we observe that markets...") or second-person ("imagine you are holding..."), never third-person didactic - One optional SVG marginal illustration (desktop only, `float: right` into the margin column) - One optional lens-flare SVG bloom (upper-right of the entry block) - `blur-focus` treatment: blur starts at `filter: blur(1.5px) opacity(0.6)`, resolves to `filter: none opacity(1)` via IntersectionObserver `rootMargin: "-15% 0px -15% 0px"` with a CSS transition `filter 0.55s ease-out, opacity 0.55s ease-out` 3. **Blur-focus JavaScript.** Minimal vanilla JS — approximately 12 lines. `querySelectorAll('.entry')`, create an `IntersectionObserver`, on intersection add class `.in-focus` which removes the blur. On exit, re-apply. No scroll event listeners. No jQuery. No libraries. 4. **Inter-entry spacing.** Between entries: `margin-block-end: 3.5rem`. No `
`. No decorative dividers. The white space (cream space) is the divider. 5. **Lens-flare implementation.** Each flare is an inline SVG with a `` definition and a `` fill. Flare is absolutely positioned, pointer-events none, z-index -1. As entry receives `.in-focus`, flare transitions from `opacity: 0.20` to `opacity: 0.07`. 6. **Color scheme application.** Background: `#F7F2E8`. Body text: `#3D3530`. Links: `#3D3530` underlined with `#B8D4C0` underline (`text-decoration-color`). On hover: underline thickens to 2px. Visited links: `#7A6E65`. No blue links. No button components. 7. **Annotations / margin layer.** CSS Grid with `grid-template-columns: 1fr 200px` at ≥900px. Entry content in column 1. Marginal annotations (`