# Design Language for okurairi.net ## Aesthetics and Tone okurairi.net ("okurairi" evokes the Japanese word for "entry" or "passage" -- the threshold moment of stepping through a doorway into the unknown) channels a **surreal data-fever-dream** aesthetic. The visual world exists in the liminal space between a particle physics laboratory readout and a Salvador Dali painting that has been fed through a broken CRT monitor. Imagine: a honeyed amber void where floating data visualizations melt and reform, where bar charts curve like liquid, where scatter plots become constellations that drift apart into particle swarms, and where typographic elements shatter into glitch fragments before reassembling into new configurations. The tone is **energetic** -- not the clean corporate energy of a startup pitch, but the frenetic, caffeine-fueled energy of a late-night research session when the data suddenly starts making terrifying sense. There is an urgency to every transition, a sense that the information on screen is alive and unstable, always on the verge of reorganizing itself into a new truth. The mood oscillates between controlled precision (clean data grids, aligned labels) and surreal chaos (melting axes, numbers that drift out of their containers, chart elements that develop autonomous behaviors). The inspiration draws from: Ryoji Ikeda's data-driven audiovisual installations, the glitch paintings of Rosa Menkman, the honeyed sepia tones of aged scientific instruments, and the particle simulations of creative coders like Robert Hodgin. Every frame should feel like a screenshot from a scientific visualization tool that has achieved sentience and is now dreaming. ## Layout Motifs and Structure The layout is a **single-column vertical descent** -- a continuous freefall through layers of increasingly surreal data landscapes. There is no horizontal navigation, no sidebar, no grid of cards. The user scrolls down through a single narrow corridor of content, roughly 720px wide on desktop, centered but with the surrounding void filled with ambient particle effects that react to scroll position. **Structural Sections (top to bottom):** 1. **The Threshold (0vh - 100vh):** The entry sequence. A full-viewport amber void (#D4A857 at 8% opacity over #1A1611 background) with a single vertical line of text -- the domain name "okurairi.net" -- rendered in Bebas Neue at 12vw, vertically oriented (writing-mode: vertical-rl). As the user scrolls, glitch artifacts ripple outward from the text like sonar pulses -- horizontal scan lines in alternating amber and warm charcoal that slice through the letterforms and drift off-screen. Particle effects (tiny 1-3px dots in #C9A96E) orbit the text in slow elliptical paths, accelerating as scroll velocity increases. 2. **The Data Garden (100vh - 350vh):** Three successive full-viewport data visualization tableaux, each occupying ~80vh with 5vh breathing space between them. Each tableau presents a surreal data visualization: - **Tableau A:** A vertical bar chart where the bars are rendered as liquid columns -- their heights oscillate with sine-wave animation, their surfaces ripple with procedural noise, and droplets detach from their peaks and float upward (defying gravity). Bars use graduated honeyed tones from #8B7355 (base) through #D4A857 (mid) to #F5DEB3 (peak). - **Tableau B:** A scatter plot where each data point is a glowing particle (#E8C97A at 60% opacity, 4-8px diameter) that drifts slowly from its plotted position, trailing faint amber afterimages. The axes themselves are drawn with a hand-tremor effect -- SVG paths with subtle randomized displacement applied per-frame. Grid lines flicker like dying fluorescent tubes. - **Tableau C:** A radial/polar chart whose spokes extend and retract rhythmically, the outer boundary morphing between geometric precision and organic blob shapes. Data labels in Bebas Neue 14px drift around the periphery, occasionally glitching -- characters swap positions, numbers increment/decrement rapidly before settling. 3. **The Passage (350vh - 500vh):** The narrative core. Long-form text rendered in Source Serif 4 at 20px, line-height 1.85, max-width 600px. The text is interspersed with inline data fragments -- small sparkline SVGs (48px tall) embedded within paragraphs, tiny particle bursts that trigger when a paragraph scrolls into view, and occasional glitch-frame interruptions where a sentence visually corrupts (chromatic aberration + horizontal displacement) for 120ms before snapping back to clarity. Background particle density increases gradually, creating a sense of descending deeper into the data. 4. **The Deep End (500vh - 600vh):** The closing sequence. All previous data visualizations collapse into a single point at screen center -- particles converge, chart fragments fold inward -- then explode outward in a burst that fills the viewport with a momentary flash of warm white (#F5F0E8) before settling into a minimal closing state: the domain name again, now horizontal, Bebas Neue at 3rem, with a single slowly-pulsing particle orbiting it. Below: a thin horizontal rule in #C9A96E and a small block of footer text in Source Serif 4 at 14px. **Spatial Philosophy:** The single-column constraint is deliberate -- it creates a tunnel vision effect that amplifies the surreal qualities of the data visualizations. The user cannot escape sideways; they can only go deeper. The narrow content column (720px) surrounded by dark void with ambient particles creates the sensation of peering through a keyhole into another dimension. ## Typography and Palette **Typography:** - **Display / Headlines / Data Labels:** "Bebas Neue" (Google Fonts) -- the condensed, all-caps geometric sans-serif chosen for its industrial, instrument-panel quality. Used at weights of 400 (Regular). Sizes: 12vw for the hero title (vertical orientation), 4rem-6rem for section markers, 1rem-1.4rem for data labels and chart annotations. Letter-spacing: +0.08em for large sizes (to let the condensed forms breathe), +0.12em for small data labels (to maintain legibility against busy backgrounds). Line-height: 0.95 for display sizes, 1.2 for labels. Color: #F5DEB3 (wheat) on dark backgrounds, #2A2219 on light. - **Body Text / Long-form:** "Source Serif 4" (Google Fonts) -- a transitional serif with moderate contrast and excellent screen readability. Its slightly formal, academic quality pairs with Bebas Neue's industrial character to create a tension between "scientific paper" and "factory floor readout." Weight: 400 (Regular) for body, 600 (Semibold) for emphasis. Size: 20px base, 16px for secondary text, 14px for footer/captions. Line-height: 1.85 for body (generous, allowing the text to breathe within the dense particle environment), 1.5 for secondary. Color: #D4C5A9 (desaturated wheat) for body, #8B7D6B (warm gray) for secondary text. - **Monospace / Glitch Text:** "IBM Plex Mono" (Google Fonts) -- used sparingly for data readouts, axis labels, and glitch-text moments where characters scramble. Weight: 400. Size: 13px-16px. Letter-spacing: +0.02em. Used with a CSS animation that randomly swaps character positions for glitch sequences. Color: #C9A96E (golden amber). **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ground | Dark umber | #1A1611 | Primary background, the void | | Surface | Warm charcoal | #2A2219 | Card backgrounds, elevated surfaces | | Primary Amber | Honeyed gold | #D4A857 | Primary accent, chart highlights, active elements | | Secondary Wheat | Pale wheat | #F5DEB3 | Headlines on dark, high-emphasis text | | Data Gold | Golden amber | #C9A96E | Data labels, axis lines, subtle accents | | Muted Earth | Warm taupe | #8B7355 | Chart base tones, inactive elements | | Body Text | Desaturated wheat | #D4C5A9 | Body copy color | | Flash White | Warm white | #F5F0E8 | Burst transitions, maximum contrast moments | | Glitch Red | Shifted coral | #D4735A | Chromatic aberration channel (R shift in glitch effects) | | Glitch Cyan | Shifted teal | #5AA8D4 | Chromatic aberration channel (B shift in glitch effects) | The palette is deliberately narrow -- almost monochromatic in the amber/gold/wheat range -- with the glitch colors (coral and teal) appearing ONLY during glitch-effect moments, creating a startling chromatic break that reinforces the surreal instability. The overall effect is of an old scientific instrument: warm, slightly amber-tinted, like viewing data through honeyed glass. ## Imagery and Motifs **Particle System:** The foundational visual element is an ambient particle field that persists across the entire page. Particles are tiny circles (1-4px diameter) in #C9A96E at 20-50% opacity, numbering approximately 80-120 on screen at any time. They drift with Brownian motion (random walk with slight downward bias), occasionally clustering into brief constellation patterns before dispersing. Scroll velocity affects particle behavior: slow scroll causes gentle drift, fast scroll causes particles to streak horizontally (motion blur effect via CSS filter or elongated shapes), and scroll-stop causes a brief "settling" animation where particles bob gently before reaching equilibrium. The particle layer sits between the background (#1A1611) and the content layer, creating depth. **Glitch System:** Glitch effects are the visual motif that punctuates transitions and emphasizes the surreal nature of the data. The glitch vocabulary includes: - **Horizontal Scan Lines:** 1-2px high strips of shifted color (the glitch coral #D4735A and glitch cyan #5AA8D4) that slice through content horizontally, appearing for 60-150ms at random intervals - **Chromatic Aberration:** A 2-4px RGB channel split applied to text and chart elements during transitions, where the red channel shifts left and the blue channel shifts right, creating a brief prismatic fringe - **Data Corruption:** Numbers and labels that briefly display incorrect values (random digits replacing correct ones for 80-200ms) before snapping back, as if the underlying data stream experienced a momentary fault - **Block Displacement:** Rectangular sections of the viewport (40-120px wide, 20-60px tall) that shift 3-8px horizontally for 100ms, creating a torn-screen effect Glitch events are stochastic but controlled: approximately one micro-glitch (scan line or single character swap) every 3-5 seconds during idle, with more intense compound glitches (aberration + displacement + corruption simultaneously) triggered by scroll events and section transitions. **Data Visualization Aesthetic:** All data visualizations are purely decorative -- they present fictional data with no real meaning. But they must LOOK convincingly data-like: proper axis scaling, plausible distributions, labeled ticks. The surrealism comes from their behavior (melting, drifting, autonomously rearranging) rather than from absurd visual styling. Charts should be rendered with clean SVG paths and proper data-viz conventions (tick marks, grid lines, labels), then progressively corrupted by the particle and glitch systems over time as the user scrolls deeper. This creates a narrative arc: ordered data at the top gradually dissolving into beautiful chaos at the bottom. **Motif: The Threshold Line:** A recurring visual element is a thin horizontal line (#C9A96E, 1px) that appears at section boundaries. When the line enters the viewport, it pulses once (opacity 40% -> 100% -> 40% over 800ms), then particles nearest to it briefly align along its length before dispersing. This line represents the "okurairi" -- the passage, the threshold -- and its repeated appearance creates rhythm in the vertical scroll. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site MUST be implemented as a single continuous scroll -- one HTML page, no route changes, no modals, no pop-ups. The scroll itself is the narrative. Implement scroll-position tracking via `IntersectionObserver` and `scroll` events to drive all animations. **Particle System Implementation:** Use a single `` element fixed behind all content (`position: fixed; z-index: 0`). Render particles with `requestAnimationFrame`. Each particle: `{x, y, vx, vy, radius, opacity, life}`. Update positions with Brownian motion (add small random values to vx/vy each frame, with damping factor 0.98). Read `window.scrollY` delta to apply horizontal force to all particles during scroll. Keep particle count between 80-120 by spawning new particles at random viewport edges when count drops below 80 and letting particles fade when they exit bounds. **Glitch Effect Implementation:** Create a `GlitchEngine` class that manages a queue of glitch events. Use `setInterval` at 200ms to roll dice (Math.random() < 0.05 for idle micro-glitch). For scroll-triggered glitches, fire on `scroll` event with debounce. Implement scan lines as absolutely-positioned `
` elements with `pointer-events: none` that are created, animated (translateX + opacity), and destroyed. Implement chromatic aberration with CSS `text-shadow` using the glitch red and cyan values offset by 2-4px. Implement block displacement by selecting random DOM elements and applying brief `transform: translateX(Npx)` with immediate removal. **Data Visualization Implementation:** Render charts as inline SVG within the content flow. Use `` for line/area charts, `` for bar charts, `` for scatter plots. Animate with CSS transforms and `requestAnimationFrame` for liquid/melting effects. The "liquid bar" effect: apply `SVG feTurbulence` filter to bar `` elements with animated `baseFrequency` values. The "drifting scatter" effect: update `cx`/`cy` attributes of `` elements each frame with small random offsets. **Typography Animation:** The vertical hero text ("okurairi.net") should be rendered as individual `` elements per character within a `writing-mode: vertical-rl` container. On scroll, each character receives a brief `transform: translateX` offset (staggered by 50ms per character) that creates a wave-like ripple through the vertical text. During glitch events, random characters temporarily swap to IBM Plex Mono and display a different character for 80ms. **Performance Guardrails:** - Canvas particle system: cap at 150 particles maximum, use `willReadFrequently: false` on context - Glitch DOM elements: never more than 5 scan-line divs alive simultaneously, remove immediately after animation - SVG animations: use `transform` and `opacity` only (GPU-composited properties) - Debounce scroll handler to 16ms (one frame at 60fps) - Use `IntersectionObserver` to pause off-screen SVG animations **What to AVOID:** - NO call-to-action buttons, pricing blocks, testimonial carousels, or stat-counter grids - NO hero images or photographs -- the particle system and data visualizations ARE the visual content - NO multi-column layouts or sidebar navigation - NO modal overlays, cookie banners, or floating chat widgets - NO horizontal scroll sections - The design should feel like an art installation, not a product page ## Uniqueness Notes **Differentiators from other designs:** 1. **Data Visualization as Decorative Art:** While data-viz appears at only 6% frequency in existing designs and is typically used for functional dashboards, this design repurposes data visualization conventions (bar charts, scatter plots, polar charts) as purely aesthetic, surreal art objects. The charts display fictional data and their purpose is visual storytelling, not information delivery. They melt, drift, corrupt, and reorganize -- turning the visual language of analytics into dreamlike imagery. 2. **Narrow-Corridor Single-Column with Ambient Void:** Most single-column layouts (25% frequency) use the column as a simple content container. This design weaponizes the single-column constraint by surrounding the narrow 720px content corridor with a dark, particle-filled void that extends to the viewport edges. The particles in the void react to scroll, creating a sense that the user is descending through an inhabited space rather than simply reading a page. The column becomes a keyhole, a passage -- the "okurairi." 3. **Honeyed Monochromatic Palette with Chromatic Glitch Breaks:** The honeyed-neutral palette (only 3% frequency) creates a warm, amber-tinted world that resembles antique scientific instruments or aged parchment. The twist is that glitch effects momentarily shatter this monochrome warmth with flashes of coral (#D4735A) and teal (#5AA8D4) -- colors that exist NOWHERE else in the design. These chromatic aberration moments feel genuinely disruptive because they violate the established color world, creating a visceral "system error" sensation that reinforces the surreal instability. 4. **Stochastic Glitch Events with Scroll-Driven Intensification:** Rather than scripted, repeatable animation sequences, the glitch system uses randomized timing and placement. No two visits produce identical glitch patterns. Combined with scroll-velocity-driven particle behavior and the progressive corruption of data visualizations (ordered at top, chaotic at bottom), this creates a site that feels alive and non-deterministic -- closer to a generative art piece than a traditional web page. 5. **Vertical Japanese-Inspired Typography Entry:** The hero uses `writing-mode: vertical-rl` for the domain name, referencing traditional Japanese vertical text layout (tategaki). This is exceptionally rare in western web design (no other design in the existing corpus uses vertical writing mode as the primary hero treatment). Combined with Bebas Neue's condensed industrial forms, the vertical orientation creates an unexpected tension between Japanese calligraphic tradition and Western industrial typography. **Documented Seed/Style:** `aesthetic: surreal, layout: single-column, typography: bebas-bold, palette: honeyed-neutral, patterns: glitch, imagery: data-viz, motifs: particle-effects, tone: energetic` **Avoided Overused Patterns (from frequency analysis):** - Avoided "playful" aesthetic (95% frequency) -- chose surreal (2%) instead - Avoided "centered" as primary layout philosophy (99%) -- uses single-column corridor with ambient void - Avoided "friendly" tone (98%) -- chose energetic (8%) with surreal undertones - Avoided "warm" as palette descriptor (100%) -- palette is technically warm-toned but categorized as honeyed-neutral (3%), a much more specific and underused designation - Avoided "vintage" motifs (85%) -- chose particle-effects (2%) as primary motif - Avoided "minimal" imagery (94%) -- chose data-viz (6%) as imagery approach - Avoided "mono" typography (99%) -- chose bebas-bold (2%) as typography category - Avoided "scroll-triggered" as the defining animation pattern (97%) -- while scroll does drive animations, the primary pattern vocabulary is "glitch" which is distinct and underused in the patterns category