# Design Language for rironbusou.net ## Aesthetics and Tone **rironbusou.net** is a **tech-tutorial site dressed in avant-garde brutalist clay** — imagine a theoretical physics textbook that was redesigned by a ceramics collective and then digitized. The word *rironbusou* (理論武装 — "theoretical arming," to arm oneself with theory) is the site's DNA: knowledge as protective apparatus, concepts as wearable armor. The aesthetic is the visual counterpart to that idea — a workspace that is simultaneously warm and structural, organic and precise. The dominant visual metaphor is **terracotta construction**: the palette of fired earth, raw adobe, and oxidized copper. Surfaces feel like unfired clay tablets that have been impressed with circuit diagrams. The warmth is genuine — this is not the cold beige of corporate "warmth" — it is the warmth of friction, of material under pressure. But the warmth serves angular, sharp-edged avant-garde composition. Forms break apart and reassemble in unexpected positions. The grid is deliberately fractured along one axis while rigid on the other. The tone is **practical tutorial with intellectual swagger**. Tutorial content is presented as if it were field dispatches from a research expedition — not "Step 1, Step 2," but nested reasoning chains that justify each action before taking it. The voice is second-person but never patronizing: *you arm yourself with the concept before you reach for the tool.* Influences: Tadanori Yokoo's poster compositions, Murobushi Ko's butoh body postures rendered as UI states, Gordon Matta-Clark's architectural cuts. The site does not look like a dev-blog. It does not look like a documentation portal. It looks like evidence of thinking. ## Layout Motifs and Structure The layout is built on **layered-depth stacking** — three independent z-layers that scroll at different rates, creating parallax depth without any JavaScript parallax library (achieved via CSS `perspective` on the scroll container and `translateZ` on layer elements): 1. **Background layer (z=-1, scale compensation):** A fixed SVG "construction grid" — an asymmetric arrangement of thick terracotta horizontal bars and hairline vertical rules. The bars are not equally spaced: they cluster tightly at the top and spread apart logarithmically toward the bottom, mimicking the widening structure of an organic root system. This layer is always visible through the content above. 2. **Mid layer (z=0):** The primary content area — a deliberately off-center column that occupies 62% of the viewport width, starting at the 18% left margin. This column contains all tutorial content in a flowing single-column stack. The offset is intentional avant-garde composition: it creates a 40% right void that the background layer fills with structural ornament. 3. **Surface layer (z=1):** Floating icon clusters — large (64–96px) outlined SVG icons that live outside the content column, drifting in the right void. These icons are topic-contextual (e.g., a terminal icon near a shell tutorial, a network graph near a protocol explanation). They exist at `position: sticky` anchored to the midpoint of each major section, fading in/out with `IntersectionObserver`. **Section transitions** are executed as **organic blob morphing** — between tutorial sections, a blob SVG shape in terracotta tones flows across the viewport edge, its `d` attribute animated via GSAP `morphSVG` or a hand-keyframed CSS custom property approach. The blob is not decorative; it is the section boundary. Content above and below the blob are visually distinct zones. **No cards.** No grid of feature boxes. No two-column comparison tables. Layout is strictly vertical-narrative with deliberate horizontal placement of accent elements. **Skeleton loading** is a first-class UI citizen: when any tutorial step's code block loads (lazy, chunked), it renders first as a terracotta-tinted skeleton — warm `#C97B4B` shimmer bars at exactly the proportions of the incoming code lines, so the layout never shifts. The skeleton is distinctive (warm-toned, not grey) and becomes part of the visual identity rather than an invisible utility. ## Typography and Palette **Palette — terracotta-warm with structural contrast:** - `#C97B4B` — Primary terracotta: the dominant warm accent, used for bold heading strokes, blob fill (30% opacity), skeleton shimmer base - `#7A3B1E` — Deep umber: darkest anchor color, used for body text on light surfaces, section divider rules - `#F2E0C8` — Warm ivory: primary background for content column, also used for code block backgrounds - `#E8C49A` — Pale adobe: secondary surface, hover states, inactive skeleton - `#2B1E16` — Near-black espresso: topmost heading text, icon stroke weight - `#8C5E3C` — Mid terracotta: icon stroke color, sub-heading color, code comment tone - `#D4956A` — Copper flesh: interactive highlights, link underlines (SVG underline, not CSS), focus rings - `#1C3A2E` — Deep forest (contrast accent): used sparingly for code keyword highlighting — the one cool note in an otherwise entirely warm system **Typography (all Google Fonts, verified):** - **Display / H1 — `Oswald`** (condensed, wght 200–700): Set at 80–96px, wght 600, tracking `0.04em`, uppercase. Oswald's extreme condensed geometry creates the avant-garde tension: words stack tall and narrow, occupying vertical space aggressively. H1 is the site's structural spine. The word *rironbusou* in romaji set in Oswald at wght 600, with the Japanese gloss in a smaller Oswald wght 200 directly below — a typographic echo at half scale. - **Section headings / H2 — `Barlow Condensed`** (condensed, wght 400–700): At 36–48px, wght 700, tracking `0.06em`, uppercase. Barlow Condensed pairs with Oswald by sharing the condensed proportion but offering a slightly rounder geometry — H2 feels like a chapter break in a technical journal. - **Body / prose — `IBM Plex Sans`** (wght 300–500): At 16–18px, wght 400, line-height 1.72. IBM Plex Sans is the right choice for technical tutorial prose — it has humanist warmth at body size, legible code-adjacent personality, and monospace companion `IBM Plex Mono` for code. The pairing is intentional: switching from Plex Sans body to Plex Mono code is seamless, near-invisible. - **Code — `IBM Plex Mono`** (wght 300–500): At 14px, wght 400, line-height 1.6. Terracotta-warm syntax theme: keywords in `#1C3A2E` (deep forest), strings in `#D4956A` (copper flesh), comments in `#8C5E3C` (mid terracotta), everything else in `#2B1E16` (espresso). - **Annotations / captions — `Barlow`** (non-condensed variant, wght 300): At 12–14px, wght 300, tracking `0.08em`. Used for icon labels, step numbers, and inline asides. ## Imagery and Motifs **Icons are the primary imagery medium.** The site carries no photographs, no hero illustrations, no stock. Instead, the visual weight is distributed across a system of **large outlined SVG icons** that function as conceptual punctuation: - Icons are drawn at 2px stroke weight in `#8C5E3C` (mid terracotta), sized 64–96px in the layout void, 24–32px inline in prose. - Each icon is topic-literal: a branching tree for recursion concepts, a clay tablet (rectangle with impressed lines) for data structures, a braided rope for threading, a compass rose for navigation/routing, a crucible for compilation/build processes. - Icons in the right-void are given a subtle `transform: rotate(-8deg)` to break grid rigidity — each rotated a different amount (−8°, +5°, −3°) so they feel placed by hand, not by algorithm. - On hover, icon stroke color transitions to `#C97B4B` (primary terracotta) over 180ms, and a 6px terracotta blob blob appears behind the icon (not a shadow — a small irregular organic shape that pulses once and holds). **Organic blob motifs** are structurally embedded: - Section dividers: SVG blobs, 100vw wide × 60–90px tall, morphing between three keyframe shapes on a 12s loop. Colors cycle through `#C97B4B` at 30% opacity → `#E8C49A` at 50% opacity. - Background blob accents: two very large (400–600px) static blob outlines (2px stroke, `#C97B4B` at 15% opacity) positioned in the far background, behind the construction grid. They do not animate — they are geological. - Tutorial step connectors: small 24px blobs mark the step-number circles, replacing bullet points or numbered circles with irregular organic shapes in `#E8C49A`. **Skeleton loading pattern** (distinctive warm-tone implementation): - Skeleton bars shimmer from `#E8C49A` to `#C97B4B` at 20% opacity, traveling left-to-right over 1.4s. - Skeleton proportions exactly mirror the incoming content: a 3-line code block shows 3 skeleton bars at 100%/85%/60% width. - The shimmer uses a CSS `linear-gradient` animated via `background-position`, avoiding JavaScript for performance. ## Prompts for Implementation Build this as **a single-file scrolling field manual** — one long HTML document that unfolds vertically, structured like a research expedition log: numbered dispatches (`#01`, `#02`, etc.), each containing a concept introduction followed by its practical application. The conceptual layer and the practical layer are visually differentiated not by layout but by **typographic weight and color**: concepts in Oswald condensed terracotta headings, practice in IBM Plex Sans body + Plex Mono code. **Three mandatory implementation vows:** **Vow 1 — The skeleton is warm.** Every `` block that could be considered "lazy content" must show the warm skeleton before rendering. Implement via a `MutationObserver` or `IntersectionObserver` pattern: when a code block enters the viewport, it renders the skeleton first (150ms minimum), then reveals the highlighted code. Never use grey skeletons. The terracotta shimmer is the brand. **Vow 2 — The right void speaks.** The 40% right void must never be empty. At every vertical position in the scroll, at least one large icon or blob accent must occupy that space. Implement as sticky-positioned icon anchors, one per `
`, that hold their position for the section's full scroll height. **Vow 3 — The blob is the boundary.** Section transitions must use an SVG blob shape as the visual boundary. Do not use `
`, `border-bottom`, or `margin` as the sole separator. The blob morphs on scroll entry (triggered by `IntersectionObserver`). Implement with three keyframe shapes and CSS `animation: blob-morph 12s ease-in-out infinite alternate`. **AVOID:** - Sticky headers with navigation (tutorial reads top-to-bottom, no nav needed) - Modal popups or overlays - Floating action buttons - Progress bars (the blobs are the progress indicators) - Any use of `box-shadow` for depth — use `translateZ` and actual z-layering instead - Sidebar navigation - Tabbed interfaces - Cards with borders and border-radius > 4px (the organic blobs provide roundness; content containers stay rectangular) **EMBRACE:** - Full-viewport section openers where the H2 in Barlow Condensed occupies the top 40vh - Code blocks that span the full content column width (no horizontal scrollbar — use soft-wrap for prose code, horizontal scroll only for terminal output blocks) - Inline step annotations using `` with `background: #E8C49A` instead of callout boxes - The `.skeleton` class applied to any `
` block before its content is ready
- Large (80+px) decorative Oswald numerals for dispatch numbers, set in `#C97B4B` at 20% opacity, overlapping the H2

## Uniqueness Notes

**Chosen seed:** aesthetic: avant-garde, layout: layered-depth, typography: condensed, palette: terracotta-warm, patterns: skeleton-loading, imagery: icon-heavy, motifs: organic-blobs, tone: tech-tutorial

**Three differentiators from every other design in the registry:**

1. **Avant-garde at 0% frequency — the only site using this aesthetic.** The frequency report shows `avant-garde` at exactly 0% — no other design in the registry uses it. rironbusou.net's avant-garde approach is not decorative rebellion: it is structurally motivated by the domain's meaning (theoretical arming — adopting unconventional form as intellectual posture). The off-center 62/38 column split, the logarithmically-spaced background bars, and the hand-rotated void icons all derive from avant-garde composition principles absent from every other site.

2. **Skeleton loading as warm-toned brand identity, not utility pattern.** Skeleton loading appears in 3% of the registry and in all cases is described as a utility pattern (grey shimmer, invisible purpose). rironbusou.net inverts this: the skeleton shimmer uses the primary terracotta palette, proportionally mirrors incoming content, and is intentionally visible for 150ms minimum even when content is already cached. The skeleton *is* the loading experience — it communicates that the site considers structured knowledge worth waiting for.

3. **Terracotta-warm at 2% frequency, combined with condensed typography at 19% in a way that resolves the overuse tension.** Condensed typography at 19% is the registry's most overused typographic category. rironbusou.net uses it but deploys it against an entirely warm-earth palette (terracotta at only 2% frequency) rather than the cold dark backgrounds where 19% of condensed uses live. The combination — Oswald/Barlow Condensed set against warm ivory and terracotta — is visually unprecedented in the registry: condensed type that feels warm rather than aggressive.