# Design Language for tsundere.today ## Aesthetics and Tone A seapunk almanac honeycomb — terracotta-rust hex tiles paneled together to form a tidepool grid where each hex holds a daily watercolor observation, and bioluminescent particle motes drift across the panel in slow currents. The aesthetic fuses early-2010s seapunk (Tumblr-era tropical fish, Hokusai wave-prints, neon-lit kelp) with the warm-earthy palette of Mexican papel picado and Sonoran clay tiles, photographed through a watercolor wash. Grounded-earthy in tone: the daily voice is calm, embodied, observational — a tidepool keeper who logs the small things and notices when the moon moves the water. The voice is patient and tactile. "Today the tide pulled back early. Three rust-colored anemones bloomed. The bioluminescent algae is two days from arriving." Short observation paragraphs, no marketing, no urgency. ## Layout Motifs and Structure Hexagonal-honeycomb layout: a 7-column staggered hex grid where each hex is 280px point-to-point. Hexes are organized into three role types: - **Day hexes** — large hexes (each containing one day's observation: a watercolor sketch + 2-3 sentence note). - **Mood hexes** — small hexes carrying a single seapunk motif (kelp strand, crab shell, anemone bloom, tidal moon-phase). - **Particle hexes** — semi-transparent hexes that host bioluminescent particle clusters drifting through them. Layout structure: - Top of page: a panoramic header hex-row showing a single horizontal kelp-and-coral watercolor scene that occupies 5 hexes. - Body: a tall column of staggered hex-tiles, organized chronologically (most recent at top). - Each "week" of observations is grouped into a 7-hex row. Parallax pattern: the honeycomb has 3 depth layers. Foreground hexes (day observations) parallax at 100%; mood hexes parallax at 60%; particle-mote layer parallaxes at 30%. This creates a tidepool depth sensation as the visitor scrolls. A persistent bottom "tide indicator" runs across the viewport bottom — a 2px terracotta wave-line that animates its phase via SVG path-morph, suggesting an actual tide rising and falling. ## Typography and Palette - **Display headlines:** "Nunito" (Google Fonts), weight 700 — rounded-sans for date headers at 44-58px, generously letter-spaced 0.04em. - **Sub-display:** "Nunito" (Google Fonts), weight 500 italic — at 20-26px for moon-phase tags and tide indicators. - **Body:** "Nunito" (Google Fonts), weight 400 — at 16px line-height 1.7 for daily observation notes. - **Marginalia / micro-labels:** "Nunito" (Google Fonts), weight 600 — at 12px ALL CAPS for hex-tag labels ("ANEMONE / DAY 47"). - **Accent quote:** "Caveat" (Google Fonts), weight 400 — for handwritten tide-keeper signature notes. Palette — Warm-earthy seapunk tidepool: - `#F4E5D0` Tidepool Sand — base background, sandy warmth with a faint grain. - `#E5C19E` Coral Bone — secondary warm sand tone for hex backdrops. - `#B36A4E` Rust Anemone — primary terracotta accent for hex edges and day-hex headlines. - `#3E7A6E` Seafoam Algae — secondary cool accent (the seapunk green) used in particles and mood-hex outlines. - `#1F2B36` Tidepool Ink — darkest accent for body text and hex-tag labels. - `#FFC76A` Bioluminescent Glow — micro-accent for particle motes and night-tide highlights. Warm-earthy with seafoam accents: the rust-and-sand palette dominates, with only the algae green and bioluminescent gold breaking through as cool/electric counterpoints. ## Imagery and Motifs - **Watercolor imagery**: each day hex contains a 220×220 watercolor sketch — sea anemones, hermit crabs, kelp strands, coral fragments, tidepool stones, sand-dollars. Painted in Rust Anemone, Seafoam Algae, and Coral Bone with 0.35 alpha layered washes. - **Particle-effects motifs**: bioluminescent particle motes — 2-4px Bioluminescent Glow dots drifting upward through the particle-hex layer, with a subtle 6px Gaussian blur halo. Particles spawn at hex bottoms and drift to the top before fading. - **Seapunk creature motifs**: small SVG creatures scattered as mood-hex contents: a stylized seahorse, a moon jellyfish, a clownfish, a Pacific octopus, a starfish — each in 1.2px Rust Anemone with Seafoam Algae fill accents. - **Tide moon-phase**: each week-row carries a small moon-phase indicator in Tidepool Ink, drawn as a circle with a partial cut-out showing the current phase. - **Coral kelp ribbon**: the header panoramic hex-row contains a single hand-painted watercolor coral-and-kelp scene that visually links the seven hexes into a continuous tidepool view. ## Prompts for Implementation - Build honeycomb using CSS clip-path hex grid; each hex is positioned via JS-calculated x/y offsets in a staggered 7-column layout. - Parallax pattern: three depth layers, each with `data-parallax-speed` attribute (1.0, 0.6, 0.3). JS reads scroll position and applies `transform: translateY(-scrollY * speed)` to each layer. - Bioluminescent particles: a fixed `` element with 180 particles drifting upward; each particle has random hex-anchored x, random y-velocity (0.4-1.2px/frame), random hue jitter (gold ±10°). Particles fade out near the top. - Watercolor SVGs: 8 distinct watercolor sketches, randomly assigned to day hexes. Each SVG is a 220×220 raster-style watercolor with multi-stop radial gradients and feTurbulence overlays. - Tide indicator: a fixed-bottom SVG path that morphs its `d` attribute over 12s, suggesting a wave rising and falling. Tied to a CSS keyframe animation of `stroke-dashoffset`. - Bias toward observation-keeper narrative: each day hex is a short tidepool note, never marketing. No CTAs, no pricing tables, no stat-grids — only daily observations and watercolor sketches. - Cursor becomes a small Rust Anemone tide-pool dropper; on hover over a day hex, the watercolor inside lifts slightly (scale 1.04) and bioluminescent particles surge around the hex. - Reduced motion: freeze particle drift; reduce parallax to 100% / 100% / 100% (single layer); replace tide-indicator morph with a static wave. ## Uniqueness Notes - Differentiator 1: hexagonal-honeycomb used as a tidepool grid for daily observations, not as a tech-honeycomb — the metaphor is biological/lunar. - Differentiator 2: seapunk aesthetic in a warm-earthy palette (rust + sand + seafoam) instead of the typical seapunk neon-teal — softens seapunk into tidepool register. - Differentiator 3: parallax used as a 3-layer tidepool-depth effect with particle motes drifting upward, not as a hero-text effect. - Differentiator 4: watercolor imagery as 220×220 daily sketches in each hex — like a watercolor field journal printed onto hex tiles. - Differentiator 5: rounded-sans typography (Nunito) used uniformly across all type levels, anchoring the seapunk aesthetic in a warm/rounded register. - Chosen seed: aesthetic: seapunk, layout: hexagonal-honeycomb, typography: rounded-sans, palette: warm-earthy, patterns: parallax, imagery: watercolor, motifs: particle-effects, tone: grounded-earthy. - Avoided patterns from frequency analysis: parallax (94% used — here used as 3-layer tidepool depth rather than hero parallax), card-grid (90% — replaced with honeycomb), centered (94% — staggered hex layout), photography (90% — replaced with watercolor SVGs), mono typography (81% — replaced with rounded-sans), mysterious-moody (71% — replaced with grounded-earthy).