# Design Language for oning.stream ## Aesthetics and Tone oning.stream channels the visual energy of a late-1990s underground zine that has been photocopied too many times, taped to a concrete wall in a converted warehouse gallery, and photographed under harsh fluorescent light. The aesthetic is **neubrutalism** -- not the polished, rounded-corner neubrutalism of Figma plugin marketplaces, but the original impulse: thick black borders that feel like they were drawn with a permanent marker on cardboard, backgrounds that refuse to blend, shadows so hard they look like physical objects, and an unapologetic rejection of visual comfort. The word "oning" evokes a continuous becoming, an ongoing stream of consciousness, and the design treats the page as a living collage wall where fragments of thought, image, and texture overlap, collide, and occasionally obscure each other. The tone is **raw-authentic**: no polish, no performance, no curated minimalism pretending to be vulnerability. This is the visual equivalent of someone speaking directly into a handheld recorder at 2 AM -- unedited, unfiltered, and uncomfortably present. Every element on the page looks like it was placed by a human hand in a hurry, with conviction rather than precision. The warmth comes not from soft colors or rounded corners but from the visible evidence of human decision-making: slightly misaligned elements, borders that don't quite close, text that crowds its container, images that bleed past their frames. Inspiration sources: David Carson's Ray Gun magazine layouts, Barbara Kruger's confrontational typography, the xerox aesthetic of 1980s punk flyers, Tadanori Yokoo's psychedelic Japanese poster art, and the raw HTML energy of early GeoCities pages before CSS existed. ## Layout Motifs and Structure The layout is **full-bleed** in the truest sense: content is not contained within a comfortable max-width wrapper. Instead, elements stretch edge to edge, spill past viewport boundaries, and treat the browser window as a physical surface to be covered, layered, and overwhelmed. There is no global container. There is no safe margin. The page itself is the canvas, and content is affixed to it like torn paper on a collage board. **Structural System:** The page is organized into a series of full-viewport "panels" that function like pages in a zine. Each panel occupies 100vw x 100vh minimum and is visually distinct -- different background colors, different orientations, different densities. The panels do not transition smoothly; they cut hard, like jump-cuts in a Godard film. There is no gradient fade between sections, no smooth scroll-snap cushion. One panel ends, the next begins, and the visual shift is abrupt and intentional. Within each panel, content is positioned using a deliberately crude grid: a 12-column CSS grid where elements are placed at irregular intervals, spanning unpredictable column counts. A heading might span columns 1-7 while a collage image occupies columns 5-12, creating deliberate overlap. Text blocks sit on top of image blocks. Borders cut through other borders. The grid exists not to organize but to provide a scaffold for creative collision. **Specific Panel Structures:** - **Panel 1 (Hero):** The domain name "oning.stream" is rendered at 15vw font-size, positioned in the bottom-left quadrant of the viewport, with the text running off the left edge so only "ning.stream" is initially visible. A thick black border (8px solid #1A1A1A) frames nothing -- it sits in the upper-right quadrant, empty, like a picture frame hung on the wall before the painting arrives. The background is solid #F2E6D9 (warm parchment). - **Panel 2 (Manifesto):** A dense block of text set in "Syne" at 1.1rem occupies 60% of the viewport width, positioned hard-left with no padding. To the right, overlapping the text by approximately 15%, a collage of three rectangular elements (different background colors: #E85D3A, #2D2D2D, #F2C744) stacked at slight rotations (transform: rotate(-2deg), rotate(1.5deg), rotate(-0.8deg)) create a torn-flag effect. - **Panel 3 (Stream):** Horizontal overflow. Content extends beyond 100vw, requiring horizontal scroll within a vertical-scrolling page. A strip of collage imagery (CSS background-image composites) stretches to 250vw, with text fragments placed at intervals like captions on a filmstrip. - **Panel 4 (Archive):** A fake "desktop" layout -- elements styled to look like overlapping browser windows, sticky notes, and dragged-and-dropped files. Each "window" has a thick title bar (#1A1A1A background, white text in "Space Mono"), mismatched window sizes, and content that peeks out from behind adjacent windows. This is a direct reference to the desktop metaphor, subverted. **Navigation:** There is no traditional navigation. The page is a single, continuous vertical stream. If a viewer needs to navigate, they scroll. The only interactive navigation element is a fixed-position element in the bottom-right corner: a thick-bordered square (48px x 48px, 4px solid #1A1A1A, background #F2C744) containing the text "^" in Space Mono bold, which scrolls to top on click. It appears only after the first panel is scrolled past. ## Typography and Palette **Typography:** - **Display / Headlines:** "Syne" (Google Fonts) -- a variable font with an axis from weight 400 to 800 and an inherently eccentric personality. Its letterforms have unusual proportions: wide, slightly compressed verticals with unexpected curves in characters like 'g', 'a', and 'e'. Used at extreme sizes: 10vw-15vw for the hero title, 4rem-7rem for panel headings. The variable weight axis is exploited dynamically -- on hover or scroll-trigger, headings shift from weight 400 to 800 over 0.3s, creating a visual "breathing" effect where the text physically thickens before the viewer's eyes. Always set in sentence case. Letter-spacing: -0.03em at large sizes to create density and pressure. - **Body / Running Text:** "Space Grotesk" (Google Fonts) at weight 400-500, size 1rem-1.15rem, line-height 1.65. This geometric sans-serif has the technical clarity of a monospace font without the visual monotony. Its slightly squared-off terminals give body text a utilitarian, worksheet-like quality that contrasts with Syne's expressiveness. Used for all paragraph text, captions, and secondary content. Color: #2D2D2D on light panels, #F2E6D9 on dark panels. - **Accent / Labels:** "Space Mono" (Google Fonts) at weight 400 and 700, size 0.75rem-0.9rem, used exclusively for labels, timestamps, metadata, navigation text, and the "window title bars" in Panel 4. Always uppercase with letter-spacing: 0.15em. This monospace face reinforces the zine/typewriter aesthetic and provides a third texture layer against Syne and Space Grotesk. **Palette:** The palette is warm but harsh -- these are not the warm colors of a sunset; they are the warm colors of a construction site, a stack of manilla folders, a warning sign. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Warm Parchment | #F2E6D9 | Aged paper, almost yellowed -- the default surface | | Background Secondary | Deep Charcoal | #1A1A1A | Near-black, used for inverted panels and borders | | Background Tertiary | Raw Sienna | #C4723A | Burnt orange-brown, used for accent panels | | Accent Primary | Signal Red | #E85D3A | Aggressive, warm red-orange -- the dominant accent | | Accent Secondary | Caution Yellow | #F2C744 | Thick, opaque yellow -- highlights, badges, the scroll-to-top button | | Text Primary | Soot | #2D2D2D | Near-black, softer than pure black | | Text Secondary | Warm Parchment | #F2E6D9 | Used as text color on dark backgrounds | | Border / Rule | Hard Black | #0A0A0A | Pure-ish black for all borders, lines, and rules | All borders throughout the site are a minimum of 3px solid #0A0A0A. Most are 4-8px. There are no 1px borders anywhere. Box-shadows use hard offsets with zero blur: `box-shadow: 6px 6px 0px #0A0A0A` is the default shadow treatment. This creates the signature neubrutalist "sticker" effect where elements appear to float above the surface. ## Imagery and Motifs **Collage as Primary Visual Language:** The site does not use photographs or illustrations in the conventional sense. Every visual element is a **collage** -- a composite of overlapping, clipped, rotated, and layered fragments that evoke the analog cut-and-paste process of zine-making. These collages are constructed entirely in CSS and SVG, using the following techniques: 1. **Layered Rectangles:** Groups of 3-5 `
` elements with solid background colors from the palette, positioned with slight rotations (CSS transform: rotate between -4deg and 4deg), overlapping edges, and thick black borders. These clusters function as abstract art pieces -- they don't represent anything; they exist as compositions of color, angle, and weight. Each cluster is unique in its proportions and color ordering. 2. **Text-as-Image Fragments:** Isolated words or phrases (pulled from a vocabulary of evocative terms: "STREAM", "BECOMING", "NOW", "ONGOING", "SIGNAL", "NOISE") rendered at oversized scales (8rem-20rem) in Syne at weight 800, clipped by their container using `overflow: hidden` so only a portion of each word is visible. These cropped text fragments function as graphic elements, not as readable content. They peek out from behind collage rectangles or bleed off panel edges. 3. **Halftone Dot Pattern Overlays:** CSS background patterns using `radial-gradient` to create halftone dot textures reminiscent of enlarged newsprint. Applied as pseudo-element overlays (`::after`) on collage clusters at 20-40% opacity. The dot pattern: `radial-gradient(circle, #0A0A0A 1px, transparent 1px)` at `background-size: 8px 8px`. This adds a vintage print texture that reinforces the zine aesthetic without relying on image assets. 4. **Torn-Edge Simulation:** Collage elements use CSS `clip-path: polygon()` with slightly irregular coordinates to create edges that are not perfectly straight -- simulating paper torn by hand. Example: `clip-path: polygon(0% 2%, 98% 0%, 100% 97%, 3% 100%)` instead of a perfect rectangle. 5. **Tape Strips:** Decorative elements that simulate masking tape holding collage pieces in place. Implemented as narrow `
` elements (20px x 80px) with `background: rgba(242, 199, 68, 0.7)` (semi-transparent caution yellow), rotated at irregular angles across the corners of collage clusters. These have a subtle `backdrop-filter: brightness(1.05)` to simulate the translucency of real tape. **Motifs -- Vintage Print Culture:** The vintage motif is expressed not through sepia filters or old-timey illustrations but through the materiality of print production itself: - **Registration Marks:** Small cross-hair symbols ("+") placed at the corners of panels, rendered in #E85D3A at 0.65rem in Space Mono. These mimic the registration marks on printer proofs and reinforced the feeling that the page is a proof sheet, not a finished product. - **Crop Marks:** Thin L-shaped corner brackets at the edges of key content blocks, rendered as CSS borders on pseudo-elements. These are the trim marks of print production, suggesting the content extends beyond what is shown. - **Overprint Simulation:** On panels where colored rectangles overlap, the overlapping region uses `mix-blend-mode: multiply` to simulate ink overprinting, where two inks combine to create a darker, muddier color. This is a direct reference to CMYK printing and adds visual complexity without additional elements. - **Page Numbers:** Each panel has a small "page number" in the corner (P.01, P.02, P.03...) set in Space Mono uppercase at 0.7rem, colored #C4723A. This reinforces the zine/publication metaphor. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should be implemented as a single HTML file with embedded CSS and minimal JavaScript. The experience is a vertical scroll through 4-6 full-viewport panels, each with a distinct visual identity but connected by the consistent neubrutalist language of thick borders, hard shadows, warm colors, and collage compositions. **Panel-by-Panel Implementation Notes:** - **Panel 1 (Hero):** Use CSS Grid to position the oversized "oning.stream" text. The text should be set in Syne variable at `font-variation-settings: 'wght' 800` and `font-size: 15vw`. Position it with `margin-left: -8vw` so it starts off-screen to the left. The empty black border frame (200px x 300px, 8px solid #0A0A0A) is positioned absolutely in the upper-right area. On scroll, implement a **slide-reveal** animation where a collage cluster of colored rectangles slides in from the right edge of the viewport over 0.6s with `transform: translateX(100vw)` to `translateX(0)`, using `transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1)` for an aggressive ease-out. - **Panel 2 (Manifesto):** The text block uses `column-count: 1` and is positioned hard-left with `padding-left: 5vw; padding-right: 0`. The overlapping collage rectangles use absolute positioning and z-index layering. Each rectangle enters via slide-reveal from different directions (left, bottom, right) staggered by 0.15s intervals when the panel enters the viewport. - **Panel 3 (Horizontal Stream):** Use a scrollable container with `overflow-x: auto; overflow-y: hidden; white-space: nowrap` inside a full-height panel. The horizontal strip contains inline-block sections, each 80vw wide, with collage compositions and text fragments. A thin progress bar (#E85D3A, 3px height) at the bottom of the panel indicates horizontal scroll position via JavaScript. - **Panel 4 (Archive Desktop):** Each "window" is a `
` with `position: absolute`, a thick border (4px solid #0A0A0A), hard shadow (`box-shadow: 8px 8px 0 #0A0A0A`), and a title bar implemented as a child `
` with `background: #1A1A1A; padding: 6px 12px; color: #F2E6D9; font-family: 'Space Mono'; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em`. Windows should be draggable via JavaScript `mousedown`/`mousemove` events, allowing the visitor to rearrange the desktop. **Animation Strategy -- Slide-Reveal as Primary Pattern:** All entrance animations use the **slide-reveal** pattern. Elements do not fade in (no opacity transitions for entrance). Instead, they slide into view from off-screen (left, right, top, or bottom) using `transform: translate()` transitions. The timing function is always aggressive: `cubic-bezier(0.22, 1, 0.36, 1)` -- fast start, slow finish, creating a sense of physical momentum as if elements are being slapped onto the page. - Headings slide in from the left. - Collage clusters slide in from the right. - Body text slides up from below. - Labels and metadata slide down from above. Entrance triggers are scroll-based using IntersectionObserver with a threshold of 0.15. Once an element's container is 15% visible, the slide-reveal fires. Each element within a group is staggered by 0.1-0.2s using CSS `transition-delay` or `animation-delay`. **The variable weight animation on Syne headings** is triggered on hover (desktop) and on scroll-enter (mobile): `font-variation-settings` transitions from `'wght' 400` to `'wght' 800` over 0.4s, making the text appear to swell with emphasis. This leverages the expressive-variable typography seed and creates an interaction that feels physical -- like pressing harder on a pen. **JavaScript Interactions:** - Scroll-to-top button appears after Panel 1 via IntersectionObserver. - Horizontal scroll progress bar in Panel 3 updates via `scroll` event listener. - Draggable windows in Panel 4 use pointer events. - Variable font weight animation on headings uses IntersectionObserver for scroll-enter and `mouseenter`/`mouseleave` for hover. **AVOID:** CTA buttons, pricing tables, stat-grids, testimonial carousels, newsletter signup forms, hamburger menus, smooth-scroll navigation, gradient backgrounds, rounded corners greater than 4px, opacity-based fade-in animations, stock photography, icon libraries. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Neubrutalism at 1% Frequency:** This is one of the rarest aesthetics in the portfolio. While brutalist (9%) has some representation, neubrutalism -- with its specific vocabulary of thick borders, hard shadows, and bold flat colors -- is distinct and nearly absent. The site fully commits to neubrutalist principles: no gradients, no blur, no rounded corners, no subtle shadows. Every visual decision is loud, flat, and unapologetic. This stands in stark contrast to the 95% playful aesthetic that dominates the portfolio. 2. **Slide-Reveal Animation as Sole Entrance Pattern (3% frequency):** While 97% of designs use scroll-triggered animations and 76% use parallax, this design rejects both parallax depth effects and opacity-based fade-ins entirely. Every element enters via hard slide-reveal from off-screen, using aggressive cubic-bezier timing. This creates a visual rhythm that feels like pages being slapped down on a table rather than gently appearing. No other design in the portfolio commits exclusively to slide-reveal as its animation vocabulary. 3. **Collage-Only Imagery with Zero Photography (8% frequency):** The site contains no photographs, no illustrations, no icons. Every visual element is a CSS/SVG collage construction -- layered colored rectangles, cropped text fragments, halftone dot overlays, and simulated tape strips. At 8% frequency, collage is already uncommon, but this design pushes further by making collage the _only_ imagery mode, refusing to supplement it with the photography (73%) or minimal imagery (94%) that dominate the portfolio. 4. **Expressive-Variable Typography (3% frequency):** The use of Syne as a variable font with dynamic weight animation (400-800 on scroll/hover) is a technique almost no other design employs. Typography is not static decoration here; it is an interactive element that responds to user behavior, thickening and thinning like a living organism. 5. **Raw-Authentic Tone (3% frequency):** Against a portfolio where 98% of designs use a friendly tone, this design is deliberately uncomfortable, direct, and unpolished. The tone is not hostile, but it refuses to ingratiate. There is no "Welcome to..." or "Discover..." language. The content exists; the viewer encounters it on its terms. 6. **Desktop Metaphor Panel:** The fake-desktop panel (Panel 4) with draggable windows is a unique structural element not found in other designs. It subverts the webpage-as-page convention by making the webpage-as-desktop, adding an interactive layer that references computing history while remaining fully functional. **Documented seed/style:** aesthetic: neubrutalism, layout: full-bleed, typography: expressive-variable, palette: warm, patterns: slide-reveal, imagery: collage, motifs: vintage, tone: raw-authentic **Avoided overused patterns:** Rejected playful aesthetic (95%), centered layout (99%), mono typography (99%), scroll-triggered parallax (76%), friendly tone (98%), minimal imagery (94%), fade-reveal entrance (8%). Embraced underused patterns: neubrutalism (1%), slide-reveal (3%), expressive-variable (3%), raw-authentic (3%), collage (8%).