# Design Language for tsundere.monster ## Aesthetics and Tone Scandinavian restraint shoved into a leather-jacketed alley — the spare clarity of a Helsinki design studio crashed against the edgy-rebellious snarl of an underground tape-label fanzine. The page combines bone-white minimalism with warm sandstone tones and tough, wave-form gradient banners that look like they were spray-painted by a polite anarchist. Inspiration: the early 90s graphic identity of Factory Records reimagined through Scandinavian gallery typography, the wave-form posters of Reid Miles for Blue Note records, Jacqueline Casey's MIT poster series turned saturated, and the warm-defiant graphic palette of Patti Smith's "Horses" sleeve. The tone is edgy-rebellious — clean Nordic restraint suddenly raises its voice. Tsundere here is dare-attention: appears withdrawn, then growls. ## Layout Motifs and Structure Card-grid composition: a strict 3-column grid (desktop) of equally sized cards, each holding one warm-tinted gradient-mesh wave-form composition with a snarl-typed headline. Cards are flat slabs (no shadows), separated by 32px gutters; the grid is precise to the millimeter. Blur-focus patterns activate as the user scrolls: cards out of viewport center are blurred 4px and reduced opacity 0.6, while the center-row remains crisp. The result is a "spotlight scroll" — the eye is always pulled to the centered row of the grid. Wave-form motifs (large sweeping SVG sine curves) span across card boundaries, breaking the grid's strictness with one defiant gesture per scroll-screen. Section transitions are punctuated by a single oversized wave-banner that runs full-width, the page's snarl signature. ## Typography and Palette - **Display:** "Inter" (Google Fonts) — commissioner-versatile, variable weight 100–900, used at 56–96px with sharp weight contrasts ("TSUN" in 800 / "DERE" in 200) - **Display 2:** "Work Sans" (Google Fonts) — for section codes and supporting display, weight 800 - **Body:** "IBM Plex Sans" (Google Fonts) — at 16px line-height 1.6 for warm body copy - **Caption:** "Space Grotesk" (Google Fonts) — at 11px for grid-coordinates and section codes - **Mono accent:** "JetBrains Mono" (Google Fonts) — for snarl-typed kickers ("// snarl track 04 //") Palette — Warm sandstone edgy: - `#F4EBDA` Bone Linen — main background, the gallery floor - `#2A1F18` Bituminous Ink — display type and body text - `#D04A2E` Snarl Ochre — primary accent, wave-form gradient anchor 1 - `#F2A23A` Caution Honey — secondary accent, wave-form gradient anchor 2 - `#7B4A2E` Burnt Walnut — section-banner backgrounds - `#FFF7E8` Pale Cream — card surface for high-contrast cards ## Imagery and Motifs - **Gradient-mesh**: each card centerpiece is a small gradient-mesh wave-form composition — soft Snarl Ochre to Caution Honey transitions, shaped as gentle sine-wave fields. Rendered as SVG `` + `` with warm sandstone color matrix - **Wave-forms motifs**: large sweeping SVG sine curves and tape-spool waveforms span across card boundaries, drawn in 2px Bituminous Ink with Snarl Ochre highlight strokes - Edgy-rebellious ornaments: small spray-paint stencil glyphs (asterisks, dotted edges, hand-corrected slashes), thin masking-tape strips fastening section banners - Recurring "snarl mark": a 32px wave-form glyph (tight, edgy sine wave) appears at section transitions as the page's punk signature - Sticker stickers: small Caveat-handwritten margin annotations on a couple of cards, looking like fanzine collage ## Prompts for Implementation - Strict 3-column card grid via CSS Grid; 32px gutters; cards uniform 4:5 aspect; no shadows, only flat color anchors and 1px Bituminous Ink rules - Blur-focus pattern: on scroll, JS classifies cards by viewport-position; center-row cards retain `filter: blur(0) opacity(1)`, while off-center cards apply `filter: blur(4px) opacity(0.6)`; transitions 320ms cubic-bezier(.2,.7,.2,1) - Gradient-mesh wave-form: SVG with `` mask filled by warm-gradient via `` (110°, Snarl Ochre 0% → Caution Honey 100%) and `` driven by `` (low baseFrequency 0.012, scale 32) to produce a wave-form ripple - Wave-form span-breakers: every ~3 rows, a full-width SVG wave-form sweeps across the grid, breaking column boundaries; rendered as a 2px Bituminous Ink curve with Snarl Ochre highlight - Edgy section banners: full-width strips in Burnt Walnut with a single full-bleed wave-form in Pale Cream, holding a 96px snarl-typed section code - Variable typography snarl: cards use Inter `font-variation-settings: "wght" ` with mid-text weight shifts; example "TSUNDERE.monster" displayed as TSUN (800) DERE (200) .monster (500) - AVOID: pricing modules, CTA bars, comparison tables, testimonial stacks. Each card holds a punk-fanzine essay-passage, not a product feature - Section codes: "// SIDE B / TRACK 04" in JetBrains Mono 12px, top-left of each card with hand-corrected slash glyphs ## Uniqueness Notes - Differentiator 1: scandinavian + edgy-rebellious is a deliberate identity clash — clean Nordic restraint with a fanzine snarl - Differentiator 2: card-grid (the 90% corpus dominant) redeemed by wave-form span-breakers and blur-focus spotlight scroll — grid pierced, not abandoned - Differentiator 3: warm palette anchored by Snarl Ochre + Caution Honey — defiant warm gradient, not generic autumn - Differentiator 4: gradient-mesh imagery rendered as small wave-form fields, not as Apple-style hero washes - Differentiator 5: edgy-rebellious tone delivered through typography (variable-weight mid-text shifts, JetBrains Mono snarl-kickers) and full-width wave-form banners - Chosen seed: aesthetic: scandinavian, layout: card-grid, typography: commissioner-versatile, palette: warm, patterns: blur-focus, imagery: gradient-mesh, motifs: wave-forms, tone: edgy-rebellious - Avoids overused patterns: parallax (94%) — blur-focus instead; centered (94%) — strict 3-col grid with off-axis blur; photography (90%) — gradient-mesh instead; mysterious-moody (70%) — edgy-rebellious counters; mono typography as default body (81%) — body is IBM Plex Sans