# Design Language for rational.today ## Aesthetics and Tone **"The Decision Bureau" — a Swiss-International rationalist broadsheet for one day at a time.** Picture the in-house print office of a fictional government agency whose only mandate is *clear thinking*: a 1960s Zürich-school design studio crossed with an actuarial reading room, retooled to publish a single dated dispatch every morning. `rational.today` is not a blog and not a dashboard — it is **today's issue**, a one-page broadside of calibrated reasoning: one open question with a stated prior, one updated estimate, one logged decision, one cited correction to yesterday. The mood is **cool, exact, and quietly confident** — paper-white with ink-black rules, the smell of a freshly mimeographed memo, the satisfaction of a form filled in correctly. Nothing glows; nothing wobbles; nothing is "hand-drawn." Surfaces are flat and matte. The only warmth comes from a single restrained signal-color used the way a proofreader's red pencil is used: sparingly, deliberately, and always to mark a *change of mind*. This is design as epistemic hygiene — generous margins, ruled baselines, numbered everything, and the unhurried authority of a document that expects to be read slowly and trusted. Anti-references, on purpose: no glassmorphism, no neon, no gradients-as-decoration, no rounded "friendly" everything, no soft pastoral textures. The competing site at the analogous domain (`logical.day`) went *light-academia / chalk-dusted classroom*; we go the opposite pole — **cold Swiss bureaucracy of the rational**: rule-driven, monochrome, ruthlessly gridded, ink-on-newsprint. ## Layout Motifs and Structure **The Broadsheet Front Page.** The entire site is one tall composition modeled on a folded newspaper front page, but governed by a strict **modular Swiss grid: 12 columns, a 4px baseline, hairline column rules visible at 0.5px**. There is no hero "splash." Above the fold sits a **masthead band**: the wordmark `rational.today` set in the display grotesque, a dotted-leader line, today's full date in ISO form (`2026-05-11`), an issue serial (`№ 1638`), and a one-line *standfirst* — the day's question — set in the body serif. **The Folio Rails.** Both outer margins are reserved as **marginalia rails**: column 1 holds running footnote numerals, source sigla, and a thin vertical "confidence gauge" (a stacked bar that fills as you scroll, labeled 0 → 100%); column 12 holds a live "errata" ticker referencing prior issues. The chrome is otherwise nothing — no nav bar — just a hairline rule top and bottom and a corner-set page folio (`p. 1 / 1`). **Four ruled sections, like newspaper departments**, each introduced by a black **section bar** (reverse type, all caps, tracked wide) and a kicker numeral: 1. **§1 — THE QUESTION** (today's open problem; the stated prior, written as an explicit fraction or percentage in a boxed "prior cell"). 2. **§2 — THE UPDATE** (the evidence considered, laid out as a two-column ledger: *observation* | *likelihood ratio*; the posterior printed large in a ruled "estimate box" with a struck-through old value beside it in signal-red). 3. **§3 — THE DECISION** (a single resolved choice for the day, formatted as a stamped form: fields, checkboxes, a "filed at" timestamp, a faux rubber-stamp impression in outline only). 4. **§4 — THE CORRECTION** (an honest retraction of something from a prior issue — the masthead's whole reason to exist). A short **colophon footer** closes the page like a printer's imprint: set in the smallest mono, it lists the grid module, the type sizes, and a line of dotted leaders. Composition principle throughout: **asymmetric balance** — heavy black bars on the left answered by white space and small mono captions on the right; never centered, never symmetrical, always *justified to the grid*. ## Typography and Palette **Fonts (all available on Google Fonts):** - **Display / masthead / section bars:** **`Archivo Black`** — a dense, no-nonsense grotesque with the blunt confidence of mid-century signage. Used at large sizes for the wordmark and reverse-type department bars; ALL CAPS, tracking +0.06em. - **Headlines & the day's question (standfirst):** **`Spectral`** — a crisp, slightly mechanical text serif with excellent rhythm at display sizes; gives the broadsheet its "this is a serious publication" voice. Used 600 weight for headlines, 400 italic for standfirsts and pull-quotes. - **Body / long-form reasoning:** **`Spectral`** 400, 18px, 1.65 line-height, set to a 62-character measure with a ruled 4px baseline so every line sits on a visible grid. - **Data, ledgers, numerals, timestamps, colophon, marginalia:** **`Space Mono`** — fixed-width, faintly typewriter-ish; carries all the actuarial machinery — likelihood ratios, percentages, ISO dates, footnote numerals, the confidence gauge labels, the "filed at" stamps. 400 weight, tracking +0.02em. **Palette (matte, flat, no gradients):** - `#F4F2EC` — **Newsprint** — the dominant ground; a warm-neutral paper white, never pure #FFF. - `#16161A` — **Press Ink** — near-black for all body text, rules, and the reverse-type section bars (text on these bars is Newsprint). - `#8C8A82` — **Graphite** — mid-grey for hairline column rules, marginalia, captions, dotted leaders, and secondary numerals. - `#C8362B` — **Proof Red** — the *only* accent; reserved exclusively for *changes of mind*: struck-through prior estimates, the rising part of the confidence gauge, the correction-section kicker, and the outline rubber-stamp. Never used for buttons, never for decoration. - `#1E3A8F` — **Inkstamp Blue** — a deep, restrained official blue used at most once per section, for the faux rubber-stamp impressions and the issue serial; reads as "stamped and filed." Contrast is high and strictly black-on-paper. Texture: an extremely subtle uncoated-paper grain (≤3% opacity noise) and a faint 4px baseline ruling visible only on close inspection — the design *looks* printed, not rendered. ## Imagery and Motifs **No photography. No illustration. The imagery *is* the apparatus of reasoning, drawn as print:** - **The Confidence Gauge** — a tall, thin stacked bar in the left rail, segmented into deciles with mono labels; it fills (in Press Ink, with the most recent increment in Proof Red) as the reader scrolls through §2, visually = "my certainty as I read the evidence." - **The Prior/Posterior Cells** — boxed, ruled cells (think a tax form's "enter amount here") holding the day's numbers; the posterior cell is double-ruled and oversized, with the superseded value beside it struck through in Proof Red. - **The Ledger Rule** — every list of evidence is a true two-column ruled ledger with a hairline vertical divider and zebra-free, baseline-locked rows; running totals in mono at the foot. - **The Errata Ticker** — a vertical strip of tiny mono entries in the right rail (`№1631 · revised down · −0.08`), slowly auto-advancing, each a link to a past issue. - **Dotted Leaders & Folio Marks** — Tufte-thin dotted leader lines connect labels to values across white space; corner folios, register marks, and a printer's "30" (—30—) end-mark close the page. - **The Rubber Stamp** — for §3, an *outline-only* stamp impression (rotated ~7°, double oval, "FILED · rational.today · 2026-05-11") in Inkstamp Blue or Proof Red — flat, no shadow, no skeuomorphic rubber texture; just clean vector linework, as if the ink were nearly dry. - **Section Bars** — solid Press-Ink horizontal bars with reverse Archivo-Black caps and a large outlined kicker numeral hanging into the margin. Decorative restraint is itself the motif: hairlines, ruled cells, numerals, dotted leaders, and exactly one red mark per screen. ## Prompts for Implementation Build a **single full-screen, scroll-driven narrative**: the reader is not "browsing a site," they are **reading today's issue front to back**. One long vertical broadsheet, four ruled departments (§1 Question → §2 Update → §3 Decision → §4 Correction), no traditional nav. Tell it as a story of *one mind changing in one day*. - **The grid is real and visible.** Lay everything on a 12-column CSS grid with a 4px baseline; render 0.5px Graphite column rules in the margins. Nothing floats off-grid. Use `subgrid` for the ledger tables. - **Scroll choreography (restrained, mechanical — never bouncy):** - The **left-rail confidence gauge** is pinned (`position: sticky`) and fills via `scroll-timeline` / IntersectionObserver as §2 enters view; each new evidence row "ticks" the gauge up — the active increment flashes Proof Red, then settles to Press Ink. Counters animate by *snapping* between integer percentages, like a mechanical totalizer, not easing smoothly. - **Section bars** slide in from the page edge to full width on entry (a single firm 240ms cubic-bezier, no overshoot), reverse type resolving as they land — like a press plate stamping the page. - **Body paragraphs** reveal with a simple top-down clip (`clip-path` inset wipe), 4px-baseline-quantized, as if being printed line by line; staggered by ~40ms. - The **posterior estimate box** does the centerpiece move: the old value is printed first, then a Proof-Red strike-through line *draws* across it (`stroke-dashoffset`), then the new value types in beside it in mono. This is the emotional peak — keep everything else quiet so it lands. - The **rubber stamp** in §3 fades in at low opacity then "presses" — a single quick scale from 1.04 → 1.0 with a tiny rotation settle (~7°), no blur, no drop shadow. - **Dotted leaders** draw left-to-right (`background-size` animation on a dotted gradient) connecting labels to values as each row enters. - **Marginalia behavior:** footnote numerals in the body are mono superscripts; hovering one underlines (a 1px Press-Ink rule drawing in) and highlights the matching colophon entry. The right-rail **errata ticker** auto-advances one entry every ~5s with a hard cut (no fade) — newspaper-ticker feel. - **Type sets the tone:** ISO dates everywhere, `tabular-nums` on all figures, real fractions for priors (`⅓`, or `0.33`), em-dash kickers, a printer's `—30—` end-mark before the colophon. Headlines in Spectral 600; standfirsts in Spectral 400 italic; all numbers and machinery in Space Mono. - **Palette discipline:** Newsprint ground, Press-Ink type/rules, Graphite hairlines, Proof Red *only* on changes of mind, Inkstamp Blue *only* on stamps/serials. If you're tempted to add a sixth color, don't. - **Texture:** a near-invisible paper grain via a tiled SVG `feTurbulence` at ≤3% opacity; optional faint 4px horizontal baseline ruling at ≤4% opacity. The page should photograph like a well-printed memo. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids-as-decoration, signup hero sections, marketing buttons, testimonial cards, glassmorphism, neon glows, decorative gradients, hand-drawn doodles, parallax-for-its-own-sake, bouncy spring physics. Every interaction must feel like a press operation, not a toy. ## Uniqueness Notes Differentiators from other designs in the batch: 1. **A "Decision Bureau broadsheet" — the page literally *is* a dated newspaper front page about one mind changing once.** The four sections aren't generic blocks; they're newspaper *departments* (Question / Update / Decision / Correction), with masthead, standfirst, section bars, marginalia rails, folio marks, and a printer's `—30—` end-mark. No other site borrows this without the "today's issue of reasoning" premise. 2. **The confidence gauge as load-bearing UI, not chart-decor.** A pinned decile-segmented bar in the left rail that *snaps* upward — mechanical-totalizer style — as evidence rows enter, with the active increment in the lone accent color. The struck-through-prior / typed-new posterior box is the deliberate emotional peak; everything else is kept quiet so it lands. 3. **Ruthless one-accent monochrome Swiss restraint** in a batch where 95% of designs are hand-drawn and 81% are glassmorphism: matte newsprint + press ink + graphite hairlines, with Proof Red used *only* to mark a change of mind and Inkstamp Blue *only* on stamps. Flat, ruled, gridded, ink-on-paper — no glow, no gradient, no wobble. 4. **Deliberate opposition to the analogous `logical.day` site:** where that one is light-academia / chalk-and-cream / generative diagrams, this is cold bureaucratic Swiss / monochrome / form-and-ledger. Same neighborhood, opposite temperature. Chosen seed/style: **"swiss typography clean"** (from `seeds.json`) — interpreted as a 1960s Zürich-school *bureaucratic broadsheet* rather than a generic minimalist landing page. Avoided patterns from frequency analysis: **hand-drawn** (95% — explicitly rejected; nothing is hand-drawn), **glassmorphism** (81% — rejected; all surfaces flat/matte), **cursor-follow / magnetic / spring / parallax** (80–90% — replaced with mechanical "press operation" motion: snapping totalizers, plate-stamp slides, clip-path printing), **card-grid** (91% — replaced with a true modular newspaper grid and ruled ledger tables), **warm + gradient palettes** (95–98% — replaced with flat monochrome + a single red accent). Underused notes I leaned into: **swiss** (5%), **editorial-flow** (4%), **single-column** (17%), **monochrome** (16%), **slide-reveal** (4%), **counter-animate** (15%, but re-styled as mechanical snap).