diff --git a/src/Components/Accordion/Accordion.scss b/src/Components/Accordion/Accordion.scss
index 3c555c66..91842c83 100644
--- a/src/Components/Accordion/Accordion.scss
+++ b/src/Components/Accordion/Accordion.scss
@@ -40,7 +40,7 @@
   width: 100%;
   min-height: $cf-form-lg-height;
   border-radius: $cf-radius;
-  background-color: $cf-grey-25;
+  background-color: $cf-gray-3;
   align-items: center;
   outline: none;
   padding: $cf-space-s;
@@ -115,11 +115,11 @@
   @extend .cf-accordion--header;
   min-height: $cf-form-md-height;
   padding: $cf-form-md-padding;
-  background-color: $cf-grey-15;
+  background-color: $cf-gray-2;
   border-radius: 0px;
 
   &:hover {
-    background-color: $cf-grey-15;
+    background-color: $cf-martinique;
   }
 }
 
diff --git a/src/Components/Alert/Alert.scss b/src/Components/Alert/Alert.scss
index 2f1ab953..1cff3f77 100644
--- a/src/Components/Alert/Alert.scss
+++ b/src/Components/Alert/Alert.scss
@@ -47,7 +47,22 @@ $alert--icon-padding: $cf-marg-d + $cf-marg-a;
   width: 100%;
   border-radius: $cf-radius - 1px;
   padding: $cf-marg-b;
-  background-color: rgba($g3-castle, 0.85);
+}
+
+.cf-alert-content--primary {
+  background-color: $cf-elephant;
+}
+
+.cf-alert-content--success {
+  background-color: $cf-seaweed;
+}
+
+.cf-alert-content--warning {
+  background-color: $cf-verdun-green;
+}
+
+.cf-alert-content--danger {
+  background-color: $cf-thunder;
 }
 
 .cf-alert--has-icon {
@@ -65,46 +80,36 @@ $alert--icon-padding: $cf-marg-d + $cf-marg-a;
 }
 
 /*  Color Modifiers */
-@mixin alertColorModifier($mainColor, $accentColor, $textColor, $boldColor) {
+@mixin alertColorModifier($mainColor, $textColor, $boldColor) {
   color: $textColor;
 
   strong {
     color: $boldColor;
   }
 
-  @include gradient-h($mainColor, $accentColor);
-}
-
-.cf-alert--default {
-  @include alertColorModifier($g7-graphite, $g5-pepper, $g13-mist, $g20-white);
+  background: $mainColor
 }
 
 .cf-alert--primary {
-  @include alertColorModifier($c-ocean, $c-star, $c-hydrogen, $g20-white);
-}
-
-.cf-alert--secondary {
-  @include alertColorModifier($c-comet, $c-star, $c-moonstone, $g20-white);
+  @include alertColorModifier($cf-turquoise,  $cf-turquoise, $cf-white);
 }
 
 .cf-alert--success {
   @include alertColorModifier(
-    $c-rainforest,
-    $c-viridian,
-    $c-wasabi,
+    $cf-lime-green,
+    $cf-lime-green,
     $g20-white
   );
 }
 
 .cf-alert--warning {
-  @include alertColorModifier($c-pineapple, $c-thunder, $c-sulfur, $g20-white);
+  @include alertColorModifier($cf-chartreuse, $cf-chartreuse, $g20-white);
 }
 
 .cf-alert--danger {
   @include alertColorModifier(
-    $c-dreamsicle,
-    $c-curacao,
-    $c-marmelade,
+    $cf-carnation,
+    $cf-carnation,
     $g20-white
   );
 }
diff --git a/src/Components/Alert/Alert.tsx b/src/Components/Alert/Alert.tsx
index 1615fe01..c8cb2c32 100644
--- a/src/Components/Alert/Alert.tsx
+++ b/src/Components/Alert/Alert.tsx
@@ -28,6 +28,10 @@ export const Alert = forwardRef<AlertRef, Props>(
       [`${className}`]: className,
     })
 
+    const alertContentClassName = classnames('cf-alert--contents', {
+      [`cf-alert-content--${color}`]: color,
+    })
+
     return (
       <div
         className={alertClassName}
@@ -37,7 +41,7 @@ export const Alert = forwardRef<AlertRef, Props>(
         ref={ref}
       >
         {!!icon && <Icon glyph={icon} className="cf-alert--icon" />}
-        <div className="cf-alert--contents">{children}</div>
+        <div className={alertContentClassName}>{children}</div>
       </div>
     )
   }
diff --git a/src/Components/Alert/Documentation/Alert.stories.tsx b/src/Components/Alert/Documentation/Alert.stories.tsx
index 9b7b0894..a4fbedc4 100644
--- a/src/Components/Alert/Documentation/Alert.stories.tsx
+++ b/src/Components/Alert/Documentation/Alert.stories.tsx
@@ -20,6 +20,7 @@ const alertStories = storiesOf('Components/Alert', module).addDecorator(
   withKnobs
 )
 
+// There is no css stylijng for these unused enums
 const unusedAlertColorEnium = ['Colorless', 'Tertiary', 'Secondary', 'Default']
 const reducedAlertColorEnum = removeUnusedEnumKeyValue(
   ComponentColor,
diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss
index 12a9298a..b96cc6be 100644
--- a/src/Components/Button/Button.scss
+++ b/src/Components/Button/Button.scss
@@ -152,9 +152,9 @@
   Color Modifiers
   ------------------------------------------------------------------------------
 */
-@mixin buttonColorModifier($bgA, $bgB, $text, $textHover, $tertiary: false) {
+@mixin buttonColorModifier($bgColor, $text, $textHover, $tertiary: false) {
   color: $text;
-  @include gradient-diag-up($bgA, $bgB);
+  background-color: $bgColor;
 
   &:hover {
     color: $textHover;
@@ -185,7 +185,6 @@
     &.active,
     &.active:hover {
       color: $textHover;
-
       &:after {
         opacity: $cf-hover-active-opacity;
       }
@@ -213,8 +212,7 @@
 .cf-button-default,
 .cf-button-secondary {
   @include buttonColorModifier(
-    $cf-button-default-bg,
-    $cf-button-default-bg,
+    $cf-gray-3,
     $cf-white,
     $cf-white
   );
@@ -222,22 +220,22 @@
 
 .cf-button-primary,
 .cf-button-success {
-  @include buttonColorModifier($c-pool, $c-pulsar, $cf-white, $cf-white);
+  @include buttonColorModifier($cf-turquoise, $cf-gray-1, $cf-gray-1);
 }
 
 .cf-button-tertiary {
+  border: 1px solid $cf-gray-5;
   @include buttonColorModifier(
     transparent,
-    transparent,
-    $cf-grey-65,
-    $cf-grey-65,
+    $cf-white,
+    $cf-white,
     true
   );
 }
 
 .cf-button-warning,
 .cf-button-danger {
-  @include buttonColorModifier($c-ruby, $c-topaz, $cf-white, $cf-white);
+  @include buttonColorModifier($cf-carnation, $cf-gray-1, $cf-gray-1);
 }
 
 .cf-button-colorless {
diff --git a/src/Components/Button/Composed/DismissButton.scss b/src/Components/Button/Composed/DismissButton.scss
index 6bba74b6..25eda368 100644
--- a/src/Components/Button/Composed/DismissButton.scss
+++ b/src/Components/Button/Composed/DismissButton.scss
@@ -46,3 +46,13 @@ button.cf-dismiss-button {
     opacity: 1;
   }
 }
+
+.cf-dismiss-button--primary, 
+.cf-dismiss-button--success, 
+.cf-dismiss-button--danger,
+.cf-dismiss-button--warning {
+  &:before,
+  &:after {
+    background-color: $cf-gray-1;
+  }
+}
diff --git a/src/Components/Button/Composed/DismissButton.tsx b/src/Components/Button/Composed/DismissButton.tsx
index 16b12882..e62e485f 100644
--- a/src/Components/Button/Composed/DismissButton.tsx
+++ b/src/Components/Button/Composed/DismissButton.tsx
@@ -49,6 +49,10 @@ export const DismissButton = forwardRef<DismissButtonRef, DismissButtonProps>(
       [`${className}`]: className,
     })
 
+    const dismissButtonClass = classnames(
+      `cf-dismiss-button--x cf-dismiss-button--${color}`
+    )
+
     return (
       <ButtonBase
         tabIndex={tabIndex}
@@ -71,7 +75,7 @@ export const DismissButton = forwardRef<DismissButtonRef, DismissButtonProps>(
         style={style}
         ref={ref}
       >
-        <div className="cf-dismiss-button--x" />
+        <div className={dismissButtonClass} />
       </ButtonBase>
     )
   }
diff --git a/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx b/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx
index e69a286a..901b64ab 100644
--- a/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx
+++ b/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx
@@ -88,7 +88,7 @@ funnelPageStories.add(
               }
               accentColorA={
                 InfluxColors[
-                  select('accentColorA', mapEnumKeys(InfluxColors), 'PurpleX')
+                  select('accentColorA', mapEnumKeys(InfluxColors), 'Lavender')
                 ]
               }
               accentColorB={
diff --git a/src/Components/FunnelPage/Family/FunnelPage.tsx b/src/Components/FunnelPage/Family/FunnelPage.tsx
index d9220569..256d2f11 100644
--- a/src/Components/FunnelPage/Family/FunnelPage.tsx
+++ b/src/Components/FunnelPage/Family/FunnelPage.tsx
@@ -42,10 +42,10 @@ export const FunnelPageRoot = forwardRef<FunnelPageRef, FunnelPageProps>(
       children,
       pageStyle,
       className,
-      accentColorA = InfluxColors.PurpleX,
-      accentColorB = InfluxColors.DogwoodRose,
+      accentColorA = InfluxColors.Lavender,
+      accentColorB = InfluxColors.HotPink,
       enableGraphic = false,
-      backgroundColor = InfluxColors.CetaceanBlue,
+      backgroundColor = InfluxColors.Turquoise,
     },
     ref
   ) => {
diff --git a/src/Components/SubwayNav/SubwayNavStep.tsx b/src/Components/SubwayNav/SubwayNavStep.tsx
index 6f91ab24..06d87268 100644
--- a/src/Components/SubwayNav/SubwayNavStep.tsx
+++ b/src/Components/SubwayNav/SubwayNavStep.tsx
@@ -25,12 +25,12 @@ export const SubwayNavStep = (props: OwnProps) => {
     stepIsReached,
   } = props
   const iconAndTextColor =
-    stepIsActive || stepIsReached ? InfluxColors.Pool : InfluxColors.Grey95
+    stepIsActive || stepIsReached ? InfluxColors.Pool : InfluxColors.Gray6
 
   const glyphFontStyle = {
     fontSize: '20px',
   }
-  const completedStepStyle = {color: InfluxColors.Grey95, fontSize: '25px'}
+  const completedStepStyle = {color: InfluxColors.Gray6, fontSize: '25px'}
   const isActiveStepStyle = {...completedStepStyle, fontSize: '20px'}
 
   return (
diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index a57f85e6..81ff5486 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -3,7 +3,34 @@
    -----------------------------------------------------------------------------
 */
 
-// Greys
+// New Greys
+$cf-gray-1: #0E101F;
+$cf-gray-2: #1A1C2B;
+$cf-gray-3: #232533;
+$cf-gray-4: #4B4F62;
+$cf-gray-5: #88889B;
+$cf-gray-6: #C2C5DB;
+$cf-white: #ffffff;
+
+// Brand Colors
+$cf-turquoise: #5EE4E4;
+$cf-lavender: #C77BEA;
+$cf-hot-pink: #F863B0;
+$cf-chartreuse: #D6F622;
+
+// Utility Colors
+$cf-lime-green: #51D91C;
+$cf-carnation: #E65B5B;
+
+// Background Colors
+$cf-elephant: #1E3A46;
+$cf-martinique: #332548;
+$cf-voodoo: #482543;
+$cf-verdun-green: #546120;
+$cf-seaweed: #1B381F;
+$cf-thunder: #311C29;
+
+//Old Greys
 $cf-grey-5: #07070e;
 $cf-grey-15: #1a1a2a;
 $cf-grey-25: #333346;
@@ -14,7 +41,6 @@ $cf-grey-65: #9e9ead;
 $cf-grey-75: #b9b9c5;
 $cf-grey-85: #d5d5dd;
 $cf-grey-95: #f1f1f3;
-$cf-white: #ffffff;
 
 // Neutrals
 $g0-obsidian: $cf-grey-5;
@@ -90,9 +116,9 @@ $c-daisy: #fff6b8;
 $c-banana: #fffdde;
 
 // Marketing Brand Colors
-$c-chartreuse: #d6f622;
 $c-magenta: #bf2fe5;
-$c-deeppurple: #13002d;
+$c-
+: #13002d;
 $c-galaxy: #9394ff;
 $c-pulsar: #513cc6;
 
@@ -100,7 +126,7 @@ $c-pulsar: #513cc6;
   State change variables
 */
 
-$cf-hover-active-opacity: 0.08;
+$cf-hover-active-opacity: 0.15;
 $cf-disabled-opacity: 0.5;
 
 /*
diff --git a/src/Types/index.tsx b/src/Types/index.tsx
index 28ee0abb..c22234a6 100644
--- a/src/Types/index.tsx
+++ b/src/Types/index.tsx
@@ -180,18 +180,42 @@ export enum ButtonType {
 
 export enum InfluxColors {
   // Grey
-  Grey5 = '#07070e',
-  Grey15 = '#1a1a2a',
-  Grey25 = '#333346',
-  Grey35 = '#4d4d60',
-  Grey45 = '#68687b',
-  Grey55 = '#828294',
-  Grey65 = '#9e9ead',
-  Grey75 = '#b9b9c5',
-  Grey85 = '#d5d5dd',
-  Grey95 = '#f1f1f3',
+  Gray1 = '#0E101F',
+  Gray2 = '#1A1C2B',
+  Gray3 = '#232533',
+  Gray4 = '#4B4F62',
+  Gray5 = '#88889B',
+  Gray6 = '#C2C5DB',
   White = '#ffffff',
 
+  // Old Brand Colors
+  DeepPurple = '#13002D',
+  Magenta = '#BF2FE5',
+  Galaxy = '#9394FF',
+  Pulsar = '#513CC6',
+  CetaceanBlue = '#020A47',
+  DogwoodRose = '#D30971',
+  PurpleX = '#9B2AFF',
+
+  // Brand Colors
+  Turquoise = '#5EE4E4',
+  Lavender = '#C77BEA',
+  HotPink = '#F863B0',
+  Chartreuse = '#D6F622',
+
+  // Utility Colors
+  LimeGreen = '#51D91C',
+  Carnation = '#E65B5B',
+
+  // Background Colors
+  Elephant = '#1E3A46',
+  Martinique = '#332548',
+  Voodoo = '#482543',
+  VerdunGreen = '#546120',
+  Seaweed = '#1B381F',
+  Thunder = '#311C29',
+
+  // What are thoooooose???
   // Neutrals
   Obsidian = '#07070e', // Grey5
   Raven = '#07070e', // Grey5
@@ -249,7 +273,7 @@ export enum InfluxColors {
   Topaz = '#E85B1C',
   Tiger = '#F48D38',
   Pineapple = '#FFB94A',
-  Thunder = '#FFD255',
+  //Thunder = '#FFD255',
   Sulfur = '#FFE480',
   Daisy = '#FFF6B8',
   Banana = '#FFFDDE',
@@ -263,16 +287,6 @@ export enum InfluxColors {
   Tungsten = '#FFB6A0',
   Marmelade = '#FFDCCF',
   Flan = '#FFF7F4',
-
-  // Brand Colors
-  Chartreuse = '#D6F622',
-  DeepPurple = '#13002D',
-  Magenta = '#BF2FE5',
-  Galaxy = '#9394FF',
-  Pulsar = '#513CC6',
-  CetaceanBlue = '#020A47',
-  DogwoodRose = '#D30971',
-  PurpleX = '#9B2AFF',
 }
 
 export enum IconFont {