diff --git a/colors.js b/colors.js
index acf8214ee..ca2084efc 100644
--- a/colors.js
+++ b/colors.js
@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-module.exports = {
+const colors = {
   // Text colors
   primary: '#23272F', // gray-90
   'primary-dark': '#F6F7F9', // gray-5
@@ -10,8 +10,8 @@ module.exports = {
   'secondary-dark': '#EBECF0', // gray-10
   tertiary: '#5E687E', // gray-50
   'tertiary-dark': '#99A1B3', // gray-30
-  link: '#087EA4', // blue-50
-  'link-dark': '#149ECA', // blue-40
+  // link: '#087EA4', // blue-50
+  // 'link-dark': '#149ECA', // blue-40
   syntax: '#EBECF0', // gray-10
   wash: '#FFFFFF',
   'wash-dark': '#23272F', // gray-90
@@ -39,15 +39,16 @@ module.exports = {
   'gray-5': '#F6F7F9',
 
   // Blue
-  'blue-80': '#043849',
-  'blue-60': '#045975',
-  'blue-50': '#087EA4',
-  'blue-40': '#149ECA', // Brand Blue
-  'blue-30': '#58C4DC', // unused
-  'blue-20': '#ABE2ED',
-  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
+  'blue-80': '#043849', // unused
+  'blue-20': '#ABE2ED', // unused
+  'blue-10': '#E6F7FF', // UNUSED todo: doesn't match illustrations
   'blue-5': '#E6F6FA',
 
+  'blue-60': '#045975',
+  'blue-50': '#087EA4', // text-link
+  'blue-40': '#149ECA', // Brand Blue (text-link-dark)
+  'blue-30': '#58C4DC',
+
   // Yellow
   'yellow-60': '#B65700',
   'yellow-50': '#C76A15',
@@ -56,6 +57,7 @@ module.exports = {
   'yellow-20': '#FCDEB0', // unused
   'yellow-10': '#FDE7C7',
   'yellow-5': '#FEF5E7',
+  'yellow-x': '#FFC107',
 
   // Purple
   'purple-60': '#2B3491', // unused
@@ -91,3 +93,36 @@ module.exports = {
     highlight: '#fffbdd',
   },
 };
+
+const experiments = [
+  ['#58C4DC', '#149ECA', '#087EA4', , '#045975'], // OG
+  ['#2BA2B9', '#0090A7', '#007E92', '#006778'], // Dans fave
+  ['#1DA1CD', '#008EB7', '#007CA0', '#006684'],
+  ['#00A3C3', '#008FAA', '#007D96', '#00677C'],
+  ['#58C4DC', '#0090A7', '#007E92', '#006778'],
+  ['#58C4DC', '#2BA2B9', '#0090A7', '#007E92'], // 5 (nice)
+  ['#58C4DC', '#3194AA', '#165873', '#1A4C5F'],
+  ['#58C4DC', '#3194AA', '#1E7C8A', '#1A4C5F'],
+  ['#58C4DC', '#3194AA', '#227C9D', '#1A4C5F'],
+  ['#58C4DC', '#1F9CB5', '#227F96', '#1A4C5F'],
+  ['#58C4DC', '#1F9CB5', '#2A6F7C', '#1A4C5F'], // 10
+  ['#58C4DC', '#39A4C8', '#2A7D98', '#1A4C5F'], // fave **
+  ['#58C4DC', '#3FA9CC', '#2A7D98', '#1A4C5F'], // fave *
+  ['#39a4c8', '#3394b5', '#25728c', '#195569'], // fave (shake)
+  ['#1eb3d4', '#1898b5', '#10748a', '#095667'], // fave (og)
+  ['#11b1ea', '#0ea0d4', '#2e87ae', '#055572'], // 15 fave (gen)
+];
+
+const experiment = 13;
+
+colors['blue-30'] = experiments[experiment][0];
+colors['blue-40'] = experiments[experiment][1];
+colors['blue-50'] = experiments[experiment][2];
+colors['blue-60'] = experiments[experiment][3];
+
+colors.link = colors['blue-40'];
+colors['link-dark'] = colors['blue-40'];
+colors.brand = colors['blue-40'];
+colors['brand-dark'] = colors['blue-40'];
+
+module.exports = colors;
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index a5a15ea50..499300475 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -124,7 +124,7 @@ export function HomeContent() {
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
           <Logo
             className={cn(
-              'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm mr-0 flex origin-center transition-all ease-in-out'
+              'mt-4 mb-3 text-brand dark:text-brand-dark w-24 lg:w-28 self-center text-sm mr-0 flex origin-center transition-all ease-in-out'
             )}
           />
           <h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
@@ -496,7 +496,7 @@ export function HomeContent() {
           </div>
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
-            <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
+            <Logo className="text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
               Welcome to the <br className="" />
               React community
@@ -1614,7 +1614,7 @@ function Thumbnail({video}) {
           </div>
           <div className="mt-1">
             <span className="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
-              <Logo className="text-xs mr-1 w-4 h-4 text-link-dark" />
+              <Logo className="text-xs mr-1 w-4 h-4 text-brand text-brand-dark" />
               React Conf
             </span>
           </div>
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 23860a16f..33bb3b87c 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -252,7 +252,7 @@ export default function TopNav({
                     className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
                     <Logo
                       className={cn(
-                        'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                        'text-sm mr-0 w-10 h-10 text-brand dark:text-brand-dark flex origin-center transition-all ease-in-out'
                       )}
                     />
                     <span className="sr-only 3xl:not-sr-only">React</span>