# Design Language for rironbusou.net ## Aesthetics and Tone rironbusou.net — *理論武装*, "to arm oneself with theory" — is rendered as **a ballistics laboratory for arguments**: a cold, precise, navy-on-graph-paper armory where ideas are weighed, sectioned, and load-tested like ordnance. The mood is **dark-mode blueprint terminal** crossed with the dry hush of a forensics bench at 3 a.m. — not the green-phosphor hacker cliché, but a *naval engineering drafting room* lit by one over-bright task lamp. Everything reads as if drawn with a 0.2mm Rotring pen on cyan-blue vellum, then photographed under a worklight: hairline construction lines, dimension arrows, exploded-view callouts, torque tables. The tone is **scholarly-intellectual with an edge of quiet menace** — the site does not shout, it *catalogs*. It treats a rhetorical position the way an armorer treats a rifle: stripped to components, each part labeled, each failure mode annotated in the margin. There is wit in it — the deadpan of a technical manual that knows it is describing something dangerous — but never whimsy. The visitor should feel they have walked into the *inventory room* of someone who has thought very carefully about how arguments break, and who has built shelving for the pieces. The emotional arc across the page: **enter the armory → pick up a thesis → field-strip it → reassemble it stronger → walk out armed.** Cold light, warm conclusion. ## Layout Motifs and Structure The page is a **layered-depth blueprint stack** — not flat sections, but *transparent drafting sheets* laid one over another, each at a slightly different Z-depth, so that scrolling feels like flipping through a clutch of vellum overlays clipped to the same drawing board. (Layered-depth sits at 12% in the frequency analysis; the dominant patterns — card-grid 91%, full-bleed 87%, centered 81% — are deliberately refused. There is **no card grid here.** There is a *parts catalog*, which is a different organism: a left-aligned ledger column, never a gallery of equal tiles.) - **The drafting board.** A fixed 8px cyan graph-paper grid underlies the entire document, slightly brighter every 5th line (the classic engineering-pad rhythm). It never scrolls away; content sheets float above it. - **Title block, bottom-right, always.** Every full-height section carries an actual engineering **title block** pinned to its lower-right corner — sheet number ("SHT 03 / 07"), revision letter, scale ("1:1 — ACTUAL SIZE"), and a drawn-by initial. This is the site's persistent navigational furniture instead of a nav bar. - **Dimension lines as dividers.** Sections are separated not by whitespace or rules but by **horizontal dimension lines** — the kind with arrowheads at both ends and a measurement floating above ("∅ 142mm", "OVERALL LENGTH 1,003"). The numbers are nonsense-but-plausible; they are decoration that pretends to be data. - **Exploded-view centerpiece.** The hero is an **exploded assembly diagram** of a fictional object — "THE THESIS, ASSEMBLY 003" — its components (Premise, Warrant, Backing, Qualifier, Rebuttal, in Toulmin's vocabulary) drawn floating apart along a vertical axis line, each tethered by a leader line to a numbered callout bubble in the right margin. Scroll-triggered, the parts slide together into a single silhouette. - **The parts catalog.** The body content is a **single-column ledger** — left-aligned rows, each with a part-number prefix (`RB-001`, `RB-002`…), a monospace label, and a hairline rule beneath. It reads top-to-bottom like a bill of materials, never wrapping into columns. - **Margin annotations.** Real content lives in the *margins* too: handwritten-style notes in the gutter (set in a mono-italic), arrows pointing back into the main column, "SEE DETAIL B" callouts. The page is 70% drawing, 30% marginalia. - **Asymmetric ballast.** The left third is the heavy ledger column; the right two-thirds is mostly graph-paper void crossed by leader lines and callout bubbles. The composition leans left, like a drawing pinned by its left edge and curling at the right. ## Typography and Palette **Fonts — all Google Fonts, three voices, never blended:** - **Display & headings — *Major Mono Display*.** A skeletal, all-caps monospace with the look of a stencil cut by a CNC router. Used for section titles, the wordmark "RIRONBUSOU.NET", and every title-block field. Set wide-tracked (0.15em), small-caps-feel, in the cold cyan. It looks like text routed into an aluminum plate — appropriate for an armory. - **Body & ledger — *IBM Plex Mono*.** The bill-of-materials text, part numbers, all running copy. Plex Mono has just enough humanist warmth to be readable in long passages while still reading as *engineering document*, not *hacker terminal*. Regular for body, Medium for part-number prefixes. - **Marginalia — *Reddit Mono* in italic** (or, as fallback hand, *Cousine* italic). The gutter annotations, "SEE DETAIL B" notes, drawn-by initials, and the deadpan asides. Slightly smaller (0.8rem), set at a faint 2° rotation as if hand-jotted against the printed grid. **Palette — midnight-blue blueprint, cold and exact:** - `#0A1A2F` — **Drafting Navy.** The base sheet color; the whole page sits on this near-black blue. - `#0E2240` — **Deep Vellum.** Slightly lighter panel color for the layered sheets, so the stack reads in depth. - `#3FB6E8` — **Cyan Ink.** The graph grid, all construction/dimension/leader lines, headings. The single dominant accent — the color of the drafting pen. - `#7FD4F2` — **Light Cyan.** Brighter strokes: the every-5th grid line, active callout bubbles, hover states. - `#F4F7FA` — **Worklight White.** Body text and primary labels — the harsh white of a task lamp on white paper. - `#9FB3C8` — **Graphite Grey.** Secondary text, the marginalia, "drawn by" fields — pencil against the blue. - `#E8662B` — **Hazard Orange.** Used *once or twice per page only* — the "DANGER" stamp, the single rejected-premise callout, the rev-cloud around a critical correction. The only warm color in the armory; it earns its heat. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is SVG, drawn as if by a draftsman's hand — thin strokes, no fills except hatching.** - **Exploded-assembly diagrams** of fictional "argument-objects": leader lines, ballooned callout numbers, centerline dash-dot axes (`— · — · —`), section-cut hatching at 45°. - **Dimension lines** everywhere — double-arrowheaded, with witness lines and floating measurements in Major Mono Display. - **Title blocks** — rectangular nested cells, lower-right of every sheet, filled with sheet number / scale / rev / date / drawn-by. - **Revision clouds** — those bumpy scalloped outlines that engineers draw around changes — used in Hazard Orange around exactly one "corrected" claim, with a triangle-numbered rev flag. - **Tolerance & torque tables** — small monospace grids of plausible-nonsense specs ("WARRANT TENSILE: 4,200 ± 150 — PASS"), purely decorative, rendered as drawn tables not HTML tables. - **Stencil ordnance silhouettes** — abstract, never literal weaponry: a wrench, a caliper, a torque key, a cartridge *outline* — flat cyan line-art, used as section ornaments. Tasteful, technical, never edgelord. - **Graph-paper grid** — the eternal substrate, 8px minor / 40px major, in two cyans. - **Stamp marks** — round and rectangular rubber-stamp impressions ("REVIEWED", "FIELD-TESTED", "REJECT"), slightly rotated, slightly ink-starved, in cyan or the one orange. ## Prompts for Implementation Build rironbusou.net as **a single-route, vertically scrolled drafting set** — one HTML file, one CSS file, one JS module. The page is *seven sheets* of a fictional engineering drawing for "ASSEMBLY 003 — THE THESIS." Treat the scroll as the act of flipping through clipped vellum. There is **no CTA button, no pricing block, no stat grid, no testimonial row, no email signup, no contact form.** There is only the drawing set and its marginalia. **Storytelling structure (seven sheets, vertical scroll, layered-depth Z-shift transitions):** 1. **SHT 01 — COVER SHEET.** Black-blue void, the graph grid fading up line-by-line (`path-draw-svg` stroke animation). Wordmark "RIRONBUSOU.NET" routes itself in Major Mono Display, stencil by stencil. Title block draws itself bottom-right: "ASSEMBLY 003 / SCALE 1:1 — ACTUAL SIZE / REV —". A single line of marginalia in the gutter: *"theory, field-stripped."* 2. **SHT 02 — GENERAL ARRANGEMENT.** The whole "thesis-object" appears as one assembled silhouette, dead center, with overall dimension lines wrapping it. A slow cursor-follow parallax: leader lines lengthen toward the pointer as if the draftsman's hand is tracking it. Establishes the parts to come. 3. **SHT 03 — EXPLODED VIEW.** The centerpiece. As you scroll, the silhouette *flies apart* along its vertical axis into five components (Premise / Warrant / Backing / Qualifier / Rebuttal), each drifting to its own Z-layer, each sprouting a leader line to a numbered callout balloon in the right margin. Scroll-scrubbed, fully reversible. Stagger the part-separations. 4. **SHT 04 — PARTS CATALOG.** The single-column bill-of-materials ledger. Rows reveal one at a time (`fade-reveal`, staggered): `RB-001 · PREMISE · qty 1 · "the load-bearing claim"` … each with a hairline rule that draws left-to-right. Marginalia arrows point from gutter notes back into specific rows. 5. **SHT 05 — TOLERANCES & FAILURE MODES.** Drawn spec tables in monospace. One row is wrapped in a Hazard-Orange revision cloud with a rev-triangle "1" — the *rejected premise* — annotated in the margin: *"see DETAIL B — does not hold under load."* This is the only warm color on the page; let it be loud against all that cold cyan. 6. **SHT 06 — REASSEMBLY.** The exploded parts slide *back together* (reverse of SHT 03), now with the orange-flagged part visibly replaced by a corrected component drawn in clean cyan. The silhouette re-forms, tighter. A stamp thuds down, slightly rotated: "FIELD-TESTED" in cyan. Use a `spring` settle on the final snap-together. 7. **SHT 07 — REVISION HISTORY / TITLE BLOCK.** The full engineering title block at architectural scale: revision table (REV — → REV A), drawn-by, checked-by, date "2026", a faint "END OF SET" stamp. The graph grid slowly de-illuminates line by line as you reach the bottom. Last marginalia line: *"walk out armed."* **Motion vocabulary:** `path-draw-svg` for every line that appears (grid, dimensions, leaders, table cells — nothing fades in flat; everything *gets drawn*). `cursor-follow` parallax on leader lines (subtle — 6–10px max). Scroll-scrubbed `morph` for the explode/reassemble. `stagger` on catalog rows and part-separations. `spring` only on the final reassembly snap. `pulse-attention` — once — on the Hazard-Orange rev cloud when it scrolls into view, then it goes still. Respect `prefers-reduced-motion` by jumping lines to drawn-state instantly. Everything must feel **mechanical and exact**, never bouncy or playful — easings should be near-linear with a tiny ease-out, like a plotter pen. **Texture:** a very faint paper-tooth noise overlay (3–4% opacity) and an extremely subtle vignette as if from a worklight slightly off-axis. Hairlines should be true 1px (0.5px on retina) cyan — crisp, never glowing. Resist the urge to add neon bloom; this is a *drafting room*, not a synthwave poster. ## Uniqueness Notes Differentiators against the frequency corpus: 1. **Blueprint-as-armory, not terminal-as-hacker.** "Terminal" sits at 23% and almost universally means green-on-black command lines, scanlines, glitch. This site is monospace and dark-mode but reads as a *naval engineering drafting set* — dimension lines, title blocks, exploded views, revision clouds — a vocabulary essentially absent from the corpus. It weaponizes the *technical-manual* idiom, not the *console* idiom. 2. **Parts catalog instead of card grid.** Card-grid is at 91% — near-universal. rironbusou.net has zero cards: its body is a single-column bill-of-materials ledger with part numbers and hairline rules, structurally a *different object* from a gallery of equal tiles. 3. **The exploded-view centerpiece as the core interaction.** Scroll-scrubbed assembly/disassembly of a fictional "argument-object" along a centerline axis, with leader-lined callout balloons — a literal visual metaphor for 理論武装 (field-stripping and re-arming a thesis). No other site in the set is built around an engineering exploded diagram. 4. **One-color-warmth discipline.** A near-monochrome cold-cyan-on-navy palette where Hazard Orange appears exactly once or twice, on the single rejected premise — restraint as a rhetorical move, against the 94%-gradient / 98%-warm corpus norm. 5. **Marginalia as content layer.** 30% of the page lives in the gutter — hand-jotted mono-italic notes, "SEE DETAIL B" callouts, drawn-by initials — a deliberate departure from centered, hero-dominant layouts (centered 81%, hero-dominant 16%). Chosen seed/style: **terminal command line dev** — *radically recontextualized* into a midnight-blue engineering blueprint armory (aesthetic: terminal→blueprint-technical-drawing, layout: layered-depth, typography: tech-mono, palette: midnight-blue, patterns: path-draw-svg + morph, imagery: line-illustration, motifs: grid-lines + sci-fi-hud→engineering-drawing, tone: scholarly-intellectual). Avoided per frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid (91%), full-bleed (87%), centered (81%), warm palette (98%), gradient (94%), cursor-follow as a *gimmick* (89% — used here only as a restrained 6–10px leader-line tracker), parallax bloat (90% — confined to the layered-sheet stack).