# Design Language for tsundere.webcam ## Aesthetics and Tone A cinematic art-deco observatory — a deep-burgundy portfolio of fixed-frame nocturnes, each cell a still from an imaginary 1930s astronomy film, framed in gold-leaf art-deco brackets and accented with star-celestial motifs. The aesthetic merges 1930s Paramount studio publicity stills, the gold-foil chevrons of New York's Chrysler Building elevators, the deep-burgundy nocturnal palette of Caravaggio's late paintings, and the watercolor nebulae of E. L. Trouvelot's 1881 "Astronomical Drawings." Scholarly-intellectual in tone: a film-archive curator narrates, with the precise vocabulary of an astronomer and the reverence of a film historian. The voice is studious and reverent. "Frame 14 was captured at 02:48 local time; the constellation Lyra grazes the upper-right. Note the silver halation around the lens — this is an artifact of the era, preserved." Long, attentive sentences with proper-noun precision. ## Layout Motifs and Structure Portfolio-grid layout: a 4-column grid of cinematic "frame" cells, each cell sized 320×420 (3:4 portrait orientation, like a film still). Cells are framed in art-deco gold brackets — angular chevron corners, fluted vertical lines, and a small gold-leaf badge at the top-center carrying the frame number ("FRAME 014"). Grid structure: - 4 columns desktop, 2 columns tablet, 1 column mobile. - Each row contains 4 frames at varying vertical offset (top of each cell aligned to one of 3 baselines: 0, 32px, 64px) — gives the grid a subtle staircase rhythm. - Slide-reveal pattern: as the grid enters viewport, each frame slides in from a deep distance (start: translateY(80px) scale(0.92) opacity(0); end: translateY(0) scale(1) opacity(1)), with a 90ms stagger per frame and 1.05x scale overshoot. Above the grid: a single oversized art-deco title-card with hand-drawn deco ornament and a "Reel 02 · Nocturnes" subtitle in Playfair italic. Below the grid: a small "next reel" navigation in a brass-plate styled element. A persistent thin gold rail runs along the top of the page (1.5px), with a small reel-counter at the right that updates as new reels scroll into view. ## Typography and Palette - **Display headlines:** "Playfair Display" (Google Fonts), weight 800 — playfair-elegant for reel titles at 76-104px, italic where appropriate, letter-spacing -0.01em. - **Sub-display:** "Cormorant Garamond" (Google Fonts), weight 500 italic — at 24-32px for reel subtitles and frame captions. - **Body:** "Cormorant Garamond" (Google Fonts), weight 400 — at 17px line-height 1.7 for curator narrative copy. - **Art-deco accents:** "Limelight" (Google Fonts), weight 400 — art-deco-display for reel-section banners, ALL CAPS, 32-44px. - **Frame codes / brass labels:** "Cinzel" (Google Fonts), weight 400 — at 12px for engraved-brass frame numbers. Palette — Deep-burgundy nocturnal cinema: - `#1A0612` Velvet Void — deepest background for between-frame spaces. - `#2E0B14` Aged Burgundy — primary deep wine color for cell interior backings. - `#5C1A24` Reel Crimson — secondary burgundy for cell borders and reel-banner backings. - `#C8A36A` Gold Leaf — primary metallic accent for art-deco brackets and brass labels. - `#F0E0BC` Vellum Cream — pale paper-aged for caption text and reel-banner type. - `#2BAEC4` Astral Cyan — micro-accent for one star-celestial motif per reel. Burgundy depth: every cell uses a 2-stop radial gradient (Aged Burgundy → Velvet Void at the corners) to give it a vignette feel; gold-leaf brackets always sit on this depth. ## Imagery and Motifs - **Watercolor imagery**: each frame contains a watercolor nocturne scene — silvery nebulae, brass-edged telescopes, a moonlit cliff, a 1930s-style astronomer silhouette, a star cluster, a comet trail. Painted in Astral Cyan + Vellum Cream + Reel Crimson watercolor washes at 0.4-0.7 alpha. - **Star-celestial motifs**: each frame carries a small constellation diagram in 0.6px Gold Leaf, drawn with hairline lines and tiny circular star nodes. Constellation names are labeled in Cinzel italic (e.g., "LYRA"). - **Art-deco brackets**: corner brackets on every frame are 1.5px Gold Leaf chevrons with vertical fluted lines and small starburst ornaments at the inner angles. Brackets pulse on hover (stroke-width 1.5 → 2.0 over 280ms). - **Reel-banner ornaments**: between reel sections, a hand-drawn art-deco banner in Gold Leaf with chevron flourishes, fluted columns, and central laurel. Each banner is unique to its reel. - **Silver halation glow**: each watercolor frame has a subtle silver halation around its brightest watercolor stops, simulating early-film over-exposure. ## Prompts for Implementation - Portfolio grid: CSS Grid `grid-template-columns: repeat(4, 1fr); gap: 24px`. Each frame is `
` with `aspect-ratio: 3 / 4`. - Slide-reveal pattern: each frame uses IntersectionObserver + CSS transition. On enter, transition `transform` and `opacity` over 640ms cubic-bezier(.2,.7,.2,1), with a stagger delay computed by `data-frame-index * 90ms`. Brief 1.05 scale overshoot before settling at 1.00. - Art-deco brackets: pre-built SVG components placed absolutely at the four corners of each frame. Brackets share a master Gold Leaf gradient (linearGradient with 3 stops: dark gold → bright gold → dark gold) for a foiled finish. - Watercolor nocturnes: each frame's central image is an inline SVG watercolor (40-180KB), with feTurbulence + multiple radial gradients to simulate watercolor washes. A `feGaussianBlur` filter at stdDeviation 1.0 softens the wash edges. - Star-celestial overlay: SVG `` element placed over the watercolor; tiny `` star-nodes with `` connectors. Constellation lines have stroke-dasharray animation that draws on viewport-entry (1.4s). - Silver halation: a separate radial-gradient `
` over each frame's brightest watercolor stop, with `mix-blend-mode: screen` at 0.3 alpha. - Bias toward scholarly narrative: each frame has a 2-3 sentence caption from the curator describing the frame's content, time of capture, and historical note. No CTAs, no pricing, no stat-grids — only frames, captions, and constellation diagrams. - Cursor becomes a Gold Leaf astrolabe pointer; on hover over a frame, the art-deco brackets pulse and the silver halation brightens by 0.15 alpha; the constellation diagram lifts forward. - Reduced motion: disable slide-reveal scale overshoot; replace with simple opacity fade; freeze halation pulse. ## Uniqueness Notes - Differentiator 1: portfolio-grid framed as a 1930s film-archive reel with art-deco brackets, frame numbers, and reel banners — cinema-as-portfolio metaphor. - Differentiator 2: art-deco-display typography (Limelight) paired with Playfair Display + Cormorant Garamond — a thoroughly art-deco editorial register. - Differentiator 3: watercolor nocturnes (silvery, Astral Cyan) as cell content, treated as actual film stills rather than illustrations. - Differentiator 4: star-celestial motifs as constellation overlays on each frame — a diegetic layer of astronomy on top of the cinema. - Differentiator 5: slide-reveal pattern with 1.05x scale overshoot, staggered by frame-index, simulating reels being threaded onto a projector. - Chosen seed: aesthetic: cinematic, layout: portfolio-grid, typography: art-deco-display, palette: deep-burgundy, patterns: slide-reveal, imagery: watercolor, motifs: star-celestial, tone: scholarly-intellectual. - Avoided patterns from frequency analysis: parallax (94% — replaced with slide-reveal), card-grid (90% used here as portfolio-grid but with strong art-deco specificity), centered (94% — staircase-offset grid), photography (90% — replaced with watercolor nocturnes), mono typography (81% — replaced with Playfair + Cormorant + Limelight + Cinzel), mysterious-moody (71% — replaced with scholarly-intellectual).