Security & Privacy / iOS / Android / Web

Proton Pass

Proton Pass keeps security software warm: one violet for interaction, lavender borders, an indigo-black dark mode, and a small pastel palette that gives vaults and items their identity.

Download
  • #6D4AFF
  • #8A6EFF
  • #E3DFFA
  • #191927
  • #6ABDB3
  • #FFCA8A

Color

Every color token in the file, grouped by role.

Brand

  • primary#6D4AFF
  • primary ios#8A6EFF
  • primary ios strong#A792FF
  • on primary#FFFFFF
  • ink secondary#666666
  • dark ink secondary#8C8C93
  • dark primary#7777F8

Surfaces

  • paper#FFFFFF
  • canvas#F6F5F8
  • surface medium#EEEDF0
  • surface tint#F4F0FE
  • dark bg#191927
  • dark surface#1F1F31
  • dark surface strong#0E0E0E
  • dark surface raised#302D45

Text

  • ink#333333
  • ink disabled#EBEBEB
  • pastel pink#F08FA4
  • dark ink#D1D1D3

Lines

  • border#E3DFFA
  • dark border#38384C

Status

  • danger#CC2D4F
  • success#007B58
  • warning#E65200
  • info#00AFE6

More

  • pastel lavender#A779FF
  • pastel green#6ABDB3
  • pastel orange#FFCA8A

Typography

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

  • system-uiSystem font, drawn with the default on your device.
  • hero28px / 700 / 1.2

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • body small14px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 1.4

    Continue to checkout

Shape

Corner radius tokens.

  • sm8px
  • md12px
  • lg16px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px
  • xl32px

Components

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

  • button primary
    button-primary
  • card
    card
  • tinted card
    tinted-card
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 99 lines
version: alpha
name: Proton-Pass-design-analysis
description: "A password manager that looks calm rather than clinical: Proton violet on white or deep indigo-black, soft lavender borders and fields, generous rounded cards, and colorful item and vault icons from a small pastel palette. Light and dark are first-class and the same ink, border and interaction roles are named on iOS and Android."
status: Draft
appVersion: "source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#6d4aff"
  primary-ios: "#8a6eff"
  primary-ios-strong: "#a792ff"
  on-primary: "#ffffff"
  ink: "#333333"
  ink-secondary: "#666666"
  ink-disabled: "#ebebeb"
  paper: "#ffffff"
  canvas: "#f6f5f8"
  surface-medium: "#eeedf0"
  surface-tint: "#f4f0fe"
  border: "#e3dffa"
  danger: "#cc2d4f"
  success: "#007b58"
  warning: "#e65200"
  info: "#00afe6"
  pastel-lavender: "#a779ff"
  pastel-green: "#6abdb3"
  pastel-orange: "#ffca8a"
  pastel-pink: "#f08fa4"
  dark-bg: "#191927"
  dark-surface: "#1f1f31"
  dark-surface-strong: "#0e0e0e"
  dark-surface-raised: "#302d45"
  dark-ink: "#d1d1d3"
  dark-ink-secondary: "#8c8c93"
  dark-border: "#38384c"
  dark-primary: "#7777f8"

typography:
  hero:
    fontFamily: "system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
  body:
    fontFamily: "system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  body-small:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  label:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 999px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  tinted-card:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  card-dark:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px

Overview

Proton Pass is the password manager from the Proton team. The look is soft and violet. Surfaces are white or an indigo-black, borders and fields are faint lavender, vault and item icons use a small pastel set, and one violet marks interaction. [Observed]

What defines the look:

  1. Violet interaction color. #6d4aff is the Indigo in the Android palette and the Proton brand violet, while the iOS asset catalog uses #8a6eff (light) and #6464ce (dark) for the main interaction role. [Measured]
  2. Indigo-black dark mode. Dark backgrounds are #191927 and #1f1f31, tinted violet rather than neutral black, with a true #0e0e0e for the strongest layer. [Measured]
  3. Lavender borders. Dividers are #e3dffa on light, which keeps lines on-brand. [Measured]
  4. Pastel item colors. Lavender, green sheen, macaroni orange and pink icons identify vaults and item types. [Measured]

Source for this file: the public Android and iOS repositories, read on 2026-10-06. The web app and website were not measured. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Interaction (main)#8a6eff iOS, #6d4aff Android palette#6464ce iOSiOS catalog, Android palette
Interaction strong#a792ff#7777f8iOS
Page background (BackgroundNorm)#ffffff#191927iOS
Weak background#ffffff#1f1f31iOS
Strong background#f6f5f8#0e0e0eiOS
Medium background#eeedf0#302d45iOS
Tinted background#f4f0fe#191926iOS
Text#333333#d1d1d3iOS
Secondary text#666666#8c8c93iOS
Disabled text#ebebeb#2b2b38iOS
Border#e3dffa#38384ciOS
Input fill and borderblack at 4 and 8 percentwhite at 4 and 8 percentiOS
Danger#cc2d4f#f08fa4iOS
Success#007b58#4ab89aiOS
Warning#e65200#ffb84diOS
Info#00afe6#4ac0ffiOS

All values are [Measured] from the iOS color assets and the Android palette file. The Android palette also holds the pastel and status sets, for example lavender #a779ff, green sheen #6abdb3, macaroni orange #ffca8a and pink #f08fa4.

Typography

The Android app declares only two custom text styles, a 28sp bold hero (letter spacing 0.01em, line height 34sp) and a 14sp regular body (letter spacing 0.02em, line height 20sp), and takes the rest from the Proton core theme. [Measured] No custom typeface was found, so both apps use the system font. [Inferred]

Shape and spacing

Android shapes are built from a small radius scale plus an extra offset, and a separate bottom sheet shape. The exact pixel values were not read. [Measured for structure, not measured for values] Cards and fields look generously rounded in design pictures, but this was not checked in source. [Inferred]

Iconography and motion

Custom icons for item types (login, alias, card, note, identity, passkey) tinted by the pastel palette. [Inferred] Motion values were not measured.

Themes

Light, dark and an automatic system option on both apps; Android has a theme selection sheet. [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 with a back control. Edge swipe was not checked. [Inferred]

Primary navigation

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

A tab bar with a themed background (white or indigo at 10 percent alpha). Its items were not confirmed. [Measured for the color, Inferred for items]

Main action

Expected on iOS: Nav bar or bottom bar button.

Adding an item is a create action in the home screen. Its exact placement was not confirmed. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Bottom sheets and alerts. A backdrop color of 32 percent black is defined. [Measured]

Controls

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

Input fields use a 4 percent fill and an 8 percent border, adaptive to dark. [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 icons, not SF Symbols for most item types. [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 accounts with sign-in on Proton's own service. Guideline 4.8 and account deletion were 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.

Asset catalog colors with light and dark variants, so the app follows the iOS appearance system for color. Component styling was not compared with stock controls. [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 and a top app bar with navigation icon. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The home screen is a vault list with bottom navigation items. The exact set was not confirmed. [Inferred]

Main action

Expected on Android: Floating action button.

A floating add button is expected on the home screen. It was not confirmed in source. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Bottom sheets with a custom shape, and a theme selection sheet. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Controls themed through the Proton core theme with a Pass shape set. [Measured]

Text sizing

Expected on Android: Font scale.

Typography uses sp units, so it follows the system font scale. [Measured]

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. [Inferred]

Account and sign-in rules

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

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.

Material components inside a Proton theme wrapper with its own shapes and typography objects. [Inferred]

Platform: Web

The Proton Pass web app and proton.me/pass pages were not measured for this file.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Not measured. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

Not measured. [Inferred]

Main action

Expected on Web: Page-level button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Not measured. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not measured. [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 measured. [Inferred]

Platform conformance

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

Not measured. [Inferred]

Cross-platform consistency

Consistent across platforms: violet interaction color, light and dark themes, lavender borders and the pastel item palette. [Measured]

Intentionally different: the iOS interaction role is lighter (#8a6eff) than the Android palette Indigo (#6d4aff). [Measured]

Do's and Don'ts

Do

  • Use one violet for interaction and tint borders and fields toward lavender.
  • Keep dark mode indigo-black, not neutral gray.
  • Use the pastel set for vault and item identity, never for interaction.
  • Define text, fill and border roles as adaptive colors.

Don't

  • Don't use the disabled text color #ebebeb for anything readable.
  • Don't mix the iOS and Android violets inside one screen.
  • Don't use heavy shadows. Separation comes from fills and lavender borders.

Known Gaps

  • No on-device capture was done. All statements come from reading source.
  • The web app and proton.me/pass were not measured, so the Web section is empty by design.
  • Android color roles for text, fill and border come from the shared Proton core theme, which is outside the repository read, so only iOS values are listed for those.
  • Corner radii, spacing, tab items and motion were not measured.
  • Account deletion and store policy rules were not verified for either app.