Marvel Unlimited

Colors

• #242426sheet-background · modal background
• #323235input-surface · text field background
• #FFFFFFprimary-text · title text · active input cursor
• #A0A0A5secondary-text · body copy · placeholder text · requirement labels
• #2997FFaccent-blue · interactive edit link · keyboard accessory Done button
• #2E2E32accessory-bar-surface · keyboard toolbar background

Type

• titleSF Pro Display · 52px · 700 · #FFFFFF
• bodySF Pro Text · 28px · 400 · #A0A0A5
• input-labelSF Pro Text · 24px · 400 · #A0A0A5
• requirement-labelSF Pro Text · 26px · 400 · #A0A0A5
• action-buttonSF Pro Text · 28px · 600 · #2997FF

Elements

• Password Input Field · text_field

  Centered horizontally, margin ~48px left and right, height ~110px, padding ~16px 24px · Dark rounded rectangle fill with subtle bottom active line indicator, floating label, active vertical white cursor, and eye visibility toggle icon at trailing edge

• Password Requirement Checklist · list

  Vertical stack placed ~24px below password input, each item contains a circular indicator and descriptive text · Unfilled circular border outlines with muted grey descriptive text alongside

• Keyboard Accessory Toolbar · toolbar

  Spanning full width horizontally across the lower middle of the viewport, overlaying sheet content · Dark slate background with top divider line, previous/next chevron buttons on the left and 'Done' text button on the right

Layout

Modal sheet presentation scrolled slightly upwards where the page heading collides with the system status bar. Lower content is partially occluded by the active iOS soft keyboard accessory bar.

Notes

System typography is consistent with Apple SF Pro. Visual overlap occurs between the sheet header text and status bar indicators due to keyboard appearance.