--- version: alpha name: Proton-VPN-design-analysis description: "A privacy product on the Proton brand: a signature violet (#6d4aff) with a dark, ink-purple dark mode (#1c1b24), and a distinct VPN green (#1c9c7c on light, #2cffcc on dark) that signals a live connection. Type is Proton's own sans, geometric and serif families. The Android app builds on a shared Proton theme and goes fully edge to edge." status: Draft appVersion: "Android app 5.20.57.0 measured on an Android phone, 2026-10-07; source snapshot 2026-10-06" platformsCovered: [iOS, Android, Web] reviewer: "" verifiedAt: "" colors: primary: "#6d4aff" primary-light: "#8a6eff" primary-active: "#c4b7ff" primary-disabled: "#372580" primary-pale: "#e2dbff" primary-wash: "#f7f5ff" vpn-green: "#1c9c7c" vpn-green-dark-mode: "#2cffcc" vpn-teal-product: "#1f7170" ink-deep: "#1b1340" ink-night: "#08031f" ink-dusk: "#40395f" text-secondary-dark: "#a7a4b5" dark-bg: "#1c1b24" dark-bg-weak: "#292733" upsell-bg: "#191927" upsell-border-start: "#4b29d9" upsell-border-end: "#2cdccb" product-mail: "#6d629b" product-calendar: "#205c8a" product-drive: "#92356a" gray-border: "#e5e7eb" gray-muted: "#9ca3af" gray-wash: "#f6f7f9" warning-amber: "#ca8a04" paper: "#ffffff" on-primary: "#ffffff" typography: # Font note: "ProtonGeometric" is a private font and is not available in open fonts. Closest open alternative: "Outfit". # Font note: "ProtonSans" is a private font and is not available in open fonts. Closest open alternative: "Inter". display: fontFamily: "ProtonGeometric, ProtonSerif, ui-serif, Georgia, serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 heading: fontFamily: "ProtonSans, ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.3 body: fontFamily: "ProtonSans, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 small: fontFamily: "ProtonSans, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 rounded: sm: 4px md: 8px lg: 16px xl: 24px pill: 9999px spacing: xs: 4px sm: 8px base: 16px lg: 24px xl: 32px content-medium: 56px content-expanded: 128px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.md}" height: 48px button-primary-dark: backgroundColor: "{colors.primary-light}" textColor: "{colors.ink-night}" typography: "{typography.body}" rounded: "{rounded.md}" height: 48px card-dark: backgroundColor: "{colors.dark-bg-weak}" textColor: "{colors.paper}" rounded: "{rounded.lg}" padding: 16px upsell-panel: backgroundColor: "{colors.upsell-bg}" textColor: "{colors.paper}" rounded: "{rounded.lg}" padding: 24px --- ## Overview Proton VPN looks secure, modern and a little premium. It is a sibling of the Proton product family, so the violet `#6d4aff` and the Proton typefaces anchor it, and a bright VPN-specific green says "connected". Dark mode is a rich ink-purple, not neutral gray, which makes the dark UI feel like part of the brand. [Measured] Three decisions define the look: 1. **Proton violet for brand and action, green for connection state.** Interactive elements use `#6d4aff` (lighter `#8a6eff` on dark), and a separate green marks the VPN being on: `#1c9c7c` in light mode and the brighter `#2cffcc` in dark mode. [Measured] 2. **Ink-purple darks.** Dark backgrounds are `#1c1b24` with a lifted `#292733` for cards, and the upsell surface is `#191927`. Text secondary on dark is `#a7a4b5`. [Measured] 3. **A family of product colors.** On the website the Proton products each get a color: Mail `#6d629b`, Calendar `#205c8a`, Drive `#92356a` and VPN `#1f7170`. [Measured] Source for this file: the public Android and iOS and macOS repositories (the shared Proton core theme library is not in them) and protonvpn.com, read on 2026-10-06, plus the Android app captured on a real phone on 2026-10-07. The Android section is now measured on the device. iOS is still unseen. See Known Gaps. ## Core ### Colors | Role | Light | Dark | |------|-------|------| | Brand and interactive | `#6d4aff` | `#8a6eff` | | Interactive active | | `#c4b7ff` | | Interactive disabled | | `#372580` | | Pale violet fill | `#e2dbff` | | | Violet wash | `#f7f5ff` | | | VPN connected green | `#1c9c7c` | `#2cffcc` | | VPN product color (web) | `#1f7170` | | | Background | `#ffffff` | `#1c1b24` | | Card and weak background | `#f6f7f9` | `#292733` | | Secondary text | `#9ca3af` | `#a7a4b5` | | Deep ink | `#1b1340` | `#08031f` | | Upsell surface | | `#191927` | | Upsell border gradient | `#4b29d9` to `#2cdccb` | | | Warning accent | `#ca8a04` | | All [Measured]. Upsell glows use gradients from teal `#11d8cc` at 40 percent to blue `#4092e6` at 20 percent to violet `#6e4bff` at zero. The Android app was then sampled on a device, and its surface ladder does not match the website's grays. These are the values the shipping app draws, and they replace the web figures for anything about the app: | Role in the app | Light | Dark | |------|-------|------| | Page background | `#ffffff` | `#1c1b24` | | Elevated surface (cards, bottom bar) | `#f5f4f2` | `#292733` | | Card border | `#eae7e4` | `#3b3747` | | List divider | `#f4f2f1` | `#2b2835` | | Body text | `#0c0c14` | `#ffffff` | | Secondary text | | `#a7a4b5` | | Brand and filled buttons | `#6d4aff` | `#6d4aff` | | Section headers and text buttons | | `#8a6eff` | | Navigation pill indicator | `#c9bdf6` | `#483e75` | | Unselected navigation | | `#a7a4b5` | | Drag handle | | `#6d697d` | All [Measured on a device]. The light surface is a warm off-white `#f5f4f2`, not the cool `#f6f7f9` the website uses, so the app's light mode is a shade warmer than the web. The brand violet is the same `#6d4aff` in both themes on Android: the lighter `#8a6eff` is used for section headers, text buttons and the selected navigation label, not as a dark-mode substitute for the fill. ### Typography Proton's own fonts on the web: ProtonGeometric for display, ProtonSans for interface text and ProtonSerif for editorial accents, each with system fallbacks. Sizes include 1.125rem, 1.25rem and 3rem. [Measured] The apps use Proton Core's typography, which is not part of the repositories read. [Inferred] ### Shape and spacing Not extracted in the apps beyond content width rules. Android sets a maximum content width of `800dp`, adds `56dp` extra horizontal padding on medium windows and `128dp` on expanded windows, and centers content on very wide screens. [Measured] ### Iconography and motion Simple outlined icons in the brand or text color, with a status green on the connection control. Gradient glows are used on upsell panels. [Inferred] ### Themes Light, dark and an optional black variant on Android (a separate `black` theme file exists). Follows system by default. [Measured] ## 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 controllers. [Inferred] ### Primary navigation Expected on iOS: bottom tab bar, about five items. A bottom tab bar for the home or connection screen, countries, profiles and settings. Not verified in the files read. [Inferred] ### Main action Expected on iOS: nav bar or bottom bar button. A large connect button on the home screen is the main action. [Inferred] ### Sheets, dialogs and messages Expected on iOS: action sheets, alerts, modals. Upsell sheets with gradient borders. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Custom toggle styles are used, at least on macOS. [Measured] ### Text sizing Expected on iOS: Dynamic Type. Not verified. [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 icons. [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. Proton account only. No third-party social login was found. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on iOS: system components. Custom brand styling over a standard iOS structure. [Inferred] ## Platform: Android How the Android app looks and behaves. Values marked as measured on a device come from the running app on an Android phone at a system font scale of 0.8, with the app on its own Dark theme, which is what this install was set to. Every size is given in dp, so it is independent of the screen it was read from. ### Back and up navigation Expected on Android: system back and gesture, up arrow in the top bar. Top-level screens carry no back control. Nested screens, such as the theme chooser reached from Settings, put a `64dp` top bar above the content with a back arrow on the left, drawn as a `32dp` glyph inside a `48dp` target at a `4dp` inset from the window edge, and the screen title beside it. [Measured on a device] One window hosts every screen, so back unwinds the app's own screen stack rather than a stack of system windows. Traced with the back key from the theme chooser: theme chooser, then Settings, then the Home tab, then out to the device home screen. Back from a non-Home tab therefore returns to Home before it leaves the app, which is the behavior Material asks for. [Observed on a device] ### Primary navigation Expected on Android: navigation bar, rail on tablets. A bottom navigation bar with four tabs, in this order: Home, Countries, Profiles, Settings. [Measured on a device] The bar measures `80dp` tall and sits on the elevated surface `#292733`, one step lighter than the `#1c1b24` page behind it. Each tab is `90dp` wide on a `98dp` pitch, with a `24dp` icon over a label box measuring `11dp` at font scale 0.8. [Measured on a device] The selected tab carries the Material 3 pill indicator, `56x48dp` filled `#483e75` on dark and `#c9bdf6` on light, with the icon and label in `#8a6eff` on dark and `#6d4aff` on light. Unselected items are `#a7a4b5`. [Measured on a device] Top-level screens open with a `141dp` header holding a large screen title. Scrolling collapses it into a `64dp` bar that takes the elevated surface, so the title shrinks from a `26dp` box to a `15dp` one and the bar separates itself from the content by color rather than by a shadow. [Measured on a device] The app adapts to window size classes (compact, medium and expanded), so the bar is expected to become a rail on a tablet. That was not seen, because only a phone was captured. [Measured for the size classes, Inferred for the rail] ### Main action Expected on Android: floating action button. There is no floating action button anywhere. Ten screen captures covering the connection screen, the country list, Settings, the theme chooser, a bottom sheet and both themes contain none. [Observed on a device] The main action is a filled button inside the connection card instead: `320x48dp`, corner radius `8dp`, filled `#6d4aff` with a white label, sitting below the server row in a card that spans the full content width. [Measured on a device] Putting the one destructive-feeling action inside the card it belongs to, rather than floating it over the map, keeps the connect control tied to the server it will use. ### Sheets, dialogs and messages Expected on Android: bottom sheets, dialogs, snackbars. Bottom sheets carry the secondary surfaces. The free-connection sheet measured `417dp` tall, which is half the window, and settled at a content-driven height rather than a fixed peek. [Measured on a device] A sheet takes the page background `#1c1b24` rather than the elevated card color, rounds its top corners at about `28dp`, and centers a `32x4dp` drag handle in `#6d697d` some `22dp` below its top edge. The screen behind it dims under a black scrim measured at about 40 percent. [Measured on a device] Tapping the dimmed area above the sheet closes it. [Observed on a device] Dismissible promotional banners appear inline at the bottom of the connection screen rather than as sheets. They are `352x60dp` panels with a 1dp gradient border and a round close button in the top-right corner that overlaps the panel edge. [Measured on a device] ### Controls Expected on Android: Material switches, pickers, chips. Filter chips sit above the country list in a scrolling row. Each chip draws `40dp` tall inside a `48dp` tap target, with lightly rounded corners of about `6dp` rather than a pill, and `8dp` between chips. The selected chip is filled `#6d4aff` with a white label; unselected chips are filled `#3b3747`, also with a white label, and several carry a leading icon. [Measured on a device] The theme chooser uses radio options drawn as preview cards: a `72x130dp` thumbnail of the theme over a label and a `24dp` radio, three across in `117dp` columns. The selected radio is `#6d4aff`, the unselected ones `#6d697d`. [Measured on a device] Buttons come in two weights on the same `48dp` height: a filled button in `#6d4aff` with white text, and a text button with a `#8a6eff` label on the card fill. Upgrade affordances are a separate shape, a pill filled with the card color and ringed by a 1dp gradient border running violet `#5a6ef0` on one side to teal `#30c9d0` on the other. [Measured on a device] ### Text sizing Expected on Android: font scale. Sizes are in `sp`, so the system font scale applies throughout. Captured at a system font scale of 1.3: every label box grows with it, the bottom bar labels going from `11dp` to `18dp` and the card title from `17dp` to `25dp`. [Measured on a device] Nothing clips. The bottom bar holds its `80dp` height and still fits the taller labels, the connect button holds its `48dp` height and still fits its label, and the card's secondary line wraps onto a second line and the card grows to take it. So the chrome is fixed height and the content reflows, and at 1.3 the fixed heights are still generous enough. [Measured on a device] ### Touch and pointer targets Expected on Android: 48dp minimum. Every tap target measured at least `48dp`. Navigation tabs are `90x80dp`, the top bar back control and the card's information button are `48x48dp`, list overflow controls are `64x56dp`, and settings rows are `64dp` or `68dp` tall across the full width. [Measured on a device] The filter chips are the case worth naming: they draw `40dp` tall, under the minimum, but the tappable area around each one is `48dp`, so the visual is compact without costing reachability. [Measured on a device] ### Insets and system bars Expected on Android: edge to edge, system bars. The app draws edge to edge under the system bars and leaves them transparent, so the surface beneath shows through and the bars read dark on the Dark theme and light on the Light theme. [Measured on a device] Measured on an Android phone using gesture navigation: the status bar inset is `29dp`, the display cutout takes the same `29dp`, and the navigation bar inset is `0dp` because gesture navigation draws no bar. A `32dp` mandatory gesture region sits along the bottom edge. The bottom navigation bar runs all the way to the physical bottom edge and carries its own padding, so the gesture handle sits inside the bar rather than below it. [Measured on a device] ### Icons Expected on Android: Material Symbols or custom. Custom line glyphs on a `24dp` box in the navigation bar, and `32dp` glyphs leading the settings rows. [Measured on a device] They are drawn in `#a7a4b5` when inactive and in the violet when active, and several of the feature icons are full-color illustrations rather than single-weight glyphs. [Observed on a device] ### Account and sign-in rules Expected on Android: account deletion and data safety requirements. Note the date checked. Reading the app and connecting on the free tier never requires an account. The Settings screen opens with an Account card on the signed-out state: a row of product glyphs, a heading, two lines of body text, a filled `320x48dp` Create an account button and a `320x48dp` text button to sign in. There is no third-party or social sign-in on that card, so the equivalent-login requirement is not triggered. [Observed on a device] No account was signed in, so everything past that card is unseen. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-07 on the device for the signed-out entry, 2026-10-06 against source for the rest. ### Platform conformance Expected on Android: Material 3 components and roles. The app takes Material 3 structure and recolors it with Proton's own palette. The navigation bar, its pill indicator, the filter chips, the bottom sheet with its drag handle and the filled and text button pair are all the Material 3 shapes carrying Proton colors. Deviations: no floating action button, and chips are rounded rectangles rather than the fully rounded Material default. [Measured on a device] The app carries its own theme setting (Light, Dark, Device theme) rather than only following the system, so it can run dark on a phone that is in light mode. This install was set to Dark, which is how it was captured, and the Light theme was captured by switching and switching back. [Measured on a device] Surfaces are a two-step ladder rather than Material's tonal elevation: one page color and one elevated color, with a 1dp border where a card needs separating. On Dark that is `#1c1b24` and `#292733` with a `#3b3747` border; on Light it is `#ffffff` and `#f5f4f2` with an `#eae7e4` border. List rows separate with a full-bleed hairline measured under 1dp, `#2b2835` on dark and `#f4f2f1` on light, with no leading inset. [Measured on a device] Connection state is not carried by the green alone. On the disconnected screen the hero behind the status line is a rose wash, not a neutral or a green, and the green `#2cffcc` appears on the fast-server badge rather than as the state color. [Measured on a device] ## Platform: Web The protonvpn.com marketing site, using the Proton web style. ### Back and up navigation Expected on Web: browser back, breadcrumbs. Browser back and a persistent header with a mobile menu. [Inferred] ### Primary navigation Expected on Web: top nav or sidebar. Top navigation with product menus. [Inferred] ### Main action Expected on Web: page-level button. A violet Get Proton VPN button. [Inferred] ### Sheets, dialogs and messages Expected on Web: modals, toasts. Tooltips and standard dialogs. [Measured for tooltips] ### Controls Expected on Web: native or custom. Custom controls with a thin focus outline. [Inferred] ### Text sizing Expected on Web: browser zoom. Sizes in `rem`. [Measured] ### Touch and pointer targets Expected on Web: pointer and keyboard. Not verified. [Inferred] ### Insets and system bars Expected on Web: viewport, scrollbars. Responsive. [Inferred] ### Icons Expected on Web: any. SVG icons. [Inferred] ### Account and sign-in rules Expected on Web: not applicable unless the product has accounts. Marketing site with sign-in links to the Proton account. [Inferred] ### Platform conformance Expected on Web: web norms for links and forms. Follows web norms with Proton's typefaces and a gradient accent. [Measured] ## Cross-platform consistency The violet, the product-color family and the ink-purple dark mode carry across all three. The shared Proton core library supplies most native tokens, so the exact values are mostly outside the repositories read. [Inferred] ## Do's and Don'ts ### Do - Use `#6d4aff` for brand and actions and lighten it to `#8a6eff` in dark mode. - Use the VPN green only to show a connected or secure state. - Build dark mode on ink-purple (`#1c1b24`, `#292733`), not neutral gray. - Adapt content width and padding to compact, medium and expanded windows. - Use gradient glows and borders for upgrade panels only. ### Don't - Don't use the VPN green for general success messages. - Don't mix product colors (mail, calendar, drive) into the VPN app chrome. - Don't stretch content past `800dp` on large screens. ## Known Gaps ### Now verified on a device - The Android section was captured on a real Android phone on 2026-10-07 against app version 5.20.57.0. Navigation structure, bar and row heights, touch targets, insets, back behavior, both themes, corner radii, the bottom sheet and font-scale behavior are measured rather than inferred. - Where the device disagreed with the earlier source reading, the shipping app won. Two corrections: the bottom navigation bar was inferred and is now confirmed as four tabs at `80dp`, and the light surface color is `#f5f4f2` in the app rather than the website's `#f6f7f9`. - One claim in this file needs narrowing. The green is described as the connection signal, and on the device the disconnected screen is a rose wash while the green `#2cffcc` marks the fast-server badge. The connected state itself was not captured, because no tunnel was connected, so whether green is the connected color on Android is still unconfirmed. ### Still not verified - iOS is entirely inferred. There was no iPhone in this capture, so every iOS topic is unseen. - The connected state on Android was not captured. No tunnel was connected during the capture, so the connected hero, its colors and any connection animation are unseen. - No account was signed in, so everything behind the account (the paid tiers, the profile editor, Secure Core, the server detail screens) is unseen on every platform. The country list was read in its free-tier state, where most rows are locked. - Motion was not recorded. Transitions, the connect animation and sheet entry were not captured, so nothing in this file describes timing or easing. - Typography sizes were not converted to `sp`. The device was captured at the owner's own font scale of 0.8, so text is reported as measured box heights in dp at that scale rather than as type sizes. - Most native tokens (Proton Core colors, typography and shapes) live in a separate library that was not read. The values that are not tagged as measured on a device come from the repository files, the macOS color model and the website. - The iOS iPhone color assets could not be extracted. - Account deletion and store policy rules were not verified on either store. - The tablet layout was not seen. The app declares medium and expanded window handling, but only a phone was captured.