oh-my-design-cli 1.8.0 → 1.8.1

package/web/references/abema/DESIGN.md

@@ -0,0 +1,535 @@
+---
+id: abema
+name: ABEMA
+country: JP
+category: consumer-tech
+homepage: "https://abema.tv"
+primary_color: "#ddaa00"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=abema.tv&sz=128"
+verified: "2026-06-10"
+added: "2026-06-10"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-06-10"
+  note: "Token names are verbatim from ABEMA's shipped web-app CSS :root block (--abema-yellow = --color-primary #ddaa00; --color-accent #f0163a LIVE crimson). Canvas is pure black; surfaces ladder #0b0b0b → #171717 → #212121 → #373737. Main app was in a large-scale outage on inspect day; token CSS recovered from the brand's own asset bundle (Wayback 2025-12-31)."
+  colors:
+    primary: "#ddaa00"
+    primary-hover: "#dfb015"
+    accent: "#f0163a"
+    accent-hover: "#f34461"
+    green: "#16deb5"
+    green-hover: "#44e5c5"
+    purple: "#a873ff"
+    purple-hover: "#af7eff"
+    ppv-blue: "#02d1d6"
+    coin: "#ffc400"
+    canvas: "#000000"
+    surface: "#171717"
+    surface-sub: "#212121"
+    surface-hover: "#373737"
+    surface-deep: "#0b0b0b"
+    skeleton: "#1c1c1c"
+    foreground: "#e6e6e6"
+    smoke: "#999999"
+    smoke-strong: "#767676"
+    link-hover: "#c5c5c5"
+    hairline: "#333333"
+    pale: "#f5f5f5"
+    on-primary: "#212121"
+    white: "#ffffff"
+  typography:
+    family: { sans: "CopyRight (custom webfont) + Hiragino Sans + BIZ UDPGothic", alphanumeric: "Helvetica / Arial", condensed: "Roboto Condensed" }
+    title-l:  { size: 32, weight: 700, use: "Page titles (--font-size-title-l)" }
+    title-m:  { size: 27, weight: 700, use: "Section titles (--font-size-title-m)" }
+    title-s:  { size: 22, weight: 700, use: "Sub-section titles (--font-size-title-s)" }
+    heading:  { size: 24, weight: 700, lineHeight: 1.5, use: "Status/feature headings (SorryPage h1, --font-size-xxxl)" }
+    body-lg:  { size: 16, weight: 700, lineHeight: 1.5, use: "Emphasis body, notification text (--font-size-l)" }
+    body:     { size: 14, weight: 400, lineHeight: 1.5, use: "Standard reading text, button labels (--font-size-m)" }
+    caption:  { size: 12, weight: 700, lineHeight: 1.5, use: "Tags, badges, meta (--font-size-xs)" }
+    micro:    { size: 10, weight: 700, use: "Thumbnail labels (--font-size-xxs)" }
+  spacing: { unit: 4, sm: 8, md: 12, base: 16, lg: 32, content-min: 724, content-max: 1024, content-max-vod: 1280 }
+  rounded: { sm: 2, md: 4, lg: 8, xl: 12, full: 9999 }
+  shadow:
+    floating: "0 2px 16px rgba(0,0,0,.2)"
+    strong: "0 2px 4px rgba(0,0,0,.5)"
+  components:
+    button-primary: { type: button, bg: "#ddaa00", fg: "#212121", radius: "4px", height: "44px", font: "14px / 700", states: "hover #dfb015 · active opacity .7 · disabled opacity .4", use: "Primary CTA (com-a-Button--primary)" }
+    button-secondary: { type: button, bg: "#e6e6e6", fg: "#212121", radius: "4px", height: "44px", font: "14px / 700", hover: "#ffffff", use: "Secondary action" }
+    button-dark: { type: button, bg: "#212121", fg: "#e6e6e6", radius: "4px", height: "44px", font: "14px / 700", hover: "#373737", use: "Tertiary action on dark canvas" }
+    button-danger: { type: button, bg: "#f0163a", fg: "#ffffff", radius: "4px", height: "44px", font: "14px / 700", hover: "#f34461", use: "Destructive / cancel-subscription action" }
+    badge-live: { type: badge, bg: "#f0163a", fg: "#ffffff", radius: "4px", height: "20px", padding: "0 4px", font: "12px / 700", use: "LIVE broadcasting tag on thumbnails (com-BroadcastingTag)" }
+    input-text: { type: input, bg: "#212121", fg: "#e6e6e6", radius: "4px", height: "44px", font: "14px / 400", use: "Dark text field; search variant 46px; placeholder #999999" }
+    card-floating: { type: card, bg: "#212121", radius: "4px", shadow: "0 2px 16px rgba(0,0,0,.2)", use: "Search-suggest panel / floating dropdown card" }
+    tab-panel: { type: tab, active: "bg #212121 + text #e6e6e6", radius: "4px 4px 0 0", height: "44px", use: "Content panel tabs (com-m-TabList)" }
+    toggle-checkbox: { type: toggle, bg: "#ddaa00", border: "1px solid #999999", radius: "2px", height: "20px", use: "Checkbox; checked fills ABEMA yellow" }
+    toast-notification: { type: toast, bg: "#212121", fg: "#e6e6e6", radius: "4px", padding: "12px 16px", font: "16px / 700", use: "Notification block; leading label in #ddaa00" }
+  components_harvested: true
+---
+
+# Design System Inspiration of ABEMA
+
+## 1. Visual Theme & Atmosphere
+
+ABEMA is Japan's "new future of television" — a free, ad-supported linear-streaming hybrid from CyberAgent — and its interface is one of the most committed dark-surface systems in consumer streaming. The canvas is pure black (`#000000`), and content sits on a disciplined ladder of dark grays the brand names in its own CSS tokens: `--dark-stronger` (`#0b0b0b`), `--dark-strong` (`#171717`), `--dark-basic` (`#212121`), and a hover step at `#373737`. On top of this cinema-dark stage, near-white text (`#e6e6e6` — deliberately not pure white) does the reading work, and a single warm signal cuts through: ABEMA yellow (`#ddaa00`), the system's named `--color-primary`, used for links, primary buttons, and selection marks like a broadcast station's "on air" lamp.
+
+The second voice in the palette is the crimson accent (`#f0163a`) — the color of the LIVE badge that stamps every currently-broadcasting thumbnail. Where most streaming services reserve red for errors, ABEMA's red means "happening right now", a direct inheritance from television's live-broadcast culture; it doubles as the danger color. Supporting hues are strictly role-bound: mint green (`#16deb5`) for student plans and positive marks, purple (`#a873ff`) for premium-adjacent surfaces, cyan (`#02d1d6`) for pay-per-view, and coin gold (`#ffc400`) for the in-app currency.
+
+Typography is unapologetically broadcast-bold: weight 700 dominates the entire stylesheet (361 declarations versus 24 at weight 400), set in a custom-named corporate webfont stack ("CopyRight" + Hiragino Sans + BIZ UDPGothic) with Roboto Condensed reserved for condensed alphanumerics like timetable digits. Geometry is tight and televisual — 4px is the universal radius (`--radius: 4px`, 278 occurrences), circles are reserved for avatars and player controls, and shadows are shallow black glows (`0 2px 16px rgba(0,0,0,.2)`) that read as backlight rather than paper elevation. The result feels like an electronic program guide redesigned by a modern product team: dense, dark, loud where liveness demands it, and quiet everywhere else.
+
+**Key Characteristics:**
+- Pure black canvas (`#000000`) with a named dark-surface ladder: `#0b0b0b` → `#171717` → `#212121` → hover `#373737`
+- ABEMA yellow (`#ddaa00`) as `--color-primary` — links, CTAs, checked states; hover deepens to `#dfb015`
+- LIVE crimson (`#f0163a`) for broadcasting-now badges and destructive actions — red means "live", not just "error"
+- Near-white foreground `#e6e6e6` instead of `#ffffff` — softened contrast for long viewing sessions
+- Weight 700 as the default typographic voice; body text at 14px / 1.5
+- Universal 4px radius; 50% circles only for avatars/player controls; 2px on checkboxes
+- Role-locked support colors: mint `#16deb5` (student/free), purple `#a873ff` (premium), cyan `#02d1d6` (PPV), gold `#ffc400` (coins)
+- Custom corporate font stack ("CopyRight" webfont) with Roboto Condensed for numeric/timetable display
+
+## 2. Color Palette & Roles
+
+### Primary
+- **ABEMA Yellow** (`#ddaa00`): `--abema-yellow`, aliased to `--color-primary`. Primary buttons, links (`--font-color-link`), checked radio/checkbox fills, selection highlights. The single warm "action" signal on the dark canvas.
+- **Yellow Hover** (`#dfb015`): `--color-primary-hover`. Hover state for primary buttons and links.
+- **On Primary** (`#212121`): Label color on yellow buttons — dark-on-yellow, never white-on-yellow.
+
+### Accent (Live & Danger)
+- **LIVE Crimson** (`#f0163a`): `--color-accent`. The broadcasting-now tag, NEW labels, danger buttons, warning text (`--font-color-danger`). Red = live first, destructive second.
+- **Crimson Hover** (`#f34461`): `--color-accent-hover`. Hover state for accent/danger elements (legacy hover `#bb122e` survives in older surfaces).
+
+### Role-Bound Support
+- **Mint Green** (`#16deb5`): `--abema-green`. Student-plan markers, positive accents; hover `#44e5c5`.
+- **Purple** (`#a873ff`): `--abema-purple`. Premium-adjacent UI; hover `#af7eff`.
+- **PPV Cyan** (`#02d1d6`): `--payperview-blue`. Pay-per-view labeling.
+- **Coin Gold** (`#ffc400`): `--color-coin`. In-app coin/currency iconography.
+
+### Dark Surface Ladder
+- **Canvas Black** (`#000000`): Page background, player letterboxing, edge gradients.
+- **Surface Deep** (`#0b0b0b`): `--dark-stronger`. Deepest panels, onload placeholder background.
+- **Surface** (`#171717`): `--dark-strong` / `--bg-regular`. Regular app background; floating variant at 80% opacity (`rgba(23,23,23,.8)`) for overlay chrome like the player's mute button.
+- **Surface Sub** (`#212121`): `--dark-basic` / `--bg-sub`. Cards, title cards, dropdowns, inputs, modals — the workhorse component surface.
+- **Surface Hover** (`#373737`): `--dark-basic-hover`. Hover state for sub-surfaces and dropdown items.
+- **Skeleton** (`#1c1c1c`): `--bg-card-placeholder`. Card skeleton/placeholder fill.
+
+### Text & Lines
+- **Foreground** (`#e6e6e6`): `--light-basic` / `--font-color-regular`. Primary text — near-white, never pure.
+- **Smoke** (`#999999`): `--smoke-basic`. Secondary text, placeholder text, info color.
+- **Smoke Strong** (`#767676`): `--smoke-strong`. Tertiary text, progress-bar track.
+- **Link Hover** (`#c5c5c5`): `--font-color-link-hover`. Yellow links cool to gray on hover.
+- **Hairline** (`#333333`): `--border-color`. Default border on dark (sub-border `#555555`).
+- **Pure White** (`#ffffff`): Badge text, icons, maximum-contrast moments only.
+
+### Light-Theme Exception (Timetable)
+- **Pale** (`#f5f5f5`): `--pale-weak` / light text-box background. The EPG timetable runs a parallel `lt-*` light token set (white background, `#eeeeee` program cells, warm `#fcf6e5` for now-playing) — the one deliberately light surface in the product.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: "CopyRight" (custom-named corporate webfont), falling through Emoji, Hiragino Sans, BIZ UDPGothic Alphabet, BIZ UDGothic, Meiryo, sans-serif (`--font-family-sans-serif`)
+- **Alphanumeric**: Helvetica, Arial (`--font-family-for-alphanumeric`)
+- **Condensed numerals**: Roboto Condensed — timetable digits, player timecodes
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Notes |
+|------|------|--------|-------------|-------|
+| Title L | 32px | 700 | 1.3 | `--font-size-title-l`, page titles (mobile 27px) |
+| Title M | 27px | 700 | 1.3 | `--font-size-title-m`, section titles (mobile 20px) |
+| Heading XXXL | 28px | 700 | 1.5 | `--font-size-xxxxl` |
+| Heading | 24px | 700 | 1.5 | `--font-size-xxxl`; SorryPage h1 measured 24px/700 `#e6e6e6` |
+| Title S | 22px | 700 | 1.3 | `--font-size-title-s` |
+| Emphasis Body | 16px | 700 | 1.5 | `--font-size-l`, notification text, button L labels |
+| Body | 14px | 400 | 1.5 (21px) | `--font-size-m`, document default (measured live) |
+| Caption | 12px | 700 | 1.5 | `--font-size-xs`, tags and badges |
+| Micro | 10px | 700 | 1.5 | `--font-size-xxs`, thumbnail labels (mobile badges) |
+
+### Principles
+- **Bold is the default voice.** Weight 700 outnumbers weight 400 by 15:1 in the shipped stylesheet. Headings, buttons, badges, tab labels, notification text — all bold. Weight 400 is reserved for plain reading copy.
+- **A dedicated mobile scale.** Every size token has a `mb-` twin one step smaller (title-l 32→27, xxl 22→18), so density survives on phones without reflowing the hierarchy.
+- **Condensed digits for broadcast data.** Roboto Condensed handles timetable hours and timecodes, keeping dense numeric grids narrow — a television-schedule inheritance.
+- **1.5 / 1.3 / 1 line-height triad.** Reading text at 1.5, headings at 1.3, controls at 1 — the three values cover 90% of declarations.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#ddaa00`
+- Text: `#212121`
+- Radius: 4px
+- Height: 44px
+- Font: 14px / 700
+- Hover: `#dfb015` background
+- Active: opacity 0.7
+- Disabled: opacity 0.4
+- Use: Primary CTA (`com-a-Button--primary`) — plan signup, confirm actions
+
+Size scale: small 12px label / 32px height · default 14px / 44px · large 16px / 52px · extra-large 20px / 56px (`--button-label-size-*`).
+
+**Secondary**
+- Background: `#e6e6e6`
+- Text: `#212121`
+- Radius: 4px
+- Height: 44px
+- Font: 14px / 700
+- Hover: `#ffffff` background
+- Use: Secondary action paired with a primary
+
+**Dark (Tertiary)**
+- Background: `#212121`
+- Text: `#e6e6e6`
+- Radius: 4px
+- Height: 44px
+- Font: 14px / 700
+- Hover: `#373737` background
+- Use: Low-emphasis action sitting directly on the black canvas
+
+**Primary Dark (Inverse)**
+- Background: `#212121`
+- Text: `#ddaa00`
+- Radius: 4px
+- Height: 44px
+- Font: 14px / 700
+- Use: Brand-colored label on dark surface (`com-a-Button--primary-dark`)
+
+**Danger**
+- Background: `#f0163a`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 44px
+- Font: 14px / 700
+- Hover: `#f34461` background
+- Use: Destructive confirmation (unsubscribe, delete)
+
+### Inputs
+
+**Text Field**
+- Background: `#212121`
+- Text: `#e6e6e6`
+- Radius: 4px
+- Height: 44px
+- Font: 14px / 400
+- Placeholder: `#999999`
+- Use: Dark-theme text input (`com-InputText`); small variant 36px with 12px font and 8px padding; search variant 46px
+
+### Cards & Containers
+
+**Floating Panel**
+- Background: `#212121`
+- Radius: 4px
+- Shadow: `0 2px 16px rgba(0,0,0,.2)`
+- Use: Search-suggest list, dropdown menus, floating cards (`com-search-SearchSuggestList`)
+
+**Title Card**
+- Background: `#212121`
+- Radius: 4px
+- Use: Program/episode cards on black canvas (`--bg-title-card`); skeleton state fills `#1c1c1c`
+
+### Badges
+
+**LIVE Broadcasting Tag**
+- Background: `#f0163a`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 20px
+- Padding: 0 4px
+- Font: 12px / 700
+- Use: Broadcasting-now stamp at top-right of thumbnails (`com-BroadcastingTag`; mobile 16px height, 10px font)
+
+**Pre-Broadcast Tag**
+- Background: `rgba(23,23,23,0.8)`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 20px
+- Padding: 0 4px
+- Font: 12px / 700
+- Use: Countdown-to-broadcast tag with clock icon
+
+**NEW Label**
+- Background: `#f0163a`
+- Text: `#ffffff`
+- Height: 16px
+- Padding: 0 4px
+- Font: 10px / 700
+- Use: Newest-episode corner label, bottom-left radius 4px only
+
+### Tabs
+
+**Panel Tab**
+- Radius: 4px 4px 0px 0px
+- Height: 44px
+- Active: background `#212121`
+- Use: Content panel tabs (`com-m-TabList`); inactive tabs sit transparent on black, 16px horizontal label padding
+
+**Round Tab**
+- Radius: 16px
+- Height: 44px
+- Focus: background `#e6e6e6`, text `#212121`
+- Use: Genre chip tabs (`com-RoundTabItem`; mobile 48px row, 12px font)
+
+### Toggles & Selection
+
+**Checkbox**
+- Border: 1px solid `#999999`
+- Radius: 2px
+- Height: 20px
+- Checked: background `#ddaa00`
+- Use: Settings/consent checkboxes; small variant 14px; radio twin uses 50% radius and the same yellow fill
+
+### Toasts
+
+**Notification Block**
+- Background: `#212121`
+- Text: `#e6e6e6`
+- Radius: 4px
+- Padding: 12px 16px
+- Font: 16px / 700
+- Use: In-app notification row; leading label rendered in `#ddaa00` (`com-m-NotificationBlock`); mobile variant adds 1px solid `#333333` border
+
+### Dialogs
+
+**Modal**
+- Overlay: `rgba(0,0,0,0.7)`
+- Padding: 32px 16px 16px
+- Use: Centered modal (`com-a-Modal`); width scale 300px (S) / 360px (M) / 640px (L)
+
+---
+**Verified:** 2026-06-10
+**Tier 1 sources:** https://abema.tv (live inspect 2026-06-10 — large-scale outage day, dark maintenance/sorry shell measured); https://abema.tv/assets/registry.1bbd6d267a32e228541e6.css (ABEMA's own shipped web-app CSS bundle: full `:root` token system + component classes, retrieved via web.archive.org snapshot 2025-12-31 because origin assets rotated during the outage); https://times.abema.tv (ABEMA TIMES, brand-owned media surface, live inspect 2026-06-10)
+**Tier 2 sources:** none available (getdesign.md/abema and getdesign.md/abematv both NOT_FOUND; styles.refero.design ?q=abema returns no ABEMA listing)
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4px (`--space: 4px`); paddings compose as multiples (4, 8, 12, 16, 32)
+- Tooltip/badge paddings derive from `calc(var(--space)*n)` — the unit is enforced in code, not convention
+
+### Grid & Container
+- Content min-width 724px, max-width 1024px (`--content-min-width` / `--content-max-width`); VOD watch pages extend to 1280px
+- Mobile content width 640px
+- Home is a vertical stack of horizontal carousels (broadcast rails) over the black canvas, edge-faded with black gradients (`linear-gradient(90deg, #000, transparent)`)
+- The EPG timetable is the structural exception: a dense light-theme grid with 8px lane spacing
+
+### Whitespace Philosophy
+- **Density over air.** ABEMA is a television guide, not an editorial site — rails, tags, and metadata pack tightly at 4px increments; generous whitespace is spent only around the player.
+- **Black is the separator.** Sections separate by the canvas showing through between `#212121` cards rather than by borders or shadows.
+- **Edge gradients instead of hard clips.** Carousel rails fade into `#000000` (or `#212121` inside cards) at their edges, keeping the dark surface continuous.
+
+### Border Radius Scale
+- Micro (2px): checkboxes
+- Standard (4px): buttons, inputs, cards, tags, modals — the universal value (`--radius: 4px`, 278 declarations)
+- Relaxed (8px): featured containers
+- Large (12-16px): round tabs, promotional cards
+- Circle (50%): avatars, radio buttons, player control buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, canvas `#000000` | Page background, rails |
+| Surface (Level 1) | Background shift to `#212121`, no shadow | Cards, inputs, tabs |
+| Floating (Level 2) | `0 2px 16px rgba(0,0,0,.2)` | Dropdowns, suggest panels, floating cards |
+| Strong (Level 3) | `0 2px 4px rgba(0,0,0,.5)` | Player chrome, compact overlays |
+| Overlay (Level 4) | `rgba(0,0,0,0.7)` full-screen scrim | Modals |
+
+**Shadow Philosophy**: On a black canvas, shadows barely read — so ABEMA's depth system leans on background-color steps (`#0b0b0b` → `#171717` → `#212121` → `#373737`) rather than elevation. The few shadows that exist are soft black glows used as separation hints for elements that float over imagery (dropdowns over thumbnails). Translucent surface tokens (`rgba(33,33,33,.8)`, `rgba(23,23,23,.8)`) handle chrome that must sit over video without fully hiding it — depth through transparency, a player-first pattern.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the canvas pure black (`#000000`) and step surfaces up the named ladder (`#0b0b0b`, `#171717`, `#212121`, `#373737`)
+- Reserve ABEMA yellow (`#ddaa00`) for actions: primary buttons, links, checked states — hover to `#dfb015`
+- Use crimson (`#f0163a`) for "live right now" badges first, destructive actions second
+- Set near-white text in `#e6e6e6`, with `#999999` for secondary and `#767676` for tertiary
+- Default to weight 700 for headings, buttons, badges, and tab labels
+- Use 4px radius everywhere; 50% only for avatars and circular player controls
+- Use translucent dark surfaces (`rgba(23,23,23,.8)`) for chrome floating over video
+- Use Roboto Condensed for timetable digits and timecodes
+
+### Don't
+- Use pure white `#ffffff` for body text — `#e6e6e6` is the reading color; white is for badge text and icons
+- Spread yellow beyond actionable elements — it is the single attention signal on a dark field
+- Use red for generic emphasis — `#f0163a` carries the specific meaning "broadcasting live" (and danger)
+- Add paper-style drop shadows to cards — separation comes from surface-color steps, not elevation
+- Use pill-shaped buttons — the system is 4px-rectangular; only genre chips reach 16px
+- Set headings in light weights — ABEMA's voice is broadcast-bold 700
+- Put white-on-yellow labels on primary buttons — the label is always dark `#212121`
+- Break the 4px spacing unit with arbitrary gaps
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | `mb-` type scale (titles 32→27, 27→20), badges shrink to 16px height / 10px font, tab rows 48px |
+| Tablet/Min | 724px | `--content-min-width` floor for the desktop app layout |
+| Desktop | 724-1024px | Standard rail layout at `--content-max-width: 1024px` |
+| VOD Watch | up to 1280px | Player pages extend to `--content-max-width-for-vod` |
+
+### Touch Targets
+- Buttons at 44px default height (52/56px for large CTAs) — thumb-safe by default
+- Mobile tab rows at 48px with 8px vertical padding
+- Timetable arrow controls at 60px circles (`rgba(0,0,0,.6)` over content)
+
+### Collapsing Strategy
+- Every font-size token swaps to its `mb-` twin — hierarchy compresses one step rather than reflowing
+- Carousel rails persist on mobile with edge gradients; arrows hide in favor of swipe
+- Badges and tags keep their geometry, shrinking 20px→16px height
+- The player remains the fixed anchor; metadata stacks beneath it
+
+### Image Behavior
+- Program thumbnails are 16:9, corner-tagged (LIVE top-right at 4px inset, NEW top-right corner-fitted)
+- Thumbnails carry no shadow; on hover a `hsla(0,0%,100%,.08)` white veil lifts them
+- Skeleton thumbnails fill `#1c1c1c` on `#212121` cards
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA / links: ABEMA Yellow (`#ddaa00`), hover (`#dfb015`), label on yellow: `#212121`
+- LIVE badge / danger: Crimson (`#f0163a`), hover (`#f34461`)
+- Canvas: Black (`#000000`)
+- Card/input/modal surface: `#212121`, hover `#373737`
+- App background: `#171717`
+- Primary text: `#e6e6e6`; secondary `#999999`; tertiary `#767676`
+- Border on dark: `#333333`
+- Student/positive: Mint (`#16deb5`); premium: Purple (`#a873ff`); PPV: Cyan (`#02d1d6`); coins: Gold (`#ffc400`)
+
+### Example Component Prompts
+- "Create a dark streaming home: pure #000000 canvas, horizontal carousel rails of 16:9 thumbnail cards on #212121 with 4px radius. Each live card gets a top-right LIVE badge: #f0163a background, white 12px/700 text, 4px radius, 20px height. Primary text #e6e6e6, metadata #999999."
+- "Design a primary button: #ddaa00 background, #212121 text, 4px radius, 44px height, 14px weight-700 label. Hover #dfb015. Secondary twin: #e6e6e6 background, #212121 text, hover #ffffff. Danger twin: #f0163a with white text, hover #f34461."
+- "Build a search field on dark: #212121 background, 4px radius, 46px height, #e6e6e6 text, #999999 placeholder. Suggest dropdown below: #212121 panel, 4px radius, shadow 0 2px 16px rgba(0,0,0,.2), rows hover #373737."
+- "Create panel tabs on black: 44px height, 4px 4px 0 0 radius, active tab background #212121 with #e6e6e6 weight-700 label, inactive transparent with #999999 label."
+- "Design a notification toast: #212121 background, 4px radius, 12px 16px padding, leading label in #ddaa00 16px/700, message #e6e6e6 16px/700."
+
+### Iteration Guide
+1. Canvas is `#000000`; components live on `#212121`; never use light surfaces except the EPG timetable
+2. Yellow `#ddaa00` = action, crimson `#f0163a` = live/danger — never swap or dilute these meanings
+3. Text: `#e6e6e6` primary / `#999999` secondary / `#767676` tertiary; white only inside badges
+4. Radius is 4px everywhere; 2px checkboxes; 50% circles for avatars and player controls
+5. Weight 700 for every label and heading; 400 only for reading copy at 14px/1.5
+6. Hover = one surface step up (`#212121` → `#373737`) or one tone shift (`#ddaa00` → `#dfb015`); pressed = opacity 0.7; disabled = opacity 0.4
+7. Depth = surface steps and `rgba(0,0,0,.2)` glows, not paper shadows
+8. Keep 4px spacing increments; content max 1024px (1280px for watch pages)
+
+---
+
+## 10. Voice & Tone
+
+ABEMA's voice is **immediate, broadcast-warm, and unpretentious** — the register of a television announcer translated into product copy. The service introduces itself as "新しい未来のテレビ" (the new future of television), and the copy keeps television's directness: short declaratives, time-anchored language (今・LIVE・最新), and zero subscription-guilt pressure on the free tier. Japanese politeness forms are used straightforwardly (です/ます) without corporate stiffness.
+
+| Context | Tone |
+|---|---|
+| Service tagline | Mission-framed, plain. "無料動画・話題の作品が楽しめる新しい未来のテレビ" — benefit first, vision second. |
+| Player / controls | Imperative and instant: "クリックでミュートを解除", "音声をオンにする". No fluff between user and playback. |
+| Live signals | Single loud words: LIVE, NEW. The badge is the sentence. |
+| Error / outage | Apologetic but composed: "申し訳ありません" + factual status + a link to official channels. |
+| Category navigation | Bare nouns: ニュース、スポーツ、アニメ、将棋、麻雀 — a channel dial, not a menu essay. |
+| Premium upsell | Direct benefit statements; the free tier is never shamed. |
+
+**Voice samples (verbatim):**
+- "無料動画・話題の作品が楽しめる新しい未来のテレビ" — service title tagline. *(verified: document title, abema.tv, archived 2026-01-01 snapshot of live page)*
+- "クリックでミュートを解除" — player mute-unlock button. *(verified live 2026-06-10, abema.tv shell)*
+- "ABEMAの表示に失敗しました" / "申し訳ありません" — outage SorryPage headings. *(verified 2026-06-10 / archived snapshot)*
+
+**Forbidden register**: hype superlatives ("革命的"), aggressive FOMO countdowns outside genuinely live content, dense legalistic blocks in player UI, and casual slang that breaks the broadcaster's composure.
+
+## 11. Brand Narrative
+
+ABEMA launched in **April 2016** as "AbemaTV", a joint venture led by **CyberAgent** (with TV Asahi as media partner) under CyberAgent founder **藤田晋 (Susumu Fujita)**, who framed the service as a bet on reinventing television for the internet generation: dozens of free, 24-hour linear channels — news, anime, sports, shogi, mahjong — streamed like broadcast TV but born on the web. The 2020 rebrand to **ABEMA** and the August 2021 product renewal formalized the idea in internal brand guidelines built around the concept of **"テレビの再発明" (the reinvention of television)**, presented publicly by Chief Creative Director 佐藤洋介 at CyberAgent Developer Conference 2022 — the goal being to infuse the service itself with "意思" (intent) so every touchpoint carries the brand.
+
+The design system reads as that thesis executed literally. The black canvas is the switched-on television in a dark living room; the yellow `#ddaa00` primary is the tuning lamp; the crimson LIVE tag inherits the red light of a broadcast studio. Free linear channels remain the front door — the World Cup 2022, which ABEMA streamed free in its entirety, became the brand's defining proof that "the new future of television" could out-broadcast broadcast — while ABEMA Prime news and the shogi/mahjong channels built daily-habit audiences television had stopped serving.
+
+What ABEMA refuses: the paywalled-catalog coldness of subscription-first streamers, light-mode editorial chrome, and interface decoration that competes with content. What it embraces: television's liveness culture (red means on-air), announcer-direct microcopy, broadcast-bold type, and a dark surface system disciplined enough to let thumbnails be the only color that matters.
+
+## 12. Principles
+
+1. **Liveness is the product.** ABEMA's identity is simultaneous experience — everyone watching the same moment. *UI implication:* the LIVE crimson badge (`#f0163a`) is sacred vocabulary; surface "now broadcasting" aggressively and never use its red for mere decoration.
+2. **The canvas is a switched-off screen.** Content supplies the light. *UI implication:* pure `#000000` background, `#212121` component surfaces, no paper shadows — separation through darkness, color through thumbnails.
+3. **One yellow, one meaning.** `#ddaa00` is the brand's entire action vocabulary. *UI implication:* links, primary CTAs, and checked states share the yellow; nothing else may borrow it, so the next action is never ambiguous.
+4. **Broadcast-bold, announcer-brief.** Television speaks in headlines. *UI implication:* weight 700 by default, microcopy in short imperatives, badges as one-word sentences.
+5. **Reinvent television, don't imitate apps.** From the brand concept "テレビの再発明". *UI implication:* keep televisual structures — channel rails, the EPG timetable (the one light surface), condensed timecode digits — instead of defaulting to generic streaming-app patterns.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable ABEMA audience segments (free linear-TV viewers, anime fans, shogi/mahjong communities, live-sports audiences), not individual people.*
+
+**佐々木蓮, 24, 東京.** A commuter who treats ABEMA as his pocket television — ABEMA Prime news in the morning, anime rails at night. Has never paid for a subscription and doesn't feel like a second-class user; the free linear front door is why he's loyal.
+
+**田中美咲, 31, 大阪.** A premium subscriber who came for a World Cup match her friends were all watching live and stayed for on-demand dramas. Values that "live" in ABEMA means genuinely simultaneous — the crimson badge is her cue to join the shared moment.
+
+**山本健一, 58, 名古屋.** A shogi devotee who keeps the shogi channel running for hours. Appreciates the dark, calm interface and the timetable's clarity; he navigates by the EPG like a newspaper TV section, exactly the metaphor ABEMA intends.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no results)** | Dark canvas stays; single `#e6e6e6` line stating no matches, with a `#ddaa00` link back to genres. No illustration noise on the black field. |
+| **Empty (my-list, none yet)** | `#999999` one-liner explaining the list is empty plus a yellow path to discover — calm, no guilt. |
+| **Loading (page/onload)** | Placeholder canvas at `#0b0b0b` (`--onload-bg-placeholder`); rails appear as they resolve. |
+| **Loading (cards)** | Skeleton cards: `#1c1c1c` thumbnail fill on `#212121` card body (`--bg-card-placeholder`), title bars in `#212121` — flat pulse, no shimmer gloss. |
+| **Error (display failed)** | Dedicated SorryPage on black: bold 24px/700 `#e6e6e6` heading "ABEMAの表示に失敗しました", apology line, and `#ddaa00` links to official status channels (measured live 2026-06-10). |
+| **Error (form/field)** | Danger color `#f0163a` for the message text (`--font-color-danger`), field keeps its `#212121` surface — error is typographic, not a glowing red box. |
+| **Maintenance / outage** | Full-bleed dark maintenance shell retaining brand tokens: black canvas, `rgba(23,23,23,.8)` chrome, `#ddaa00` links to x.com/ABEMA and help center. |
+| **Success (action saved)** | Notification block: `#212121` toast, 4px radius, leading `#ddaa00` label, `#e6e6e6` 16px/700 message. Brief, no celebration. |
+| **Skeleton** | `#1c1c1c` blocks at final dimensions inside `#212121` cards; text rows as `#212121` bars (`--bg-card-texts-placeholder`). |
+| **Disabled** | Opacity 0.4 on the whole control (`--button-opacity-disabled`) — yellow stays yellow, just dimmed, preserving the action vocabulary. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `--fading-duration` | 0.1s | Hover veils, button color/border transitions, suggest-list reveal |
+| transition (buttons) | 0.1s ease-out | Border and label color shifts on `com-a-Button` |
+| `--duration` | 0.5s | Page-level / carousel slide movements |
+| `--tooltip-controller-hover-delay` | 0.3s | Tooltip appearance delay |
+
+**Easings**:
+
+| Curve | Use |
+|---|---|
+| `linear` | Default (`--easing: linear`) — opacity fades, veil hovers |
+| `ease-out` | Button color/border transitions |
+| `cubic-bezier(.33, 1, .68, 1)` | Search-suggest panel reveal (easeOutCubic — fast in, soft settle) |
+
+**Motion rules**: Motion is utilitarian and nearly invisible — 0.1s fades dominate because a television interface must never feel like it's animating between channels. Hover states are opacity/veil changes (`hsla(0,0%,100%,.08)` white veil at 0.1s linear) rather than transforms; pressed states drop to opacity 0.7 instantly. The 0.5s budget is reserved for spatial moves like carousel paging. No spring, no bounce, no scale pops — liveness comes from the content, not the chrome. Under `prefers-reduced-motion: reduce`, fades collapse to instant; nothing in the interface depends on animation to communicate state.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 evidence (2026-06-10):
+- https://abema.tv live inspect (playwright getComputedStyle) — outage-day shell: black canvas,
+  rgba(23,23,23,.8) player chrome, #ddaa00 links, 4px radius, custom "CopyRight" font stack.
+- ABEMA web-app CSS bundle abema.tv/assets/registry.1bbd6d267a32e228541e6.css via
+  web.archive.org snapshot 2025-12-31 (origin assets rotated during the 2026-06-10 outage).
+  All :root token names/values (§1-6, §14-15) quoted verbatim from this brand-shipped artifact:
+  --abema-yellow #da0, --color-primary, --color-accent #f0163a, --dark-basic #212121,
+  --radius 4px, --duration 0.5s, --button-opacity-disabled 0.4, com-a-Button--* classes,
+  com-BroadcastingTag, com-m-NotificationBlock, com-a-Modal, etc.
+- https://times.abema.tv live inspect 2026-06-10 (brand-owned media surface, dark canvas).
+
+Brand philosophy:
+- CADC 2022 session "ABEMAにおけるサービスブランディング" (cadc.cyberagent.co.jp) — confirms
+  brand concept "テレビの再発明", internal ABEMA BRAND GUIDELINES, the "意思" (intent) framing,
+  and speakers 佐藤洋介 (Chief Creative Director) / 遠藤直人 (Art Director). Fetched 2026-06-10.
+- highlights.jp/project/abematv-branding/ — VI design + brand experience design project page,
+  "テレビをもう一度発明する" concept. Fetched 2026-06-10.
+- Widely documented public facts (not independently re-verified this turn): AbemaTV launch
+  April 2016 as CyberAgent-led JV with TV Asahi; Susumu Fujita's leadership; 2020 rebrand to
+  ABEMA; free full streaming of FIFA World Cup 2022; tagline 新しい未来のテレビ.
+
+Voice samples (§10) are verbatim: document title (archived snapshot 2026-01-01), player
+mute button + SorryPage strings (live/archived inspects this turn).
+
+Personas (§13) are fictional archetypes informed by publicly observable ABEMA audience
+segments. Names are illustrative; they do not refer to real people.
+
+Interpretive claims (e.g., "the black canvas is a switched-on television in a dark living
+room", "red means on-air first") are editorial readings connecting ABEMA's observed tokens
+to its stated brand concept, not directly sourced ABEMA statements.
+-->