---
id: streaming-disney-design-en
service: Disney+
website: https://www.disneyplus.com
category: streaming
document: DESIGN.MD
source_prompt: streaming-disney-representative-en
language: en
generated: 2026-07-18
---

# Disney+ DESIGN.MD

> Use this DESIGN.MD as the persistent design standard before building a Video and streaming site or app. It can be given directly to designers, frontend engineers, AI builders, and coding agents. Disney+ is an information-architecture reference only.

## Purpose

- Disney+: https://www.disneyplus.com
- Video and streaming: content discovery and playback
- titles, seasons, and playlists
- playback focus and continue-watching
- streaming

## Design brief

Create an original product that supports content discovery and playback. Make titles, seasons, and playlists easy to scan, compare, and act on. Treat playback focus and continue-watching as a primary design constraint. Starting direction: immersive media · dark and immersive · medium information density · featured media -> horizontal content rails -> play or save -> account state · #113CCF · Disney+.

## Public interface design analysis

- Reference basis: These are recurring visual and structural patterns from public landing screens and representative task flows. Verify the current live capture because services change over time.
- Interface archetype: immersive media
- Tone and manner: dark and immersive
- Information density: medium
- Color strategy: high-contrast brand accents on dark surfaces (#113CCF)
- Navigation model: lightweight top navigation
- Structural sequence: featured media -> horizontal content rails -> play or save -> account state
- Reusable patterns: media hero, content rail, play action, continue card, profile menu
- Independent application rule: Use the order and decision principles only. Do not reproduce logos, copy, imagery, icons, or proprietary screen composition.

## Screen architecture

- Global navigation with clear current location and account state
- Overview that exposes the next important action for titles, seasons, and playlists
- Search, filter, sort, or segmented views only where they reduce decision cost
- Detail view that keeps context, status, evidence, and the primary action together
- Persistent help, recovery, privacy, and safety access for playback focus and continue-watching

## Design tokens

```css
:root {
  --color-primary: #113CCF;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #113CCF22;
  --color-danger: #DC2626;
  --radius-control: 6px;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --content-reading: 720px;
  --content-wide: 1280px;
}
```

## Component specifications

- Navigation: active, hover, focus, disabled, and collapsed states
- Cards and rows: stable dimensions, realistic content, metadata hierarchy, and complete click targets
- Forms: labels, descriptions, validation, error summary, progress, and recovery
- Actions: one clear primary action per region; icon buttons require accessible names and tooltips
- Feedback: inline status, toast, banner, skeleton, progress, confirmation, and destructive-action dialog

## State design

For every data-driven region, define loading, empty, partial-data, stale, error, offline, permission-denied, disabled, saving, and success states. Keep layout dimensions stable so state changes do not shift surrounding content.

## Responsive rules

- 360px: one primary column, no horizontal page scroll, 44px touch targets
- 768px: preserve context with two panes only when each pane remains readable
- 1280px and above: constrain reading width and use extra space for comparison or persistent context
- Never scale type with viewport width; wrap long labels and localize for text expansion

## Accessibility requirements

- Semantic landmarks and heading order
- Complete keyboard operation with visible focus
- WCAG AA contrast in all states
- Programmatic labels, descriptions, errors, and live regions
- 200% zoom, reduced motion, forced colors, and screen-reader verification

## Design instruction for AI builders

```text
Design an original Video and streaming interface for [Product name]. Its goal is content discovery and playback; its core objects are titles, seasons, and playlists; its critical risk is playback focus and continue-watching. Use the token system and screen rules in this document. Specify realistic content, component contracts, all data states, responsive behavior, accessibility, and acceptance criteria. Do not copy Disney+'s logo, proprietary copy, images, or exact layout.
```

## Completion checklist

- [ ] The critical path for content discovery and playback is obvious without explanation
- [ ] titles, seasons, and playlists have clear hierarchy, status, and actions
- [ ] playback focus and continue-watching has prevention and recovery
- [ ] Mobile, tablet, desktop, keyboard, screen reader, zoom, and reduced motion are verified
- [ ] Loading, empty, error, offline, partial, permission, and success states are complete
- [ ] No protected brand asset or pixel-level layout from Disney+ is reproduced