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

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

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

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.

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

15. Motion & Easing

Durations:

Easings:

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.