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

Brand updates 23 apr24 (#37)

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

* Add cell for color codes

The tables look better with a cell for the color codes.

* Update Readme

remove extra logo link and add screenshot image

* remove black logo
This commit is contained in:
DanHillesheim
2024-04-23 10:50:12 -06:00
committed by GitHub
parent 7746596e81
commit 7979cf1f8c
1 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
README.md
View File

@@ -7,7 +7,6 @@ This repository contains resources for the Bitwarden brand such as logos, icons,
- [Icon](/icons) - [Icon](/icons)
- [Screenshots](/screenshots) - [Screenshots](/screenshots)
- [Shield](/shield) - [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/)**
@@ -17,7 +16,6 @@ This repository contains resources for the Bitwarden brand such as logos, icons,
|---|---| |---|---|
| Default | ![Default](/logos/logo-horizontal-blue.svg) | | Default | ![Default](/logos/logo-horizontal-blue.svg) |
| Inverse | ![Inverse](/logos/logo-horizontal-white.svg) | | Inverse | ![Inverse](/logos/logo-horizontal-white.svg) |
| Black | ![Black](/logos/logo-horizontal.svg) |
## Product Icon ## Product Icon
@@ -40,42 +38,45 @@ This repository contains resources for the Bitwarden brand such as logos, icons,
## Product Screenshots ## Product Screenshots
![Bitwarden App Screenshot](/screenshots/apps-combo.png)
[View all product screenshots](/screenshots) [View all product screenshots](/screenshots)
## Color Palettes ## Color Palettes
### Branding ### Branding
| Web Colors | HEX value | | Web Colors | Color | HEX value |
|------------|-----------| |------------|-----------|-----------|
| Primary Blue | ![#175DDC](https://www.singlecolorimage.com/get/175DDC/32x32) `#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 | ![#1A41AC](https://www.singlecolorimage.com/get/1A41AC/32x32) | `#1A41AC` |
| Indigo Blue | ![#020F66](https://www.singlecolorimage.com/get/020F66/32x32) `#020F66` | | Indigo Blue | ![#020F66](https://www.singlecolorimage.com/get/020F66/32x32) | `#020F66` |
| Accent Teal | ![#2CDDE9](https://www.singlecolorimage.com/get/2CDDE9/32x32) `#2CDDE9` | | Accent Teal | ![#2CDDE9](https://www.singlecolorimage.com/get/2CDDE9/32x32) | `#2CDDE9` |
| Accent Melon | ![#FF4E63](https://www.singlecolorimage.com/get/FF4E63/32x32) `#FF4E63` | | Accent Melon | ![#FF4E63](https://www.singlecolorimage.com/get/FF4E63/32x32) | `#FF4E63` |
| Accent Yellow | ![#FFBF00](https://www.singlecolorimage.com/get/FFBF00/32x32) `#FFBF00` | | Accent Yellow | ![#FFBF00](https://www.singlecolorimage.com/get/FFBF00/32x32) | `#FFBF00` |
| Accent Purple | ![#9D26FF](https://www.singlecolorimage.com/get/9D26FF/32x32) `#9D26FF` | | Accent Purple | ![#9D26FF](https://www.singlecolorimage.com/get/9D26FF/32x32) | `#9D26FF` |
| Accent Gray | ![#F3F6F9](https://www.singlecolorimage.com/get/F3F6F9/32x32) `#F3F6F9` | | Accent Gray | ![#F3F6F9](https://www.singlecolorimage.com/get/F3F6F9/32x32) | `#F3F6F9` |
| Accent Black | ![#000000](https://www.singlecolorimage.com/get/000000/32x32) `#000000` | | Accent Black | ![#000000](https://www.singlecolorimage.com/get/000000/32x32) | `#000000` |
| Accent White | ![#FFFFFF](https://www.singlecolorimage.com/get/FFFFFF/32x32) `#FFFFFF` | | Accent White | ![#FFFFFF](https://www.singlecolorimage.com/get/FFFFFF/32x32) | `#FFFFFF` |
| Grayscale | HEX value | | Grayscale | Color | HEX value |
|------------|-----------| |------------|-----------|-----------|
| Deep Dark Gray | ![#282A31](https://www.singlecolorimage.com/get/282A31/32x32) `#282A31` | | Deep Dark Gray | ![#282A31](https://www.singlecolorimage.com/get/282A31/32x32) | `#282A31` |
| Dark Gray | ![#6E7881](https://www.singlecolorimage.com/get/6E7881/32x32) `#6E7881` | | Dark Gray | ![#6E7881](https://www.singlecolorimage.com/get/6E7881/32x32) | `#6E7881` |
| Deep Medium Gray | ![#939DA7](https://www.singlecolorimage.com/get/939DA7/32x32) `#939DA7` | | Deep Medium Gray | ![#939DA7](https://www.singlecolorimage.com/get/939DA7/32x32) | `#939DA7` |
| Medium Gray | ![#ABB4BD](https://www.singlecolorimage.com/get/ABB4BD/32x32) `#ABB4BD` | | Medium Gray | ![#ABB4BD](https://www.singlecolorimage.com/get/ABB4BD/32x32) | `#ABB4BD` |
| Light Gray | ![#CFD4DA](https://www.singlecolorimage.com/get/CFD4DA/32x32) `#CFD4DA` | | Light Gray | ![#CFD4DA](https://www.singlecolorimage.com/get/CFD4DA/32x32) | `#CFD4DA` |
| Lightest Gray | ![#E6EBEF](https://www.singlecolorimage.com/get/E6EBEF/32x32) `#E6EBEF` | | 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` |
| 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) [Download color codes](/brand-colors/pallette.scss)