# Design Language for tsundere.dev ## Aesthetics and Tone Scandinavian restraint elevated to opulence — a hush-grand showroom curated by a Stockholm museum director who collects circuit-board reliefs and gradient-mesh fjord paintings. The page reads as a curatorial walkthrough through a marble-floored Nordic gallery where every wall holds a precisely framed cool-gray composition: clean grotesque type, gentle gradient-mesh prints, ornamental circuit motifs as gallery wall reliefs. Inspiration: the cool spaciousness of Snøhetta's Oslo Opera House, the refined editorial of "Apartamento" magazine, Bruno Munari's gallery installations, and the slow opulence of a Hermès Stockholm window display. The tone is opulent-grand — quiet money, generous spacing, hand-tailored rule weights. Tsundere here is the curator's small smirk: appears chilly, gleams precise. ## Layout Motifs and Structure Z-pattern composition treated as a Nordic gallery floor-plan. Each "room" is one viewport, and the eye is led top-left wordmark → top-right room number → mid-canvas gradient-mesh artwork → bottom-right curator's caption. Rooms progress vertically as full-bleed gallery viewports separated by deliberate negative space — 240px white-air gutters. Slide-reveal patterns activate per room: when a room enters view, its title slides up from below by 36px and its caption fades-in from the right edge with a 320ms delay. Each room features one centered gradient-mesh artwork (large, 60vw, slow-drifting), surrounded by ornamental circuit motifs along the gallery walls (thin SVG circuit-tracings rendered as decorative friezes). The composition is precise but never sterile: every measurement is precise to the millimeter, but the page feels generous, not minimal-for-minimalism's-sake. ## Typography and Palette - **Display:** "Inter" (Google Fonts) — sans-grotesk, weight 200 at 96–140px for room titles, italic for room kickers - **Body:** "Manrope" (Google Fonts) — sans-grotesk, weight 300 at 17px line-height 1.75 - **Curator caption:** "Source Serif Pro" (Google Fonts) — italic at 14px for refined curator's notes - **Numeric mark:** "Space Grotesk" (Google Fonts) — at 12px for room codes and gallery coordinates Palette — Cool grays with brass restraint: - `#F4F5F7` Snøhetta Stone — main background, gallery floor - `#D9DDE3` Fjord Mist — secondary surface, room edge tone - `#5C6772` Glacial Slate — body text on light surface - `#1F2329` Granite Pen — display type and frame outlines - `#9AA4AE` Pewter Gray — secondary captions and ornamental circuits - `#C3A572` Brass Discreet — single restrained warm accent for room-codes ## Imagery and Motifs - **Gradient-mesh**: each room's centerpiece is one large gradient-mesh artwork — a soft, slowly drifting mesh of cool grays with one brass-discreet point of warmth. Generated as SVG with `` + `` driving subtle pattern drift - **Circuit motifs**: thin, ornamental SVG circuit-trace friezes running along the upper and lower edges of each room — drawn in Pewter Gray, 1px strokes, with small diamond nodes - Scandinavian ornaments: thin hairline rules, tiny brass corner glyphs, geometric grids referenced as 1px Pewter outline rectangles - A recurring "curator's mark" — a small SVG monogram (a brass-discreet glyph composed of overlapping circles) appears in the lower-right of each room's caption block - Subtle 1px Pewter Gray dot-grid tiled at 24px intervals as the gallery floor's faint texture ## Prompts for Implementation - Z-pattern reading: each room positions content at 4 anchor points (top-left wordmark, top-right room code, mid-canvas artwork, bottom-right caption); animate eye-trace via staggered fade-in along that Z - Gradient-mesh artwork: SVG `` filtered through `` (baseFrequency 0.018, numOctaves 3) plus `` to remap to cool grays + one Brass Discreet hue point; subtle 30s drift via `animateTransform` - Slide-reveal pattern: room title `translateY(36px → 0)` + opacity(0→1) over 680ms cubic-bezier(.2,.7,.2,1); caption fades-in with 320ms delay from the right edge - Circuit motif friezes: SVG paths along top/bottom of each room (~80px tall borders) drawn with 1px Pewter Gray strokes, with small diamond node-stops every 64px, animated stroke-dashoffset at 24s cycles - AVOID: pricing modules, CTA bars, comparison tables, testimonial stacks. Each room frames one gradient-mesh "artwork" and one curator caption - The negative-space gutter between rooms is 240px; the room itself is 100vh; the rhythm is gallery-pause, not scroll-fatigue - Type breathes: Inter at weight 200, generous letter-spacing 0.02em on numerals, 0em on titles - Brass-discreet accent used only on room codes (e.g., "ROOM 04") and curator monogram — never on body, never on backgrounds ## Uniqueness Notes - Differentiator 1: scandinavian + opulent-grand pairing is rare — scandinavian usually goes minimalist-cold; this version is hush-luxury - Differentiator 2: z-pattern executed as gallery floor-plan reading, not as marketing funnel diagram - Differentiator 3: gradient-mesh imagery executed in cool grays with one brass discreet hue — disciplined Nordic gallery palette - Differentiator 4: circuit motifs reframed as ornamental gallery friezes, not as cyberpunk tech-tells - Differentiator 5: slide-reveal patterns paced slowly (>600ms) for gallery procession feel — opulence as deliberate timing - Chosen seed: aesthetic: scandinavian, layout: z-pattern, typography: sans-grotesk, palette: cool-grays, patterns: slide-reveal, imagery: gradient-mesh, motifs: circuit, tone: opulent-grand - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography (90%), warm palette (93%) — cool-grays counter; mysterious-moody (70%); mono typography (81%)