diff --git a/site/src/common/blocks/AccordionBlock.module.scss b/site/src/common/blocks/AccordionBlock.module.scss
index 586aace90..27202709e 100644
--- a/site/src/common/blocks/AccordionBlock.module.scss
+++ b/site/src/common/blocks/AccordionBlock.module.scss
@@ -1,7 +1,7 @@
 .root {
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid var(--palette-gray-300);
+    border-bottom: 1px solid var(--brand-grey-300);
 }
 
 .pageLayoutContent {
diff --git a/site/src/common/blocks/AccordionItemBlock.module.scss b/site/src/common/blocks/AccordionItemBlock.module.scss
index 7daac1794..f95e8abad 100644
--- a/site/src/common/blocks/AccordionItemBlock.module.scss
+++ b/site/src/common/blocks/AccordionItemBlock.module.scss
@@ -5,23 +5,23 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--palette-primary-light);
+    color: var(--brand-primary-light);
 }
 
 .titleWrapper {
     text-align: left;
     display: flex;
     align-items: center;
-    border-top: 1px solid var(--palette-gray-300);
+    border-top: 1px solid var(--brand-grey-300);
     padding: var(--spacing-s500) 0;
     gap: 8px;
 
     &:hover {
-        color: var(--palette-primary-light);
+        color: var(--brand-primary-light);
 
         .iconWrapper {
-            background-color: var(--palette-primary-light);
-            color: var(--palette-primary-contrastText);
+            background-color: var(--brand-primary-light);
+            color: var(--brand-primary-contrast);
         }
     }
 }
diff --git a/site/src/common/blocks/MediaGalleryBlock.module.scss b/site/src/common/blocks/MediaGalleryBlock.module.scss
index e5174253a..c46742bcf 100644
--- a/site/src/common/blocks/MediaGalleryBlock.module.scss
+++ b/site/src/common/blocks/MediaGalleryBlock.module.scss
@@ -53,7 +53,7 @@
             display: block;
             mask-image: url("/assets/icons/arrow-right.svg");
             mask-repeat: no-repeat;
-            background-color: var(--palette-primary-main);
+            background-color: var(--brand-primary-main);
         }
     }
 
diff --git a/site/src/common/blocks/RichTextBlock.module.scss b/site/src/common/blocks/RichTextBlock.module.scss
index 877174be6..ccc284a96 100644
--- a/site/src/common/blocks/RichTextBlock.module.scss
+++ b/site/src/common/blocks/RichTextBlock.module.scss
@@ -21,11 +21,11 @@
 }
 
 .inlineLink {
-    color: var(--palette-primary-main);
+    color: var(--brand-primary-main);
     transition: color 0.3s ease-in-out;
 
     &:hover {
-        color: var(--palette-primary-dark);
+        color: var(--brand-primary-dark);
         text-decoration-thickness: 2px;
     }
 }
diff --git a/site/src/common/components/Button.module.scss b/site/src/common/components/Button.module.scss
index 92e03f33b..5871b3dba 100644
--- a/site/src/common/components/Button.module.scss
+++ b/site/src/common/components/Button.module.scss
@@ -24,53 +24,53 @@
 }
 
 .contained {
-    background-color: var(--palette-primary-main);
-    color: var(--palette-primary-contrastText);
-    border: 1px solid var(--palette-primary-main);
+    background-color: var(--brand-primary-main);
+    color: var(--brand-primary-contrast);
+    border: 1px solid var(--brand-primary-main);
 
     &:hover {
-        color: var(--palette-primary-dark);
-        border-color: var(--palette-primary-dark);
-        background-color: var(--palette-primary-contrastText);
+        color: var(--brand-primary-dark);
+        border-color: var(--brand-primary-dark);
+        background-color: var(--brand-primary-contrast);
     }
 
     &:disabled {
-        background-color: var(--palette-gray-50);
-        color: var(--palette-gray-400);
-        border-color: var(--palette-gray-200);
+        background-color: var(--brand-grey-050);
+        color: var(--brand-grey-400);
+        border-color: var(--brand-grey-200);
     }
 }
 
 .outlined {
     background-color: transparent;
-    color: var(--palette-primary-main);
-    border: 1px solid var(--palette-primary-main);
+    color: var(--brand-primary-main);
+    border: 1px solid var(--brand-primary-main);
 
     &:hover {
-        background-color: var(--palette-primary-dark);
-        color: var(--palette-primary-contrastText);
-        border-color: var(--palette-primary-dark);
+        background-color: var(--brand-primary-dark);
+        color: var(--brand-primary-contrast);
+        border-color: var(--brand-primary-dark);
     }
 
     &:disabled {
-        color: var(--palette-gray-300);
-        border-color: var(--palette-gray-200);
+        color: var(--brand-grey-300);
+        border-color: var(--brand-grey-200);
     }
 }
 
 .text {
     background-color: transparent;
-    color: var(--palette-primary-main);
+    color: var(--brand-primary-main);
     border: 1px solid transparent;
     text-decoration: underline;
     text-underline-offset: 3px;
 
     &:hover {
-        color: var(--palette-primary-dark);
+        color: var(--brand-primary-dark);
         text-decoration-thickness: 2px;
     }
 
     &:disabled {
-        color: var(--palette-gray-300);
+        color: var(--brand-grey-300);
     }
 }
diff --git a/site/src/common/components/Typography.module.scss b/site/src/common/components/Typography.module.scss
index 0a6e6fc3c..bd8563794 100644
--- a/site/src/common/components/Typography.module.scss
+++ b/site/src/common/components/Typography.module.scss
@@ -50,7 +50,7 @@
     @media (min-width: $breakpoint-lg) {
         font-size: 67px;
         line-height: 74px;
-        margin-bottom: 30px;
+        margin-bottom: 32px;
     }
 }
 
@@ -154,12 +154,102 @@
     }
 }
 
-.p300 {
+.e600 {
+    font-size: 20px;
+    line-height: 20px;
+    margin-bottom: 8px;
+
+    @media (min-width: $breakpoint-sm) {
+        font-size: 22px;
+        line-height: 22px;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        font-size: 26px;
+        line-height: 26px;
+    }
+
+    @media (min-width: $breakpoint-lg) {
+        font-size: 30px;
+        line-height: 30px;
+    }
+}
+
+.e550 {
+    font-size: 18px;
+    line-height: 18px;
+    margin-bottom: 4px;
+
+    @media (min-width: $breakpoint-sm) {
+        font-size: 20px;
+        line-height: 20px;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        font-size: 22px;
+        line-height: 22px;
+    }
+
+    @media (min-width: $breakpoint-lg) {
+        font-size: 26px;
+        line-height: 26px;
+    }
+}
+
+.e500 {
     font-size: 16px;
+    line-height: 16px;
+    margin-bottom: 4px;
+
+    @media (min-width: $breakpoint-sm) {
+        font-size: 18px;
+        line-height: 18px;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        font-size: 20px;
+        line-height: 20px;
+    }
+
+    @media (min-width: $breakpoint-lg) {
+        font-size: 22px;
+        line-height: 22px;
+    }
+}
+
+.e450 {
+    font-size: 13px;
+    line-height: 13px;
+    margin-bottom: 4px;
+
+    @media (min-width: $breakpoint-sm) {
+        font-size: 14px;
+        line-height: 14px;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        font-size: 16px;
+        line-height: 16px;
+    }
+
+    @media (min-width: $breakpoint-lg) {
+        font-size: 18px;
+        line-height: 18px;
+    }
+}
+
+.p300 {
+    font-size: 15px;
     line-height: 22px;
     font-weight: 400;
     margin-bottom: 16px;
 
+    @media (min-width: $breakpoint-sm) {
+        font-size: 16px;
+        line-height: 22px;
+        margin-bottom: 16px;
+    }
+
     @media (min-width: $breakpoint-md) {
         font-size: 17px;
         line-height: 24px;
@@ -174,11 +264,17 @@
 }
 
 .p200 {
-    font-size: 14px;
+    font-size: 13px;
     line-height: 20px;
     font-weight: 400;
     margin-bottom: 14px;
 
+    @media (min-width: $breakpoint-sm) {
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 14px;
+    }
+
     @media (min-width: $breakpoint-md) {
         font-size: 15px;
         line-height: 22px;
diff --git a/site/src/common/components/Typography.tsx b/site/src/common/components/Typography.tsx
index 785259614..a612e0235 100644
--- a/site/src/common/components/Typography.tsx
+++ b/site/src/common/components/Typography.tsx
@@ -3,7 +3,7 @@ import { type ComponentProps, type ElementType, type PropsWithChildren } from "r
 
 import styles from "./Typography.module.scss";
 
-type TypographyVariant = "h600" | "h550" | "h500" | "h450" | "h400" | "h350" | "p300" | "p200";
+type TypographyVariant = "h600" | "h550" | "h500" | "h450" | "h400" | "h350" | "e600" | "e550" | "e500" | "e450" | "p300" | "p200";
 
 const variantToElementMap: Record<TypographyVariant, ElementType> = {
     h600: "h1",
@@ -12,6 +12,10 @@ const variantToElementMap: Record<TypographyVariant, ElementType> = {
     h450: "h4",
     h400: "h5",
     h350: "h6",
+    e600: "p",
+    e550: "p",
+    e500: "p",
+    e450: "p",
     p300: "p",
     p200: "p",
 };
diff --git a/site/src/documents/NotFound.module.scss b/site/src/documents/NotFound.module.scss
index 9a8be5077..505458668 100644
--- a/site/src/documents/NotFound.module.scss
+++ b/site/src/documents/NotFound.module.scss
@@ -13,14 +13,14 @@
     text-decoration: none;
     display: inline-block;
     padding: var(--spacing-s100) 0;
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
 
     &:hover {
-        color: var(--palette-primary-main);
+        color: var(--brand-primary-main);
     }
 
     &.active {
-        text-decoration: underline var(--palette-primary-main);
+        text-decoration: underline var(--brand-primary-main);
         text-underline-offset: 8px;
     }
 }
diff --git a/site/src/documents/pages/blocks/BasicStageBlock.module.scss b/site/src/documents/pages/blocks/BasicStageBlock.module.scss
index 938a8a16b..d68ba4d6c 100644
--- a/site/src/documents/pages/blocks/BasicStageBlock.module.scss
+++ b/site/src/documents/pages/blocks/BasicStageBlock.module.scss
@@ -28,7 +28,7 @@
     flex: 1;
     flex-direction: column;
     justify-content: center;
-    color: var(--palette-text-inverted);
+    color: var(--brand-primary-contrast);
 }
 
 .mediaPhone {
diff --git a/site/src/documents/pages/blocks/BillboardTeaserBlock.module.scss b/site/src/documents/pages/blocks/BillboardTeaserBlock.module.scss
index fb1113b21..7f97dc0b8 100644
--- a/site/src/documents/pages/blocks/BillboardTeaserBlock.module.scss
+++ b/site/src/documents/pages/blocks/BillboardTeaserBlock.module.scss
@@ -28,7 +28,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    color: var(--palette-text-inverted);
+    color: var(--brand-primary-contrast);
     grid-column: 3 / -3;
 
     @media (min-width: $breakpoint-sm) {
diff --git a/site/src/documents/pages/blocks/ContentGroupBlock.module.scss b/site/src/documents/pages/blocks/ContentGroupBlock.module.scss
index 355261a3f..7f1825668 100644
--- a/site/src/documents/pages/blocks/ContentGroupBlock.module.scss
+++ b/site/src/documents/pages/blocks/ContentGroupBlock.module.scss
@@ -1,8 +1,8 @@
 .lightGray {
-    background-color: var(--palette-gray-100);
+    background-color: var(--brand-grey-100);
 }
 
 .darkGray {
-    background-color: var(--palette-gray-900);
-    color: var(--palette-text-inverted);
+    background-color: var(--brand-grey-900);
+    color: var(--brand-primary-contrast);
 }
diff --git a/site/src/documents/pages/blocks/KeyFactItemBlock.module.scss b/site/src/documents/pages/blocks/KeyFactItemBlock.module.scss
index a95f65522..605dfbcc3 100644
--- a/site/src/documents/pages/blocks/KeyFactItemBlock.module.scss
+++ b/site/src/documents/pages/blocks/KeyFactItemBlock.module.scss
@@ -11,7 +11,7 @@
 
 .fact {
     margin-bottom: var(--spacing-s300);
-    color: var(--palette-primary-dark);
+    color: var(--brand-primary-dark);
 }
 
 .description {
diff --git a/site/src/documents/pages/blocks/TeaserItemBlock.module.scss b/site/src/documents/pages/blocks/TeaserItemBlock.module.scss
index 4b6e9c927..943c708e1 100644
--- a/site/src/documents/pages/blocks/TeaserItemBlock.module.scss
+++ b/site/src/documents/pages/blocks/TeaserItemBlock.module.scss
@@ -7,7 +7,7 @@
     flex: 1;
     flex-direction: row;
     gap: var(--spacing-s300);
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
 
     @media (min-width: $breakpoint-md) {
         flex: unset;
@@ -46,11 +46,11 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-s200);
-    color: var(--palette-primary-main);
+    color: var(--brand-primary-main);
     transition: color 0.3s ease-in-out;
 
     &:hover {
-        color: var(--palette-primary-dark);
+        color: var(--brand-primary-dark);
     }
 }
 
diff --git a/site/src/layout/footer/blocks/FooterContentBlock.module.scss b/site/src/layout/footer/blocks/FooterContentBlock.module.scss
index ee4ab1133..bd7f9daa0 100644
--- a/site/src/layout/footer/blocks/FooterContentBlock.module.scss
+++ b/site/src/layout/footer/blocks/FooterContentBlock.module.scss
@@ -2,8 +2,8 @@
 
 .root {
     margin-top: auto;
-    background-color: var(--palette-gray-900);
-    color: var(--palette-gray-50);
+    background-color: var(--brand-grey-900);
+    color: var(--brand-grey-050);
 }
 
 .pageLayoutContent {
@@ -60,11 +60,11 @@
 
 .copyrightNotice {
     text-align: center;
-    color: var(--palette-text-secondary);
+    color: var(--brand-grey-600);
 }
 
 .linkText {
-    color: var(--palette-primary-main);
+    color: var(--brand-primary-main);
     text-decoration: underline;
 }
 
@@ -72,7 +72,7 @@
     width: 100%;
     height: 1px;
     border: none;
-    background-color: var(--palette-gray-600);
-    color: var(--palette-gray-600);
+    background-color: var(--brand-grey-600);
+    color: var(--brand-grey-600);
     margin: var(--spacing-d200) 0;
 }
diff --git a/site/src/layout/header/DesktopMenu.module.scss b/site/src/layout/header/DesktopMenu.module.scss
index 5aa292f8a..febe83055 100644
--- a/site/src/layout/header/DesktopMenu.module.scss
+++ b/site/src/layout/header/DesktopMenu.module.scss
@@ -30,9 +30,9 @@
     list-style-type: none;
     padding: var(--spacing-s100);
     background-color: white;
-    border-left: 1px solid var(--palette-gray-200);
-    border-bottom: 1px solid var(--palette-gray-200);
-    border-right: 1px solid var(--palette-gray-200);
+    border-left: 1px solid var(--brand-grey-200);
+    border-bottom: 1px solid var(--brand-grey-200);
+    border-right: 1px solid var(--brand-grey-200);
 
     &Expanded {
         display: flex;
@@ -67,12 +67,12 @@
 .animatedChevron {
     width: 20px;
     height: 20px;
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
     transform: rotate(0deg);
     transition: transform 0.4s ease;
 
     &Expanded {
-        color: var(--palette-primary-main);
+        color: var(--brand-primary-main);
         transform: rotate(-180deg);
     }
 }
@@ -102,14 +102,14 @@
     text-decoration: none;
     display: inline-block;
     padding: var(--spacing-s100) 0;
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
 
     &:hover {
-        color: var(--palette-primary-main);
+        color: var(--brand-primary-main);
     }
 
     &Active {
-        text-decoration: underline var(--palette-primary-main);
+        text-decoration: underline var(--brand-primary-main);
         text-underline-offset: 8px;
     }
 }
diff --git a/site/src/layout/header/Header.module.scss b/site/src/layout/header/Header.module.scss
index cb08db12e..7bf6e31a6 100644
--- a/site/src/layout/header/Header.module.scss
+++ b/site/src/layout/header/Header.module.scss
@@ -29,5 +29,5 @@
     height: var(--header-height);
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--palette-gray-200);
+    border-bottom: 1px solid var(--brand-grey-200);
 }
diff --git a/site/src/layout/header/MobileMenu.module.scss b/site/src/layout/header/MobileMenu.module.scss
index 9ca697008..65dba5d35 100644
--- a/site/src/layout/header/MobileMenu.module.scss
+++ b/site/src/layout/header/MobileMenu.module.scss
@@ -23,7 +23,7 @@
     height: 0;
     width: 100vw;
     z-index: 40;
-    background-color: var(--palette-gray-200);
+    background-color: var(--brand-grey-200);
     overflow: auto;
     visibility: hidden;
     transition:
@@ -50,7 +50,7 @@
     left: 0;
     height: calc(var(--full-viewport-height) - var(--header-height));
     width: 100vw;
-    background-color: var(--palette-gray-200);
+    background-color: var(--brand-grey-200);
     padding: 0;
     overflow: auto;
     visibility: hidden;
@@ -71,11 +71,11 @@
     text-decoration: none;
     display: inline-block;
     padding: var(--spacing-s500) 0;
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
 
     @media (min-width: $breakpoint-sm) {
         &:hover {
-            color: var(--palette-primary-main);
+            color: var(--brand-primary-main);
         }
     }
 }
@@ -89,7 +89,7 @@
 
     @media (min-width: $breakpoint-sm) {
         &:hover {
-            color: var(--palette-primary-main);
+            color: var(--brand-primary-main);
         }
     }
 }
@@ -102,18 +102,18 @@
 .backButton {
     @extend %buttonBase;
     align-items: center;
-    border-bottom: 1px solid var(--palette-gray-300);
+    border-bottom: 1px solid var(--brand-grey-300);
 }
 
 .overviewButton {
     @extend %buttonBase;
     align-items: center;
     text-decoration: none;
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
 
     @media (min-width: $breakpoint-sm) {
         &:hover {
-            color: var(--palette-primary-main);
+            color: var(--brand-primary-main);
         }
     }
 }
diff --git a/site/src/styles/global.scss b/site/src/styles/global.scss
index c577b6827..e0508c7f0 100644
--- a/site/src/styles/global.scss
+++ b/site/src/styles/global.scss
@@ -1,40 +1,37 @@
 @use "./variables" as *;
 
 :root {
-    --palette-primary-light: #4b9fea;
-    --palette-primary-main: #1e88e5;
-    --palette-primary-dark: #155fa0;
-    --palette-primary-contrastText: #fff;
-    --palette-text-primary: #212121;
-    --palette-text-secondary: #757575;
-    --palette-text-inverted: #fff;
-    --palette-gray-50: #fafafa;
-    --palette-gray-100: #f5f5f5;
-    --palette-gray-200: #eee;
-    --palette-gray-300: #e0e0e0;
-    --palette-gray-400: #bdbdbd;
-    --palette-gray-500: #9e9e9e;
-    --palette-gray-600: #757575;
-    --palette-gray-700: #616161;
-    --palette-gray-800: #424242;
-    --palette-gray-900: #212121;
-    --palette-error-main: #bc3520;
-    --palette-error-light: #c6523f;
-    --palette-error-dark: #832617;
-    --palette-error-contrastText: #b3b3b3;
-    --palette-warning-main: #f3b346;
-    --palette-warning-light: #f5c15f;
-    --palette-warning-dark: #a87d32;
-    --palette-warning-contrastText: #090909;
-    --palette-info-main: #f3b346;
-    --palette-info-light: #f5c15f;
-    --palette-info-dark: #a87d32;
-    --palette-info-contrastText: #090909;
-    --palette-success-main: #66c54f;
-    --palette-success-light: #77d06a;
-    --palette-success-dark: #488938;
-    --palette-success-contrastText: #090909;
-    --palette-functional-highlight-main: #d817fa;
+    --brand-primary-light: #4f99dc;
+    --brand-primary-main: #166dba;
+    --brand-primary-dark: #0e4c82;
+    --brand-primary-contrast: #fff;
+    --brand-grey-050: #f5f5f5;
+    --brand-grey-100: #ececec;
+    --brand-grey-200: #d8d8d8;
+    --brand-grey-300: #c5c5c5;
+    --brand-grey-400: #b1b1b1;
+    --brand-grey-500: #9e9e9e;
+    --brand-grey-600: #7e7e7e;
+    --brand-grey-700: #5f5f5f;
+    --brand-grey-800: #3f3f3f;
+    --brand-grey-900: #202020;
+    --functional-error-main: #bc3520;
+    --functional-error-light: #c6523f;
+    --functional-error-dark: #832617;
+    --functional-error-contrast: #fff;
+    --functional-warning-main: #f3b346;
+    --functional-warning-light: #f5c15f;
+    --functional-warning-dark: #a87d32;
+    --functional-warning-contrast: #000;
+    --functional-info-main: #5cb4f0;
+    --functional-info-light: #73c1f2;
+    --functional-info-dark: #417da6;
+    --functional-info-contrast: #090909;
+    --functional-success-main: #66c54f;
+    --functional-success-light: #77d06a;
+    --functional-success-dark: #488938;
+    --functional-success-contrast: #000;
+    --functional-highlight-main: #d817fa;
     --spacing-d400: 72px;
     --spacing-d300: 44px;
     --spacing-d200: 28px;
@@ -87,12 +84,12 @@ html {
 
 body {
     margin: 0;
-    font-family: Roboto, sans-serif;
+    font-family: Arial, sans-serif;
 
     /* Improve text rendering with font-smoothing */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    color: var(--palette-text-primary);
+    color: var(--brand-grey-900);
 
     /* Make body take the height of the viewport to put footer at the bottom  */
     display: flex;
@@ -179,7 +176,7 @@ legend {
 }
 
 :focus {
-    outline: 3px solid var(--palette-functional-highlight-main);
+    outline: 3px solid var(--functional-highlight-main);
     outline-offset: 0;
-    border: 2px solid var(--palette-primary-contrastText);
+    border: 2px solid var(--brand-primary-contrast);
 }