diff --git a/README.md b/README.md
index fbc0150..d81a524 100644
--- a/README.md
+++ b/README.md
@@ -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**
-
-
-
-**Vertical**
-
-
-
-[View more colors and sizes](/logos)
-
-## Product Icons
-**Rounded**
+- [Logo](/logos)
+- [Icon](/icons)
+- [Screenshots](/screenshots)
+- [Shield](/shield)
+- [Logos](/logos)
-
-
-
-
-
-
-**Square**
+**For more brand resources visit [bitwarden.com/brand](https://bitwarden.com/brand/)**
-
-
-
-
-
+## Logo
+
+| Version | Preview |
+|---|---|
+| Default |  |
+| Inverse |  |
+| Black |  |
+
+## Product Icon
+
+| Version | Preview |
+|---|---|
+| Default (svg) |  |
+| Inverse (svg) |  |
+| Rounded 256px (png) |  |
+| Rounded 128px (png) |  |
+| Rounded 64px (png) |  |
+| Rounded 32px (png) |  |
+| Rounded 16px (png) |  |
+| Square 256px (png) |  |
+| Square 128px (png) |  |
+| Square 64px (png) |  |
+| Square 32px (png) |  |
+| Square 16px (png) |  |
[View more sizes](/icons)
@@ -44,34 +46,46 @@ This repository contains resources for the Bitwarden brand such as logos, icons,
### Branding
-Bitwarden Blue
-
- `#175DDC`
-
-Deep Blue
-
-`#1A41AC`
-
-Indigo Blue
-
-`#020F66`
-
-Highlight Teal
-
-`#2CDDE9`
-
-
-### Auxiliary
-
-- Text: `#000000`
-- Success: `#00a65a`
-- Danger: `#dd4b39`
-- Warning: `#bf7e16`
-- Info: `#555555`
+| Web Colors | HEX value |
+|------------|-----------|
+| Primary Blue |  `#175DDC` |
+| Deep Blue |  `#1A41AC` |
+| Indigo Blue |  `#020F66` |
+| Accent Teal |  `#2CDDE9` |
+| Accent Melon |  `#FF4E63` |
+| Accent Yellow |  `#FFBF00` |
+| Accent Purple |  `#9D26FF` |
+| Accent Gray |  `#F3F6F9` |
+| Accent Black |  `#000000` |
+| Accent White |  `#FFFFFF` |
+
+| Grayscale | HEX value |
+|------------|-----------|
+| Deep Dark Gray |  `#282A31` |
+| Dark Gray |  `#6E7881` |
+| Deep Medium Gray |  `#939DA7` |
+| Medium Gray |  `#ABB4BD` |
+| Light Gray |  `#CFD4DA` |
+| Lightest Gray |  `#E6EBEF` |
+
+| Product Colors | HEX value |
+|------------|-----------|
+| Text |  `#000000` |
+| Success |  `#57C86B` |
+| Danger |  `#E5544A` |
+| Warning |  `#E8BF31` |
+| Info |  `#63A2FD` |
+| Background |  `#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
diff --git a/brand-colors/palette.scss b/brand-colors/palette.scss
new file mode 100644
index 0000000..f5003a9
--- /dev/null
+++ b/brand-colors/palette.scss
@@ -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);
\ No newline at end of file
diff --git a/logos/icon-inverse.svg b/logos/icon-inverse.svg
new file mode 100644
index 0000000..64a68e7
--- /dev/null
+++ b/logos/icon-inverse.svg
@@ -0,0 +1,11 @@
+
diff --git a/logos/icon.svg b/logos/icon.svg
new file mode 100644
index 0000000..761c97a
--- /dev/null
+++ b/logos/icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/logos/logo-horizontal-blue.svg b/logos/logo-horizontal-blue.svg
index 6b6c6f8..4d78ecf 100644
--- a/logos/logo-horizontal-blue.svg
+++ b/logos/logo-horizontal-blue.svg
@@ -1,47 +1,4 @@
-
-
-