# Design Language for tsundere.style ## Aesthetics and Tone A Memphis-style fashion lookbook scrolled as a single tall ribbon — a pastel aurora flickering between candy-colored geometric shapes, with icons bouncing onto the page like jellybeans dropped onto silk. The aesthetic merges Memphis Milano's 1981 pastel geometric exuberance, the icon-density of Susan Kare's Mac OS dingbats, and the soft aurora glow of Iceland's late-night sky photographed through pastel chiffon. Conversational in tone: the page reads like a stylish friend texting outfit notes — playful, opinionated, full of small jokes. The voice is chatty and warm. "OK so the green polka socks — yes, with the orange sweater. I know. Trust me. Try it Tuesday." Short sentences, lots of small asides, casual punctuation. ## Layout Motifs and Structure Single-column layout, narrow and tall (max-width 720px, centered). The column is the runway. Each post-style entry is a stack of: - A Memphis-shape banner (squiggle, terrazzo dot cluster, jagged zigzag, semicircle hat) bouncing in from above. - A variable-fluid headline that morphs weight/width as the visitor scrolls past it. - An icon-heavy illustration row (4-7 small pastel icons in a bounce-enter cascade). - A short conversational paragraph in handwritten-feel sans. - A single aurora-glow accent line at the bottom of the entry. Between entries, a small Memphis pattern strip runs horizontally — alternating squiggles, dots, and triangles in pastel tones. The strip occupies 32px of vertical space and acts as both decoration and entry-separator. The page header is a single oversized variable-fluid wordmark ("tsundere.style") that morphs its variation axes (wght 200 → 900, wdth 75 → 125) in a slow 12s cycle, like a sign breathing. A persistent floating "aurora orb" (40px) follows scroll progress, glowing softly in cycling pastel hues, anchored to the right margin. ## Typography and Palette - **Display headlines:** "Roboto Flex" (Google Fonts), variable axes wght 200-900 and wdth 75-125 — variable-fluid for entry titles at 48-72px. Scroll-tied morph: as the visitor scrolls past the headline, wght and wdth interpolate based on viewport position. - **Sub-display:** "Roboto Flex" (Google Fonts), wght 400 wdth 100 italic — at 22-26px for sub-titles. - **Body:** "Quicksand" (Google Fonts), weight 500 — rounded-sans at 17px line-height 1.6 for conversational copy. - **Icon labels / chips:** "Quicksand" (Google Fonts), weight 700 — at 13px ALL CAPS letter-spacing 0.1em for outfit-piece labels. - **Mark / signature:** "Caveat" (Google Fonts), weight 400 — for hand-written sign-offs. Palette — Pastel candy aurora: - `#FFF7F0` Pastel Vanilla — base background. - `#FFD9E8` Cotton Pink — primary pastel accent, used in Memphis squiggles and entry banners. - `#C9E8FF` Sky Mint — secondary pastel, used in dot-clusters and aurora orb. - `#FFE89C` Lemon Sherbet — tertiary pastel, used in triangle motifs and headline glows. - `#A589FF` Lavender Aurora — accent for icon highlights and aurora-glow lines. - `#2C2640` Mulberry Ink — text color, soft dark for body copy. Pastel discipline: every saturated color is desaturated to 0.78 alpha; nothing screams, everything murmurs in candy tones. The aurora-orb cycles through Pink → Mint → Sherbet → Lavender on a 6s loop. ## Imagery and Motifs - **Icon-heavy imagery**: each entry carries 4-7 small pastel SVG icons — illustrated outfit pieces (a polka sock, a chunky boot, a beret, a satin scarf, a denim flare, a sequin clutch). Icons are 56-72px, drawn in 1.5px Mulberry Ink with pastel fills. Icons bounce-enter on scroll, settling with a soft elastic ease-out. - **Aurora-lights motifs**: each entry's footer line is a 1.5px aurora gradient (Pink → Mint → Lavender) that softly animates its stops, suggesting an aurora ribbon at the bottom of each thought. - **Memphis shapes**: scattered pastel geometric shapes throughout — squiggles, terrazzo dot clusters, zigzags, semicircles, slabs — each a single SVG element placed asymmetrically. They bounce in with a 4-shape stagger on entry. - **Aurora orb**: a 40px floating gradient sphere fixed at the right margin that follows scroll progress; it pulses softly at 1Hz and shifts hue every 1.5s. - **Hand-lettered margin chips**: tiny "chip" labels with hand-lettering (e.g., "softgirl", "weekend", "vintage") rotating between entries. ## Prompts for Implementation - Single-column layout: `max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem`. On large screens, generous side margins reveal Memphis pattern strips on the canvas edges. - Variable-fluid typography: use Roboto Flex with `font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth)`. JS tracks scroll position and updates CSS custom properties per-headline based on viewport intersection ratio (0 = wght 200, 1 = wght 900). - Bounce-enter: each icon and Memphis-shape uses IntersectionObserver + CSS transition with cubic-bezier(.34, 1.56, .64, 1) (overshoot bounce) on `transform: translateY(40px) scale(0.6) → translateY(0) scale(1)`, 540ms duration, staggered 60ms per element. - Aurora orb: a fixed `
` with `background: radial-gradient(circle, hue1, hue2)`. JS animates the gradient stops every 1.5s via CSS custom properties; orb's vertical position tied to scroll progress. - Aurora footer line: SVG `` with 4 stops; gradient `gradientTransform` animated to shift hues over 4s. - Memphis pattern strip between entries: a thin SVG with repeating squiggle/dot/zigzag patterns; pattern offset animates slowly to drift sideways. - Bias toward conversational style-friend voice: each entry is a styling thought, never marketing. No CTAs, no pricing, no stat-grids — only outfit ideas and pastel jokes. - Cursor becomes a small Cotton Pink heart cursor; on hover over an icon, the icon scales 1.12 and the cursor switches to a sparkle. ## Uniqueness Notes - Differentiator 1: single-column layout used as a tall narrow style-feed runway, not as a blog column — the narrowness is the design. - Differentiator 2: variable-fluid typography tied to scroll position so headlines morph as visitor scrolls — a kinetic, never-static display register. - Differentiator 3: Memphis aesthetic in pastels (not the original Memphis primary brights) — softening Memphis Milano into candy-aurora register. - Differentiator 4: bounce-enter pattern weaponized for icon cascades, with overshoot bounce per element. - Differentiator 5: aurora-lights motifs as footer-line accents and a floating orb — using aurora as decoration, not as background. - Chosen seed: aesthetic: memphis, layout: single-column, typography: variable-fluid, palette: pastel, patterns: bounce-enter, imagery: icon-heavy, motifs: aurora-lights, tone: conversational. - Avoided patterns from frequency analysis: parallax (94% — replaced with bounce-enter), card-grid (90% — replaced with tall single column), centered text-only (94% — narrow 720px column with side decoration), photography (90% — replaced with icon-heavy SVGs), mono typography (81% — replaced with variable-fluid + rounded-sans), mysterious-moody (71% — replaced with conversational).