---
version: alpha
name: Bitwarden-design-analysis
description: "A calm, trustworthy security product in one confident blue (#175ddc, lightened to #65abff in dark mode) on cool blue-gray surfaces. Typography is DM Sans with a monospace face reserved for secrets. Shapes are rounded and friendly: pill buttons, 8dp content blocks, 28dp dialogs. The same named color roles drive iOS, Android and the website."
status: Draft
appVersion: "source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#175ddc"
  primary-dark-mode: "#65abff"
  primary-deep: "#020f66"
  primary-strong: "#1a41ac"
  primary-soft: "#dbe5f6"
  ink: "#1b2029"
  ink-dark-mode: "#f3f6f9"
  ink-secondary: "#5a6d91"
  ink-secondary-dark-mode: "#8898b5"
  ink-disabled: "#96a3bb"
  canvas: "#f3f6f9"
  canvas-dark: "#121a27"
  paper: "#ffffff"
  paper-dark: "#202733"
  paper-disabled: "#fafbfd"
  divider: "#d3d9e3"
  divider-dark: "#525b6a"
  track: "#e6e9ef"
  danger: "#c10007"
  danger-text: "#cb263a"
  danger-dark-mode: "#ff4e63"
  success: "#0c8018"
  success-dark-mode: "#6bf178"
  warning: "#ac5800"
  warning-bright: "#ffbf00"
  code-pink: "#c01176"
  badge-success-bg: "#f0fdf4"
  badge-success-text: "#08540f"
  badge-danger-bg: "#fef2f2"
  badge-danger-text: "#951b2a"
  badge-warning-bg: "#fff8f1"
  badge-warning-text: "#b23300"
  badge-info-bg: "#eef6ff"
  badge-info-text: "#1a41ac"
  on-primary: "#ffffff"

typography:
  display-large:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 64px
  headline-large:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
  title-extra-large:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 28px
  title-medium:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
  body-large:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 20px
  body-medium:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
  label-large:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
  label-small:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  sensitive:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.5px

rounded:
  menu: 4px
  content: 8px
  action-card: 12px
  bottom-sheet: 24px
  dialog: 28px
  pill: 9999px

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

components:
  button-filled:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-large}"
    rounded: "{rounded.pill}"
    height: 40px
  button-outlined:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.primary}"
    typography: "{typography.label-large}"
    rounded: "{rounded.pill}"
    height: 40px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.content}"
    padding: 16px
  badge-success:
    backgroundColor: "{colors.badge-success-bg}"
    textColor: "{colors.badge-success-text}"
    typography: "{typography.label-small}"
    rounded: "{rounded.action-card}"
  badge-danger:
    backgroundColor: "{colors.badge-danger-bg}"
    textColor: "{colors.badge-danger-text}"
    typography: "{typography.label-small}"
    rounded: "{rounded.action-card}"
  badge-warning:
    backgroundColor: "{colors.badge-warning-bg}"
    textColor: "{colors.badge-warning-text}"
    typography: "{typography.label-small}"
    rounded: "{rounded.action-card}"
---

## Overview

Bitwarden's interface is built to feel safe and unfussy. A single confident blue carries every action, cool blue-gray surfaces keep screens quiet, and rounded shapes keep a security product approachable. The most distinctive detail is typographic: secrets (passwords, codes) are set in a monospace face with wide letter spacing, while everything else is DM Sans. [Measured]

Three decisions define the look:

1. **One action blue, lighter in dark mode.** Buttons, links, selected icons, sliders and focus borders are all `#175ddc` in light mode and `#65abff` in dark mode. Text on a filled button flips from white to the dark surface color. [Measured]
2. **Named color roles, shared across platforms.** The iOS color assets (`buttonFilledBackground`, `textPrimary`, `strokeDivider`, `badgeSuccessText` and so on) match the website's primary and secondary scales, so one vocabulary covers app and site. [Measured]
3. **Status is communicated by soft tinted badges.** Success, danger, warning and info each have a tinted background, a border and a dark text color, with separate dark-mode values. [Measured]

Source for this file: the public Android and iOS repositories and the bitwarden.com stylesheets, read on 2026-10-06. No on-device capture was done. See Known Gaps.

## Core

### Colors

| Role | Light | Dark |
|------|-------|------|
| Primary action, links, icons | `#175ddc` | `#65abff` |
| Text primary | `#1b2029` | `#f3f6f9` |
| Text secondary | `#5a6d91` | `#8898b5` |
| Text disabled | `#96a3bb` | `#96a3bb` |
| Background (page) | `#f3f6f9` | `#121a27` |
| Background (cards, sheets) | `#ffffff` | `#202733` |
| Background tertiary | `#dbe5f6` | `#303946` |
| Divider | `#d3d9e3` | `#525b6a` |
| Slider track | `#e6e9ef` | `#525b6a` |
| Danger | `#c10007` | `#ff4e63` |
| Error text | `#cb263a` | `#ff4e63` |
| Strong (success) | `#0c8018` | `#6bf178` |
| Weak (warning) | `#ac5800` | `#ffbf00` |
| Code blue and code pink | `#175ddc`, `#c01176` | `#65abff`, `#ff8fd0` |
| Deep brand navy (illustration outline) | `#020f66` | `#175ddc` |

Status badges: success `#f0fdf4` fill, `#b9f8cf` border, `#08540f` text. Danger `#fef2f2`, `#ffc9c9`, `#951b2a`. Warning `#fff8f1`, `#fcd9bd`, `#b23300`. Info `#eef6ff`, `#bedbff`, `#1a41ac`. Dark mode swaps in deep tints (for example success `#032e15` fill). All values are [Measured] from the iOS color assets and the website tokens.

### Typography

DM Sans for everything except secrets. [Measured]

Android scale (size over line height, in sp): display 56/64, 44/52, 36/44. Headline 32/40, 28/36, 18/22. Title 24/28, 19/28, 16/20, 14/18. Body 15/20, 13/18, 12/16. Label 14/20 and 12/16. Weights are 600 for display, headline and title, 400 for body, and 700 for emphasis variants. Letter spacing is 0.

Sensitive information (passwords, codes) uses Roboto Mono at 14/20 or 16/24 with `0.5` letter spacing, so characters are easy to tell apart. [Measured]

iOS ships DM Sans Regular, SemiBold, Bold and italics as bundled fonts. [Measured] The website uses `Inter Variable` as its default font. [Measured]

### Shape and spacing

Rounded and friendly, with graded radii. [Measured from the Android shape set]

- Buttons, floating action button, segmented control and progress indicators are fully round.
- Content blocks and info callouts: `8dp`. Grouped rows use rounded top and bottom ends with square middle rows.
- Action cards and badges: `12dp`. Menus: `4dp`.
- Bottom sheets: `24dp` on the top corners. Dialogs: `28dp`.
- Rows are square-edged.

The website uses a base spacing of `.25rem` and radii from `.25rem` to `2rem`.

### Iconography and motion

Icons are tinted with the primary or secondary text roles: `iconPrimary` `#5a6d91`, `iconSecondary` and the selected state `#175ddc`. [Measured] Motion values were not extracted. [Inferred]

### Themes

Light, dark and a follow-system setting on mobile. [Measured] Dark mode keeps the same structure with a deep navy page `#121a27` and lighter blue accent.

## 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 controller behavior is expected. [Inferred] Not verified on a device.

### Primary navigation

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

A bottom tab bar with a brand tab-inactive color is part of the asset set. The usual Bitwarden tabs are Vault, Send, Generator and Settings. [Inferred]

### Main action

Expected on iOS: nav bar or bottom bar button.

Adding an item sits in the navigation bar rather than a floating button. [Inferred]

### Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

An alert background color (`#020f66`) and a loading overlay with blue, green, orange and red states exist in the assets. [Measured] Standard action sheets and alerts are expected. [Inferred]

### Controls

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

Custom-styled controls tinted by the color roles: filled and outlined buttons, sliders (`#175ddc` filled), a segmented navigation stroke color. [Measured]

### Text sizing

Expected on iOS: Dynamic Type.

Not verified. A custom font (DM Sans) is bundled, so scaling depends on how fonts are scaled in code. [Inferred]

### Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

### Insets and system bars

Expected on iOS: safe areas, status bar.

Standard handling. A splash background and tint are defined. [Measured]

### Icons

Expected on iOS: SF Symbols or custom.

A custom icon set. [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.

Sign-in uses a Bitwarden account (email and master password) with optional enterprise single sign-on, which is generally outside Guideline 4.8. Account deletion is available in the app. [Inferred] Checked: 2026-10-06 against source and general knowledge only.

### Platform conformance

Expected on iOS: system components and Dynamic Type.

Mostly custom: the app brings its own colors, fonts and control styling and keeps iOS navigation structure. [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 a custom top app bar with its own colors. [Measured]

### Primary navigation

Expected on Android: navigation bar, rail on tablets.

A bottom navigation bar for the main areas (Vault, Send, Generator, Settings). Not verified in the files read. [Inferred]

### Main action

Expected on Android: floating action button.

Floating action buttons exist as a component, including an expandable one with menu items (`fabItem` radius `12dp`). The FAB is a circle. [Measured]

### Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Bottom sheets with `24dp` top corners, dialogs with `28dp` corners, snackbars with `8dp` corners. [Measured]

### Controls

Expected on Android: Material switches, pickers, chips.

Custom Bitwarden components: filled, outlined and icon buttons with their own color classes, segmented controls (fully round), progress indicators (round). [Measured]

### Text sizing

Expected on Android: font scale.

Sizes are in `sp`, so system font scale applies. [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.

Bitwarden account with optional single sign-on. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on Android: Material 3 components and roles.

Uses Material as a base but replaces the color scheme, shapes (pill buttons, 28dp dialogs) and typography with its own. The look is Bitwarden's first and Material's second. [Measured]

## Platform: Web

The bitwarden.com marketing site.

### Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back and a persistent header. [Inferred]

### Primary navigation

Expected on Web: top nav or sidebar.

Top navigation with product menus. [Inferred]

### Main action

Expected on Web: page-level button.

Primary call-to-action buttons in the brand blue. [Inferred]

### Sheets, dialogs and messages

Expected on Web: modals, toasts.

A search overlay with a `44px` input height and a panel up to `650px`. [Measured]

### Controls

Expected on Web: native or custom.

Custom-styled controls. [Inferred]

### Text sizing

Expected on Web: browser zoom.

Sizes are in `rem` (`.75rem` to `8rem`), so browser font size applies. [Measured]

### Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

### Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive with a `96rem` maximum breakpoint. [Measured]

### Icons

Expected on Web: any.

A custom icon font (`bwi-font`) and a brands font. [Measured]

### Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

The marketing site links to the web vault, which is a separate app. [Inferred]

### Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms. The palette uses the same primary and secondary scales as the apps: `#175ddc`, `#1a41ac`, `#020f66`, `#dbe5f6` and a gray-blue ladder from `#f3f6f9` to `#0a171f`. [Measured]

## Cross-platform consistency

The same blue, the same named color roles, DM Sans on the apps, and the same rounded personality hold across platforms. [Measured]

Differences: the website uses Inter while the apps use DM Sans. The Android shape set is precise and graded, while iOS shape values were not extracted. Floating action buttons are an Android pattern, not an iOS one. [Measured]

## Do's and Don'ts

### Do

- Use `#175ddc` for every action and lighten it to `#65abff` in dark mode.
- Set secrets in a monospace face with `0.5` letter spacing.
- Use pill buttons, `8dp` content blocks and `28dp` dialogs.
- Communicate status with tinted badges that have a background, border and dark text.
- Keep surfaces cool blue-gray, never warm.

### Don't

- Don't use a second brand color for actions.
- Don't put passwords in a proportional font.
- Don't use heavy shadows. Separation comes from fills and dividers.
- Don't let dark mode reuse the light blue. Use the lighter `#65abff`.

## Known Gaps

- No on-device capture was done. All app statements come from reading source, so layouts, spacing and behavior in context are not confirmed.
- Android color values were not read directly. The iOS color assets and website tokens were used, on the assumption that Android uses the same roles.
- iOS typography scale, corner radii and spacing were not extracted. Only colors, fonts and asset names were read.
- The tab bar items and the navigation structure on both apps are inferred from product knowledge, not from source.
- Account deletion and store policy rules were not verified.