# Design Language for underdark.stream ## Aesthetics and Tone An avant-garde luxurious archive — a sidebar-anchored vault where condensed typography stretches like cathedral columns over a muted-onyx canvas, and slide-reveal panels open one at a time to disclose a hand-drawn custom-illustration plate surrounded by drifting particle motes. The aesthetic merges Yohji Yamamoto's monochrome runway look-books, the muted-paper editorial pages of Rei Kawakubo's Comme des Garçons archive, Massimo Vignelli's condensed-grid signage, and the slow particle drift of Tarkovsky's "Solaris." Luxurious in tone: the curator-narrator's voice is restrained, knowing, never explanatory. The voice is restrained and knowing. "Plate II — the chair without a seat. Look at how the absence is the structure." Few sentences, never apologetic. ## Layout Motifs and Structure Sidebar layout: a 400px-wide fixed left sidebar carries a vertical archive index. The sidebar is split into: - Top: an oversized condensed wordmark "UNDER · DARK · STREAM" set vertically (text-orientation: upright), occupying the upper third. - Middle: 9 plate-name entries in condensed typography, each entry separated by a 0.5px Onyx Mist hairline. - Bottom: a slowly drifting particle field of 12-18 small motes that respect the sidebar boundary. Main canvas (remaining viewport): each plate occupies a single 100vh section. Slide-reveal pattern: as the visitor scrolls, panels enter from the right edge of the viewport, translating from `translateX(40%) opacity(0)` to `translateX(0) opacity(1)` over 1.1s cubic-bezier(.2,.7,.2,1), with a slight 1.02 scale overshoot. Previous panels slide out to the left at half-speed, creating a "page-turning" effect. Each plate composition: - Left: a custom-illustration plate (480×640 hand-drawn SVG) of an avant-garde object (a black ribbon, a chair without a seat, a single shoe, a fold of fabric, a torn poster). - Right: a single condensed-typography headline (vertical or horizontal), a 3-4 sentence prose passage in muted serif italic, and a small plate code in mono ("PLT.III"). - Background: a drifting particle field surrounding the plate, with motes parallaxing past at varying depths. ## Typography and Palette - **Display headlines:** "Oswald" (Google Fonts), weight 600 — condensed sans for plate titles at 88-128px, ALL CAPS, letter-spacing 0.04em, sometimes set vertically. - **Sub-display:** "Oswald" (Google Fonts), weight 300 — at 24-32px for plate sub-titles and section markers. - **Body:** "Cormorant Garamond" (Google Fonts), weight 400 italic — at 17px line-height 1.7 for muted serif curator prose. - **Sidebar archive index:** "Oswald" (Google Fonts), weight 400 — at 14px ALL CAPS letter-spacing 0.16em for plate-name entries. - **Plate codes:** "JetBrains Mono" (Google Fonts), weight 400 — at 11px for plate codes ("PLT.III · 1972"). Palette — Muted onyx archive: - `#0E0E10` Onyx Void — deepest background between plates and behind sidebar. - `#1B1B1E` Ash Cavern — primary background tone for main canvas. - `#2E2E32` Velvet Bone — secondary tone for sidebar interior and plate frames. - `#A09E96` Onyx Mist — secondary text and hairline color. - `#F0EBE0` Vellum Linen — primary text color and illustration line work. - `#8C7A56` Sable Gold — micro-accent reserved for plate codes and a single accent particle per plate. Muted discipline: no saturation above 0.45. The palette is a velvet darkroom; the only "color" is the textured contrast between Onyx, Ash, Velvet, Mist, and Vellum. ## Imagery and Motifs - **Custom-illustration plates**: each plate is a hand-drawn SVG (60-200KB) of an avant-garde object, rendered in 1.2px Vellum Linen with delicate Onyx Mist shadows. Each illustration has a single animated micro-element (the ribbon sways at 0.4Hz, the fabric folds shift, the torn poster rustles). - **Particle-effects motifs**: drifting motes (1-3px Vellum Linen + 6-12px Onyx Mist halo) populate the main canvas, parallaxing past at 3 depth layers. Motes drift at 4-9px/sec, randomized vector and lifespan (8-22s). - **Vertical typography**: each plate's title can be set vertically (text-orientation: upright, writing-mode: vertical-rl) — this is an avant-garde typographic gesture used selectively. - **Plate framing**: each plate has a thin 1px Onyx Mist border with cropped corners (clip-path triangular notches at top-left and bottom-right), suggesting an archive-print mounting. - **Curator marginalia**: tiny mono-text plate codes hover near each plate ("PLT.III · 1972 · Y.YAMAMOTO"), set in JetBrains Mono in Sable Gold at 11px. ## Prompts for Implementation - Build sidebar with `position: fixed; left: 0; width: 400px; height: 100vh`. Main canvas with `margin-left: 400px`. Sidebar has its own absolutely-positioned particle field with `pointer-events: none`. - Slide-reveal pattern: each plate is a 100vh `
`. JS uses scroll position to drive translation: current plate at `translateX(0)`, next at `translateX(40%)`, previous at `translateX(-50%)`. Transitions over 1.1s cubic-bezier(.2,.7,.2,1). - Particle field: a single fixed `` element behind the main canvas, redrawn at 30fps with 80-120 particles drifting in 3 depth layers (parallax 1.0 / 0.6 / 0.3). Particles spawn at canvas edges and fade out over their lifespan. - Custom-illustration plates: inline SVG (60-200KB each), with `filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6))` to give them depth on the Ash Cavern background. Each SVG has one animated micro-element (ribbon sway, fabric shift, etc.). - Vertical typography: applied selectively via `writing-mode: vertical-rl; text-orientation: upright` on specific `

` elements; 2-3 plates per archive use this orientation, the rest are horizontal. - Plate framing: SVG `` with `clip-path: polygon(...)` for cropped corners, plus a thin Onyx Mist 1px stroke. - Bias toward luxurious curatorial narrative: each plate is a 3-4 sentence meditation on the object. No CTAs, no pricing, no stat-grids — only plates, prose, and particles. - Cursor becomes a Vellum Linen tiny pointer with a 4px Onyx Mist halo; on hover over a plate, the plate's micro-element animation accelerates 1.5x and the particle field around the plate brightens. - Reduced motion: disable slide-reveal horizontal translation (use opacity fade instead); freeze particle drift; disable micro-element animations. ## Uniqueness Notes - Differentiator 1: sidebar layout used as an oversized vertical-wordmark archive index with 9 plate entries — the sidebar IS the catalog. - Differentiator 2: condensed typography (Oswald) used selectively in vertical orientation on some plates — typographic asymmetry as design statement. - Differentiator 3: avant-garde aesthetic enforced via muted onyx palette + drifting particles + custom illustrations of objects-with-absences (chair without seat, single shoe, torn poster) — the absence is the subject. - Differentiator 4: slide-reveal panels with 1.02 scale overshoot, simulating archive pages being turned by a curator. - Differentiator 5: particle-effects motifs as a 3-layer parallaxing field around plates, creating velvet-darkroom atmosphere. - Chosen seed: aesthetic: avant-garde, layout: sidebar, typography: condensed, palette: muted, patterns: slide-reveal, imagery: custom-illustration, motifs: particle-effects, tone: luxurious. - Avoided patterns from frequency analysis: parallax (94% — used as 3-layer particle depth only), card-grid (90% — replaced with sidebar+plate sections), centered (94% — sidebar-anchored), photography (90% — replaced with hand-drawn SVG plates), mono typography (81% — used only for plate codes), mysterious-moody (71% — replaced with luxurious restraint).