# Design Language for tsundere.design ## Aesthetics and Tone Isometric data-architecture rendered as a whimsical-creative miniature city — navy-and-brass landscapes of tiny axonometric buildings, charts, and dataflow ribbons drawn with playful winks. The page reads like a child's first dream of urban planning: every datapoint is a small isometric house, every chart-axis is a paved road, every bar is a tower. Inspiration: the isometric SimCity 2000 city-views, the navy-metallic graphic novels of Brian Selznick, axonometric architecture poster prints of the Russian Constructivists, and the whimsical data-illustrations of Stefanie Posavec. The tone is whimsical-creative — playful but precise, with hidden details rewarding close inspection. Tsundere shows up in the page's mutters: small data labels that quietly snark at one another. ## Layout Motifs and Structure Masonry composition of varied-size isometric vignettes — each vignette an axonometric scene framed in a 3:4 or 2:3 card. Masonry packs them left-aligned with 16px gutters; cards rotate slightly (±0.5°) so the gallery feels hand-arranged. Each vignette features a data-viz element re-imagined as an architectural form: a bar chart becomes a row of towers, a pie chart becomes a circular plaza, a line chart becomes a winding road. Ripple patterns activate on hover: clicking or hovering a vignette sends a soft concentric ripple outward (3 expanding rings, navy fade-out) across the masonry, briefly pulsing neighbor vignettes. Organic blob motifs sit beneath isometric scenes as cloud-shadows. Oversized-display section titles ("DISTRICT 04 · DATA TOWNSHIP") punctuate the masonry vertically. ## Typography and Palette - **Display:** "Inter" (Google Fonts) — oversized-display weight 800 at 96–128px for district titles, with mid-letter weight shifts - **Display 2:** "Work Sans" (Google Fonts) — for section sub-codes and architectural plate captions - **Body:** "IBM Plex Sans" (Google Fonts) — at 16px line-height 1.6 for vignette annotations - **Mono / data-label:** "JetBrains Mono" (Google Fonts) — for datapoint labels and axis tags - **Numeric mark:** "Space Mono" (Google Fonts) — for district numerals and coordinate captions Palette — Navy metallic data-city: - `#0B1A36` Navy Foundation — primary background, the city's night - `#E9EAEF` Atlas Stone — main vignette base, the building stone - `#C6A65A` Brass Plaque — primary accent, building roofs and chart highlights - `#3A547F` Steel Pavement — secondary accent, road and shadow tone - `#F1E8D0` Antique Paper — body text on dark surfaces - `#1A2B47` Twilight Mortar — neomorphic deep shadow ## Imagery and Motifs - **Data-viz**: every vignette features one re-imagined chart: bar-chart-as-towers, pie-chart-as-plaza, line-chart-as-road, scatter-plot-as-streetlamps. All rendered in 30°-axonometric SVG with Brass Plaque highlights and Steel Pavement shadows - **Organic-blob motifs**: soft Navy Foundation cloud-blobs sit beneath each isometric scene as ground-shadow, with feathered Gaussian-blur edges - Whimsical architectural ornaments: tiny windows (1×1 navy squares), brass weather-vanes, small chimney puffs, isometric park trees — each rendered as 12–24px SVG inhabitants - Recurring "tsundere mascot": a tiny isometric character sprite (2px-stroke navy lines) appears in 1 vignette per row, looking sideways with a small data-label speech bubble ("hmph, the bar chart is fine actually") - Section-code plates: each district section labelled with brass plate ("DIST 04 · POP 1,204") in Space Mono small-caps ## Prompts for Implementation - Masonry layout via CSS columns or JS masonry; vignette cards retain natural aspect ratios but pack densely; 16px gutters - Each vignette is rendered as a 30°-axonometric SVG composed of rhombus building footprints, triangle roofs, and small inhabitant glyphs. All stroke 1.5px Navy Foundation, fills Atlas Stone + Brass Plaque - Ripple pattern: on hover or click, JS draws 3 expanding `` rings in SVG over 700ms via radius animation, rings fade from 0.4 → 0; neighbor cards briefly translate +2px outward then settle - Organic blob ground-shadows: SVG `` with feGaussianBlur stdDev=18, fill Twilight Mortar at 0.45 alpha - Oversized district headers: Inter weight 800 at 120px in Brass Plaque, with a thin Steel Pavement underline rule beneath - AVOID: pricing tiers, CTA bars, comparison tables, testimonial blocks. Each vignette is an architectural data-rendering, not a feature ad - Whimsical inhabitants: small SVG sprite glyphs (12–24px) anchored to building footprints — a tiny mailbox here, a brass weather-vane there, occasional speech-bubble glyphs - Card rotation: each card randomly rotates -0.5° → +0.5° on render, with a gentle hover restore to 0° over 280ms ## Uniqueness Notes - Differentiator 1: isometric + data-viz reframed as architecture is a category invention — every chart is a building - Differentiator 2: masonry executed at small-vignette scale, packed densely, not Pinterest-spaced - Differentiator 3: navy-metallic palette anchored by brass plaque accents — disciplined dual-metallic register - Differentiator 4: ripple patterns triggered as concentric SVG circles across masonry neighbors — interaction as pondskip - Differentiator 5: whimsical-creative tone executed via hidden inhabitant easter-eggs and snarky tsundere mascot speech bubbles - Chosen seed: aesthetic: isometric, layout: masonry, typography: oversized-display, palette: navy-metallic, patterns: ripple, imagery: data-viz, motifs: organic-blobs, tone: whimsical-creative - Avoids overused patterns: parallax (94%) — ripple instead; card-grid (90%) — masonry; centered (94%); photography (90%); warm palette (93%) — navy-metallic; mysterious-moody (70%); mono typography (81%)