# Design Language for tsundere.day ## Aesthetics and Tone Dopamine maximalism dragged through clay-kiln earth — bright candy-gradient banners and isometric icons tumbled into a hand-fired terracotta pot. The page glows with rainbow-gradient energy but stands on grounded-earthy roots: kiln-warm clays, hand-thrown ceramic textures, and broken-grid layouts that wobble like a folk-art mosaic. Inspiration: David Hockney's bright pool paintings filtered through Tlingit basket weavings, the saturated grocery-store-poster aesthetic of MSCHF's stunts, mid-century children's-book illustrations of Leo Lionni, and the sun-warmed clay palette of Mexican Talavera tile workshops. The tone is grounded-earthy — the page bounces visually but feels rooted: bright but never floaty, dopamine without being airless. ## Layout Motifs and Structure Broken-grid composition: a 12-column lattice deliberately broken at 4–7 intentional fracture points per scroll-height. Some sections respect the grid, others smash it: a section may begin column 2, span 8, then jump column 10 for an isometric icon-cluster, then return to column 1. Each fracture is annotated with a hand-drawn grid-mark in the gutter. Sections tilt at ±1.5° to amplify the broken feel. Magnetic patterns activate: small isometric icons drift toward the cursor when within 240px radius, with elastic ease, then slowly return. Geometric-shapes (triangles, semicircles, diamonds) punctuate gutters as small dopamine-bright accents. Each section's headline is set as Commissioner Versatile at varying weights — the typeface flexes 200 → 900 across a single header, mimicking the broken-grid energy. ## Typography and Palette - **Display (versatile variable):** "Inter" (Google Fonts) — used as commissioner-versatile stand-in, variable weight 100–900, at 48–96px with mid-letter weight transitions - **Display 2:** "Work Sans" (Google Fonts) — variable weight, for secondary headlines and section codes - **Body:** "IBM Plex Sans" (Google Fonts) — at 16px line-height 1.65 in warm earth tones - **Numerals:** "Space Mono" (Google Fonts) — for grid-coordinate annotations and section codes Palette — Gradient dopamine + clay-earth: - `#FFF3DD` Kiln Cream — main background, the unglazed clay - `#E45F2A` Terracotta Pop — primary accent, dopamine-warm gradient stop - `#F5B500` Saffron Glaze — secondary dopamine stop - `#3C9D7A` Aloe Glaze — tertiary cool dopamine accent - `#2E1A0E` Kiln Black — body text and gutter ink - `#9B4C3E` Burnt Sienna — secondary earth tone, geometric-shape fills The gradient runs Terracotta Pop → Saffron Glaze → Aloe Glaze across hero banners; earthy tones anchor the rest. ## Imagery and Motifs - **Isometric-icons**: tiny dopamine-bright isometric clay sculptures — pots, mugs, lemons, tiny suns, ceramic birds — rendered as flat isometric SVGs with Terracotta and Saffron fills + Kiln Black outline - **Geometric-shapes motifs**: triangles, semicircles, diamonds drift in the gutters as dopamine confetti, in pure Saffron Glaze or Aloe Glaze fills - Hand-pinch ornaments: small clay-pinch silhouettes (thumb prints, finger swipes) at section transitions in Burnt Sienna - Recurring "kiln spark": a small isometric sun-burst icon appears once per section as the page's dopamine flag - Section-code chips: each section labelled with a grid-coordinate ("§ 04·B") in Space Mono, set in a 22px Terracotta-circle chip ## Prompts for Implementation - Broken-grid: 12-column CSS Grid base, but each section overrides span and column-start values; a few sections include intentional "fracture" gaps where one column is skipped - Magnetic pattern: each isometric icon has a `mousemove` listener; when cursor enters 240px radius, icon translates 8% toward cursor with elastic ease (cubic-bezier(.68,-0.55,.27,1.55)) over 240ms; releases when cursor exits - Variable weight typography: each headline uses CSS `font-variation-settings` with mid-text weight transitions ("Tsun**DERE**.day") — bold letters in 800, regular in 300 - Isometric icons: inline SVG, 32–96px, built from rhombus / triangle / diamond combinations using Terracotta + Saffron + Aloe fills and 2px Kiln Black strokes - Gradient hero banners: linear-gradient(110deg, Terracotta Pop → Saffron Glaze → Aloe Glaze) used as a single hero section background; other sections use solid Kiln Cream or earth tones - AVOID: pricing tiers, CTA bars, stat-grids, testimonial blocks. Each section is a dopamine-vignette annotated with hand-grid coordinates - Section tilt: every section transforms `rotate(-1.5deg → +1.5deg)` per section to amplify broken-grid feel; content within rotates back to 0° for legibility - Geometric-shapes scatter: each gutter holds 3–6 small SVG geometric-shapes positioned absolutely, opacity 0.5–0.8, sometimes overlapping section edges ## Uniqueness Notes - Differentiator 1: dopamine + grounded-earthy is a paradox executed as gradient-bright over terracotta clay — neither sugary nor sterile - Differentiator 2: broken-grid layout amplified by section tilt, fracture annotations in gutter, and grid-coordinate chips — the brokenness is content - Differentiator 3: gradient palette restricted to a tri-stop dopamine arc with clay-earth anchors, disciplined despite the maximalist register - Differentiator 4: magnetic pattern applied to isometric icons rather than CTA buttons — interaction without commerce - Differentiator 5: commissioner-versatile / variable typography executed as mid-word weight shifts — a literal kinetic implementation - Chosen seed: aesthetic: dopamine, layout: broken-grid, typography: commissioner-versatile, palette: gradient, patterns: magnetic, imagery: isometric-icons, motifs: geometric-shapes, tone: grounded-earthy - Avoids overused patterns: parallax (94%) — magnetic instead; card-grid (90%) — broken-grid instead; centered (94%); photography (90%); mysterious-moody (70%); mono typography (81%)