--- 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 | Role | Light | Dark | Where | |------|-------|------|-------| | Interaction (main) | `#8a6eff` iOS, `#6d4aff` Android palette | `#6464ce` iOS | iOS catalog, Android palette | | Interaction strong | `#a792ff` | `#7777f8` | iOS | | Page background (`BackgroundNorm`) | `#ffffff` | `#191927` | iOS | | Weak background | `#ffffff` | `#1f1f31` | iOS | | Strong background | `#f6f5f8` | `#0e0e0e` | iOS | | Medium background | `#eeedf0` | `#302d45` | iOS | | Tinted background | `#f4f0fe` | `#191926` | iOS | | Text | `#333333` | `#d1d1d3` | iOS | | Secondary text | `#666666` | `#8c8c93` | iOS | | Disabled text | `#ebebeb` | `#2b2b38` | iOS | | Border | `#e3dffa` | `#38384c` | iOS | | Input fill and border | black at 4 and 8 percent | white at 4 and 8 percent | iOS | | Danger | `#cc2d4f` | `#f08fa4` | iOS | | Success | `#007b58` | `#4ab89a` | iOS | | Warning | `#e65200` | `#ffb84d` | iOS | | Info | `#00afe6` | `#4ac0ff` | iOS | 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.