# Design Language for tsundere.studio ## Aesthetics and Tone tsundere.studio is reimagined as **The Atelier on the 47th Floor** — a luxury-premium creative studio whose visual identity behaves like a private penthouse atelier perched above a sleeping metropolis at 3:17 AM. The aesthetic fuses two registers that almost never share a frame: the **whimsical-creative** wink of a tsundere persona (the studio's mascot is a sulky neon "S" that turns its back on visitors until you scroll past it three times) and the **luxury-premium** restraint of a Milan fashion-house lookbook (Bottega-grade negative space, museum-grade typographic taste, no clutter, no badges, no "as seen in" logos). The mood is **midnight velvet**: a deep-burgundy darkness the color of dried Bordeaux, of Théo van Rysselberghe's evening interiors, of the curtain at La Scala five minutes before the house lights go down. Everything is filmed through a **duotone-photo** veil — black-and-burgundy, never color, never grayscale — so the city outside the studio's floor-to-ceiling windows reads as a single hushed instrument rather than a noisy backdrop. Tone is whimsical-creative without being cute: the studio "pretends not to want clients" the way a tsundere protagonist pretends not to care, but every micro-detail (the brass elevator-button kerning, the carbon-fiber underline on hover, the studio cat's silhouette napping in the corner of the HUD telemetry) reveals the affection underneath. The typographic voice is dry, witty, slightly sulky — copy fragments like "we are, regrettably, accepting commissions" or "fine. look at our work." appear as overlay labels in monochrome condensed display caps. This design deliberately departs from the prevailing playful (71%) / dark-mode (29%) / corporate (21%) trio: it is luxury-premium at <1% incidence, paired with a deep-burgundy palette at literal 0% across 724 prior designs. ## Layout Motifs and Structure **Primary motif: hud-overlay floating over a duotone-photo full-bleed background.** The viewport is a single cinematic plate — there are no sections, no card-grids, no centered hero blocks (which dominate the corpus at 73% and 66% respectively). Instead, the entire 100vh × 100vw canvas is occupied by a slow-panning duotone photograph of a rain-slick metropolis at night, and the *interface* lives **on top** of that photograph as a transparent telemetry layer. **Eight-anchor HUD frame.** Eight corner-and-edge anchors hold the chrome: top-left (studio mark), top-right (current time in the studio's local timezone, ticking every second), top-center (a single hairline dropping 24px from the chrome edge marking "true north" of the composition), middle-left (a vertical reading-rule of project numerals 01–07 in Roman caps), middle-right (a 1px vertical telemetry stripe with three pulse markers), bottom-left (latitude/longitude of the imagined penthouse: 35.6586° N, 139.7454° E), bottom-center (a single condensed line of running copy that morphs every 11 seconds), bottom-right (a hairline crosshair the user can drag — it remembers position via localStorage). **Inner safe area: 64px from every edge.** The HUD chrome lives in the 64px ring; the photograph is the entire viewport. This produces the sensation of looking *through* a viewfinder onto the city, with metadata etched on the glass. **No scroll page in the conventional sense.** Instead, vertical scroll triggers **fade-reveal** transitions between seven duotone "plates" (work portfolio entries), each a full-bleed photograph held for ~120vh of scroll travel before crossfading to the next over 40vh. The HUD chrome stays fixed; only the photograph beneath it changes. Scroll position is mirrored as a thin 1px progress bar rendered as the bottom edge of the bottom-right crosshair, filling counterclockwise. **Anti-pattern compliance.** No card-grid (73% corpus). No centered hero (66%). No CTA cluster, no pricing, no stat-grid, no testimonial carousel, no "trusted by" logo wall — the studio "regrettably" does not need to convince you. ## Typography and Palette **Display (HUD primary):** **"Oswald"** from Google Fonts — a tall, narrow condensed grotesque drawn by Vernon Adams, descended from late-19th-century Victorian condensed wood-type. Used at weight 600 (semi-bold), all-caps, with `letter-spacing: 0.18em` and `line-height: 0.9`. Sizes: hero studio mark `clamp(2.25rem, 4.4vw, 3.5rem)`; HUD anchor labels `0.6875rem` (11px) with `letter-spacing: 0.32em`. Condensed forms occupy ~10% of the corpus and are paired here with a tonal weight rarely seen — the result reads as quiet, vertical, precise, like type stenciled on a brass nameplate. **Display (HUD secondary, italic accent):** **"Italiana"** from Google Fonts — a high-contrast didone display italic by Santiago Orozco, all in italic, all in lowercase, used **only** for the studio's whimsical asides ("regrettably accepting commissions", "fine. look.", "go on then."). Size `clamp(1.125rem, 1.6vw, 1.35rem)`, weight 400, `letter-spacing: 0.005em`. The contrast between Oswald's stern condensed verticals and Italiana's slender italic curves is the design's whole personality: the tsundere face and the tsundere heart. **Body / micro-copy:** **"DM Mono"** from Google Fonts — a slightly humanist monospace by Colophon Foundry, used at weight 300 for telemetry coordinates, frame counts, and project numerals. Size `0.75rem` (12px), `letter-spacing: 0.04em`. Mono provides the precision of a HUD instrument without sliding into the terminal cliché (mono dominates typography at 79%; here it is *demoted* to micro-copy, a deliberate inversion of the corpus norm). **Palette — deep-burgundy duotone (literal 0% corpus incidence):** - `#1a0810` — Sediment burgundy, the darkest plate tone, used for shadows and the photograph's blacks - `#2d0a18` — Velvet burgundy, the dominant background field, the color of dried Bordeaux on a leather chair - `#4a0e22` — Wine burgundy, the photograph's mid-tone after duotone mapping - `#7a1f3a` — Cordovan burgundy, used for HUD anchor strokes at 60% opacity - `#a83c5a` — Dusk rose, the photograph's highlight tone, the only "light" the design admits - `#d4a8b4` — Pearl rose, used **once per page** for the studio mark only — a single tonal exhale in the entire composition - `#f3e5e8` — Bone porcelain (off-white), used for HUD primary text and Oswald display caps; never pure white (#ffffff is forbidden) - `#0a0307` — Carbon (near-black), used for the 1px hairlines, crosshairs, and the brass-button kerning shadow on hover The duotone mapping is strict: every photograph is processed in CSS via `filter: grayscale(1) contrast(1.18) brightness(0.85);` then layered under a `mix-blend-mode: multiply` `linear-gradient(180deg, #2d0a18 0%, #1a0810 100%)`, then a `mix-blend-mode: screen` `radial-gradient(circle at 30% 40%, #a83c5a 0%, transparent 60%)` on top — yielding a true two-tone burgundy/bone image with no chromatic competition. ## Imagery and Motifs **Duotone-photo plates (the seven "works").** Seven full-bleed photographs of imagined city scenes from the atelier window, all processed through the duotone pipeline above: 1. A rain-slick boulevard at 3 AM with a single yellow taxi reduced to a duotone smear 2. The interior of an empty late-night espresso bar, brass fixtures glinting as bone-tone highlights 3. An overhead drone shot of an intersection, the crosswalk lines reading as bone-on-burgundy stripes 4. A subway escalator descending into the dark, motion-blurred figures as ghosts 5. The skyline at the moment one window in a hundred lights up 6. A single neon sign reflected in a puddle, the original neon hue completely consumed by the duotone 7. The studio cat (a Russian Blue silhouette) on a windowsill with the city behind her These are not photographs we own — they are described in the design so the implementer commissions or sources Creative-Commons / Unsplash images and runs them through the strict duotone CSS pipeline. The point is that the *photograph* never asserts color; the burgundy is the design's voice, not the photo's. **City-urban motifs (literal 1% corpus incidence).** Beyond the photographic plates, the HUD chrome carries small vector glyphs that read as urban infrastructure: a fire-escape ladder rendered as 7 hairlines stacked vertically in the middle-left rule, a manhole-cover crosshair as the bottom-right interactive marker, a subway-route-diagram fragment as the morphing bottom-center text track, a rain-radar concentric ring at 18% opacity behind the studio mark. None of these are illustrative — they are *structural* glyphs, each replacing what would normally be a navigation chrome element. **The sulky neon "S" mascot.** A single SVG glyph in the top-left corner: a stylized "S" rendered in `#d4a8b4` (the only pearl-rose ink in the design) with a faint flicker animation — `opacity: 0.92 → 1.0 → 0.88 → 1.0` over 7 seconds, irregular like a tired neon tube. On first page load the S is mirrored (facing away). After three scroll-down events totaling >300vh, the S smoothly rotates 180° on the y-axis over 1.4 seconds and faces the viewer for the rest of the session. This is the *whimsical-creative* tone made literal: the studio has been pretending not to notice you. **Fade-reveal as the only motion grammar.** The dominant patterns in the corpus are scroll-triggered (33%), parallax (27%), stagger (10%) — this design refuses all three in their conventional sense. Instead, fade-reveal (5% corpus) is the *exclusive* transition: every state change, every plate change, every label morph happens via opacity crossfade of 600–1400ms with `cubic-bezier(0.32, 0.04, 0.18, 1.0)` (a heavy custom ease that lingers at the start, releases late). Nothing slides, nothing parallaxes, nothing staggers. The world dissolves and re-condenses. **Hairline ornament — the brass-button kerning shadow.** Every link, when hovered, does *not* underline — instead, a 1px hairline in `#0a0307` (carbon) appears 4px below the baseline and shifts 2px to the right over 220ms, giving the impression of an embossed brass button catching the room light. No color change. No size change. Just shadow. ## Prompts for Implementation Build this as **a single-page cinematic plate**, not a website. There is no header nav, no footer, no menu hamburger, no logo wall, no testimonial section, no pricing, no CTA. The implementer should think of it as a feature-film opening title sequence that responds to scroll. **Structural skeleton.** Single `
` with `position: fixed; inset: 0;` containing: a `.plate` layer (the duotone photograph, switched via `` swap on scroll position), a `.hud` layer with eight `
` anchors absolutely positioned in the 64px ring, and a `.scroll-driver` invisible element that provides `height: 700vh` so the document scrolls 7 viewport-heights total — one per plate. JavaScript reads `window.scrollY / window.innerHeight` to determine current plate index and crossfade alpha; no scroll libraries needed. **Duotone pipeline (mandatory).** Every `` inside `.plate` must receive: `filter: grayscale(1) contrast(1.18) brightness(0.85);` then sit beneath two pseudo-element overlays — `::before` with `background: linear-gradient(180deg, #2d0a18 0%, #1a0810 100%); mix-blend-mode: multiply;` and `::after` with `background: radial-gradient(circle at 30% 40%, #a83c5a 0%, transparent 60%); mix-blend-mode: screen;`. This is the only acceptable color treatment for raster imagery. **Typography rules.** Oswald 600 caps + 0.18em tracking for primary HUD labels. Italiana 400 italic lowercase for whimsical asides — *only* for asides, never for primary information. DM Mono 300 for coordinates, frame counts, and the running bottom-center copy. Never use sans-serif body type. Never use a non-condensed display face. Never use color in type — only `#f3e5e8` (bone) and the single `#d4a8b4` (pearl rose) on the studio mark. **Motion rules.** Fade-reveal exclusively. Crossfade duration scales with scroll velocity: slow scroll = 1400ms fade, fast scroll = 600ms fade. Use a custom `cubic-bezier(0.32, 0.04, 0.18, 1.0)` for *all* easing — no `ease-in-out`, no `linear`, no spring. The neon "S" flicker uses a hand-tuned 7-second irregular keyframe, not a smooth sine. **Storytelling priority.** The seven plates are not "portfolio items" in the corporate sense. Each has a single condensed-caps Oswald title (e.g., "PLATE 03 — INTERSECTION, 03:42"), a single Italiana italic aside (e.g., "*not our best work, but you asked.*"), and a single DM Mono coordinate stamp. There is no project description, no client list, no case-study writeup. The studio is too sulky to explain itself — and that *is* the experience. **Cursor.** Replace the system cursor on `.plate` regions with a thin 16px crosshair in `#f3e5e8` at 70% opacity, drawn as an SVG. On hover over an interactive HUD anchor, the crosshair contracts to 8px and gains a 1px outer ring. Never change cursor color. Never use `cursor: pointer` (the chunky hand) — this is a museum, not a checkout. **AVOID:** card-grids, centered hero blocks, CTA stacks, pricing tables, stat counters, testimonial carousels, logo walls, parallax depth layering, gradient-mesh backgrounds, glassmorphism, terminal/code aesthetics, playful cartoon mascots, hand-drawn illustrations, color photography of any kind, pure white (#ffffff), pure black (#000000), the words "innovative" / "solutions" / "transform", any em-dash less elegant than this one. ## Uniqueness Notes - **Deep-burgundy palette at literal 0% corpus incidence (724 designs analyzed).** Every prior site that aimed for "luxury" reached for gold-black, jewel-tones, navy-metallic, or sepia-nostalgic. This design commits to a duotone burgundy world where the only "highlight" is dusk-rose and the only "white" is bone-porcelain — a chromatic territory the corpus has not visited. - **Typographic inversion: condensed caps as primary, mono demoted to micro-copy.** Mono dominates the corpus at 79%, almost always as primary or display type. Here Oswald (condensed, 10% corpus) is promoted to display and DM Mono is intentionally relegated to coordinate stamps under 12px. This is a frequency-deliberate inversion. - **Hud-overlay used for *no* dashboard purpose.** The 3% of the corpus that uses hud-overlay deploys it for telemetry, lab simulations, or sci-fi UIs (cf. simai.bar's Bauhaus monte-carlo overlay). This design uses HUD chrome as **gallery wall labels** over a single cinematic photograph — the opposite of a dashboard, the opposite of a control surface. The HUD watches a photograph, not a system. - **Whimsical-creative tone executed as emotional withholding rather than cartoon delight.** Whimsical-creative (6%) almost universally reads as bright, bouncy, hand-drawn, dopamine. Here whimsy is rendered as a sulky neon "S" that turns its back, italic asides that admit affection grudgingly, and copy that pretends not to want clients. The whimsy is *withheld*, not announced — a tonal register the corpus has not attempted. - **Fade-reveal as the *only* motion grammar.** The corpus default stack — scroll-triggered (33%) + parallax (27%) + stagger (10%) — is rejected wholesale. Every transition in the design is an opacity crossfade with a single shared cubic-bezier curve. The world dissolves; nothing slides. - **City-urban motifs (1% corpus) used as structural HUD glyphs, not decoration.** Fire-escape ladders, manhole-cover crosshairs, and subway-route fragments replace navigation chrome rather than illustrate alongside it — a structural use of the motif that no other site in the corpus performs. - **Duotone-photo at strict 0% chromatic deviation.** Other designs that approach duotone (4% corpus) treat it as a stylistic option for one or two images; here it is the *only* permitted raster treatment, applied via a mandatory three-layer CSS pipeline that the implementer cannot loosen. The result is total chromatic discipline — the burgundy is the only voice. - **Chosen seed:** `aesthetic: luxury-premium, layout: hud-overlay, typography: condensed, palette: deep-burgundy, patterns: fade-reveal, imagery: duotone-photo, motifs: city-urban, tone: whimsical-creative` — eight axes, six of which sit at ≤5% corpus incidence and two of which (deep-burgundy, city-urban) sit at literal 0–1%. - **Avoided patterns from frequency analysis:** card-grid (73%), centered (66%), warm palette (84%), gradient palette (60%), photography imagery (82%), playful aesthetic (71%), mono typography (79% — demoted not eliminated), scroll-triggered + parallax + stagger motion stack (33% + 27% + 10%). Each is either inverted, replaced, or refused outright.