# Design Language for riron.xyz ## Aesthetics and Tone riron.xyz ("riron" — 理論, Japanese for *theory*) is a **brutalist anti-design specimen room for unfinished theories** — a site that behaves like a chalk-dusted seminar wall photographed at 2 a.m., where half-proved conjectures, abandoned lemmas, and contradictory axioms are pinned up raw, with their staples showing. The mood is **rigorous, slightly hostile, deliberately under-built**: not the friendly "neubrutalism" of thick borders and candy shadows, but true brutalism — exposed structure, system fonts that look like they were never styled, content that refuses to be reassuring. The tone is **scholarly-intellectual crossed with edgy-rebellious**: it speaks the way a furious mathematician argues at a blackboard — terse, certain, occasionally crossing things out mid-sentence with a visible strikethrough. Nothing here is "delightful." There are no rounded corners, no easing curves that bounce, no warm gradients, no soft drop shadows. The page looks like it could be a `.txt` file that gained just enough CSS to misbehave. Inspiration: the original Bauhaus mimeographed manifestos, Donald Knuth's TeX error logs, the wall behind a chalkboard in a brutalist 1968 university math building, the printout aesthetic of arXiv preprints before anyone made them pretty, and the editorial violence of David Carson's *Ray Gun* deconstruction. The emotional target: the viewer should feel they have **walked in on a working argument**, not landed on a marketing page. ## Layout Motifs and Structure The skeleton is a **visible 12-column grid that is never hidden** — column rules are drawn as 1px hairlines all the way down the page, in a near-invisible warm grey, so the structure that other sites conceal is here a permanent backdrop, like graph paper. Onto this grid, content is placed with a **broken-grid / anti-design** logic: a "theorem" block might span columns 2–7, then its "proof sketch" deliberately starts in column 9 and runs *off the right edge of the viewport*, clipped, forcing horizontal awareness; a "counterexample" block is rotated −1.5° and overlaps the theorem above it by 24px, casting a hard-edged offset rectangle (not a blur) like a photocopied page laid askew on another. The page is **one long single-column-feeling vertical scroll** but the column it lives in keeps shifting left and right, never centered twice. No hero. No nav bar. The "navigation" is a **fixed left margin gutter** that prints, vertically and in mono, the running section numbers — `§0 · §1 · §1a · §1a′ · §2 · ∅` — as plain anchors with no styling beyond an underline that the user drew (path-draw-svg) on first scroll. There is a **footer that is just a horizontal rule and the string `// end of file — no conclusion reached`**. Section transitions are marked by **full-width horizontal rules of varying weight** (1px, then 3px, then a dotted 1px, then a doubled rule) — the rules themselves are the rhythm. Negative space is used as **a slammed pause**: occasionally an entire viewport-height of empty graph-paper grid with nothing but a single floating footnote marker `[7]` in the corner. ## Typography and Palette **Type system (Google Fonts only — chosen to look *unstyled*, which is the whole point):** - **Body & "manuscript" face:** `IBM Plex Mono` (weights 400, 500, 600; italic available) — everything is monospaced, because this is a working document, not a brochure. Body text set at 16px / 1.65 line-height, `letter-spacing: 0`. Long passages are set ragged-right, never justified. - **Display / theorem-headings face:** `Archivo Black` — a single ultra-heavy grotesque, used ONLY for the words "THEOREM", "LEMMA", "PROOF", "Q.E.D.", "FALSE", set in ALL CAPS, tight `letter-spacing: -0.02em`, often oversized to 64–120px so the word physically dominates and sometimes overflows its column. No other use. - **Marginalia / "handwritten correction" face:** `Shantell Sans` (the only soft face allowed) — used exclusively for fake hand-edits: crossed-out words, "←wrong", "see §2", arrows-as-text, set at 14–18px, slightly rotated (−3° to +4°), in the chalk-blue accent. It must look like a *different person* annotated the page. **Palette (high-contrast, near-monochrome with two stains):** - `#0B0B0B` — near-black ink, the primary text and rules. - `#F4F2EC` — warm bone-paper, the background (NOT pure white — a photocopied-page off-white). - `#C9C4B6` — faint warm grey, used ONLY for the permanent grid hairlines and column rules. - `#1A39C4` — hard ballpoint chalk-blue, the marginalia / correction / annotation stain. Used sparingly, never as fill. - `#C7202B` — strikethrough red, used ONLY for crossed-out text, the word "FALSE", and the error-band. Never decorative. - Optional 6th: `#0B0B0B` at 6% opacity for the photocopy-offset shadow rectangles (hard-edged, no blur). ## Imagery and Motifs **No photography. No illustration. The "imagery" is typographic and diagrammatic, drawn live with SVG/CSS:** 1. **The permanent grid.** 12 vertical hairlines + a faint horizontal baseline grid, fixed behind everything — the graph paper the whole argument is written on. 2. **Hand-drawn proof diagrams as inline SVG:** a commutative-diagram square with arrows, a Venn-ish pair of overlapping rough rectangles labelled `A` and `¬A`, a number line with an open circle, a directed graph of three nodes — all drawn with deliberately *imperfect* stroke paths (slight wobble, un-closed corners), 1.5px black stroke, no fill, animated via path-draw-svg on scroll-in so they appear to be *being chalked in*. 3. **Strikethroughs and corrections:** real `` text with a hand-drawn SVG line over it (not a clean text-decoration), plus chalk-blue marginal arrows pointing at it. At least three places on the page have a sentence that gets *crossed out and rewritten* as you scroll past (the rewrite swaps in via a stagger). 4. **The error band:** one full-width strip, red text on bone, monospaced, reading like a compiler log — `! Undefined control sequence §1a′ — proof depends on lemma not yet proved [line 412]` — a homage to TeX errors, sitting where a "feature highlight" would normally go. 5. **Footnote markers `[1] [2] … [n]`** scattered as floating superscripts, some of which, on hover, *don't have a footnote* and instead reveal the marginalia text `// missing — author's note: still owed`. 6. **Page-edge clipping:** at least two blocks deliberately run off the right viewport edge with `overflow: hidden` on the body's horizontal axis, so the user sees text get *guillotined* by the window — the anti-design admission that the content doesn't fit. 7. **A single ∅ (empty set) glyph**, 200px, `Archivo Black`, sitting alone in the final negative-space viewport — the conclusion that was never reached. ## Prompts for Implementation Build riron.xyz as **one HTML file, one CSS file, one small ES module** — no framework, no build step, no service worker. It is a ~75-second vertical read of a working mathematical argument that progressively *falls apart*. There must be **no CTA, no pricing, no signup, no testimonials, no stats grid, no logo wall, no contact form, no FAQ, no newsletter, no chatbot, no cookie banner, no hero section**. If a section feels like marketing, delete it. **Narrative structure (the page IS the proof, scrolled top to bottom):** 1. **§0 — Premise.** Bone-paper, permanent grid visible. A single line in IBM Plex Mono: `We will attempt to prove that riron.xyz is internally consistent.` Below it, oversized `Archivo Black`: **THEOREM**, overflowing its column. The left gutter section-index draws its underline (path-draw-svg) as the page loads. 2. **§1 — First lemma.** A clean-looking proof block in columns 2–7. A hand-chalked commutative-diagram SVG draws itself in on scroll. Everything seems fine. Chalk-blue marginalia in `Shantell Sans` in the right margin: `looks ok so far`. 3. **§1a — The dependency.** A block that starts in column 9 and runs *off the right edge*, clipped by the viewport. Mid-sentence, a word gets struck through in red and rewritten in chalk-blue: `complete` → `incomplete`. Stagger the rewrite. 4. **The error band.** Full-width red-on-bone TeX-style error log strip. Hard cut, no animation except a 1-frame "flash" (background goes `#C7202B` for 80ms then settles to bone with red text). This is the turning point. 5. **§1a′ — Re-proof attempt.** A counterexample block, rotated −1.5°, overlapping §1a by 24px, with a hard-edged 6%-black offset rectangle behind it like a misaligned photocopy. The `Archivo Black` word here is **FALSE** in strikethrough red. 6. **§2 — Negative space.** An entire viewport of empty graph-paper grid. Nothing but a floating `[7]` footnote marker in the corner. Hovering it reveals `// missing`. A long pause. 7. **∅ — No conclusion.** A 200px `∅` glyph alone, then the footer: a horizontal rule and `// end of file — no conclusion reached`. No "thanks for reading", no links out. **Motion (anti-design = restrained, mechanical, never bouncy):** - Use **stagger** for the strikethrough-and-rewrite reveals (each word steps in 30ms apart, linear, no easing). - Use **path-draw-svg** for: the gutter underline, all proof diagrams, the strikethrough lines themselves. - Use **scroll-triggered** reveals — but the reveal is a hard `opacity 0→1` over 120ms *linear*, plus a 4px upward translate. No fade-blur, no scale, no spring, no parallax, no cursor-follow, no magnetic hover, no tilt-3d. The cursor is the default arrow. Resist every trendy interaction. - Hover states: links get a 1px solid underline appearing instantly; footnote markers reveal marginalia text instantly. That's it. - One allowed flourish: the 80ms red "flash" on the error band. **Build notes:** the 12-column grid hairlines are real elements (or a repeating linear-gradient background) and must stay pixel-aligned on resize. Body has `overflow-x: hidden` so off-edge blocks are guillotined, not scrollable. `prefers-reduced-motion` disables the stagger and path-draw, showing final states. All "diagrams" are inline SVG with hand-wobbled paths — no clean geometry. Keep total weight tiny; this should feel like it loaded instantly because there's "nothing to it." ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The grid is permanently *visible* — the opposite of every other site.** 91% of designs use card-grid and 87% full-bleed to *hide* their structure; riron.xyz prints its 12 columns as hairlines down the whole page and shifts content across them off-balance. Structure as confession, not as scaffold. 2. **True brutalism, not neubrutalism, and explicitly anti-design.** No thick borders, no hard candy shadows, no playful chunky buttons — instead system-feeling mono type, photocopy-offset rectangles, page-edge clipping, and crossed-out content. It commits to the 5% anti-design and ~7% brutalist conventions while refusing the popular "fun brutalism" reading entirely. 3. **The page is a proof that fails.** Content architecture is a mathematical argument that visibly collapses (error band → FALSE → empty set → "no conclusion reached"). No other site uses *narrative failure* as the structure, and it pointedly has zero marketing sections. 4. **Marginalia as a second author.** A separate soft face (`Shantell Sans`, the *only* soft thing) appears solely as rotated hand-corrections in chalk-blue — a different "person" annotating the document — sitting against the rigid `IBM Plex Mono` body and `Archivo Black` headings. 5. **Motion is deliberately *anti-trend*.** It avoids the corpus's top patterns wholesale — no parallax (90%), no cursor-follow (89%), no spring (84%), no magnetic (79%), no tilt-3d (30%). Only linear stagger, path-draw-svg, hard opacity cuts, and one 80ms flash. **Chosen seed/style:** `brutalist anti-design experiment` — *aesthetic: anti-design (+ brutalist), layout: broken-grid, typography: mono (+ display-bold via Archivo Black), palette: high-contrast (near-monochrome + chalk-blue/strikethrough-red stains), patterns: stagger + path-draw-svg + scroll-triggered, imagery: line-illustration (hand-wobbled SVG diagrams) + grain-overlay (photocopy texture), motifs: grid-lines + book-scholarly, tone: scholarly-intellectual + edgy-rebellious.* **Avoided overused patterns (from frequency analysis):** hand-drawn aesthetic (94%), glassmorphism (83%), warm/gradient palettes (98%/94%), photography (98%), card-grid (91%), full-bleed (87%), centered (81%), parallax (90%), cursor-follow (89%), spring (84%), magnetic (79%), pastoral-romantic / warm-inviting tone. The only borrowed convention is `mono` typography (94%) and `path-draw-svg` (46%) — both load-bearing for the "working document" concept and used here against the grain.