理論

riron.org (理論, "theory") recasts intellectual discourse as street-level energy. A graffiti wall where theoretical arguments are spray-painted in bold condensed lettering, tagged with citations, and layered over each other like competing voices in a public debate.

The aesthetic: graffiti meets academia. Raw, unauthorized visual language of urban wall art applied to the structured world of theoretical reasoning. A philosophy lecture delivered via wheat-paste posters on concrete.

Typography as Spray Paint

Oswald condensed sans-serif serves as the primary display font. Strong vertical emphasis, tightly fitted letters. This references both graffiti lettering (block letters, vertical emphasis) and academic poster design (efficient space usage for maximum information).

Abstract Shapes as Tags

The imagery vocabulary is purely abstract. Geometric shapes deployed in the visual grammar of street art. Circles, triangles, and angular polygons appear as "tags" scattered across the concrete background. Rendered as outlined SVG shapes with feTurbulence distortion, suggesting the wobbly imprecision of spray paint on rough surfaces.

Color Palette

Burnt orange (#E07A4F), amber clay (#C4956A), weathered sienna (#8B6B4F), and sage green (#4A7C5C) dominate. Concrete foundation (#F5E6D3) provides the wall. Deep charcoal (#2C2018, #1E1610) grounds text and structure.

The layout is hero-dominant. A massive full-viewport hero section occupies the first screen, with subsequent content presented as a controlled scroll beneath. The hero is the "main wall" --- the primary graffiti surface --- and everything below is the surrounding neighborhood.

The wall itself:

• Full viewport (100vh × 100vw), no visible chrome
• Background: CSS-generated concrete texture
• Title rendered with SVG feTurbulence distortion for spray-paint effect
• Subtle concrete-dust particle effect drifting downward

The juxtaposition of street art visual language with academic discourse creates a unique democratization metaphor --- theory spray-painted on public walls. This is where serious intellectual debate meets public space, where citations meet tags, where scholarly rigor meets unauthorized creativity.

Graffiti is at 1% frequency in design aesthetics. No other graffiti-styled design applies it to intellectual and theoretical content. Here, the vandal and the theorist are the same hand.

Spray-Paint Typography Filter

SVG feTurbulence + feDisplacementMap filters make digital typography appear hand-painted with spray cans. The filter mimics the random displacement of air pressure, overspray, and surface irregularities of actual spray paint.

Concrete Texture Generation

Layered linear-gradients in warm grays with strategic use of radial-gradients to simulate rough aggregate surfaces. CSS-only, no image assets required.

Responsive Typography

Body text uses clamp() for fluid scaling. Headlines scale with viewport using clamp(1.5rem, 4vw, 2.5rem). Typography adjusts fluidly across all screen sizes without media queries.

1. Unauthorized Access: Graffiti thrives on breaking rules. The design deliberately breaks polish conventions.
2. Layering as Dialogue: Multiple voices spray-painted over each other. Content layers create visual and conceptual depth.
3. Concrete Reality: The wall is not metaphorical. It's rendered with physical texture and material presence.
4. Citations as Tags: Every claim tagged with source. Knowledge ownership made visible.
5. Public Intimacy: Academic rigor meets street-level accessibility. No gatekeeping.

Scrolling down transitions from the hero wall to street-level content. The wall recedes into the past; you're now walking the neighborhood where that wall stands. Subsequent sections maintain the color palette and rough texture but present information in readable blocks.

Each section is prefaced by a directional marker (→) in the accent palette, maintaining the graffiti tag aesthetic while organizing content hierarchically.