---
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.
-->


---
Source: https://oh-my-design.kr/design-systems/abema · Raw twin of references/abema/DESIGN.md
Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills