# Design Language for yome.cam ## Aesthetics and Tone yome.cam is not a product, a SaaS, or a portfolio. It is a **single perpetual camera feed** — a quiet, slightly haunted "domestic observatory" pointed at one ordinary room (a low table, a kettle going cold, a square of afternoon light migrating across tatami). The site presents itself as the operator console of that one camera: a piece of monitoring hardware that has been left running for years, its firmware unfussy, its chrome utilitarian, its only job to *witness*. The mood is **cool brutalist terminal meets contemplative slow-cinema** — the visual rigor and unglamorous honesty of CCTV / a 1980s broadcast monitoring rack, but turned toward stillness instead of security. Nothing here is selling. The interface is a frame, and the frame is part of the artwork: bezels, scanline grade, timecode burn-in, a battery glyph that never drains, a REC dot that pulses with the patience of something that has nothing to prove. Tone in copy: terse, lower-case, machine-laconic — `feed nominal`, `light: 14:07 — moving`, `nobody home / kettle warm` — the diary of an instrument, not a person. The emotional target is the feeling of watching a window you are not in the room with: tender, unhurried, faintly melancholy, oddly safe. "yome" is left deliberately ambiguous — a name written on a strip of label tape stuck to the housing, half peeled. ## Layout Motifs and Structure The page is a **fixed full-bleed monitor surface**, not a scrolling document. Think of a single CRT-ish panel that fills the viewport edge-to-edge with a **2px hairline inner bezel** and four corner registration brackets `⌐ ¬ L ⌐` etched in phosphor-grey. Inside that bezel the layout is a strict **terminal grid: a 12-column / 8-row matrix made visible** as faint 1px guide lines (the way a director's viewfinder shows thirds and safe-areas). The "live feed" — really an animated CSS/SVG scene of the room — occupies the central **8×5 cell block**, framed by an HUD margin: top-left = timecode `2026.05.11 14:07:33` ticking in real seconds; top-right = `● REC` and a five-bar signal meter that idly shuffles; bottom strip = a horizontal **status ticker** that types one short observation at a time and erases it; left rail = a vertical list of "channels" `CH1 table · CH2 window · CH3 kettle · CH4 doorway` where selecting one slowly pans/zooms the same room to that detail (no page change — a camera move). Navigation is **diegetic only**: there is no nav bar, no hamburger, no logo lockup, no footer, no menu — just the console's own controls (channel rail, a `[ HOLD ]` toggle that freezes the frame into a still photograph with a faint shutter flash, an `[ INFRARED ]` toggle that flips the whole scene to a green night-vision grade). Sub-views ("about this camera", "the room", "operator notes") appear as **on-screen-display overlays** that slide in from a screen edge like a TV settings menu, semi-opaque over the still-running feed, dismissed with `[ × ]` or Esc. The asymmetry is the HUD's: dense in the corners, empty in the middle, the way real monitoring overlays leave the picture clear. ## Typography and Palette **Type system — Google Fonts only:** - **Console / HUD / all interface text:** `JetBrains Mono` (weights 400, 500, 700). Every label, timecode, channel name, status line, and overlay heading is monospaced — this is an instrument, it speaks in fixed cells. Uppercase micro-labels at `letter-spacing: 0.14em`; body/diary text lower-case at `0.01em`; the timecode at 700 weight, tabular by nature so digits never jitter. - **The one human voice — "operator notes":** `Zilla Slab` (400 / 400-italic). Used *only* inside the "operator notes" overlay, as if a real person occasionally typed a paragraph into the maintenance log. A warm, slightly soft slab with friendly bracket-y serifs — the contrast of a handwritten margin in a technical manual. Nowhere else. - **Oversized moment-stamp:** at midnight and noon the timecode briefly swells to a `clamp(3rem, 9vw, 7rem)` `JetBrains Mono` 700 burn-in centered low in the frame, then shrinks back — the only "display type" on the site, and it's just a clock. **Palette — cool monochrome, high contrast, one ember:** - `#0B0D0C` — **vacuum black**: the bezel, the dead pixels at the very edge, deepest shadow in the room. - `#11211B` — **phosphor pine**: the base tint of the "off" interface and the night-vision flood. - `#1C2D27` — **monitor moss**: panel fills, the ticker bar, OSD overlay backgrounds (at ~90% opacity). - `#A8C3B6` — **screen-grey green**: 90% of the HUD text and guide lines — the resting color of phosphor that hasn't fully decayed. - `#E8F2EC` — **daylight white**: the migrating square of afternoon light in the scene; brightest highlights only. - `#5BE3A8` — **live-green**: the REC dot, active channel marker, signal-meter peaks — pure CRT phosphor, used sparingly. - `#E1652E` — **cooled-ember orange**: the single warm note — the glow of the kettle, the `[ HOLD ]` shutter flash, low-battery-style warnings. It is rationed: never more than one ember on screen at once. - Optional sepia "archive" mode swaps screen-grey-green for `#C9B79A` and tints everything `#1A140C` — for the "operator notes" history view, as if reading old printouts. ## Imagery and Motifs There is **no photography and no stock anything**. The "feed" is a hand-built, slowly-animated **flat-vector room** rendered in CSS gradients + inline SVG: a low table, a cushion, a paper-screen window, a kettle, a doorway — all drawn as simple shapes in 4–5 flat tints, the way a security-cam still degrades detail into planes of value. Across an in-page "day cycle" (a real 6–8 minute loop, or mapped to the visitor's actual local hour) the **square of window-light translates across the floor and walls and shifts hue** — pale lemon at "morning", flat white at "noon", long amber at "evening", then the room goes blue-dark and the **`[ INFRARED ]` grade auto-engages**: everything flattens to phosphor-pine with hot-white highlights, a grain overlay thickens, the kettle keeps its faint ember. Recurring motifs: **scanlines** (a 3px repeating-linear-gradient at ~6% opacity over the whole monitor) and an occasional 0.3s **horizontal hold-glitch** roll; **timecode burn-in** ghosted into the corner; **registration corner brackets**; a faint **vignette and barrel curve** at the screen edges (subtle `border-radius` + radial shadow) so it reads as glass; **dust motes** drifting in the light-shaft as 6–10 slow particles; a single **moth** that, once per long while, flutters across the lens and is gone (the only "event"); the **half-peeled label-tape** reading `yome` in the bottom-left bezel, its corner lifted with a tiny drop-shadow. Icons are all 1px-stroke monospace-grid glyphs: `●` rec, `▮▮▮▯▯` signal, a boxy battery, a `⏸`/`▶` hold, a sun/moon for the day toggle. ## Prompts for Implementation Build yome.cam as **one HTML page, one CSS file, one vanilla ES module** — no framework, no build step, no service worker, no analytics, no cookie banner. The viewport *is* the monitor; the page does not scroll (`overflow: hidden`), and every "screen" is an OSD overlay layered over a never-stopping feed. **Storytelling structure (the feed never pauses):** 1. **Cold start (first 1.2s):** black screen → a horizontal sync-roll wipes top to bottom → faint `JetBrains Mono` boot lines type and clear (`init optics… ok / link nominal / channel: 1`) → the room fades up under scanlines → `● REC` ignites in live-green and begins its slow ~2.4s pulse → timecode starts ticking real seconds. Respect `prefers-reduced-motion`: skip the roll and boot lines, fade straight to a steady frame, freeze the day-cycle at the visitor's local hour, and the moth never appears. 2. **Resting state:** the room breathes — light migrates, dust drifts, the kettle's ember dims and re-warms on a long cycle, the signal meter idly reshuffles, the bottom ticker types one observation, holds 6s, erases, waits, types the next (`14:07 — light moving · 14:31 — kettle cooling · 14:58 — nobody home · 15:20 — paper screen ticking in a draft`). All motion is **slow, eased, looping** — nothing demands attention. 3. **Channel rail (left):** `CH1 table / CH2 window / CH3 kettle / CH4 doorway`. Selecting one performs a **camera move on the same scene** — a 1.6s eased pan-and-scale (CSS `transform-origin` + `scale`) to that detail, the active label gets the live-green marker, the timecode keeps running. There is no separate page; you are always looking at this one room. 4. **`[ HOLD ]` toggle:** freezes the frame — a quick `#E8F2EC` flash at 0.12s opacity (shutter), the scanlines snap still, a thin white border draws around the frame, the timecode label changes to `HOLD 14:07:33`, and a tiny `[ release ]` appears. It's a held breath, not a screenshot download. 5. **`[ INFRARED ]` toggle:** crossfades the whole scene to night-vision (phosphor-pine flood, hot-white highlights, +grain, slight bloom on the ember) — also auto-engages when the day-cycle reaches "night". A small `IR` badge lights in the corner. 6. **OSD overlays (slide from a screen edge, ~88% opaque over the live feed, Esc/× to close):** - `about this camera` — a few terse `JetBrains Mono` lines on what yome.cam is: "a camera left on. one room. no recording is kept. you are the only one watching right now." - `the room` — a labelled diagram of the scene's objects, each with a one-line note in screen-grey-green. - `operator notes` — the **only `Zilla Slab` content**: 3–5 short dated journal-ish paragraphs, optionally rendered in the sepia "archive" grade, that read like a person's quiet log of tending this feed. 7. **Day & night markers:** at the visitor's local noon and midnight the timecode briefly swells to the oversized burn-in stamp described in Typography, then settles. **Interaction texture:** cursor over the monitor shows a thin **crosshair reticle** that lags ~80ms behind (a lazy, heavy gimbal) with tiny `+` corner ticks; hovering a control adds a 1px bracket frame and a faint `5BE3A8` underline that draws in; the channel rail items shift 4px right on hover with a stagger when the page first reveals them; a soft constant tape-hiss / room-tone audio loop is **off by default** with a `[ audio ◌ ]` toggle in the bezel. Everything else is the slow ambient life of the scene. **AVOID:** no hero with a headline-and-button, no pricing, no plans, no testimonials, no stat counters, no feature grid, no "trusted by" logos, no newsletter capture, no contact form, no FAQ accordion, no chat bubble, no carousel of unrelated images. The page sells nothing; it only keeps watch. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The interface is the artwork, and it's monitoring hardware, not a website.** The whole site is a diegetic CCTV/broadcast-monitor console — bezel, scanlines, timecode burn-in, channel rail, REC dot — pointed at *stillness* rather than security footage. The brutalist-terminal vocabulary is reframed as a contemplative slow-cinema window, which inverts both the usual "terminal = dev tool / hacker" cliché and the usual "webcam site = product". 2. **A non-scrolling, single-room, real-time-coupled experience.** No document flow, no `card-grid`, no sections — the viewport is a fixed frame and everything (channels, info screens) is an OSD overlay on a feed that never stops, with the day-cycle optionally mapped to the visitor's actual local clock. That rejects the `card-grid` (93%), `centered` (79%), `immersive-scroll`, and "scrolling narrative" conventions in one move. 3. **Cool monochrome phosphor palette with a single rationed ember.** Against the corpus where `warm` palettes hit 98% and `gradient` 92%, this is near-monochrome cool green-greys (`#A8C3B6`, `#11211B`, `#1C2D27`) with exactly one warm accent (`#E1652E`) allowed on screen at a time — restraint as the point, not decoration. 4. **No photography, no hand-drawn whimsy — a degraded flat-vector "security still" of a room.** Imagery is built entirely from CSS gradients + SVG planes that mimic how a low-res cam flattens a scene into value-blocks, sidestepping both the 97% `photography` convention and the 94% `hand-drawn` convention. 5. **One typeface (JetBrains Mono) governs everything, with `Zilla Slab` reserved for a single hidden "operator notes" overlay** — the contrast of a human margin-note inside a machine's manual, instead of the usual decorative serif/sans pairing. 6. **The only "event" in the entire site is a moth crossing the lens, once in a long while** — narrative minimalism taken to the point where waiting *is* the content. **Chosen seed / style:** `terminal command line dev` — reinterpreted away from "developer tooling" toward a **brutalist contemplative monitoring console** (aesthetic: brutalist + terminal + zen-contemplative; layout: hud-overlay / full-bleed / minimal-navigation; typography: tech-mono; palette: monochrome + high-contrast + cool-grays with one ember; imagery: noise-texture / grain-overlay / geometric-abstract; motifs: grid-lines / sci-fi-hud / candle-atmospheric (the ember); tone: mysterious-moody + zen-contemplative). **Avoided patterns from frequency analysis:** dodged `hand-drawn` (94%), `glassmorphism` (86%), `photography` (97%), `card-grid` (93%), `warm` palette (98%), `gradient` palette (92%), `centered` (79%), `cursor-follow` as a playful gimmick (89% — used here only as a heavy lagging reticle), and `pastoral-romantic`/`warm-inviting` tone — leaning instead into the underused `brutalist`, `terminal`, `zen`, `hud-overlay`, `monochrome`, and `mysterious-moody` territory.