# Design Language for riron.net ## Aesthetics and Tone riron.net (理論 — *riron*, "theory") is **an isometric proof-cabinet**: a cool, precisely-drafted axonometric workshop where abstract reasoning is built the way a watchmaker builds a movement — exploded, labeled, suspended in clean light, every part visible at once. Imagine a 1970s engineering-textbook plate redrawn by someone who only owns a 30°/30° set-square and a 0.2mm technical pen, then lit by the flat shadowless glow of a drafting table at dawn. The mood is **scholarly-intellectual** but never stuffy — closer to the quiet thrill of watching a theorem assemble itself than to a lecture hall. Nothing is glossy. Nothing pulses or shouts. The whole site behaves like a *demonstration*: premises lock into place, lemmas rotate into view, and the conclusion settles like the last facet of a cut crystal catching the light. The governing metaphor is **crystallization**. A theory, here, is treated as a structure that grows from a seed: a single axiom drops into solution and the page accretes around it — hexagonal cells, lattice struts, planar facets — until a complete crystalline figure floats in the void, rotatable, sectioned, annotated. The tone is the tone of someone explaining something they find genuinely beautiful: measured, generous, a little obsessive about the diagrams. ## Layout Motifs and Structure The entire page is laid out on a **hexagonal-honeycomb grid** (2% of the corpus — a near-empty room) rendered in **true isometric projection** (axes at 30° from horizontal, no perspective taper). Sections are not stacked rectangles; they are **honeycomb cells** — flat-topped hexagons, ~360px across at desktop — that interlock down a gently meandering vertical "comb" roughly 1180px wide. Each hexagon is one *propositional unit*: an axiom, a definition, a lemma, a corollary, the QED. The comb does not run straight; it offsets left/right by half a cell every two rows, so the eye walks a zig-zag descent like reading a long derivation column by column. Composition rules: - **The Seed Cell.** The first hexagon, dead-center at the top, holds nothing but a single glyph (理) and the word *riron* in mono caps. It is the crystallization seed; faint lattice lines radiate from its six vertices toward the cells below, drawn live as you scroll. - **Isometric extrusion.** Every active hexagon is extruded ~24px along the isometric z-axis, casting a hard flat-color shadow (no blur) on the cell behind it — the page reads as a shallow relief sculpture, ~3 layers deep, never more. - **Strut connectors.** Adjacent cells are joined by thin double-line "struts" (the kind in a crystal-structure diagram), each labeled with a tiny mono tag (`⊢`, `∴`, `∵`, `≔`) marking the logical relation between the two propositions. - **The Section Plane.** Roughly two-thirds down, the whole honeycomb is "cut" by a translucent diagonal **section plane** at the isometric angle — everything above it is rendered solid, everything below it as wireframe-only, as if you'd sawed the crystal in half to show its interior reasoning. Scrolling past this line is the page's one big spatial event. - **The Conclusion Crystal.** The final region abandons the comb: the accumulated cells visually "fold up" into a single rotating polyhedron (a hexagonal bipyramid in CSS 3D), slowly turning, its faces carrying the one-line summary of each prior section. Below it, only a colophon hexagon and a faint footer rule. - **No nav bar.** A vertical "facet index" pins to the left edge — six tiny hexagons, one per section, filling in as you pass each. That is the only persistent chrome. No top bar, no hamburger. Mobile: the honeycomb degrades to a **single vertical stack of flat-topped hexagons**, struts become short vertical connectors, the isometric extrusion flattens to a 6px offset, the section-plane cut becomes a horizontal wireframe threshold, and the conclusion polyhedron renders as a static 2D net of the same shape. ## Typography and Palette **Fonts — Google Fonts only, three voices, all disciplined toward the drafting-table register:** - **Display, wordmark, hexagon headings — *Space Mono* (weights 400 / 700, plus its italic).** Used for `riron` at 64px in the Seed Cell with `letter-spacing: 0.04em`, for section titles (`AXIOM`, `LEMMA Ⅰ`, `Q.E.D.`) at 15pt small-caps with `letter-spacing: 0.22em`, and for the strut tags. Space Mono is chosen for its mechanical, slightly retro-technical fixed pitch — it makes every label feel *plotted* rather than typed, which is exactly the demonstration mood. Its true italic is reserved for variable names within definitions (*x*, *φ*, *Γ*). - **Body copy, definitions, proof prose — *IBM Plex Sans* (weights 400 / 500, 16–18px, `line-height: 1.62`).** A humanist sans with a faintly engineered skeleton; it sits comfortably beside a monospace without fighting it, and it reads like a well-set textbook rather than a blog. Used for all running explanation inside the hexagons. Pull-quotes (a premise restated for emphasis) go to *IBM Plex Sans* italic at 22px. - **Mathematical / symbolic fragments & footnote ticks — *IBM Plex Mono* (weights 400 / 600, 12–14px).** For inline formulae, the facet-index numerals, the diagonal section-plane coordinate ticks, and the colophon. Plex Mono's narrow figures keep dense symbolic lines from sprawling. **Palette — cool-grays, the disciplined drafting-table set (minimum three; here eight, all low-saturation except one deliberate spark):** - `#EEF1F4` — *Drafting Paper*. The page ground; a faintly blue-cool near-white, like good vellum under cool light. - `#D7DDE3` — *Graphite Wash*. Honeycomb cell fills, the section-plane translucency. - `#9AA6B2` — *Pencil Mid*. Strut lines, hexagon outlines at rest, secondary text. - `#5C6773` — *Slate Ink*. Body copy, primary linework, the isometric hard shadows (used at 70% opacity so they read as cool gray, not black). - `#2B333D` — *Anthracite*. Display type, the Seed glyph, the wireframe lines below the section plane. - `#1A1F26` — *Void*. The deepest field — used only as the backdrop the Conclusion Crystal floats against, and as the absolute footer band. - `#7FA8C9` — *Blueprint Cyan*. The single cool accent: the live-drawn lattice radiating from the Seed, hover states on struts, the active facet-index cell. Restrained — never more than ~6% of any viewport. - `#C8A24B` — *Brass Witness*. The one warm spark, used *once*: the QED hexagon's outline and the gleam on the rotating Conclusion Crystal's "answer" face. It is the gold of a finished instrument; its scarcity is the point. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Every visual is **SVG line-illustration** (15% of the corpus — quietly underused) hand-built in the isometric system, plus a little CSS 3D for the final polyhedron. The aesthetic reference is the *crystal-structure plate* and the *exploded mechanical diagram*: thin confident strokes, no fills heavier than a 12% wash, everything labeled. The crystalline-motif vocabulary (6% of the corpus — claimed here): - **Lattice scaffolds.** Behind each section, a faint isometric lattice (hexagonal close-packed cell repeated) drawn at 8% opacity, with the struts nearest the reading column brightening to *Pencil Mid* on scroll — the structure "condensing" around the argument as you read it. - **Exploded propositions.** Key definitions are illustrated as a small **exploded-view diagram**: the concept's components float apart along isometric axes, joined by dotted leader lines to mono labels, exactly like a watch-movement breakdown plate. - **Facet glyphs.** Each section gets a unique **single-facet icon** — a flat-shaded isometric polygon (rhombus, parallelogram, hexagon) catching imaginary light from upper-left — used in the facet index and stamped faintly into its hexagon's corner. Six facets; together their normals point toward the center, so the index reads as one crystal seen from six sides. - **Section-plane hatching.** Where the diagonal cut crosses solid linework, the cut faces get **engineering section-hatching** (45° thin parallel lines) in *Pencil Mid* — the universal "this is a cross-section" signal, here applied to ideas. - **Growth ticks.** Tiny accreting tick-marks crawl along the central comb as you scroll, like a crystal front advancing — a quiet progress indicator that *is* the crystallization metaphor rather than a separate UI element. - **The Witness Gleam.** A single specular highlight — a 2px *Brass Witness* streak — sweeps across the Conclusion Crystal once per rotation. The only "shine" anywhere on the site. ## Prompts for Implementation Build riron.net as **one static page** — a single HTML file, one CSS file, one ES module — and treat it as a four-minute guided derivation: a single theory crystallizing, cell by cell, from seed to QED to a slowly-turning finished figure. Resist every instinct to brand, sell, or capture. There is **no CTA, no pricing block, no stat grid, no testimonial row, no logo cloud, no contact form, no email signup, no chat widget, no cookie modal, no comparison table, no FAQ accordion**. There is only the honeycomb of propositions and its closing crystal. **Storytelling structure (six honeycomb sections + seed + crystal, vertical zig-zag descent):** 1. **The Seed.** Center-top hexagon: the glyph 理, the word *riron*, one sentence — "A theory is a shape you can rotate." Faint *Blueprint Cyan* lattice lines begin drawing outward (`path-draw-svg`, the corpus's most-quietly-useful animation at 45% — used here *literally as crystal growth*, not as decoration) toward the cells below as the user starts to scroll. 2. **Axiom.** First real cell, offset left. A single bald premise, set large in IBM Plex Sans, with an exploded-view diagram of its terms unfolding along the isometric axes. Strut down to cell 2 tagged `≔`. 3. **Definition.** Offset right. Establishes the vocabulary; variable names in *Space Mono* italic; the lattice behind it noticeably denser than behind the Axiom. 4. **Lemma Ⅰ.** Offset left. A small intermediate result; its facet glyph rotates 60° into place on entry. Strut tagged `⊢`. 5. **The Section Plane.** Full-width spatial event: as this region scrolls into view, a translucent *Graphite Wash* plane sweeps diagonally across the whole comb at the isometric angle; everything that has scrolled *above* it stays solid, everything *below* re-renders as wireframe with section-hatching on the cut faces. A single mono caption rides the plane's leading edge: "— interior view —". 6. **Lemma Ⅱ / Corollary.** Offset right, now rendered in the wireframe register. The argument is "transparent" — you can see the lattice through it. Strut tagged `∴`. 7. **Q.E.D.** Center hexagon, outlined in *Brass Witness*. The conclusion, stated once, plainly. On entry, the prior six cells visually detach and **fold inward** (CSS 3D transforms, springy but slow) into: 8. **The Conclusion Crystal.** Against a *Void* field: a hexagonal bipyramid in CSS 3D, ~420px, rotating ~24°/sec, each face carrying one prior section's one-line summary; the "answer" face (the QED restated) is the *Brass Witness* one, and the *Witness Gleam* streak sweeps it once per turn. Below: a single colophon hexagon (build date, font credits, the line "drawn with a 30-degree set-square") and a faint footer rule. The page ends. No "back to top," no next-steps. **Motion direction:** everything obeys the drafting-table calm — `path-draw-svg` for all lattice/strut/diagram strokes (stroke-dashoffset, 600–1400ms eases), gentle `spring` only on facet-glyph rotations and the final fold-up, `fade-reveal` for body text inside cells, `scroll-triggered` choreography throughout. Reduced-motion: lattices appear instantly fully-drawn, the section plane is a static state at its threshold, the Conclusion Crystal renders as its flat 2D net and does not rotate. No parallax, no cursor-follow, no tilt-3d, no magnetic buttons — the page is a *plate*, not a playground. ## Uniqueness Notes Differentiators, each measured against the corpus revealed by the frequency analysis: 1. **Hexagonal-honeycomb layout (2%) × crystalline motif (6%) × isometric aesthetic (13%) is an empty intersection.** Isometric work in the corpus leans toward "technical docs" dashboards; nobody has used a *true axonometric honeycomb of logical propositions* as the page's literal skeleton, with struts carrying turnstile/therefore tags. The honeycomb here is not a card-grid garnish — it is the argument's geometry. 2. **Crystallization as the narrative spine, not a texture.** The seed cell, the live-drawn lattice "condensing" around each proposition, the growth ticks on the comb, the closing fold-up into a single rotating polyhedron — the whole site dramatizes a theory *crystallizing*. The frequency report shows crystalline at 6% and almost always as background sparkle; here it is the plot. 3. **The diagonal Section Plane that re-renders the lower page as wireframe.** A one-time spatial event where the page is "cut" and its second half becomes a cross-section with engineering hatching. No corpus design splits its own body into solid-above / wireframe-below along an isometric cut. 4. **Cool-grays held at near-zero saturation with exactly two single-use sparks** — *Blueprint Cyan* for the growing lattice, *Brass Witness* used literally once on the QED. Against a corpus that is 98% warm and 94% gradient, a flat, gradient-free, cool, almost-monochrome drafting palette is itself the differentiator. 5. **Space Mono + IBM Plex Sans + IBM Plex Mono in a strict "plotted, not typed" register**, with no handwritten or display-bold voice anywhere — every label reads like a technical-pen annotation, reinforcing the textbook-plate metaphor rather than a blog or agency look. **Chosen seed/style:** *aesthetic: isometric, layout: hexagonal-honeycomb, typography: tech-mono, palette: cool-grays, patterns: path-draw-svg, imagery: line-illustration, motifs: crystalline, tone: scholarly-intellectual* (seed phrase: "isometric technical docs", reinterpreted as an isometric proof-cabinet). **Avoided overused patterns from frequency analysis:** no hand-drawn (95%), no glassmorphism (82%), no photography (98%), no card-grid-as-such (91%), no full-bleed warm gradients (warm 98% / gradient 94%), no parallax (90%), no cursor-follow (88%), no spring-everywhere / magnetic / tilt-3d defaults — each consciously declined in favor of the flat isometric plate.