# Design Language for rational.group ## Aesthetics and Tone rational.group is an **avant-garde proof-sheet** — a site that behaves like the working blackboard of a collective of mathematicians, statisticians, and decision theorists, rendered as a single continuous typographic experiment. The name carries three readings at once — *rational* as in ratio (a fraction `p/q`), *rational* as in reason, *rational* as in the rational agent of game theory — and the site refuses to choose between them. Instead it stages all three simultaneously as overlapping layers of marked-up paper. The mood is **cold-clarity with a restless intelligence underneath**: the precision of a Swiss specimen sheet, but constantly interrupted by the energy of someone *thinking out loud* — a numerator sliding over a denominator mid-sentence, a margin note in a faster hand, a fraction bar that extends itself across the whole column when you hover it. The tone is `edgy-rebellious` (this is not corporate fintech blue; it is the agency that thinks corporate fintech blue is intellectually lazy) fused with `scholarly-intellectual` rigor. Think of the visual register where Karl Gerstner's *Designing Programmes*, a worn Dover reprint of Euclid, a Wittgenstein notebook, and a contemporary risograph poster all sit on the same desk. Crucially: **no warmth, no gradient mesh, no glass, no soft 3D**. The surface is paper-white and ink-black with a single bleeding red and one cold cobalt — the palette of a corrected exam. Texture comes from the *grain of risograph misregistration* and the faint blue ruling of engineering graph paper, never from drop shadows or blur. The site should feel like it was *printed*, then scanned, then made interactive — `grainy-textured`, not glossy. ## Layout Motifs and Structure The governing structure is the **fraction** — every section is literally laid out as a numerator block stacked over a denominator block, divided by a horizontal rule (the *vinculum*) that runs the full content width. This is a `broken-grid` built on top of a hyper-rigid base: a 16-column Swiss grid, 1440px reference width, 16px gutters, 8px baseline rhythm, all column lines faintly visible (1px, 8% ink) like the gridlines on graph paper. Every section begins by obeying this grid completely — then the fraction bar appears, and the numerator and denominator are allowed to *disagree*: numerator set to a 5-column measure flush left, denominator to a 9-column measure flush right, the vinculum spanning all 16 and acting as the only thing holding them in tension. Six panels, stacked vertically (`stacked-sections`, `single-column` spine), total scroll length ≈ 560vh desktop / 720vh mobile: 1. **THE RATIO.** Full-bleed paper. Centered, enormous: a single fraction `1 / 0` set in the display serif at ~28vw, the vinculum a hairline that draws itself left-to-right on load (`path-draw-svg`). Below the bar, `0` fades in last. As you begin to scroll, the `0` is struck through and replaced — the whole page is the act of refusing to divide by zero and starting over. 2. **THE COLLECTIVE / WHO.** Numerator (5-col, flush left): the manifesto, set as a numbered list of axioms in mono. Denominator (9-col, flush right): a roster of disciplines — *game theory · Bayesian inference · mechanism design · operations research · decision analysis* — each one a draggable tile that snaps back (`elastic`). The vinculum here is annotated mid-span with a tiny `∴` (therefore). 3. **THE METHOD / HOW.** A horizontal band that breaks the single-column spine: five "moves" of a proof scroll past on `horizontal-scroll` inside a pinned section — *State · Assume · Derive · Refute · Restate*. Each move is a card the width of one graph-paper quadrant, ruled in cold cobalt, with the move number set as a giant outlined numeral behind the text. 4. **THE WORK / WHAT.** Engagements rendered as **long-division layouts** — the project name as the dividend under the division bracket, the client/outcome as the divisor outside it, the "remainder" set in red in the margin. Each one expands on click (`progressive-disclosure`) to show the working-out: assumptions, model, result. 5. **THE OBJECTION.** A deliberately `anti-design` interruption — a near-blank spread, one short paragraph set ragged-right in the handwritten face, as if scrawled: *"Most decisions are made by people who would rather be confident than correct."* The grid here is *off* by exactly 7px from every other section — a misregistration the visitor feels before they see. 6. **THE COLOPHON / CONTACT.** Returns to strict grid. Contact rendered as one final fraction: numerator = an email address typeset like a theorem label `[lemma 0.1]`, denominator = the location and year, vinculum drawing one last time. A faint repeating watermark of `p/q` fractions tiles the footer at 4% ink. Negative space is `ma-negative-space` heavy in panels 1, 5, 6 and dense, marked-up, almost-too-much in 2, 3, 4 — the rhythm of the site is *breath, argument, breath, argument, breath*. ## Typography and Palette **Type system — Google Fonts only, three families, each with a job.** - **Spectral** (serif, weights 200–800, italic) — the *display serif* and the voice of "the result." Used for the giant fractions, all section titles, the manifesto pull-quotes, and theorem labels. Spectral is chosen over Playfair or Cormorant because it is a *screen-first* serif (commissioned by Google for long-form reading) with a contemporary, slightly severe edge — high enough contrast to feel like a printed proof, but with sturdy hairlines that survive at 28vw. Always set tight: `letter-spacing: -0.02em` at display sizes, `line-height: 0.92` for stacked fraction numerator/denominator. - **Space Mono** (mono, 400/700, italic) — the *working face*: axiom lists, code-like model notation, captions, the `data-panel` labels, all UI microcopy, the long-division working-out. Space Mono's quirky ear on the `g` and the slab terminals give it the feel of an old line-printer proof. Set at 13–15px, `letter-spacing: 0`, generous `line-height: 1.7` so it reads like printed source. - **Newsreader** (serif, optical-size variable, italic) — used *only* for the "faster hand" margin notes and Panel 5's objection, set in its italic at large optical sizes so it acquires a fluid, pen-like quality. It is the only "warm" gesture and it is rationed to perhaps 60 words across the whole site. **Palette — the corrected-exam palette. Six values.** - `#F4F1E9` — **Bond Paper.** The dominant ground (≈ 78% pixel area). Not pure white — a faint warm-grey rag stock, so the black reads as ink rather than pixels. - `#14110E` — **Iron Gall Ink.** Near-black with a brown undertone. All primary type, the vinculum, the grid lines (at low opacity). - `#C81E11` — **Correction Red.** The single high-energy accent. Reserved exclusively for: the struck-through `0`, every "remainder," the `data-panel` numerals, hover states on draggable tiles, and links on press. Never decorative — it always means *this was changed / this is the answer*. - `#1C3FA8` — **Engineer's Cobalt.** The cold counterweight. The faint ruling of the graph-paper background, the borders of the Panel 3 method cards, the outlined numerals, selection highlight (`::selection { background:#1C3FA8; color:#F4F1E9 }`). - `#8C8678` — **Pencil Grey.** Mid-grey for secondary captions, the column-grid lines at higher contrast moments, disabled states, the `∴` and `∎` glyphs in margins. - `#E7E2D4` — **Margin Tint.** A barely-there panel fill, one shade under Bond Paper, used to lift the numerator block away from the denominator block without any shadow — pure tonal separation. Risograph misregistration is faked by offsetting the red layer ~1.5px and the cobalt layer ~−1px from the ink layer on the largest display fractions only, with a 3% additive grain `` overlay on the whole document. ## Imagery and Motifs **There is no photography. None.** The entire visual field is built from typography, rules, and three repeating motifs: - **The vinculum (fraction bar).** A 2px ink rule that is the site's recurring character. It draws itself on scroll, extends on hover to span extra columns, occasionally splits into a long-division bracket, and in the footer multiplies into a quiet field of tiny `p/q` watermarks. Every section divider is a vinculum, not a gap. - **Graph-paper ruling.** A CSS-generated grid of 1px cobalt lines at 8% opacity, 32px cells with a heavier line every 4th cell — the eternal background, parallaxing very slightly slower than content (`parallax`, restrained, ~8% offset) so the page feels like a sheet sliding over a ruled pad. - **Mathematical marginalia.** `∴` (therefore), `∎` (QED), `⇒` (implies), `≟` (questioned equals), `±` — set in Pencil Grey, placed in the gutters at section transitions, animating in with a 0.4s `fade-reveal`. Plus hand-drawn-feeling underlines and circles (SVG `path-draw-svg`, slightly wobbly stroke) that appear around key phrases on scroll, as if a reader is annotating live. - **Outlined numerals.** Giant section/move numbers (`01`–`06`) set in Spectral, fill `none`, stroke 1.5px cobalt, sitting *behind* the text like a watermark — `layered-depth` achieved with z-index and opacity, never blur. Icons, where unavoidable (email, location), are drawn as 1.5px monoline glyphs on the cobalt baseline grid, square-cornered, no fills — they should look stamped, not designed. ## Prompts for Implementation Build rational.group as **one long static HTML document** — no SPA, no router, no framework, no build step. Six `
` elements; the `data-panel` value is rendered visibly (via `::before`) as a Space Mono label in the top-left gutter of each section, in Correction Red. **Behavior, panel by panel:** - **Global on load:** Bond Paper ground paints first. The graph-paper ruling fades up over 600ms. In Panel 1 the fraction `1 / 0` assembles: `1` and `0` set immediately at full size but `opacity:0`; the vinculum `` draws left→right over 900ms with `stroke-dasharray`; `1` fades in as the line reaches halfway, `0` fades in as it completes. Then a 1.2s beat, then a red rule strikes through the `0` and the `0` is replaced by an ellipsis `…` — the page is now "ready to begin." - **Scroll:** Use `IntersectionObserver` + a tiny `requestAnimationFrame` loop. The graph paper parallaxes at 0.92× scroll speed. Each panel's content does a **staggered reveal** (`stagger`, 60ms steps, 24px upward translate, 500ms cubic-bezier(0.2,0.8,0.2,1)) — but heading first, then vinculum draw, then body, in that order, every time, so the eye always learns *result → bar → working*. - **Numerator/denominator tension:** On wide screens, as a section enters view, animate the numerator block from `translateX(-32px)` and the denominator from `translateX(+32px)` to rest — they "settle into the fraction." On hover over any section's vinculum, extend its width by 2 columns each side with a 300ms `elastic` and reveal a `∴` at its midpoint. - **Panel 3 (Method):** Pin the section (`position:sticky`, ~300vh tall wrapper) and translate the inner card track horizontally with scroll. Cards ruled in Engineer's Cobalt; giant outlined numeral behind each; current card slightly larger (`scale(1.04)`) via scroll progress. - **Panel 4 (Work):** Each engagement is a long-division layout (CSS grid: dividend under a top+left border forming the bracket, divisor to the left, remainder absolutely positioned in the right margin in Correction Red). Click expands it (`progressive-disclosure`, height auto-animate via grid-template-rows 0fr→1fr) to reveal the working-out in Space Mono. - **Panel 5 (Objection):** Everything 7px off-grid relative to all other sections (apply a `transform: translateX(7px)` on the section, nothing else compensates). The objection sentence set in Newsreader italic, large, ragged-right, fading in word-by-word (`typewriter-effect` but word-granular, not char) over 2.5s. - **Cursor:** A subtle `cursor-follow` — a 1px cobalt crosshair (two short perpendicular ticks, like a graph-paper intersection mark) trailing the pointer with light spring lag; over interactive elements it rotates 45° into an `×` and turns Correction Red. Hidden on touch. - **Marginalia:** As the reader scrolls, SVG annotation strokes (`path-draw-svg`, 1.2px, slightly irregular path, ink color) draw themselves around 4–5 chosen phrases site-wide — an underline here, an ellipse there — each triggered when its phrase is 60% up the viewport. - **Type motion:** On the Panel 1 fraction and section titles, do the risograph offset trick — duplicate the text node twice, one tinted Correction Red translated (1.5px,1px), one tinted Engineer's Cobalt translated (−1px,−0.5px), the ink copy on top; on hover the offset copies drift apart 1px more then snap back (`spring`). - **Reduced motion:** All draws/translates collapse to instant; the risograph offsets become static (and slightly reduced); parallax disabled. The content order and layout are unchanged — the site reads identically still. **Tone of copy** (for placeholder text): terse, declarative, faintly combative — axioms not slogans. *"We model the decision, not the deck." "A forecast you can't bet against isn't a forecast."* Numbered, lemma-labeled, never exclamatory. **AVOID, explicitly:** any CTA-band ("Get Started" / "Book a Call" buttons sitting in a colored stripe), pricing tables, stat-grids of big-number-plus-caption, testimonial carousels, hero-with-gradient-mesh, glassmorphic cards, soft drop-shadows, rounded-everything, stock photography of people in offices, any blue-gradient "fintech trust" register. If a section starts to look like a SaaS landing page, replace it with a fraction. ## Uniqueness Notes Differentiators from the other designs in the registry and from generic web defaults: 1. **The fraction as literal layout grammar.** No design in the registry organizes every section as a numerator-over-denominator-over-vinculum stack. The fraction bar is a recurring animated *character*, not a divider — it draws, extends, splits into long-division brackets, and tiles into a footer watermark. This is structurally novel, not a skin. 2. **The corrected-exam palette — and zero gradients in a 95%-gradient registry.** Frequency analysis shows `gradient` at 95% and `warm` at 98%; this site is a hard refusal of both. Six flat inks (Bond Paper, Iron Gall, Correction Red, Engineer's Cobalt, Pencil Grey, Margin Tint), warmth rationed to a single typeface used for 60 words, texture from risograph misregistration and graph-paper ruling rather than mesh or blur. No `glassmorphism` (81% in registry — avoided), no `hand-drawn` aesthetic baseline (95% — avoided), no `photography` (98% — avoided entirely). 3. **No photography, no glass, no soft 3D — a purely typographic immersive scroll.** The entire visual field is type, rules, mathematical glyphs, and three CSS-generated motifs. Where most immersive-scroll sites lean on imagery, this one is a printed-then-scanned-then-interactive proof sheet. 4. **The 7px-off-grid "Objection" panel.** A deliberate, measurable misregistration in exactly one section — felt before it's seen — as an anti-design gesture embedded inside an otherwise hyper-rigid Swiss grid. `anti-design` used surgically, not as overall style. 5. **Long-division layouts for case studies.** Engagements rendered as dividend-under-bracket with the "remainder" in red in the margin, expanding to show the working-out — replaces the conventional project card / stat block entirely. Chosen seed / style: **experimental type layout** (interpreted as an avant-garde, Swiss-grid-rooted, mathematics-as-typography proof sheet — aesthetic axis: `avant-garde` + `swiss` + `grainy-textured`; tone: `edgy-rebellious` + `scholarly-intellectual`; layout: `broken-grid` + `stacked-sections` + `ma-negative-space`; typography: `serif-revival` (Spectral) + `mono` (Space Mono) + `elegant-serif` (Newsreader); palette: `high-contrast` `monochrome`-leaning with two surgical accents — explicitly NOT `gradient`/`warm`; patterns: `path-draw-svg`, `stagger`, `elastic`, `cursor-follow`, restrained `parallax`, `progressive-disclosure`, word-granular `typewriter-effect`). Avoided patterns from frequency analysis: `gradient` (95%), `warm` (98%), `photography` (98%), `card-grid` (91%), `glassmorphism` (81%), `hand-drawn` (95%), `cursor-follow`-as-magnetic-blob, `tilt-3d`, `glassmorphic-cards`, `gradient-mesh` — none used; where a near-equivalent was unavoidable (`cursor-follow`, `parallax`) it is reinterpreted minimally (a 1px crosshair; an 8% ruled-paper drift).