---
id: streaming-apple-tv-design-en
service: Apple TV+
website: https://tv.apple.com
category: streaming
document: DESIGN.MD
source_prompt: streaming-apple-tv-representative-en
language: en
generated: 2026-07-18
---

# Apple TV+ 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. Apple TV+ is an information-architecture reference only.

## Purpose

- Apple TV+: https://tv.apple.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 · #111111 · Apple TV+.

## 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 (#111111)
- 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: #111111;
  --color-ink: #F8FAFC;
  --color-canvas: #090A0B;
  --color-surface: #141619;
  --color-tint: #11111155;
  --color-danger: #FB7185;
  --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 Apple TV+'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 Apple TV+ is reproduced