Marvel Unlimited

Colors

• #093863background-behind-sheet · underlying screen background
• #ED1D24marvel-red · Marvel brand banner fill
• #222224sheet-surface · modal bottom sheet background
• #323236input-surface · password field background
• #FFFFFFtext-primary · sheet title · input dots · brand logos
• #A1A1A6text-secondary · body copy · placeholder text · advisory notice · checkbox labels
• #30D158success-green · strength progress bar fill · strength label text · satisfied requirement checkmark icons
• #3A3A3Ccontrol-circle-surface · top bar circular back and close button backgrounds

Type

• page-titleSF Pro Display · 54px · 700 · #FFFFFF
• bodySF Pro Text · 28px · 400 · #A1A1A6
• strength-labelSF Pro Text · 26px · 700 · #30D158
• checklist-labelSF Pro Text · 26px · 400 · #A1A1A6
• consent-labelSF Pro Text · 27px · 400 · #FFFFFF

Elements

• Top Navigation Header · navigation_bar

  Horizontal row spanning ~72px height, pinned below iOS status bar with left back arrow, centered Marvel logo banner, and right close button · Semi-transparent dark circular buttons with white glyphs; centered bold red rectangular banner with condensed white Marvel logotype

• Modal Sheet Container · card

  Bottom sheet occupying ~85% of screen height with top rounded corners and padding ~48px left and right · Solid dark slate surface with distinct rounded top corners resting over the darker blue navigation backdrop

• Password Input Field · text_field

  Full sheet content width, height ~110px, containing label, masked characters, and visibility toggle · Dark grey fill with subtle bottom border line, round masked character dots, and right eye-with-slash outline icon

• Password Strength Indicator · progress_bar

  Row positioned ~16px below input field, horizontal bar on the left with trailing 'Great' text indicator · Vibrant solid green horizontal rounded capsule bar paired with matching green bold text

• Password Requirements · list

  Vertical list spaced ~12px apart below the strength indicator · Circular green icons containing white checkmarks, accompanied by secondary grey requirement descriptions

• Marketing Consent Checkboxes · checkbox

  Stacked checkboxes in the lower sheet region, aligned left with wrapped multi-line agreement text to the right · Unchecked square boxes with muted grey borders and dark interior fills

Layout

Layered interface composed of an underlying blue screen with a branded navigation bar and a raised modal bottom sheet containing brand attribution, heading, password form with real-time validation, and consent checkboxes.

Notes

Primary sans-serif closely resembles Apple SF Pro. MyDisney uses its signature custom script logotype.