# Design Language for yami.cam ## Aesthetics and Tone yami.cam is a **nocturnal darkroom that photographs darkness itself** — not low-light scenes, but the actual substance of night: the grain inside a closed eyelid, the violet residue a streetlamp leaves on a wet road, the pressure of an unlit room against your skin. "Yami" (闇) is the Japanese word for darkness, gloom, the blind spot; ".cam" is the lens that points at it. So the site behaves like a cinema of negatives — a long, slow tracking shot through a developing tray where exposures of nothing surface one frame at a time and then sink back under the chemistry. The aesthetic is **cinematic noir crossed with grainy-textured photochemical decay** — two registers the frequency analysis confirms are nearly empty (cinematic at 4%, grainy-textured at 2%, sepia-nostalgic palette at 3%). It is *not* the usual "dark mode": no neon-on-black SaaS chrome, no cyberpunk circuit glow, no glassmorphic frost over a midnight gradient. Instead it is the texture of a 1970s arthouse 35mm print pushed three stops in the bath — silver halide clumping into visible noise, deep shadows that are warm rather than blue, a single bruised red safelight burning in the corner, edges that bloom and halate the way real film does when overexposed. The mood is patient, ceremonial, faintly devotional: every scroll-step is a frame being lifted from the fixer with tongs and held up to the safelight. Sound-design adjacent — you can almost hear the timer ticking and the soft slosh of trays. Nothing shouts. Nothing converts. The visitor is a darkroom apprentice, not a customer. ## Layout Motifs and Structure The page is one **immersive vertical scroll** (immersive-scroll sits at 16% — claimed but not crowded) structured as a strip of **nine exposures**, each a full-viewport "frame" stacked like cuts on a contact sheet read top to bottom. There is **no top navigation, no hamburger, no logo lockup, no footer block, no card-grid, no bento, no hero-with-CTA**. Navigation is a single vertical artifact down the right edge: a **sprocket-hole filmstrip rail** — nine perforations etched 14px in from the right margin, one perforation per exposure, the active one filled with safelight-red and emitting a faint 6px halation; on hover a thin frame number (`F.01` / `F.02` / …) develops 10px to the left of the perforation and fades out after 1.6s. The rail is the only chrome and it never grows, labels itself, or sprouts a menu. Within each exposure: - **The frame border.** Every exposure is matted inside an asymmetric black border that mimics a real 35mm negative carrier — 9% margin top, 4% bottom, 12% left, 6% right — so the "image" is never perfectly centered. The border carries faint edge-printed lab markings: `KODAK 5247` style codes, frame counters, a tiny rebate logo, all set at 5px in a translucent warm-grey, rotated 90°. - **The image well.** The interior is where the "photograph of darkness" lives — a near-black field (#0B0A09) carrying a single luminous gesture: a developing splotch, a halated highlight, a drifting grain cloud. Content (a line of text, a date, a fragment of caption) is set *over* the well in the lower-left third, the way a darkroom worker would scribble on the white border, never dead-center. - **The seam.** Between exposures there is no horizontal cut — instead a 2px **frame-line gap** (the unexposed strip between negatives), pure carbon black, with the sprocket perforations of the rail visibly stepping across it. Scrolling feels like a film advancing one frame: a 220ms ease where the outgoing frame darkens and the incoming one "exposes" up from black. - **The safelight.** A fixed, non-scrolling radial bloom of dim oxblood red anchored to the bottom-left corner of the viewport (320px radius, 22% peak opacity, screen blend mode), so the entire site reads as a room lit by one red bulb. It never moves; it is the room. ## Typography and Palette **Type system — Google Fonts only:** - **Display & exposure titles — `Fraunces` (variable, opsz 144, wght 300–500, SOFT 50).** Used for the wordmark "yami.cam" and the nine exposure titles. Set large (clamp 2.4rem → 5.5rem), low weight, optical size maxed so the serifs thin into hairlines that *halate* — i.e. each glyph gets a 0.5px white outer-glow blur so it reads like overexposed type printed onto film. Letter-spacing -0.01em. This is the "developed image" voice: elegant, slightly decayed, more cinema title-card than headline. - **Body & captions — `Spectral` (serif, weights 300/400, italic available).** A screen-tuned literary serif used for the short captions, dates, and the single paragraph of darkroom prose per exposure. Set at 1.05rem, line-height 1.7, color a dim warm bone. Italics used for the hand-scribbled-on-the-border feel. - **Lab markings & frame numbers — `IBM Plex Mono` (weights 300/400).** Confined entirely to the negative-carrier edge codes, the `F.01` rail numerals, and a ticking darkroom timer in the corner of exposure F.05. 5–9px, letter-spacing 0.18em, uppercase, low-opacity warm grey. This is the only mono on the page and it is deliberately marginalia, never UI. **Palette (warm-shadowed, photochemical — minimum the six below):** - `#0B0A09` — **fixer black**, the image-well field and frame-line gaps. Warm, not blue — coffee-grounds in the shadow. - `#1A1512` — **carrier brown**, the negative-carrier borders and matte. - `#7A1E1C` — **safelight oxblood**, the active rail perforation, the corner bloom, the single accent of warmth. - `#C9402F` — **stop-bath red**, used only at peak halation flares and on the timer's last 10 seconds. - `#D7C8A9` — **bone latent**, the developed-text colour, like image just rising in the tray. - `#8E8473` — **edge-print grey**, all the 5px lab markings and inactive rail numerals. - `#F2E9D4` — **highlight halation**, reserved for the brightest blown-out gestures inside an exposure (a window, a moon, a lamp), used sparingly with a glow. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration. Every visual is SVG + canvas + CSS, hand-built to imitate film chemistry.** The recurring grammar is **the photograph of an absence** — nine "exposures" of things that have no image: - **F.01 — Latent image.** An almost-empty well; a single faint oval of slightly-less-black (#161210) drifting and very slowly brightening over 14s, as if something is *about to* appear in the developer and never quite does. Title: "yami.cam". - **F.02 — The grain.** A full-well canvas-rendered silver-halide grain field: thousands of 1–2px clumped specks regenerating at 12fps, denser in shadow, sparser at one soft highlight — the texture of the inside of a closed eye. - **F.03 — Halation.** A single luminous point (the bone-white highlight) blooming outward with the characteristic red fringe of light bleeding through the film base — concentric SVG blur rings, breathing on a 6s loop. - **F.04 — Sprocket study.** The filmstrip rail "zoomed in" to fill the well — giant perforations marching, with dust motes and a single hair-scratch line (a 1px white squiggle that wobbles, the classic projector scratch) drawn with `path-draw-svg`. - **F.05 — The timer.** A skeuomorphic darkroom enlarger timer: a circular dial in carrier-brown, a red sweep hand counting down 60s in real time, ticking; when it hits zero a `ripple` flash of stop-bath red washes the frame and it resets. - **F.06 — Dust & scratches.** A near-clean well slowly accumulating dust specks and lint fibres (tiny bezier curls) that drift in on a faint air current, then a `fade-reveal` wipes them as if the worker blew across the negative. - **F.07 — Reciprocity failure.** Long-exposure star-trails of darkness — thin arcing strokes that *should* be light but are rendered in deeper-than-black, visible only by their warm edge-glow, sweeping in slow parallax. - **F.08 — The safelight.** The corner bloom brought to centre: a single oxblood radial that pulses with a heartbeat rhythm (72bpm), the only "portrait" the site offers — a portrait of the room's only light. - **F.09 — Fixed.** Everything goes still; the grain freezes, the timer stops, the rail's last perforation fills solid red. A single line of Spectral italic: the image is permanent now. Then a slow 4s fade to pure #0B0A09 — the print is dry, the session is over. **Persistent overlays across all exposures:** (1) a fixed full-page film-grain layer at ~7% opacity, screen blend, regenerating subtly; (2) faint horizontal "agitation" undulation — the whole page drifts ±1px vertically on a 9s sine, like a print rocking in a tray; (3) the edge-printed lab codes on every carrier border, each with a unique fake frame number. ## Prompts for Implementation - Build it as **one full-bleed vertical scroll of nine `100vh` "exposure" sections**, each matted inside an asymmetric black negative-carrier border (CSS, the 9/4/12/6% margins). No top nav, no footer, no hamburger. Wordmark "yami.cam" lives only inside F.01 as Fraunces display type with a hairline white halation glow. - **The safelight is a fixed pseudo-element**: a radial-gradient of `#7A1E1C` anchored bottom-left, `mix-blend-mode: screen`, ~22% peak opacity, 320px radius — present on every section, never scrolling. The whole site must feel lit by it. - **Film grain everywhere:** a fixed canvas (or repeating SVG `feTurbulence`) at ~7% opacity, `mix-blend-mode: screen`, re-seeded every ~80ms. Inside F.02, crank a dedicated grain canvas to full intensity at ~12fps with shadow-weighted density. - **Scroll behaviour = film advance:** snap-ish sections (`scroll-snap-type: y proximity`), and on each section change run a 220ms transition where the leaving frame multiplies toward black and the arriving frame "exposes up" from `#0B0A09` (opacity/brightness ramp). Add a 1px hair-scratch and dust drift that intensifies briefly during the advance. - **The rail:** nine SVG sprocket perforations down the right edge, fixed; `IntersectionObserver` lights the active one in `#7A1E1C` with a 6px `filter: drop-shadow` halation; on `:hover` a `IBM Plex Mono` `F.0n` numeral does an `underline-draw`-style fade-in to its left, auto-fading after ~1.6s. Clicking a perforation smooth-scrolls to that exposure. - **Animation vocabulary, all CSS/JS (no heavy libs):** `path-draw-svg` for the scratch line and dust curls; `ripple` for the timer's zero-flash; `fade-reveal` for the dust-wipe in F.06; gentle `parallax` for the reciprocity star-trails in F.07; a heartbeat `pulse` (72bpm, `cubic-bezier` double-beat) for the safelight portrait in F.08; the ±1px sine "agitation" drift on the whole `
`. Respect `prefers-reduced-motion` by freezing grain regeneration and the agitation, keeping only opacity fades. - **Type rules:** Fraunces for the nine exposure titles (low weight, opsz 144, hairline halation glow), Spectral for captions/prose set lower-left over the well (never centered), IBM Plex Mono only as 5–9px edge-print marginalia rotated 90° on the carrier borders plus the F.05 timer. Text colour `#D7C8A9`; blown highlights `#F2E9D4` with glow; reds only at flares. - **Strictly AVOID:** CTA buttons, pricing tables, stat-grids, feature card-grids, testimonial sliders, signup forms, cool-blue "dark mode" gradients, neon glow, glassmorphism, hero-with-headline-and-button. There is nothing to buy here — only a roll of darkness to develop, frame by frame. ## Uniqueness Notes Differentiators from other designs in the corpus: 1. **A photochemical-process metaphor instead of a UI.** The site is a literal darkroom develop-cycle (latent → grain → halation → timer → dust → fix → dry), not a page with sections. The frequency data shows 98% of sites use photography as imagery and 93% use card-grids — this site uses *zero* photography and *zero* cards; every "image" is a hand-built SVG/canvas simulation of film chemistry (grain clumps, halation fringe, projector scratches, dust fibres). 2. **Warm, safelight-lit darkness — not blue dark-mode.** Where dark sites default to midnight-blue + neon, this is coffee-black (#0B0A09) lit by one oxblood safelight bulb, sepia-adjacent and devotional. Cinematic (4%), grainy-textured (2%), and sepia-nostalgic (3%) are all near-empty in the corpus. 3. **The sprocket-hole filmstrip rail as sole navigation** — nine perforations, no menu, no logo cluster, no footer — plus an asymmetric *negative-carrier* matte (9/4/12/6%) so no frame is ever centered, and edge-printed fake lab codes rotated 90° on every border. Nothing else in the corpus navigates by perforations or mattes content like a negative. 4. **Scroll = film advance**, with a real-time ticking 60s enlarger timer (F.05), a ±1px tray-agitation sine drift on the whole page, and a 72bpm heartbeat pulse on the safelight — sound-design-adjacent motion that treats scrolling as a ceremony, not a journey. Chosen seed/style: **"surreal dreamscape promo"** — reinterpreted as a surreal *negative* dreamscape: photographs of darkness developing in a tray. (aesthetic: cinematic + grainy-textured; layout: immersive-scroll / minimal-navigation; typography: elegant-serif (Fraunces) + serif body (Spectral) + tech-mono marginalia; palette: sepia-nostalgic / deep-burgundy warm-shadow; patterns: path-draw-svg, ripple, fade-reveal, parallax, pulse-attention; imagery: grain-overlay / generative-art; motifs: candle-atmospheric (safelight) / particle-effects (grain & dust); tone: mysterious-moody / zen-contemplative.) Avoided overused patterns from frequency analysis: no hand-drawn (94%), no glassmorphism (85%), no card-grid (93%), no photography (98%), no cursor-follow (89%), no parallax-as-default — parallax used only once for star-trails; no warm-gradient-mesh; no dashboard/bento. Leans deliberately into the empty corners: cinematic, grainy-textured, sepia-nostalgic, immersive-scroll, candle-atmospheric.