Bitwarden DESIGN.md

Open-source password manager design with trusted blue identity, security-first surfaces, clean type, and transparent privacy messaging.

1. Visual Theme & Atmosphere

Bitwarden should feel secure, trustworthy, and open. The design language communicates end-to-end encryption, zero-knowledge architecture, cross-platform sync, and community-driven security.

• Mood: secure, transparent, reliable, professional
• Density: medium, with vault item lists, generator panels, and organization surfaces
• Character: trusted blue brand, clean white vault, subtle gray hierarchy, minimal ornamentation

2. Color Palette & Roles

Use blue consistently for all primary actions. Password strength indicators must use the exact red/amber/green scale — never swap these roles.

3. Typography Rules

css--font-sans: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #175DDC;
  color: #FFFFFF;
  font: 600 14px/1 "DM Sans", sans-serif;
}

.vault-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.password-field {
  font: 400 15px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  padding: 0 14px;
  height: 40px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
}

.strength-bar {
  height: 4px;
  border-radius: 999px;
  background: #E2E8F0;
}

5. Layout Principles

Sidebar navigation must always be visible on desktop. Vault list items should be dense but tappable — minimum 44px touch targets on mobile.

6. Depth & Elevation

css.shadow-card   { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.shadow-modal  { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); }
.shadow-dialog { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24); }

Keep elevation minimal in the vault list to avoid visual noise. Reserve stronger shadows for modals and security alerts.

7. Do's and Don'ts

Do communicate open-source and end-to-end encryption clearly. Do use mono fonts for all passwords and keys. Do use the strength indicator scale consistently. Do not use gradients or decorative illustration in security-critical flows. Do not hide breach alerts — make them prominent but not alarmist.

8. Responsive Behavior

Vault item detail should always be reachable without losing list context on tablet and above.

9. Agent Prompt Guide

Design like Bitwarden: trusted blue CTAs, mono password fields, dark sidebar navigation, clean vault list density, consistent strength indicators, and transparent open-source security messaging.