# Design Language for tsundere.review ## Aesthetics and Tone A graffiti zine pinned to a coastal-marble bulletin — review entries scrawled, taped, and stencilled onto a bento-box wall where each compartment is a torn-poster fragment overlaid with spray-stencil tags. The aesthetic merges Barry McGee's hand-painted SF Mission Street zines, the marble-grain warehouse interiors of Acne Studios' Aoyama store, and the soft turquoise-coral coastal blend of late-summer surf-shop posters. Conversational in tone: the reviews talk like a friend leaning on the wall — opinionated, casual, name-dropping, sometimes profane but always concrete. The voice is offhand and certain. "OK this one — the second compartment, the marble one — it's a B+. The texture is real, the headline is honest, do not let the price scare you." Reviews are short paragraphs, not bullet lists. ## Layout Motifs and Structure Bento-box layout: a 4×4 wall grid (16 compartments), each compartment a torn-edge poster-fragment. Compartments vary in size (1×1 to 2×2) and rotation (-3° to +3°). Each compartment carries: - A marble-texture backdrop, slightly rotated, with a Coastal-Blend overlay at 0.18 alpha. - A graffiti-stencil headline in display-bold sprayed across the top. - A 2-3 sentence review body in handwritten-feel grotesque. - A taped "rating tag" pinned to the corner (e.g., "B+ / 7.4"). The 16 compartments are NOT uniformly spaced — they have visible gaps where the marble bulletin shows through. Some compartments overlap their neighbors by 8-14px, with the upper compartment casting a 4px soft drop-shadow onto the lower. The bulletin is alive with adhesive imperfection. Section pattern: as the visitor scrolls down, new bento walls slide-reveal: a fresh 4×4 wall slides up from below the viewport, the old wall sliding out the top. Each wall is a "Volume" of reviews (Vol. 01, Vol. 02...). A torn-paper banner runs across the top of each wall, hand-stencilled with the volume title. Underneath: a thin Coastal-Blend gradient line that drifts as a current. ## Typography and Palette - **Display headlines:** "Bungee" (Google Fonts), weight 400 — display-bold stencil-feel for graffiti compartment titles at 38-58px, ALL CAPS, slight skew (-2deg). - **Sub-display:** "Bungee Shade" (Google Fonts), weight 400 — for shadowed volume banners, 28-44px. - **Body:** "Manrope" (Google Fonts), weight 500 — at 15px line-height 1.6 for review prose, slightly tracked +0.01em. - **Rating tags / corner labels:** "Space Mono" (Google Fonts), weight 700 — for tape-corner rating chips and timestamps. - **Marginalia (hand-scrawled aside):** "Caveat" (Google Fonts), weight 400 — for handwritten coastal-margin notes. Palette — Coastal-blend graffiti wall: - `#F2E9D6` Bulletin Cream — base marble bulletin backdrop. - `#D8E3DC` Sea-Foam Frost — marble vein highlight tone. - `#3A8C8C` Coastal Teal — primary spray-stencil hue for headlines. - `#F26A55` Coral Tag — secondary spray hue for rating tape and accents. - `#2A3338` Charcoal Ink — body type and torn-edge shadow color. - `#FFD08A` Sun-Bleached Yellow — micro-accent for one "FEATURED" compartment per wall. Marble-texture logic: every compartment uses a 240×240 marble PNG tile, rotated and scaled per-compartment, with a soft 0.06 alpha Coral-tinted overlay at one corner to suggest age and condensation. ## Imagery and Motifs - **Marble-texture imagery**: each compartment is backed by a procedural marble texture — soft veined patterns generated via SVG filter chains (feTurbulence baseFrequency 0.014, displacementMap), tinted with Coastal-Blend coral/teal washes. - **Nature motifs**: scattered SVG illustrations of coastal flora and shells: a kelp frond, a barnacle cluster, a sand-dollar disc, a beach-grass tuft, a sea-anemone, a driftwood splinter, a tide-line shell. Each illustrated in 1.2px Charcoal Ink with Coral fill at 0.15 alpha. - **Graffiti stencils**: the compartment headlines are stencil-cut SVGs with deliberate ink-splatter and edge-bleed. Three stencil styles rotate: clean, dripped, double-exposure. - **Taped corner tags**: small SVG "masking tape" strips at compartment corners with hand-typed rating ("B+ / 7.4"), at random rotation (-12° to +12°). Tape edges are slightly translucent and crumpled. - **Torn paper edges**: each compartment's outer edge is a hand-traced SVG path with irregular notches — generated from a 4-octave perlin noise wobble on a rectangle path. ## Prompts for Implementation - Bento grid: CSS Grid `grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 220px)`. Each compartment is `
` with `grid-area` and `transform: rotate(...)` for the taped-poster feel. - Slide-reveal pattern: each wall is a 100vh section. On scroll, the next wall slides up from translateY(100%) → 0 over 720ms cubic-bezier(.2,.7,.2,1); the previous wall slides up to translateY(-30%) and fades to 0 alpha. - Compartment torn-edges: pre-generated SVG clip-paths, one per compartment (10 variations cycle). - Graffiti stencil headlines: rendered as inline SVG with `feMorphology` and `feTurbulence` filters to simulate spray-bleed. Three filter variants randomized. - Each compartment gets a 4px Charcoal soft drop-shadow at 0.18 alpha, offset down-right; overlapping neighbors compound the shadow. - Coastal-blend currents at the top of each wall: thin animated SVG path drawing teal-to-coral gradient horizontally, animating its stops at 0.4Hz. - Bias toward conversational review-zine voice: each compartment is a candid friend's note. No CTAs, no pricing tables, no stat-grids — only opinion paragraphs and rating tape. - Cursor becomes a stencil-marker cursor; on hover over a compartment, the marker slightly lifts the compartment (rotate +1deg jitter, translateY -3px) and the drop-shadow deepens to 0.32 alpha. - Reduced motion: drop the slide-reveal walls and switch to a single long scroll of compartments stacked; preserve torn-edges and tape tags. ## Uniqueness Notes - Differentiator 1: bento-box reimagined as a graffiti zine bulletin board with torn paper edges and rotated compartments — not a clean Apple-style bento grid. - Differentiator 2: coastal-blend palette married to graffiti stencil aesthetics — surf-zine meets street wall, unusual collision. - Differentiator 3: marble-texture imagery used as backing for spray-stencil headlines — the most unexpected substrate-overlay pair. - Differentiator 4: nature motifs (kelp, barnacle, sand-dollar) used as background ephemera rather than centered imagery. - Differentiator 5: slide-reveal walls used as "volume changes" in a zine, not as section transitions in a generic scroll. - Chosen seed: aesthetic: graffiti, layout: bento-box, typography: display-bold, palette: coastal-blend, patterns: slide-reveal, imagery: marble-texture, motifs: nature, tone: conversational. - Avoided patterns from frequency analysis: parallax (94% — replaced with slide-reveal volume swaps), card-grid (90% — replaced with rotated bento compartments), centered (94% — asymmetric bento), photography (90% — replaced with marble-texture + nature SVGs), mono typography (81% — used only for rating tags), mysterious-moody tone (71% — replaced with conversational).