brand/README.md

# Bitwarden Brand

This repository contains resources for the Bitwarden brand such as logos, icons, screenshots, color palettes, and other media.


- [Logo](/logos)
- [Icon](/icons)
- [Screenshots](/screenshots)
- [Shield](/shield)

**For more brand resources visit [bitwarden.com/brand](https://bitwarden.com/brand/)**

## Logo

| Version | Preview |
|---|---|
| Default | ![Default](/logos/logo-horizontal-blue.svg) |  
| Inverse | ![Inverse](/logos/logo-horizontal-white.svg) |

## Product Icon

| Version | Preview |
|---|---|
| Default (svg) | ![Default](/logos/icon.svg) |  
| Inverse (svg) | ![Inverse](/logos/icon-inverse.svg) |
| Rounded 256px (png) | ![Bitwarden Product Icon Rounded 256](/icons/256x256.png "Bitwarden Product Icon Rounded 256")  |
| Rounded 128px (png) | ![Bitwarden Product Icon Rounded 128](/icons/128x128.png "Bitwarden Product Icon Rounded 128")  |
| Rounded 64px (png) | ![Bitwarden Product Icon Rounded 64](/icons/64x64.png "Bitwarden Product Icon Rounded 64")  |
| Rounded 32px (png) | ![Bitwarden Product Icon Rounded 32](/icons/32x32.png "Bitwarden Product Icon Rounded 32")  |
| Rounded 16px (png) | ![Bitwarden Product Icon Rounded 16](/icons/16x16.png "Bitwarden Product Icon Rounded 16")  |
| Square 256px (png) | ![Bitwarden Product Icon Square 256](/icons/square-256x256.png "Bitwarden Product Icon Square 256")  |
| Square 128px (png) | ![Bitwarden Product Icon Square 128](/icons/square-128x128.png "Bitwarden Product Icon Square 128")  |
| Square 64px (png) | ![Bitwarden Product Icon Square 64](/icons/square-64x64.png "Bitwarden Product Icon Square 64")  |
| Square 32px (png) | ![Bitwarden Product Icon Square 32](/icons/square-32x32.png "Bitwarden Product Icon Square 32")  |
| Square 16px (png) | ![Bitwarden Product Icon Square 16](/icons/square-16x16.png "Bitwarden Product Icon Square 16")  |

[View more sizes](/icons)

## Product Screenshots

![Bitwarden App Screenshot](/screenshots/apps-combo.png)

[View all product screenshots](/screenshots)

## Color Palettes

### Branding

| Web Colors   | Color  | HEX value |
|------------|-----------|-----------|
| Primary Blue       | ![#175DDC](https://www.singlecolorimage.com/get/175DDC/32x32) |   `#175DDC` |
| Deep Blue     | ![#1A41AC](https://www.singlecolorimage.com/get/1A41AC/32x32) |  `#1A41AC` |
| Indigo Blue     | ![#020F66](https://www.singlecolorimage.com/get/020F66/32x32) |  `#020F66` |
| Accent Teal      | ![#2CDDE9](https://www.singlecolorimage.com/get/2CDDE9/32x32) |  `#2CDDE9` |
| Accent Melon       | ![#FF4E63](https://www.singlecolorimage.com/get/FF4E63/32x32) |  `#FF4E63` |
| Accent Yellow      | ![#FFBF00](https://www.singlecolorimage.com/get/FFBF00/32x32) |  `#FFBF00` |
| Accent Purple      | ![#9D26FF](https://www.singlecolorimage.com/get/9D26FF/32x32) |  `#9D26FF` |
| Accent Gray      | ![#F3F6F9](https://www.singlecolorimage.com/get/F3F6F9/32x32) |  `#F3F6F9` |
| Accent Black      | ![#000000](https://www.singlecolorimage.com/get/000000/32x32) |  `#000000` |
| Accent White      | ![#FFFFFF](https://www.singlecolorimage.com/get/FFFFFF/32x32) |  `#FFFFFF` |

| Grayscale   |   Color  | HEX value |
|------------|-----------|-----------|
| Deep Dark Gray       | ![#282A31](https://www.singlecolorimage.com/get/282A31/32x32) |     `#282A31` |
| Dark Gray     | ![#6E7881](https://www.singlecolorimage.com/get/6E7881/32x32) |    `#6E7881` |
| Deep Medium Gray     | ![#939DA7](https://www.singlecolorimage.com/get/939DA7/32x32) |    `#939DA7` |
| Medium Gray      | ![#ABB4BD](https://www.singlecolorimage.com/get/ABB4BD/32x32) |    `#ABB4BD` |
| Light Gray       | ![#CFD4DA](https://www.singlecolorimage.com/get/CFD4DA/32x32) |   `#CFD4DA` |
| Lightest Gray      | ![#E6EBEF](https://www.singlecolorimage.com/get/E6EBEF/32x32) |    `#E6EBEF` |

| Product Colors   |   Color  | HEX value |
|------------|-----------|-----------|
| Text       | ![#000000](https://www.singlecolorimage.com/get/000000/32x32) |     `#000000` |
| Success     | ![#57C86B](https://www.singlecolorimage.com/get/57C86B/32x32) |    `#57C86B` |
| Danger     | ![#E5544A](https://www.singlecolorimage.com/get/E5544A/32x32) |    `#E5544A` |
| Warning      | ![#E8BF31](https://www.singlecolorimage.com/get/E8BF31/32x32) |    `#E8BF31` |
| Info       | ![#63A2FD](https://www.singlecolorimage.com/get/63A2FD/32x32) |    `#63A2FD` |
| Background      | ![#F3F6F9](https://www.singlecolorimage.com/get/F3F6F9/32x32) |    `#F3F6F9` |


[Download color codes](/brand-colors/palette.scss)

## Fonts

| Use Case  | Link |  Weights  |
|---|---|---|
| Product use  |  [Open Sans](https://fonts.google.com/specimen/Open+Sans)  | 400 (normal), 500 (medium), 700 (bold) |
| Website use (headlines)  |  [Montserrat](https://fonts.google.com/specimen/Montserrat)  | 300 (light), 400 (regular), 500 (medium) |
| Website use (body)  |  [Roboto](https://fonts.google.com/specimen/Roboto)  | 400 (regular), 500 (medium) |


## Other Things To Know

- Capitalize the "B" in Bitwarden in all copy text. Bitwarden should only be presented in all lowercase when displayed in our official logos (see above).
- The "W" in Bitwarden is NEVER capitalized.

## Trademark Notice

"Bitwarden" is a registered trademark of Bitwarden Inc.