bitwarden/brand
1
0
Fork 0
mirror of https://github.com/bitwarden/brand synced 2025-12-06 05:23:20 +00:00
Code Issues Releases Wiki Activity

Color/brand Update (#36)

Browse Source 
* Color/brand Update

Update color descriptions, font files, logos, and screenshots. Added tables for more clarity and a palette file.

* Forgot to add list

* Remove bang from list
This commit is contained in:
DanHillesheim
2024-04-23 10:32:33 -06:00
committed by GitHub
parent e755957e1a
commit 7746596e81
14 changed files with 151 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
README.md
View File

@@ -2,37 +2,39 @@
This repository contains resources for the Bitwarden brand such as logos, icons, screenshots, color palettes, and other media. 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)
- [Logos](/logos)
**For more brand resources visit [bitwarden.com/brand](https://bitwarden.com/brand/)** **For more brand resources visit [bitwarden.com/brand](https://bitwarden.com/brand/)**
## Logos ## Logo
**Horizontal** | Version | Preview |
|---|---|
| Default | ![Default](/logos/logo-horizontal-blue.svg) |
| Inverse | ![Inverse](/logos/logo-horizontal-white.svg) |
| Black | ![Black](/logos/logo-horizontal.svg) |
![Bitwarden Logo Horizontal](/logos/logo-horizontal.png "Bitwarden Logo Horizontal") ## Product Icon
**Vertical** | Version | Preview |
|---|---|
![Bitwarden Logo Vertical](/logos/logo-vertical.png "Bitwarden Logo Vertical") | Default (svg) | ![Default](/logos/icon.svg) |
| Inverse (svg) | ![Inverse](/logos/icon-inverse.svg) |
[View more colors and sizes](/logos) | 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") |
## Product Icons | 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** | 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") |
![Bitwarden Product Icon Rounded 256](/icons/256x256.png "Bitwarden Product Icon Rounded 256") | Square 128px (png) | ![Bitwarden Product Icon Square 128](/icons/square-128x128.png "Bitwarden Product Icon Square 128") |
![Bitwarden Product Icon Rounded 128](/icons/128x128.png "Bitwarden Product Icon Rounded 128") | Square 64px (png) | ![Bitwarden Product Icon Square 64](/icons/square-64x64.png "Bitwarden Product Icon Square 64") |
![Bitwarden Product Icon Rounded 64](/icons/64x64.png "Bitwarden Product Icon Rounded 64") | Square 32px (png) | ![Bitwarden Product Icon Square 32](/icons/square-32x32.png "Bitwarden Product Icon Square 32") |
![Bitwarden Product Icon Rounded 32](/icons/32x32.png "Bitwarden Product Icon Rounded 32") | Square 16px (png) | ![Bitwarden Product Icon Square 16](/icons/square-16x16.png "Bitwarden Product Icon Square 16") |
![Bitwarden Product Icon Rounded 16](/icons/16x16.png "Bitwarden Product Icon Rounded 16")
**Square**
![Bitwarden Product Icon Square 256](/icons/square-256x256.png "Bitwarden Product Icon Square 256")
![Bitwarden Product Icon Square 128](/icons/square-128x128.png "Bitwarden Product Icon Square 128")
![Bitwarden Product Icon Square 64](/icons/square-64x64.png "Bitwarden Product Icon Square 64")
![Bitwarden Product Icon Square 32](/icons/square-32x32.png "Bitwarden Product Icon Square 32")
![Bitwarden Product Icon Square 16](/icons/square-16x16.png "Bitwarden Product Icon Square 16")
[View more sizes](/icons) [View more sizes](/icons)
@@ -44,34 +46,46 @@ This repository contains resources for the Bitwarden brand such as logos, icons,
### Branding ### Branding
Bitwarden Blue | Web Colors | HEX value |
![Bitwarden Blue](/brand-colors/bitwarden-blue.png "Bitwarden Blue") |------------|-----------|
`#175DDC` | Primary Blue | ![#175DDC](https://www.singlecolorimage.com/get/175DDC/32x32) `#175DDC` |
| Deep Blue | ![#1A41AC](https://www.singlecolorimage.com/get/1A41AC/32x32) `#1A41AC` |
Deep Blue | Indigo Blue | ![#020F66](https://www.singlecolorimage.com/get/020F66/32x32) `#020F66` |
![Deep Blue](/brand-colors/deep-blue.png "Bitwarden Deep Blue") | Accent Teal | ![#2CDDE9](https://www.singlecolorimage.com/get/2CDDE9/32x32) `#2CDDE9` |
`#1A41AC` | Accent Melon | ![#FF4E63](https://www.singlecolorimage.com/get/FF4E63/32x32) `#FF4E63` |
| Accent Yellow | ![#FFBF00](https://www.singlecolorimage.com/get/FFBF00/32x32) `#FFBF00` |
Indigo Blue | Accent Purple | ![#9D26FF](https://www.singlecolorimage.com/get/9D26FF/32x32) `#9D26FF` |
![Bitwarden Secondary Dark Blue](/brand-colors/indigo-blue.png "Bitwarden Indigo Blue") | Accent Gray | ![#F3F6F9](https://www.singlecolorimage.com/get/F3F6F9/32x32) `#F3F6F9` |
`#020F66` | Accent Black | ![#000000](https://www.singlecolorimage.com/get/000000/32x32) `#000000` |
| Accent White | ![#FFFFFF](https://www.singlecolorimage.com/get/FFFFFF/32x32) `#FFFFFF` |
Highlight Teal | Grayscale | HEX value |
![Bitwarden Accent Green](/brand-colors/highlight-teal.png "Bitwarden Highlight Teal") |------------|-----------|
`#2CDDE9` | 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 | 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` |
### Auxiliary [Download color codes](/brand-colors/pallette.scss)
- Text: `#000000`
- Success: `#00a65a`
- Danger: `#dd4b39`
- Warning: `#bf7e16`
- Info: `#555555`
## Fonts ## Fonts
- [Open Sans](https://fonts.google.com/specimen/Open+Sans) | Use Case | Link | Weights |
|---|---|---|
| Product use | [Open Sans](https://fonts.google.com/specimen/Open+Sans) | 400 (normal), 500 (medium), 700 (bold) |
| Website use | [DM Sans](https://fonts.google.com/specimen/DM+Sans) | 400 (normal), 500 (medium), 700 (bold) |
## Other Things To Know ## Other Things To Know

49
brand-colors/palette.scss Normal file
View File

@@ -0,0 +1,49 @@
/* CSS HEX */
--primary-blue: #175ddcff;
--deep-blue: #1a41acff;
--indigo-blue: #020f66ff;
--accent-teal: #2cdde9ff;
--bitwarden-gray: #f3f6f9ff;
--accent-melon: #ff4e63ff;
--accent-yellow: #ffbf00ff;
--accent-purple: #9d26ffff;
/* CSS HSL */
--primary-blue: hsla(219, 81%, 48%, 1);
--deep-blue: hsla(224, 74%, 39%, 1);
--indigo-blue: hsla(232, 96%, 20%, 1);
--accent-teal: hsla(184, 81%, 54%, 1);
--bitwarden-gray: hsla(210, 33%, 96%, 1);
--accent-melon: hsla(353, 100%, 65%, 1);
--accent-yellow: hsla(45, 100%, 50%, 1);
--accent-purple: hsla(273, 100%, 57%, 1);
/* SCSS HEX */
$primary-blue: #175ddcff;
$deep-blue: #1a41acff;
$indigo-blue: #020f66ff;
$accent-teal: #2cdde9ff;
$bitwarden-gray: #f3f6f9ff;
$accent-melon: #ff4e63ff;
$accent-yellow: #ffbf00ff;
$accent-purple: #9d26ffff;
/* SCSS HSL */
$primary-blue: hsla(219, 81%, 48%, 1);
$deep-blue: hsla(224, 74%, 39%, 1);
$indigo-blue: hsla(232, 96%, 20%, 1);
$accent-teal: hsla(184, 81%, 54%, 1);
$bitwarden-gray: hsla(210, 33%, 96%, 1);
$accent-melon: hsla(353, 100%, 65%, 1);
$accent-yellow: hsla(45, 100%, 50%, 1);
$accent-purple: hsla(273, 100%, 57%, 1);
/* SCSS RGB */
$primary-blue: rgba(23, 93, 220, 1);
$deep-blue: rgba(26, 65, 172, 1);
$indigo-blue: rgba(2, 15, 102, 1);
$accent-teal: rgba(44, 221, 233, 1);
$bitwarden-gray: rgba(243, 246, 249, 1);
$accent-melon: rgba(255, 78, 99, 1);
$accent-yellow: rgba(255, 191, 0, 1);
$accent-purple: rgba(157, 38, 255, 1);

11
logos/icon-inverse.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_68_64)">
<path d="M300 253.125C300 279.023 279.023 300 253.125 300H46.875C20.9766 300 0 279.023 0 253.125V46.875C0 20.9766 20.9766 0 46.875 0H253.125C279.023 0 300 20.9766 300 46.875V253.125Z" fill="white"/>
<path d="M217.061 159.595V63.6475H150V234.104C161.875 227.807 172.503 220.961 181.884 213.565C205.335 195.175 217.061 177.185 217.061 159.595ZM245.801 44.458V159.595C245.801 168.19 244.129 176.71 240.786 185.156C237.443 193.601 233.302 201.097 228.362 207.643C223.422 214.19 217.535 220.561 210.699 226.758C203.863 232.954 197.551 238.102 191.763 242.199C185.975 246.297 179.938 250.17 173.651 253.818C167.364 257.466 162.898 259.94 160.254 261.239C157.609 262.538 155.489 263.538 153.892 264.237C152.694 264.837 151.397 265.137 150 265.137C148.603 265.137 147.306 264.837 146.108 264.237C144.511 263.538 142.391 262.538 139.746 261.239C137.102 259.94 132.636 257.466 126.349 253.818C120.062 250.17 114.025 246.297 108.237 242.199C102.449 238.102 96.137 232.954 89.3012 226.758C82.4654 220.561 76.5777 214.19 71.638 207.643C66.6982 201.097 62.5568 193.601 59.2138 185.156C55.8707 176.71 54.1992 168.19 54.1992 159.595V44.458C54.1992 41.8594 55.1472 39.6107 57.0433 37.7117C58.9394 35.8128 61.1847 34.8633 63.7793 34.8633H236.221C238.815 34.8633 241.061 35.8128 242.957 37.7117C244.853 39.6107 245.801 41.8594 245.801 44.458Z" fill="#175DDC"/>
</g>
<defs>
<clipPath id="clip0_68_64">
<rect width="300" height="300" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

11
logos/icon.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_68_61)">
<path d="M300 253.125C300 279.023 279.023 300 253.125 300H46.875C20.9766 300 0 279.023 0 253.125V46.875C0 20.9766 20.9766 0 46.875 0H253.125C279.023 0 300 20.9766 300 46.875V253.125Z" fill="#175DDC"/>
<path d="M243.105 37.6758C241.201 35.7715 238.945 34.834 236.367 34.834H63.6328C61.0254 34.834 58.7988 35.7715 56.8945 37.6758C54.9902 39.5801 54.0527 41.8359 54.0527 44.4141V159.58C54.0527 168.164 55.7227 176.689 59.0625 185.156C62.4023 193.594 66.5625 201.094 71.5137 207.656C76.4648 214.189 82.3535 220.576 89.209 226.787C96.0645 232.998 102.393 238.125 108.164 242.227C113.965 246.328 120 250.195 126.299 253.857C132.598 257.52 137.08 259.98 139.717 261.27C142.354 262.559 144.492 263.584 146.074 264.258C147.275 264.844 148.564 265.166 149.971 265.166C151.377 265.166 152.666 264.873 153.867 264.258C155.479 263.555 157.588 262.559 160.254 261.27C162.891 259.98 167.373 257.49 173.672 253.857C179.971 250.195 186.006 246.328 191.807 242.227C197.607 238.125 203.936 232.969 210.791 226.787C217.646 220.576 223.535 214.219 228.486 207.656C233.438 201.094 237.568 193.623 240.938 185.156C244.277 176.719 245.947 168.193 245.947 159.58V44.4434C245.977 41.8359 245.01 39.5801 243.105 37.6758ZM220.84 160.664C220.84 202.354 150 238.271 150 238.271V59.502H220.84C220.84 59.502 220.84 118.975 220.84 160.664Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_68_61">
<rect width="300" height="300" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

49
logos/logo-horizontal-blue.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

49
logos/logo-horizontal-white.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

46
logos/logo-horizontal.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

51
logos/logo-vertical-blue.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

51
logos/logo-vertical-white.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

48
logos/logo-vertical.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
screenshots/apps-combo-logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
screenshots/apps-combo-logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
screenshots/apps-combo-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 968 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
screenshots/apps-combo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB