# Design Language for tsundere.trade ## Aesthetics and Tone A skeuomorphic merchant's salon — burgundy leather ledgers, brass-edged drawers, and hand-drawn bubble badges, all stitched together as a deep parallax of layered curiosity cabinets. The aesthetic merges 19th-century Parisian arcade boutiques (Galerie Vivienne, Passage Jouffroy), the trompe-l'oeil leather binding of Folio Society's slip-cases, and the playful bubble-tag stickers from 1990s candy-shop bulletin boards. Opulent-grand in tone: the merchant-narrator speaks as a third-generation curator of impossible objects — slightly grandiose, theatrical, never apologetic. The voice is opulent and slightly theatrical. "Behold — this drawer holds three things you did not know you needed. The price is what you can spare; the value is what you remember tomorrow." Long, languid sentences with sub-clauses and dashes. ## Layout Motifs and Structure Parallax-sections layout. The page is structured as 6 deep parallax sections, each section a merchant's curiosity-room. As the visitor scrolls, multiple layers move at different rates: - Back wall (parallax 0.2): hand-drawn architecture — brass-paneled cabinets, wallpaper of damask, faded burgundy curtains. - Mid-shelf (parallax 0.5): the wares — bubble-tagged items arranged on hand-drawn wooden shelves. - Foreground (parallax 1.0): merchant-narration text in handwritten script, plus floating bubble-playful tags ("Curiosity №14") that drift slightly. Each section is 120vh tall to create depth-room for parallax. Sections are stitched with a brass divider hairline that the visitor "passes through" — as it crosses the viewport center, a soft "drawer closes / drawer opens" SFX-cue would play (deferred to implementation; visual cue is a 220ms brass-glow pulse). Micro-interactions pattern: every interactive element (bubble tag, drawer handle, ledger spine) has a custom hover micro-interaction: - Bubble tags pulse and tilt 6deg on hover. - Drawer handles slide out 8px. - Ledger spines rotate 4deg and reveal a gold-foil edge. - Velvet ribbons flutter via 0.4Hz sway. The header is a hand-drawn merchant-shop signboard, hand-painted in burgundy on a faux-aged wood texture. The footer is a velvet-curtained "exit" with a brass bell illustration that gently sways. ## Typography and Palette - **Display headlines:** "Caveat Brush" (Google Fonts), weight 400 — handwritten for section signage at 56-76px, with brush-stroke variation. - **Sub-display:** "Sacramento" (Google Fonts), weight 400 — for hand-lettered drawer labels at 32-44px. - **Body:** "Spectral" (Google Fonts), weight 400 italic — at 17px line-height 1.7 for merchant narration prose. - **Marginalia / price tags:** "Caveat" (Google Fonts), weight 400 — for hand-written price tags and bubble-tag captions. - **Brass plate labels:** "Cinzel" (Google Fonts), weight 400 — for engraved brass-plate section badges, small caps, 14px. Palette — Deep-burgundy merchant's salon: - `#1A0A0E` Salon Shadow — deepest background for cabinet interiors and dark seams. - `#3A1414` Aged Burgundy — primary deep wall/cabinet color. - `#5C2A2A` Wine Velvet — secondary burgundy for curtain folds and ledger spines. - `#C8A36A` Brass Filament — primary brass-and-gold accent for handles, plates, and price-bubble outlines. - `#F0E0BC` Vellum Tag — pale paper-aged for bubble-tag fills and handwritten note backgrounds. - `#A82A2A` Curtain Crimson — saturated burgundy accent for one "FEATURED" curiosity per section. Skeuomorphic detail: every surface has a depth shadow (multiple offset shadows simulating dimensional rendering); every "metal" element has a 2-stop gradient suggesting brass; every "paper" element has a slight curl-shadow. ## Imagery and Motifs - **Hand-drawn imagery**: every shelf, drawer, ledger, and curio is a hand-drawn SVG illustration in 1.2px Brass Filament with Aged Burgundy fills. The drawings have deliberate brush-stroke jitter — none of the lines are perfectly straight. - **Bubble-playful motifs**: each curiosity carries a hand-drawn bubble price-tag: a wobbly oval in Vellum Tag with a Brass Filament border, suspended by a thin string from the shelf above. Bubble tags carry hand-written prices and tag numbers in Caveat ("№14 · 30 chips · maybe"). - **Cultural curio illustrations**: each section features a different category of curiosity: clockwork hummingbird, sealed letter, copper compass, embroidered fan, perfume vial, brass pocket-watch, glass marble with bubbles inside. All hand-drawn in the same brass-burgundy register. - **Brass plates**: small brass plaques at section headers, with engraved Cinzel labels ("SALON I · CLOCKWORK"). Plaques have a subtle drop shadow and a 1px highlight on the top edge (brass sheen). - **Velvet curtains**: hand-drawn velvet drapery framing each section with soft fold-shadows and tasseled cords. ## Prompts for Implementation - Parallax-sections: each section uses 3 absolutely-positioned layers (back, mid, fore). JS reads scroll position and applies `transform: translateY(scrollY * speed)` per layer (0.2, 0.5, 1.0). - Micro-interactions: each interactive element has bespoke `:hover` CSS plus JS-driven animations: - Bubble tags: `transform: rotate(6deg) scale(1.04); filter: brightness(1.05)` on hover, transitioned over 280ms cubic-bezier(.3,.7,.2,1). - Drawer handles: `transform: translateX(8px)` and a Brass Filament glow at 0.4 alpha appears underneath. - Ledger spines: `transform: perspective(800px) rotateY(-4deg)`, revealing a thin gold-foil strip on the inner edge. - Hand-drawn SVGs: 20-30 hand-illustrated curio items as inline SVGs (40-120KB each), each with a subtle "breathing" filter (feGaussianBlur stdDeviation 0 → 0.3 → 0 over 4s) to feel alive. - Bubble tags: SVG `` with `stroke-dasharray` jitter for the wobble effect; each tag has a thin SVG string anchored to a shelf hook. - Brass plates: pre-rendered SVG with a `` 2-stop gradient (top highlight, bottom shadow) and a subtle `feSpecularLighting` filter for brass sheen. - Velvet curtain texture: a single 1024×512 velvet PNG tile with a soft directional shadow, set as `background-image` for curtain-framed sections. - Bias toward opulent merchant narrative: each section is a salon-tour by a slightly grandiose curator. No CTAs, no pricing tables (the bubble tags are diegetic, not transactional), no stat-grids. - Cursor becomes a Brass Filament pointer with a tiny tassel; on hover over a curio, the cursor switches to a magnifying-glass icon and the curio gains a 6px gold-glow halo. - Reduced motion: collapse all 3 parallax layers into one (no parallax); freeze bubble-tag swing and curtain sway; preserve micro-interactions but disable filter breathing. ## Uniqueness Notes - Differentiator 1: parallax-sections used as deep skeuomorphic merchant-salon rooms with 3 illustration layers, not as a hero text effect. - Differentiator 2: skeuomorphic aesthetic in a deep-burgundy register — the curiosity-cabinet metaphor is unusual against the corpus's flat-design dominance. - Differentiator 3: bubble-playful motifs reimagined as hand-drawn price-tag bubbles on strings, not as candy-pop graphics. - Differentiator 4: handwritten typography (Caveat Brush + Sacramento) as the dominant display register, with Spectral italic body — handcrafted shop-sign aesthetic. - Differentiator 5: micro-interactions designed bespoke per element (bubble tag vs drawer handle vs ledger spine), instead of a single universal hover pattern. - Chosen seed: aesthetic: skeuomorphic, layout: parallax-sections, typography: handwritten, palette: deep-burgundy, patterns: micro-interactions, imagery: hand-drawn, motifs: bubble-playful, tone: opulent-grand. - Avoided patterns from frequency analysis: parallax (94% — here used as 3-layer salon depth), card-grid (90% — replaced with curiosity-shelf composition), centered (94% — full-bleed parallax sections), photography (90% — replaced with hand-drawn SVGs), mono typography (81% — replaced with handwritten + Cinzel), mysterious-moody (71% — replaced with opulent-grand).