# Design Language for tsundere.trade ## Aesthetics and Tone tsundere.trade is a sideways-drifting **swap board** -- a place to post the things you would trade away (a half-finished hobby kit, a bookmark you can't part with, an opinion you're done defending) and the things you would quietly accept in return. Where a normal classifieds site would shout, tsundere.trade pretends not to care: each listing is phrased as if the owner is doing you a favor by even mentioning it. The aesthetic is **vaporwave** filtered through a calm, oceanic register -- not hot pink and chrome, but a slow blue dawn, a gradient sky that never quite resolves into a horizon. Think of a 1990s mall food court at 6am, the lights still humming, sea-foam carpet underfoot, no one around to hear you change your mind. The tone is **approachable-casual**: copy reads like a slightly embarrassed text message ("anyway. it's yours if you want it. don't make a big deal."), warm enough that visitors stop to browse, distant enough that nothing feels for sale. ## Layout Motifs and Structure The page is a **single horizontal track**: scrolling vertically maps to lateral movement through a continuous trading promenade. There is no fold and no bottom; the eye drifts rightward through five colored zones separated by drawn wave-forms. **Pier (Intro Panel):** First viewport (100vw x 100vh) is a wide, near-empty panel. Centered slightly low: the wordmark "tsundere.trade" set in refined Baskerville italic at clamp(2.4rem, 6vw, 5rem). Below it, a single sentence in small caps tracking +0.18em: "post a thing. wait. someone might bite." A horizontal hairline (1px, 35% opacity) runs the full width at 70% page height -- the "tide line" -- and a small gradient-mesh sphere (the "buoy") sits on it, marking the entry to the track. **Trade Promenade (Body):** Five panels of 100vw each, joined edge to edge, forming a 500vw track inside `overflow-x: auto`. Each panel hosts one listing block -- a refined editorial layout, two columns at 1.6fr / 1fr, left column for the longform "case" (why this thing exists, why it's leaving), right column for the offer (what it is, what would be acceptable in return, contact). Panels are softly tinted (each shifts hue along the ethereal-blue spectrum) and bleed into each other through a 12vw gradient-mesh overlap zone, so transitions feel atmospheric rather than carded. **Wave-Form Dividers:** Between panels, a full-height SVG wave (a single sinusoid stroked at 1.5px in `#9ec5db`, amplitude ~80px, period ~240px) runs vertically from top to bottom. The wave is the only hard structural element on the page; everything else is gradient and type. **Magnetic Snap:** Horizontal scroll uses `scroll-snap-type: x proximity` with each panel as a `scroll-snap-align: center` target -- the page magnetically settles each listing into the viewport center when scrolling slows, but does not lock the user mid-gesture. **Lighthouse (Outro Panel):** Final panel is again near-empty: a Baskerville italic line "submit a thing -- mailto link", and the buoy sphere reappears, this time half off the right edge, suggesting the track continues beyond view. ## Typography and Palette **Typography:** - **Display:** "Libre Baskerville" (Google Fonts) italic, 400 weight, used for the wordmark, panel headlines, and pull-quotes within each listing's left column. Set at clamp(1.6rem, 3.4vw, 3.2rem), line-height 1.18, letter-spacing -0.005em. The italic ball-terminals and high contrast strokes carry the "refined" register that anchors the loose vaporwave palette and stops the page from feeling like a meme. - **Body:** "Libre Baskerville" (Google Fonts) regular, 400 weight, 1.0625rem / 1.7 line-height, color `#2a3a4a` on light tints, `#dde6ef` on darker tints. Editorial paragraph rhythm, indented first line on continuation paragraphs (text-indent: 1.2em). - **Caption / Small Caps:** "Cormorant SC" (Google Fonts) 500 weight, 0.78rem, letter-spacing 0.18em, used for section labels ("offering", "would accept", "owner notes"), navigation hints ("scroll right >>"), and the tide-line legend. **Palette (ethereal-blue, eight stops):** - `#0b1f3a` -- Abyss (deepest navy, used only in panel-edge gradient mesh, wave stroke shadow) - `#1d3a5f` -- Pier Blue (text on light tints; deep panel background) - `#4a6d92` -- Tide (mid-blue for secondary text, hairlines at 70%) - `#7fa3c4` -- Mist (wave-form stroke base, divider color) - `#9ec5db` -- Sea Foam (panel tint, gradient-mesh midpoint) - `#c8dceb` -- Vapor (panel tint, lightest mesh stop) - `#ebf3f9` -- Salt Air (overall page background, lightest panel) - `#f5d6a8` -- Buoy Amber (the single warm accent: the buoy sphere, hover underlines, the contact link). Used in fewer than ~3% of pixels; its rarity is the design's heartbeat. ## Imagery and Motifs **Core Motif -- Gradient Mesh Atmosphere:** Each panel's background is a multi-stop CSS gradient mesh built from radial gradients layered with `mix-blend-mode: screen`. Example for panel 2: `background: radial-gradient(ellipse 80% 60% at 20% 30%, #c8dceb 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 70%, #9ec5db 0%, transparent 65%), radial-gradient(ellipse 100% 50% at 50% 100%, #7fa3c4 0%, transparent 55%), #ebf3f9;`. Each panel uses three to four overlapping radial blooms at different positions, producing a sky-like haze with no hard edges. Successive panels shift the bloom positions and deepen the base, so left-to-right scroll reads as moving through weather. **Wave-Form Dividers:** The vertical wave SVGs between panels are drawn as ``-style sinusoids. They animate subtly: a 12-second linear loop translates the path's `stroke-dashoffset` to suggest the wave is drifting downward, like seaweed in a slow current. **Buoy Sphere (recurring):** A single CSS-rendered sphere (`width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7e3, #f5d6a8 45%, #c89464 100%);`) appears three times on the entire page: at the entry tide-line, at the center of the middle panel as the section hinge, and falling off the right edge of the lighthouse panel. It is the only round element in a layout otherwise made of horizontal lines and rectangular panels. **Tide Line:** A 1px hairline at 70% of viewport height runs continuously across all five panels, color `#4a6d92` at 35% opacity. It is the only element that ignores panel boundaries -- a quiet, unbroken seam stitching the promenade together. **Magnetic Cursor:** When the cursor approaches an interactive element (listing title, contact link, buoy), the element's underline expands toward the cursor with a 200ms ease-out transform, as if attracted; on cursor exit, it relaxes back. No element travels more than 8px, and only opacity and `text-decoration-thickness` change; no hover shadows, no scale, no color flips. ## Prompts for Implementation Build the page as one wide horizontal track. Outer wrapper: `body { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }`. Track: `
` with five `
` children. Each section sets its own gradient-mesh background as described in Imagery and Motifs. Wave-form dividers: render each as `position: absolute; right: -1px; top: 0; bottom: 0; width: 80px; pointer-events: none;` containing an inline SVG with `` describing a quadratic-bezier sine path. Animate `@keyframes drift { to { stroke-dashoffset: -120; } }` at 12s linear infinite. Magnetic interactions: on listing titles, attach a pointermove handler scoped to the title's bounding rect that updates `--mx` (mouse X relative to element) and use it inside `text-decoration-thickness: calc(1px + var(--mx, 0) * 1.5px);` and `transform: translateX(calc(var(--mx, 0) * 4px));`. Snap back via `transition: 220ms cubic-bezier(.2,.8,.2,1)` on `pointerleave`. Do not animate scale or shadow. Tide line: append one persistent `
` at root. Because horizontal scroll moves content, not viewport, fixed positioning keeps the line continuous. Typography: load Libre Baskerville (italic + regular) and Cormorant SC (semibold) via Google Fonts. Default body to Libre Baskerville. Italics are intentional throughout display use -- do not romanize. Copy register: every listing title is a complete, almost-too-long sentence in Baskerville italic ("the cobalt mug i bought when i thought i'd take up pottery"). Section labels are in small-caps Cormorant SC. The voice is approachable-casual but slightly evasive; avoid CTAs, exclamation marks, and the words "shop," "deal," or "free." Use mailto links, not forms. The whole experience should feel like drifting along a quiet boardwalk in soft fog -- you came here to maybe trade something but mostly you ended up walking and looking out at the water. ## Uniqueness Notes 1. **Vertical-scroll-mapped horizontal promenade with scroll-snap proximity:** Page-scroll input is rotated 90 degrees onto a 500vw lateral track with magnetic (proximity, not mandatory) snap. Of horizontal-scroll designs in the collection (3% prevalence), none combine vertical-input mapping with proximity snap and a continuous tide-line motif crossing all panels. 2. **Continuous fixed tide-line stitching panels:** A single 1px horizontal hairline at 70vh runs unbroken across every panel via fixed positioning -- a structural seam that ignores the sectional grid beneath it. This anti-card, anti-section visual device does not appear elsewhere in the portfolio. 3. **Refined Baskerville italic as the default voice of a vaporwave page:** Pairing 0% prevalence baskerville-refined typography with 2% prevalence vaporwave aesthetic produces an editorial-vaporwave hybrid -- the wide soft gradients of vaporwave under a typographic register normally reserved for literary journals -- that no other site in the collection attempts. 4. **Buoy as singular warm pixel in an otherwise all-blue palette:** A single amber sphere appears exactly three times against an eight-stop ethereal-blue palette; the warm accent occupies under 3% of total pixels, its rarity (rather than its presence) carrying the emotional weight. No other ethereal-blue design in the portfolio commits this strictly to a single warm anchor. - **Seed/Style:** vaporwave + horizontal-scroll + baskerville-refined + ethereal-blue + magnetic + gradient-mesh + wave-forms + approachable-casual - **Avoided Patterns:** card-grid layout (67%), warm palette (81%), photography imagery (77%), playful aesthetic (66%), scroll-triggered parallax (33%), mono typography (73%) - **Frequency-preferred elements:** baskerville-refined typography (0%), ethereal-blue palette (1%), wave-forms motifs (1%), vaporwave aesthetic (2%), horizontal-scroll layout (3%), gradient-mesh imagery (3%), magnetic patterns (4%), approachable-casual tone (6%)