zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/netflix/DESIGN.md

@@ -1,572 +0,0 @@
----
-id: netflix
-name: Netflix
-country: US
-category: consumer-tech
-homepage: "https://www.netflix.com"
-primary_color: "#E50914"
-logo:
-  type: simpleicons
-  slug: "netflix"
-verified: "2026-06-06"
-added: "2026-06-06"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#E50914"
-    primary-hover: "#B20710"
-    brand: "#E50914"
-    canvas: "#141414"
-    foreground: "#FFFFFF"
-    muted: "#B3B3B3"
-    on-primary: "#FFFFFF"
-    surface: "#181818"
-    hairline: "#404040"
-    body: "#B3B3B3"
-    error: "#E87C03"
-    success: "#2A9D3C"
-    accent-match: "#46D369"
-  typography:
-    family: { sans: "Netflix Sans", mono: "Courier New" }
-    billboard-title: { size: 56, weight: 700, lineHeight: 1.1, tracking: -0.01, use: "Hero artwork title" }
-    display:         { size: 40, weight: 700, lineHeight: 1.15, tracking: -0.01, use: "Marketing hero, sign-up headline" }
-    heading-lg:      { size: 32, weight: 700, lineHeight: 1.2, use: "Modal title, detail-page show name" }
-    heading:         { size: 24, weight: 700, lineHeight: 1.25, use: "Section / category headers" }
-    row-title:       { size: 20, weight: 700, lineHeight: 1.3, use: "Row headers like Trending Now" }
-    subtitle:        { size: 18, weight: 500, lineHeight: 1.4, use: "Card title in expanded preview" }
-    body-lg:         { size: 16, weight: 400, lineHeight: 1.5, use: "Synopsis, descriptions" }
-    body:            { size: 14, weight: 400, lineHeight: 1.5, use: "Standard metadata, list rows" }
-    caption:         { size: 13, weight: 400, lineHeight: 1.4, use: "Match %, maturity rating, runtime" }
-    micro:           { size: 12, weight: 400, lineHeight: 1.4, tracking: 0.02, use: "Legal, fine print, footer links" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 60 }
-  rounded: { sm: 2, md: 4, lg: 6, full: 9999 }
-  shadow:
-    hover: "0 12px 24px rgba(0,0,0,0.8)"
-    floating: "0 6px 16px rgba(0,0,0,0.7)"
-    modal: "0 8px 32px rgba(0,0,0,0.9)"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#FFFFFF", fg: "#000000", radius: "4px", padding: "8px 24px", font: "16px / 700", states: "hover rgba(255,255,255,0.75)", use: "Play action on billboard / detail / continue-watching" }
-    button-cta: { type: button, bg: "#E50914", fg: "#FFFFFF", radius: "4px", padding: "16px 28px", font: "18px / 700", states: "hover #B20710", use: "Marketing acquisition CTA (Get Started, Finish Sign-Up)" }
-    button-secondary: { type: button, bg: "rgba(109,109,110,0.7)", fg: "#FFFFFF", radius: "4px", padding: "8px 24px", font: "16px / 700", states: "hover rgba(109,109,110,0.4)", use: "More Info beside Play" }
-    button-circle: { type: button, bg: "rgba(42,42,42,0.6)", fg: "#FFFFFF", border: "2px solid rgba(255,255,255,0.5)", radius: "9999px", height: "40px", states: "hover border #FFFFFF", use: "Add-to-list, Like, expand on hover cards" }
-    input-auth: { type: input, bg: "#161616", fg: "#FFFFFF", border: "1px solid #808080", radius: "4px", padding: "16px", font: "16px / 400", focus: "border #FFFFFF", states: "error border-bottom 2px #E87C03", use: "Email/password on sign-in" }
-    input-search: { type: input, bg: "rgba(0,0,0,0.75)", fg: "#FFFFFF", border: "1px solid #FFFFFF", radius: "4px", padding: "7px 12px", font: "14px / 400", use: "Top-nav search, expands from icon" }
-    card-tile: { type: card, bg: "#181818", radius: "4px", shadow: "none", use: "Resting poster tile in a scrolling row" }
-    card-hover: { type: card, bg: "#181818", radius: "6px", shadow: "0 12px 24px rgba(0,0,0,0.8)", states: "transform scale(1.5)", use: "Expanded preview card lifting above row" }
-    badge-new: { type: badge, bg: "transparent", fg: "#E50914", font: "12px / 700", use: "NEW EPISODE / RECENTLY ADDED overlay, uppercase" }
-    badge-top10: { type: badge, bg: "#E50914", fg: "#FFFFFF", font: "9px / 700", use: "Top 10 trending-rank ribbon" }
-    badge-maturity: { type: badge, bg: "rgba(51,51,51,0.6)", fg: "#FFFFFF", border: "1px solid #666666", radius: "2px", padding: "2px 6px", font: "13px / 400", use: "Maturity rating on detail pages / previews" }
-    tab-nav: { type: tab, fg: "#E5E5E5", font: "14px / 400", active: "color #FFFFFF weight 700", states: "hover #B3B3B3", use: "Top nav links" }
-    toast-banner: { type: toast, bg: "#E87C03", fg: "#FFFFFF", padding: "12px 16px", font: "14px / 500", use: "Account / payment full-width top banner" }
-    dialog-modal: { type: dialog, bg: "#181818", fg: "#FFFFFF", radius: "6px", padding: "0 / 24px body", shadow: "0 8px 32px rgba(0,0,0,0.9)", use: "Title-detail modal, account-action confirm" }
-    toggle-default: { type: toggle, bg: "#737373", radius: "9999px", states: "on track #E50914, thumb #FFFFFF", use: "Autoplay previews, subtitle, profile-lock switches" }
----
-
-# Design System Inspiration of Netflix
-
-## 1. Visual Theme & Atmosphere
-
-Netflix is the streaming interface that taught the world what "lean-back" entertainment software should feel like — a dark, cinematic theater where the content is the only thing that glows. The product opens on near-black (`#141414`) and stays there. There is no white-canvas mode, no light theme in the consumer app; the darkness is not a setting, it is the brand. Against that black, full-bleed artwork — show posters, hero billboards, character key-art — supplies all the color the screen needs. The UI itself recedes to white text, grey metadata, and one searing red accent: **Netflix Red `#E50914`**, reserved almost exclusively for the logo, the primary CTA, and progress fills.
-
-The custom **Netflix Sans** typeface (designed with foundry Dalton Maag, shipped 2018, replacing Gotham) is the quiet workhorse. It is a geometric, confident, faintly condensed grotesque tuned for screen rendering at TV viewing distance and mobile arm's-length alike. It carries the same optical voice from the wordmark down to the 12px caption, which is the point: one family, top to bottom, so the chrome feels like a single continuous surface and never competes with the artwork.
-
-What defines Netflix visually is the **theater principle**: dim the room, light the screen. Chrome is intentionally low-contrast (grey-on-black) so that when artwork appears it reads as luminous. Rows of posters scroll horizontally; the page is a grid of doors into content, each door a 16:9 or 2:3 image with a hover-expand that pops a preview. The interface is less a set of widgets and more a dark frame around moving pictures.
-
-**Key Characteristics:**
-- Netflix Red (`#E50914`) used sparingly — logo, primary CTA, progress bars, never as a background wash
-- Near-black canvas (`#141414`) as the permanent, theme-less ground
-- Netflix Sans (Dalton Maag, 2018) — one geometric family across the entire UI
-- Full-bleed artwork supplies color; chrome stays grey-on-black to let posters glow
-- Horizontal poster rows ("sliders") as the primary navigation metaphor
-- Hover-to-expand cards that scale up and reveal preview controls
-- Top nav fades from transparent over the hero billboard to solid black on scroll
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Netflix Red** (`#E50914`): The brand red (Pantone 1795 C, RGB 229·9·20). Primary CTA fill, logo, progress-bar fill, active selection underline. Energetic, digital, legible on black and white. Used as accent, never as a large fill area.
-- **Dark Red** (`#B20710`): Hover/pressed state for the red CTA; secondary brand red in marketing gradients.
-- **Pure Black** (`#000000`): Player background, modal scrims, the deepest layer. Body of the video surface.
-- **Near Black** (`#141414`): The app canvas — the default page and row background. Slightly lifted from pure black so layered surfaces are distinguishable.
-- **Pure White** (`#FFFFFF`): Primary text, active icons, logo on dark contexts.
-
-### Brand (Logo / Marketing)
-- **Netflix Red** (`#E50914`): The wordmark and "N" ribbon mark. The single non-negotiable brand asset color.
-- **Black** (`#000000`) / **White** (`#FFFFFF`): The only approved logo backgrounds. The mark is never placed on a colored fill.
-
-### Semantic
-- **Error Red** (`#E87C03`→`#E50914` family): Form errors use a warm red `#E50914`; auth/payment errors render in `#E87C03` amber-red to distinguish from the brand red CTA on the same screen.
-- **Success Green** (`#2A9D3C`): "Downloaded", "Added to list" confirmations. Rare — Netflix avoids semantic green in the browse UI.
-- **Warning Amber** (`#E87C03`): Billing reminders, payment-failed banners, "Your plan changes soon".
-- **New Badge Red** (`#E50914`): "New Episode", "Recently Added" ribbons reuse the brand red.
-
-### Neutral Scale (dark-first)
-- **Grey 900** (`#141414`): App canvas, row background.
-- **Grey 850** (`#181818`): Card resting fill, expanded preview-card body.
-- **Grey 800** (`#2F2F2F`): Hover row background, secondary button fill.
-- **Grey 700** (`#404040`): Borders on dark surfaces, divider lines, circle-icon button outline.
-- **Grey 600** (`#6D6D6E`): Disabled text, muted controls, secondary button border.
-- **Grey 500** (`#808080`): Caption/metadata text, "secondary" CTA label, inactive nav links.
-- **Grey 400** (`#B3B3B3`): Body metadata, sub-headings, the canonical "Netflix grey" for descriptions.
-- **Grey 300** (`#E5E5E5`): Emphasized secondary text, list-item labels.
-- **White** (`#FFFFFF`): Primary headings, active nav, key labels.
-
-### Surface & Borders
-- **Border Default**: `#404040` (grey700). Inputs, dividers, icon-button rings on dark.
-- **Border Subtle**: `#333333`. Hairline separators inside dark cards.
-- **Overlay Scrim**: `rgba(0,0,0,0.7)` to `rgba(0,0,0,0.9)`. Modal and player-control scrims.
-- **Hero Gradient**: `linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,1) 100%)` — the bottom-of-billboard fade that blends artwork into the canvas. Also a left-to-right variant `rgba(0,0,0,0.6)→transparent` for text legibility over key-art.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `"Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`
-- **Legacy fallback**: Pre-2018 surfaces used Gotham / `"Roboto"`; the modern stack standardizes on Netflix Sans.
-- **Monospace**: `"Courier New", monospace` (used only in dev/diagnostic overlays, not consumer UI).
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Billboard Title | Netflix Sans | 56px | 700 | 1.1 | -0.01em | Hero artwork title (often replaced by logo art) |
-| Display | Netflix Sans | 40px | 700 | 1.15 | -0.01em | Marketing hero, sign-up headline |
-| Heading Large | Netflix Sans | 32px | 700 | 1.2 | normal | Modal title, detail-page show name |
-| Heading | Netflix Sans | 24px | 700 | 1.25 | normal | Section / category headers |
-| Row Title | Netflix Sans | 20px | 700 | 1.3 | normal | "Trending Now", "Continue Watching" |
-| Subtitle | Netflix Sans | 18px | 500 | 1.4 | normal | Card title in expanded preview |
-| Body Large | Netflix Sans | 16px | 400 | 1.5 | normal | Synopsis, descriptions |
-| Body | Netflix Sans | 14px | 400 | 1.5 | normal | Standard metadata, list rows |
-| Caption | Netflix Sans | 13px | 400 | 1.4 | normal | Match %, maturity rating, runtime |
-| Micro | Netflix Sans | 12px | 400 | 1.4 | 0.02em | Legal, fine print, footer links |
-
-### Principles
-- **One family, full range**: Netflix Sans ships Light through Black; the UI primarily uses 400 (body/metadata), 500 (card labels), and 700 (titles/CTAs). Bold titles, regular everything else.
-- **Grey is the default body color**: descriptive text is `#B3B3B3`, not white. White is reserved for the single most important label per surface, preserving contrast hierarchy on black.
-- **Tight display, loose body**: large titles tighten letter-spacing (`-0.01em`) for cinematic density; body text stays at normal tracking with generous 1.5 line-height for arm's-length readability.
-- **No italics in chrome**: emphasis comes from weight and color, not slant. Italics appear only inside subtitle/caption rendering of the video itself.
-
-## 4. Component Stylings
-
-### Buttons
-
-Netflix buttons are flat, rounded-rectangle, high-contrast. The primary action on the player and browse surfaces is white (a "play" button), while red is reserved for marketing CTAs and the sign-up flow. There is no shadow on dark surfaces — separation comes from fill contrast.
-
-**Primary / White (Play)**
-- Background: `#FFFFFF`
-- Text: `#000000`
-- Border: none
-- Radius: 4px
-- Padding: 8px 24px
-- Font: 16px / 700 / Netflix Sans
-- Icon: leading play glyph, 24px, `#000000`
-- Hover: background `rgba(255,255,255,0.75)`
-- Use: "재생 / Play" on billboard, detail page, continue-watching card — the dominant action
-
-**Primary / Red (Marketing CTA)**
-- Background: `#E50914`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 4px
-- Padding: 16px 28px
-- Font: 18px / 700 / Netflix Sans (24px on marketing hero)
-- Hover: background `#B20710`
-- Use: "Get Started", "Finish Sign-Up", "Restart Membership" — acquisition surfaces only
-
-**Secondary / Grey (More Info)**
-- Background: `rgba(109,109,110,0.7)` (grey600 @70%)
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 4px
-- Padding: 8px 24px
-- Font: 16px / 700 / Netflix Sans
-- Icon: leading "ⓘ" info glyph
-- Hover: background `rgba(109,109,110,0.4)`
-- Use: "상세 정보 / More Info" paired beside the white Play button
-
-**Circle Icon Button**
-- Background: `rgba(42,42,42,0.6)`
-- Border: 2px solid `rgba(255,255,255,0.5)`
-- Radius: 9999px
-- Size: 40px diameter (44px on detail page)
-- Icon: 20px, `#FFFFFF`
-- Hover: border `#FFFFFF`, icon `#FFFFFF`
-- Use: Add-to-list (+), Like (👍), expand (⌄) on hover cards
-
-### Inputs
-
-Sign-in and search inputs sit on dark fills with subtle borders; the email field on the marketing page is a notable high-contrast exception.
-
-**Auth Field (dark)**
-- Background: `#161616` (with `rgba(22,22,22,0.7)` over artwork)
-- Text: `#FFFFFF`
-- Border: 1px solid `#808080`
-- Radius: 4px
-- Padding: 16px
-- Font: 16px / 400 / Netflix Sans
-- Placeholder / floating label: `#8C8C8C`
-- Focus: border `#FFFFFF`, label floats up to 11px
-- Error: border-bottom 2px `#E87C03`, message `#E87C03` 13px below
-- Use: Email/password on the sign-in screen
-
-**Search Field**
-- Background: `rgba(0,0,0,0.75)`
-- Text: `#FFFFFF`
-- Border: 1px solid `#FFFFFF`
-- Radius: 4px
-- Padding: 7px 12px
-- Font: 14px / 400 / Netflix Sans
-- Icon: leading magnifier 18px `#FFFFFF`
-- Use: Top-nav search, expands from an icon
-
-### Cards (Title Cards)
-
-The title card is THE Netflix component — a poster tile in a horizontal row that expands on hover.
-
-**Resting (Row Tile)**
-- Background: artwork image, fallback `#181818`
-- Border: none
-- Radius: 4px
-- Aspect: 16:9 (boxshot rows) or 2:3 (portrait rows)
-- Shadow: none at rest
-- Use: Default state in a scrolling row
-
-**Hover (Expanded Preview)**
-- Background: `#181818` body below 16:9 artwork
-- Border: none
-- Radius: 6px (top corners follow artwork, bottom info-panel squared-rounded)
-- Transform: `scale(1.5)` with `transform-origin` toward row center
-- Shadow: `0 12px 24px rgba(0,0,0,0.8)`
-- Contains: muted autoplay preview, action button row (play, +, like, expand), match % in green `#46D369`, maturity badge, duration, genre tags
-- Use: Hover/focus on a row tile — lifts above neighbors with z-index and shadow
-
-**Match Score**
-- Text: `#46D369` (Netflix green)
-- Font: 14px / 700 / Netflix Sans
-- Use: "98% Match" inside expanded cards
-
-### Badges
-
-**New / Recently Added**
-- Background: transparent
-- Text: `#E50914`
-- Border: none
-- Font: 12px / 700 / Netflix Sans, uppercase, letter-spacing 0.05em
-- Use: "NEW EPISODE", "RECENTLY ADDED" overlaid bottom-left on artwork
-
-**Top 10 Ribbon**
-- Background: `#E50914` (red triangle ribbon, top-right of tile)
-- Text: `#FFFFFF`
-- Font: 9px / 700 uppercase "TOP 10"
-- Use: Trending-rank indicator on qualifying tiles
-
-**Maturity Rating**
-- Background: `rgba(51,51,51,0.6)`
-- Text: `#FFFFFF`
-- Border: 1px solid `#666666` (left accent line for some regions)
-- Radius: 2px
-- Padding: 2px 6px
-- Font: 13px / 400 / Netflix Sans
-- Use: "18", "15+", "TV-MA" on detail pages and previews
-
-### Tabs / Nav
-
-**Top Nav Link**
-- Text: `#E5E5E5` (active `#FFFFFF` 700)
-- Font: 14px / 400 / Netflix Sans
-- Hover: `#B3B3B3`
-- Background: transparent → `#141414` solid on scroll
-- Use: Home / TV Shows / Movies / New & Popular / My List
-
-**Profile Gate Tile**
-- Background: artwork avatar, `#333333` fallback
-- Radius: 4px
-- Size: 84px–200px square depending on viewport
-- Hover: 2px solid `#FFFFFF` outline, label brightens white
-- Use: "Who's watching?" profile selection grid
-
-### Progress Bar
-
-**Continue Watching**
-- Track: `#404040`
-- Fill: `#E50914`
-- Height: 3px
-- Radius: 0
-- Use: Resume position under continue-watching tiles and on the player scrubber
-
-### Toasts / Banners
-
-**Account Banner**
-- Background: `#E87C03` (warning) or `#E50914` (urgent)
-- Text: `#FFFFFF`
-- Padding: 12px 16px
-- Font: 14px / 500 / Netflix Sans
-- Use: "Update your payment method", full-width top banner
-
-### Dialogs
-
-**Modal (Detail / Confirm)**
-- Background: `#181818`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 6px
-- Padding: 0 (artwork-bleed top) then 24px body
-- Shadow: `0 8px 32px rgba(0,0,0,0.9)`
-- Scrim: `rgba(0,0,0,0.7)`
-- Use: Title-detail modal opened from a tile, account-action confirmations
-
-### Toggles
-
-**Default**
-- Track: `#E50914` (on) / `#737373` (off)
-- Radius: 9999px
-- Thumb: `#FFFFFF` circle
-- Use: Autoplay previews, subtitle settings, profile-lock switches
-
----
-
-
-**Tier 1 sources:** https://www.netflix.com (live production site, verified via live DOM getComputedStyle).
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 4px
-- Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 60px
-- Row gutter (between rows): ~3vw vertical, scaling with viewport
-- Tile gap (within a row): 4px–8px, kept tight so more tiles peek at row edges
-
-### Grid & Container
-- Page padding: 4% of viewport width left/right (`padding: 0 4vw`)
-- Rows are horizontally scrollable carousels, not a fixed grid — tile count per row is responsive (2 on mobile → 6+ on wide desktop)
-- Hero billboard: full-bleed, ~56vh tall, artwork right-aligned with left-side text gradient
-- Detail modal: max-width ~850px, centered, artwork bleeds to modal edges
-
-### Whitespace Philosophy
-- **Let artwork breathe, keep chrome tight**: generous vertical gaps between rows so each category reads as its own shelf; tight gaps within a row so the carousel feels abundant.
-- **Edge-peek**: tiles are deliberately clipped at row edges to signal "scroll for more" — the row never ends cleanly at the viewport.
-- **Dark negative space is the frame**: black around artwork is not empty, it is the cinema. Never fill it with decoration.
-
-### Border Radius Scale
-- Sharp (2px): maturity badges, inline chips
-- Standard (4px): buttons, inputs, resting tiles, profile gates
-- Comfortable (6px): expanded hover cards, modals
-- Pill (9999px): toggles, circle icon buttons
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Resting row tiles, page background |
-| Hover (Level 1) | `0 12px 24px rgba(0,0,0,0.8)` + scale(1.5) | Expanded preview card lifting above row |
-| Floating (Level 2) | `0 6px 16px rgba(0,0,0,0.7)` | Dropdown menus, profile menu, search panel |
-| Modal (Level 3) | `0 8px 32px rgba(0,0,0,0.9)` | Detail modal, confirmation dialog |
-| Scrim | `rgba(0,0,0,0.7)` full overlay | Behind any modal or the player chrome |
-
-**Shadow Philosophy**: On a black canvas, drop-shadows are nearly invisible — so Netflix communicates elevation primarily through **scale and z-index**, not shadow. The hover card grows to 1.5× and slides above its neighbors; the shadow underneath is heavy and pure-black only to anchor that lift against the dark. Elsewhere, separation comes from fill-lightness steps (`#141414` → `#181818` → `#2F2F2F`), not from luminous edges. There are no colored shadows and no soft ambient glows — the artwork is the only light source.
-
-### Blur Effects
-- Player controls and the top nav use a subtle backdrop scrim (gradient, not gaussian blur) to keep text legible over moving artwork.
-- Profile and account dropdowns drop a hard `rgba(0,0,0,0.9)` panel rather than a frosted blur.
-
-## 7. Do's and Don'ts
-
-### Do
-- Keep the canvas dark — `#141414` page, `#000000` player. Never a light theme in the consumer app.
-- Reserve Netflix Red (`#E50914`) for the logo, the primary marketing CTA, progress fills, and "New" markers.
-- Use white (`#FFFFFF`) as the primary in-app action color (the Play button); red is for acquisition.
-- Default body/metadata text to grey `#B3B3B3`; reserve white for the single most important label.
-- Let full-bleed artwork supply the color — keep surrounding chrome neutral.
-- Use 700 weight for titles and CTAs, 400 for everything else.
-- Communicate elevation with scale + z-index on the dark canvas, not soft shadows.
-- Clip tiles at row edges to invite horizontal scroll.
-
-### Don't
-- Don't use red as a large background fill — it is an accent, not a surface.
-- Don't introduce a light/white background in browse, player, or detail surfaces.
-- Don't put the logo or red CTA on a colored background — only black or white.
-- Don't make all text white; grey hierarchy is what makes white legible.
-- Don't add decorative borders or glows around artwork — the black frame is the design.
-- Don't use heavy radii (>6px) on cards — Netflix tiles are nearly square-cornered.
-- Don't crowd rows vertically — each category needs breathing room above and below.
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <500px | 2–3 tiles/row, hero ~40vh, nav collapses to hamburger + N logo |
-| Tablet | 500–950px | 3–4 tiles/row, hover previews disabled (tap to open detail) |
-| Desktop | 950–1400px | 5–6 tiles/row, full hover-expand previews enabled |
-| Wide / TV | >1400px | 6+ tiles/row, larger billboard, 4% edge padding holds |
-
-### Touch Targets
-- Buttons: 44px min height on touch; circle icon buttons 44px diameter
-- Tiles: full-tile tappable, opens detail modal directly (no hover-expand on touch)
-- Nav: 48px tap rows in the mobile slide-out menu
-
-### Collapsing Strategy
-- Hover-expand previews are desktop-only; touch devices open the detail modal on tap.
-- Top nav links collapse into a dropdown (mobile) anchored by the red "N" mark.
-- Billboard text block stays left-aligned and shrinks; on mobile the synopsis is hidden, leaving title art + Play/Info buttons.
-- Rows remain horizontally scrollable at every breakpoint — the core metaphor never breaks down.
-
-### Image Behavior
-- Artwork serves responsive crops: 16:9 boxshots for desktop rows, 2:3 portraits for mobile and "Top 10" rows.
-- Hero billboard art is right-anchored with a left + bottom gradient so title text stays legible across crops.
-- All artwork lazy-loads with a `#181818` placeholder block at exact tile dimensions.
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Brand / Accent: Netflix Red (`#E50914`)
-- Accent Hover: Dark Red (`#B20710`)
-- App canvas: Near Black (`#141414`)
-- Player / deepest: Pure Black (`#000000`)
-- Card fill: Grey 850 (`#181818`)
-- Hover row fill: Grey 800 (`#2F2F2F`)
-- Primary text: White (`#FFFFFF`)
-- Body / metadata text: Grey 400 (`#B3B3B3`)
-- Caption text: Grey 500 (`#808080`)
-- Border: Grey 700 (`#404040`)
-- Match score: Green (`#46D369`)
-- Warning: Amber (`#E87C03`)
-
-### Example Component Prompts
-- "Create a Netflix title card: 16:9 artwork, 4px radius, `#181818` fallback. On hover, scale to 1.5×, lift z-index, drop `0 12px 24px rgba(0,0,0,0.8)`, reveal an `#181818` info panel with a white circular play button, + and like circle buttons (40px, 2px `rgba(255,255,255,0.5)` border), '98% Match' in `#46D369` 14px/700, and a maturity badge."
-- "Build a billboard hero: full-bleed artwork, ~56vh, bottom gradient `rgba(20,20,20,0)→rgba(20,20,20,1)`. Left-aligned title art, then a white Play button (`#FFFFFF` bg, `#000` text, 16px/700, 4px radius, 8px 24px padding) and a grey More Info button (`rgba(109,109,110,0.7)` bg, white text)."
-- "Design the top nav: transparent over the hero, fading to solid `#141414` on scroll. Red 'N' mark left, links in `#E5E5E5` 14px/400 (active white 700), search icon + profile avatar right."
-- "Create a Get-Started CTA: `#E50914` bg, white 18px/700 text, 16px 28px padding, 4px radius; hover `#B20710`."
-- "Build a continue-watching tile: 16:9 artwork with a 3px progress bar at the bottom — track `#404040`, fill `#E50914`."
-
-### Iteration Guide
-1. Canvas is always dark (`#141414`); never introduce a light theme.
-2. Red (`#E50914`) is an accent — logo, marketing CTA, progress, "New". White is the in-app action color.
-3. Body text is grey `#B3B3B3`; reserve white for the single key label per surface.
-4. Titles/CTAs are Netflix Sans 700; everything else is 400.
-5. Radii stay tight: 4px buttons/tiles, 6px cards/modals, pill for toggles.
-6. Elevation = scale + z-index + heavy black shadow, not soft glows.
-7. Let artwork carry the color; keep chrome neutral grey-on-black.
-
----
-
-## 10. Voice & Tone
-
-Netflix speaks like a confident, friendly host who already knows what you want to watch — warm, direct, lightly playful, never corporate. Copy is concise and action-forward. English is the source voice, but Netflix localizes into 30+ languages with culturally-tuned (not literal) translation. Sentences in body copy end in periods; buttons are short imperative verbs with no terminal punctuation. Emoji appear in marketing and social but never in the core browse/player chrome.
-
-| Context | Tone |
-|---|---|
-| CTAs | Imperative, short ("Play", "Get Started", "Finish Sign-Up", "More Info") |
-| Onboarding | Reassuring, low-commitment ("Cancel anytime.", "We'll send a reminder 3 days before your trial ends.") |
-| Empty states | Encouraging, redirective ("Add titles to your list to watch them later.") |
-| Error messages | Plain, blameless, actionable ("That password is incorrect. Try again or reset it.") |
-| Billing | Calm and transparent ("Your plan changes on June 12. No action needed.") |
-| Maturity / parental | Neutral, factual — no judgment in rating language |
-| Marketing hero | Bold, benefit-led ("Unlimited movies, TV shows and more.") |
-
-**Forbidden moves.** No jargon ("leverage", "utilize"), no fake urgency countdown timers in core flows, no guilt copy on cancel ("Are you sure you want to leave us?"), no exclamation-stuffed hype in the player UI. The cancel flow is deliberately frictionless — regulatory and brand-trust driven.
-
-## 11. Brand Narrative
-
-Netflix began in 1997 as a **DVD-by-mail** rental service founded by **Reed Hastings** and **Marc Randolph** in Scotts Valley, California — famously conceived (per the often-repeated origin story) after a late video-store fee. The red-envelope mail business undercut Blockbuster's late-fee model, then the company made its defining bet: in 2007 it launched **streaming**, cannibalizing its own profitable mail business before anyone else could. In 2013 it became a studio with **House of Cards**, and "Netflix Original" reframed the company from distributor to producer.
-
-The dark, cinematic interface is a direct expression of that identity. Netflix is not a software company that happens to show video; it is a **theater you carry**, and a theater is dark so the screen can be bright. Every interface decision serves the artwork: the black canvas, the grey-not-white chrome, the single red accent that never competes for attention. The red itself (`#E50914`) descends from the original DVD envelope and the wordmark — a piece of physical-era brand equity carried into pixels.
-
-By the mid-2020s Netflix operates in 190+ countries with hundreds of millions of paid memberships, having expanded into ad-supported tiers, gaming, and live events. Through every expansion the visual system holds: **content is the hero, chrome is the frame, red is the signature.** The personalization engine — the rows are reordered per profile, the artwork itself is A/B-selected per viewer — means the "design" is partly generative, but the frame around it is rigid and constant. That tension — a fixed dark frame around infinitely variable content — is the whole brand.
-
-What Netflix refuses: the bright, busy, multi-color dashboards of productivity software; the light-mode neutrality of utilities; ornamental UI that draws the eye away from a poster. The interface aspires to disappear.
-
-## 12. Principles
-
-1. **Dim the room, light the screen.** The canvas is dark so artwork reads as luminous. Chrome stays grey-on-black; the only light source is the content.
-2. **Red is a signature, not a surface.** `#E50914` marks the logo, the acquisition CTA, progress, and "New". It never becomes a background. Overusing red cheapens it.
-3. **White is the in-app action; red is acquisition.** Inside the product the dominant button is white (Play). Red lives on sign-up and marketing surfaces. Keep the two jobs separate.
-4. **Grey makes white mean something.** Default text to `#B3B3B3`. White is spent on the single most important label per surface, which is how hierarchy survives on black.
-5. **Elevation is scale, not glow.** On black, shadows vanish. Lift comes from growing the element (hover scale 1.5×) and raising z-index, anchored by a heavy pure-black shadow.
-6. **Rows are doors, edges peek.** Content lives in horizontal carousels; tiles clip at the edge to promise more. The grid is never closed.
-7. **The frame is fixed, the content is infinite.** The chrome is rigid and constant precisely because the artwork inside it is personalized and ever-changing.
-8. **Chrome aspires to disappear.** Every pixel of UI competes with a poster. When in doubt, make the interface quieter.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by publicly described streaming-viewer segments, not individual people.*
-
-**Maya, 26, Los Angeles.** UX designer, watches on a 65" TV most evenings and her phone on the bus. Lives in "Continue Watching" and "Trending Now". Expects the app to remember her exact resume position to the second and to autoplay a preview the moment she lands on a tile. Annoyed by anything that delays the artwork — splash screens, slow row loads. Treats the red Play button as muscle memory.
-
-**Daniel, 41, Chicago.** Father of two, manages four profiles including a Kids profile with a different (brighter, lighter) UI. Cares deeply that maturity ratings and parental locks are unambiguous. Browses lean-back on the living-room TV; never types if he can avoid it, navigating entirely by D-pad through the rows. Values the frictionless billing page — checks his plan once a quarter and wants zero surprises.
-
-**Sofia, 33, Madrid.** Bilingual viewer who switches audio and subtitle languages constantly and watches a mix of Spanish originals and dubbed global content. Relies on the localized interface feeling native, not translated. Uses "My List" as a real watchlist and expects "New Episode" badges to be accurate. Watches mostly on a laptop in a dark room — the dark UI is why she never feels eye strain at midnight.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (My List)** | Centered grey `#B3B3B3` line ("Titles you add to My List appear here.") over `#141414`, with a suggestion row below. No illustration. |
-| **Empty (Search no results)** | Grey caption ("Your search for 'xyz' did not have any matches.") plus a "Suggestions:" list and a fallback popular row. |
-| **Loading (row)** | `#181818` placeholder tiles at exact final dimensions, faint 1.2s shimmer. Artwork fades in on load. |
-| **Loading (page)** | Centered red `#E50914` spinner / the "N" ribbon animation over `#141414`. |
-| **Hover (tile)** | Scale 1.5×, z-index lift, `0 12px 24px rgba(0,0,0,0.8)` shadow, muted autoplay preview, action button row reveals. |
-| **Error (form field)** | Border-bottom 2px `#E87C03`, amber message 13px below the field. |
-| **Error (playback)** | Full black player with centered white message + error code in grey, "Try Again" white button. |
-| **Success (added to list)** | The + circle button fills to a ✓, brief scale pulse, no toast. |
-| **Disabled** | Control drops to `#6D6D6E` text / `rgba(255,255,255,0.3)`; geometry unchanged. |
-| **Buffering** | Red `#E50914` circular spinner centered over the dimmed (`rgba(0,0,0,0.5)`) video frame. |
-| **Progress (resume)** | 3px bar, `#404040` track / `#E50914` fill, under continue-watching tiles and on the scrubber. |
-
-## 15. Motion & Easing
-
-**Durations:**
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Checkbox/toggle commit |
-| `motion-fast` | 150ms | Button hover, nav-link color shift, icon-button border |
-| `motion-card` | 300ms | Tile hover-expand (scale 1.5×) and collapse |
-| `motion-standard` | 400ms | Modal open, row reorder, nav transparent→solid fade |
-| `motion-billboard` | 600ms | Hero artwork cross-fade, billboard text reveal |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-out` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — card expand, modal in |
-| `ease-in` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — card collapse, modal out |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — nav fade, row scroll |
-| `ease-scroll` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Horizontal row carousel paging |
-
-**Signature motions.**
-
-1. **Tile hover-expand.** On hover, the tile scales to 1.5× over `motion-card` with `ease-out`, raises z-index above neighbors, drops a heavy black shadow, and reveals the info panel + autoplay preview. Collapse reverses with `ease-in`. This is the defining Netflix gesture.
-2. **Row paging.** Clicking a row's edge arrow slides the carousel one page with `ease-scroll`; tiles at the new edge peek to promise more.
-3. **Nav fade.** As the user scrolls off the billboard, the top nav transitions from transparent to solid `#141414` over `motion-standard / ease-standard`, keeping links legible against incoming artwork.
-4. **Billboard cross-fade.** Hero artwork and its preview video cross-fade over `motion-billboard`; title art and buttons fade up from below with a slight delay so the artwork lands first.
-5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, hover-expand scaling and autoplay previews are suppressed — tiles get a simple border/brightness change instead, and cross-fades become instant cuts. The product stays fully usable.
-
-<!--
-OmD v0.1 Sources
-
-Token grounding (WebSearch, 2026-06-06): Netflix Red #E50914 (RGB 229·9·20,
-Pantone 1795 C), Black #000000, White #FFFFFF, Dark Red #B20710 — confirmed
-across multiple brand-color references. Netflix Sans (custom typeface by
-Dalton Maag, introduced 2018, replacing Gotham) confirmed as the brand face.
-
-Dark-UI tokens (#141414 canvas, #181818 card, #B3B3B3 metadata grey, #2F2F2F
-hover, #46D369 match-green, hover scale 1.5×) are well-documented conventions
-of the Netflix web/TV consumer UI, used here as representative values.
-
-Brand narrative facts (founded 1997 by Reed Hastings & Marc Randolph; DVD-by-mail;
-streaming launched 2007; House of Cards 2013; 190+ countries) are widely
-documented public history.
-
-Personas (§13) are fictional archetypes informed by publicly described
-streaming-viewer segments, not individual people. Interpretive claims
-("dim the room, light the screen", "chrome aspires to disappear") are editorial
-readings of the design, not official Netflix statements.
-
-Sources:
-- https://www.brandcolorcode.com/netflix
-- https://brand.netflix.com/en/assets/logos/
-- https://www.designyourway.net/blog/netflix-logo/ (Netflix Sans / Dalton Maag history)
--->

package/.opencode/oh-my-design/web/references/nexon/.verification.md

@@ -1,27 +0,0 @@
-# Nexon — Verification Notes (2026-06-09)
-
-## Proof — Tier 1 live inspect
-
-**Inspected:** 2026-06-09
-**Method:** playwright getComputedStyle (live DOM)
-**Sources:**
-- https://www.nexon.com (Korean home page, title "넥슨")
-- https://www.nexon.com/Main/Index (main portal surface)
-
-### Raw samples
-- Primary CTA — background `rgb(0, 222, 90)` (#00de5a), color `rgb(0, 0, 0)` (#000000), font "NEXON Gothic Bold", 14px, weight 700
-- Disabled CTA — background `rgb(159, 161, 167)` (#9fa1a7), color `rgb(255, 255, 255)`, 14px, line-height 35.98px
-- Heading/link ink — `rgb(23, 25, 29)` (#17191d), 16px / 14px, weight 400
-- Near-black link — `rgb(8, 4, 16)` (#080410), 15px
-- Body text — `rgb(115, 120, 129)` (#737881), 12px, weight 400, font-family "malgun gothic", "sans serif"
-- Label gray — `rgb(74, 78, 87)` (#4a4e57), 12px
-- Muted label — `rgb(145, 145, 145)` (#919191), 12px, line-height 14.4px, letter-spacing -0.3px
-- Footer bold label — `rgb(159, 161, 167)` (#9fa1a7), 12px, weight 700
-- Nav background — `rgb(255, 255, 255)` (#ffffff)
-
-## Country sources
-
-Brand-owned / regional Korean sources (KR requirement, >= 2):
-- https://www.nexon.com — Nexon official Korean corporate/portal site (live, brand-owned)
-- https://company.nexon.com — Nexon Korea official corporate / IR site (brand-owned)
-- https://apps.apple.com/kr/developer/nexon-korea-corporation/id368892029 — Nexon Korea developer page on the Korean App Store (regional, brand-owned listing)