diff --git a/nuxtjs.org/components/HomeCommunity.vue b/nuxtjs.org/components/HomeCommunity.vue
index 0e1b19fa4..7d7396893 100644
--- a/nuxtjs.org/components/HomeCommunity.vue
+++ b/nuxtjs.org/components/HomeCommunity.vue
@@ -42,7 +42,7 @@
                 justify-between
                 space-y-4
                 border-2 border-gray-200
-                dark:border-secondary-light
+                dark:border-secondary-dark
                 rounded-lg
                 p-4
               "
@@ -64,7 +64,7 @@
                   class="flex flex-1 pl-4 text-left flex-col"
                 >
                   <ALabel tag="span" class="font-bold text-base">{{ testimonial.author }}</ALabel>
-                  <ALabel tag="span" class="text-sm">{{ testimonial.job }}</ALabel>
+                  <ALabel tag="span" class="text-sm dark:text-cloud-lighter">{{ testimonial.job }}</ALabel>
                 </a>
                 <a :href="testimonial.jobUrl" target="_blank" rel="noopener sponsored" class="hidden xl:block">
                   <img
diff --git a/nuxtjs.org/components/HomeHero.vue b/nuxtjs.org/components/HomeHero.vue
index 7a4846239..adaed463e 100644
--- a/nuxtjs.org/components/HomeHero.vue
+++ b/nuxtjs.org/components/HomeHero.vue
@@ -6,7 +6,20 @@
         <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-4">
           <Markdown slot="title" unwrap="p" />
         </h1>
-        <h2 class="font-normal text-body-base xs:text-body-lg md:text-body-xl 2xl:text-body-2xl mb-8 px-8 sm:px-0">
+        <h2
+          class="
+            font-normal
+            text-body-base
+            xs:text-body-lg
+            md:text-body-xl
+            2xl:text-body-2xl
+            mb-8
+            px-8
+            sm:px-0
+            text-secondary-dark
+            dark:text-cloud-lighter
+          "
+        >
           <Markdown slot="description" unwrap="p" />
         </h2>
         <div class="flex flex-wrap justify-center space-x-3 xl:space-x-4">
@@ -14,7 +27,7 @@
             :to="primary.url"
             :aria-label="primary.text"
             size="md"
-            class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
+            class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
             :icon-left="primary.icon"
             >{{ primary.text }}</SectionButton
           >
diff --git a/nuxtjs.org/components/MFooterFoot.vue b/nuxtjs.org/components/MFooterFoot.vue
index 90f721007..04970ac89 100644
--- a/nuxtjs.org/components/MFooterFoot.vue
+++ b/nuxtjs.org/components/MFooterFoot.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <MFooterSocialLinks />
-    <p class="mt-8 text-base light:text-gray-400 dark:text-secondary-lightest md:mt-0 md:order-1">
+    <p class="mt-8 text-base light:text-gray-400 dark:text-cloud-light md:mt-0 md:order-1">
       &copy; 2020 Workflow, Inc. All rights reserved.
     </p>
   </div>
diff --git a/nuxtjs.org/components/MFooterLanguage.vue b/nuxtjs.org/components/MFooterLanguage.vue
index d9ac90e59..7b4da281e 100644
--- a/nuxtjs.org/components/MFooterLanguage.vue
+++ b/nuxtjs.org/components/MFooterLanguage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="text-lg font-semibold light:text-gray-400 dark:text-secondary-light">Language</h3>
+    <h3 class="text-lg font-semibold light:text-gray-400 dark:text-cloud-light">Language</h3>
     <form class="mt-4 sm:max-w-xs">
       <fieldset class="w-full">
         <MFooterLocaleSelector />
diff --git a/nuxtjs.org/components/MFooterLink.vue b/nuxtjs.org/components/MFooterLink.vue
index 2be79bc73..c30df7a38 100644
--- a/nuxtjs.org/components/MFooterLink.vue
+++ b/nuxtjs.org/components/MFooterLink.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-for="(link, index) in links" :key="link.title">
       <h3
-        class="font-semibold light:text-gray-400 dark:text-secondary-light text-lg"
+        class="font-semibold light:text-gray-400 dark:text-cloud-light text-lg"
         :class="{ 'mt-16 md:mt-0': index !== 0 }"
       >
         {{ link.title }}
diff --git a/nuxtjs.org/components/MFooterLocaleSelector.vue b/nuxtjs.org/components/MFooterLocaleSelector.vue
index 11df3e648..6a7e35dc5 100644
--- a/nuxtjs.org/components/MFooterLocaleSelector.vue
+++ b/nuxtjs.org/components/MFooterLocaleSelector.vue
@@ -2,7 +2,7 @@
   <ASelectNative
     v-model="locale"
     :options="locales"
-    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-white dark:focus:border-secondary-light sm:text-sm"
+    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-gray-400 dark:focus:border-secondary-light sm:text-sm"
   />
 </template>
 
diff --git a/nuxtjs.org/components/MFooterNewsLetter.vue b/nuxtjs.org/components/MFooterNewsLetter.vue
index 357bc042d..8e36f32c7 100644
--- a/nuxtjs.org/components/MFooterNewsLetter.vue
+++ b/nuxtjs.org/components/MFooterNewsLetter.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <h3 class="font-semibold light:text-gray-400 dark:text-secondary-light text-lg">Subscribe to our newsletter</h3>
+      <h3 class="font-semibold light:text-gray-400 dark:text-cloud-light text-lg">Subscribe to our newsletter</h3>
       <p class="mt-2 text-base text-gray-500 dark:text-secondary-surface">
         The latest news, articles, and resources, sent to your inbox weekly.
       </p>
diff --git a/nuxtjs.org/components/MFooterSocialLinks.vue b/nuxtjs.org/components/MFooterSocialLinks.vue
index dc3b45ff3..2756c796b 100644
--- a/nuxtjs.org/components/MFooterSocialLinks.vue
+++ b/nuxtjs.org/components/MFooterSocialLinks.vue
@@ -2,7 +2,7 @@
   <ul class="flex items-center space-x-4 xl:space-x-5">
     <li v-for="(social, key) in socials" :key="key">
       <ALink :href="social.href">
-        <Component :is="social.icon" class="h-6 w-6 text-gray-400 dark:text-secondary-surface hover:text-primary" />
+        <Component :is="social.icon" class="h-6 w-6 text-gray-400 dark:text-cloud-lighter hover:text-primary" />
       </ALink>
     </li>
   </ul>
diff --git a/nuxtjs.org/components/MInputGroupButton.vue b/nuxtjs.org/components/MInputGroupButton.vue
index 7f73ff44b..4b23fecd6 100644
--- a/nuxtjs.org/components/MInputGroupButton.vue
+++ b/nuxtjs.org/components/MInputGroupButton.vue
@@ -27,7 +27,7 @@
         focus:outline-none
         light:focus:ring-black
         dark:focus:ring-white
-        light:focus:border-white
+        light:focus:border-gray-400
         dark:focus:border-secondary-light
         sm:text-sm
       "
diff --git a/nuxtjs.org/components/SectionContentItem.vue b/nuxtjs.org/components/SectionContentItem.vue
index 814b17430..a8ccafee3 100644
--- a/nuxtjs.org/components/SectionContentItem.vue
+++ b/nuxtjs.org/components/SectionContentItem.vue
@@ -5,7 +5,7 @@
         <img class="mb-4" :src="image" :alt="`A ${title} image`" />
       </slot>
       <h3 class="mb-1 text-center text-body-lg lg:text-body-xl font-bold">{{ title }}</h3>
-      <p class="text-center text-sm lg:text-base dark:text-secondary-lightest">{{ description }}</p>
+      <p class="text-center text-sm lg:text-base dark:text-cloud-light">{{ description }}</p>
     </div>
   </li>
 </template>