# Design Language for tsundere.download ## Aesthetics and Tone Seapunk reframed as an opulent-grand bathysphere catalog — a deep-pressure brass diving capsule with high-contrast portholes opening onto luminous abstract geometry. The page combines the cool greens-and-purples of a 1994 seapunk MTV ID with the velvet-grand ceremony of an art-collector's private bathyscaph tour: hexagonal portholes lined with brass, abstract-geometric specimens framed inside each, mono-typed plate-labels in glowing teal. Inspiration: the bathysphere bound-edition of National Geographic 1962, the early-90s digital seapunk graphics of "Aqua Marine Aria" demoscene reels, the opulent display cases of Anish Kapoor at the Royal Academy, and Hilma af Klint's geometric color charts. The tone is opulent-grand — every porthole is presented with ceremony, every download is a curated specimen. ## Layout Motifs and Structure Hexagonal-honeycomb composition treated as a porthole wall of the bathysphere. Hexagons of two sizes (220px, 360px across-flats) tile across the page in a honeycomb pattern, each hex a thick brass-rimmed porthole. Inside each porthole sits one geometric-abstract specimen — minimal modular shapes (circles, triangles, scaled squares) in luminous teal-coral against deep navy. Elastic patterns govern interaction: hex-portholes "elastically" inflate by 4% on hover, then bounce back via cubic-bezier(.68,-0.55,.27,1.55) over 380ms. Grid-line motifs (faint 1px brass lattice at 24px intervals) overlay the entire page as a bathysphere instrument grid. Section-banners (a single hex-row spanning full width) interrupt the honeycomb with mono-display section codes ("DEPTH 0420 // SAMPLES"). ## Typography and Palette - **Display:** "JetBrains Mono" (Google Fonts) — mono weight 700 at 48–72px for porthole specimen labels - **Display 2 (section banner):** "Space Mono" (Google Fonts) — at 96–128px for depth-section banners - **Body:** "IBM Plex Mono" (Google Fonts) — at 14px line-height 1.65 for specimen notes - **Caption:** "Inter" (Google Fonts) — at 11px for small porthole coordinates and brass-plate engravings Palette — High-contrast bathysphere seapunk: - `#070D1B` Bathy Black — primary background, the deep - `#0E2A3E` Trench Navy — secondary surface, hex porthole base - `#1DEFD0` Glow Teal — primary accent, specimen highlight - `#FF6FA2` Coral Glow — secondary accent, specimen counter-color - `#C2925B` Brass Rim — porthole edges and depth-plates - `#F5F2EA` Bone Vellum — type and specimen line-art ## Imagery and Motifs - **Geometric-abstract**: each porthole holds one minimal geometric specimen — concentric circles, intersecting triangles, scaled-square stacks — drawn in Glow Teal + Coral Glow strokes on Trench Navy backgrounds. Each specimen feels like a 1960s op-art chip inside a brass porthole - **Grid-lines motifs**: faint 1px Brass-Rim lattice tiled at 24px intervals across the entire page, with 4-direction tick-marks at every 96px intersection like bathysphere navigation grid - Bathysphere ornaments: thick brass porthole rims (8px outer ring + 2px inner highlight), bolted-stud corners (4 small SVG dots at hex vertices), embossed depth-plate engravings - Recurring "specimen plate": each porthole below its hexagonal frame holds a brass-plate engraving with mono catalog code ("SP-0420.06 / DEPTH 4040m / GLOW TEAL #07") - Center-of-page: a recurring deep-sea anemone glyph in Coral Glow + Glow Teal stroke serves as the page's persistent watermark, faint at 8% opacity ## Prompts for Implementation - Hexagonal-honeycomb grid: CSS Grid with `clip-path: polygon(...)` 6-vertex hex masks; alternating row offsets at 50% column-width; 8px gap creating brass-rim borders - Elastic pattern: on hover, each hex transforms `scale(1.04)` then bounces back to `scale(1)` via cubic-bezier(.68,-0.55,.27,1.55) over 380ms; brass rim opacity intensifies from 0.85 → 1 - Geometric-abstract specimens: inline SVG, 1.5–2px Glow Teal stroke + 1px Coral Glow accent stroke; specimens are static (no animation) — let the elastic hover be the kinetic event - Grid-lines lattice: tiled background-image of a 24px × 24px SVG with 1px Brass Rim crosshair at center; lattice at 12% opacity over the navy base - Porthole brass-rim: SVG `` hex outer ring 8px Brass Rim + inner 2px Bone Vellum highlight + 4 vertex-stud `` glyphs at 4px Bone Vellum - AVOID: pricing tiers, CTA bars, comparison tables, testimonial blocks. Each porthole is a specimen, captioned with a brass-plate; no commerce surface - Display section banners interrupt the honeycomb every ~6 hexes with full-width banners holding the depth-code in Space Mono 96px Glow Teal - The page's general energy is hush-pressurized: slow scroll, elastic hovers, deep-water hush; opulence emerges from the brass rims and ceremony of every porthole ## Uniqueness Notes - Differentiator 1: seapunk + opulent-grand pairing is unusual — seapunk usually goes camp or vaporwave; this is bathysphere-luxury - Differentiator 2: hexagonal-honeycomb realized as a porthole wall, with brass-rims as ceremonial frames - Differentiator 3: high-contrast palette anchored by Glow Teal + Coral Glow complementary pair against deep navy — disciplined three-anchor system - Differentiator 4: elastic pattern reserved exclusively for porthole hovers — no other elastic deployments - Differentiator 5: grid-lines motifs treated as bathysphere navigation grid, not as cyberpunk dataflow - Chosen seed: aesthetic: seapunk, layout: hexagonal-honeycomb, typography: mono, palette: high-contrast, patterns: elastic, imagery: geometric-abstract, motifs: grid-lines, tone: opulent-grand - Avoids overused patterns: parallax (94%) — elastic instead; card-grid (90%) — hex honeycomb; centered (94%); photography (90%) — geometric-abstract instead; warm palette (93%) — high-contrast cool; mysterious-moody (70%) — opulent-grand reframes