# Design Language for riron.xyz

## Aesthetics and Tone
riron (理論, "theory" in Japanese) inhabits a visual world where the grandeur of classical marble halls collides with the volatile instability of corrupted digital data -- as if a Renaissance palazzo's ceiling fresco were being live-streamed through a malfunctioning satellite feed, its transmission fragmenting into horizontal tear-lines and RGB channel separations that momentarily reveal the raw binary substrate beneath the painted cherubs. The aesthetic is **opulent glitch**: the weight and gravity of carved stone, gilded moldings, and veined Carrara marble shattered by sudden bursts of digital interference -- scan-line distortions that slice through ornamental borders, pixel-displacement artifacts that make classical columns appear to shudder and duplicate, chromatic aberration halos that ring gold leaf details in electric cyan and magenta. The tone is opulent-grand but undercut by a playful irreverence -- the site treats theory (riron) as something simultaneously monumental and unstable, a grand edifice always on the verge of glitching apart and reassembling. Every surface carries a tension between permanence (marble, gold, serif letterforms) and volatility (glitch tears, data corruption, shifting pixel grids). The mood draws from the collision of Piranesi's impossible architectural etchings with Nam June Paik's video-sculpture distortions -- an imagined museum where the exhibits keep corrupting.

## Layout Motifs and Structure
The layout uses a **modular-blocks** system -- a grid of discrete, self-contained rectangular modules of varying proportions that tile the viewport like stone blocks in a palazzo wall. Unlike fluid or organic layouts, every content element is contained within a sharply defined rectangular block with visible borders, creating a mosaic-wall effect that references both classical masonry construction and the rigid pixel-grid of digital displays.

**Modular Block Architecture:**

- **Block Grid:** CSS Grid with `grid-template-columns: repeat(12, 1fr)` and explicit row definitions. Blocks span varying column/row counts: a hero title block might span 8 columns x 3 rows, while a decorative marble-texture block occupies 4 columns x 2 rows. The grid gap is 2px -- a hairline gap that reads as mortar lines between stone blocks.
- **Block Types:**
  - **Monument Blocks:** Large (6-12 columns), containing primary content -- headline text, key statements, photographic imagery. These have a 1px solid border in Patina Gold (#C9A84C) and a subtle inner shadow simulating beveled stone edges.
  - **Fragment Blocks:** Small (2-4 columns), containing decorative elements -- marble texture swatches, glitch-pattern fills, single monospaced code snippets, or solid color fields. These are the visual mortar between monument blocks.
  - **Void Blocks:** Empty blocks with only a marble-vein SVG pattern or a solid dark fill, providing breathing room. At least 15% of visible blocks should be voids.
- **Block Behavior:** On scroll, blocks do not move as a unit. Instead, individual blocks enter the viewport with staggered glitch-displacement: each block appears to "tear" into position from a random horizontal offset (translateX of 20-80px) with a 0.1-0.3s CSS transition, accompanied by a brief RGB-split afterimage effect (two pseudo-element duplicates offset by 3px in opposite directions, one tinted cyan #00E5FF, one tinted magenta #FF006E, fading out over 0.4s).
- **No Centered Layout:** Content is deliberately left-heavy or right-heavy within blocks, never centered. Text aligns to the left edge of its block with generous right-side negative space, or occasionally flush-right with left-side space. This asymmetry within the rigid grid creates visual tension.

## Typography and Palette
**Typography:**

- **Display / Headlines:** "Playfair Display" (Google Fonts) -- a high-contrast transitional serif with sharp, refined serifs and dramatic thick-thin stroke variation. Used at 4rem-7rem for primary headings. The classical serif energy directly references engraved stone inscriptions and scholarly title pages. All headlines use `font-weight: 700`, `letter-spacing: 0.03em`, and `text-transform: uppercase` for a monumental, chiseled quality. Headlines are rendered in Patina Gold (#C9A84C) against dark backgrounds, or in Deep Obsidian (#0A0A0F) against light marble surfaces.
- **Body / Technical Text:** "IBM Plex Mono" (Google Fonts) -- a tech-mono typeface with humanist proportions and excellent legibility at small sizes. The monospaced rhythm creates a sense of structured data and computed precision, contrasting with the ornamental serif headlines. Used at 0.85rem-1rem for body text, captions, and metadata. Set in Ash Marble (#B8B0A8) on dark backgrounds or Deep Obsidian (#0A0A0F) on light surfaces. Line-height: 1.7. Letter-spacing: 0.01em.
- **Accent / Labels:** "Space Grotesk" (Google Fonts) -- a geometric sans-serif with a techy, slightly squared character. Used sparingly at 0.7rem-0.8rem for block labels, navigation items, and micro-text annotations. All caps, letter-spacing: 0.15em. Color: Patina Gold (#C9A84C) at 60% opacity.

**Palette (Complementary):**

The palette is built on a complementary axis: deep blue-black against warm gold, with marble neutrals as the mediating ground.

| Role | Color | Hex |
|------|-------|-----|
| Primary Background | Deep Obsidian | #0A0A0F |
| Secondary Background | Marble Fog | #E8E2D8 |
| Accent Primary | Patina Gold | #C9A84C |
| Accent Complementary | Electric Cyan | #00E5FF |
| Glitch Accent | Magenta Tear | #FF006E |
| Text Primary (on dark) | Ash Marble | #B8B0A8 |
| Text Primary (on light) | Deep Obsidian | #0A0A0F |
| Border / Grid Lines | Antique Bronze | #3D3528 |
| Marble Vein | Warm Cream | #D4C8B0 |
| Void Fill | Carbon | #12121A |

The complementary relationship between Patina Gold (#C9A84C) and Electric Cyan (#00E5FF) creates maximum chromatic tension -- gold reads as classical warmth, cyan reads as digital interference. They never blend; they collide. Magenta Tear (#FF006E) appears only during glitch animations, a transient burst that suggests data corruption.

## Imagery and Motifs
**Marble-Classical Motifs as Primary Visual Language:**

The site's visual identity is built on marble -- not as a generic luxury texture, but as a specific, detailed material language:

1. **Marble Vein Patterns:** SVG path networks that simulate the organic branching of veins in Carrara marble. Generated procedurally using cubic Bezier curves with randomized control points, rendered as 1px strokes in Warm Cream (#D4C8B0) against Marble Fog (#E8E2D8) backgrounds. These vein patterns fill void blocks and serve as background textures for light-themed sections. The veins branch with fractal logic: primary veins spawn 2-3 secondary branches at 30-60 degree angles, secondary veins spawn finer tertiary threads.

2. **Column Fragments:** Decorative SVG illustrations of broken classical column segments -- Ionic volutes, Doric fluting, fractured entablatures -- rendered as line drawings in Patina Gold (#C9A84C) with 1.5px stroke weight. These appear as ornamental elements within fragment blocks, always cropped at the block edges as if the block is a window into a larger architectural drawing. The fragments are deliberately incomplete, suggesting ruins.

3. **Glitch Disruption Layer:** A CSS-driven glitch effect that periodically sweeps across the page. Every 8-12 seconds, a horizontal band (height: 3-8px) of displaced pixels races across the viewport from left to right over 0.15 seconds. This band shifts the content within it by a random translateX (5-15px) and applies a brief `hue-rotate(180deg)` filter, creating a cyan-gold color inversion. The effect is subtle -- a momentary tremor that reminds the viewer the marble surface is a digital simulation.

4. **Photography Treatment:** All photographic imagery (architectural details, marble close-ups, classical sculpture fragments) is processed through a dual-layer treatment:
   - Base: `filter: grayscale(0.6) contrast(1.3) brightness(0.9)` to flatten into a near-monochrome tonal range
   - Overlay: A pseudo-element with `background: linear-gradient(135deg, #C9A84C22, #00E5FF11)` and `mix-blend-mode: overlay` to introduce the gold-cyan complementary tint
   - Grain: A repeating SVG noise pattern at 3% opacity overlaid to simulate the granularity of stone surfaces

5. **Scan-Line Overlay:** A persistent but barely visible horizontal line pattern across the entire viewport -- 1px lines of rgba(0,0,0,0.03) every 4px, simulating CRT scan lines. This unifies all content under a shared screen-mediation aesthetic without overwhelming the marble textures.

## Prompts for Implementation
**Full-Screen Narrative Block Experience:**

The site opens to a full-viewport arrangement of modular blocks against a Deep Obsidian (#0A0A0F) background. The initial viewport contains exactly 5 blocks visible:

- **Block A (Hero):** Spans columns 1-8, rows 1-3. Contains "RIRON" in Playfair Display at 7rem, Patina Gold (#C9A84C), uppercase. Below the title, "理論" in the same font at 3rem. The text is left-aligned within the block. The block border is 1px Antique Bronze (#3D3528). On load, this block glitch-tears into position from 60px left offset over 0.3s, with a trailing cyan-magenta RGB split that fades in 0.5s.
- **Block B (Marble Fragment):** Spans columns 9-12, rows 1-2. Contains an SVG marble-vein pattern on a Marble Fog (#E8E2D8) background. No text. The block pulses subtly -- its opacity oscillates between 0.85 and 1.0 on a 4-second CSS animation cycle, like stone breathing.
- **Block C (Statement):** Spans columns 2-7, row 4. Contains a single line of IBM Plex Mono at 0.9rem: "where theory fractures into light" in Ash Marble (#B8B0A8). Left-aligned.
- **Block D (Column Fragment):** Spans columns 10-12, rows 3-4. Contains an SVG of a broken Ionic column capital in Patina Gold line art, cropped by the block edges.
- **Block E (Void):** Spans columns 1-3, row 5. Solid Carbon (#12121A) fill with a single diagonal marble vein crossing corner to corner.

**Scroll Narrative:**
As the user scrolls, new block rows emerge from below. Each row introduces a thematic beat:
- Row 2 (viewport 1.5): A large photography block shows a close-up of veined marble, glitch-processed. Adjacent small blocks contain monospaced text fragments -- excerpts or theoretical statements.
- Row 3 (viewport 2.5): The palette inverts -- blocks switch to Marble Fog (#E8E2D8) backgrounds with Deep Obsidian text. Gold accents persist. A wide block contains a paragraph of body text in IBM Plex Mono explaining the site's purpose.
- Row 4 (viewport 3.5): A full-width block (columns 1-12) acts as a "glitch interlude" -- its background rapidly cycles through 5 marble-vein SVG variants over 2 seconds using CSS keyframe animation, creating a visual stutter. Overlaid text reads a section title in Playfair Display.

**Glitch Animation Details:**
- RGB Channel Split: On hover over any monument block, two pseudo-elements (::before and ::after) duplicate the block content, offset by `translate(3px, -1px)` and `translate(-3px, 1px)` respectively, colored with `mix-blend-mode: screen` in cyan (#00E5FF) and magenta (#FF006E). Duration: 0.2s ease-out.
- Periodic Global Glitch: A JavaScript `setInterval` (8000-12000ms random) triggers a CSS class on `<body>` that applies a `clip-path: inset()` animation to a horizontal strip, displacing it horizontally. The strip height and position are randomized. Duration: 150ms.
- Block Entrance: Use `IntersectionObserver` to detect when blocks enter the viewport. Each block's entrance animation: `opacity: 0 -> 1`, `translateX: random(20-60)px -> 0`, with a 0.2s cubic-bezier(0.16, 1, 0.3, 1) timing. Blocks in the same row stagger by 80ms.

**Technical Guidance:**
- Build the block grid with CSS Grid, not Flexbox. Use `grid-template-columns: repeat(12, 1fr)` and `grid-template-rows: repeat(auto-fill, minmax(120px, auto))`.
- Marble vein SVGs should be inline, not background images, to allow CSS animation of stroke-dashoffset for a drawing-in effect on first appearance.
- The scan-line overlay is a fixed-position div covering the entire viewport with `pointer-events: none` and a repeating linear-gradient: `repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px)`.
- All photography should use `<img>` with `loading="lazy"` and the CSS filter chain applied via a wrapper div's pseudo-element.
- AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables. This is a narrative, immersive experience -- not a product page.
- AVOID: Centered text alignment. All text is left-aligned or right-aligned within its block.

## Uniqueness Notes
**Differentiators from other designs in the portfolio:**

1. **Modular-Block Masonry Wall (6% frequency):** While 99% of designs use centered layouts and 50% use asymmetric layouts, riron.xyz is structured as a tiled wall of discrete rectangular blocks with visible 2px mortar gaps. This references both classical stone masonry and pixel grids, creating a layout that is architecturally grounded rather than flowing or organic. No other design in the portfolio uses modular blocks as a literal wall-construction metaphor.

2. **Marble-Classical Motifs with Glitch Disruption (4% + unique combo):** Marble-classical motifs appear in only 4% of designs, and the combination of classical architectural fragments (column SVGs, marble vein patterns) with active glitch-corruption effects (RGB splits, scan-line displacement, periodic interference) is wholly unique. The tension between permanence and volatility -- carved stone versus corrupted data -- gives the site a conceptual identity that no other design shares.

3. **Complementary Gold-Cyan Chromatic Collision (6% frequency):** The complementary palette built on the Patina Gold (#C9A84C) vs. Electric Cyan (#00E5FF) axis is rare in the portfolio (complementary palettes at 6%). Rather than harmonious color relationships, the palette creates deliberate chromatic tension -- gold and cyan collide during glitch animations, creating moments of visual instability that reinforce the corrupted-classical concept. The Magenta Tear (#FF006E) appears only transiently, further distinguishing the color strategy.

4. **Tech-Mono Body Typography (5% frequency):** Using IBM Plex Mono for all body text while reserving a high-contrast serif (Playfair Display) for headlines creates a unique typographic split -- the headlines speak the language of stone inscriptions, the body text speaks the language of terminal output and computed data. This duality mirrors the marble-vs-glitch visual tension.

5. **Opulent-Grand Tone with Playful Subversion (3% frequency):** The opulent-grand tone is present in only 3% of designs. riron.xyz commits to genuine grandeur -- monumental type sizes, gold-on-black drama, classical architectural references -- but constantly undercuts it with glitch irreverence. The site takes theory seriously enough to build it a marble palazzo, then playfully corrupts the transmission.

**Documented Seed/Style:**
aesthetic: playful, layout: modular-blocks, typography: tech-mono, palette: complementary, patterns: glitch, imagery: photography, motifs: marble-classical, tone: opulent-grand

**Avoided Overused Patterns:**
- Centered layout (99%) -- replaced with modular-blocks with asymmetric internal alignment
- Scroll-triggered as sole animation (96%) -- supplemented with periodic glitch intervals and RGB-split hover effects
- Warm palette (100%) -- used complementary gold-cyan tension instead of warm harmony
- Vintage motifs (88%) -- replaced with marble-classical, a specific and underused (4%) motif category
- Friendly tone (98%) -- replaced with opulent-grand (3%), a dramatically underrepresented tone
<!-- DESIGN STAMP
  timestamp: 2026-03-10T23:07:58
  domain: riron.xyz
  seed: unspecified
  aesthetic: riron (理論, "theory" in Japanese) inhabits a visual world where the grandeur of c...
  content_hash: 1eca126e7192
-->