Mullvad VPN

Colors

• #1d2d44Dark Navy Background · background
• #ffffffWhite Text · titles · input text · labels
• #2e7d32Green Button · button fill
• #e0e0e0Keypad Background · keyboard
• #90caf9Input Border · border

Type

• TitleSF Pro · 42px · bold · #ffffff
• LabelSF Pro · 24px · medium · #ffffff
• Input TextSF Pro · 26px · regular · #ffffff
• ButtonSF Pro · 26px · semibold · #ffffff
• Keypad TextSF Pro · 36px · regular · #000000

Elements

• Account Number Input · text_field

  Below title and label, spans most of the screen width · Dark fill with a light blue border and rounded corners

• Log In Button · button

  Centered below input field · Green rounded rectangle with white text

• Create New Account Button · button

  Centered below 'Or' divider · Outlined rounded rectangle with dark fill

• Numeric Keypad · keyboard

  Pinned to the bottom of the screen · Standard iOS style numeric keypad with white keys on light grey background

Layout

Vertical stack with top bar, login header, input field, primary and secondary action buttons, and a numeric keyboard filling the lower half.

Notes

Login screen with numeric keyboard active for account number entry.