# Design Language for tsundere.xyz ## Aesthetics and Tone A generative-art full-bleed canvas where a single living p5.js-style composition fills the viewport — flowing curves morphing slowly, duotone-photo cameos drifting through the field, and pulsing micro-attention beats drawing the eye to small islands of typography. Humanist serif headlines float in the foreground like quiet captions to a slow-burning algorithm. The aesthetic merges Casey Reas' generative drawings, the candy-bright duotone palettes of late-90s Wired magazine layouts, and the flowing organic curves of Saul Bass animated title sequences. Minimal in tone: very few words, large negative space, the algorithm doing most of the talking. The voice is sparse and oblique. Pages don't have headlines so much as fragments. "Here, slowly." "Look here, just for a moment." "Yes." Minimalism via radical restraint. ## Layout Motifs and Structure Full-bleed layout: a single 100vw × 100vh canvas at all times. The entire page is one continuous composition — there is no traditional "section" structure. Instead, scroll progresses the visitor through a continuous transformation of the generative composition. As you scroll, the algorithm slowly evolves: new flowing curves replace old ones, duotone-photo cameos drift in from the edges and fade out, and the candy-bright palette cycles. Text appears in 4-5 "islands" floating over the canvas — each island is a small humanist-serif fragment, occupying roughly 280×120px, positioned via golden-ratio placement (top-left golden point, center-right golden point, etc.). Islands are not in a grid; they are positioned in the canvas like quiet textual lifeboats. Pulse-attention pattern: at the center of each text island, a small Candy-Bright dot pulses softly (1.4Hz, 6-12px range). The pulse is the only "call-to-attention" — it's the heartbeat that says "read me." The header is a single tiny wordmark in the top-left corner ("tsundere.xyz") set in humanist serif at 14px — almost invisible. The footer is a single asterisk in the bottom-right. No navigation, no menu, no buttons. The visitor scrolls or doesn't. ## Typography and Palette - **Display headlines:** "EB Garamond" (Google Fonts), weight 400 italic — humanist serif for text-island fragments at 36-48px, line-height 1.2, letter-spacing -0.005em. - **Sub-display:** "EB Garamond" (Google Fonts), weight 500 — at 18-22px for tiny captions in islands. - **Body (rare):** "EB Garamond" (Google Fonts), weight 400 — at 15px line-height 1.7 for the few longer prose moments. - **Wordmark:** "EB Garamond" (Google Fonts), weight 400 italic — at 14px for the corner wordmark. (All type in a single humanist serif family — radical typographic restraint.) Palette — Candy-bright generative duotones: - `#F2EEE9` Stone Cream — base canvas background (warm off-white). - `#FF5C8A` Candy Pink — primary duotone hue 1. - `#3CC9D0` Aqua Mint — primary duotone hue 2. - `#FFD45C` Lemon Pop — secondary duotone hue. - `#1A1622` Inkwell — text color and curve outlines. - `#9B59FF` Lilac Glow — micro-accent for pulse-attention dots. Candy-bright discipline: only 4 saturated hues, cycled through the generative canvas. The duotone-photos use Pink + Aqua, Pink + Lemon, Aqua + Lemon, or Lilac + Aqua — never all four at once. ## Imagery and Motifs - **Duotone-photo cameos**: 6-8 duotone-treated photographs (faces in profile, hand gestures, fluttering fabric, a single bird mid-flight) that drift across the canvas at slow speeds (8-12px/sec). Each photo is duotone-treated in 2 of the 4 candy-bright hues, with feathered edges. - **Flowing-curves motifs**: the dominant generative composition is a flow-field of curving lines — Perlin-noise-driven SVG paths that morph their control points over 18s cycles. 80-120 curves coexist, each 0.5-1.5px stroke, in cycling candy hues. - **Generative-art imagery**: in addition to flowing curves, the algorithm spawns occasional "blooms" — radial-symmetric particle bursts that bloom and fade over 4s cycles, anchored to slowly-drifting positions in the canvas. - **Pulse-attention dots**: a single Lilac Glow circle (6-12px) at each text island, pulsing on a 1.4Hz sine wave. Pulse intensity ramps up to 0.7 alpha at peak. - **Asterisk**: a tiny Inkwell-colored asterisk in the bottom-right corner, the only "punctuation mark" of the page — a quiet sign-off. ## Prompts for Implementation - Build the full-bleed canvas with `` element at `position: fixed; top: 0; left: 0; width: 100vw; height: 100vh`. Render generative flow-field at 30fps using requestAnimationFrame. - Flow-field generative engine: Perlin noise field driving 100 SVG path curves. Each curve has 6 control points sampled from the noise field; control points morph over time at a noise-frequency of 0.003. Curves are drawn with cycling candy hue stroke. - Duotone-photo cameos: 6-8 PNG images converted to duotone via CSS filter `filter: grayscale(1) sepia(1) hue-rotate(...)` chains, or pre-baked as duotone PNGs. Each cameo is absolutely-positioned and animated to drift across the canvas at a slow speed. - Text islands: each is a `
` positioned absolutely at a golden-ratio anchor, with backdrop-filter blur(8px) to make the text readable against the moving canvas. Inside, the EB Garamond fragment and a single pulsing dot. - Pulse-attention dot: a `` element with `border-radius: 50%`, animated via CSS `@keyframes` from 6px to 12px scale and 0.3 to 0.7 alpha over 720ms, alternating. - Bias toward minimal, generative narrative: there are no CTAs, no pricing, no stat-grids, no menus. The page is a slow living algorithm with sparse text. Story emerges from the fragments. - Cursor becomes a small Candy Pink circle with a 4px Lilac Glow halo. On hover over a text island, the dot's pulse temporarily accelerates to 2.2Hz; on hover over a duotone cameo, the cameo's hues swap (Pink/Aqua → Aqua/Pink) for a moment. - Reduced motion: freeze the generative flow-field at a representative state; disable pulse-attention dots; disable cameo drift. Keep the static composition as a still image. ## Uniqueness Notes - Differentiator 1: full-bleed layout as a single continuous generative canvas, with text islands floating golden-ratio anchored — no traditional sections. - Differentiator 2: minimal tone enforced via radical word-count restraint (text islands are 3-12 words each) — opposite of corpus's prose dominance. - Differentiator 3: pulse-attention pattern reduced to a single Lilac Glow dot per text island, replacing all CTAs and buttons. - Differentiator 4: duotone-photo cameos drifting across a generative canvas, with hue-swap on hover — a kinetic photographic layer. - Differentiator 5: humanist serif (EB Garamond) used as the ONLY typeface, in italic for display and roman for body — typographic restraint as design. - Chosen seed: aesthetic: generative, layout: full-bleed, typography: humanist, palette: candy-bright, patterns: pulse-attention, imagery: duotone-photo, motifs: flowing-curves, tone: minimal. - Avoided patterns from frequency analysis: parallax (94% — replaced with generative flow-field), card-grid (90% — replaced with full-bleed canvas), centered (94% — golden-ratio islands), photography (90% — used only as duotone cameos drifting on a generative field), mono typography (81% — replaced with humanist serif), mysterious-moody (71% — replaced with minimal restraint).