Proton VPN

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

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:

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.