--- 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 | Role | Value | Where | |------|-------|-------| | Primary navy | `#294d73` | Android, iOS, web | | Deep navy (background) | `#192e45` | Android, iOS, web | | Deepest navy | `#0f1724` | iOS | | Dark surface | `#1a2638` | iOS (50 percent layer) | | Link blue | `#366699` | web | | Info blue | `#588cc3` | web | | Success | `#44ad4d` (`#008a00` on white) | all | | Danger | `#e34039` (`#e03127` on white) | all | | Warning | `#ffd524` | all | | Text on navy | `#ffffff`, 80 and 60 percent for secondary | iOS and Android | | Web text | `#4a4a4a`, secondary `#7a7a7a` | web | | Web panel | `#f8f7f1`, borders `#dbdbdb`, page grays `#f5f5f5` | web | 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.