primary
#3DDEFF
Primary CTA and focus.
01 / Colors
Cool accents against theatrical blacks.
Cyan is scarce and deliberate. Most other colors either deepen the stage or support utility copy and service states.
accentHover
#66BCFF
Lifted hover tone.
accentPressed
#056D85
Pressed state and help brand.
brand-container
#124954
Premium teal panel.
canvas
#17171C
Default streaming shell.
surface-low
#121118
Footer and overlay footing.
surfaceAlt
#25272C
Cards, FAQ, plan modals.
ink
#040714
Deepest black-blue base.
on-dark
#FAFAFA
Bright headline text.
body
#B7B8BD
Lead copy and metadata.
muted
#6F717B
Rules and secondary chrome.
help-canvas
#F6F7F8
Support shell background.
help-surface
#FFFFFF
Help cards and search.
help-link
#0B7AAD
Help links.
warning
#FFDE66
Legal attention.
error
#CA1F16
Error state.
02 / Typography
One family, disciplined hierarchy, little noise.
Scale, brightness, and restraint do most of the work. Premium feeling comes from quiet surroundings.
displayImagine a bigger world.
heroCurated premieres across every franchise.
headline-lgStreaming headlines stay bold.
headline-mdUtility sections stay compact.
title-lgBundle comparison
title-mdPlan features and carousel headings
title-smContinue watching
bodyBody copy stays cool gray and highly readable.
body-smallMetadata, labels, and explanatory text live here.
labelFORM LABEL / ACCOUNT SETTING
legalOffer terms apply. Eligibility varies by market.
03 / Buttons
Bright conversion, subdued utility.
Most actions are either a cyan commitment or a nearly black utility control with a thin edge.
04 / Cards & Surfaces
Cards behave like modules inside a media product, not like soft SaaS tiles.
The brand prefers strong contrast, poster masking, and cyan-lined separation over fluffy elevation.
Hero Poster Panel
Wide framing with arc overlays and minimal flourish.
Flip Info Card
Teal-dark educational panel for bundle and feature messaging.
Marvel SpotlightCollection
collection-rail-card
FAQ Accordion Row
Rounded answer block with one cyan affordance.
05 / Brand-Specific Product Patterns
Rails, bundles, FAQs, and support pivots.
These mockups map to real Disney+ behaviors: browse rows, plan comparison, episode lists, FAQ stacks, and bright help mode.
Poster Rail
Pixar
Star Wars
Nat Geo
Disney
Flip Education Cards
Bundle PerksAd-Supported
Denser utility copy in the same dark shell.
Ad-Free
Premium upgrade without a new visual language.
Bundle Comparison Grid
PricingFeature
Disney+
Bundle Duo
Bundle Trio
Ads
No
Yes
No
Live Sports
Optional
No
Included
Monthly Price
$15.99
$10.99
$26.99
FAQ Stack
SupportWhat is included with Disney+?+
Which plans include ads?+
Can I switch from monthly to annual?+
Help Center Pivot
Search articles, billing, and troubleshooting
Price changes and bundlesArticle
Ads on Disney+Guide
Cancel or restart subscriptionAccount
06 / Forms
Forms belong to the help and account world, not the cinematic browse world.
Inputs shift into the lighter support palette with 4px radii, white surfaces, and clear border-state changes.
07 / Spacing
Spacing ramps quickly from tight metadata to broad cinematic breathing room.
The jump from 8 and 16px UI spacing into 40 and 56px section rhythm gives the layout its streaming composure.
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
section
56px
08 / Radius
Radii stay controlled so posters and grids still feel architectural.
Disney+ is not a bubbly brand. Most corners are 4, 8, or 12px, with 24px saved for broader FAQ and panel shells.
sm
4px
Help fields and support buttons
md
8px
Primary buttons and utility shells
lg
12px
Flip cards and content cards
xl
24px
FAQ rows and broad panel frames
pill
9999px
Plan chips and compact status badges
09 / Elevation
Depth mostly comes from contrast, overlays, and masks instead of fluffy shadows.
The streaming shell is largely flat. Hierarchy comes from darker footing and outline changes rather than stacked card shadows.
Flat Surface
Default modules use no shadow. Separation comes from surface shifts and light copy.
box-shadow: none;
Line Emphasis
Utility cards gain presence through a faint structural outline.
0 0 0 1px rgba(111,113,123,.45)
Overlay Contrast
Hero and modal moments gain depth through darker underlays and rim borders.
box-shadow: none;
10 / Extracted Component Tokens
Core custom properties for the Disney+ preview layer.
These variables mirror the extracted system so the preview stays brand-native and editable.
:root {
--primary: #3DDEFF;
--accent-hover: #66BCFF;
--accent-pressed: #056D85;
--ink: #040714;
--canvas: #17171C;
--surface-alt: #25272C;
--surface-low: #121118;
--surface-high: #2C2E35;
--body: #B7B8BD;
--muted: #6F717B;
--border-strong: #4A4D59;
--help-canvas: #F6F7F8;
--help-surface: #FFFFFF;
--help-brand: #056D85;
--success: #65DCA1;
--warning: #FFDE66;
--error: #CA1F16;
--font-brand: "Outfit", "Segoe UI", system-ui, sans-serif;
--display-size: 72px;
--hero-size: 40px;
--headline-lg: 32px;
--title-md: 20px;
--body-size: 16px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 24px;
--radius-pill: 9999px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-section: 56px;
--shadow-flat: none;
--shadow-line: 0 0 0 1px rgba(111,113,123,.45);
}