# Design Language for oning.stream ## Aesthetics and Tone **oning.stream** is a cinematic transmission — a broadcast signal bleeding through static into something alive. The aesthetic is raw-authentic cinema: not polished festival films but grainy 16mm footage, the kind shot in real places with available light. Think the opening frames of a Wong Kar-wai feature — neon bleeding into rain-wet pavement, a face caught mid-expression, motion blur as memory rather than error. The tone is intimate and unguarded. This is not a brand talking at you. This is a stream — continuous, unfiltered, slightly overexposed. The cultural references are layered and specific: fragments of Korean signage ghost through the background, vintage broadcast color bars slice unexpectedly into the scroll, a Kowloon Walled City density of texture sits behind clean mono type. Mood words: **fractured luminance**, **urban pulse**, **analog warmth**, **cinematic grain**, **subcultural depth**. The site should feel like you opened a live feed to somewhere real — noisy, beautiful, slightly compressed. ## Layout Motifs and Structure The macro-structure is **diagonal-sections**: the viewport is divided by hard diagonal cuts (approximately 7–12 degrees off horizontal), never by horizontal rules. Each content band is a tilted slice of film frame. Sections bleed into each other at the diagonal edges with a 2px luminous stroke in hot magenta (#FF2D78) that acts as a film splice mark. **Scroll behavior:** the page moves like a vertical film reel — each full-viewport section snaps into place with a brief resistance before giving way, simulating manual film advancement. Sections are separated by these diagonal cut-lines, not padding. **Internal composition:** Within each diagonal band, content arranges on a skewed 12-column grid where columns also tilt to match the section's diagonal. Text blocks are set at 0deg (upright, for readability) inside tilted containers, creating a productive tension between the grid and the type. **Layering system:** - Layer 0 (deepest): Full-bleed video loop or distressed texture — grainy, low-contrast, desaturated film stock - Layer 1: Diagonal color wash at 35% opacity — the "gel" over the scene - Layer 2: Collage fragments — torn imagery, double-exposures, cultural motifs at 60–80% opacity - Layer 3: Type and interactive elements at full opacity **Collage zones:** At every section boundary, a 180px-tall collage strip assembles itself on scroll — torn paper textures, oversized single Korean characters, film-leader countdown numerals, pulse-dot arrays. These strips are not decorative; they are the connective tissue of the narrative. ## Typography and Palette **Display type:** [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono) — monospace, technical, broadcast-terminal. Used for all large headings at 8–16vw. Letter-spacing at -0.02em makes it feel compressed like a video codec. Renders in off-white (#F0EDE6) against dark grounds, or hot magenta (#FF2D78) for signal emphasis. **Body / UI type:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — used at 14–18px for all readable prose. Set in warm white (#E8E3D9) or dim amber (#C9A96E) depending on section background. Line-height 1.65. **Accent / cultural type:** [Noto Sans KR](https://fonts.google.com/specimen/Noto+Sans+KR) — Korean characters used sparingly as visual motifs within collage strips, not as UI. Weight 900, oversized (100–200px), rendered at 15% opacity as background texture OR at full opacity as single-word punctuation. **Palette — cinematic gradient core:** | Role | Hex | Usage | |---|---|---| | Deep night | `#0A0A0F` | Primary background, film-dark base | | Tungsten shadow | `#1A1520` | Section backgrounds, mid-depth | | Neon bleed | `#FF2D78` | Diagonal splice lines, signal emphasis, pulse dots | | Broadcast amber | `#F5A623` | Secondary accent, warm signal glow | | Cultural cyan | `#00D4FF` | Tertiary accent, holographic overlay tint | | Warm white | `#F0EDE6` | Primary text, display type | | Dim amber | `#C9A96E` | Body text on dark, secondary text | | Film grain overlay | `#2A1F1A` | Warm mid-shadow for texture overlays | **Gradient usage:** The diagonal section transitions use multi-stop linear gradients at the section-cut angles — deep night → tungsten shadow → back to deep night — rather than hard fills. No gradient is ever a simple two-stop linear. All gradients have 4–6 stops with subtle mid-color variation. ## Imagery and Motifs **Film grain texture:** A tileable SVG noise filter (feTurbulence + feColorMatrix) applied at the Layer 0 level. Grain size varies by scroll position — coarser grain at section entries, finer as sections settle. This is the signature texture of the entire site. **Pulse-attention motif:** A recurring visual element is a ring that expands outward from a central point and fades — like a broadcast signal emanating, or a heartbeat on a monitor. These pulse rings appear: - As decorative punctuation after section headlines (small, 48px diameter, magenta) - As a full-screen ambient loop on the hero section (slow, 2.4-second period, cyan) - As hover states on any interactive element (instant flash, then fade 800ms) **Cultural collage elements:** - Fragments of neon sign typography (Korean and Latin mixed) rendered as SVG paths, never rasterized - Oversized single Korean characters (선, 흐름, 순간 — "line," "flow," "moment") as section-divider motifs - Vintage broadcast color bars (the SMPTE pattern) used as a loading/transition state, 3 seconds max - Film leader countdown circles (8, 7, 6...) appear in diagonal strip transitions - Distressed VHS tracking-error horizontal artifacts on section entry — a 200ms glitch on scroll arrival **Diagonal decorative elements:** - 1px diagonal hairlines in dim amber that extend across the full viewport at the section-cut angles - Parallelogram crop masks on any imagery (no rectangles, no circles — only tilted quadrilaterals) - Corner-notch marks (like film gate perforations) at the diagonal cut intersections — 8×16px notched rectangles in magenta ## Prompts for Implementation This is not a scrolling website. It is a **vertical film reel** — one continuous piece of footage divided into acts. Every implementation decision should reinforce the cinematic-transmission metaphor. **Hero / Act 1 — The Signal Opens:** Full viewport. Background is a slow video loop (or CSS-animated grain if no video): dark, desaturated, almost black. A single pulse ring expands from center — cyan, slow (2.4s period), three rings simultaneously at offset phases. The site name "oning.stream" types itself in Share Tech Mono at 10vw width, one character at a time at 80ms intervals, as if received by a terminal. Below the name, a single line of Space Grotesk appears: "the stream is live." No other UI in the hero. After 4 seconds or on first scroll, the hero section film-advances to Act 2 with a diagonal wipe from top-right to bottom-left. **Act 2 — The Broadcast Frame:** A tilted diagonal section (7° angle). Background: Tungsten shadow `#1A1520`. Collage strip at the top diagonal edge: film-leader countdown numerals (3, 2, 1) in oversized Share Tech Mono, scattered at random rotations, fading opacity. Main content area: a large statement block, Share Tech Mono at 7vw, set at 0° inside the tilted container. Supporting text in Space Grotesk below. A Noto Sans KR character (선) floats at 12% opacity behind the text block, 200px, weight 900. **Act 3 — Cultural Layer:** Full-bleed diagonal section. Korean neon signage SVG fragments build in from the left edge on scroll arrival, assembling like a collage over 1.2 seconds (staggered 80ms per element). Each fragment has a parallelogram crop mask. The SMPTE color bar appears for 200ms as this section enters viewport — a flash of broadcast identity — then dissolves into the collage. **Act 4 — The Pulse Grid:** A section built entirely from the pulse-attention motif. A 4×3 grid of pulse rings, each at a different phase offset and scale. Behind each ring: a tightly cropped texture fragment inside a parallelogram mask. This section should feel like a contact sheet from a film roll — each cell a moment, pulsing. **Act 5 — Raw Text Transmission:** Dark section, minimal. A block of prose set in Space Grotesk 18px, `#E8E3D9`, with generous 1.65 line-height. The text appears to scroll in from below its container (reveal by clip-path animation on scroll). One oversized Korean word (흐름) in the background at 8% opacity, 300px. No imagery, no decoration beyond film-grain texture and a single diagonal splice line. **Animation system:** - Scroll-triggered section entries: diagonal wipe using CSS `clip-path: polygon()` animation, 600ms ease-out - Pulse rings: CSS `@keyframes` with `transform: scale()` and `opacity`, no JS required - Type-in effect: pure JS `setInterval` character reveal, 80ms per character - VHS glitch on section entry: brief `translateX` ± 4px + `filter: brightness(1.4)` over 200ms, then settle - Grain animation: SVG `feTurbulence` with animated `baseFrequency` (very slow drift, 8s period) **Explicit avoidance list:** - No CTA buttons until the final act (and even then: minimal, text-only, no fills) - No pricing blocks, no feature grids, no testimonial cards - No hero image with text overlay in a traditional sense - No rounded corners anywhere (parallelogram or sharp rectangle only) - No white backgrounds in any section - No full-saturated RGB primary colors — every color has a slight warm or cool cast ## Uniqueness Notes 1. **Diagonal-section film-reel scroll with parallelogram crop masks** — all imagery uses only tilted quadrilateral crop masks (CSS `clip-path: polygon()`), never rectangles or circles. Combined with hard diagonal section cuts, the page reads as a continuous piece of film rather than a stack of cards. 2. **Animated film grain via live SVG filter** — rather than a static noise PNG overlay (common), the grain is a live SVG `feTurbulence` filter with a slow animated `baseFrequency`, meaning the grain actually drifts and breathes. The grain density changes with scroll position, coarser at section boundaries. 3. **Pulse-attention as structural motif not decoration** — the expanding pulse ring (broadcast signal / heartbeat) is used at three scales simultaneously: micro (hover state), meso (section punctuation), and macro (hero ambient loop). This makes a single visual metaphor do triple structural work. 4. **Korean typography as texture layer at dual opacity registers** — Noto Sans KR characters appear both as near-invisible background texture (8–15% opacity) and as full-opacity single-word statements. The same font at the same size functions as both wallpaper and punctuation, creating depth without additional elements. 5. **SMPTE color bar as transition flash** — a 200ms broadcast color bar flash on Act 3 section entry creates a moment of pure TV-transmission identity. It's a jolt of recognition — you've been watching a stream all along — that reframes the entire experience retroactively. **Chosen seed:** aesthetic: cinematic, layout: diagonal-sections, typography: tech-mono, palette: gradient, patterns: pulse-attention, imagery: collage, motifs: cultural, tone: raw-authentic **Avoided patterns (per frequency analysis):** - brutalist (6% — overused, avoided) - ethereal (6% — overused, avoided) - holographic (6% — overused, avoided) - mid-century (6% — overused, avoided) - graffiti (5% — overused, avoided)