# Design Language for tsundere.cam ## Aesthetics and Tone tsundere.cam is the personal field-journal of an opinionated, slightly mean-spirited film-camera collector who runs an annotated archive of vintage Japanese rangefinders and SLRs from 1962-1984 (Nikon F2, Olympus Pen FT, Canon Demi, Mamiya C330). The site is structured as a single, slow vertical scroll through curated camera bodies, each photographed as a **3d-render** sitting on a sun-bleached paper backdrop, then narrated in the voice of someone who clearly loves these objects but refuses to admit it -- the **bold-confident** tone is deliberately tsundere: copy reads like "this lens is fine. it's not impressive. don't expect anything special." while the typography, framing, and obsessive technical detail betray genuine devotion. The visual mood is **japanese-minimal** restraint -- generous **ma** (negative space), one camera per viewport, no sidebar clutter -- collided with **sepia-nostalgic** warmth: the page background is the exact off-cream of a 1978 Asahi Pentax instruction manual, and accent tones are pulled from oxidized brass dials, faded shutter-speed dials, and the burned-orange of expired Kodachrome stock. The whole experience feels like reading a privately-printed enthusiast zine from a Tokyo camera shop in Jimbocho, except the cameras are full-resolution 3D renders that rotate softly when hovered. Inspiration anchors: Daido Moriyama's gritty grayscale contact sheets, the cover design of Nippon Camera magazine c. 1973, the unboxing-as-religion typography of LightPhase brand booklets, the slightly hostile copywriting of Akira Kurosawa's letters to producers. ## Layout Motifs and Structure **Stacked-sections** as a vertical "contact sheet of devices": the page is one long column of full-viewport `100vh` panels, each devoted to a single camera or a single opinion-essay, separated by hairline `1px` rules in `#3a2a1a` that span only 60% of the viewport width and align flush-left to a fixed 4-column baseline grid. There is no horizontal navigation -- only a thin fixed left rail showing the current section number ("03 / 11") in mono caps, and a vertical progress bar made of 11 small empty squares that fill with sepia ink as the reader passes each section. The grid is 4 columns at desktop (`gap: 2.5rem`), but content respects an aggressive **ma** principle: most panels use only columns 2-3, leaving columns 1 and 4 as breathing space marked by single-character glyphs (a tiny `+` registration mark, a section number `02`, a roman numeral `IV`). Panels alternate between two layout templates -- (a) "Field Card": a centered 3d-rendered camera body floating in the upper 60vh, technical specs typeset as a 6-row mono table below, captioned with a single italic line of dismissive commentary; (b) "Margin Note": a single oversized lead sentence at `clamp(2.4rem, 5vw, 4.5rem)` set flush-left in the middle two columns, with a soft sepia-toned vignette behind it. Inter-section transitions use a subtle **blur-focus** shift: as a section enters the viewport, it begins at `filter: blur(8px)` and resolves to `blur(0)` over 600ms once it crosses 30% intersection -- the metaphor is a manual-focus rangefinder coming into alignment. Panels exiting the viewport blur out symmetrically. The footer is a 100vh "darkroom" panel: pure `#1a1208` with a single small camera silhouette and the printed line "shot, developed, printed by hand. ⌘ 1972-2026." typed character-by-character on entry. ## Typography and Palette **Fonts (all Google Fonts):** - **Display (camera names + opinion leads):** "JetBrains Mono" -- weight 800, letter-spacing `-0.02em`, used at `clamp(2.6rem, 6.4vw, 5.8rem)` for camera names like "OLYMPUS PEN FT" and bold-confident statements. The chunky, almost rectangular glyphs read like the engraved serial-number plates on the cameras themselves. Mono at display weight is rare and gives the **bold-confident** voice physical weight. - **Spec tables + technical body:** "JetBrains Mono" weight 400 at `0.9rem/1.55`, used for shutter-speed grids, focal-length tables, year-of-manufacture stamps. The fixed-width feels like a service-manual photocopy. - **Italic commentary + dismissive captions:** "IBM Plex Mono" italic, weight 400, used for the tsundere voice-over captions ("don't get attached to it.", "fine. it's fine.", "ugly little thing. perfect."). The italic mono is set tight at `0.95rem` with extra leading `1.7` so each line breathes alone. - **Section numbers + registration marks:** "Space Mono" weight 700 at `0.75rem`, all-caps with `letter-spacing: 0.18em`, locked to the left rail. **Palette (8 colors, sepia-nostalgic):** - `#f1e7d2` — manual-paper cream (page background, the warmth of 1978 Japanese instruction-booklet stock) - `#e3d4b1` — aged-margin tan (panel backdrops, secondary surfaces) - `#3a2a1a` — printed-ink umber (primary body text, hairlines, registration marks) - `#8b5a2b` — oxidized brass (camera body highlights in 3D renders, italic accent) - `#c47a2c` — expired-kodachrome orange (display accent, link underlines, focus rings) - `#5a3d24` — leather-strap brown (deep accents, blur-focus shadows) - `#1a1208` — darkroom black (footer panel, deep blacks in 3D shadow casting) - `#a98760` — silver-gelatin warm gray (mid-tones in render lighting, separators) All gradients are restricted to a single 12% sepia overlay on rendered images -- no rainbow or chromatic gradients anywhere. Whites are forbidden; the lightest tone allowed is `#f1e7d2`. ## Imagery and Motifs **3d-render camera bodies as the central object**: every section centers on a high-fidelity 3D render (Three.js + glTF, or pre-rendered turntable PNG sequences) of a specific vintage Japanese camera -- the renders are deliberately styled with a soft directional studio light (warm 3200K), 3-point lighting weighted heavily to the right, and a subtle ground-contact shadow blob. Materials emphasize matte black leatherette wraps, brushed aluminum top plates, oxidized brass dials, and engraved serial numbers (real ones: "F2 7424891", "PEN FT 312045"). Hover triggers a slow 8-second turntable rotation; scroll-stop snaps it to the next 45° angle. Renders are rendered at 2x DPR, then have a `mix-blend-mode: multiply` sepia layer at `opacity: 0.18` applied so they sit inside the page color story. **Retro-patterns as background scaffolding**: behind each panel sits one of three subtle repeating motifs from 1970s Japanese print culture, all rendered at very low contrast (`opacity: 0.06`) -- (1) the Asahi Pentax registration crosshair pattern, (2) the dotted-grid spacing system from Nippon Camera magazine layouts, (3) a halftone moiré evocative of newsprint reproduction. These patterns never compete with the camera renders; they live behind the type, registering only when the reader pauses. **Blur-focus as narrative mechanic**: every interactive element uses focus shifting as its primary feedback -- not color hover or scale-up. Hovering a camera name triggers the surrounding text to drop to `blur(2px)` while the name sharpens to `blur(0)` -- isolating the subject the way a wide-aperture lens would. Clicking a spec value rack-focuses the entire panel: the clicked value sharpens, everything else softens to `blur(4px)` for 1.2 seconds before snapping back. This single mechanic -- focus and rack-focus -- replaces every other "active" UI cue. **Motif details**: hairline `+` registration marks at panel corners (the printer's marks from offset litho), small italic year stamps in the lower-left of each render ("1973"), and a single recurring symbol — `⌘` (the command/clover mark) — used as a paragraph terminator in the running text, a callback to traditional Japanese chapter glyphs. No icons, no SVG illustrations beyond these glyphs and the registration marks. No photographs of people. No corporate logos. ## Prompts for Implementation - Build the entire experience as a **single full-screen vertical narrative** of 11 stacked `100vh` sections. Use `scroll-snap-type: y proximity` on the root with `scroll-snap-align: start` on each section -- proximity (not mandatory) so the reader can rest between snaps. Disable horizontal scroll entirely. - The hero section opens on `#f1e7d2` cream paper with a single 3d-rendered Olympus Pen FT floating dead-center, slowly turntable-rotating at 0.05rad/sec. The site title "tsundere.cam" is set in JetBrains Mono 800 weight at `clamp(3rem, 7vw, 6rem)`, lowercase, locked to the upper-left margin (column 2, row 2 of the baseline grid). Below it, a single italic line in IBM Plex Mono italic: "don't expect anything from this site. it's just cameras." Beneath that, a small `01 / 11` section indicator. The whole hero animates in with a 1.6-second blur-focus resolve from `blur(12px)` to `blur(0)`. - **Layout**: Use CSS grid with `grid-template-columns: [margin-l] 1fr [content-l] 4fr [gutter] 4fr [content-r] 1fr [margin-r]` and `column-gap: 2.5rem`. Force most content into the two center tracks. Reserve margins for section numbers, registration marks, and breathing room. Use `padding-block: 12vh` on each section. - **Camera renders**: implement as Three.js scenes with simplified low-poly glTF camera bodies (or pre-render turntable sprites of 24 frames each as fallback). Apply a CSS `mix-blend-mode: multiply` warm-tone overlay on the render canvas. Hover should trigger a `requestAnimationFrame` rotation loop; scroll-out should pause the loop. Use `OrbitControls` disabled — autorotate only, no user-driven camera. - **Blur-focus mechanic**: implement via a CSS custom property `--focus-target` that toggles between elements. Default state: `body { --focus: 1; }`. On hover/focus of a target, set sibling elements to `filter: blur(calc((1 - var(--focus)) * 4px))` with a 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) transition. The rack-focus effect on click uses a brief 1.2-second window with stronger blur (8px) before resolving back. Honor `prefers-reduced-motion` by collapsing all blur transitions to instantaneous swaps. - **Inter-section blur transitions**: use IntersectionObserver with `threshold: [0.1, 0.3, 0.6, 0.9]`. As a section's intersection ratio crosses 0.3, lerp its `filter: blur()` from 8px to 0px and `opacity` from 0.4 to 1. As it falls below 0.3 on exit, reverse the curve. Stagger inner elements (heading first, body second, render third) at 80ms intervals. - **Tsundere voice-over copy**: write 11 sections of dismissive-but-devoted commentary. Examples for inspiration: "the F2 is heavy. obviously. that's the point. don't complain.", "this lens has fungus. it's fine. you can still see through it.", "kodachrome is dead. get over it. shoot ektar.", "you don't need a light meter. learn to read shadows.", "stop asking about my favorite camera. they're all my favorite. don't make this weird." Voice must read as bold-confident bordering on rude, while the obsessive technical detail underneath betrays genuine love. - **Spec tables**: render as 6-row mono tables with `border-collapse: collapse`, hairline rules in `#a98760` at 0.5px, all-caps labels in left column ("SHUTTER", "MOUNT", "WEIGHT", "YEAR", "FILM", "METER"), values right-aligned in `#3a2a1a`. No headers, no zebra striping. Column 1 is `120px` fixed width; column 2 fills remaining. - **Section numbers + progress**: fixed left rail at `position: fixed; left: 2vw; top: 50vh;` containing a vertical stack of 11 `8x8px` empty squares. The current section's square fills with `#c47a2c`; passed sections fill with `#8b5a2b`. Above the squares, the current section number is shown as `04 / 11` in Space Mono 700, `0.75rem`, all-caps. - **Footer/darkroom panel**: full `100vh` of `#1a1208` (darkroom black), with a single 24x24px rendered camera silhouette dead-center, then a slowly typed line in `#a98760` IBM Plex Mono italic: "shot, developed, printed by hand. ⌘ 1972-2026." Type-on animation runs at 50ms per character, only when the panel enters viewport. - **Bias toward immersive narrative**: the entire site should feel like reading a hostile-but-loving zine printed in a basement letterpress shop. No CTA buttons, no "learn more", no pricing tiers, no signup forms, no testimonial blocks. The only "interaction" is hover-to-focus on cameras and click-to-rack-focus on spec values. The site has no goal beyond: look at these cameras. read these grumpy notes. leave. - **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, hero-with-form patterns, three-up feature cards, photography-as-imagery (use 3D renders only), gradient meshes, neon accents, glassmorphism, dark-mode toggles, any color outside the 8-color sepia palette, any non-mono font, any rounded corners larger than 2px, any drop shadows other than the contact-shadow under camera renders. ## Uniqueness Notes **3+ differentiators from other designs in the corpus:** 1. **Tsundere voice-over as primary copy**: the entire body text is written in a bold-confident, deliberately dismissive register that contradicts the loving level of detail beneath it. No other site in the 736-design corpus uses this kind of sustained character-voice copy (corpus average is professional or mysterious-moody); the tone is inseparable from the .cam domain pun. 2. **Blur-focus as the only interaction primitive**: instead of color hover, scale, underline, or border animations, every UI cue is a rack-focus shift driven by a CSS blur custom property. This treats the page as a physical optical instrument. blur-focus appears in only 1% of designs, and none use it as the *exclusive* interaction grammar. 3. **3d-rendered vintage Japanese cameras as the only imagery**: zero photography, zero illustration, zero icons -- just turntable renders of specific 1962-1984 rangefinders/SLRs. 3d-render imagery is at 0% in the corpus; combined with the camera-archive subject matter, this is fully unique. 4. **Stacked-sections respecting Japanese ma**: while stacked-sections is at 11% in the corpus, almost all such designs fill their sections edge-to-edge. This design uses an aggressive 4-column ma-grid where most content lives in only 2 of 4 columns, with the remaining columns reserved for registration marks, section numbers, and breathing space -- a layout intent borrowed from Japanese book typography. 5. **Sepia-nostalgic restricted palette with mono display type**: the typography stack is 100% mono (JetBrains Mono / IBM Plex Mono / Space Mono), but used in an editorial-zine register rather than a developer-tool register. Combined with the 1978-paper-cream sepia palette, this is a register the corpus rarely visits (sepia-nostalgic is at 2%, and almost always paired with serif rather than mono). **Chosen seed (from assignment):** aesthetic: japanese-minimal, layout: stacked-sections, typography: mono, palette: sepia-nostalgic, patterns: blur-focus, imagery: 3d-render, motifs: retro-patterns, tone: bold-confident. **Reference avoided patterns from frequency analysis:** - Avoided **photography** (82% — overused) — replaced entirely with 3d-render (0%). - Avoided **gradient palette** (60% — overused) — restricted to a flat 8-color sepia stack. - Avoided **warm palette** as a hero gesture — used only as understated paper-cream backdrop, not as gradient accent. - Avoided **mysterious-moody tone** (26% — most-used tone) — committed to bold-confident (11%) bordering on tsundere-rude. - Avoided **single-column** (22%) and **sidebar** (21%) layouts — used stacked-sections (11%) with a fixed-thin rail rather than a content sidebar. - Avoided **scale-hover, pulse-attention, bounce-enter** patterns — used blur-focus (1%) exclusively. - Avoided **humanist** typography (22%) — committed to mono (79% but used in editorial register, not dev-tool register). - Promoted underused **retro-patterns motif** (0%) and **3d-render imagery** (0%) as defining elements.