Security & Privacy / iOS / Android / Web

Mullvad VPN

Mullvad keeps the interface plain: one navy palette shared by every platform, traffic-light colors for connection state, and white text at fixed opacities, with no decoration.

Download
  • #294D73
  • #192E45
  • #44AD4D
  • #E34039
  • #FFD524
  • #F8F7F1

Color

Every color token in the file, grouped by role.

Brand

  • primary#294D73
  • primary deep#192E45
  • primary deepest#0F1724
  • on primary#FFFFFF
  • ink secondary#7A7A7A
  • dark ink secondary#A3ABB5
  • dark primary#44AD4D

Surfaces

  • surface dark#1A2638
  • paper#FFFFFF
  • canvas#F5F5F5
  • code bg#363636
  • dark bg#192E45
  • dark surface#294D73

Text

  • link#366699
  • ink#4A4A4A
  • field disabled#959495
  • dark ink#FFFFFF

Lines

  • divider#DBDBDB

Status

  • info#588CC3
  • success#44AD4D
  • success on white#008A00
  • danger#E34039
  • danger on white#E03127
  • warning#FFD524

More

  • panel sand#F8F7F1

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Source Sans ProOpen font, listed in the open library as Source Sans 3.
  • Open SansOpen font, shown as published.
  • Source Code ProOpen font, shown as published.
  • heading24px / 600 / 1.25

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • label15px / 600 / 1.3

    Continue to checkout

  • mono14px / 400 / 1.5

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • chip8px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secure
    button-secure
  • button danger
    button-danger
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 93 lines
version: alpha
name: Mullvad-VPN-design-analysis
description: "A VPN app that is deliberately plain: one deep navy palette (#294d73 over #192e45) used by Android, iOS, desktop and the website, with traffic-light green and red for connection state, white text at fixed opacities and no brand flourish. The same hex values appear on every platform."
status: Draft
appVersion: "source snapshot of the public repository and mullvad.net, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#294d73"
  primary-deep: "#192e45"
  primary-deepest: "#0f1724"
  surface-dark: "#1a2638"
  link: "#366699"
  info: "#588cc3"
  success: "#44ad4d"
  success-on-white: "#008a00"
  danger: "#e34039"
  danger-on-white: "#e03127"
  warning: "#ffd524"
  on-primary: "#ffffff"
  ink: "#4a4a4a"
  ink-secondary: "#7a7a7a"
  paper: "#ffffff"
  canvas: "#f5f5f5"
  panel-sand: "#f8f7f1"
  divider: "#dbdbdb"
  field-disabled: "#959495"
  code-bg: "#363636"
  dark-bg: "#192e45"
  dark-surface: "#294d73"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#a3abb5"
  dark-primary: "#44ad4d"

typography:
  heading:
    fontFamily: "'Source Sans Pro', 'Open Sans', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
  body:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "'Open Sans', sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.3
  mono:
    fontFamily: "'Source Code Pro', monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5

rounded:
  chip: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.chip}"
    height: 48px
  button-secure:
    backgroundColor: "{colors.success-on-white}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.chip}"
    height: 48px
  button-danger:
    backgroundColor: "{colors.danger-on-white}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.chip}"
    height: 48px
  card-dark:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.chip}"
    padding: 16px

Overview

Mullvad VPN looks like a tool, not a product launch. The apps sit on a dark navy, the website is nearly white with sand panels, and status is told with plain colors: green for secured, red for unsecured, yellow for warnings. The Windows, Android and Apple apps are almost identical, and the Android home screen drops the desktop map. [Observed]

What defines the look:

  1. One navy, many layers. The primary #294d73 and deeper #192e45 are the same values in Android, iOS and the website. Container layers are the primary blended over the deep navy at 10 to 80 percent. [Measured]
  2. Status colors as the interface. The connect button and header turn green when secured and red when not. [Measured]
  3. White at set opacities. Secondary text is white at 60 percent on navy. [Measured]
  4. No decoration. No gradients or shadows were found in the token files. [Inferred]

Source for this file: the public Mullvad VPN source (Android, iOS and desktop) and the mullvad.net stylesheet, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleValueWhere
Primary navy#294d73Android, iOS, web
Deep navy (background)#192e45Android, iOS, web
Deepest navy#0f1724iOS
Dark surface#1a2638iOS (50 percent layer)
Link blue#366699web
Info blue#588cc3web
Success#44ad4d (#008a00 on white)all
Danger#e34039 (#e03127 on white)all
Warning#ffd524all
Text on navy#ffffff, 80 and 60 percent for secondaryiOS and Android
Web text#4a4a4a, secondary #7a7a7aweb
Web panel#f8f7f1, borders #dbdbdb, page grays #f5f5f5web

All values are [Measured]. iOS stores them as 0 to 1 floats and the values above are converted. The Android dark scheme uses navy for background and surface, the primary blue for outline, and white for text.

Typography

The desktop app bundles Open Sans and Source Sans Pro, and mullvad.net uses Source Sans Pro for headings (weight 600) and Source Code Pro for code. [Measured] The font used by the Android and iOS apps was not read, so system fonts are assumed. [Inferred] Sizes were not extracted from the mobile code.

Shape and spacing

Android defines a chip shape with an 8dp corner. Other shapes come from Material defaults. [Measured] The website focus outline is a 2px solid warning-yellow ring with a small .1rem radius. [Measured] Spacing values were not extracted.

Iconography and motion

Simple glyphs in white on navy, plus a map with location markers and globe colors on Android and desktop. [Measured for the map colors] The website defines a set of easing curves (the ease-1 to ease-5 families) but their use in the apps was not checked. [Measured]

Themes

The apps are dark-first with a navy scheme. A light token file exists on Android, but whether the shipped app exposes a light theme was not confirmed. [Measured for the file, Inferred for use] The website is light.

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Standard navigation with a back control on a navy bar. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A single main screen with a connect action and a settings entry. No tab bar was confirmed. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A large connect or disconnect button on the main screen, colored by state. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Alerts and sheets styled in navy with white text. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Text fields use a white fill with navy text when active and white at 10 percent when inactive. A switch uses the success color for its on thumb. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

Dynamic Type support was not checked. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom glyphs, not SF Symbols for the main controls. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Mullvad uses an account number rather than email or a third-party login, so Guideline 4.8 is likely not triggered. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

Controls with an appearance layer that overrides colors. The app keeps iOS navigation but replaces system colors with the navy palette. [Inferred]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back plus an up arrow in the top bar. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A main screen with a connect action and a settings route. No bottom navigation was confirmed. [Inferred]

Main action

Expected on Android: Floating action button.

A prominent connect and disconnect button. A floating action button was not confirmed. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Material dialogs and bottom sheets in the navy scheme. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls with custom text field colors and extended color roles for positive, warning, highlight and disabled variants. [Measured]

Text sizing

Expected on Android: Font scale.

Not checked against the system font scale. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom vector icons and a map component with location marker colors. [Measured]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Account number login. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

A full Material 3 color scheme mapped to the navy palette, with surface container roles built from primary blended over background at 10, 20, 40 and 60 percent. [Measured]

Platform: Web

The mullvad.net stylesheet was read. The web account area was not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and top navigation links. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

A top navigation with page sections. [Inferred]

Main action

Expected on Web: Page-level button.

Page-level download and account buttons. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Form controls have a disabled color of #959495. Focus is a 2px solid warning outline. [Measured]

Text sizing

Expected on Web: Browser zoom.

Not measured in detail. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the marketing pages. [Inferred]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Plain web CSS with custom properties. Success and danger have separate on-white values (#008a00, #e03127) so text stays readable. [Measured]

Cross-platform consistency

Consistent across platforms: the navy palette, traffic-light status colors, plain styling and an account-number model. [Measured]

Intentionally different: the website is light with sand panels while the apps are dark, and the Android home screen drops the desktop map. [Observed]

Do's and Don'ts

Do

  • Build every layer from one navy and its opacities.
  • Use green and red to show connection state, not decoration.
  • Use the on-white success and danger values for text on light pages.
  • Keep the interface plain and dense with information.

Don't

  • Don't add a second brand color.
  • Don't use the bright success green #44ad4d for small text on white. It is below 4.5 to 1.
  • Don't hide state behind icons alone. The color and label change together.

Known Gaps

  • No on-device capture was done. All statements come from reading source and a stylesheet.
  • Mobile typefaces, font sizes, corner radii other than the 8dp chip, and spacing were not measured, so the corner radius on buttons in the components block is inferred.
  • Whether a light theme is exposed in the shipped app was not confirmed.
  • Account deletion and store policy rules were not verified for either app.