# Design Language for reasr.one ## Aesthetics and Tone reasr.one is **a Swiss-modernist proof sheet — the kind of grid the International Typographic Style would have built if its job were to lay out a single, slow chain of reasoning across a wall of white paper.** Picture the lobby of a 1960s mathematics institute in Zürich: cold-pressed paper-white walls, one black rule running waist-high around the room, red index tabs marking the live arguments, and absolutely nothing else. The site is **swiss typography clean** in the original Müller-Brockmann / Hofmann / Ruder sense — not "minimalism" as a mood-board word, but minimalism as *discipline*: every element justified to a column, every margin measured, every word load-bearing. Where most "AI reasoning" sites reach for circuit traces, neon glow, and dark-mode HUD chrome, reasr.one does the opposite — it treats a reasoning step the way a typesetter treats a paragraph: a thing to be set, aligned, and left alone on the page. The tone is **calm-serene with an undercurrent of authority** — confident enough to use enormous white space, precise enough that the white space never reads as empty. Think *Neue Grafik* journal spreads, the Helvetica-era SBB signage system, Josef Müller-Brockmann's concert posters, and the quiet rigor of a well-set theorem. The mood is "a clear mind, ruled into columns." Nothing pulses. Nothing demands. The page simply *holds still while you read it* — and the reading is the experience. reasr.one is the kind of page that, if printed, would look correct in black ink on cream stock. That is the test every screen of it must pass. ## Layout Motifs and Structure The page is governed by a **strict visible 12-column grid on a baseline-snapped rhythm** — and, crucially, the grid is *shown*, not hidden. Faint hairline column rules (1px, 6% black) run the full height of the document behind the content, like the printed grid on a layout sheet. This is the central motif: **swiss is at only 5% in the aesthetic frequency analysis, and almost none of the corpus shows the construction grid itself.** reasr.one makes the scaffolding part of the picture. - **The waist-high rule.** A single 2px black horizontal line sits at a fixed vertical position and runs edge to edge — borrowed from gallery hanging-lines and SBB platform signage. Content hangs from it or sits above it; it is the page's horizon and it never moves. - **Asymmetric column assignment.** Following Ruder, no element is centered for comfort. The wordmark sits in columns 1–3. Body reasoning sits in columns 4–9. Marginalia (step numbers, source tags, the running argument index) lives in columns 10–12, set small, flush-left, like printed sidenotes. The asymmetry is the composition. - **Editorial-flow, not card-grid.** There are no cards. (Card-grid is at 91%; reasr.one refuses it entirely.) Reasoning is set as a *continuous justified column* — paragraph after paragraph — with generous leading, exactly as a journal article would be set. Steps are separated by white space and a thin rule, never by a box. - **The numeral gutter.** Down the left margin of the reasoning column runs a strip of oversized step numerals — 01, 02, 03 — set in light weight, baseline-aligned to the first line of each step, the way a printed treatise numbers its propositions. - **Single column, single route.** One page, one scroll, vertical only. The grid never breaks, never goes diagonal, never tilts. Its authority comes from never flinching. - **Footnote register.** The bottom of the page is a true footnote zone: a hairline rule, then small-set source attributions and a colophon, set flush in columns 10–12, mirroring the marginalia above. ## Typography and Palette **Fonts (Google Fonts only — a Swiss two-voice system: one grotesque for everything structural, one mono for the literal "machine" voice):** - **Display, wordmark, headings, body — *Archivo* (Variable, wght 100–900, with the *Archivo Expanded* width for the wordmark).** Archivo is a grotesque sans in the direct lineage of Helvetica/Univers but with a contemporary, slightly squared skeleton — exactly the "neutral but not anonymous" voice Swiss style depends on. The wordmark "reasr.one" is set in Archivo Expanded, weight 700, tight tracking, lowercase, sitting in columns 1–3. Headings are Archivo weight 600, set tight. Body reasoning is Archivo weight 400 at a generous size (the page is meant to be *read*, not skimmed), with leading snapped to the baseline grid. Mono typography is at 94% across the corpus — reasr.one deliberately keeps mono out of the body and reserves it for one job only. - **The "model voice" — *Spline Sans Mono* (Variable).** Used *exclusively* for verbatim model output, intermediate computations, and the literal text the system "wrote" — set small, in columns 4–9, with a faint left rule, like a quoted block in a technical paper. This is the only monospaced text on the site. The contrast between Archivo (the human frame) and Spline Sans Mono (the machine's literal words) is the entire typographic argument. - **Numerals — Archivo, light weight (200), oversized** for the step numerals in the left gutter; *tabular* figures everywhere numbers appear in a series so they align like a printed table. **Palette — paper, ink, and one red tab. Five values, no gradients, no neon:** - `#FBFAF7` — **Proof-sheet paper.** The background. A barely-warm off-white, the color of good uncoated stock, never pure #FFFFFF. - `#1A1A18` — **Press ink.** Near-black with a faint warm cast, for all primary text, the waist-high rule, and the wordmark. Reads as "printed," not "screen black." - `#6B6A66` — **Pencil grey.** For marginalia, sidenotes, step labels, the colophon — the "annotation" layer, set small. - `#D8D6CF` — **Grid hairline.** The column rules and section dividers. Just visible enough to register as construction, never enough to compete. - `#D6321E` — **Index-tab red.** The single accent — a flat vermilion in the tradition of Swiss poster red. Used *sparingly*: the live-step marker, a key term underline, the active link state, the small square that flags the current proposition. Never as a fill, never as a glow. One red per screen, ideally one red per scroll. (Optional sixth, used at most once: `#E8E6DF` — a faint paper-tint band to set the model-voice block apart from the page, like a slightly different stock tipped in.) ## Imagery and Motifs **No photography. No 3D renders. No circuit traces. No neon. No glassmorphic cards. Every visual element is a typographic or geometric primitive that could be reproduced by a printing press.** (Photography is at 98% across the corpus; reasr.one has none.) The vocabulary is the vocabulary of the layout sheet and the proof page: - **The construction grid.** The 12 faint vertical hairlines, always present, always behind the text — the single dominant "image" of the site. It is to reasr.one what the squiggle is to Memphis. - **The waist-high rule** — one black horizontal line, the page's horizon. - **Section rules** — thin (0.5–1px) hairlines that separate reasoning steps, set flush within the reasoning column, never full-bleed. - **The red index tab** — a small flat vermilion square or short bar that marks "the step you're on." It moves as you scroll; it is the only thing on the page that ever moves of its own accord, and it moves with the calm precision of a typesetter sliding a marker down a galley. - **Oversized light-weight numerals** in the left gutter — 01 through however many steps — the most prominent recurring graphic. - **Tabular number columns** — wherever the system shows intermediate values, they're set as a true aligned table with a hairline top rule, no zebra striping, no box: a printed table, full stop. - **Crop marks / register marks** — tiny corner ticks at the four corners of the page content area, like the trim marks on a press sheet. A quiet, knowing detail. Used once, at the page corners only. - **Underlines, not highlights** — a key term is marked with a 2px vermilion underline (drawn, never a background fill), the way an editor marks a manuscript. ## Prompts for Implementation Build reasr.one as **a single-route, vertically-scrolled proof sheet — one HTML file, one CSS file, one small JS module.** Treat the whole page as one continuous typeset document: a reasoning chain, set the way *Neue Grafik* would have set a long article. There is **no CTA, no pricing block, no stat grid, no testimonial row, no signup form, no feature cards, no hero with a big button.** There is the wordmark, the rule, the reasoning, the marginalia, and the footnote zone. That is the entire site. **Storytelling structure — the page is a single argument, scrolled top to bottom:** 1. **The masthead.** Top-left: "reasr.one" in Archivo Expanded, weight 700, lowercase, columns 1–3. Top-right, in pencil grey, small: a one-line statement of what's about to be reasoned through — set like a journal article's standfirst. Beneath, the waist-high black rule snaps into place edge to edge. Below the rule, vast white space, then the first step begins. The masthead establishes the grid by *being* on it visibly. 2. **The premise.** Step 00 — set in the reasoning column (4–9), with "00" oversized and light in the left gutter. This is the given: the question, the constraints. Calm, fully set, no animation beyond the text quietly fading up line by line as it enters. 3. **The chain.** Steps 01, 02, 03… each one a justified paragraph (or two) in Archivo 400, generous leading, baseline-snapped. Between each: a hairline rule and a band of white space. Where the system "computed" something or "wrote" verbatim text, that fragment appears as a Spline Sans Mono block, slightly indented within the column, with a faint left rule and (at most once) the paper-tint background. As you scroll, the red index tab slides down the left edge to mark the step currently crossing the waist-high rule. 4. **The pivot.** One step — visually identical in structure — where the argument turns. The only signal: a key phrase gets the vermilion underline, drawn left-to-right as it enters the viewport (path-draw-svg, slow, ~600ms, one stroke). No other fanfare. The restraint *is* the emphasis. 5. **The conclusion.** The final step, set in Archivo weight 600, slightly larger, still in the same column, still on the same grid. A red square (the index tab, come to rest) sits flush-left of the first line. Below it, more white space than feels comfortable — the page exhaling. 6. **The footnote zone.** A hairline rule, then — in pencil grey, small, columns 10–12, flush-left — the sources the reasoning drew on, numbered, set like real footnotes; then a one-line colophon ("Set on a 12-column grid in Archivo & Spline Sans Mono"). Crop marks tick the four corners of the content area. End. **Motion direction — Swiss restraint:** - The page does **not** parallax. It does **not** tilt-3d. The cursor does **not** follow anything. There is no spring, no elastic, no magnetic hover, no ripple. (These dominate the corpus at 80–90%; reasr.one's discipline is to use none of them.) - The *only* animations: (a) text steps fade up line-by-line on scroll-into-view, fast and subtle (opacity 0→1, 250ms, 30ms stagger per line, no movement or a 4px lift at most); (b) the vermilion key-term underline draws once per page as a single SVG stroke; (c) the red index tab translates smoothly down the left rail tied to scroll position, eased, never bouncing; (d) hairline section rules wipe in left-to-right (200ms) as each step enters. That is the complete motion budget. Anything more breaks the spell. - Respect `prefers-reduced-motion`: with it on, everything is simply *there*, statically, and the page still works perfectly — because it was designed as a print object first. - Hover states are *crisp, not soft*: a link goes from press-ink to index-tab red instantly (no fade), with the 2px underline appearing — like a marker laid down. No glow, no scale, no shadow. **CSS construction notes:** Use a real CSS Grid with `grid-template-columns: repeat(12, 1fr)` and a max content width around 1200–1320px; render the 12 hairlines as a `repeating-linear-gradient` background fixed behind everything at `#D8D6CF` ~6% opacity. Snap line-heights to a baseline unit (e.g. 8px) and keep all vertical spacing as multiples of it. Tabular figures via `font-variant-numeric: tabular-nums`. Keep the type *large* — body around 19–21px — this page is for reading. Pure system: paper, ink, grey, hairline, one red. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **The construction grid is the artwork.** Swiss aesthetic is at only 5% in the corpus, and the small slice that exists treats "Swiss" as a vibe — clean sans, lots of margin. reasr.one instead *exposes the 12-column layout grid as a visible, permanent design element*, the way a printer's layout sheet shows its scaffolding. As far as the corpus shows, no other site makes the grid itself the dominant motif. 2. **A "reasoning AI" site with zero tech-cliché imagery.** The obvious move for `reasr.one` is dark-mode neon, circuit traces, sci-fi HUD, glowing nodes (these patterns are heavily represented). reasr.one rejects every one of them and renders machine reasoning as *typeset prose on warm paper* — the conceptual inversion is the point. 3. **Near-zero motion in a corpus drowning in it.** Parallax (90%), cursor-follow (89%), spring (84%), magnetic (81%) — reasr.one uses none of these. Its entire motion budget is line-fade, one SVG underline stroke, a scroll-tied marker, and a rule-wipe. Stillness as a deliberate, near-unique stance. 4. **No cards, no hero-button, no photography.** Card-grid (91%), full-bleed photography (98%) — reasr.one has neither. Reasoning is set as one continuous justified column with sidenotes and footnotes, like a journal article. The "card" never appears. 5. **A two-voice type system that *means* something** — Archivo (the human frame) vs. Spline Sans Mono used *only* for the model's literal output — rather than mono-everywhere (94% of the corpus) used decoratively. Chosen seed/style: **swiss typography clean** *(aesthetic: swiss, layout: editorial-flow, typography: sans-grotesk, palette: monochrome + single index-tab red, patterns: fade-reveal + path-draw-svg, imagery: minimal/line-illustration, motifs: grid-lines, tone: calm-serene)* Avoided patterns from the frequency analysis: card-grid (91%), photography (98%), parallax (90%), cursor-follow (89%), spring (84%), magnetic (81%), mono-as-body (94%), glassmorphism (81%), hand-drawn (95%), warm-gradient palettes (95–98%), tech/circuit/sci-fi-hud motifs, neon-glow, glassmorphic-cards.