# Design Language for tsundere.tech ## Aesthetics and Tone A pop-art riot rendered in warm-earthy marble — Lichtenstein dot-fields and Warhol screen-shifts collided with terracotta walls, then deliberately broken into a fractured grid. The page reads like an art-zine printed on terracotta-tinted marble paper, with variable-fluid display headlines that swell and shrink as the visitor reads, and every other tile blur-focusing in and out as the eye crosses it. Edgy-rebellious in tone: the voice taunts conventional tech-marketing language, replacing earnest CTAs with pop-art screams and red-stamp protests. The voice is loud and contrary. "Do not 'sync' it. Pour it." Headlines slap; body copy mutters; captions wink in marble veins. ## Layout Motifs and Structure Broken-grid layout: a 16-cell asymmetric base grid where 4-6 cells are deliberately offset (rotated 1-3deg, translated 12-24px in a random vector), creating visible misalignments. The misalignments are the design — they read as torn pages stapled to a marble wall, not as a flaw. Composition per fold: - A pop-art halftone hero tile (occupying 3-5 cells) carries a variable-fluid headline. - Surrounding tiles carry: a marble-texture quote block, a comic-style "POP" word-burst, a small geometric-shapes ornament tile, and a numbered marginalia tile. - One tile per fold is intentionally blur-focusing: it pulses between 8px blur (out of focus) and 0px (in focus) at 0.4Hz, suggesting a manuscript that won't sit still. Grid columns: 8 columns desktop / 4 mobile; rows are 200px tall, with selective overflow into adjacent rows. Tile rotations are CSS `transform: rotate(...)` baked into class names (`.tilt-a`, `.tilt-b`, `.tilt-c`). The page header is a single massive variable-fluid wordmark ("TSUNDERE TECH") rendered in halftone dots; below it, a thin geometric-shape divider (zigzag triangles in Warhol-magenta). ## Typography and Palette - **Display headlines:** "Recursive" (Google Fonts), variable axes mono 0-1, wght 300-1000 — variable-fluid for pop-art mega-headlines at 80-160px. Headlines morph weight on hover and on viewport-intersection. - **Sub-display:** "Recursive" (Google Fonts), wght 600 mono 0 — at 28-40px for comic-style sub-titles, slightly skewed -2deg. - **Body:** "Recursive" (Google Fonts), wght 400 mono 0 — at 16px line-height 1.6 for body copy. - **Marginalia / captions:** "Recursive" (Google Fonts), wght 500 mono 1 — at 13px for monospaced numbered marginalia (mono axis activated only here). - **Stamp / accent:** "Bungee" (Google Fonts), weight 400 — at 22px for rotated "STAMP" callouts in Warhol-magenta. Palette — Warm-earthy pop-art marble: - `#F2E2C9` Marble Cream — base background, paper-marble texture. - `#E5C9A3` Terracotta Marble — secondary marble vein tone for tile backings. - `#9C4A3E` Burnt Sienna — primary deep warm for body copy and halftone dot field. - `#E36D44` Warhol Orange — pop-art accent for word-bursts and stamps. - `#5C2A1F` Iron Earth — darkest accent for stamp borders and grid lines. - `#C2403D` Warhol Magenta — secondary pop accent for halftone overlays and headline strokes. Warm-earthy + pop-art collision: Warhol primary screams are softened into terracotta-marble register. No pure white, no electric saturation. ## Imagery and Motifs - **Marble-texture imagery**: each tile is backed by a procedural marble texture (feTurbulence + displacement), tinted with Marble Cream and Terracotta Marble. The marble veins drift slowly (1px per second). - **Geometric-shapes motifs**: scattered triangles, circles, zigzags, and slabs in Warhol Orange and Magenta — ornament-only, not load-bearing. Each shape has a halftone dot interior fill at 0.4 alpha. - **Halftone pop-art hero**: SVG-generated halftone dot pattern over a duotone photograph (Burnt Sienna + Warhol Orange), dot size 4-8px, dot density modulated by image luma. Each fold's hero is a different halftone composition. - **Word-burst graphics**: comic-style "POP", "BAM", "TILT" word-bursts in Bungee, rotated -8deg to +12deg, with a 4px Iron Earth offset shadow simulating ink-bleed. - **Stamp marks**: large red rubber-stamp marks (in Warhol Magenta) overlaid at random tile corners, rotated jaggedly, suggesting protest-zine annotations. ## Prompts for Implementation - Broken-grid: CSS Grid `grid-template-columns: repeat(8, 1fr); grid-auto-rows: 200px`. Tiles use `grid-area` for placement; broken tiles get `transform: rotate(2deg) translate(12px, -8px)` via class. - Variable-fluid headlines: use Recursive font with `font-variation-settings: 'wght' var(--wght)`. JS tracks viewport intersection and updates `--wght` per headline based on scroll position (entering = 300, centered = 900, exiting = 500). - Blur-focus pattern: selected tiles get `filter: blur(var(--blur))` and `--blur` cycles between 0 and 8px over 2.5s via CSS keyframe animation; on hover, the blur freezes at 0. - Halftone hero: precomputed PNG halftone overlays at multiple resolutions, swapped per breakpoint. Alternative: SVG `` of circles with displacement map. - Marble texture: a single 512×512 marble PNG tile, set as `background-image` per-tile with random `background-position` offset for variety. - Word-bursts: each is an inline SVG with `` set in Bungee and a `feDropShadow` filter; rotated via `transform: rotate(...)`. - Bias toward edgy-rebellious zine voice: each section is a tech-manifesto fragment, never a feature list. No CTAs, no pricing, no stat-grids — only word-bursts and marginalia commentary. - Cursor becomes a Warhol Magenta crosshair; on hover over a halftone tile, the cursor flips to a stamp-icon and the tile briefly inverts colors for 180ms. - Reduced motion: freeze blur-focus pulse; disable variable-fluid morph (lock at 600); disable marble vein drift. ## Uniqueness Notes - Differentiator 1: broken-grid used as a deliberately torn-zine wall with rotated tiles, not as a "broken layout" gimmick — the breakage is the rhythm. - Differentiator 2: pop-art aesthetic translated into warm-earthy marble palette — Warhol screams softened into terracotta register. - Differentiator 3: variable-fluid typography weaponized for pop-art mega-headlines that swell as you scroll, with the mono axis activated only for marginalia. - Differentiator 4: blur-focus pattern used as a "manuscript-can't-sit-still" device, with one tile per fold pulsing in/out of focus. - Differentiator 5: marble-texture imagery as the substrate for pop-art halftones — an unexpected substrate-pattern collision. - Chosen seed: aesthetic: pop-art, layout: broken-grid, typography: variable-fluid, palette: warm-earthy, patterns: blur-focus, imagery: marble-texture, motifs: geometric-shapes, tone: edgy-rebellious. - Avoided patterns from frequency analysis: parallax (94% — replaced with blur-focus pulse), card-grid (90% — replaced with broken-grid), centered (94% — asymmetric 8-col), photography (90% — replaced with halftone-treated duotone), mono typography (81% — used only in marginalia mono axis), mysterious-moody (71% — replaced with edgy-rebellious).