# Design Language for tsundere.tube ## Aesthetics and Tone A neomorphic frost-glass observatory — pillow-soft translucent panels arranged in a sidebar-anchored gallery where retro-patterned vector illustrations hover behind frosted glass like daguerreotypes in a winter vitrine. The aesthetic merges Apple's late-90s aqua/frost interfaces, Dieter Rams' minimalist Braun radio dials (translated into translucent plastic), and the geometric retro-tile patterns of Vienna Secessionist linoleum floors photographed through frosted glass. Elegant-sophisticated in tone: the curator-narrator speaks with composed care, walking the visitor through a sequence of soft objects with thoughtful pacing. The voice is composed and unhurried. "This panel — pause with it for a moment. The pattern beneath is from a 1908 floor in Vienna; the frost has held it close for a century." Each panel is a small meditation. ## Layout Motifs and Structure Sidebar layout: a 360px fixed left sidebar carries a vertical navigation: 7 collection names in commissioner-versatile, separated by 1px frosted hairlines and small numerical indicators. Above the collections, a neomorphic "frost orb" (180×180 circular panel) sits as the brand-mark, slowly pulsing its inner shadow. Below the collections, a thin frosted scroll-progress bar. Main canvas: each collection occupies a single section. Sections do not parallax — instead, they reveal via skeleton-loading shimmer: when a section enters viewport, the neomorphic panels first appear as soft frost-blurs (heavy Gaussian blur, low opacity), then resolve into crisp panels over 1.2s as the shimmer crosses the panel. Panel composition per section: - 1 large feature panel (480×320) with a vector-art illustration behind frosted glass. - 3-5 satellite panels (180×180 to 240×240) arranged in a tight cluster around the feature. - Each panel has soft neomorphic inner-shadow and outer-shadow, with a 16px radius. - Retro-pattern motif (geometric tile pattern) repeats subtly in the panel background, visible only through the frosted overlay. The header is a single oversized neomorphic panel containing the collection number ("Vitrine №03") in commissioner-versatile. The footer dissolves into a wash of translucent-frost gradient. ## Typography and Palette - **Display headlines:** "Commissioner" (Google Fonts), weight 500 — commissioner-versatile for collection titles at 56-72px, letter-spacing -0.01em. - **Sub-display:** "Commissioner" (Google Fonts), weight 300 italic — at 22-28px for collection sub-captions. - **Body:** "Commissioner" (Google Fonts), weight 400 — at 17px line-height 1.7 for curator narrative copy. - **Sidebar navigation:** "Commissioner" (Google Fonts), weight 400 — at 14px with 0.16em letter-spacing for collection names. - **Panel codes / labels:** "Commissioner" (Google Fonts), weight 600 — at 11px ALL CAPS letter-spacing 0.2em for panel codes ("VIT-03-A"). Palette — Translucent-frost neomorphic: - `#EDF1F5` Glacier Pearl — base background, neomorphic-default for panel surfaces. - `#D7DEE5` Frosted Slate — secondary frost tone for panel inner-shadow and sidebar. - `#FFFFFF` Pure Bloom — neomorphic outer-highlight tone. - `#5A6478` Slate Ink — primary text color and panel-code labels. - `#A5B0C2` Mist Hush — secondary muted text for italic sub-captions. - `#7A98A8` Frost Teal — micro-accent reserved for neomorphic "active" state and 1 retro-pattern tint per section. Neomorphic shadow logic: every panel uses dual shadows — `inset 4px 4px 8px rgba(170,180,190,0.4)` for inner shadow + `8px 8px 16px rgba(170,180,190,0.18)` outer shadow + `-6px -6px 12px rgba(255,255,255,0.9)` highlight. ## Imagery and Motifs - **Vector-art imagery**: each feature panel contains a single vector illustration — geometric, retro-flat, with 1.2px line work in Slate Ink and pale fill tones (Mist Hush, Frost Teal). Subjects: an Eames lounger silhouette, a Saarinen tulip table, a Braun T1000 radio, a Vienna café chair, an Olivetti Valentine typewriter, a Tizio lamp, an Eero Aarnio Ball Chair. Each is rendered as a clean geometric vector. - **Retro-patterns motifs**: each section uses a different retro tile pattern in the panel background (Vienna Secessionist tile, Mid-century terrazzo dots, Art Deco fan, Memphis squiggle, Ottoman muqarnas, Edo komon, Bauhaus circle). Patterns are drawn at 0.18 alpha, visible only through frost. - **Frosted-glass overlay**: every vector illustration is layered behind a `backdrop-filter: blur(12px) saturate(1.1)` translucent panel, simulating real frost-glass. The blur softens the vector beneath, leaving only the silhouette and major lines. - **Neomorphic dials**: small circular dial indicators on each feature panel (a tactile knob with a notched indicator), drawn neomorphically with inner-shadow and a single Frost Teal indicator-line. - **Skeleton shimmer**: a 240px-wide gradient shimmer that crosses each panel on load, suggesting the panel "developing" into focus like a daguerreotype settling. ## Prompts for Implementation - Build sidebar with `position: fixed; left: 0; width: 360px; height: 100vh`. Main canvas with `margin-left: 360px`. On mobile, sidebar slides into a bottom-anchored mini-rail. - Neomorphic panels: use CSS box-shadow multi-stop (inset + outset + highlight) per panel. CSS custom properties for `--shadow-inner`, `--shadow-outer`, `--highlight` so they can be themed. - Skeleton-loading pattern: each panel uses an inner `
` overlay that animates a CSS keyframe from `background-position: -100% 0` to `200% 0` over 1.2s on enter; afterward, opacity fades to 0. Underlying vector illustration becomes visible. - Vector illustrations: inline SVG (20-60KB each); placed behind a `
` with `backdrop-filter: blur(12px) saturate(1.1)` and `background: linear-gradient(135deg, rgba(237,241,245,0.4), rgba(215,222,229,0.6))`. - Retro-pattern motifs: SVG `` elements, one per section, tiled at 60×60. Pattern fill at 0.18 alpha behind the vector. - Neomorphic dials: SVG `` with multi-stop radial gradients simulating concave/convex surfaces; a 1.5px notch indicator in Frost Teal, animated to rotate on hover (45deg). - Bias toward elegant curator narrative: each collection is a small essay on a single object. No CTAs, no pricing, no stat-grids — only collection essays and vector panels. - Cursor becomes a small Frost Teal pointer with a neomorphic shadow; on hover over a panel, the panel slightly elevates (shadow-outer grows to 12px 12px 24px) and the frost saturates slightly (saturate 1.2). - Reduced motion: disable skeleton shimmer; replace with immediate fade-in; freeze dial rotation; disable orb pulsing. ## Uniqueness Notes - Differentiator 1: sidebar layout used as a curator-led collection index, with 7 collections each containing soft neomorphic vitrines. - Differentiator 2: neomorphism + translucent-frost palette + retro-patterns combination — soft pillow surfaces with old tile patterns visible through the haze. - Differentiator 3: skeleton-loading pattern used as a "panel developing" effect, framing the loading state as a diegetic daguerreotype settling. - Differentiator 4: vector-art imagery placed BEHIND frosted glass (backdrop-filter), so the illustration is softened — a translucent presentation rather than a flat one. - Differentiator 5: commissioner-versatile typography used uniformly with weight/style variation, anchoring the design in a precise typographic register without competing typefaces. - Chosen seed: aesthetic: neomorphism, layout: sidebar, typography: commissioner-versatile, palette: translucent-frost, patterns: skeleton-loading, imagery: vector-art, motifs: retro-patterns, tone: elegant-sophisticated. - Avoided patterns from frequency analysis: parallax (94% — replaced with skeleton-loading panel reveals), card-grid (90% — replaced with neomorphic vitrine cluster), centered (94% — sidebar + cluster), photography (90% — replaced with vector-art), mono typography (81% — replaced with Commissioner), mysterious-moody (71% — replaced with elegant-sophisticated).