# Design Language for tsundere.studio ## Aesthetics and Tone An editorial magazine-spread tribute to a sunlit broadcast-room — futura headlines, lens-flare photography, and warm-amber tech objects arranged across a magazine grid that feels like a Wallpaper* issue from the year the future arrived. The aesthetic merges the design language of Wallpaper Magazine and Apartamento, the warm-amber product photography of Teenage Engineering's website, and the optimistic confidence of the 1960s Eames Solar Do Nothing Machine press kit. Optimistic-bright in tone: the studio is open, the windows are wide, the equipment is humming, and the editor's voice is welcoming and forward-leaning. The voice is warm and forward-looking. "We made this room because we believed something good could happen in it. Here is what we made today, and what we plan to make tomorrow." Future-positive, never naive. ## Layout Motifs and Structure Magazine-spread layout. The page is structured as a sequence of editorial spreads, each spanning the full viewport horizontally. Each spread is broken into a tight 12-column grid with editorial column rules. Spreads alternate compositional templates from a small library of 6 magazine grids: "feature opener," "two-column essay," "image-led story," "interview with pull-quote," "object showcase 3-up," and "closing colophon." Compositional rules: - Generous gutters (32px desktop) with thin 0.5px Faded Tan column rules between content columns. - Section openers carry an oversized "issue number" in futura at the top-right (e.g., "ISSUE 014 · STUDIO"). - Pull-quotes hang in the margin, set in Jost italic at 28-36px with a single 1.5px Amber accent rule. - Page-numbers (large futura) sit in the bottom outer corner of each spread, like real magazine folios. Progressive-disclosure between spreads: as a new spread enters the viewport, its grid columns fade in left-to-right with a 60ms stagger, followed by photographs and pull-quotes resolving last. The reveal feels like turning a page and watching the ink settle. A persistent thin amber rail runs along the top of the page (1.5px), with a small "STUDIO" wordmark at the left and a section-indicator at the right that updates as spreads scroll into view. ## Typography and Palette - **Display headlines:** "Jost" (Google Fonts), weight 600 — futura-geometric for feature openers at 76-104px, letter-spacing -0.01em. - **Sub-display / pull-quotes:** "Jost" (Google Fonts), weight 300 italic — at 28-36px for editorial pull-quotes, with a single 1.5px Amber accent rule above. - **Body:** "Source Serif 4" (Google Fonts), weight 400 — at 17px line-height 1.7 for two-column editorial essays. - **Caption / colophon:** "Jost" (Google Fonts), weight 400 — at 12px with 0.12em letter-spacing for photo captions and folios. - **Numerals / folios:** "Jost" (Google Fonts), weight 200 — at 88-120px for issue numbers and page folios. Palette — Warm sunlit studio: - `#FAF3E4` Studio Linen — base paper backdrop with a faint warm grain. - `#F0E5C8` Sun Vellum — secondary paper tone for sidebar columns and folio backgrounds. - `#E89E3A` Amber Broadcast — primary warm accent for rules, pull-quote stripes, and "live" indicators. - `#7C4017` Walnut Console — secondary deep warm for headlines and body text accents. - `#3D2914` Studio Ink — body text color, never pure black. - `#C25D2F` Persimmon Cue — micro-accent for a single "live now" indicator pulse. Warmth comes from the amber-walnut palette anchored by linen paper; no cool grays anywhere. The page reads as a sun-lit space at 10am. ## Imagery and Motifs - **Lens-flare photography**: each spread carries 1-2 hero photographs of studio objects (mixers, synthesizers, microphones, ribbon tape spools, lighting rigs). The photographs are warmly graded with a deliberate amber lens-flare bloom in the upper-right corner — soft, anamorphic, half-occluded. Flare is part of the image, not retouched out. - **Tech motifs**: subtle SVG tech glyphs — circuit traces, signal-flow arrows, mixer fader silhouettes, ribbon-spool circles — placed in the margins as editorial ornament. Drawn in 0.6px Walnut Console. - **Object showcase 3-up**: in the showcase template, three studio objects (synth, microphone, ribbon spool) are photographed against a single linen backdrop with consistent lighting; each captioned with a serial number and a one-line provenance note. - **Pull-quote ornament**: a small amber asterisk at the start of each pull-quote, hand-illustrated as a 6-point starburst SVG. - **Folio marks**: oversized issue numbers (76-120px Jost weight 200) at spread corners, sometimes overlapping image edges in a deliberate magazine-bleed gesture. ## Prompts for Implementation - Build magazine spreads using CSS Grid with `grid-template-columns: repeat(12, 1fr); column-gap: 32px`. Pre-define 6 spread templates as named grid-area maps. - Progressive-disclosure: each spread uses IntersectionObserver to trigger column-by-column reveal (column 1 → 12, 60ms stagger), with opacity 0 → 1 + translateY 12 → 0 per column. - Lens-flare overlay: each hero photo carries an absolutely positioned SVG flare element with `mix-blend-mode: screen` and a 60px Gaussian blur. The flare's center position is randomized per spread, anchored near the upper-right. - Persistent amber rail: a fixed-top 1.5px element with `background: linear-gradient(90deg, transparent, Amber 30%, Amber 70%, transparent)` and a small wordmark/section indicator inside. - Pull-quote rules: rendered as a single 1.5px Amber line above the quote text, with a 6-point asterisk SVG at its left. - Folio numerals: positioned absolutely at the outer-bottom corner of each spread; semi-transparent (0.42 alpha) so they bleed into the photo without dominating. - Bias toward editorial storytelling: each spread is a feature article about the studio. No CTAs, no pricing tables, no stat-grids — only features, interviews, photographs, and pull-quotes. - Cursor becomes a small amber "play head" cursor; on hover over a hero photograph, the cursor changes to a vinyl-record icon and the photo's lens-flare brightens by 0.3 alpha. - Reduced motion: drop column-stagger reveal, replace with simple opacity fade on the whole spread. ## Uniqueness Notes - Differentiator 1: magazine-spread layout structured as a literal Wallpaper-style editorial issue with templated spreads, folios, and column rules — not a "magazine-inspired" generic mood. - Differentiator 2: lens-flare photography used deliberately, with the flare preserved as part of the image — most corpus designs scrub these artifacts. - Differentiator 3: progressive-disclosure used as a left-to-right column reveal that simulates ink settling on a magazine page. - Differentiator 4: futura-geometric headlines paired with Source Serif 4 body — the editorial pairing of Vignelli and contemporary magazines. - Differentiator 5: warm palette anchored by amber/walnut/linen in a studio-broadcast context — optimistic-bright in a corpus dominated by mysterious-moody. - Chosen seed: aesthetic: editorial, layout: magazine-spread, typography: futura-geometric, palette: warm, patterns: progressive-disclosure, imagery: lens-flare, motifs: tech, tone: optimistic-bright. - Avoided patterns from frequency analysis: parallax (94% — replaced with column-stagger), card-grid (90% — replaced with magazine spreads), centered (94% — full 12-column grid), photography (90% — used purposefully with lens-flare emphasis), mono typography (81% — replaced with futura + serif), mysterious-moody (71% — replaced with optimistic-bright).