Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color/brand Update #36

Merged
merged 3 commits into from
Apr 23, 2024
+156 −329
Merged

Color/brand Update #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
364b56d
Color/brand Update
DanHillesheim Apr 22, 2024
ec336ed
Forgot to add list
DanHillesheim Apr 22, 2024
d35aa28
Remove bang from list
DanHillesheim Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 67 additions & 53 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,39 @@

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

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

## Logos

**Horizontal**

![Bitwarden Logo Horizontal](/logos/logo-horizontal.png "Bitwarden Logo Horizontal")

**Vertical**

![Bitwarden Logo Vertical](/logos/logo-vertical.png "Bitwarden Logo Vertical")

[View more colors and sizes](/logos)

## Product Icons

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

![Bitwarden Product Icon Rounded 256](/icons/256x256.png "Bitwarden Product Icon Rounded 256")
![Bitwarden Product Icon Rounded 128](/icons/128x128.png "Bitwarden Product Icon Rounded 128")
![Bitwarden Product Icon Rounded 64](/icons/64x64.png "Bitwarden Product Icon Rounded 64")
![Bitwarden Product Icon Rounded 32](/icons/32x32.png "Bitwarden Product Icon Rounded 32")
![Bitwarden Product Icon Rounded 16](/icons/16x16.png "Bitwarden Product Icon Rounded 16")

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

![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")
## Logo

| Version | Preview |
|---|---|
| Default | ![Default](/logos/logo-horizontal-blue.svg) |
| Inverse | ![Inverse](/logos/logo-horizontal-white.svg) |
| Black | ![Black](/logos/logo-horizontal.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)

Expand All @@ -44,34 +46,46 @@ This repository contains resources for the Bitwarden brand such as logos, icons,

### Branding

Bitwarden Blue
![Bitwarden Blue](/brand-colors/bitwarden-blue.png "Bitwarden Blue")
`#175DDC`

Deep Blue
![Deep Blue](/brand-colors/deep-blue.png "Bitwarden Deep Blue")
`#1A41AC`

Indigo Blue
![Bitwarden Secondary Dark Blue](/brand-colors/indigo-blue.png "Bitwarden Indigo Blue")
`#020F66`

Highlight Teal
![Bitwarden Accent Green](/brand-colors/highlight-teal.png "Bitwarden Highlight Teal")
`#2CDDE9`


### Auxiliary

- Text: `#000000`
- Success: `#00a65a`
- Danger: `#dd4b39`
- Warning: `#bf7e16`
- Info: `#555555`
| Web Colors | 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 | 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 | 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/pallette.scss)

## 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

Expand Down
49 changes: 49 additions & 0 deletions brand-colors/palette.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 11 additions & 0 deletions logos/icon-inverse.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions logos/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading