Marvel Unlimited

Colors

• #22252aModal Background · Sheet background
• #ffffffActive Border White · Focused input field border outline · Text cursor
• #e21b24Action Button Red · Continue button fill
• #1b1c1eKeyboard Background · iOS soft keyboard backdrop
• #54575cKey Cap Surface · Keyboard letter keys fill
• #37383cKey Cap Function · Special keys fill (shift, delete, 123, space)
• #ffffffKey Label White · Keyboard glyphs and text
• #0a84ffAccessory Blue · 'Done' accessory button text

Type

• Input Floating LabelSF Pro Text · 30px · 400 · #b0b6c1
• Keyboard Accessory ActionSF Pro Text · 38px · 600 · #0a84ff
• Keyboard Key CharacterSF Pro Display · 48px · 400 · #ffffff

Elements

• Active Email Input Field · text_field

  Full width of sheet, height ~150px, above continue button. · Dark fill with crisp 2px solid white border, floating 'Email' caption, and blinking vertical cursor.

• Keyboard Accessory Toolbar · toolbar

  Directly above soft keyboard, height ~90px, spanning full screen width. · Dark translucent strip featuring navigation chevrons on left and blue 'Done' button on right.

• iOS Virtual Keyboard · keyboard

  Occupying bottom 850px of viewport. · German QWERTZ dark mode soft keyboard with rounded keycaps, globe, mic, and enter icons.

Layout

Active input state with viewport partially occluded by the system soft keyboard and keyboard input accessory strip.

Notes

Shows active focus state where the input field border highlights white and placeholder transforms into a floating label.