Security & Privacy / iOS / Android / Web

Bitwarden

Bitwarden feels safe by staying quiet: one action blue that lightens in dark mode, cool blue-gray surfaces, rounded shapes and a monospace face reserved for secrets.

Download
  • #175DDC
  • #65ABFF
  • #020F66
  • #1B2029
  • #F3F6F9
  • #DBE5F6

Color

Every color token in the file, grouped by role.

Brand

  • primary#175DDC
  • primary dark mode#65ABFF
  • primary deep#020F66
  • primary strong#1A41AC
  • primary soft#DBE5F6
  • ink secondary#5A6D91
  • ink secondary dark mode#8898B5
  • on primary#FFFFFF

Surfaces

  • canvas#F3F6F9
  • canvas dark#121A27
  • paper#FFFFFF
  • paper dark#202733

Text

  • ink#1B2029
  • ink dark mode#F3F6F9
  • ink disabled#96A3BB
  • paper disabled#FAFBFD
  • code pink#C01176

Lines

  • divider#D3D9E3
  • divider dark#525B6A

Status

  • danger#C10007
  • danger text#CB263A
  • danger dark mode#FF4E63
  • success#0C8018
  • success dark mode#6BF178
  • warning#AC5800
  • warning bright#FFBF00
  • 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

More

  • track#E6E9EF

Typography

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

  • DM SansOpen font, shown as published.
  • Roboto MonoOpen font, shown as published.
  • display large56px / 600 / 64px

    Bitwarden

  • headline large32px / 600 / 40px

    Bitwarden

  • title extra large24px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • title medium16px / 600 / 20px

    The quick brown fox jumps over the lazy dog

  • body large15px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • body medium13px / 400 / 18px

    The quick brown fox jumps over the lazy dog

  • label large14px / 600 / 20px

    Continue to checkout

  • label small12px / 400 / 16px

    Continue to checkout

  • sensitive16px / 400 / 24px

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • menu4px
  • content8px
  • action card12px
  • bottom sheet24px
  • dialog28px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

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

  • button filled
    button-filled
  • button outlined
    button-outlined
  • card
    card
  • badge success
    badge-success
  • badge danger
    badge-danger
  • badge warning
    badge-warning
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 143 lines
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

RoleLightDark
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.