Mullvad VPN

Colors

• #1d2d44Dark Navy Background · background
• #0a0e14Dimmed Background Overlay · overlay
• #212b36Action Sheet Background · modal fill
• #64b5f6Light Blue Text · modal options
• #29b6f6Bright Blue Text · cancel button

Type

• Modal HeaderSF Pro · 24px · medium · #90caf9
• Modal OptionSF Pro · 32px · regular · #64b5f6
• Cancel ButtonSF Pro · 34px · bold · #29b6f6

Elements

• Action Sheet Modal · dialog

  Bottom sheet overlaying the main content · Rounded rectangle card with dark grey fill and subtle border/shadow

• Cancel Button · button

  Bottom of the action sheet, slightly separated · Rounded card with dark fill and bright blue text

Layout

Bottom action sheet modal overlaid on top of the account success screen, presenting time purchase options and a cancel button.

Notes

Action sheet showing options to buy 30 or 90 days of time.