# Design Language for tsundere.one ## Aesthetics and Tone A botanical conservatory built from luminous neon honeycombs — imagine a Victorian glasshouse where each hexagonal pane contains a generative bloom that breathes electric pigment. Dreamy-ethereal in tone: the visitor drifts through a half-asleep terrarium where bubbles rise like soft thoughts and serif headlines pose as botanical name-plates engraved on glowing glass. Inspiration: Kew Gardens' Temperate House at dusk, Wolfgang Tillmans' lumen prints, Refik Anadol's generative pollen studies, Murakami's TASCHEN flower portraits stripped of cartoon contour and reborn as algorithmic petals, and the soft-glass dopamine of Aurora Aksnes' "Infections of a Different Kind" cover. The atmosphere is humid, slightly drowsy, and luminescent — a place where botany meets neon arcades through a thin sheet of misted glass. The tonal register is whispered, not shouted. Headlines hover rather than declare. Copy reads like field notes from a half-dreaming botanist who has discovered a hex-celled species that pulses in electric magenta when observed. No "buy now," no urgency — only soft invitations to lean closer to the glass. ## Layout Motifs and Structure A hexagonal-honeycomb canvas where hex tiles are arranged in a tight 9-column staggered grid, each tile 240px point-to-point. Three structural roles assigned to hexes: - **Bloom hexes** — large (480px) hexes holding generative-art SVG blooms, breathing on a 6s ease-in-out scale loop (1.00 → 1.04 → 1.00). - **Pane hexes** — translucent hexagonal "glass panes" carrying serif-classic headlines and a single floating bubble in their interior. - **Caption hexes** — small (180px) hexes with two-line italic captions, edge-glowing in dopamine accent. The honeycomb does not scroll as a flat grid; instead the page enters a slow vertical drift where alternating hex columns parallax at +12% and -8% speeds, so the comb feels like it is exhaling. Negative space between hexes carries a faint neon "pollen mist" — particles drifting upward at 4–9px/sec, randomized in hue. Section boundaries are not horizontal rules but hex-thick "diaphragms": three rows of hexes filled with deeper conservatory-pane shadow that the viewer drifts through. The header is a single oversized bloom-hex centered against a misted-glass backdrop; the footer dissolves into a scatter of caption-hexes that fade to the void. ## Typography and Palette - **Display headlines:** "Cormorant Garamond" (Google Fonts), weight 500, italic — at 64–88px for botanical name-plates. Letter-spacing tightened to -0.02em, line-height 1.05. - **Sub-display / pane captions:** "Cormorant Infant" (Google Fonts), weight 400 italic — at 22–28px for botanical species sub-captions, with ligatures enabled. - **Body:** "Source Serif 4" (Google Fonts), weight 400 — 17px line-height 1.75 for field-note narrative copy. - **Botanical labels (uppercase tags):** "EB Garamond" (Google Fonts), small-caps, letter-spacing 0.18em — for taxonomic micro-labels like "GENUS · LUMINA HEXAGONA". Palette — Dopamine-neon conservatory: - `#0A0613` Conservatory Void — deepest background between hex columns, near-black with a violet undertone. - `#1B1331` Misted Glass — base background of the honeycomb canvas, faintly translucent. - `#F2EBDC` Vellum Bloom — paper-cream for serif headlines and pane interiors. - `#FF3CAC` Electric Magenta — primary dopamine accent, hex-edge glow for bloom hexes. - `#7B4DFF` Neon Iris — secondary dopamine accent for pane-hex edges and pollen mist. - `#2BD4D4` Glasshouse Mint — tertiary dopamine for caption-hex inner glow and bubble highlights. - `#FFD45C` Pollen Spark — micro-accent reserved for the cursor halo and a single hex per fold. Edge-glow philosophy: every hex carries a 1.5px stroke in either Magenta, Iris, or Mint at 0.78 alpha, with an outer blur halo at 12px and 0.22 alpha. The glow is the structure. ## Imagery and Motifs - **Generative-art blooms**: each bloom-hex contains an SVG bloom generated from a 6-petal radial spline with sine-modulated curvature; petals are filled with a magenta-to-iris radial gradient at 0.55 alpha, overlaid by a procedural noise texture (feTurbulence baseFrequency 0.9) to give it pollen grain. Blooms re-seed their RNG every 11 seconds, morphing slowly between species. - **Botanical motifs**: hexagonal "leaf-veining" SVGs traced as 0.5px Mint-tinted filaments inside pane-hex interiors — geometric, almost crystalline. - **Bubble-playful motifs**: soft luminescent spheres (16–48px) drifting upward inside pane-hexes, with a faint Iris rim-light at the top-left and a mint reflection dot. Each bubble pops on cursor-collision into a 4-particle dopamine burst. - **Pollen mist particles**: 1–2px circular particles in randomized neon hues, scattered through the void space between hex columns, drifting upward at parallax-modulated speeds. - **Hex-pane glass etchings**: thin SVG curls of art-nouveau botanical scrollwork etched into pane-hex glass at 0.25 alpha Vellum. ## Prompts for Implementation - Build the honeycomb as a CSS clip-path hex grid with staggered odd/even rows; each hex is a `
` with role classes (`.bloom`, `.pane`, `.caption`). - Use `getBoundingClientRect()` + IntersectionObserver to drive the slow breathing-loop and scale-hover pattern: hex tiles scale to 1.06 with edge-glow intensifying to 0.95 alpha when hovered, springing back over 540ms cubic-bezier(.2,.7,.2,1). - Generative blooms drawn into inline SVGs at runtime by a small RNG-seeded petal-generator (mulberry32 seeded by hex-index + page-load timestamp). - Pollen mist as a single fixed `` behind the honeycomb, redrawn at 30fps with 280 particles drifting upward, each particle's hue picked from a 3-stop dopamine gradient. - Cursor halo: a 28px Pollen Spark glow that follows the pointer with a 90ms lag spring; on hover over a bloom-hex it scales to 64px and pulses at 2Hz. - Page is a slow, full-screen narrative drift through the conservatory — no CTAs, no pricing, no stat grids. Sections are named after fictional botanical specimens ("Specimen 014 — Lumina Hexagona"), and each scroll-fold is a single chambered room of the glasshouse. - Bias toward storytelling: every hex pane carries a tiny italic sub-caption ("collected at dusk, third corridor"), and the whole page reads as the field journal of a dreamer. - Bubbles spawned per pane-hex at 1.8s intervals, randomized origin x within the hex, drifting upward 80–140px before fading to 0 alpha at the hex's top edge. ## Uniqueness Notes - Differentiator 1: hexagonal-honeycomb used as a botanical conservatory rather than a tech-grid or honeycomb-of-icons — a hex glasshouse is unusual in the corpus. - Differentiator 2: generative-art imagery embedded inside hex tiles, re-seeding live, instead of decorative-only generative use. - Differentiator 3: dopamine-neon palette grafted onto a serif-classic typographic register — a collision of arcade and botanical-Latin engraving. - Differentiator 4: bubble-playful motifs read as breathing terrarium spheres, not bubblegum graphics — playful but dreamy. - Differentiator 5: scale-hover pattern is underused (3% in frequency analysis); paired here with breathing-bloom loops rather than typical card hover-lift. - Chosen seed: aesthetic: botanical, layout: hexagonal-honeycomb, typography: serif-classic, palette: dopamine-neon, patterns: scale-hover, imagery: generative-art, motifs: bubble-playful, tone: dreamy-ethereal. - Avoided patterns from frequency analysis: parallax (94% — used only as a subtle column-drift, not as a section-builder), card-grid (90% — replaced with honeycomb), centered (94% — replaced with staggered comb), photography (90% — replaced with generative SVG), mono typography (81% — replaced with serif-classic), mysterious-moody tone (71% — replaced with dreamy-ethereal).