Repository: laboratoriobridge/bold
Pull request #414 (2019-06-13 13:56:45)

Colors


Patch:
diff --git a/src/styles/colors/blue.ts b/src/styles/colors/blue.ts
index 6ea4d1752..282e7cfdb 100644
--- a/src/styles/colors/blue.ts
+++ b/src/styles/colors/blue.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const blue: ColorScale = {
-  c10: '#0E1C30',
-  c20: '#0E366E',
-  c30: '#074FB3',
-  c40: '#0A67D1',
-  c50: '#1079E3',
-  c60: '#3491ED',
-  c70: '#75C6FF',
-  c80: '#B8E2FF',
-  c90: '#EBF4FA',
+  c10: '#002451',
+  c20: '#003A79',
+  c30: '#0051A2',
+  c40: '#0069D0',
+  c50: '#007AF0',
+  c60: '#498FFF',
+  c70: '#84AAFF',
+  c80: '#C5D4FF',
+  c90: '#ECF0FF',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/gray.ts b/src/styles/colors/gray.ts
index abbd6da66..225a8bb89 100644
--- a/src/styles/colors/gray.ts
+++ b/src/styles/colors/gray.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const gray: ColorScale = {
-  c10: '#171B1F',
-  c20: '#2D343B',
-  c30: '#41484F',
-  c40: '#53595E',
-  c50: '#676C70',
-  c60: '#818489',
-  c70: '#B9B9BD',
-  c80: '#DCDCE0',
-  c90: '#F2F2F7',
+  c10: '#24252E',
+  c20: '#3A3A47',
+  c30: '#515162',
+  c40: '#696979',
+  c50: '#7A7B8E',
+  c60: '#8F8FA2',
+  c70: '#AAAAB9',
+  c80: '#D3D4DD',
+  c90: '#F0F0F5',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/green.ts b/src/styles/colors/green.ts
index 3509df1ac..a88603e5c 100644
--- a/src/styles/colors/green.ts
+++ b/src/styles/colors/green.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const green: ColorScale = {
-  c10: '#0C1F10',
-  c20: '#09421C',
-  c30: '#085E17',
-  c40: '#097D05',
-  c50: '#0D8F20',
-  c60: '#28AB16',
-  c70: '#7ED945',
-  c80: '#B1F081',
-  c90: '#E3FAD2',
+  c10: '#052D00',
+  c20: '#0E4700',
+  c30: '#166000',
+  c40: '#217B00',
+  c50: '#2E8E16',
+  c60: '#40A42B',
+  c70: '#54C241',
+  c80: '#9DE695',
+  c90: '#E1F6DF',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/orange.ts b/src/styles/colors/orange.ts
index 5e9de49b3..b477dd882 100644
--- a/src/styles/colors/orange.ts
+++ b/src/styles/colors/orange.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const orange: ColorScale = {
-  c10: '#2E1606',
-  c20: '#592A0A',
-  c30: '#8C3901',
-  c40: '#BF4600',
-  c50: '#CF5A00',
-  c60: '#E67220',
-  c70: '#FFAE70',
-  c80: '#FAD6BB',
-  c90: '#FAF0E8',
+  c10: '#421A00',
+  c20: '#642B00',
+  c30: '#873D00',
+  c40: '#AD5000',
+  c50: '#C85D00',
+  c60: '#E76F00',
+  c70: '#FF8C54',
+  c80: '#FFC8B8',
+  c90: '#FFECE8',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/purple.ts b/src/styles/colors/purple.ts
index f90fcae6a..2ed3be904 100644
--- a/src/styles/colors/purple.ts
+++ b/src/styles/colors/purple.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const purple: ColorScale = {
-  c10: '#2E113D',
-  c20: '#66198C',
-  c30: '#8529B3',
-  c40: '#A73AD6',
-  c50: '#B84BD9',
-  c60: '#CA66E3',
-  c70: '#EEA4FC',
-  c80: '#F7D1FF',
-  c90: '#FAF0FC',
+  c10: '#42005B',
+  c20: '#630087',
+  c30: '#8600B6',
+  c40: '#AB00E7',
+  c50: '#C02BFF',
+  c60: '#C762FF',
+  c70: '#D28FFF',
+  c80: '#E7C8FF',
+  c90: '#F7EDFF',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/red.ts b/src/styles/colors/red.ts
index b5a89273e..b868276e6 100644
--- a/src/styles/colors/red.ts
+++ b/src/styles/colors/red.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const red: ColorScale = {
-  c10: '#3D110E',
-  c20: '#75211B',
-  c30: '#AD2E24',
-  c40: '#D83A2E',
-  c50: '#E64949',
-  c60: '#ED6868',
-  c70: '#FCA7A7',
-  c80: '#FCD2D2',
-  c90: '#FCF0F0',
+  c10: '#510609',
+  c20: '#790C14',
+  c30: '#A4151E',
+  c40: '#D01E29',
+  c50: '#F02532',
+  c60: '#F75B60',
+  c70: '#FF888B',
+  c80: '#FAC8C9',
+  c90: '#FEECED',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/turquoise.ts b/src/styles/colors/turquoise.ts
index 6c83fcdfc..8eec6259c 100644
--- a/src/styles/colors/turquoise.ts
+++ b/src/styles/colors/turquoise.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const turquoise: ColorScale = {
-  c10: '#091F1C',
-  c20: '#084037',
-  c30: '#07594D',
-  c40: '#057572',
-  c50: '#0C8777',
-  c60: '#12A695',
-  c70: '#45D9D1',
-  c80: '#9DEDE5',
-  c90: '#D2FAF6',
+  c10: '#002B26',
+  c20: '#00443D',
+  c30: '#005E55',
+  c40: '#02786D',
+  c50: '#1E8B7F',
+  c60: '#36A094',
+  c70: '#50BBAF',
+  c80: '#9BE1D8',
+  c90: '#DBF6F2',
   c100: '#FFFFFF',
 }
diff --git a/src/styles/colors/yellow.ts b/src/styles/colors/yellow.ts
index 63fb40051..d450efcad 100644
--- a/src/styles/colors/yellow.ts
+++ b/src/styles/colors/yellow.ts
@@ -1,14 +1,14 @@
 import { ColorScale } from '.'
 
 export const yellow: ColorScale = {
-  c10: '#211805',
-  c20: '#4A310B',
-  c30: '#6E4201',
-  c40: '#8F5704',
-  c50: '#9C6800',
-  c60: '#B08400',
-  c70: '#E0BD31',
-  c80: '#F5DE82',
-  c90: '#FAF3D7',
+  c10: '#312400',
+  c20: '#4C3900',
+  c30: '#684F00',
+  c40: '#866600',
+  c50: '#9B7700',
+  c60: '#B58B00',
+  c70: '#D5A400',
+  c80: '#FCCE74',
+  c90: '#FFEED6',
   c100: '#FFFFFF',
 }


Test patch:
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 325341034..d27540bdc 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -32,9 +32,9 @@ exports[`should allow styles override 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #EBF4FA;
-  color: #0A67D1;
-  border-color: #0A67D1;
+  background: #ECF0FF;
+  color: #0069D0;
+  border-color: #0069D0;
   color: red;
 }
 
@@ -142,9 +142,9 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #EBF4FA;
-  color: #0A67D1;
-  border-color: #0A67D1;
+  background: #ECF0FF;
+  color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-2 {
@@ -180,7 +180,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -202,11 +202,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-3:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-13 {
@@ -228,9 +228,9 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #E3FAD2;
-  color: #097D05;
-  border-color: #097D05;
+  background: #E1F6DF;
+  color: #217B00;
+  border-color: #217B00;
 }
 
 .emotion-20 {
@@ -252,9 +252,9 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #FAF0E8;
-  color: #BF4600;
-  border-color: #BF4600;
+  background: #FFECE8;
+  color: #AD5000;
+  border-color: #AD5000;
 }
 
 .emotion-27 {
@@ -276,9 +276,9 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #FCF0F0;
-  color: #D83A2E;
-  border-color: #D83A2E;
+  background: #FEECED;
+  color: #D01E29;
+  border-color: #D01E29;
 }
 
 <div>
@@ -551,9 +551,9 @@ exports[`should render correctly when inline 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #EBF4FA;
-  color: #0A67D1;
-  border-color: #0A67D1;
+  background: #ECF0FF;
+  color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0 {
@@ -581,9 +581,9 @@ exports[`should render correctly when inline 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #E3FAD2;
-  color: #097D05;
-  border-color: #097D05;
+  background: #E1F6DF;
+  color: #217B00;
+  border-color: #217B00;
 }
 
 .emotion-11 {
@@ -605,9 +605,9 @@ exports[`should render correctly when inline 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #FAF0E8;
-  color: #BF4600;
-  border-color: #BF4600;
+  background: #FFECE8;
+  color: #AD5000;
+  border-color: #AD5000;
 }
 
 .emotion-15 {
@@ -629,9 +629,9 @@ exports[`should render correctly when inline 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.25rem;
-  background: #FCF0F0;
-  color: #D83A2E;
-  border-color: #D83A2E;
+  background: #FEECED;
+  color: #D01E29;
+  border-color: #D01E29;
 }
 
 <div>
diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap b/src/components/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap
index 3be2b5134..e17ad0923 100644
--- a/src/components/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap
+++ b/src/components/Breadcrumb/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`should render correctly 1`] = `
   list-style: none;
   padding: 0;
   margin: 0;
-  color: #2D343B;
+  color: #3A3A47;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -30,7 +30,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1:hover {
-  color: #0A67D1;
+  color: #0069D0;
 }
 
 .emotion-9 {
@@ -42,19 +42,19 @@ exports[`should render correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #0A67D1;
+  color: #0069D0;
   pointer-events: none;
 }
 
 .emotion-9:hover {
-  color: #0A67D1;
+  color: #0069D0;
 }
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #0A67D1;
+  color: #0069D0;
   font-weight: bold;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -73,13 +73,13 @@ exports[`should render correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2 {
   fill: currentColor;
   font-size: 1rem;
-  color: #B9B9BD;
+  color: #AAAAB9;
   margin: 0 .5rem;
   font-size: 1rem;
 }
diff --git a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
index 4e5d05554..37b24c939 100644
--- a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
@@ -35,9 +35,9 @@ exports[`should accept the loading prop 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -59,7 +59,7 @@ exports[`should accept the loading prop 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
@@ -119,9 +119,9 @@ exports[`should render correctly with icon 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -143,7 +143,7 @@ exports[`should render correctly with icon 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
@@ -199,9 +199,9 @@ exports[`should render correctly with label 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -223,7 +223,7 @@ exports[`should render correctly with label 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
@@ -263,9 +263,9 @@ exports[`should render the default skin 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -287,7 +287,7 @@ exports[`should render the default skin 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
@@ -327,12 +327,12 @@ exports[`should render the default skin 2`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
-  background-color: #0A67D1;
+  color: #3A3A47;
+  background-color: #0069D0;
   color: #FFFFFF;
-  border: 1px solid #0A67D1;
+  border: 1px solid #0069D0;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -354,7 +354,7 @@ exports[`should render the default skin 2`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
@@ -362,7 +362,7 @@ exports[`should render the default skin 2`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: #095fc0;
+  background-color: #0061bf;
 }
 
 <div>
@@ -398,12 +398,12 @@ exports[`should render the default skin 3`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
-  background-color: #D83A2E;
+  color: #3A3A47;
+  background-color: #D01E29;
   color: #FFFFFF;
-  border: 1px solid #D83A2E;
+  border: 1px solid #D01E29;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -425,7 +425,7 @@ exports[`should render the default skin 3`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
@@ -433,11 +433,11 @@ exports[`should render the default skin 3`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: #c7352a;
+  background-color: #bf1c26;
 }
 
 .emotion-0:focus {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #D83A2E;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #D01E29;
 }
 
 <div>
@@ -475,7 +475,7 @@ exports[`should render the ghost skin 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -497,11 +497,11 @@ exports[`should render the ghost skin 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
@@ -539,8 +539,8 @@ exports[`should render the ghost skin 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
-  color: #0A67D1;
+  color: #3A3A47;
+  color: #0069D0;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -562,11 +562,11 @@ exports[`should render the ghost skin 2`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
@@ -604,8 +604,8 @@ exports[`should render the ghost skin 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
-  color: #D83A2E;
+  color: #3A3A47;
+  color: #D01E29;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -627,15 +627,15 @@ exports[`should render the ghost skin 3`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0:focus {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #D83A2E;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #D01E29;
 }
 
 <div>
@@ -671,9 +671,9 @@ exports[`should render the outline skin 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -695,11 +695,11 @@ exports[`should render the outline skin 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(103,108,112,0.16);
+  background-color: rgba(122,123,142,0.16);
 }
 
 <div>
@@ -735,11 +735,11 @@ exports[`should render the outline skin 2`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
-  border: 1px solid #0A67D1;
-  color: #0A67D1;
+  color: #3A3A47;
+  border: 1px solid #0069D0;
+  color: #0069D0;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -761,15 +761,15 @@ exports[`should render the outline skin 2`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(103,108,112,0.16);
+  background-color: rgba(122,123,142,0.16);
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(10,103,209,0.16);
+  background-color: rgba(0,105,208,0.16);
 }
 
 <div>
@@ -805,11 +805,11 @@ exports[`should render the outline skin 3`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
-  border: 1px solid #D83A2E;
-  color: #D83A2E;
+  color: #3A3A47;
+  border: 1px solid #D01E29;
+  color: #D01E29;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -831,19 +831,19 @@ exports[`should render the outline skin 3`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(103,108,112,0.16);
+  background-color: rgba(122,123,142,0.16);
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: rgba(216,58,46,0.1);
+  background-color: rgba(208,30,41,0.1);
 }
 
 .emotion-0:focus {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #D83A2E;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #D01E29;
 }
 
 <div>
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
index 00a497178..4748cccac 100644
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
+++ b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
@@ -38,9 +38,9 @@ exports[`should render correctly 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -62,7 +62,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
diff --git a/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index 7475b214a..ffd5c4bdd 100644
--- a/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`Calendar should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -93,11 +93,11 @@ exports[`Calendar should render correctly 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -126,7 +126,7 @@ exports[`Calendar should render correctly 1`] = `
 
 .emotion-20:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-19 {
@@ -134,12 +134,12 @@ exports[`Calendar should render correctly 1`] = `
   padding: 0.25rem 0;
   display: inline-block;
   border-radius: 50%;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-19:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-46 {
@@ -147,18 +147,18 @@ exports[`Calendar should render correctly 1`] = `
   padding: 0.25rem 0;
   display: inline-block;
   border-radius: 50%;
-  background: #0A67D1;
+  background: #0069D0;
   color: #FFFFFF;
   font-weight: bold;
 }
 
 .emotion-46:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-46:hover {
-  background: #0A67D1;
+  background: #0069D0;
   color: #FFFFFF;
 }
 
@@ -694,10 +694,10 @@ exports[`Calendar should render correctly 1`] = `
 exports[`createDayStyles should return merged styles from all modifiers that apply 1`] = `
 Object {
   ":hover": Object {
-    "background": "#0A67D1",
+    "background": "#0069D0",
     "color": "#FFFFFF",
   },
-  "background": "#0A67D1",
+  "background": "#0069D0",
   "color": "#FFFFFF",
   "fontWeight": "bold",
 }
@@ -705,7 +705,7 @@ Object {
 
 exports[`modifierStyles should have "adjacentMonth" styles 1`] = `
 Object {
-  "color": "#B9B9BD",
+  "color": "#AAAAB9",
 }
 `;
 
@@ -715,17 +715,17 @@ Object {
     "background": "initial",
     "cursor": "not-allowed",
   },
-  "color": "#B9B9BD",
+  "color": "#AAAAB9",
 }
 `;
 
 exports[`modifierStyles should have "selected" styles 1`] = `
 Object {
   ":hover": Object {
-    "background": "#0A67D1",
+    "background": "#0069D0",
     "color": "#FFFFFF",
   },
-  "background": "#0A67D1",
+  "background": "#0069D0",
   "color": "#FFFFFF",
   "fontWeight": "bold",
 }
diff --git a/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap b/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
index b40fe4e15..f4826eaa4 100644
--- a/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -76,11 +76,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
diff --git a/src/components/Calendar/__snapshots__/MonthView.test.tsx.snap b/src/components/Calendar/__snapshots__/MonthView.test.tsx.snap
index d169fa372..559ceb7c0 100644
--- a/src/components/Calendar/__snapshots__/MonthView.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/MonthView.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -443,7 +443,7 @@ exports[`should use createDayStyles function to create styles for days 1`] = `
 
 .emotion-0:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
diff --git a/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap b/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
index 34098a688..f8aeb187b 100644
--- a/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -76,11 +76,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
diff --git a/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 3c34a8f14..eeb9ad2ce 100644
--- a/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`should accept popper props 1`] = `
   padding: 0;
   white-space: nowrap;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   display: inline-block;
   width: auto;
@@ -25,7 +25,7 @@ exports[`should accept popper props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -39,11 +39,11 @@ exports[`should accept popper props 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
@@ -85,7 +85,7 @@ exports[`should extend DropdownMenu props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -99,11 +99,11 @@ exports[`should extend DropdownMenu props 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
@@ -113,7 +113,7 @@ exports[`should extend DropdownMenu props 1`] = `
   padding: 0;
   white-space: nowrap;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   display: inline-block;
   width: auto;
@@ -181,7 +181,7 @@ exports[`should render correctly when open 1`] = `
   padding: 0;
   white-space: nowrap;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   display: inline-block;
   width: auto;
@@ -199,7 +199,7 @@ exports[`should render correctly when open 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -213,11 +213,11 @@ exports[`should render correctly when open 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
diff --git a/src/components/Dropdown/__snapshots__/DropdownButton.test.tsx.snap b/src/components/Dropdown/__snapshots__/DropdownButton.test.tsx.snap
index 153703a06..57b441563 100644
--- a/src/components/Dropdown/__snapshots__/DropdownButton.test.tsx.snap
+++ b/src/components/Dropdown/__snapshots__/DropdownButton.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -45,11 +45,11 @@ exports[`should render correctly when closed 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -112,7 +112,7 @@ exports[`should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -134,11 +134,11 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -152,7 +152,7 @@ exports[`should render correctly when opened 1`] = `
   padding: 0;
   white-space: nowrap;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   display: inline-block;
   width: auto;
@@ -170,7 +170,7 @@ exports[`should render correctly when opened 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -184,11 +184,11 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-2:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
diff --git a/src/components/Dropdown/__snapshots__/DropdownDivider.test.tsx.snap b/src/components/Dropdown/__snapshots__/DropdownDivider.test.tsx.snap
index c87098b3e..576a17fde 100644
--- a/src/components/Dropdown/__snapshots__/DropdownDivider.test.tsx.snap
+++ b/src/components/Dropdown/__snapshots__/DropdownDivider.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 <div>
diff --git a/src/components/Dropdown/__snapshots__/DropdownItem.test.tsx.snap b/src/components/Dropdown/__snapshots__/DropdownItem.test.tsx.snap
index 9345d420e..6d931dbd8 100644
--- a/src/components/Dropdown/__snapshots__/DropdownItem.test.tsx.snap
+++ b/src/components/Dropdown/__snapshots__/DropdownItem.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should accept "component" prop to render with different container eleme
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -19,11 +19,11 @@ exports[`should accept "component" prop to render with different container eleme
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
@@ -43,7 +43,7 @@ exports[`should accept "component" prop to render with different container eleme
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -57,11 +57,11 @@ exports[`should accept "component" prop to render with different container eleme
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
@@ -81,7 +81,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -95,11 +95,11 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
diff --git a/src/components/Dropdown/__snapshots__/DropdownMenu.test.tsx.snap b/src/components/Dropdown/__snapshots__/DropdownMenu.test.tsx.snap
index d6489c0e9..ab5942438 100644
--- a/src/components/Dropdown/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/src/components/Dropdown/__snapshots__/DropdownMenu.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`should accept "style" props 1`] = `
   padding: 0;
   white-space: nowrap;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   display: inline-block;
   width: auto;
@@ -31,7 +31,7 @@ exports[`should render correctly 1`] = `
   padding: 0;
   white-space: nowrap;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   display: inline-block;
   width: auto;
@@ -43,7 +43,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -57,11 +57,11 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
@@ -69,7 +69,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -80,15 +80,15 @@ exports[`should render correctly 1`] = `
   -webkit-transition: all .2s ease;
   transition: all .2s ease;
   display: block;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-1:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
@@ -97,14 +97,14 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-3 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   margin: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -115,25 +115,25 @@ exports[`should render correctly 1`] = `
   -webkit-transition: all .2s ease;
   transition: all .2s ease;
   display: block;
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-3:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-3:focus {
-  box-shadow: inset 0 0 0 2px #0A67D1;
+  box-shadow: inset 0 0 0 2px #0069D0;
   border-radius: 4px;
 }
 
 .emotion-3:hover {
   color: #FFFFFF;
-  background: #D83A2E;
+  background: #D01E29;
 }
 
 .emotion-3:focus {
-  box-shadow: inset 0 0 0 2px #D83A2E;
+  box-shadow: inset 0 0 0 2px #D01E29;
   border-radius: 4px;
 }
 
diff --git a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
index b0d420b8c..eab68f139 100644
--- a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
+++ b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`should render correct without extension 1`] = `
 .emotion-13 {
   background-color: #FFFFFF;
   border-radius: 4px;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.25rem;
   -webkit-transition: box-shadow .2s ease;
@@ -13,7 +13,7 @@ exports[`should render correct without extension 1`] = `
 
 .emotion-13:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-5 {
@@ -37,7 +37,7 @@ exports[`should render correct without extension 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-top: 1px solid #DCDCE0;
+  border-top: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -96,7 +96,7 @@ exports[`should render correct without extension 1`] = `
 }
 
 .emotion-0 {
-  fill: #53595E;
+  fill: #696979;
   font-size: 1.5rem;
 }
 
@@ -104,15 +104,15 @@ exports[`should render correct without extension 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -121,11 +121,11 @@ exports[`should render correct without extension 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-weight: bold;
-  background-color: #F2F2F7;
-  border: 1px solid #DCDCE0;
+  background-color: #F0F0F5;
+  border: 1px solid #D3D4DD;
   padding: 1rem;
 }
 
@@ -133,13 +133,13 @@ exports[`should render correct without extension 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-right: 10px;
 }
 
 .emotion-7 {
-  fill: #0A67D1;
+  fill: #0069D0;
   font-size: 1rem;
   margin-right: 5px;
 }
@@ -232,7 +232,7 @@ exports[`should render correctly at initial state 1`] = `
 .emotion-6 {
   background-color: #FFFFFF;
   border-radius: 4px;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.25rem;
   -webkit-transition: box-shadow .2s ease;
@@ -241,7 +241,7 @@ exports[`should render correctly at initial state 1`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-5 {
@@ -292,7 +292,7 @@ exports[`should render correctly at initial state 1`] = `
 }
 
 .emotion-0 {
-  fill: #53595E;
+  fill: #696979;
   font-size: 1.5rem;
 }
 
@@ -300,8 +300,8 @@ exports[`should render correctly at initial state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -357,7 +357,7 @@ exports[`should render correctly at uploading state 1`] = `
 .emotion-13 {
   background-color: #FFFFFF;
   border-radius: 4px;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.25rem;
   -webkit-transition: box-shadow .2s ease;
@@ -366,7 +366,7 @@ exports[`should render correctly at uploading state 1`] = `
 
 .emotion-13:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-5 {
@@ -390,7 +390,7 @@ exports[`should render correctly at uploading state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-top: 1px solid #DCDCE0;
+  border-top: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -449,7 +449,7 @@ exports[`should render correctly at uploading state 1`] = `
 }
 
 .emotion-0 {
-  fill: #53595E;
+  fill: #696979;
   font-size: 1.5rem;
 }
 
@@ -457,15 +457,15 @@ exports[`should render correctly at uploading state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -474,11 +474,11 @@ exports[`should render correctly at uploading state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-weight: bold;
-  background-color: #F2F2F7;
-  border: 1px solid #DCDCE0;
+  background-color: #F0F0F5;
+  border: 1px solid #D3D4DD;
   padding: 1rem;
 }
 
@@ -486,7 +486,7 @@ exports[`should render correctly at uploading state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-right: 10px;
 }
@@ -501,19 +501,19 @@ exports[`should render correctly at uploading state 1`] = `
 }
 
 .emotion-10::-webkit-progress-bar {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   border-radius: 4px;
 }
 
 .emotion-10::-webkit-progress-value {
-  background-color: #0A67D1;
+  background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
 }
 
 .emotion-10::-moz-progress-bar {
-  background-color: #0A67D1;
+  background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
@@ -602,7 +602,7 @@ exports[`should render correctly complete state 1`] = `
 .emotion-13 {
   background-color: #FFFFFF;
   border-radius: 4px;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.25rem;
   -webkit-transition: box-shadow .2s ease;
@@ -611,7 +611,7 @@ exports[`should render correctly complete state 1`] = `
 
 .emotion-13:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-5 {
@@ -635,7 +635,7 @@ exports[`should render correctly complete state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-top: 1px solid #DCDCE0;
+  border-top: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -694,7 +694,7 @@ exports[`should render correctly complete state 1`] = `
 }
 
 .emotion-0 {
-  fill: #53595E;
+  fill: #696979;
   font-size: 1.5rem;
 }
 
@@ -702,15 +702,15 @@ exports[`should render correctly complete state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-2 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -719,11 +719,11 @@ exports[`should render correctly complete state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #53595E;
+  color: #3A3A47;
+  color: #696979;
   font-weight: bold;
-  background-color: #F2F2F7;
-  border: 1px solid #DCDCE0;
+  background-color: #F0F0F5;
+  border: 1px solid #D3D4DD;
   padding: 1rem;
 }
 
@@ -731,13 +731,13 @@ exports[`should render correctly complete state 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-right: 10px;
 }
 
 .emotion-7 {
-  fill: #0A67D1;
+  fill: #0069D0;
   font-size: 1rem;
   margin-right: 5px;
 }
diff --git a/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap b/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap
index 88b31165f..a061cce1b 100644
--- a/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap
+++ b/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`should render correctly 1`] = `
 
 exports[`should render correctly 2`] = `
 .emotion-0 {
-  color: #D83A2E;
+  color: #D01E29;
   margin-left: 0.25rem;
 }
 
@@ -30,7 +30,7 @@ exports[`should render correctly 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #D83A2E;
+  color: #D01E29;
   margin-top: 0.25rem;
   line-height: 20px;
 }
diff --git a/src/components/FormControl/__snapshots__/FormError.test.tsx.snap b/src/components/FormControl/__snapshots__/FormError.test.tsx.snap
index fc070b5f0..d5d9b6dc4 100644
--- a/src/components/FormControl/__snapshots__/FormError.test.tsx.snap
+++ b/src/components/FormControl/__snapshots__/FormError.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`should accept the style prop 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #D83A2E;
+  color: #D01E29;
   color: blue;
 }
 
@@ -33,7 +33,7 @@ exports[`should render correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 <div>
diff --git a/src/components/FormControl/__snapshots__/FormLabel.test.tsx.snap b/src/components/FormControl/__snapshots__/FormLabel.test.tsx.snap
index f777ec714..371e3f149 100644
--- a/src/components/FormControl/__snapshots__/FormLabel.test.tsx.snap
+++ b/src/components/FormControl/__snapshots__/FormLabel.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`should render correctly 2`] = `
 }
 
 .emotion-0 {
-  color: #D83A2E;
+  color: #D01E29;
   margin-left: 0.25rem;
 }
 
diff --git a/src/components/Heading/__snapshots__/Heading.test.tsx.snap b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
index 8eca4b36f..cdade306d 100644
--- a/src/components/Heading/__snapshots__/Heading.test.tsx.snap
+++ b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
@@ -5,9 +5,9 @@ exports[`should accept all text props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
-  color: #0A67D1;
+  color: #0069D0;
   font-size: 4rem;
   font-weight: bolder;
   font-style: italic;
@@ -29,7 +29,7 @@ exports[`should accept style prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   color: red;
 }
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -66,7 +66,7 @@ exports[`should render correctly 2`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.25rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -84,7 +84,7 @@ exports[`should render correctly 3`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -102,7 +102,7 @@ exports[`should render correctly 4`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -120,7 +120,7 @@ exports[`should render correctly 5`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -138,7 +138,7 @@ exports[`should render correctly 6`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.75rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
diff --git a/src/components/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap b/src/components/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
index a2fb90c71..84141f1b5 100644
--- a/src/components/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
+++ b/src/components/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
@@ -5,9 +5,9 @@ exports[`should accept color prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
-  color: #0A67D1;
+  color: #0069D0;
   margin-bottom: 1rem;
 }
 
@@ -30,7 +30,7 @@ exports[`should accept style prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
@@ -58,7 +58,7 @@ exports[`should accept vSpace prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 10px;
 }
@@ -82,7 +82,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
@@ -106,7 +106,7 @@ exports[`should render correctly 2`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.25rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
@@ -130,7 +130,7 @@ exports[`should render correctly 3`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
@@ -154,7 +154,7 @@ exports[`should render correctly 4`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
@@ -178,7 +178,7 @@ exports[`should render correctly 5`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
@@ -202,7 +202,7 @@ exports[`should render correctly 6`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.75rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   margin-bottom: 1rem;
 }
diff --git a/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/src/components/Icon/__snapshots__/Icon.test.tsx.snap
index 35b2f8a4a..8246b3ba9 100644
--- a/src/components/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should accept fill prop 1`] = `
 .emotion-0 {
-  fill: #D83A2E;
+  fill: #D01E29;
   font-size: 1.5rem;
 }
 
@@ -59,7 +59,7 @@ exports[`should accept size prop 1`] = `
 exports[`should accept stroke prop 1`] = `
 .emotion-0 {
   fill: currentColor;
-  stroke: #BF4600;
+  stroke: #AD5000;
   font-size: 1.5rem;
 }
 
diff --git a/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap b/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap
index 4942f1ddf..7e53595a8 100644
--- a/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap
+++ b/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`should accept placeholder 1`] = `
 
 .emotion-1:empty::before {
   content: "No value";
-  color: #53595E;
+  color: #696979;
   font-style: italic;
 }
 
@@ -42,7 +42,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:empty::before {
   content: "-";
-  color: #53595E;
+  color: #696979;
   font-style: italic;
 }
 
@@ -80,7 +80,7 @@ exports[`should render correctly 2`] = `
 
 .emotion-1:empty::before {
   content: "-";
-  color: #53595E;
+  color: #696979;
   font-style: italic;
 }
 
diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap
index a01dec751..c24d89e53 100644
--- a/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should accept "component" prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #0A67D1;
+  color: #0069D0;
   font-weight: bold;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -24,7 +24,7 @@ exports[`should accept "component" prop 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 <div>
@@ -41,7 +41,7 @@ exports[`should accept all Text props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #0A67D1;
+  color: #0069D0;
   font-weight: bold;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -66,7 +66,7 @@ exports[`should accept all Text props 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 <div>
@@ -83,7 +83,7 @@ exports[`should accept the "style" prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #0A67D1;
+  color: #0069D0;
   font-weight: bold;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -103,7 +103,7 @@ exports[`should accept the "style" prop 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 <div>
@@ -121,7 +121,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #0A67D1;
+  color: #0069D0;
   font-weight: bold;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -140,7 +140,7 @@ exports[`should render correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 <div>
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index d00159027..0cc23a5f3 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`Modal should render correctly when opened 1`] = `
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
@@ -72,7 +72,7 @@ exports[`Modal should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -97,11 +97,11 @@ exports[`Modal should render correctly when opened 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -116,7 +116,7 @@ exports[`Modal should render correctly when opened 1`] = `
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
 }
 
 <body
@@ -219,7 +219,7 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -244,11 +244,11 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -263,11 +263,11 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
@@ -357,7 +357,7 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
@@ -390,7 +390,7 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -415,11 +415,11 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -434,7 +434,7 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
 }
 
 <body
@@ -537,7 +537,7 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -562,11 +562,11 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -581,11 +581,11 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
diff --git a/src/components/Modal/__snapshots__/ModalBackdrop.test.tsx.snap b/src/components/Modal/__snapshots__/ModalBackdrop.test.tsx.snap
index afe02c193..1f3e3a6a7 100644
--- a/src/components/Modal/__snapshots__/ModalBackdrop.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/ModalBackdrop.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`should accept "style" prop 1`] = `
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
   color: red;
 }
 
@@ -28,7 +28,7 @@ exports[`should render correctly 1`] = `
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
 }
 
 <div>
diff --git a/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap b/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
index c0898445f..374fb5265 100644
--- a/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`should accept the "style" prop 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -48,11 +48,11 @@ exports[`should accept the "style" prop 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -61,7 +61,7 @@ exports[`should accept the "style" prop 1`] = `
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
@@ -103,7 +103,7 @@ exports[`should accept the "style" prop 1`] = `
 
 exports[`should render correctly 1`] = `
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
@@ -133,7 +133,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -158,11 +158,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
diff --git a/src/components/Modal/__snapshots__/ModalFooter.test.tsx.snap b/src/components/Modal/__snapshots__/ModalFooter.test.tsx.snap
index 25e9e74f9..c48a04302 100644
--- a/src/components/Modal/__snapshots__/ModalFooter.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/ModalFooter.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should accept the "style" prop 1`] = `
 .emotion-0 {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   padding: 1rem;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -20,7 +20,7 @@ exports[`should accept the "style" prop 1`] = `
 
 exports[`should render correctly 1`] = `
 .emotion-0 {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   padding: 1rem;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
diff --git a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
index ac22bb431..ee9a7c8b2 100644
--- a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
+++ b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-7 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),0 6px 30px 5px rgba(0,0,0,0.12),0 16px 24px 2px rgba(0,0,0,0.14);
   border-radius: 4px;
   background-color: #FFFFFF;
@@ -59,7 +59,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -84,11 +84,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -101,7 +101,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-6 {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   padding: 1rem;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -158,9 +158,9 @@ exports[`should render correctly 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   min-width: 144px;
@@ -183,7 +183,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-3:not(:disabled):hover {
@@ -197,7 +197,7 @@ exports[`should render correctly 1`] = `
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(220,220,224,0.7);
+  background: rgba(211,212,221,0.7);
 }
 
 .emotion-10 {
diff --git a/src/components/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap b/src/components/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
index 3f76aae27..d15d87802 100644
--- a/src/components/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
+++ b/src/components/MonthPicker/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   width: 21.25rem;
   height: 13.5rem;
   padding: 1rem;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
   border-radius: 2px;
 }
@@ -96,7 +96,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -118,11 +118,11 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -134,7 +134,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -191,13 +191,13 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1.375rem;
   -webkit-transition-property: background;
   transition-property: background;
-  background: #0A67D1 !important;
+  background: #0069D0 !important;
   color: #FFFFFF;
 }
 
@@ -218,11 +218,11 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 
 .emotion-10:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-10:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-12 {
@@ -247,7 +247,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1.375rem;
@@ -272,11 +272,11 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 
 .emotion-12:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-12:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
diff --git a/src/components/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap b/src/components/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap
index c98244542..6e832ed72 100644
--- a/src/components/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap
+++ b/src/components/MonthPicker/MonthPickerInput/__snapshots__/MonthPickerInput.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`MonthPickerInput should render correctly 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,9 +37,9 @@ exports[`MonthPickerInput should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -72,37 +72,37 @@ exports[`MonthPickerInput should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -128,7 +128,7 @@ exports[`MonthPickerInput should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -151,11 +151,11 @@ exports[`MonthPickerInput should render correctly 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
@@ -208,7 +208,7 @@ exports[`MonthPickerInput should render correctly 1`] = `
   width: 21.25rem;
   height: 13.5rem;
   padding: 1rem;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
   border-radius: 2px;
 }
@@ -271,7 +271,7 @@ exports[`MonthPickerInput should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -293,18 +293,18 @@ exports[`MonthPickerInput should render correctly 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-7:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-9 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -361,7 +361,7 @@ exports[`MonthPickerInput should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1.375rem;
@@ -386,11 +386,11 @@ exports[`MonthPickerInput should render correctly 1`] = `
 
 .emotion-16:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-16:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
diff --git a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
index c079b3415..79b711dc9 100644
--- a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -57,11 +57,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
@@ -77,7 +77,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-6 {
@@ -102,7 +102,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -125,18 +125,18 @@ exports[`should render correctly 1`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-6:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -172,37 +172,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-2:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -297,7 +297,7 @@ exports[`should render correctly 2`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-6 {
@@ -322,7 +322,7 @@ exports[`should render correctly 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -345,18 +345,18 @@ exports[`should render correctly 2`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-6:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -392,37 +392,37 @@ exports[`should render correctly 2`] = `
 }
 
 .emotion-2::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-2:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -448,7 +448,7 @@ exports[`should render correctly 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
@@ -472,11 +472,11 @@ exports[`should render correctly 2`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
@@ -571,7 +571,7 @@ exports[`should render correctly 3`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-6 {
@@ -596,7 +596,7 @@ exports[`should render correctly 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -619,18 +619,18 @@ exports[`should render correctly 3`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-6:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -666,37 +666,37 @@ exports[`should render correctly 3`] = `
 }
 
 .emotion-2::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-2:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -722,7 +722,7 @@ exports[`should render correctly 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
@@ -746,11 +746,11 @@ exports[`should render correctly 3`] = `
 
 .emotion-1:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-1:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
diff --git a/src/components/Paper/__snapshots__/Paper.test.tsx.snap b/src/components/Paper/__snapshots__/Paper.test.tsx.snap
index 802366855..050ff40a3 100644
--- a/src/components/Paper/__snapshots__/Paper.test.tsx.snap
+++ b/src/components/Paper/__snapshots__/Paper.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should accept style prop 1`] = `
 .emotion-0 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 4px;
   color: red;
 }
@@ -16,7 +16,7 @@ exports[`should accept style prop 1`] = `
 
 exports[`should render correctly 1`] = `
 .emotion-0 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 4px;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
diff --git a/src/components/Progress/__snapshots__/Progress.test.tsx.snap b/src/components/Progress/__snapshots__/Progress.test.tsx.snap
index a204c505a..f1281de8e 100644
--- a/src/components/Progress/__snapshots__/Progress.test.tsx.snap
+++ b/src/components/Progress/__snapshots__/Progress.test.tsx.snap
@@ -12,19 +12,19 @@ exports[`should accept style prop 1`] = `
 }
 
 .emotion-0::-webkit-progress-bar {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   border-radius: 4px;
 }
 
 .emotion-0::-webkit-progress-value {
-  background-color: #0A67D1;
+  background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
 }
 
 .emotion-0::-moz-progress-bar {
-  background-color: #0A67D1;
+  background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
@@ -50,19 +50,19 @@ exports[`should accept type prop 1`] = `
 }
 
 .emotion-0::-webkit-progress-bar {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   border-radius: 4px;
 }
 
 .emotion-0::-webkit-progress-value {
-  background-color: #D83A2E;
+  background-color: #D01E29;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
 }
 
 .emotion-0::-moz-progress-bar {
-  background-color: #D83A2E;
+  background-color: #D01E29;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
@@ -88,19 +88,19 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-progress-bar {
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   border-radius: 4px;
 }
 
 .emotion-0::-webkit-progress-value {
-  background-color: #0A67D1;
+  background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
 }
 
 .emotion-0::-moz-progress-bar {
-  background-color: #0A67D1;
+  background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
diff --git a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index bc04d7104..b79572add 100644
--- a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -57,18 +57,18 @@ exports[`SelectInline should render correctly when closed 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-5 {
@@ -92,7 +92,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-15 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   background-color: #FFFFFF;
 }
 
@@ -101,7 +101,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-15 ul > li:first-of-type {
-  border-top: 1px solid #DCDCE0;
+  border-top: 1px solid #D3D4DD;
 }
 
 .emotion-15 div > ul {
@@ -121,7 +121,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 
 .emotion-7 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -143,9 +143,9 @@ exports[`SelectInline should render correctly when closed 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -178,37 +178,37 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-4::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-4:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-4:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-4:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -234,7 +234,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -257,11 +257,11 @@ exports[`SelectInline should render correctly when closed 1`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-6:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-6:focus {
@@ -276,7 +276,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
@@ -289,7 +289,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-9 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -301,7 +301,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-9:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -474,7 +474,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -496,18 +496,18 @@ exports[`SelectInline should render correctly when opened 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-5 {
@@ -522,7 +522,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-15 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   background-color: #FFFFFF;
 }
 
@@ -531,7 +531,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-15 ul > li:first-of-type {
-  border-top: 1px solid #DCDCE0;
+  border-top: 1px solid #D3D4DD;
 }
 
 .emotion-15 div > ul {
@@ -551,7 +551,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 
 .emotion-7 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -573,9 +573,9 @@ exports[`SelectInline should render correctly when opened 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -608,37 +608,37 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-4::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-4:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-4:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-4:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -664,7 +664,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -687,11 +687,11 @@ exports[`SelectInline should render correctly when opened 1`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-6:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-6:focus {
@@ -706,7 +706,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
@@ -719,7 +719,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-9 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -731,7 +731,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-9:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-16 {
@@ -915,7 +915,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -937,18 +937,18 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-5 {
@@ -972,7 +972,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-15 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   background-color: #FFFFFF;
 }
 
@@ -981,7 +981,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-15 ul > li:first-of-type {
-  border-top: 1px solid #DCDCE0;
+  border-top: 1px solid #D3D4DD;
 }
 
 .emotion-15 div > ul {
@@ -1001,7 +1001,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 
 .emotion-7 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1023,9 +1023,9 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -1058,37 +1058,37 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-4::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-4:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-4:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-4:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-4:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -1114,7 +1114,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -1137,11 +1137,11 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 
 .emotion-6:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-6:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-6:focus {
@@ -1156,7 +1156,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
@@ -1169,7 +1169,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-9 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -1181,7 +1181,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-9:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
diff --git a/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap b/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap
index 895f822b5..718cb1f81 100644
--- a/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/Table/DataTable/__snapshots__/DataTable.test.tsx.snap
@@ -4,24 +4,24 @@ exports[`should render correctly 1`] = `
 .emotion-4 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-17 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-30 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-30 tr:hover td {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-3 {
@@ -39,18 +39,18 @@ exports[`should render correctly 1`] = `
 .emotion-2 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-0 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 .emotion-19 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   text-align: right;
 }
 
diff --git a/src/components/Table/DataTable/__snapshots__/TableFilledBody.test.tsx.snap b/src/components/Table/DataTable/__snapshots__/TableFilledBody.test.tsx.snap
index ecd61fe67..d39fa5c7c 100644
--- a/src/components/Table/DataTable/__snapshots__/TableFilledBody.test.tsx.snap
+++ b/src/components/Table/DataTable/__snapshots__/TableFilledBody.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should render correctly 1`] = `
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 <div>
diff --git a/src/components/Table/DataTable/__snapshots__/TableLoadingRow.test.tsx.snap b/src/components/Table/DataTable/__snapshots__/TableLoadingRow.test.tsx.snap
index e04b97e2f..4cddabebf 100644
--- a/src/components/Table/DataTable/__snapshots__/TableLoadingRow.test.tsx.snap
+++ b/src/components/Table/DataTable/__snapshots__/TableLoadingRow.test.tsx.snap
@@ -38,9 +38,9 @@ exports[`should render correctly 1`] = `
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
-  background: #F2F2F7;
-  color: #0A67D1;
+  border-bottom: 1px solid #D3D4DD;
+  background: #F0F0F5;
+  color: #0069D0;
   font-weight: bold;
 }
 
@@ -125,9 +125,9 @@ exports[`should render correctly 2`] = `
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
-  background: #F2F2F7;
-  color: #0A67D1;
+  border-bottom: 1px solid #D3D4DD;
+  background: #F0F0F5;
+  color: #0069D0;
   font-weight: bold;
 }
 
diff --git a/src/components/Table/DataTable/__snapshots__/TablePlaceholderRow.test.tsx.snap b/src/components/Table/DataTable/__snapshots__/TablePlaceholderRow.test.tsx.snap
index 6bab7a06b..e23907d2a 100644
--- a/src/components/Table/DataTable/__snapshots__/TablePlaceholderRow.test.tsx.snap
+++ b/src/components/Table/DataTable/__snapshots__/TablePlaceholderRow.test.tsx.snap
@@ -5,8 +5,8 @@ exports[`should render correctly 1`] = `
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
-  color: #53595E;
+  border-bottom: 1px solid #D3D4DD;
+  color: #696979;
   font-style: italic;
   text-align: center;
 }
@@ -34,8 +34,8 @@ exports[`should render correctly 2`] = `
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
-  color: #53595E;
+  border-bottom: 1px solid #D3D4DD;
+  color: #696979;
   font-style: italic;
   text-align: center;
 }
diff --git a/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap b/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
index fcf322743..86b2b7872 100644
--- a/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
+++ b/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
@@ -4,24 +4,24 @@ exports[`should render correctly 1`] = `
 .emotion-4 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-13 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-26 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-26 tr:hover td {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-3 {
@@ -39,11 +39,11 @@ exports[`should render correctly 1`] = `
 .emotion-2 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-1 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 .emotion-27 {
@@ -69,7 +69,7 @@ exports[`should render correctly 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   height: 40px;
   border-top: none;
 }
diff --git a/src/components/Table/SortableLabel/__snapshots__/SortableLabel.test.tsx.snap b/src/components/Table/SortableLabel/__snapshots__/SortableLabel.test.tsx.snap
index 3abdb1a81..47e987892 100644
--- a/src/components/Table/SortableLabel/__snapshots__/SortableLabel.test.tsx.snap
+++ b/src/components/Table/SortableLabel/__snapshots__/SortableLabel.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`SortableLabel should render correctly 1`] = `
 .emotion-2 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 <div>
@@ -58,11 +58,11 @@ exports[`SortableLabel should render correctly 2`] = `
 .emotion-2 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-0 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 <div>
@@ -104,11 +104,11 @@ exports[`SortableLabel should render correctly 3`] = `
 .emotion-2 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-1 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 <div>
diff --git a/src/components/Table/Table/__snapshots__/Table.test.tsx.snap b/src/components/Table/Table/__snapshots__/Table.test.tsx.snap
index 7bdd2f097..06beda47f 100644
--- a/src/components/Table/Table/__snapshots__/Table.test.tsx.snap
+++ b/src/components/Table/Table/__snapshots__/Table.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`Table should accept the hovered prop 1`] = `
 .emotion-0 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-10 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-5 {
@@ -29,21 +29,21 @@ exports[`Table should accept the hovered prop 1`] = `
 .emotion-4 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-2 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 .emotion-19 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-19 tr:hover td {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -147,14 +147,14 @@ exports[`Table should accept the style prop 1`] = `
 .emotion-0 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-10 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-5 {
@@ -172,17 +172,17 @@ exports[`Table should accept the style prop 1`] = `
 .emotion-4 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-2 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 .emotion-19 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   color: red;
 }
 
@@ -287,20 +287,20 @@ exports[`Table should render corretly 1`] = `
 .emotion-19 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-10 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-5 {
@@ -318,11 +318,11 @@ exports[`Table should render corretly 1`] = `
 .emotion-4 {
   margin-left: 0.25rem;
   font-size: 1rem;
-  fill: #B9B9BD;
+  fill: #AAAAB9;
 }
 
 .emotion-2 {
-  fill: #0A67D1;
+  fill: #0069D0;
 }
 
 <div>
diff --git a/src/components/Table/Table/__snapshots__/TableBody.test.tsx.snap b/src/components/Table/Table/__snapshots__/TableBody.test.tsx.snap
index 58a953434..2d3f43a4f 100644
--- a/src/components/Table/Table/__snapshots__/TableBody.test.tsx.snap
+++ b/src/components/Table/Table/__snapshots__/TableBody.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`TableBody should accept the style prop 1`] = `
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-2 {
diff --git a/src/components/Table/Table/__snapshots__/TableCell.test.tsx.snap b/src/components/Table/Table/__snapshots__/TableCell.test.tsx.snap
index cfb2d67c3..8a1cf9909 100644
--- a/src/components/Table/Table/__snapshots__/TableCell.test.tsx.snap
+++ b/src/components/Table/Table/__snapshots__/TableCell.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`TableCell should accept the style prop 1`] = `
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   color: red;
 }
 
diff --git a/src/components/Table/Table/__snapshots__/TableHead.test.tsx.snap b/src/components/Table/Table/__snapshots__/TableHead.test.tsx.snap
index 22e92f368..19be47025 100644
--- a/src/components/Table/Table/__snapshots__/TableHead.test.tsx.snap
+++ b/src/components/Table/Table/__snapshots__/TableHead.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`TableHead should accept the style prop 1`] = `
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-2 {
diff --git a/src/components/Table/Table/__snapshots__/TableHeader.test.tsx.snap b/src/components/Table/Table/__snapshots__/TableHeader.test.tsx.snap
index fb936a911..7b5d2c5ba 100644
--- a/src/components/Table/Table/__snapshots__/TableHeader.test.tsx.snap
+++ b/src/components/Table/Table/__snapshots__/TableHeader.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`TableHeader should accept the style prop 1`] = `
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   color: red;
 }
 
diff --git a/src/components/Table/Table/__snapshots__/TableRow.test.tsx.snap b/src/components/Table/Table/__snapshots__/TableRow.test.tsx.snap
index e99a765e4..a8767f7b5 100644
--- a/src/components/Table/Table/__snapshots__/TableRow.test.tsx.snap
+++ b/src/components/Table/Table/__snapshots__/TableRow.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`TableRow should NOT have the pointer class if onClick is not specified
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 <div>
@@ -39,14 +39,14 @@ exports[`TableRow should accept the style prop 1`] = `
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-1 {
@@ -78,14 +78,14 @@ exports[`TableRow should have the pointer class if onClick is specified 1`] = `
 .emotion-3 {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
 }
 
 .emotion-0 {
   text-align: left;
   padding: 0 1rem;
   height: 2.5rem;
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
 }
 
 .emotion-1 {
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index ecc332905..b2c4aa5a5 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   height: 40px;
 }
 
@@ -29,7 +29,7 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-16 {
-  border-left: 1px solid #DCDCE0;
+  border-left: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -83,7 +83,7 @@ exports[`renders correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 .emotion-5 {
@@ -108,7 +108,7 @@ exports[`renders correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   padding: 0 0.25rem;
@@ -131,11 +131,11 @@ exports[`renders correctly 1`] = `
 
 .emotion-5:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-5:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-8 {
@@ -183,7 +183,7 @@ exports[`renders correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -205,11 +205,11 @@ exports[`renders correctly 1`] = `
 
 .emotion-9:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-9:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-11 {
@@ -238,7 +238,7 @@ exports[`renders correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -261,18 +261,18 @@ exports[`renders correctly 1`] = `
 
 .emotion-14:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-14:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-10 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -308,37 +308,37 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-10::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-10::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-10:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-10::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-10:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-10:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-10:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-10:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -476,7 +476,7 @@ exports[`renders without pagination 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   height: 40px;
 }
 
diff --git a/src/components/Tabs/__snapshots__/TabItem.test.tsx.snap b/src/components/Tabs/__snapshots__/TabItem.test.tsx.snap
index c0739bcd5..f7fa96fca 100644
--- a/src/components/Tabs/__snapshots__/TabItem.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/TabItem.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`should accept "component" prop 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -22,16 +22,16 @@ exports[`should accept "component" prop 1`] = `
 
 .emotion-0:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-0:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -47,7 +47,7 @@ exports[`should accept "component" prop 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -56,24 +56,24 @@ exports[`should accept "component" prop 1`] = `
   border: 2px solid transparent;
   -webkit-transition: background .15s,border-color .15s;
   transition: background .15s,border-color .15s;
-  color: #0A67D1;
-  border-bottom-color: #0A67D1;
+  color: #0069D0;
+  border-bottom-color: #0069D0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .emotion-4:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-4:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-4:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -82,7 +82,7 @@ exports[`should accept "component" prop 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -91,21 +91,21 @@ exports[`should accept "component" prop 1`] = `
   border: 2px solid transparent;
   -webkit-transition: background .15s,border-color .15s;
   transition: background .15s,border-color .15s;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-6:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-6:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-6:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -176,7 +176,7 @@ exports[`should accept "style" prop 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -189,16 +189,16 @@ exports[`should accept "style" prop 1`] = `
 
 .emotion-0:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-0:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -231,7 +231,7 @@ exports[`should render correctly 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -244,16 +244,16 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-0:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index 76bf4107f..435a52afe 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -29,16 +29,16 @@ exports[`renders correctly 1`] = `
 
 .emotion-0:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-0:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -47,7 +47,7 @@ exports[`renders correctly 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -56,24 +56,24 @@ exports[`renders correctly 1`] = `
   border: 2px solid transparent;
   -webkit-transition: background .15s,border-color .15s;
   transition: background .15s,border-color .15s;
-  color: #0A67D1;
-  border-bottom-color: #0A67D1;
+  color: #0069D0;
+  border-bottom-color: #0069D0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .emotion-4:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-4:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-4:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -82,7 +82,7 @@ exports[`renders correctly 1`] = `
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
   padding: 0.5rem 0.75rem;
   line-height: 1rem;
@@ -91,21 +91,21 @@ exports[`renders correctly 1`] = `
   border: 2px solid transparent;
   -webkit-transition: background .15s,border-color .15s;
   transition: background .15s,border-color .15s;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-6:not(.disabled):hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-6:not(.disabled):active {
-  background: #F2F2F7;
+  background: #F0F0F5;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.14),inset 0 2px 4px 0 rgba(0,0,0,0.08);
 }
 
 .emotion-6:focus {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
diff --git a/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__snapshots__/Tag.test.tsx.snap
index 9d62d2843..88317c33e 100644
--- a/src/components/Tag/__snapshots__/Tag.test.tsx.snap
+++ b/src/components/Tag/__snapshots__/Tag.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`should accept "icon" prop 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #DCDCE0;
+  background: #D3D4DD;
 }
 
 .emotion-0 {
@@ -69,7 +69,7 @@ exports[`should accept "removable" prop and render remove icon 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #DCDCE0;
+  background: #D3D4DD;
 }
 
 .emotion-0 {
@@ -81,7 +81,7 @@ exports[`should accept "removable" prop and render remove icon 1`] = `
 
 .emotion-0:hover {
   cursor: pointer;
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 <div>
@@ -121,7 +121,7 @@ exports[`should accept the style prop 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #DCDCE0;
+  background: #D3D4DD;
   color: green;
 }
 
@@ -150,7 +150,7 @@ exports[`should render correctly 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #DCDCE0;
+  background: #D3D4DD;
 }
 
 <div>
@@ -178,7 +178,7 @@ exports[`should render correctly 2`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #BF4600;
+  background: #AD5000;
   color: #FFFFFF;
 }
 
@@ -207,7 +207,7 @@ exports[`should render correctly 3`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #D83A2E;
+  background: #D01E29;
   color: #FFFFFF;
 }
 
@@ -236,7 +236,7 @@ exports[`should render correctly 4`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #0A67D1;
+  background: #0069D0;
   color: #FFFFFF;
 }
 
@@ -265,7 +265,7 @@ exports[`should render correctly 5`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
-  background: #097D05;
+  background: #217B00;
   color: #FFFFFF;
 }
 
diff --git a/src/components/Text/__snapshots__/Text.test.tsx.snap b/src/components/Text/__snapshots__/Text.test.tsx.snap
index c90dd3261..ef6a6a760 100644
--- a/src/components/Text/__snapshots__/Text.test.tsx.snap
+++ b/src/components/Text/__snapshots__/Text.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should accept "component" props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 <div>
@@ -22,7 +22,7 @@ exports[`should accept "variant" props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 <div>
@@ -39,7 +39,7 @@ exports[`should accept "variant" props 2`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #53595E;
+  color: #696979;
 }
 
 <div>
@@ -56,7 +56,7 @@ exports[`should accept "variant" props 3`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 <div>
@@ -73,7 +73,7 @@ exports[`should accept "variant" props 4`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #0A67D1;
+  color: #0069D0;
   font-weight: bold;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -93,7 +93,7 @@ exports[`should accept "variant" props 5`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.5rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -111,7 +111,7 @@ exports[`should accept "variant" props 6`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1.25rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -129,7 +129,7 @@ exports[`should accept "variant" props 7`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -147,7 +147,7 @@ exports[`should accept "variant" props 8`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -165,7 +165,7 @@ exports[`should accept "variant" props 9`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -183,7 +183,7 @@ exports[`should accept "variant" props 10`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.75rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -201,7 +201,7 @@ exports[`should accept style prop 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   color: red;
 }
 
@@ -219,7 +219,7 @@ exports[`should accept text style decoration props 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-weight: bold;
 }
 
@@ -237,7 +237,7 @@ exports[`should accept text style decoration props 2`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 2rem;
 }
 
@@ -255,8 +255,8 @@ exports[`should accept text style decoration props 3`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
-  color: #0A67D1;
+  color: #3A3A47;
+  color: #0069D0;
 }
 
 <div>
@@ -273,7 +273,7 @@ exports[`should accept text style decoration props 4`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-style: italic;
 }
 
@@ -291,7 +291,7 @@ exports[`should accept text style decoration props 5`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   -webkit-text-decoration: undeline;
   text-decoration: undeline;
 }
@@ -310,7 +310,7 @@ exports[`should render correctly 1`] = `
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
 }
 
 <div>
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 43972544e..09278c7cc 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`should render correctly 2`] = `
 .emotion-0 {
   border-radius: 2px;
   max-width: 1280px;
-  background: #2D343B;
+  background: #3A3A47;
   color: #FFFFFF;
   font-weight: bold;
   line-height: 1.5;
diff --git a/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap b/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
index 31f8d4327..274032224 100644
--- a/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`should accept style prop 1`] = `
 .emotion-0 {
   border-radius: 2px;
   max-width: 1280px;
-  background: #2D343B;
+  background: #3A3A47;
   color: #FFFFFF;
   font-weight: bold;
   line-height: 1.5;
@@ -26,7 +26,7 @@ exports[`should render the big version when text length is > 60 1`] = `
 .emotion-0 {
   border-radius: 2px;
   max-width: 1280px;
-  background: #2D343B;
+  background: #3A3A47;
   color: #FFFFFF;
   font-weight: bold;
   line-height: 1.5;
@@ -48,7 +48,7 @@ exports[`should render the small version when text length is <= 60 1`] = `
 .emotion-0 {
   border-radius: 2px;
   max-width: 1280px;
-  background: #2D343B;
+  background: #3A3A47;
   color: #FFFFFF;
   font-weight: bold;
   line-height: 1.5;
diff --git a/src/components/form/field/DateField/__snapshots__/DateField.test.tsx.snap b/src/components/form/field/DateField/__snapshots__/DateField.test.tsx.snap
index 88368274a..c6c2bf408 100644
--- a/src/components/form/field/DateField/__snapshots__/DateField.test.tsx.snap
+++ b/src/components/form/field/DateField/__snapshots__/DateField.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`should be rendered correctly 1`] = `
 
 .emotion-4 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -44,9 +44,9 @@ exports[`should be rendered correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -79,37 +79,37 @@ exports[`should be rendered correctly 1`] = `
 }
 
 .emotion-1::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-1:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-1:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -135,7 +135,7 @@ exports[`should be rendered correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -158,11 +158,11 @@ exports[`should be rendered correctly 1`] = `
 
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-3:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-3:focus {
@@ -261,7 +261,7 @@ exports[`should be rendered correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -283,11 +283,11 @@ exports[`should be rendered correctly 1`] = `
 
 .emotion-8:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-8:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-61 {
@@ -311,7 +311,7 @@ exports[`should be rendered correctly 1`] = `
 
 .emotion-27:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-26 {
@@ -319,12 +319,12 @@ exports[`should be rendered correctly 1`] = `
   padding: 0.25rem 0;
   display: inline-block;
   border-radius: 50%;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-26:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
diff --git a/src/components/form/field/MaskedField/__snapshots__/MaskedField.test.tsx.snap b/src/components/form/field/MaskedField/__snapshots__/MaskedField.test.tsx.snap
index c7f94105e..6f627f81f 100644
--- a/src/components/form/field/MaskedField/__snapshots__/MaskedField.test.tsx.snap
+++ b/src/components/form/field/MaskedField/__snapshots__/MaskedField.test.tsx.snap
@@ -14,9 +14,9 @@ exports[`render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -49,37 +49,37 @@ exports[`render correctly 1`] = `
 }
 
 .emotion-1::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-1:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-1:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-1:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -111,7 +111,7 @@ exports[`render correctly 1`] = `
 exports[`render with icon 1`] = `
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -133,9 +133,9 @@ exports[`render with icon 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -168,37 +168,37 @@ exports[`render with icon 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -232,7 +232,7 @@ exports[`render with icon 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -255,11 +255,11 @@ exports[`render with icon 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
diff --git a/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap b/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap
index 7a50adf33..8635b50af 100644
--- a/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap
+++ b/src/components/form/field/MonthField/__snapshots__/MonthField.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`MonthField should render correctly 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,9 +37,9 @@ exports[`MonthField should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -72,37 +72,37 @@ exports[`MonthField should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -128,7 +128,7 @@ exports[`MonthField should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -151,11 +151,11 @@ exports[`MonthField should render correctly 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
@@ -208,7 +208,7 @@ exports[`MonthField should render correctly 1`] = `
   width: 21.25rem;
   height: 13.5rem;
   padding: 1rem;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
   border-radius: 2px;
 }
@@ -271,7 +271,7 @@ exports[`MonthField should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -293,18 +293,18 @@ exports[`MonthField should render correctly 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-7:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-9 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   font-weight: bold;
 }
@@ -361,7 +361,7 @@ exports[`MonthField should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1.375rem;
@@ -386,11 +386,11 @@ exports[`MonthField should render correctly 1`] = `
 
 .emotion-16:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-16:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 <div>
diff --git a/src/components/form/field/NumberField/__snapshots__/NumberField.test.tsx.snap b/src/components/form/field/NumberField/__snapshots__/NumberField.test.tsx.snap
index 6a4726c7d..2ccbc5a08 100644
--- a/src/components/form/field/NumberField/__snapshots__/NumberField.test.tsx.snap
+++ b/src/components/form/field/NumberField/__snapshots__/NumberField.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`Field should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -42,37 +42,37 @@ exports[`Field should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/components/form/field/SelectField/__snapshots__/SelectField.test.tsx.snap b/src/components/form/field/SelectField/__snapshots__/SelectField.test.tsx.snap
index 5a90570be..c1959a44b 100644
--- a/src/components/form/field/SelectField/__snapshots__/SelectField.test.tsx.snap
+++ b/src/components/form/field/SelectField/__snapshots__/SelectField.test.tsx.snap
@@ -29,17 +29,17 @@ exports[`should render correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   outline: 0;
-  color: #53595E;
+  color: #696979;
   padding: 1px 6px;
 }
 
 .emotion-2:hover {
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-5 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -61,9 +61,9 @@ exports[`should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -96,37 +96,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -157,7 +157,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -180,11 +180,11 @@ exports[`should render correctly 1`] = `
 
 .emotion-4:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-4:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-4:focus {
@@ -280,9 +280,9 @@ exports[`should render correctly when multiple 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -327,23 +327,23 @@ exports[`should render correctly when multiple 1`] = `
 }
 
 .emotion-4:hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-4:active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
 .emotion-4:focus-within {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-3 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
-  color: #2D343B;
+  color: #3A3A47;
   line-height: 1rem;
   background: #FFFFFF;
   padding: 0;
@@ -355,24 +355,24 @@ exports[`should render correctly when multiple 1`] = `
 }
 
 .emotion-3::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-3::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-3:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-3::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-3:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0 {
@@ -380,7 +380,7 @@ exports[`should render correctly when multiple 1`] = `
 }
 
 .emotion-1 {
-  background: #F2F2F7;
+  background: #F0F0F5;
   cursor: pointer;
   font-size: 1.25rem;
   display: -webkit-inline-box;
@@ -395,7 +395,7 @@ exports[`should render correctly when multiple 1`] = `
 }
 
 .emotion-1:hover {
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-1 svg {
@@ -403,7 +403,7 @@ exports[`should render correctly when multiple 1`] = `
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 4px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/src/components/form/field/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap b/src/components/form/field/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap
index 90c2c948d..c649bb2ae 100644
--- a/src/components/form/field/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap
+++ b/src/components/form/field/TextAreaField/__snapshots__/TextAreaField.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 .emotion-0 {
-  color: #D83A2E;
+  color: #D01E29;
   margin-left: 0.25rem;
 }
 
@@ -15,9 +15,9 @@ exports[`should render correctly 1`] = `
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -50,37 +50,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-2:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/components/form/field/TextField/__snapshots__/TextField.test.tsx.snap b/src/components/form/field/TextField/__snapshots__/TextField.test.tsx.snap
index dd7d9b0e1..765f41d38 100644
--- a/src/components/form/field/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/src/components/form/field/TextField/__snapshots__/TextField.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`should be rendered correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -42,37 +42,37 @@ exports[`should be rendered correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -103,9 +103,9 @@ exports[`should not include field props on rendered HTML 1`] = `
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -138,42 +138,42 @@ exports[`should not include field props on rendered HTML 1`] = `
 }
 
 .emotion-2::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-2:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-2:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
 .emotion-0 {
-  color: #D83A2E;
+  color: #D01E29;
   margin-left: 0.25rem;
 }
 
diff --git a/src/components/form/finalForm/Field/__snapshots__/Field.test.tsx.snap b/src/components/form/finalForm/Field/__snapshots__/Field.test.tsx.snap
index daac6f801..8af3a3529 100644
--- a/src/components/form/finalForm/Field/__snapshots__/Field.test.tsx.snap
+++ b/src/components/form/finalForm/Field/__snapshots__/Field.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`convert should throw an exception if convert is defined but necessary m
 
 exports[`render should render correctly 1`] = `
 .emotion-0 {
-  color: #D83A2E;
+  color: #D01E29;
   margin-left: 0.25rem;
 }
 
diff --git a/src/components/form/finalForm/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap b/src/components/form/finalForm/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap
index b6b2fa648..6897d6965 100644
--- a/src/components/form/finalForm/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap
+++ b/src/components/form/finalForm/SubmitButton/__snapshots__/SubmitButton.test.tsx.snap
@@ -21,12 +21,12 @@ exports[`should render correctly 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #818489;
+  border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #2D343B;
-  background-color: #0A67D1;
+  color: #3A3A47;
+  background-color: #0069D0;
   color: #FFFFFF;
-  border: 1px solid #0A67D1;
+  border: 1px solid #0069D0;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):hover {
@@ -56,7 +56,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  background-color: #095fc0;
+  background-color: #0061bf;
 }
 
 <div>
diff --git a/src/components/form/input/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/form/input/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 0599b4254..204e9ff15 100644
--- a/src/components/form/input/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/form/input/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Checkbox should render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -27,7 +27,7 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-2 {
-  color: #41484F;
+  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -37,12 +37,12 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0:checked + .emotion-1 {
-  background-color: #0A67D1;
-  border-color: #0A67D1;
+  background-color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-1:after {
@@ -64,12 +64,12 @@ exports[`Checkbox should render correctly 1`] = `
 
 .emotion-0:indeterminate + .emotion-1 {
   background-color: #FFFFFF;
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-0:indeterminate + .emotion-1:after {
   content: "";
-  border-bottom: 2px solid #0A67D1;
+  border-bottom: 2px solid #0069D0;
   position: absolute;
   top: -1px;
   left: 3px;
@@ -81,16 +81,16 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-0:focus + .emotion-1 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F2F2F7;
-  border-color: #F2F2F7;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 <div>
@@ -116,7 +116,7 @@ exports[`Checkbox should render correctly 1`] = `
 exports[`Checkbox should render correctly when disabled 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -128,7 +128,7 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-2 {
-  color: #41484F;
+  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -138,12 +138,12 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0:checked + .emotion-1 {
-  background-color: #0A67D1;
-  border-color: #0A67D1;
+  background-color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-1:after {
@@ -165,12 +165,12 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 
 .emotion-0:indeterminate + .emotion-1 {
   background-color: #FFFFFF;
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-0:indeterminate + .emotion-1:after {
   content: "";
-  border-bottom: 2px solid #0A67D1;
+  border-bottom: 2px solid #0069D0;
   position: absolute;
   top: -1px;
   left: 3px;
@@ -182,16 +182,16 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-0:focus + .emotion-1 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F2F2F7;
-  border-color: #F2F2F7;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-3 {
@@ -243,7 +243,7 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -255,7 +255,7 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-2 {
-  color: #41484F;
+  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -265,12 +265,12 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0:checked + .emotion-1 {
-  background-color: #0A67D1;
-  border-color: #0A67D1;
+  background-color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-1:after {
@@ -292,12 +292,12 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 
 .emotion-0:indeterminate + .emotion-1 {
   background-color: #FFFFFF;
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-0:indeterminate + .emotion-1:after {
   content: "";
-  border-bottom: 2px solid #0A67D1;
+  border-bottom: 2px solid #0069D0;
   position: absolute;
   top: -1px;
   left: 3px;
@@ -309,16 +309,16 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-0:focus + .emotion-1 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F2F2F7;
-  border-color: #F2F2F7;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 <div>
diff --git a/src/components/form/input/DateInput/__snapshots__/DateInput.test.tsx.snap b/src/components/form/input/DateInput/__snapshots__/DateInput.test.tsx.snap
index 4b34e78d8..1067a6b35 100644
--- a/src/components/form/input/DateInput/__snapshots__/DateInput.test.tsx.snap
+++ b/src/components/form/input/DateInput/__snapshots__/DateInput.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -42,37 +42,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/components/form/input/DateInput/__snapshots__/DatePickerInput.test.tsx.snap b/src/components/form/input/DateInput/__snapshots__/DatePickerInput.test.tsx.snap
index b601fb269..dcfbd4005 100644
--- a/src/components/form/input/DateInput/__snapshots__/DatePickerInput.test.tsx.snap
+++ b/src/components/form/input/DateInput/__snapshots__/DatePickerInput.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`DatePickerInput should render correctly 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,9 +37,9 @@ exports[`DatePickerInput should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -72,37 +72,37 @@ exports[`DatePickerInput should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -128,7 +128,7 @@ exports[`DatePickerInput should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -151,11 +151,11 @@ exports[`DatePickerInput should render correctly 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
@@ -254,7 +254,7 @@ exports[`DatePickerInput should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -276,11 +276,11 @@ exports[`DatePickerInput should render correctly 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-7:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-60 {
@@ -304,7 +304,7 @@ exports[`DatePickerInput should render correctly 1`] = `
 
 .emotion-26:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-25 {
@@ -312,12 +312,12 @@ exports[`DatePickerInput should render correctly 1`] = `
   padding: 0.25rem 0;
   display: inline-block;
   border-radius: 50%;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-25:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -926,7 +926,7 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -948,9 +948,9 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -983,37 +983,37 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -1109,7 +1109,7 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -1131,11 +1131,11 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-7:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-60 {
@@ -1159,7 +1159,7 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
 
 .emotion-26:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-25 {
@@ -1167,12 +1167,12 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
   padding: 0.25rem 0;
   display: inline-block;
   border-radius: 50%;
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-25:hover {
   cursor: pointer;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-2 {
@@ -1197,7 +1197,7 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
@@ -1222,11 +1222,11 @@ exports[`DatePickerInput should render correctly when disabled 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
diff --git a/src/components/form/input/MaskedInput/__snapshots__/MaskedInput.test.tsx.snap b/src/components/form/input/MaskedInput/__snapshots__/MaskedInput.test.tsx.snap
index ba6841645..f96a0b662 100644
--- a/src/components/form/input/MaskedInput/__snapshots__/MaskedInput.test.tsx.snap
+++ b/src/components/form/input/MaskedInput/__snapshots__/MaskedInput.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`should accept the style prop 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -43,37 +43,37 @@ exports[`should accept the style prop 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -97,9 +97,9 @@ exports[`should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -132,37 +132,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/components/form/input/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/form/input/Radio/__snapshots__/Radio.test.tsx.snap
index 76a0f4289..861411cdc 100644
--- a/src/components/form/input/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/src/components/form/input/Radio/__snapshots__/Radio.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   border-radius: 100px;
   display: inline-block;
   height: 16px;
@@ -43,7 +43,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  color: #41484F;
+  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -53,12 +53,12 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0:checked + .emotion-1 {
-  background-color: #0A67D1;
-  border-color: #0A67D1;
+  background-color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-1:after {
@@ -66,16 +66,16 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:focus + .emotion-1 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F2F2F7;
-  border-color: #F2F2F7;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 <div>
diff --git a/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenu.test.tsx.snap b/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenu.test.tsx.snap
index ae2d84984..fe0a1eb8d 100644
--- a/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenu.test.tsx.snap
+++ b/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenu.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should render correctly 1`] = `
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
@@ -18,7 +18,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -30,7 +30,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
diff --git a/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap b/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
index 7203b197c..2f9881068 100644
--- a/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
+++ b/src/components/form/input/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`SelectEmptyItem should render correctly 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
   transition: .1s ease;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:last-of-type {
@@ -15,7 +15,7 @@ exports[`SelectEmptyItem should render correctly 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -29,7 +29,7 @@ exports[`SelectEmptyItem should render correctly 1`] = `
 
 exports[`SelectHelperMenuItem should render correctly 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -41,7 +41,7 @@ exports[`SelectHelperMenuItem should render correctly 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -69,12 +69,12 @@ exports[`SelectLoadingItem should render correctly 1`] = `
 }
 
 .emotion-1 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
   transition: .1s ease;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-1:last-of-type {
@@ -82,14 +82,14 @@ exports[`SelectLoadingItem should render correctly 1`] = `
 }
 
 .emotion-1:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0 {
   pointer-events: none;
   font-size: 1rem;
   line-height: 1;
-  color: #0A67D1;
+  color: #0069D0;
   float: right;
 }
 
@@ -119,7 +119,7 @@ exports[`SelectLoadingItem should render correctly 1`] = `
 
 exports[`SelectMenuItem should render correctly 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -131,7 +131,7 @@ exports[`SelectMenuItem should render correctly 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -145,7 +145,7 @@ exports[`SelectMenuItem should render correctly 1`] = `
 
 exports[`SelectMenuItem should render correctly when custom style defined 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -158,7 +158,7 @@ exports[`SelectMenuItem should render correctly when custom style defined 1`] =
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -172,12 +172,12 @@ exports[`SelectMenuItem should render correctly when custom style defined 1`] =
 
 exports[`SelectMenuItem should render correctly when highlighted 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
   transition: .1s ease;
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-0:last-of-type {
@@ -185,7 +185,7 @@ exports[`SelectMenuItem should render correctly when highlighted 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
@@ -199,7 +199,7 @@ exports[`SelectMenuItem should render correctly when highlighted 1`] = `
 
 exports[`SelectMenuItem should render correctly when selected 1`] = `
 .emotion-0 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -211,7 +211,7 @@ exports[`SelectMenuItem should render correctly when selected 1`] = `
 }
 
 .emotion-0:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
diff --git a/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap b/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
index 7eae9355d..bda91a3c5 100644
--- a/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
+++ b/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`should render correctly when closed 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -50,23 +50,23 @@ exports[`should render correctly when closed 1`] = `
 }
 
 .emotion-1:hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-1:active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
 .emotion-1:focus-within {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
-  color: #2D343B;
+  color: #3A3A47;
   line-height: 1rem;
   background: #FFFFFF;
   padding: 0;
@@ -78,24 +78,24 @@ exports[`should render correctly when closed 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-2 {
@@ -133,9 +133,9 @@ exports[`should render correctly when closed 1`] = `
 exports[`should render correctly when opened 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -180,23 +180,23 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-1:hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-1:active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
 .emotion-1:focus-within {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
-  color: #2D343B;
+  color: #3A3A47;
   line-height: 1rem;
   background: #FFFFFF;
   padding: 0;
@@ -208,24 +208,24 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-38 {
@@ -236,7 +236,7 @@ exports[`should render correctly when opened 1`] = `
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
@@ -249,7 +249,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-8 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -261,7 +261,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-8:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 .emotion-7 {
@@ -305,7 +305,7 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-3 {
   background-color: #FFFFFF;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -322,12 +322,12 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2:hover + .emotion-3 {
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-2:checked + .emotion-3 {
-  background-color: #0A67D1;
-  border-color: #0A67D1;
+  background-color: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-2:checked + .emotion-3:after {
@@ -349,12 +349,12 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-2:indeterminate + .emotion-3 {
   background-color: #FFFFFF;
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-2:indeterminate + .emotion-3:after {
   content: "";
-  border-bottom: 2px solid #0A67D1;
+  border-bottom: 2px solid #0069D0;
   position: absolute;
   top: -1px;
   left: 3px;
@@ -366,16 +366,16 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2:focus + .emotion-3 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-2:disabled + .emotion-3 {
-  background-color: #F2F2F7;
-  border-color: #F2F2F7;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
-.emotion-2:disabled + .emotion-3 + .css-23ramq {
-  color: #B9B9BD;
+.emotion-2:disabled + .emotion-3 + .css-tue92x {
+  color: #AAAAB9;
 }
 
 <div>
diff --git a/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMultiItem.test.tsx.snap b/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMultiItem.test.tsx.snap
index 8945f2629..fa8922cfa 100644
--- a/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMultiItem.test.tsx.snap
+++ b/src/components/form/input/Select/SelectMulti/__snapshots__/SelectMultiItem.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
-  background: #F2F2F7;
+  background: #F0F0F5;
   cursor: pointer;
   font-size: 1.25rem;
   display: -webkit-inline-box;
@@ -21,7 +21,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1:hover {
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-1 svg {
@@ -29,7 +29,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 4px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/src/components/form/input/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/form/input/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index d3c6c53f3..3bee5e5de 100644
--- a/src/components/form/input/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/form/input/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`should render correctly when closed 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -33,9 +33,9 @@ exports[`should render correctly when closed 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -68,37 +68,37 @@ exports[`should render correctly when closed 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -124,7 +124,7 @@ exports[`should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -147,11 +147,11 @@ exports[`should render correctly when closed 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
@@ -233,7 +233,7 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -255,9 +255,9 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -290,37 +290,37 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -346,7 +346,7 @@ exports[`should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -369,11 +369,11 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
@@ -393,7 +393,7 @@ exports[`should render correctly when opened 1`] = `
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid #DCDCE0;
+  border: 1px solid #D3D4DD;
   border-radius: 2px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 1px 10px 0 rgba(0,0,0,0.12),0 4px 5px 0 rgba(0,0,0,0.14);
@@ -406,7 +406,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-5 {
-  border-bottom: 1px solid #DCDCE0;
+  border-bottom: 1px solid #D3D4DD;
   cursor: pointer;
   padding: 0.325rem 0.5rem;
   -webkit-transition: .1s ease;
@@ -418,7 +418,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-5:hover {
-  background: #F2F2F7;
+  background: #F0F0F5;
 }
 
 <div>
diff --git a/src/components/form/input/Switch/__snapshots__/Switch.test.tsx.snap b/src/components/form/input/Switch/__snapshots__/Switch.test.tsx.snap
index 2eb5dc297..47f953b8a 100644
--- a/src/components/form/input/Switch/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/form/input/Switch/__snapshots__/Switch.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`should render correctly 1`] = `
 .emotion-2 {
   outline: 0;
-  background: #F2F2F7;
+  background: #F0F0F5;
   border-radius: 0.75rem;
   padding: calc(0.25rem - 1px) 0.25rem;
   display: inline-block;
   width: 3rem;
   line-height: 0;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   -webkit-transition: all .2s;
   transition: all .2s;
 }
@@ -40,7 +40,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-3:hover .emotion-2 {
   cursor: pointer;
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0 {
@@ -50,12 +50,12 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:checked + .emotion-2 {
-  background: #0A67D1;
-  border-color: #0A67D1;
+  background: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-2:hover {
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-2 > .emotion-1 {
@@ -65,7 +65,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:focus + .emotion-2 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-2 {
@@ -96,13 +96,13 @@ exports[`should render correctly 1`] = `
 exports[`should render correctly when disabled 1`] = `
 .emotion-2 {
   outline: 0;
-  background: #F2F2F7;
+  background: #F0F0F5;
   border-radius: 0.75rem;
   padding: calc(0.25rem - 1px) 0.25rem;
   display: inline-block;
   width: 3rem;
   line-height: 0;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   -webkit-transition: all .2s;
   transition: all .2s;
 }
@@ -137,7 +137,7 @@ exports[`should render correctly when disabled 1`] = `
 
 .emotion-4:hover .emotion-2 {
   cursor: pointer;
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0 {
@@ -147,12 +147,12 @@ exports[`should render correctly when disabled 1`] = `
 }
 
 .emotion-0:checked + .emotion-2 {
-  background: #0A67D1;
-  border-color: #0A67D1;
+  background: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-2:hover {
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-2 > .emotion-1 {
@@ -162,7 +162,7 @@ exports[`should render correctly when disabled 1`] = `
 }
 
 .emotion-0:focus + .emotion-2 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-2 {
@@ -199,13 +199,13 @@ exports[`should render correctly when disabled 1`] = `
 exports[`should render correctly with label 1`] = `
 .emotion-2 {
   outline: 0;
-  background: #F2F2F7;
+  background: #F0F0F5;
   border-radius: 0.75rem;
   padding: calc(0.25rem - 1px) 0.25rem;
   display: inline-block;
   width: 3rem;
   line-height: 0;
-  border: 1px solid #B9B9BD;
+  border: 1px solid #AAAAB9;
   -webkit-transition: all .2s;
   transition: all .2s;
 }
@@ -240,7 +240,7 @@ exports[`should render correctly with label 1`] = `
 
 .emotion-4:hover .emotion-2 {
   cursor: pointer;
-  border-color: #53595E;
+  border-color: #696979;
 }
 
 .emotion-0 {
@@ -250,12 +250,12 @@ exports[`should render correctly with label 1`] = `
 }
 
 .emotion-0:checked + .emotion-2 {
-  background: #0A67D1;
-  border-color: #0A67D1;
+  background: #0069D0;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-2:hover {
-  border-color: #0A67D1;
+  border-color: #0069D0;
 }
 
 .emotion-0:checked + .emotion-2 > .emotion-1 {
@@ -265,7 +265,7 @@ exports[`should render correctly with label 1`] = `
 }
 
 .emotion-0:focus + .emotion-2 {
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:disabled + .emotion-2 {
diff --git a/src/components/form/input/TextArea/__snapshots__/TextArea.test.tsx.snap b/src/components/form/input/TextArea/__snapshots__/TextArea.test.tsx.snap
index 62e790f5d..3a1371f79 100644
--- a/src/components/form/input/TextArea/__snapshots__/TextArea.test.tsx.snap
+++ b/src/components/form/input/TextArea/__snapshots__/TextArea.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`should accept style prop 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -39,37 +39,37 @@ exports[`should accept style prop 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -86,9 +86,9 @@ exports[`should accept style prop 1`] = `
 exports[`should render character counter 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -121,37 +121,37 @@ exports[`should render character counter 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -183,9 +183,9 @@ exports[`should render character counter 1`] = `
 exports[`should render character counter 2`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -218,37 +218,37 @@ exports[`should render character counter 2`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -280,9 +280,9 @@ exports[`should render character counter 2`] = `
 exports[`should render correctly 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -315,37 +315,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -365,9 +365,9 @@ exports[`should render correctly 1`] = `
 exports[`should render correctly when disabled 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -400,37 +400,37 @@ exports[`should render correctly when disabled 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -448,9 +448,9 @@ exports[`should render correctly when disabled 1`] = `
 exports[`should render with error status 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -460,7 +460,7 @@ exports[`should render with error status 1`] = `
   transition-property: box-shadow;
   -webkit-transition-duration: .2s;
   transition-duration: .2s;
-  border: solid 1px #D83A2E;
+  border: solid 1px #D01E29;
 }
 
 .emotion-0[type="search"]::-webkit-search-decoration {
@@ -484,43 +484,43 @@ exports[`should render with error status 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
 .emotion-0:not(:disabled):focus {
-  border: solid 1px #DCDCE0;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #D83A2E;
+  border: solid 1px #D3D4DD;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #D01E29;
 }
 
 <div>
diff --git a/src/components/form/input/TextInput/__snapshots__/InputWrapper.test.tsx.snap b/src/components/form/input/TextInput/__snapshots__/InputWrapper.test.tsx.snap
index 0d0c00870..fab2cef83 100644
--- a/src/components/form/input/TextInput/__snapshots__/InputWrapper.test.tsx.snap
+++ b/src/components/form/input/TextInput/__snapshots__/InputWrapper.test.tsx.snap
@@ -29,12 +29,12 @@ exports[`should render correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   outline: 0;
-  color: #53595E;
+  color: #696979;
   padding: 1px 6px;
 }
 
 .emotion-1:hover {
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-0 {
@@ -73,7 +73,7 @@ exports[`should render correctly 1`] = `
 exports[`should render correctly with button 1`] = `
 .emotion-4 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -126,12 +126,12 @@ exports[`should render correctly with button 1`] = `
   -ms-flex-align: center;
   align-items: center;
   outline: 0;
-  color: #53595E;
+  color: #696979;
   padding: 1px 6px;
 }
 
 .emotion-1:hover {
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-3 {
@@ -156,7 +156,7 @@ exports[`should render correctly with button 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -179,11 +179,11 @@ exports[`should render correctly with button 1`] = `
 
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-3:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-3:focus {
@@ -263,12 +263,12 @@ exports[`should render correctly with left position 1`] = `
   -ms-flex-align: center;
   align-items: center;
   outline: 0;
-  color: #53595E;
+  color: #696979;
   padding: 1px 6px;
 }
 
 .emotion-1:hover {
-  color: #D83A2E;
+  color: #D01E29;
 }
 
 .emotion-0 {
@@ -287,7 +287,7 @@ exports[`should render correctly with left position 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -364,7 +364,7 @@ exports[`should render correctly with left position 1`] = `
 exports[`should render correctly without clear icon 1`] = `
 .emotion-1 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -430,7 +430,7 @@ exports[`should render correctly without clear icon 1`] = `
 exports[`should render correctly without clear icon AND left position 1`] = `
 .emotion-1 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/src/components/form/input/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/components/form/input/TextInput/__snapshots__/TextInput.test.tsx.snap
index 0c22f38a3..d678c393b 100644
--- a/src/components/form/input/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/form/input/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`icon should render correctly with icon 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -38,37 +38,37 @@ exports[`icon should render correctly with icon 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
@@ -82,7 +82,7 @@ exports[`icon should render correctly with icon 1`] = `
 
 .emotion-3 {
   position: absolute;
-  background-color: #F2F2F7;
+  background-color: #F0F0F5;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -124,7 +124,7 @@ exports[`icon should render correctly with icon 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #2D343B;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -147,11 +147,11 @@ exports[`icon should render correctly with icon 1`] = `
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0A67D1;
+  box-shadow: 0 0 0 2px #0069D0;
 }
 
 .emotion-2:not(:disabled):hover {
-  background-color: rgba(45,52,59,0.1);
+  background-color: rgba(58,58,71,0.1);
 }
 
 .emotion-2:focus {
@@ -206,9 +206,9 @@ exports[`should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -241,37 +241,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/components/form/input/TextInput/__snapshots__/TextInputBase.test.tsx.snap b/src/components/form/input/TextInput/__snapshots__/TextInputBase.test.tsx.snap
index 4eb688f08..f2434ca56 100644
--- a/src/components/form/input/TextInput/__snapshots__/TextInputBase.test.tsx.snap
+++ b/src/components/form/input/TextInput/__snapshots__/TextInputBase.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`should render correctly 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -38,37 +38,37 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/components/form/input/TimeInput/__snapshots__/TimeInput.test.tsx.snap b/src/components/form/input/TimeInput/__snapshots__/TimeInput.test.tsx.snap
index 5dadef4de..959907533 100644
--- a/src/components/form/input/TimeInput/__snapshots__/TimeInput.test.tsx.snap
+++ b/src/components/form/input/TimeInput/__snapshots__/TimeInput.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`render should render correcly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #B9B9BD;
+  border: solid 1px #AAAAB9;
   border-radius: 2px;
-  color: #2D343B;
+  color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1rem;
@@ -42,37 +42,37 @@ exports[`render should render correcly 1`] = `
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0::placeholder {
-  color: #B9B9BD;
+  color: #AAAAB9;
 }
 
 .emotion-0:disabled {
-  border-color: #DCDCE0;
-  background-color: #F2F2F7;
+  border-color: #D3D4DD;
+  background-color: #F0F0F5;
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #818489;
+  border-color: #8F8FA2;
 }
 
 .emotion-0:not(:disabled):focus {
   outline: none;
-  box-shadow: 0 0 0 2px #F2F2F7,0 0 0 4px #0A67D1;
+  box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
 .emotion-0:not(:disabled):active {
-  border-color: #0A67D1;
+  border-color: #0069D0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
diff --git a/src/styles/global/GlobalCss/__snapshots__/GlobalCss.test.tsx.snap b/src/styles/global/GlobalCss/__snapshots__/GlobalCss.test.tsx.snap
index 659960595..e1f16f1ae 100644
--- a/src/styles/global/GlobalCss/__snapshots__/GlobalCss.test.tsx.snap
+++ b/src/styles/global/GlobalCss/__snapshots__/GlobalCss.test.tsx.snap
@@ -30,13 +30,13 @@ exports[`DefaultGlobalCss should inject default CSS styles from theme 1`] = `
     data-emotion="css-global"
   >
     
-    body{margin:0;color:#2D343B;font-family:"IBM Plex Sans",sans-serif;font-size:0.8125rem;line-height:1.5;overflow-y:scroll;}
+    body{margin:0;color:#3A3A47;font-family:"IBM Plex Sans",sans-serif;font-size:0.8125rem;line-height:1.5;overflow-y:scroll;}
   </style>
   <style
     data-emotion="css-global"
   >
     
-    hr{background-color:#DCDCE0;border:none;height:1px;margin:1rem 0;}
+    hr{background-color:#D3D4DD;border:none;height:1px;margin:1rem 0;}
   </style>
   <style
     data-emotion="css-global"
@@ -84,7 +84,7 @@ exports[`DefaultGlobalCss should inject default CSS styles from theme 1`] = `
     data-emotion="css-global"
   >
     
-    mark{background:#F5DE82;}
+    mark{background:#FCCE74;}
   </style>
 </head>
 `;