# Design Language for toron.day ## Aesthetics and Tone toron.day is a forum for structured disagreement — the name borrows the Korean word *토론* (toron), "debate." The visual world treats an argument like architecture: load-bearing claims, supporting columns of evidence, the negative space where a counterpoint will eventually slot in. The aesthetic is **Swiss typographic rationalism re-tuned for live discourse** — International Style discipline (Akzidenz-era grid logic, flush-left ragged-right text blocks, a single dominant accent) crossed with the quiet drama of a debate hall: a lectern lamp, a timer's amber glow, two podiums facing each other across a stage. Nothing decorative for its own sake; every rule line, every column gutter is a piece of reasoning made visible. The tone is **calm, exact, slightly austere — but never cold.** Think of a referee who is also a host: precise about the rules, generous about the conversation. Pages feel like a well-edited transcript: white, generous, with the typography doing the heavy lifting and color used as punctuation, not wallpaper. There is wit in the restraint — a 1px hairline that becomes a "vs." divider, a footnote marker that animates like a raised hand. Mood references: Josef Müller-Brockmann grid posters, the *New York Review of Books* masthead, Wim Crouwel's New Alphabet experiments, a courtroom seating chart, the scoreboard of a Lincoln–Douglas debate, the clean back-and-forth of a chess clock. ## Layout Motifs and Structure - **The Two-Column Dialectic.** The defining motif: a strict modular grid (12 columns at desktop, collapsing to 4) where long-form content frequently splits into a left "Claim" column and a right "Counter" column, separated by a single vertical hairline that carries a small rotated label — `THESIS | ANTITHESIS`, `FOR | AGAINST`, `A | B`. The hairline is the stage; the columns are the podiums. - **Baseline grid you can feel.** Every element snaps to an 8px baseline rhythm. Faint horizontal rules at major intervals act like ruled notebook paper for arguments — visible on hover or in a "show grid" toggle, otherwise implied through perfect vertical alignment. - **The Standings Ledger.** Lists of topics/debates render as a typographic ledger: numbered rows, flush-left titles, right-aligned metadata (participants, last move, status) — ledger lines between rows, no cards, no shadows. It reads like a tournament bracket flattened into a table. - **Marginal annotations.** A persistent narrow left or right margin column holds running notes: section numbers (`§1`, `§2.3`), timestamps, "moderator note" flags. This margin is the conscience of the page. - **Full-bleed title acts.** Section openers go edge-to-edge with a single oversized line of type set against pure white, the only color a thin amber underline that draws itself on scroll. Between acts, the page breathes — a full viewport of white with one centered hairline and a §-number, like the pause between speakers. - **Asymmetric weighting.** Headlines hang in the left two-thirds; supporting apparatus (dates, bylines, vote tallies) sits in the right third in small mono caps. The imbalance is deliberate and consistent — a Swiss tension, not chaos. ## Typography and Palette **Typefaces (all Google Fonts):** - **Display & headlines:** *Archivo* (and *Archivo Expanded* for the biggest title acts) — a grotesque with a slightly mechanical, signage quality; set in heavy weights, tight tracking, flush-left ragged-right. This is the voice of the platform speaking. - **Body & long-form argument text:** *Source Serif 4* — a clean, contemporary Transitional serif that gives transcripts and essays a readable, almost legal authority. Generous measure (~66 characters), 1.6 line-height locked to the baseline grid. - **Apparatus, metadata, labels, the hairline tags, code-of-conduct fine print:** *IBM Plex Mono* — small caps, wide letter-spacing, used for everything that is "about" the argument rather than the argument itself: timestamps, `§` numbers, `FOR/AGAINST` labels, vote counts, status chips. **Palette:** - `#FBFAF7` — Paper. The dominant background; a barely-warm off-white, like good transcript stock. - `#14110F` — Ink. Near-black with a faint brown undertone; all primary text and hairlines. - `#5B5750` — Graphite. Secondary text, metadata, deactivated states. - `#C8551F` — Amber Lectern. The single accent: timer glows, the self-drawing underline, the active speaker indicator, the "your turn" pulse. Used sparingly — one or two appearances per screen. - `#1F4D3D` — Forest Quorum. A deep council-room green reserved for "resolved / consensus reached" states and the rare second accent (links on hover). - `#E7E2D8` — Stone Rule. The color of grid lines, table dividers, the baseline ruling — visible enough to structure, quiet enough to ignore. High-contrast, near-monochrome by default; color is earned. ## Imagery and Motifs - **No photography of people.** Instead: abstract diagrams of argument. SVG line-figures of facing podiums, a balance scale rendered as two stacked rules, a flowchart of "claim → evidence → rebuttal" drawn in single-weight strokes. - **The hairline vocabulary.** A library of 1px lines that *mean* things: the vertical "vs." divider, the horizontal "speaking time elapsed" bar that fills amber, the bracket lines that group sub-arguments, the strike-through that animates over a "withdrawn" point. - **Numbered everything.** `§` section marks, `[1]` `[2]` reference markers, `01 / 24` pagination — set in Plex Mono, treated as a decorative system in their own right. - **Stage geometry.** Subtle recurring shapes: two facing trapezoids (podiums), a thin amber rectangle (the timer light), a centered dot (the gavel rest). Used as section dingbats and loading states. - **Margin glyphs.** Small mono icons in the annotation margin: a raised-hand mark for "interjection," a clock for "timed segment," an open-quote for "cited," a small flag for "moderator note." - **Texture is restraint.** The only "texture" is the faint baseline ruling and a near-invisible paper grain on the Paper background — felt more than seen. ## Prompts for Implementation - **Build it as a narrative transcript, full-screen and scroll-driven.** The homepage is not a landing page — it is the opening of a debate. Act I: an oversized *Archivo Expanded* line ("Bring an argument. Leave with a better one.") on pure Paper, an amber underline drawing itself left-to-right as the page settles. Scroll into Act II: the Two-Column Dialectic introduces itself — left column types out a sample claim in Source Serif 4 (typewriter-effect, cursor blink), the vertical hairline draws downward, the right column answers. Each subsequent section is an "Act" separated by a full-viewport white pause bearing only a centered hairline and `§ II`, `§ III`. - **Scroll-triggered, staggered reveals on the baseline grid.** Text blocks rise 12px and fade in, staggered line-by-line, always snapping to the 8px baseline — the motion should feel like a transcript being set in type, not like marketing cards sliding around. - **The amber hairline is the protagonist of motion.** SVG path-draw it: under headlines on enter, along the "speaking time" bar, as the connector between a claim and its rebuttal when that section scrolls into view. Reuse the same line, redrawn in different geometries. - **Cursor as moderator's pointer.** A subtle cursor-follow: near interactive elements a thin amber tick mark trails the cursor; over the central "vs." hairline the cursor reveals a faint `FOR / AGAINST` split label that tracks vertical position. Keep it 1px, restrained, never playful-bouncy. - **Hover states are typographic, not chromatic.** Links get an underline that draws in (underline-draw); ledger rows shift their right-aligned metadata 4px and reveal a hairline; nothing lifts, glows, or casts a shadow except the single amber timer element. - **"Show the grid" easter toggle.** A small mono control in the footer that reveals the full modular grid and baseline ruling overlaid on the live page — the design philosophy made literally visible. - **Typeset, don't decorate.** Generous margins, ragged-right setting, real hanging punctuation if achievable, small-caps Plex Mono apparatus in the margins. Let whitespace and alignment carry 90% of the visual interest. - **AVOID:** CTA-stacked hero blocks, pricing tiers, three-up stat grids with big animated counters, testimonial carousels, glassmorphic frosted cards, drop shadows, gradient meshes, hand-drawn doodles, emoji. If it looks like a generic SaaS template, it has failed. ## Uniqueness Notes Differentiators from other designs: 1. **Argument-as-architecture system** — the recurring Two-Column Dialectic with a labeled vertical hairline ("THESIS | ANTITHESIS") and a margin column of `§`-numbered annotations is a bespoke structural language, not a borrowed layout pattern. The whole UI is built from 1px lines that carry semantic meaning. 2. **Near-monochrome Swiss discipline in a sea of warm gradients** — palette is Paper/Ink/Graphite with amber and forest-green used as rare punctuation; explicitly rejects the 93% "gradient" / 98% "warm" / 85% "glassmorphism" defaults in the corpus. 3. **Typography does everything; imagery does almost nothing** — no photography of people, no illustration warmth; instead a typographic apparatus of `§` marks, numbered references, mono small-caps labels, and ruled baselines, plus austere SVG line-diagrams of podiums and balance scales. Motion is a single self-drawing amber hairline reused in different geometries. Chosen seed/style: **swiss typography clean** Avoided overused patterns from frequency analysis: hand-drawn (94%), glassmorphism (85%), card-grid (92%), warm palette (98%), gradient (93%), photography (98%), pastoral-romantic / warm-inviting tone, cursor-follow-as-bouncy-spring. Leaned instead toward underused territory: swiss (6%), mono typography used with rigor rather than as decoration, near-monochrome high-contrast palette, editorial-flow/single-column layout, path-draw-svg as the *only* motion device.