# Design Language for rironbusou.com

## Aesthetics and Tone

`rironbusou.com` — 理論武装 (rironbusou) — translates literally as *armoring oneself with theory*, an idiom for acquiring intellectual weaponry, the kind of rigorous conceptual preparation that a street-philosopher sharpens before entering any argument. The site embodies that double nature: **raw street credibility braided with baroque intellectual opulence**. It is not a portfolio. It is not a product page. It is an immersive manifesto — the imagined private corner of someone who sources vintage pieces from Harajuku backstreets and annotates them with Foucault citations written in the margins of a luxury fashion catalog.

The visual register is **dark-neon street-style with an opulent-grand ceremonial layer on top**. Think: a midnight runway show held in an overgrown greenhouse where fluorescent lichen creeps across brutalist concrete columns. Neon violet and acid chartreuse seep through wide cracks in jet-black architecture, illuminating botanical specimens pressed between glass panels — each one labeled in crisp, rational Frutiger-lineage type. The grain of a 35mm flash photograph permeates every surface. Nothing is clean. Everything is intentional.

**Mood reference:** Kusama's infinity rooms, re-photographed by Daido Moriyama on Ilford HP5, printed in a Ginza fine-art press using fluorescent Pantone inks, then sold from the back of a Shimokitazawa record-shop counter. The site speaks with the authority of inherited aristocratic taste and the energy of someone who earned their knowledge on the street.

The tone is **simultaneously opulent and confrontational** — a heavy velvet curtain that, when pulled, reveals exposed rebar and graffiti behind it.

## Layout Motifs and Structure

The structure is a **card-grid manifesto wall**: a responsive CSS Grid of cards arranged in a deliberate asymmetric rhythm that fights the grid's own uniformity. Cards are **not equal** — some span two columns, some stand alone and tower taller than their neighbors, some occupy a narrow sliver beside a wide neighbor. The effect is a wall of torn magazine pages pinned with methodical care.

**Grid specification:**
- Base: `grid-template-columns: repeat(12, 1fr)` with `gap: 1.5rem` on desktop
- Cards occupy spans of 3, 4, 5, or 7 columns — never 6 (never symmetrical halves)
- Row heights are intrinsic — cards size to their content, not a fixed row template
- Mobile: single column, cards stacked with `margin-block: 0.75rem`

**Three card archetypes:**
1. **Signal Card** — extra-wide (span 7–9), near-black background (`#0d0d0e`), neon-accented border (`2px solid var(--acid)`), single oversized pull-quote or concept name at 96px, grain-overlaid.
2. **Specimen Card** — narrow (span 3–4), tall, functions as a botanical specimen panel: one path-drawn SVG botanical outline on a translucent dark field, with a small Latin-style label set in Frutiger lineage type. These cards are the decorative lungs of the grid.
3. **Entry Card** — mid-width (span 5), standard prose block, tight leading, muted neon accent on the left rule.

**Navigation:** A single fixed header strip of `48px` height, flush against the top edge, holding only the logotype wordmark (left) and three text links (right), all in `Barlow Condensed` uppercase at `0.7rem` letter-spacing `0.18em`. No dropdown, no hamburger theatrics.

**Hero:** No traditional hero banner. The grid begins immediately below the header — the first two cards together function as the site's thesis statement, taking up the full viewport width and approximately 70vh.

**Path-draw entrance:** On page load, a single continuous SVG path traces the perimeter silhouette of a thorny vine wrapping across the top-left quarter of the viewport — a 1400-point path drawn via `stroke-dashoffset` animation over 2.8 seconds, in neon violet (`#b44fff`), before the card grid fades in.

## Typography and Palette

**Type system — three Google Fonts families:**

- **Wordmark + Card Headers: [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed)** — weights 400 and 700. Barlow Condensed is the Frutiger-lineage workhorse: humanist, highly legible, industrial-cool. Used at extreme sizes (56px–120px) for Signal Card headlines and at `0.7rem` for the navigation strip. Its compressed ratio lets multiple words live on one line without crowding.

- **Body + Specimen Labels: [Barlow](https://fonts.google.com/specimen/Barlow)** — weight 300 and 500. Companion to Barlow Condensed, slightly wider for comfortable reading in Entry Cards. Specimen labels use Barlow 300 italic at `0.65rem`, `letter-spacing: 0.12em`, mimicking herbarium handwriting without drifting into script territory.

- **Accent / Pull-Quote: [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** — weight 600 italic at display sizes (80px+). Used exactly once per page on the hero-region Signal Card pull-quote. Its razor-thin serifs crack against the neon background like exposed bone — the single luxury serif intruding into the street grotesque environment, which is precisely the point.

**Color palette — dark-neon with botanical-opulent accents:**

| Role | Token | Hex |
|------|-------|-----|
| Ground (deepest black) | `--void` | `#060608` |
| Surface (card background) | `--pitch` | `#0d0d0e` |
| Surface alt (raised card) | `--ash` | `#141418` |
| Primary neon (violet) | `--acid-violet` | `#b44fff` |
| Secondary neon (chartreuse) | `--acid-lime` | `#c8f135` |
| Tertiary neon (cyan) | `--acid-cyan` | `#00f5d4` |
| Text primary | `--chalk` | `#e8e8e0` |
| Text secondary | `--pewter` | `#8a8a85` |
| Botanical tint (deep fern) | `--fern` | `#1e3a2f` |
| Botanical accent (pale moss) | `--moss` | `#4a7c59` |
| Grain overlay tint | `--grit` | `rgba(200, 180, 140, 0.04)` |

Neon colors never appear at full opacity on dark surfaces — they are used at `0.85` opacity for glow fills and `1.0` for borders and type only. The botanical greens (`--fern`, `--moss`) appear exclusively in Specimen Card backgrounds, pulling the nature motif into the structure without softening the overall brutality of the palette.

## Imagery and Motifs

**No photography.** The entire imagery system is built from three layers:

**Layer 1 — Grain overlay (signature texture).** A `200×200px` SVG `<feTurbulence>` noise filter is rendered as a `<pattern>` tile and applied as a `mix-blend-mode: overlay` at `0.06` opacity over every card surface. The grain emulates 35mm Ilford HP5 pushed to 3200 ISO — coarse, silver-halide texture that makes the neon colors feel physically printed rather than digitally rendered. On Signal Cards with lighter backgrounds the opacity rises to `0.10`.

**Layer 2 — Path-draw SVG botanicals (nature motifs).** Each Specimen Card hosts one hand-drawn-style SVG botanical: thorny rose branches, fern fronds with individual pinnae, a chrysanthemum head in profile (culturally resonant with Japan), ginkgo leaf clusters, bamboo stalks with internodal markings. These are `stroke`-only paths (no fill) in `--moss` at `0.6` opacity, size-contained to the card. On hover, the path retraces itself over `1.2s` — `stroke-dashoffset` resets to full and animates back to zero — a living illustration that blooms on touch.

**Layer 3 — Neon glow halos.** Behind the wordmark in the header and behind each Signal Card headline, a blurred radial gradient (`filter: blur(40px)`) in `--acid-violet` at `0.12` opacity creates a soft diffusion halo — the light-bleed of a neon tube through frosted glass, referencing the aesthetic vocabulary of 1980s Tokyo night photography.

**Motif grammar:**
- Botanical specimens always carry a two-part Latin label (genus + species in italics, weight 300), even when the species is invented. This fuses the street-style aesthetic with museum taxonomy.
- The thorny vine path that opens the page is the connective motif — fragments of the same vine appear at the corners of Signal Cards as `<svg>` decorative inserts, always in `--acid-violet`.
- No icons. No photography. No emojis. No UI illustrations. Every graphic element is either a drawn botanical path or a typographic element.

## Prompts for Implementation

Build `rironbusou.com` as a **single HTML file with one external CSS file and one small vanilla JS module** (no build step, no framework, no bundler). The page loads fast, weighs under 180KB, and feels like a Ginza art book.

**Opening sequence (JS-driven):**
1. `DOMContentLoaded` → viewport shows `--void` only, header bar fades in over `400ms`
2. At `600ms` → SVG vine path begins drawing (stroke-dashoffset animation, 2800ms, `ease-in-out`)
3. At `1200ms` (before vine completes) → card grid fades in with `opacity: 0 → 1` over `800ms`, `transform: translateY(12px) → translateY(0)`, staggered per card at `60ms` intervals
4. Cards animate in column order (left-to-right), not row order

**Card hover states:**
- Signal Cards: `border-color` transitions from `--acid-violet` to `--acid-lime` over `200ms`; a thin horizontal rule at the bottom of the card animates from `width: 0` to `width: 100%` in `--acid-lime` over `300ms`
- Specimen Cards: path-draw botanical retraces itself over `1200ms`; the Latin label slides up `4px` and becomes `--chalk` from `--pewter`
- Entry Cards: left border rule `background-color` shifts from `--pewter` to `--acid-cyan`; text lightens slightly

**Grain texture implementation:**
```css
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,..."); /* inline feTurbulence pattern */
  mix-blend-mode: overlay;
  opacity: 0.06;
  pointer-events: none;
  border-radius: inherit;
}
```

**Typography sizing scale:**
- Signal Card headline: `clamp(3.5rem, 8vw, 7.5rem)`, `Barlow Condensed` 700, `--chalk`, `letter-spacing: -0.03em`
- Pull-quote (hero Signal Card): `clamp(2.8rem, 5vw, 5rem)`, `Cormorant Garamond` 600 italic, `--acid-violet`
- Entry Card body: `1rem / 1.7`, `Barlow` 300, `--pewter`
- Specimen label: `0.65rem / 1.4`, `Barlow` 300 italic, `--moss`, `letter-spacing: 0.12em`
- Nav links: `0.7rem`, `Barlow Condensed` 400 uppercase, `letter-spacing: 0.18em`, `--pewter`; hover `--chalk`

**Avoid in implementation:**
- No CTA buttons with rounded corners and gradient fills
- No pricing grids, feature comparison tables, or stat counters
- No hero video or parallax background imagery
- No lightbox or modal overlays
- No sticky sidebar navigation
- No scroll-progress indicators or back-to-top floaters
- No hover tooltips with shadows and arrows

**The page is a wall you read, not a funnel you walk through.**

## Uniqueness Notes

1. **Card-grid at 8% frequency combined with dark-neon at 5% — the rarest productive pairing in the corpus.** Most card-grid designs in the corpus use warm or gradient palettes (dominant at 91% and 97% respectively). `rironbusou.com` brings a confrontational, nearly-black neon palette to a grid layout, creating a tension that neither street-style nor luxury design typically deploys. The result looks like a torn fashion-zine printed on a semiconductor wafer.

2. **Opulent-grand tone delivered via typographic hierarchy rather than gold decorations.** The corpus uses opulent-grand (4%) almost exclusively with gold/black luxury palettes and serif-heavy layouts. This design achieves opulence through *scale and restraint* — oversized Cormorant Garamond pull-quotes that crack open the industrial card grid like a Ming vase dropped on a concrete floor. No gold. No ornamental borders. The grandeur comes from the unexpected serif intrusion into a Barlow Condensed system.

3. **Nature motifs expressed as museum taxonomy rather than organic atmosphere.** Nature (14% in corpus) consistently appears as ambient texture — leafy backgrounds, flowing curves, organic blobs. `rironbusou.com` treats nature as *specimen and label* — botanical paths with Latin binomials, chrysanthemum profiles in precise line weight, ginkgo leaves as measurable objects. This fuses the Japanese cultural reference of 理論武装 with the European tradition of natural-history illustration, at street-level fidelity.

4. **Path-draw SVG as page-opening ceremony, not decorative accent.** At 10% frequency, path-draw-svg is usually used as a subtle decorative element. Here, the vine path-draw is the site's opening ritual — a 2.8-second ceremony that sets the tonal register before any content appears. This elevates the pattern from ornament to narrative device.

5. **Grain-overlay as emulsive materiality, not vintage nostalgia.** Grain-overlay appears in 3% of the corpus and is almost always used to evoke retro warmth. Here, the grain is pushed toward ISO 3200 silver-halide coarseness — it makes the neon colors feel physically printed on photographic paper, cold and confrontational rather than warm and nostalgic. The grain is darkness-amplifying, not light-softening.

**Chosen seed:** `aesthetic: street-style, layout: card-grid, typography: frutiger-clean, palette: dark-neon, patterns: path-draw-svg, imagery: grain-overlay, motifs: nature, tone: opulent-grand`

**Avoided patterns (overused in corpus):** full-bleed (64%), editorial (52%), asymmetric grid (41%), warm palette (97%), gradient palette (91%)
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:52:55
  domain: rironbusou.com
  seed: nor luxury design typically deploys
  aesthetic: `rironbusou.com` — 理論武装 (rironbusou) — translates literally as *armoring oneself...
  content_hash: cf67b6006819
-->