# Design Language for riron.org ## Aesthetics and Tone riron.org — *riron* (理論), Japanese for "theory" — is built as **an isometric drafting table on which an abstract idea is being assembled, plate by plate, the way an engineer assembles an exploded-view diagram**. The governing image: a slate-grey drafting surface lit from a single high-left source, on which sit translucent acetate overlays, each one carrying a fragment of a proof — a lemma here, a counterexample there, an axiom resting at the base of a tower of consequences. Nothing is photographed. Nothing is decorative for decoration's sake. Every shape on the page is a **30°/150° axonometric primitive** — a cube, a prism, a stepped ziggurat of stacked planes — because a theory is a *structure*, and the most honest way to draw a structure is to draw it the way a machinist draws a part: in true isometric projection, no perspective foreshortening, every parallel line staying parallel forever. The tone is **scholarly-intellectual crossed with the quiet confidence of a well-drafted technical manual** — think the IKEA assembly booklet redrawn by a category theorist, or the patent-office axonometric plates of the 19th century rendered in cool drafting ink. It is calm, exact, faintly playful in the way that a beautifully labelled diagram is playful. It never shouts. It earns attention through precision: hairline construction lines, dimension arrows that actually point at things, fastener callouts ("⌀ AXIOM 3"), section cuts that reveal an inner layer. The mood is *the satisfaction of watching something complicated turn out to be made of simple, interlocking pieces.* This is deliberately a **dim-but-not-black drafting environment** — a desk lamp, not a void — so the palette is graphite and blueprint-cyan rather than the warm-gradient default that 98% of the corpus reaches for. Warmth, when it appears, is a single annotation orange: the colour of a draftsman's grease pencil correcting a line. ## Layout Motifs and Structure The page is one **continuous isometric build sequence** — a vertical scroll, but every "section" is an *assembly step* in an exploded diagram that slowly comes together as you descend. The viewport is treated as a fixed drafting plate; content slides up through it like sheets being placed on a light table. - **The isometric stage.** A persistent CSS `transform` context: everything inside `.plate` lives on a plane rotated `rotateX(58deg) rotateZ(-45deg)` (the classic 2:1 isometric), with content "popped up" off the plane via `translateZ`. Headlines and body copy sit on **upright billboard planes** (counter-rotated to face the reader, but casting an isometric shadow onto the stage so they still belong to the diagram). This means text is readable while the *world it sits in* is axonometric. - **Exploded-view spine.** Down the centre-left runs a faint **assembly axis** — a single dashed isometric line with little ⊕ registration marks where each step "clips in." Components animate *along this axis* into place: a cube floats in from upper-right, rotates to align, and locks with a tiny snap. - **Stepped ziggurat as section anchor.** Each major section is anchored by a **stack of isometric slabs** (3–6 planes, each offset and slightly translucent), labelled like drawing sheets: `SHEET 01 — PREMISE`, `SHEET 02 — DERIVATION`, `SHEET 03 — LIMIT CASE`. The reader is literally climbing a stack of proofs. - **Dimension-line framing.** Instead of boxes and rules, content blocks are bracketed by **engineering dimension lines** — thin lines terminating in arrowheads, with a measurement label floating mid-span (`⟵ 1 lemma ⟶`, `⟵ ∞ ⟶`). Negative space is *measured*, not just empty. - **Section-cut reveal.** At one point the whole isometric stack is "cut" by a diagonal **section plane** that sweeps through on scroll, exposing a hatched interior cross-section (the standard 45° section-hatching of mechanical drawing) — revealing what's inside an idea. - **No card-grid, no bento, no dashboard.** Components are *parts in an assembly*, never tiles in a grid. If two things sit side by side it's because they bolt together. ## Typography and Palette **Fonts — Google Fonts only. Three voices: a technical-drawing label face, a humanist body, and a precise mono for the "callouts."** - **Display / Sheet Titles — *Archivo Expanded* (wght 700–800, width Expanded).** Used for `SHEET 0X` headers and the riron.org wordmark. Archivo's expanded cut reads like the stencilled title block of a blueprint — broad, engineered, slightly industrial. Set in `letter-spacing: 0.18em`, all-caps, often laid *onto* an isometric plane so the letters skew with the drawing. - **Body / Argument Text — *Spectral* (wght 400, italic 400 for asides).** A transitional serif with a literary, thought-through warmth — the voice of someone explaining a theorem patiently. Generous `line-height: 1.75`. Spectral's slightly condensed italic carries the "marginalia" asides that float beside the main column on their own little dimension-lined slips. - **Callouts / Labels / Dimensions — *Spline Sans Mono* (wght 400–500).** Every technical annotation — the `⌀ AXIOM 3` fastener tags, dimension measurements, the assembly-axis registration codes, the section-cut legend — is in this mono. Tabular, calm, drafting-table neutral. Tracking `0.04em`, often at 11–13px, frequently in annotation-orange. **Palette — a graphite drafting desk under a single lamp, ink in blueprint-cyan, one grease-pencil correction colour. Eight values:** - `#1B1E24` — **Drafting Slate.** The desk surface / page background. Near-black but with a cool grey cast, never pure `#000`. - `#262B33` — **Plate Shadow.** The colour of an isometric plane in shade; used for the stacked-slab undersides. - `#E8EAED` — **Vellum White.** Primary text and the "top sheet" of any acetate stack — the colour of tracing paper held to light. - `#9AA3AE` — **Pencil Grey.** Secondary text, construction lines, the dashed assembly axis. Soft, drawn-with-a-2H. - `#3FA9C9` — **Blueprint Cyan.** The structural ink — outlines of isometric solids, the active dimension lines, link underlines drawn as construction strokes. The dominant accent. - `#1E5266` — **Deep Cyanotype.** A darker cyan for filled isometric faces and hover states — the saturated blue of an old blueprint print. - `#E07B39` — **Grease-Pencil Orange.** The single warm note: callout tags, the registration ⊕ marks at the moment they "lock," the section-cut hatching highlight. Used sparingly — a correction, an emphasis, never a fill. - `#5C6470` — **Hatch Grey.** The fill for 45° section-hatching and subtle isometric floor grids. ## Imagery and Motifs **No photography. No 3D-rendered glossy product. No stock illustration. Every visual is hand-built SVG/CSS in true isometric projection — the vocabulary of a mechanical-drawing plate.** - **The isometric solid family.** Cubes, hex prisms, stepped ziggurats, open-topped boxes, wireframe frames. Each can appear as: outline-only (cyan stroke on slate), face-filled (deep-cyanotype faces, cyan edges), or exploded (faces separated along normals with thin "leader" lines connecting them back). These are the *parts* of every theory diagrammed on the site. - **Construction lines.** Faint dashed cyan/grey lines that extend past the edges of solids — the leftover scaffolding of how a shape was drawn. They're never cleaned up; their persistence *is* the aesthetic. They animate in *first*, then the solid is "inked" over them. - **Dimension arrows.** Thin double-headed arrows with a gap in the middle for a label. Used to "measure" spacing, scale, and abstract quantities (`⟵ generality ⟶`). Drawn in pencil-grey, label in mono. - **Fastener / part callouts.** Little leader lines pointing at a solid, ending in a balloon containing a mono code: `A1 — AXIOM`, `B3 — COROLLARY`, `⌀ LEMMA`. Borrowed straight from exploded-view parts catalogues. - **45° section hatching.** Where a solid is "cut," its interior face fills with evenly spaced 45° hatch lines (hatch-grey), exactly as in mechanical drafting — the universal sign for "this is the inside." - **Isometric floor grid.** A very faint receding grid of diamonds on the drafting plane, fading toward the horizon — gives every solid a place to *stand*. Animated to drift one cell on parallax. - **Registration marks.** ⊕ crosshair targets at the points where assembly steps "clip in." They start pencil-grey, flash grease-orange at the lock moment, settle back. - **The title block.** Bottom-right of the viewport, a persistent miniature **drawing title block** (the boxed legend on real engineering drawings): `DWG riron.org · SHEET 0X/0N · SCALE 1:1 · DRAWN — [section name]`. It updates as you scroll. This is the site's "navigation." ## Prompts for Implementation Build riron.org as **a single-route, vertically-scrolled isometric assembly sequence** — one HTML file, one CSS file, one ES module. The conceit: the reader is at a drafting table watching an abstract idea (a "theory") get assembled in exploded-view, step by step, sheet by sheet. The whole thing is roughly an 80-second descent. There is **no CTA stack, no pricing block, no stat-grid, no testimonial row, no feature-card matrix, no email capture** — only the build sequence and its title block. **The isometric machinery (CSS):** - A root `.stage` with `perspective: none` — this is *axonometric*, not perspective. Inner `.plane` gets `transform: rotateX(58deg) rotateZ(-45deg)` and `transform-style: preserve-3d`. Solids are composed of `.face` divs each positioned with `rotateY`/`rotateX`/`translateZ`. Text billboards counter-rotate (`rotateZ(45deg) rotateX(-58deg)`) so they read flat, but get a skewed `box-shadow`/pseudo-element "shadow" projected onto the plane so they stay anchored to the world. - Construction lines are SVG `` with `stroke-dasharray`, animated via `stroke-dashoffset` (path-draw) so they sketch themselves in. Solids fade their fills in *after* the lines complete — "inking over the pencil." - Section hatching: a repeating linear-gradient at 45° (`hatch-grey` stripes), clipped to the cut face. **Storytelling structure (sheets, vertical scroll):** 1. **Title Block / Sheet 00.** Cold open on the bare drafting slate. The riron.org wordmark in Archivo Expanded laid onto an isometric plane, with construction lines extending off all four corners. The title block in the corner reads `SHEET 00 — DATUM`. A single ⊕ registration mark pulses. One line of Spectral: *"A theory is a structure. Watch it go together."* — typewriter-revealed. 2. **Sheet 01 — Premise.** A single isometric cube floats in from upper-right along the assembly axis, rotates to align, locks with a snap (⊕ flashes orange). Dimension lines bracket it: `⟵ 1 assumption ⟶`. Body copy on a billboard plane beside it states the premise. 3. **Sheet 02 — Derivation.** The cube *explodes* — its six faces separate along their normals, leader lines connecting them, each face gaining a fastener callout (`A1`, `A2`…). As you scroll the faces drift apart then re-converge into a *new, taller* solid (a stepped ziggurat) — the premise has produced consequences. Marginalia slips (Spectral italic on dimension-lined paper) float in on the right. 4. **Sheet 03 — Section Cut.** A diagonal section plane sweeps across the viewport on scroll; everything behind it is "cut." The ziggurat's interior reveals 45° hatching and an inner core solid that was hidden. Legend appears in mono: `SECTION A–A`. Copy: what's *inside* the idea. 5. **Sheet 04 — Limit Case.** The whole assembly is pushed to an extreme — solids stretch, the isometric grid recedes toward a vanishing diamond, a dimension arrow labelled `⟵ ∞ ⟶` extends off-screen. The structure holds. Quiet, slightly awed copy. 6. **Sheet 05 — Closing Plate.** All the solids gently re-converge into one clean, fully-inked isometric object sitting square on the grid — the finished theory. Construction lines fade to nothing. The title block stamps `SHEET 05/05 · COMPLETE`. Final Spectral line, then the wordmark again, now fully inked (no construction lines). End. **Motion vocabulary (favour the underused):** - **path-draw-svg** for every construction line and dimension arrow — they *draw themselves*. This is the signature motion. - **scroll-triggered** assembly: components translate along the isometric axis (`translateZ` + `translateX` in plane-space) into locked positions, governed by scroll progress, not autoplay loops. - **morph** between solids (cube → ziggurat → final object) via interpolating face transforms. - A restrained **spring** only at the "lock" moment of each ⊕ registration — a single overshoot-and-settle, ~180ms. Nothing else bounces. - **stagger** the explode/re-converge of faces (40ms apart). - Parallax limited to the floor grid drifting one cell and construction lines lagging slightly behind their solids. - Respect `prefers-reduced-motion`: skip the explode animations, present each sheet already-assembled with construction lines static. **Texture & finish:** a very faint paper-grain noise over the slate background (2–3% opacity), a subtle vignette as if from a desk lamp's pool of light (lighter upper-left, darker lower-right). Links are rendered as cyan construction strokes that "draw" on hover (underline-draw). Cursor near a solid causes its construction lines to brighten faintly — *attention as illumination*, not a glow blob. ## Uniqueness Notes Differentiators, each a deliberate move against the corpus frequency analysis: 1. **True axonometric, page-wide, as the structural metaphor for "theory."** Isometric layout sits at ~4% and isometric-icons at ~4%; almost no site in the corpus builds its *entire* content plane in 2:1 isometric projection with text on counter-rotated billboards. Tying it to *riron* = "theory = structure = exploded diagram" makes the projection meaningful rather than ornamental. 2. **The mechanical-drawing vocabulary — construction lines, dimension arrows, fastener callouts, 45° section hatching, a persistent drawing title block as navigation.** This drafting-plate language is essentially absent from the corpus, which leans on card-grids (91%), bento boxes, and dashboards. Here the "UI chrome" *is* an engineering drawing. 3. **A cool graphite-and-blueprint-cyan palette with one grease-pencil orange — refusing the warm gradient.** 98% of the corpus is "warm" and 94% is "gradient"; riron.org is `#1B1E24` slate, `#3FA9C9` cyan ink, `#E07B39` correction-orange — flat fills, no gradients, drafting-desk cool. 4. **path-draw-svg as the *primary* motion (lines sketch themselves, then get inked over), not a decorative path-draw add-on.** And no cursor-follow blob, no tilt-3d on cards (there are no cards), no typewriter except one cold-open line — deliberately sidestepping the 88% cursor-follow / 90% parallax / 84% spring defaults in favour of scroll-driven assembly. 5. **Content is "parts in an assembly," never tiles in a grid** — components bolt together along an exploded-view axis; the page literally builds an object as you scroll, ending with the finished, fully-inked solid. Chosen seed/style: **isometric technical docs** *(aesthetic: isometric, layout: isometric / immersive-scroll, typography: tech-mono + serif-revival, palette: cool-grays / midnight-blue with one warm accent, patterns: path-draw-svg + scroll-triggered + morph, imagery: isometric-icons + line-illustration + noise-texture, motifs: grid-lines + sharp-angles + layered-depth, tone: scholarly-intellectual)*. Avoided patterns from the frequency analysis: warm palette (98%), gradient (94%), photography (98%), card-grid (91%), full-bleed-as-default, cursor-follow (88%), spring-everywhere (84%), magnetic (79%), tilt-3d, hand-drawn (95%), glassmorphism (82%), pastoral-romantic tone, hero-dominant CTA layouts, stat-grids, pricing blocks.