diff --git a/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss b/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss
index c40d4188..efe67ad4 100644
--- a/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss
+++ b/site/src/components/common/AnimatedDottedContainer/AnimatedDottedContainer.module.scss
@@ -21,7 +21,7 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: $black;
+  background-color: $gray900;
   will-change: transform;
 }
 
@@ -35,7 +35,7 @@
     bottom: size(30);
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -49,7 +49,7 @@
     bottom: size(30);
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -67,7 +67,7 @@
     top: size(30);
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
   }
 
   &:after {
@@ -77,7 +77,7 @@
     top: size(30);
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
   }
 
   .line {
diff --git a/site/src/components/common/ArrowButton/ArrowButton.module.scss b/site/src/components/common/ArrowButton/ArrowButton.module.scss
index 7d9e46ed..9ae60718 100644
--- a/site/src/components/common/ArrowButton/ArrowButton.module.scss
+++ b/site/src/components/common/ArrowButton/ArrowButton.module.scss
@@ -19,7 +19,7 @@
     left: 0;
     height: 2px;
     width: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/components/common/BenefitsCard/BenefitsCard.module.scss b/site/src/components/common/BenefitsCard/BenefitsCard.module.scss
index bfc05a25..c34917c2 100644
--- a/site/src/components/common/BenefitsCard/BenefitsCard.module.scss
+++ b/site/src/components/common/BenefitsCard/BenefitsCard.module.scss
@@ -24,7 +24,7 @@
 .title {
   margin-bottom: size(16);
 
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     margin-bottom: size(25);
diff --git a/site/src/components/common/Footer/Footer.module.scss b/site/src/components/common/Footer/Footer.module.scss
index c76da816..11b16e61 100644
--- a/site/src/components/common/Footer/Footer.module.scss
+++ b/site/src/components/common/Footer/Footer.module.scss
@@ -4,7 +4,7 @@
 @use '~styles/mixins' as *;
 
 .root {
-  color: $white;
+  color: $gray-50;
 
   @include sm-paragraph;
 }
@@ -54,6 +54,10 @@
     margin-bottom: size(8);
     transition: opacity 0.3s ease;
 
+    @include button-small;
+
+    color: $buttonGray50;
+
     @include hover {
       opacity: 0.5;
       cursor: pointer;
@@ -69,7 +73,7 @@
 
 .title {
   margin-bottom: size(15);
-  color: $grey;
+  color: $secondary;
 }
 
 .socials {
@@ -108,7 +112,7 @@
 .place {
   width: size(233);
 
-  @include paragraph;
+  @include main;
 
   @include mobile {
     width: 100%;
@@ -131,6 +135,8 @@
 .copyright {
   grid-column: span 3;
 
+  letter-spacing: size(-0.1);
+
   @include mobile {
     margin-bottom: size(15);
   }
@@ -139,6 +145,10 @@
 .creators {
   transition: opacity 0.3s ease;
 
+  @include button-small;
+
+  color: $buttonGray50;
+
   @include hover {
     opacity: 0.5;
   }
diff --git a/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss b/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss
index cb77cac7..5c89bc0c 100644
--- a/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss
+++ b/site/src/components/common/Header/BurgerMenu/BurgerMenu.module.scss
@@ -10,7 +10,7 @@
   height: get-real-vh(100);
   width: 100%;
   z-index: -1;
-  background-color: $black;
+  background-color: $gray900;
   justify-content: space-between;
   transform: translateY(calc(-150% - size(30)));
   transition: transform 1s ease;
@@ -83,7 +83,7 @@
 
 .right {
   padding: 0 size(53) size(20) size(30);
-  background-color: $black;
+  background-color: $gray900;
 }
 
 .link {
@@ -105,7 +105,7 @@
 .box3 {
   width: 30%;
   height: 45%;
-  background: $black;
+  background: $gray900;
   display: flex;
   align-items: flex-end;
 }
diff --git a/site/src/components/common/Header/Header.module.scss b/site/src/components/common/Header/Header.module.scss
index 21529b73..b121cead 100644
--- a/site/src/components/common/Header/Header.module.scss
+++ b/site/src/components/common/Header/Header.module.scss
@@ -19,7 +19,7 @@
   display: grid;
   grid-template-columns: size(262) repeat(2, size(270)) 1fr;
   padding: size(6) size(12);
-  background-color: $white;
+  background-color: $gray-50;
 
   @include mobile {
     grid-template-columns: repeat(2, 1fr);
@@ -29,7 +29,7 @@
 
 .logo {
   width: size(141.7);
-  color: $black;
+  color: $gray900;
 
   @include mobile {
     width: size(150);
@@ -67,11 +67,11 @@
   }
 
   @include hover {
-    color: $black;
+    color: $gray900;
     transition: color 0.3s ease;
 
     .square {
-      background-color: $black;
+      background-color: $gray900;
       transition: background-color 0.3s ease;
     }
   }
@@ -81,16 +81,16 @@
   transition: color 0.3s ease;
 
   @include hover {
-    color: $black;
+    color: $gray900;
     transition: color 0.3s ease;
   }
 }
 
 .isActive {
-  color: $black;
+  color: $gray900;
 
   .square {
-    background-color: $black;
+    background-color: $gray900;
   }
 }
 
diff --git a/site/src/components/common/HeadingSection/HeadingSection.module.scss b/site/src/components/common/HeadingSection/HeadingSection.module.scss
index 41f46990..1fedc2df 100644
--- a/site/src/components/common/HeadingSection/HeadingSection.module.scss
+++ b/site/src/components/common/HeadingSection/HeadingSection.module.scss
@@ -11,31 +11,31 @@
   width: 100%;
   min-height: size(420);
   padding: size(30);
-  background-color: $black;
+  background-color: $gray900;
   word-break: break-word;
 
-    &:before {
+  &:before {
     content: '';
     position: absolute;
     top: 0px;
     left: -1px;
     width: 4px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
     }
   }
 
-    &:after {
+  &:after {
     content: '';
     position: absolute;
     top: 0px;
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/components/common/IntroAnimation/IntroAnimation.module.scss b/site/src/components/common/IntroAnimation/IntroAnimation.module.scss
index b8caf717..9e0d484c 100644
--- a/site/src/components/common/IntroAnimation/IntroAnimation.module.scss
+++ b/site/src/components/common/IntroAnimation/IntroAnimation.module.scss
@@ -8,7 +8,7 @@
   grid-template-columns: size(272) 1fr;
   width: 100%;
   min-height: calc(100vh - #{size(30)});
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     grid-template-columns: 100%;
@@ -21,7 +21,6 @@
   position: relative;
   grid-area: 2 / 2;
 
-
   &:before {
     content: '';
     position: absolute;
@@ -29,7 +28,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -43,7 +42,7 @@
     left: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -71,11 +70,14 @@
 
 .description {
   @include paragraph;
+  line-height: size(21);
   width: 100%;
   z-index: 2;
 
   @include mobile {
     max-width: 100%;
+    // @include sm-paragraph;
+    line-height: size(20);
   }
 }
 
diff --git a/site/src/components/common/IntroAnimation/IntroAnimation.tsx b/site/src/components/common/IntroAnimation/IntroAnimation.tsx
index c92150c9..14b4fd69 100644
--- a/site/src/components/common/IntroAnimation/IntroAnimation.tsx
+++ b/site/src/components/common/IntroAnimation/IntroAnimation.tsx
@@ -77,7 +77,7 @@ function IntroAnimation({
     })
 
     navigationTimeline.to(sideNavigation, {
-      scale: '0.52',
+      scale: '1',
       ease: 'expo.out',
     })
 
diff --git a/site/src/components/common/JoinSection/JoinSection.module.scss b/site/src/components/common/JoinSection/JoinSection.module.scss
index 0077dc86..b9f8bcac 100644
--- a/site/src/components/common/JoinSection/JoinSection.module.scss
+++ b/site/src/components/common/JoinSection/JoinSection.module.scss
@@ -32,7 +32,7 @@
   width: size(544);
   padding-bottom: size(30);
   margin-bottom: -1px;
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     width: 100%;
@@ -51,17 +51,17 @@
 .contentWrapper {
   position: relative;
   width: size(272);
-  background-color: $black;
+  background-color: $gray900;
   margin-bottom: -1px;
 
-    &:after {
+  &:after {
     content: '';
     position: absolute;
     top: 0px;
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/components/common/LastSection/LastSection.module.scss b/site/src/components/common/LastSection/LastSection.module.scss
index 5621afc2..535b1a85 100644
--- a/site/src/components/common/LastSection/LastSection.module.scss
+++ b/site/src/components/common/LastSection/LastSection.module.scss
@@ -13,7 +13,7 @@
 }
 
 .box {
-  background-color: $black;
+  background-color: $gray900;
 }
 
 .box1 {
diff --git a/site/src/components/common/ListItem/ListItem.module.scss b/site/src/components/common/ListItem/ListItem.module.scss
index dd2d9fa1..3f08d49e 100644
--- a/site/src/components/common/ListItem/ListItem.module.scss
+++ b/site/src/components/common/ListItem/ListItem.module.scss
@@ -21,7 +21,7 @@
     height: size(8);
     margin: size(4) size(20) 0 0;
     content: '';
-    background-color: $white;
+    background-color: $gray-50;
 
     @include mobile {
       margin: size(4) size(10) 0 0;
diff --git a/site/src/components/common/SideNavigation/SideNavigation.module.scss b/site/src/components/common/SideNavigation/SideNavigation.module.scss
index 988e932f..615131c2 100644
--- a/site/src/components/common/SideNavigation/SideNavigation.module.scss
+++ b/site/src/components/common/SideNavigation/SideNavigation.module.scss
@@ -18,8 +18,8 @@
     position: relative;
     left: unset;
     top: unset;
-    width: 100%;
     height: 100%;
+    width: size(158);
   }
 }
 
@@ -44,7 +44,7 @@
 }
 
 .title {
-  @include heading-02;
+  @include heading-03;
   text-align: left;
 
   @include mobile {
@@ -53,11 +53,9 @@
 }
 
 .titleLarge {
-  font-size: size(64);
-  line-height: 90%;
-
+  @include heading-01;
   @include mobile {
-    font-size: size(45);
+    @include heading-04;
     width: 100%;
   }
 }
@@ -65,7 +63,7 @@
 .linkWrapper {
   width: size(272);
   margin-bottom: size(30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     display: none;
diff --git a/site/src/components/common/SocialButton/SocialButton.module.scss b/site/src/components/common/SocialButton/SocialButton.module.scss
index 91305092..9db5a052 100644
--- a/site/src/components/common/SocialButton/SocialButton.module.scss
+++ b/site/src/components/common/SocialButton/SocialButton.module.scss
@@ -2,14 +2,13 @@
 @use '~styles/colors' as *;
 @use '~styles/mixins' as *;
 
-
 .root {
   display: block;
   width: size(80);
   height: size(80);
   padding: size(20);
   border-radius: 50%;
-  background-color: $white;
+  background-color: $gray-50;
   transition: opacity 0.3s ease;
 
   @include mobile {
diff --git a/site/src/components/common/TagButton/TagButton.module.scss b/site/src/components/common/TagButton/TagButton.module.scss
index b0aafc24..39d2e327 100644
--- a/site/src/components/common/TagButton/TagButton.module.scss
+++ b/site/src/components/common/TagButton/TagButton.module.scss
@@ -4,7 +4,7 @@
 @use '~styles/mixins' as *;
 
 .root {
-  border: size(1) solid $white;
+  border: size(1) solid $gray-50;
   padding: size(10);
   transition: color 0.3s, background-color 0.3s;
 
@@ -12,6 +12,6 @@
 }
 
 .rootActive {
-  background-color: $white;
+  background-color: $gray-50;
   color: $fullBlack;
 }
diff --git a/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss b/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss
index 1812ff92..04e6dacf 100644
--- a/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss
+++ b/site/src/components/common/WhiteRectangle/WhiteRectangle.module.scss
@@ -6,7 +6,7 @@
   flex-shrink: 0;
   width: 100%;
   height: size(30);
-  background-color: $white;
+  background-color: $gray-50;
 
   @include mobile {
     height: size(20);
diff --git a/site/src/components/pages/About/Hero/Hero.module.scss b/site/src/components/pages/About/Hero/Hero.module.scss
index d2cbefbc..fc50cd6d 100644
--- a/site/src/components/pages/About/Hero/Hero.module.scss
+++ b/site/src/components/pages/About/Hero/Hero.module.scss
@@ -42,7 +42,7 @@
     right: 0px;
     height: 2px;
     width: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -56,7 +56,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -65,7 +65,7 @@
 
   p {
     padding: size(30);
-    background-color: $black;
+    background-color: $gray900;
 
     @include paragraph;
   }
@@ -94,7 +94,7 @@
   display: flex;
   align-items: flex-start;
   height: 100%;
-  background-color: $black;
+  background-color: $gray900;
 
   &:after {
     content: '';
@@ -103,7 +103,7 @@
     bottom: -1px;
     height: 2px;
     width: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -122,7 +122,7 @@
 .content {
   position: relative;
   display: grid;
-  background-color: $black;
+  background-color: $gray900;
   grid-column: span 2;
   gap: size(60);
 
@@ -133,7 +133,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -160,7 +160,7 @@
 }
 
 .title {
-  @include heading-02;
+  @include heading-03;
 }
 
 .desc {
@@ -204,7 +204,7 @@
 .inTouch {
   width: size(181);
 
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     width: size(170);
diff --git a/site/src/components/pages/About/OurTeam/OurTeam.module.scss b/site/src/components/pages/About/OurTeam/OurTeam.module.scss
index 2edea50e..665a688c 100644
--- a/site/src/components/pages/About/OurTeam/OurTeam.module.scss
+++ b/site/src/components/pages/About/OurTeam/OurTeam.module.scss
@@ -35,7 +35,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -50,10 +50,10 @@
 .title {
   min-height: size(240);
   padding: size(30) size(162) size(120) size(30);
-  background-color: $black;
+  background-color: $gray900;
   word-break: break-word;
 
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     min-height: auto;
@@ -69,7 +69,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(58);
diff --git a/site/src/components/pages/About/Partners/Item/Item.module.scss b/site/src/components/pages/About/Partners/Item/Item.module.scss
index 07d8487f..a1a4d096 100644
--- a/site/src/components/pages/About/Partners/Item/Item.module.scss
+++ b/site/src/components/pages/About/Partners/Item/Item.module.scss
@@ -10,7 +10,7 @@
   padding: size(30);
   cursor: pointer;
 
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     padding: size(23) size(10);
@@ -32,7 +32,7 @@
     content: '';
     transition: transform 0.3s ease;
     transform: translateY(-50%);
-    background-color: $white;
+    background-color: $gray-50;
   }
 
   &::after {
diff --git a/site/src/components/pages/About/Partners/Partners.module.scss b/site/src/components/pages/About/Partners/Partners.module.scss
index c60b7f6b..1b14d519 100644
--- a/site/src/components/pages/About/Partners/Partners.module.scss
+++ b/site/src/components/pages/About/Partners/Partners.module.scss
@@ -35,7 +35,7 @@
 }
 
 .content {
-  background-color: $black;
+  background-color: $gray900;
   padding: size(30) 0;
 
   @include mobile {
diff --git a/site/src/components/pages/About/Toolchain/Toolchain.module.scss b/site/src/components/pages/About/Toolchain/Toolchain.module.scss
index bc7016c4..55578c3d 100644
--- a/site/src/components/pages/About/Toolchain/Toolchain.module.scss
+++ b/site/src/components/pages/About/Toolchain/Toolchain.module.scss
@@ -26,7 +26,7 @@
 .right {
   position: relative;
   margin-top: size(180);
-  background-color: $black;
+  background-color: $gray900;
 
   &:after {
     content: '';
@@ -35,7 +35,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/components/pages/BlogsPage/BlogsPage.module.scss b/site/src/components/pages/BlogsPage/BlogsPage.module.scss
index 914f5712..a7bf4aec 100644
--- a/site/src/components/pages/BlogsPage/BlogsPage.module.scss
+++ b/site/src/components/pages/BlogsPage/BlogsPage.module.scss
@@ -58,7 +58,7 @@
     margin-bottom: size(16);
   }
 
-  @include heading-02;
+  @include heading-03;
 
   @include hover {
     color: $white;
@@ -69,8 +69,6 @@
       margin-bottom: 0;
       margin-right: size(30);
     }
-
-    @include paragraph;
   }
 }
 
@@ -80,7 +78,7 @@
 
 .activeTag {
   background-color: $white;
-  color: $black;
+  color: $gray900;
 }
 
 .mobileSortButtons {
@@ -133,7 +131,6 @@
   padding-bottom: 20px;
 
   @include mobile {
-    // width: size(355);
     padding: 0 size(10);
     width: 100%;
   }
@@ -172,7 +169,7 @@
 }
 
 .pageDescription {
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     padding-bottom: size(10);
diff --git a/site/src/components/pages/Careers/Intro/Intro.module.scss b/site/src/components/pages/Careers/Intro/Intro.module.scss
index 233b0619..f1fb4070 100644
--- a/site/src/components/pages/Careers/Intro/Intro.module.scss
+++ b/site/src/components/pages/Careers/Intro/Intro.module.scss
@@ -30,7 +30,7 @@
 }
 
 .text {
-  background-color: $black;
+  background-color: $gray900;
   padding: 0 size(30) size(30);
 
   @include paragraph;
@@ -43,7 +43,7 @@
 
 .box {
   width: size(272);
-  background-color: $black;
+  background-color: $gray900;
 }
 
 .box1 {
diff --git a/site/src/components/pages/Careers/Jobs/Jobs.module.scss b/site/src/components/pages/Careers/Jobs/Jobs.module.scss
index 83729a77..cf5a7de8 100644
--- a/site/src/components/pages/Careers/Jobs/Jobs.module.scss
+++ b/site/src/components/pages/Careers/Jobs/Jobs.module.scss
@@ -66,7 +66,7 @@
 
 .description {
   padding: size(30) size(160) size(150) size(30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include heading-02;
 
@@ -95,7 +95,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(54);
diff --git a/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss b/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss
index 2d0cfc04..b42a71ff 100644
--- a/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss
+++ b/site/src/components/pages/Careers/JoinUs/JoinUs.module.scss
@@ -11,7 +11,7 @@
 .content {
   position: relative;
   height: 100%;
-  background-color: $black;
+  background-color: $gray900;
   width: 50%;
 
   &:after {
@@ -21,7 +21,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -51,7 +51,7 @@
   width: 80%;
   padding: size(30);
 
-  @include heading-02;
+  @include heading-01;
 
   @include mobile {
     width: 100%;
diff --git a/site/src/components/pages/Error/Error.module.scss b/site/src/components/pages/Error/Error.module.scss
index e7becde5..63bc408e 100644
--- a/site/src/components/pages/Error/Error.module.scss
+++ b/site/src/components/pages/Error/Error.module.scss
@@ -42,7 +42,7 @@
 }
 
 .title {
-  background-color: $black;
+  background-color: $gray900;
   margin: size(-30) 0 size(-5);
 
   font-size: size(330);
@@ -66,7 +66,7 @@
   @include mobile {
     position: relative;
     padding: size(10) size(12);
-    background-color: $black;
+    background-color: $gray900;
   }
 }
 
@@ -105,7 +105,7 @@
 
 .text {
   padding: size(112) size(30) size(30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include paragraph;
 
@@ -118,7 +118,7 @@
 
 .box {
   width: size(272);
-  background-color: $black;
+  background-color: $gray900;
 }
 
 .box1 {
diff --git a/site/src/components/pages/Home/About/About.module.scss b/site/src/components/pages/Home/About/About.module.scss
index 91b2643e..2e535c62 100644
--- a/site/src/components/pages/Home/About/About.module.scss
+++ b/site/src/components/pages/Home/About/About.module.scss
@@ -27,7 +27,7 @@
   position: relative;
   margin-top: size(180);
   height: 100%;
-  
+
   &:after {
     content: '';
     position: absolute;
@@ -35,7 +35,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -49,9 +49,9 @@
 
 .description {
   padding: size(30) size(160) size(60) size(30);
-  background-color: $black;
+  background-color: $gray900;
 
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     margin-bottom: 0;
@@ -67,7 +67,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(58);
diff --git a/site/src/components/pages/Home/FullCycle/FullCycle.module.scss b/site/src/components/pages/Home/FullCycle/FullCycle.module.scss
index bb9b1a79..50f40ea3 100644
--- a/site/src/components/pages/Home/FullCycle/FullCycle.module.scss
+++ b/site/src/components/pages/Home/FullCycle/FullCycle.module.scss
@@ -1,5 +1,6 @@
 @use '~styles/colors' as *;
 @use '~styles/helpers' as *;
+@use '~styles/typography' as *;
 @use '~styles/mixins' as *;
 
 .root {
@@ -33,7 +34,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -49,7 +50,7 @@
   display: flex;
   flex-wrap: wrap;
   padding: size(30) size(30) size(128);
-  background-color: $black;
+  background-color: $gray900;
   gap: size(36);
 
   @include mobile {
@@ -74,7 +75,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(58);
diff --git a/site/src/components/pages/Home/Hero/Hero.module.scss b/site/src/components/pages/Home/Hero/Hero.module.scss
index 6d2f03f0..191e2c87 100644
--- a/site/src/components/pages/Home/Hero/Hero.module.scss
+++ b/site/src/components/pages/Home/Hero/Hero.module.scss
@@ -1,6 +1,7 @@
 @use '~styles/colors' as *;
 @use '~styles/helpers' as *;
 @use '~styles/mixins' as *;
+@use '~styles/typography' as *;
 
 .root {
   display: flex;
@@ -15,6 +16,16 @@
   }
 }
 
+.heading {
+  p {
+    @include heading-04;
+
+    @include mobile {
+      @include small;
+    }
+  }
+}
+
 .left,
 .right {
   width: 50%;
@@ -33,7 +44,7 @@
   display: flex;
   flex-direction: column;
   padding-top: size(30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(20);
diff --git a/site/src/components/pages/Home/Home.module.scss b/site/src/components/pages/Home/Home.module.scss
index 445ee14f..410489d9 100644
--- a/site/src/components/pages/Home/Home.module.scss
+++ b/site/src/components/pages/Home/Home.module.scss
@@ -26,7 +26,7 @@
     right: 0;
     width: calc(100% - 2px);
     height: size(10);
-    background-color: $black;
+    background-color: $gray900;
     z-index: 4;
 
     @include mobile {
diff --git a/site/src/components/pages/Home/Intro/Intro.module.scss b/site/src/components/pages/Home/Intro/Intro.module.scss
index da9ddd93..34130065 100644
--- a/site/src/components/pages/Home/Intro/Intro.module.scss
+++ b/site/src/components/pages/Home/Intro/Intro.module.scss
@@ -5,7 +5,7 @@
 
 .container {
   position: relative;
-  background-color: $black;
+  background-color: $gray900;
   height: 130vh;
   margin-bottom: -10vh;
 
diff --git a/site/src/components/pages/Home/JoinNil/JoinNil.module.scss b/site/src/components/pages/Home/JoinNil/JoinNil.module.scss
index 2c6b8ab4..ca06aa8b 100644
--- a/site/src/components/pages/Home/JoinNil/JoinNil.module.scss
+++ b/site/src/components/pages/Home/JoinNil/JoinNil.module.scss
@@ -41,7 +41,7 @@
   position: relative;
   width: 50%;
   margin-top: size(180);
-  background-color: $black;
+  background-color: $gray900;
 
   &:after {
     content: '';
@@ -50,7 +50,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/components/pages/Home/Win/Win.module.scss b/site/src/components/pages/Home/Win/Win.module.scss
index 4740dd16..ed7ebb49 100644
--- a/site/src/components/pages/Home/Win/Win.module.scss
+++ b/site/src/components/pages/Home/Win/Win.module.scss
@@ -31,7 +31,7 @@
 
 .content {
   position: relative;
-  background-color: $black;
+  background-color: $gray900;
 
   &:after {
     content: '';
@@ -40,7 +40,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -68,7 +68,7 @@
   width: size(358);
   margin-bottom: size(80);
 
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
     max-width: size(291);
@@ -102,7 +102,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(58);
diff --git a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
index e94c4cec..eb95658e 100644
--- a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
+++ b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
@@ -17,7 +17,7 @@
 .left,
 .right {
   width: 50%;
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     width: 100%;
@@ -35,7 +35,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/components/pages/NotFound/NotFound.module.scss b/site/src/components/pages/NotFound/NotFound.module.scss
index af7c6018..38b722ac 100644
--- a/site/src/components/pages/NotFound/NotFound.module.scss
+++ b/site/src/components/pages/NotFound/NotFound.module.scss
@@ -42,7 +42,7 @@
 }
 
 .title {
-  background-color: $black;
+  background-color: $gray900;
   margin: size(-30) 0 size(-5);
 
   font-size: size(330);
@@ -66,7 +66,7 @@
   @include mobile {
     position: relative;
     padding: size(10) size(12);
-    background-color: $black;
+    background-color: $gray900;
   }
 }
 
@@ -105,7 +105,7 @@
 
 .text {
   padding: size(112) size(30) size(30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include paragraph;
 
@@ -118,7 +118,7 @@
 
 .box {
   width: size(272);
-  background-color: $black;
+  background-color: $gray900;
 }
 
 .box1 {
diff --git a/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss b/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss
index 0bc856d6..7a4bfe58 100644
--- a/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss
+++ b/site/src/components/pages/OpenPositions/DottedSection/DottedSection.module.scss
@@ -4,7 +4,7 @@
 @import 'src/styles/mixins';
 
 .container {
-  background-color: $black;
+  background-color: $gray900;
 }
 
 .dottedCard {
@@ -41,7 +41,7 @@
   width: 50%;
   padding: size(30) size(30) size(60);
   margin-top: size(-30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding: size(2) size(10) size(40);
@@ -50,11 +50,10 @@
 }
 
 .title {
-  @include heading-02;
+  @include heading-03;
 
   @include mobile {
-    font-size: 15px;
-    line-height: 100%;
+    @include main;
   }
 }
 
diff --git a/site/src/components/pages/PostPage/PostPage.module.scss b/site/src/components/pages/PostPage/PostPage.module.scss
index 7008c8d8..47930a04 100644
--- a/site/src/components/pages/PostPage/PostPage.module.scss
+++ b/site/src/components/pages/PostPage/PostPage.module.scss
@@ -124,6 +124,7 @@
 
 .info {
   display: flex;
+  color: $gray-50;
 }
 
 .type {
@@ -163,7 +164,7 @@
 }
 
 .moreBlogsWrapper {
-  background-color: $black;
+  background-color: $gray900;
 
   padding-bottom: 20px;
 
@@ -189,7 +190,7 @@
 }
 
 .subtitle {
-  @include heading-02;
+  @include heading-03;
 
   width: size(785);
 
@@ -203,10 +204,6 @@
   margin-right: size(10);
 }
 
-.date {
-  color: $grey;
-}
-
 .blog {
   margin: 0;
 
@@ -260,15 +257,19 @@
     @include heading-03;
   }
 
+  h4 {
+    @include heading-04;
+  }
+
   pre {
     overflow-x: scroll;
     overflow-y: hidden;
     padding: size(10);
     margin: 0 0 size(30) 0;
-    border: size(1) solid $grey;
+    border: size(1) solid $secondary;
     border-radius: size(2);
     background-color: $fullBlack;
-    color: $white;
+    color: $gray-50;
     word-wrap: normal;
 
     @include paragraph;
@@ -302,12 +303,12 @@
 
   p {
     margin-bottom: size(30);
-    color: $grey;
+    color: $secondary;
 
     @include p-article;
 
     a {
-      color: $white;
+      color: $gray-50;
       text-decoration: underline;
       cursor: pointer;
 
@@ -323,12 +324,12 @@
 
   li {
     margin: 0 0 size(30) size(20);
-    color: $grey;
+    color: $secondary;
 
     @include p-article;
 
     a {
-      color: $white;
+      color: $gray-50;
       text-decoration: underline;
       cursor: pointer;
 
@@ -356,14 +357,14 @@
   }
 
   h5 {
-    color: $grey;
+    color: $secondary;
     margin-bottom: size(30);
 
     @include sm-paragraph;
   }
 
   blockquote {
-    border-left: size(4) solid $white;
+    border-left: size(4) solid $gray-50;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss b/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss
index 082e2ca8..c5593e9e 100644
--- a/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss
+++ b/site/src/components/pages/Research/ResearchLayout/ResearchLayout.module.scss
@@ -68,7 +68,7 @@
 }
 
 .description {
-  @include heading-02;
+  @include heading-03;
   padding: 0 size(30) size(30);
 
   @include mobile {
@@ -91,7 +91,7 @@
     width: 100%;
     overflow: auto;
     margin-bottom: size(20);
-    background-color: $black;
+    background-color: $gray900;
     z-index: 2;
   }
 }
@@ -111,7 +111,7 @@
     margin-bottom: 0;
     padding-top: size(20);
     padding-bottom: size(10);
-    background-color: $black;
+    background-color: $gray900;
   }
 }
 
diff --git a/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss b/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss
index 33903a99..592a71b3 100644
--- a/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss
+++ b/site/src/components/pages/ZkLlvm/Accelerating/Accelerating.module.scss
@@ -3,7 +3,6 @@
 @use '~styles/typography' as *;
 @use '~styles/mixins' as *;
 
-
 .root {
   display: flex;
   align-items: flex-start;
@@ -33,7 +32,7 @@
 .content {
   display: flex;
   flex-wrap: wrap;
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(40);
@@ -78,7 +77,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  letter-spacing: -.03em;
 }
 
 .description {
@@ -100,7 +98,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(58);
diff --git a/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss b/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss
index d3af79a0..89b8f89b 100644
--- a/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss
+++ b/site/src/components/pages/ZkLlvm/FullCycle/FullCycle.module.scss
@@ -1,6 +1,7 @@
 @use '~styles/colors' as *;
 @use '~styles/helpers' as *;
 @use '~styles/mixins' as *;
+@use '~styles/typography' as *;
 
 .root {
   display: flex;
@@ -35,7 +36,7 @@
   display: flex;
   flex-wrap: wrap;
   padding: size(30) size(30) size(46);
-  background-color: $black;
+  background-color: $gray900;
   gap: size(36);
 
   &:after {
@@ -45,7 +46,7 @@
     right: -1px;
     width: 2px;
     height: 100%;
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
@@ -61,6 +62,10 @@
 }
 
 .item {
+  p {
+    @include paragraph;
+  }
+
   @include mobile {
     width: 100%;
   }
@@ -74,7 +79,7 @@
 .button {
   padding-top: size(104);
   padding-bottom: size(24);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(58);
diff --git a/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss b/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss
index 4188b70e..d114d6d5 100644
--- a/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss
+++ b/site/src/components/pages/ZkLlvm/Hero/Hero.module.scss
@@ -50,7 +50,7 @@
 }
 
 .info {
-  background-color: $black;
+  background-color: $gray900;
 
   p {
     @include paragraph;
@@ -82,7 +82,7 @@
   display: flex;
   flex-direction: column;
   padding-top: size(30);
-  background-color: $black;
+  background-color: $gray900;
 
   @include mobile {
     padding-top: size(30);
diff --git a/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss b/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss
index 54200452..94852a8f 100644
--- a/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss
+++ b/site/src/components/pages/ZkLlvm/Intro/Intro.module.scss
@@ -5,7 +5,7 @@
 
 .container {
   position: relative;
-  background-color: $black;
+  background-color: $gray900;
   height: 130vh;
   margin-bottom: -10vh;
 
diff --git a/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss b/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss
index cfc950db..681e7621 100644
--- a/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss
+++ b/site/src/components/pages/ZkLlvm/ZkLlvm.module.scss
@@ -28,7 +28,7 @@
     z-index: 4;
     width: calc(100% - 2px);
     height: size(10);
-    background-color: $black;
+    background-color: $gray900;
 
     @include mobile {
       display: none;
diff --git a/site/src/styles/colors.scss b/site/src/styles/colors.scss
index a74160b6..8581944b 100644
--- a/site/src/styles/colors.scss
+++ b/site/src/styles/colors.scss
@@ -1,5 +1,5 @@
 $white: #ffffff;
-$black: #212121;
+$gray900: #212121;
 $grey: #909090;
 $buttonGray50: #f2f2f2;
 $fullBlack: #000000;
diff --git a/site/src/styles/freshteamWidget.scss b/site/src/styles/freshteamWidget.scss
index b1acf1da..5e537fb6 100644
--- a/site/src/styles/freshteamWidget.scss
+++ b/site/src/styles/freshteamWidget.scss
@@ -7,7 +7,7 @@
 #freshteam-widget {
   width: 100% !important;
   min-height: 100vh;
-  background-color: $black !important;
+  background-color: $gray900 !important;
   color: $grey !important;
 
   &.loading {
@@ -97,24 +97,24 @@
   }
 
   .job-details-header {
-    background-color: $black !important;
+    background-color: $gray900 !important;
   }
 
   .btn-primary {
     border: size(1) solid $white !important;
-    background: $black !important;
+    background: $gray900 !important;
     transition: all 0.1s ease-in-out !important;
 
     @include hover {
       background: $white !important;
-      color: $black !important;
+      color: $gray900 !important;
     }
   }
 
   .section-header > .section-description {
     display: none !important;
   }
-  
+
   .section-title::after {
     display: block;
     font-weight: normal !important;
@@ -142,7 +142,7 @@
   }
 
   .advanced-search {
-    background-color: $black !important;
+    background-color: $gray900 !important;
 
     @include mobile {
       max-width: size(340);
@@ -197,7 +197,7 @@
 
 .select2-results {
   &__options {
-    background-color: $black !important;
+    background-color: $gray900 !important;
   }
 }
 
@@ -217,7 +217,7 @@
 
 .select2-selection--multiple {
   color: $grey !important;
-  background-color: $black !important;
+  background-color: $gray900 !important;
 }
 
 .icon-tick {
@@ -267,7 +267,7 @@
 .form-control {
   border-color: $grey !important;
   color: $white !important;
-  background-color: $black !important;
+  background-color: $gray900 !important;
 
   &:focus {
     border-color: $white !important;
@@ -290,7 +290,7 @@
   li {
     @include fontType(H);
 
-    background: $black !important;
+    background: $gray900 !important;
     box-shadow: 0 0 2px 0 rgba(255, 255, 255, 1) !important;
   }
 }
diff --git a/site/src/styles/globals.scss b/site/src/styles/globals.scss
index a32ccdd8..a7feacef 100644
--- a/site/src/styles/globals.scss
+++ b/site/src/styles/globals.scss
@@ -24,8 +24,8 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: $black;
-  color: $white;
+  background-color: $gray900;
+  color: $gray-50;
   overscroll-behavior: none;
 
   @include fontType(H);
diff --git a/site/src/styles/helpers.scss b/site/src/styles/helpers.scss
index 9f391cef..7dffaac5 100644
--- a/site/src/styles/helpers.scss
+++ b/site/src/styles/helpers.scss
@@ -1,6 +1,5 @@
 $baseScreenSize: 1440;
-$mobileScreenSize: 375;
-
+$mobileScreenSize: 360;
 
 @function size($size) {
   @return calc(((#{$size} / var(--screen-size)) * 100) * 1vw);
diff --git a/site/src/styles/typography.scss b/site/src/styles/typography.scss
index 1c505011..7b493bbb 100644
--- a/site/src/styles/typography.scss
+++ b/site/src/styles/typography.scss
@@ -6,50 +6,55 @@
 }
 
 @mixin heading-01 {
-  font-size: size(60);
-  line-height: size(54);
-
-  @include glob-font-style;
+  font-size: size(64);
+  line-height: size(64);
+  letter-spacing: size(-1.28);
 
   @include mobile {
-    font-size: size(45);
-    line-height: size(40.5);
+    @include heading-02;
   }
 }
 
 @mixin heading-02 {
-  font-size: size(30);
-  line-height: size(30);
+  font-size: size(48);
+  line-height: size(48);
+  letter-spacing: size(-0.96);
+}
 
-  @include glob-font-style;
+@mixin heading-03 {
+  font-size: size(32);
+  line-height: size(40);
+  letter-spacing: size(-0.96);
 
   @include mobile {
-    font-size: size(24);
-    line-height: size(24);
+    @include heading-04;
   }
 }
 
-@mixin heading-03 {
+@mixin heading-04 {
   font-size: size(24);
+  line-height: size(32);
+  letter-spacing: size(-0.48);
+}
+
+@mixin main {
+  font-size: size(18);
   line-height: size(24);
+  letter-spacing: initial;
+}
 
-  @include glob-font-style;
+@mixin small {
+  font-size: size(16);
+  line-height: size(22);
 
-  @include mobile {
-    font-size: size(18);
-    line-height: size(18);
-  }
+  letter-spacing: initial;
 }
 
 @mixin paragraph {
-  font-size: size(18);
-  line-height: size(18);
-
-  @include glob-font-style;
+  @include main;
 
   @include mobile {
-    font-size: size(15);
-    line-height: size(15);
+    @include small;
   }
 }
 
@@ -66,10 +71,10 @@
 }
 
 @mixin button {
-  font-size: size(16);
-  line-height: size(16);
+  font-size: size(18);
+  line-height: size(22);
 
-  @include glob-font-style;
+  letter-spacing: initial;
 
   @include mobile {
     font-size: size(12);
@@ -77,14 +82,13 @@
   }
 }
 
-@mixin sm-paragraph {
-  font-size: size(15);
-  line-height: size(15);
+@mixin button-small {
+  font-size: size(14);
+  line-height: size(18);
 
-  @include glob-font-style;
+  letter-spacing: size(0.4);
+}
 
-  @include mobile {
-    font-size: size(12);
-    line-height: size(12);
-  }
+@mixin sm-paragraph {
+  @include small;
 }