# Design Language for rironbusou.com ## Aesthetics and Tone rironbusou.com — 理論武装, "to arm oneself with theory" — is presented as **the field manual of an argument-armory**: a stark, ink-on-blueprint workshop where claims are forged, stress-tested, and racked like weapons. The aesthetic is **engineering-brutalist crossed with a tactical-schematic blueprint**: heavy ruled frames, exposed measurement marks, riveted section headers, and exploded-diagram callouts — all rendered as if printed by a drafting plotter onto graph-grade paper, then scanned under a cool fluorescent light. The tone is **grounded-earthy meets authoritative**, never slick: this site does not sell, it *equips*. Copy reads like the captions in a haynes-style repair manual — terse, imperative, numbered. Nothing glows; nothing floats prettily. Everything is bolted down, labeled, and load-bearing. The mood is the satisfying clank of a well-machined argument locking into place: confident, a little severe, quietly proud of its own rigor. Where most sites aim to charm, this one aims to *withstand*. ## Layout Motifs and Structure The page is a **single vertical "exploded assembly" — eight bolted plates stacked down a 12-column drafting grid**, but the grid is *visible*: a faint 8px graph-paper rule runs edge to edge behind everything, with a heavier 64px module line every eighth cell. Each section is a **technical plate**: a 2px hairline rectangle with rounded-rivet dots at its four corners, a plate-number tab notched into its upper-left ("PLATE 03 / ARGUMENT FRAME"), and a thin dimension-line along one edge showing an arbitrary measurement ("← 1140 →"). Layout deliberately uses **broken-grid asymmetry inside the frame**: text columns sit at columns 2–7, diagrams cantilever out to columns 8–12 and *overhang the plate border by 12px*, with a leader-line tying the overhang back to the body text. No hero image, no card grid, no centered marketing column — instead the eye travels a **timeline-vertical spine**: a single 2px rule down the left margin (column 1) with hollow circular nodes at each plate, like the binding holes of a ring-bound manual. Navigation is that spine: clicking a node scroll-snaps to its plate; the active node fills solid and a condensed numeral slides out beside it. Footer is a single line of plotter-style registration marks and a fake part-number. The whole composition reads top-to-bottom like disassembling, then reassembling, one complete argument. ## Typography and Palette **Type system — Google Fonts only:** - **Plate headers / part-tabs / numerals:** `Saira Condensed` (weights 500–700, uppercase, letter-spacing `0.08em`). Its narrow, machine-stamped silhouette evokes stencil labels on equipment crates and the condensed grotesque of engineering title-blocks. - **Body copy / captions / dimension labels:** `Spline Sans Mono` (weights 400–600). A monospace with humanist warmth — keeps the manual-caption rhythm and the fixed-pitch tabular look for the numbered procedure lists, without the cold sterility of pure DOS mono. Body set at 16px / 1.65, captions at 12.5px / 1.5 with `0.02em` tracking. - **Oversized plate numbers / the masthead word 理論武装:** `Anton` (single weight, ultra-condensed display) used at 96–220px, set in outline-only (transparent fill, 2px stroke) so it behaves like a stenciled label rather than a banner. **Palette:** - `#0E1B22` — "drafting ink" near-black, primary text and hairlines - `#F4F1E6` — "plotter paper" warm bone, default background - `#1E3A4C` — "blueprint slate" deep desaturated teal-navy, used as the inverted-plate background for one or two sections - `#C9D6CF` — "graph rule" pale sage-grey, the 8px grid lines and faint fills - `#D24A2B` — "registration red" — single accent only: leader-lines, active nodes, the one word being defined, error/warning ticks - `#8A8170` — "pencil grey" — secondary captions, dimension numerals, disabled states Inverted plates flip to `#1E3A4C` ground with `#F4F1E6` text and keep `#D24A2B` as the lone accent — like a true cyanotype blueprint section dropped into the middle of the manual. ## Imagery and Motifs No photography. The imagery vocabulary is entirely **drafted line-work and schematic diagram**: - **Exploded-assembly diagrams** built in inline SVG: an "argument" rendered as a machined object — a central claim-block, evidence-bolts spaced around it on dimension lines, a "load arrow" showing the counter-pressure it must resist. Each part has a leader-line and a numbered balloon (①②③) keyed to the body text. - **Stress-test gauges:** small SVG dial-meters with a needle, labeled "STEELMAN PRESSURE", "EVIDENCE TORQUE", "FALLACY DRAG" — decorative-but-meaningful gauges that animate their needle on scroll-in. - **Corner rivets:** every plate, tab, and callout box gets four 6px hollow-ring "rivet" dots — the recurring connective motif. - **Dimension lines & registration marks:** thin lines terminating in tick-arrows with a number floating above; plus tile-able crop/registration crosses in the page margins, as if the sheet were trimmed from a larger plot. - **The graph-paper field:** an ever-present 8px CSS grid (sage on bone), with a heavier line every 64px — the literal substrate everything is "drawn" on. - **Stencil glyphs:** section icons drawn as if cut from a brass stencil — a shield, a wrench, an anvil, a pair of calipers, a chain link — all single-weight 2px stroke, no fill, sharp-angled. ## Prompts for Implementation Build as **one HTML page, one CSS file, one ES module** — no framework, no build step. The experience is a ~90-second "disassemble and reassemble one argument" walkthrough, scroll-driven, eight plates. - **Structure:** sticky left spine (column 1) with hollow nodes; `scroll-snap-type: y proximity` so plates settle. Each `
` is a technical plate with corner rivets (CSS pseudo-elements), a part-number tab, and one cantilevered SVG diagram overhanging the right border with a `path-draw-svg` leader-line connecting it to a sentence in the body. - **Narrative arc across plates:** (01) Masthead — outline `理論武装` over the graph field, a single line "An armory for the things you believe." (02) Intake — a raw, unrefined claim shown as a rough lump. (03) The Frame — exploded diagram naming the parts of a sound argument. (04) Steelman Press — animate a gauge needle rising as the user scrolls; the claim's lump gets "machined" into a clean block via an SVG `morph`. (05) Stress Bench — three dial-gauges (pressure / torque / drag) `counter-animate` their readouts on enter. (06) The Rack — the finished argument racked beside earlier rejected ones (greyed, struck through with registration-red ticks). (07) Field Use — short numbered procedure list, monospace, like manual steps. (08) Colophon plate — plotter registration marks, fake part-number, the spine's last node. - **Animation:** keep it *mechanical*, not bouncy. Use `scroll-triggered` `fade-reveal` with a slight 8px translate, `stagger` the numbered balloons in diagrams, `path-draw-svg` for every leader-line and dimension-line (draw on enter), needle sweeps with a stiff `cubic-bezier(.2,.8,.2,1)`. Nodes on the spine do an `underline-draw`-style fill. One `morph` (lump→block). No parallax, no cursor-follow blob, no tilt-3d cards. - **Texture:** apply a very faint SVG `feTurbulence` paper grain at ~3% opacity over the whole page; print-style hairlines must stay crisp at 1–2px (use `shape-rendering: crispEdges` on grid SVG). - **AVOID:** CTA buttons, pricing tables, stat-grids, testimonials, email capture, logo walls, hero photography, glassmorphic cards, hand-drawn doodle style, soft pastel gradients. There is no "sign up." The reward is the finished, racked argument itself. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The graph-paper substrate is real layout infrastructure, not decoration.** The visible 8px/64px grid is the actual measure everything snaps to, and diagrams literally overhang plate borders with leader-lines back to text — a drafting-manual logic almost nothing else in the corpus uses. Most sites hide their grid; this one frames it. 2. **An "armory / repair-manual" metaphor rendered as exploded engineering diagrams.** Other technical-leaning sites lean cyberpunk-HUD or terminal-CLI; this is the *opposite vibe* — analog plotter ink, brass stencils, rivets, dimension lines, Haynes-manual captions. Schematic, not sci-fi. 3. **Single registration-red accent on warm bone + one cyanotype-slate inverted plate.** No gradients, no neon, no glass. The palette discipline (six flat colors, one accent, ink hairlines) reads as engineering print, sharply against the 94% gradient / 98% warm-photography conventions. 4. **Mono is paired with ultra-condensed stencil display (Saira Condensed + Anton), not with a humanist sans** — pushing the 94% mono convention toward equipment-crate stenciling rather than the usual dev-docs look. 5. **No CTA, no hero image, no card grid** — the page is a vertical exploded-assembly with a ring-binder spine for nav, deliberately sidestepping the 91% card-grid / 87% full-bleed / 16% hero-dominant patterns. Chosen seed/style: *brutalist anti-design experiment* — aesthetic: brutalist, layout: broken-grid + timeline-vertical, typography: mono + condensed, palette: high-contrast (drafting ink on bone) with one cyanotype inverted plate, patterns: path-draw-svg + scroll-triggered + morph, imagery: line-illustration / data-viz (schematic gauges), motifs: sharp-angles + grid-lines, tone: grounded-earthy + authoritative. Avoided overused patterns from frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid (91%), full-bleed (87%), parallax (90%), cursor-follow (89%), spring/magnetic bounce, gradient palettes (94%), warm-photography imagery.