# Idiot Box — Design System Lock View 01 (Home / What To Watch) is the locked design surface. The aesthetic, layout patterns, and color system established here are the source of truth for the rest of the prototype. ## The file `mockups/01-home.html` — View 01, Cinematic Utility. The earlier exploratory mockups and mockup-phase plan were removed once direction was picked. ## Locked decisions ### Aesthetic — Cinematic Utility - Flat obsidian background (`#131314`). No ambient body glow. No noise overlay. Tonal layering only. - Dark default, light mode supported (toggle persists in `localStorage`). - The Lineup (subscription manager, View 05 — formerly called "The Brain", renamed) uses the **same** Cinematic Utility palette as the rest of the app. It differentiates through layout and component vocabulary (ledger rows, monospace numerics, status pills), not through a separate skin. See "The Lineup treatment" section below. ### Typography - **Sora** — headlines, brand, tile titles. - **Inter** — body, nav. - **JetBrains Mono** — all utility data: counts, episode pills, dates, "X days left," "Lands · date," section meta strips. - Body 16px, section headers ~36px. Bigger than typical SaaS — the cinematic-utility tradeoff. ### Color **One-color accent system: peach `#FFB59A`.** It carries every accent role on the page — progress bar fills, EP pills, "X days left," "to catch up," brand mark, nav underline, lands-on dates. - The DESIGN.md tokens suggest a three-role system (peach / `#FF5C00` / `#FF5855`); the Stitch reference mock and the locked design use peach-only. Don't reintroduce saturated orange or red for emphasis. Quiet wins. - Red is held in reserve for The Lineup (Dump / Cancel actions in the subscription manager). Don't use it in Discovery. - Light-mode peach equivalent is `#c4581f` (a warmer terracotta — same role, adjusted for contrast). ### Layout - Top-to-bottom horizontal rails, no grids, no sidebar. - Each list (Family Movie Night, Sunday Watch, etc.) gets its own dedicated rail — never two lists side-by-side. - List/grid views are reserved for the per-list page and for mobile breakpoints. ### Two card shapes — used for distinct jobs - **16:9 backdrop** — Continue Watching only. Reads as "media you're consuming." 420px tile width. - Title + episode pill on top row (right-aligned). - Progress bar (peach fill, width = watched / total) + count `6 / 10` on bottom row. - Optional `Leaves X in N days` line below in peach mono caps. - **2:3 poster** — every other rail. Reads as "title you're choosing." 240px tile width; 200px on the smaller "Soon on Your Platforms" rail. - Title only by default. - Conditional sub-lines (peach mono caps): `X days left` (when leaving), `N episodes to catch up` (when behind on an in-progress show), `Lands Apr 22` (Soon rail only). - Service chip top-left, always (consistent across both shapes). ### Section headers - Plain title + count + right-side "View all →" link. No italic em flourishes. No secondary description line under the headline. - Example: `Continue Watching · 4 in progress · [All in progress →]`. ### Section order on home 1. Continue Watching (16:9) 2. Leaving Soon (2:3) 3. Wishlist · Just Landed (2:3) 4. For You (2:3) 5. *N* custom-list rails — one per list (Family Movie Night, Sunday Watch, etc.) 6. Soon on Your Platforms (2:3, smaller, dimmer) ### Progress framing — what the app knows The app only knows what the user marks as watched. It does NOT know intra-episode playback position. Continue Watching progress shows episode-count or films-in-series progress only. Bar width = watched / total, exactly. ### Posters and backdrops - 2:3 posters: TMDB `w600_and_h900_face` URLs, defined as CSS vars at `:root`. - 16:9 backdrops for Continue Watching: TMDB `w1280` URLs from the title's backdrops gallery (not the "Now Streaming on X" promo card — that's the gotcha). - Don't re-fetch existing hashes; reuse from the file. ### The Lineup treatment (View 05) The Lineup is the core value prop, not a side tool — it uses the same warm-obsidian palette and peach accent as every other view, so it feels like the same app doing a different job. Implemented in `mockups/05-lineup.html`. Differentiation comes from **layout and component vocabulary**, not color: - Ledger-style rows instead of poster rails. - JetBrains Mono for all numerics (prices, savings totals, episode counts). - Status pills with semantic color *inside* the existing system: green for Keep, peach for Subscribe (the positive accent action), amber for Downgrade, red for Dump. - Denser column structure than Discovery views; more whitespace between rows; clear hierarchy from monthly total → per-service decision → action link. - Red is reserved for Dump/Cancel actions only — the same containment rule used everywhere else in the app. ## What this design rejects - Streaming-service tropes: no full-screen hero, no dominant featured carousel, no "Because you watched X" rows. - Multi-block list grids on home (two lists side-by-side in a 2-col grid). - Italic decorative flourishes in section headers. - Always-present meta strips on 2:3 cards (`2024 · 166m · Must`). Meta is conditional only. - Saturated red or orange accents in Discovery — peach carries every role. - Glow halos, radial body gradients, grain noise overlays. ## Possible follow-ups when this becomes real code - **Tonight prioritization:** "Leaving Soon" currently shows the 4 most-urgent expiring items in date order. Real implementation should weight by priority tag (Must Watch vs. Nice) × days-remaining × episode-count-left vs. days-in-billing-cycle. - **"Coming Soon" data source:** Soon on Your Platforms uses fake dates. Real implementation needs an announced-release-date feed from JustWatch / Watchmode. - **Backdrop fetching:** four CW backdrops are hardcoded as CSS vars. Real implementation hits TMDB's `/tv/{id}/images` and `/movie/{id}/images` endpoints and pulls `backdrop_path` from the response (not the promo image on the public page). ## File map ``` idiot box/ ├── CLAUDE.md — project context (12 views, algorithms, build rules) ├── NEXT.md — locked design system spec (this file) ├── algo-recommendation-engine.md ├── algo-rotate-churn.md └── mockups/ ├── index.html — directory page, navigate all 12 views from here ├── 01-home.html — View 01 · What To Watch (locked design reference) ├── 02-lists.html — View 02 · Your Lists ├── 03-list.html — View 03 · Single List ├── 04-search.html — View 04 · Search & Explore ├── 05-lineup.html — View 05 · The Lineup (subscription optimizer, ledger layout) ├── 06-title.html — View 06 · Title Details ├── 07-profile.html — View 07 · Profile & Integrations ├── 08-social.html — View 08 · The Network ├── 09-onboarding.html — View 09 · Onboarding (3 steps) ├── 10-settings.html — View 10 · Settings & Watch History ├── 11-marketing.html — View 11 · Marketing landing ├── 12-auth.html — View 12 · Auth & Privacy ├── 13-inbox.html — View 13 · Notifications Inbox (reached via bell icon in top nav) ├── 14-service.html — View 14 · Service Detail (drilled in from The Lineup) ├── 15-calendar.html — View 15 · Calendar · Lands & Leaves (month grid) └── 16-universe.html — View 16 · Universe Detail (franchise timeline, drilled in from Search) ``` ### Bell icon in top nav Every in-app view's top nav should include a bell icon button between the status chip and the theme toggle, linking to `13-inbox.html`. Unread state shows a small peach dot in the top-right corner of the bell. The locked reference (`01-home.html`) demonstrates the placement and styling. Other view files in this prototype don't all include the bell, to keep the build minimal — in production it appears on every in-app surface. All view files are self-contained vanilla HTML/CSS/JS. CSS tokens are intentionally duplicated per file rather than shared — this prototype is a reference for a developer to rebuild from, not a codebase to fork. Cross-links between views are real `` navigation, plus a small click-delegate JS in each view that routes poster/tile clicks to `06-title.html`.