diff --git a/.eslintrc b/.eslintrc
index fbc9a3e83..38f0a6b7f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,9 +6,13 @@
     "project": "./.eslint.tsconfig.json"
   },
   "extends": [
+    "plugin:prettier/recommended",
     "curology",
     "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint"
   ],
   "plugins": ["emotion"],
   "globals": {
@@ -54,12 +58,6 @@
       }
     ],
     "no-use-before-define": "off",
-    "object-curly-newline": [
-      "warn",
-      {
-        "ObjectPattern": { "multiline": false }
-      }
-    ],
     "react/jsx-filename-extension": [
       "warn",
       {
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index 3fd6e47f0..e0168323d 100644
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -1,11 +1,9 @@
 module.exports = {
   'src/**/*.{js,ts,tsx}': [
-    'prettier --write',
     'eslint --fix',
     () => 'tsc -p tsconfig.json --noEmit --emitDeclarationOnly false',
   ],
   'stories/**/*.{ts,tsx}': [
-    'prettier --write',
     'eslint --fix',
     () => 'tsc -p stories/tsconfig.json --noEmit',
   ],
diff --git a/.size-snapshot.json b/.size-snapshot.json
index 92bc2a8fd..47a7326f9 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "bundle.js": {
-    "bundled": 900185,
-    "minified": 831422,
-    "gzipped": 95073
+    "bundled": 852635,
+    "minified": 783404,
+    "gzipped": 92446
   },
   "bundle.umd.js": {
-    "bundled": 909593,
-    "minified": 807073,
-    "gzipped": 90840
+    "bundled": 862161,
+    "minified": 759409,
+    "gzipped": 88484
   },
   "shared-components/avatar/index.js": {
     "bundled": 550,
@@ -80,16 +80,16 @@
     }
   },
   "shared-components/typography/index.js": {
-    "bundled": 92303,
-    "minified": 91514,
-    "gzipped": 6077,
+    "bundled": 52997,
+    "minified": 51950,
+    "gzipped": 3536,
     "treeshaked": {
       "rollup": {
-        "code": 2277,
-        "import_statements": 245
+        "code": 2693,
+        "import_statements": 166
       },
       "webpack": {
-        "code": 3622
+        "code": 3924
       }
     }
   },
@@ -444,30 +444,30 @@
     }
   },
   "shared-components/chip/style.js": {
-    "bundled": 7258,
-    "minified": 6800,
-    "gzipped": 2600,
+    "bundled": 7380,
+    "minified": 6895,
+    "gzipped": 2630,
     "treeshaked": {
       "rollup": {
-        "code": 1261,
+        "code": 1300,
         "import_statements": 172
       },
       "webpack": {
-        "code": 2369
+        "code": 2408
       }
     }
   },
   "shared-components/button/style.js": {
-    "bundled": 46132,
-    "minified": 44241,
-    "gzipped": 6957,
+    "bundled": 35974,
+    "minified": 34106,
+    "gzipped": 6775,
     "treeshaked": {
       "rollup": {
-        "code": 4466,
-        "import_statements": 344
+        "code": 4650,
+        "import_statements": 308
       },
       "webpack": {
-        "code": 5941
+        "code": 6092
       }
     }
   },
@@ -514,9 +514,9 @@
     }
   },
   "shared-components/dialogModal/style.js": {
-    "bundled": 15836,
-    "minified": 15611,
-    "gzipped": 3599,
+    "bundled": 15808,
+    "minified": 15583,
+    "gzipped": 3592,
     "treeshaked": {
       "rollup": {
         "code": 1798,
@@ -528,30 +528,30 @@
     }
   },
   "shared-components/progressBar/style.js": {
-    "bundled": 7979,
-    "minified": 7521,
-    "gzipped": 2251,
+    "bundled": 7971,
+    "minified": 7515,
+    "gzipped": 2253,
     "treeshaked": {
       "rollup": {
-        "code": 1496,
+        "code": 1495,
         "import_statements": 258
       },
       "webpack": {
-        "code": 2658
+        "code": 2657
       }
     }
   },
   "shared-components/field/style.js": {
-    "bundled": 34739,
-    "minified": 34053,
-    "gzipped": 4795,
+    "bundled": 35325,
+    "minified": 34582,
+    "gzipped": 4808,
     "treeshaked": {
       "rollup": {
-        "code": 2411,
+        "code": 2492,
         "import_statements": 254
       },
       "webpack": {
-        "code": 3635
+        "code": 3716
       }
     }
   },
@@ -626,16 +626,16 @@
     }
   },
   "shared-components/tabs/style.js": {
-    "bundled": 5190,
-    "minified": 5003,
-    "gzipped": 2364,
+    "bundled": 5300,
+    "minified": 5086,
+    "gzipped": 2391,
     "treeshaked": {
       "rollup": {
-        "code": 1056,
+        "code": 1095,
         "import_statements": 327
       },
       "webpack": {
-        "code": 2289
+        "code": 2328
       }
     }
   },
@@ -654,23 +654,23 @@
     }
   },
   "shared-components/indicator/style.js": {
-    "bundled": 2133,
-    "minified": 2019,
-    "gzipped": 1191,
+    "bundled": 2226,
+    "minified": 2086,
+    "gzipped": 1227,
     "treeshaked": {
       "rollup": {
-        "code": 642,
+        "code": 681,
         "import_statements": 172
       },
       "webpack": {
-        "code": 1748
+        "code": 1787
       }
     }
   },
   "shared-components/loadingSpinner/style.js": {
-    "bundled": 9681,
-    "minified": 9300,
-    "gzipped": 2830,
+    "bundled": 9621,
+    "minified": 9240,
+    "gzipped": 2786,
     "treeshaked": {
       "rollup": {
         "code": 1413,
@@ -710,30 +710,30 @@
     }
   },
   "shared-components/optionButton/style.js": {
-    "bundled": 37578,
-    "minified": 36425,
-    "gzipped": 4774,
+    "bundled": 38541,
+    "minified": 37360,
+    "gzipped": 4891,
     "treeshaked": {
       "rollup": {
-        "code": 2581,
+        "code": 2620,
         "import_statements": 273
       },
       "webpack": {
-        "code": 3782
+        "code": 3821
       }
     }
   },
   "shared-components/verificationMessages/style.js": {
-    "bundled": 4512,
-    "minified": 4316,
-    "gzipped": 1629,
+    "bundled": 4684,
+    "minified": 4468,
+    "gzipped": 1686,
     "treeshaked": {
       "rollup": {
-        "code": 406,
+        "code": 426,
         "import_statements": 125
       },
       "webpack": {
-        "code": 1477
+        "code": 1497
       }
     }
   },
@@ -1004,16 +1004,16 @@
     }
   },
   "shared-components/carousel/arrow/style.js": {
-    "bundled": 4889,
-    "minified": 4571,
-    "gzipped": 1999,
+    "bundled": 5005,
+    "minified": 4677,
+    "gzipped": 2054,
     "treeshaked": {
       "rollup": {
-        "code": 989,
+        "code": 1000,
         "import_statements": 122
       },
       "webpack": {
-        "code": 2081
+        "code": 2092
       }
     }
   },
@@ -1088,23 +1088,23 @@
     }
   },
   "shared-components/accordion/thumbnails/style.js": {
-    "bundled": 11354,
-    "minified": 11104,
-    "gzipped": 2309,
+    "bundled": 11587,
+    "minified": 11311,
+    "gzipped": 2350,
     "treeshaked": {
       "rollup": {
-        "code": 881,
+        "code": 920,
         "import_statements": 147
       },
       "webpack": {
-        "code": 1991
+        "code": 2030
       }
     }
   },
   "shared-components/button/shared-components/loader/style.js": {
-    "bundled": 6770,
-    "minified": 6001,
-    "gzipped": 2699,
+    "bundled": 6674,
+    "minified": 5905,
+    "gzipped": 2574,
     "treeshaked": {
       "rollup": {
         "code": 1710,
@@ -1172,9 +1172,9 @@
     }
   },
   "shared-components/button/components/roundButton/style.js": {
-    "bundled": 28922,
-    "minified": 27237,
-    "gzipped": 5190,
+    "bundled": 28622,
+    "minified": 26937,
+    "gzipped": 5180,
     "treeshaked": {
       "rollup": {
         "code": 630,
@@ -1242,9 +1242,9 @@
     }
   },
   "shared-components/button/components/linkButton/style.js": {
-    "bundled": 1730,
-    "minified": 1481,
-    "gzipped": 892,
+    "bundled": 1753,
+    "minified": 1504,
+    "gzipped": 874,
     "treeshaked": {
       "rollup": {
         "code": 41,
@@ -1298,9 +1298,9 @@
     }
   },
   "shared-components/dropdown/desktopDropdown.js": {
-    "bundled": 9468,
-    "minified": 7851,
-    "gzipped": 3407,
+    "bundled": 9432,
+    "minified": 7815,
+    "gzipped": 3433,
     "treeshaked": {
       "rollup": {
         "code": 250,
@@ -1312,9 +1312,9 @@
     }
   },
   "shared-components/accordion/style.js": {
-    "bundled": 36286,
-    "minified": 35230,
-    "gzipped": 4828,
+    "bundled": 36238,
+    "minified": 35182,
+    "gzipped": 4829,
     "treeshaked": {
       "rollup": {
         "code": 2701,
diff --git a/package.json b/package.json
index d0b339d07..49fbdd85c 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "eslint-plugin-emotion": "10.0.27",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.3.0",
diff --git a/src/constants/fonts/index.ts b/src/constants/fonts/index.ts
index 9c5d98103..301544f61 100644
--- a/src/constants/fonts/index.ts
+++ b/src/constants/fonts/index.ts
@@ -3,6 +3,5 @@ export default {
     "'nocturno', Georgia, TimesNewRoman, 'Times New Roman', Times, Baskerville, serif",
   baseFont:
     "'larssiet', 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, Verdana, sans-serif",
-  monoFont:
-  "'apercu mono', 'Lucida Console', Monaco, monospace",
+  monoFont: "'apercu mono', 'Lucida Console', Monaco, monospace",
 };
diff --git a/src/constants/mediaQueries/index.ts b/src/constants/mediaQueries/index.ts
index 034df781b..64496f80c 100644
--- a/src/constants/mediaQueries/index.ts
+++ b/src/constants/mediaQueries/index.ts
@@ -18,4 +18,6 @@ const mediaQueries = Object.entries(BREAKPOINTS).reduce(
   {} as MediaQueriesType,
 );
 
-export default throwOnUndefinedProperty(mediaQueries) as MediaQueriesType;
+const MEDIA_QUERIES = throwOnUndefinedProperty(mediaQueries);
+
+export default MEDIA_QUERIES;
diff --git a/src/constants/themes/types.ts b/src/constants/themes/types.ts
index 4fa569441..a1a20573d 100644
--- a/src/constants/themes/types.ts
+++ b/src/constants/themes/types.ts
@@ -8,6 +8,8 @@ type BoxShadow =
 
 type Colors = typeof primaryTheme['COLORS'] | typeof secondaryTheme['COLORS'];
 
+export type ThemeColors = valueof<Colors>;
+
 export const COLORS_PROP_TYPES = PropTypes.oneOf([
   ...Object.values(primaryTheme.COLORS),
   ...Object.values(secondaryTheme.COLORS),
diff --git a/src/constants/typography/index.ts b/src/constants/typography/index.ts
index 9b58d7265..d43dcf4d2 100644
--- a/src/constants/typography/index.ts
+++ b/src/constants/typography/index.ts
@@ -7,14 +7,16 @@ const fontSize = throwOnUndefinedProperty({
   body: '1rem', // 16px
   caption: '0.875rem', // 14px
   label: '0.75rem', // 12px
-});
+} as const);
 
 const fontWeight = throwOnUndefinedProperty({
   bold: 'bold',
   normal: 400,
-});
+} as const);
 
-export default throwOnUndefinedProperty({
+const TYPOGRAPHY_CONSTANTS = throwOnUndefinedProperty({
   fontSize,
   fontWeight,
 });
+
+export default TYPOGRAPHY_CONSTANTS;
diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts
index 52fc0cc2d..71582dd77 100644
--- a/src/shared-components/accordion/style.ts
+++ b/src/shared-components/accordion/style.ts
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import {
- ANIMATION, BREAKPOINTS, BOX_SHADOWS, SPACER, 
-} from 'src/constants';
+import { ANIMATION, BREAKPOINTS, BOX_SHADOWS, SPACER } from 'src/constants';
 import { ThemeType } from 'src/constants/themes/types';
 
 export const Content = styled.div`
diff --git a/src/shared-components/accordion/thumbnails/style.ts b/src/shared-components/accordion/thumbnails/style.ts
index 66264b23a..47747f157 100644
--- a/src/shared-components/accordion/thumbnails/style.ts
+++ b/src/shared-components/accordion/thumbnails/style.ts
@@ -39,6 +39,6 @@ export const MultiplesContainer = styled.div`
 `;
 
 export const MultiplesText = styled.div`
-  ${TYPOGRAPHY_STYLE.label};
+  ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)}
   font-size: 10px;
 `;
diff --git a/src/shared-components/button/components/linkButton/index.tsx b/src/shared-components/button/components/linkButton/index.tsx
index 6bc605a56..31120beef 100644
--- a/src/shared-components/button/components/linkButton/index.tsx
+++ b/src/shared-components/button/components/linkButton/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { COLORS_PROP_TYPES, ThemeType } from 'src/constants/themes/types';
+import { COLORS_PROP_TYPES, ThemeColors } from 'src/constants/themes/types';
 import { useTheme } from 'emotion-theming';
 
 import Container from '../../shared-components/container';
@@ -13,7 +13,7 @@ type LinkProps = {
    * Specifies the tag or element to be rendered
    */
   as?: 'a' | React.ElementType;
-  buttonColor?: valueof<ThemeType['COLORS']>;
+  buttonColor?: ThemeColors;
   /**
    * Determines the button's main style theme
    */
@@ -27,7 +27,7 @@ type LinkProps = {
   /**
    * Color that will override existing text, icon, and loading colors for the button (except when disabled is true)
    */
-  textColor?: valueof<ThemeType['COLORS']>;
+  textColor?: ThemeColors;
   [key: string]: unknown;
 };
 
diff --git a/src/shared-components/button/components/linkButton/style.ts b/src/shared-components/button/components/linkButton/style.ts
index 9126e8c2d..78c1dd2c6 100644
--- a/src/shared-components/button/components/linkButton/style.ts
+++ b/src/shared-components/button/components/linkButton/style.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/core';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors, ThemeType } from 'src/constants/themes/types';
 
 import { ButtonType } from '../..';
 import { baseButtonStyles } from '../../style';
@@ -13,8 +13,8 @@ export const linkButtonStyles = ({
 }: {
   disabled: boolean;
   buttonType: ButtonType;
-  buttonColor: valueof<ThemeType['COLORS']>;
-  textColor: valueof<ThemeType['COLORS']>;
+  buttonColor: ThemeColors;
+  textColor: ThemeColors;
   theme: ThemeType;
 }) => css`
   ${baseButtonStyles({
@@ -23,7 +23,13 @@ export const linkButtonStyles = ({
     buttonColor,
     textColor,
     theme,
-  })} span {
-    ${disabled && `color: ${theme.COLORS.textDisabled};`};
+  })}
+
+  ${disabled
+    ? `
+  span {
+    color: ${theme.COLORS.textDisabled};
   }
+  `
+    : ''}
 `;
diff --git a/src/shared-components/button/components/roundButton/index.tsx b/src/shared-components/button/components/roundButton/index.tsx
index 3776702a3..8b7a04f15 100644
--- a/src/shared-components/button/components/roundButton/index.tsx
+++ b/src/shared-components/button/components/roundButton/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { COLORS_PROP_TYPES, ThemeType } from 'src/constants/themes/types';
+import { COLORS_PROP_TYPES, ThemeColors } from 'src/constants/themes/types';
 import { useTheme } from 'emotion-theming';
 
 import Loader from '../../shared-components/loader';
@@ -19,7 +19,7 @@ import {
 } from '../../deprecatedPropsHandler';
 
 type RoundButtonProps = {
-  buttonColor?: valueof<ThemeType['COLORS']>;
+  buttonColor?: ThemeColors;
   /**
    * Determines the button's main style theme
    */
@@ -42,7 +42,7 @@ type RoundButtonProps = {
   /**
    * Color that will override existing text, icon, and loading colors (except when disabled is true)
    */
-  textColor?: valueof<ThemeType['COLORS']>;
+  textColor?: ThemeColors;
   [key: string]: unknown;
 };
 
diff --git a/src/shared-components/button/components/roundButton/style.ts b/src/shared-components/button/components/roundButton/style.ts
index f26b9dcda..2acfa3dcf 100644
--- a/src/shared-components/button/components/roundButton/style.ts
+++ b/src/shared-components/button/components/roundButton/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import tinycolor from 'tinycolor2';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors, ThemeType } from 'src/constants/themes/types';
 
 import { ANIMATION, COLORS } from '../../../../constants';
 import { ButtonBase } from '../../style';
@@ -72,9 +72,7 @@ export const roundButtonLoader = (disabled: boolean) => css`
  * @param  string color   the current color name of the round button (e.g purple, primary, etc.)
  * @return string         hex string of the alternate color (e.g. #efefef)
  */
-const determineAlternateTextColor = (
-  buttonColor: valueof<ThemeType['COLORS']>,
-) => {
+const determineAlternateTextColor = (buttonColor: ThemeColors) => {
   // create a lighter and darker version of the text
   const lighterVersion = tinycolor(buttonColor)
     .lighten(10)
@@ -106,7 +104,7 @@ const determineAlternateTextColor = (
  * @return string             hex string of the text color
  */
 const buttonTextColor = (
-  buttonColor: valueof<ThemeType['COLORS']>,
+  buttonColor: ThemeColors,
   textColor: string,
   theme: ThemeType,
 ) => {
@@ -122,7 +120,7 @@ const buttonTextColor = (
 };
 
 export const roundButtonTextStyles = (
-  buttonColor: valueof<ThemeType['COLORS']>,
+  buttonColor: ThemeColors,
   textColor: string,
   theme: ThemeType,
 ) => css`
diff --git a/src/shared-components/button/index.tsx b/src/shared-components/button/index.tsx
index c2dfd02b5..1297a5620 100644
--- a/src/shared-components/button/index.tsx
+++ b/src/shared-components/button/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from 'emotion-theming';
-import { COLORS_PROP_TYPES, ThemeType } from 'src/constants/themes/types';
+import { COLORS_PROP_TYPES, ThemeColors } from 'src/constants/themes/types';
 
 import Loader from './shared-components/loader';
 import Container from './shared-components/container';
@@ -22,7 +22,7 @@ export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
 export type ButtonTypeWithAction = ButtonType | 'action';
 
 type ButtonProps = {
-  buttonColor?: valueof<ThemeType['COLORS']>;
+  buttonColor?: ThemeColors;
   /**
    * Determines the button's main style theme
    */
@@ -49,7 +49,7 @@ type ButtonProps = {
   /**
    * Color that will override existing text, icon, and loading colors for the button (except when disabled is true)
    */
-  textColor?: valueof<ThemeType['COLORS']>;
+  textColor?: ThemeColors;
   [key: string]: unknown;
 };
 
diff --git a/src/shared-components/button/shared-components/loader/index.tsx b/src/shared-components/button/shared-components/loader/index.tsx
index 100d33e7a..e27a3c623 100644
--- a/src/shared-components/button/shared-components/loader/index.tsx
+++ b/src/shared-components/button/shared-components/loader/index.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors } from 'src/constants/themes/types';
 
 import ButtonLoader from './style';
 import { ButtonTypeWithAction } from '../..';
 
 type LoaderProps = {
-  buttonColor: valueof<ThemeType['COLORS']>;
+  buttonColor: ThemeColors;
   buttonType: ButtonTypeWithAction;
   className?: string;
   disabled: boolean;
   isFullWidth?: boolean;
   isLoading: boolean;
-  textColor: valueof<ThemeType['COLORS']>;
+  textColor: ThemeColors;
 };
 
 const Loader = ({
diff --git a/src/shared-components/button/shared-components/loader/style.ts b/src/shared-components/button/shared-components/loader/style.ts
index 0e273b2bf..af92ebd94 100644
--- a/src/shared-components/button/shared-components/loader/style.ts
+++ b/src/shared-components/button/shared-components/loader/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import tinycolor from 'tinycolor2';
 import { keyframes } from '@emotion/core';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors, ThemeType } from 'src/constants/themes/types';
 
 import { ButtonTypeWithAction } from '../..';
 
@@ -16,28 +16,28 @@ const primaryLoadingStyles = (theme: ThemeType) => `
   background-color: ${theme.COLORS.white};
 `;
 
-const accentLoadingStyles = (buttonColor: valueof<ThemeType['COLORS']>) => `
+const accentLoadingStyles = (buttonColor: ThemeColors) => `
   background-color: ${buttonColor};
 `;
 
-const quaternaryLoadingStyles = (buttonColor: valueof<ThemeType['COLORS']>) => `
+const quaternaryLoadingStyles = (buttonColor: ThemeColors) => `
   background-color: ${tinycolor(buttonColor)
     .lighten(10)
     .desaturate(50)
     .toHexString()};
 `;
 
-const actionLoadingStyles = (buttonColor: valueof<ThemeType['COLORS']>) => `
+const actionLoadingStyles = (buttonColor: ThemeColors) => `
   background-color: ${buttonColor};
 `;
 
 const ButtonLoader = styled.div<{
-  buttonColor: valueof<ThemeType['COLORS']>;
+  buttonColor: ThemeColors;
   buttonType: ButtonTypeWithAction;
   disabled: boolean;
   isFullWidth: boolean;
   isLoading: boolean;
-  textColor: valueof<ThemeType['COLORS']>;
+  textColor: ThemeColors;
 }>`
   display: flex;
   align-items: center;
diff --git a/src/shared-components/button/style.ts b/src/shared-components/button/style.ts
index 5a7ea12df..42a7e0bcc 100644
--- a/src/shared-components/button/style.ts
+++ b/src/shared-components/button/style.ts
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import tinycolor from 'tinycolor2';
-import { ThemeType } from 'src/constants/themes/types';
-import { css } from '@emotion/core';
+import { ThemeColors, ThemeType } from 'src/constants/themes/types';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';
 import { ANIMATION, SPACER, BOX_SHADOWS } from '../../constants';
@@ -9,10 +8,7 @@ import { textColorsAssociatedWithColors } from './constants';
 
 import { ButtonTypeWithAction } from '.';
 
-const primaryStyles = (
-  buttonColor: valueof<ThemeType['COLORS']>,
-  theme: ThemeType,
-) => `
+const primaryStyles = (buttonColor: ThemeColors, theme: ThemeType) => `
   background-color: ${buttonColor};
   border-color: ${buttonColor};
   color: ${theme.COLORS.white};
@@ -30,7 +26,7 @@ const primaryStyles = (
 
 const secondaryStyles = (
   isLoading: boolean,
-  buttonColor: valueof<ThemeType['COLORS']>,
+  buttonColor: ThemeColors,
   theme: ThemeType,
 ) => `
   background-color: transparent;
@@ -48,7 +44,7 @@ const secondaryStyles = (
   }
 `;
 
-const tertiaryStyles = (buttonColor: valueof<ThemeType['COLORS']>) => `
+const tertiaryStyles = (buttonColor: ThemeColors) => `
   border-color: transparent;
   background-color: transparent;
   color: ${buttonColor};
@@ -63,10 +59,7 @@ const tertiaryStyles = (buttonColor: valueof<ThemeType['COLORS']>) => `
   }
 `;
 
-const quaternaryStyles = (
-  buttonColor: valueof<ThemeType['COLORS']>,
-  theme: ThemeType,
-) => `
+const quaternaryStyles = (buttonColor: ThemeColors, theme: ThemeType) => `
   border-color: transparent;
   background-color: transparent;
   color: ${
@@ -96,7 +89,7 @@ const quaternaryStyles = (
 
 const actionStyles = (
   isLoading: boolean,
-  buttonColor: valueof<ThemeType['COLORS']>,
+  buttonColor: ThemeColors,
   theme: ThemeType,
 ) => `
   border-width: 1px;
@@ -137,7 +130,7 @@ function parseTheme(
   disabled: boolean,
   buttonType: ButtonTypeWithAction,
   isLoading: boolean,
-  buttonColor: valueof<ThemeType['COLORS']>,
+  buttonColor: ThemeColors,
   theme: ThemeType,
 ) {
   if (disabled) {
@@ -161,9 +154,9 @@ function parseTheme(
 type BaseButtonStylesTypes = {
   disabled: boolean;
   buttonType: ButtonTypeWithAction;
-  buttonColor: valueof<ThemeType['COLORS']>;
+  buttonColor: ThemeColors;
   isLoading?: boolean;
-  textColor: valueof<ThemeType['COLORS']>;
+  textColor: ThemeColors;
   isFullWidth?: boolean;
   theme: ThemeType;
 };
@@ -176,8 +169,8 @@ export const baseButtonStyles = ({
   textColor,
   isFullWidth,
   theme,
-}: BaseButtonStylesTypes) => css`
-  ${TYPOGRAPHY_STYLE.button};
+}: BaseButtonStylesTypes) => `
+  ${TYPOGRAPHY_STYLE.button(theme)}
   appearance: none;
   border-radius: ${SPACER.xsmall};
   border-style: solid;
@@ -202,30 +195,34 @@ export const baseButtonStyles = ({
     box-shadow: ${BOX_SHADOWS.focus};
   }
 
-  ${parseTheme(disabled, buttonType, !!isLoading, buttonColor, theme)};
-  ${isLoading && loadingStyles};
+  ${parseTheme(disabled, buttonType, !!isLoading, buttonColor, theme)}
+  ${isLoading ? loadingStyles : ''}
 
-  ${!!textColor &&
-  !disabled &&
-  `
+  ${
+    !!textColor && !disabled
+      ? `
     color: ${textColor};
     fill: ${textColor};
-  `}
+  `
+      : ''
+  }
 
-  ${isFullWidth
-    ? `
+  ${
+    isFullWidth
+      ? `
       width: 100%;
     `
-    : `
+      : `
     min-width: 208px;
     max-width: 325px;
     width: max-content;
-    `}
+    `
+  }
 `;
 
-export const ButtonBase = styled.button<Omit<BaseButtonStylesTypes, 'theme'>>(
-  baseButtonStyles,
-);
+export const ButtonBase = styled.button<Omit<BaseButtonStylesTypes, 'theme'>>`
+  ${baseButtonStyles}
+`;
 
 // align-items conditional fixes slight button height misalignment for truthy scenario
 // See screenshot in: https://github.com/PocketDerm/radiance-ui/pull/129#issue-292994081
diff --git a/src/shared-components/callout/index.tsx b/src/shared-components/callout/index.tsx
index c95b9ded2..3a423bd1f 100644
--- a/src/shared-components/callout/index.tsx
+++ b/src/shared-components/callout/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from 'emotion-theming';
-import { COLORS_PROP_TYPES, ThemeType } from 'src/constants/themes/types';
+import { COLORS_PROP_TYPES, ThemeColors } from 'src/constants/themes/types';
 
-import {
-  CalloutContainer, Text, Icon, ParentContainer, 
-} from './style';
+import { CalloutContainer, Text, Icon, ParentContainer } from './style';
 
 type CalloutProps = {
   /**
@@ -15,7 +13,7 @@ type CalloutProps = {
   /**
    * Color of the text and icon
    */
-  color?: valueof<ThemeType['COLORS']>;
+  color?: ThemeColors;
   /**
    * Icon displayed inside the callout right aligned
    */
diff --git a/src/shared-components/carousel/arrow/style.ts b/src/shared-components/carousel/arrow/style.ts
index 3a5b977e2..191a1183c 100644
--- a/src/shared-components/carousel/arrow/style.ts
+++ b/src/shared-components/carousel/arrow/style.ts
@@ -13,10 +13,10 @@ export const ArrowContainer = styled.div<{
   transform: translate(0%, -50%);
   display: block;
 
-  ${({ prev }) => prev && `left: ${SPACER.small};`};
-  ${({ next }) => next && `right: ${SPACER.small};`};
+  ${({ prev }) => (prev ? `left: ${SPACER.small};` : '')}
+  ${({ next }) => (next ? `right: ${SPACER.small};` : '')}
 
-  ${({ disabled }) => disabled && `display: none;`};
+  ${({ disabled }) => (disabled ? `display: none;` : '')}
 `;
 
 export const BottomRightAlignedArrowContainer = styled.div<{
@@ -28,12 +28,12 @@ export const BottomRightAlignedArrowContainer = styled.div<{
   align-self: flex-end;
   margin: ${SPACER.small};
 
-  ${({ prev }) => prev && `order: 2; margin-left: auto;`};
-  ${({ next }) => next && `order: 3;`};
+  ${({ prev }) => (prev ? `order: 2; margin-left: auto;` : '')}
+  ${({ next }) => (next ? `order: 3;` : '')}
 
   ${({ disabled, theme }) =>
-    disabled &&
-    `
+    disabled
+      ? `
       button {
         background-color: none;
         border-color: ${theme.COLORS.primary};
@@ -43,5 +43,6 @@ export const BottomRightAlignedArrowContainer = styled.div<{
           color: ${theme.COLORS.primary};
         }
       }
-    `};
+    `
+      : ''};
 `;
diff --git a/src/shared-components/checkbox/index.tsx b/src/shared-components/checkbox/index.tsx
index f9f82255e..267dfee98 100644
--- a/src/shared-components/checkbox/index.tsx
+++ b/src/shared-components/checkbox/index.tsx
@@ -44,10 +44,10 @@ export const Checkbox = ({
     onClick={
       disabled
         ? (
-          event:
+            event:
               | React.MouseEvent<HTMLDivElement, MouseEvent>
               | React.KeyboardEvent,
-        ) => event.preventDefault()
+          ) => event.preventDefault()
         : onClick
     }
     selector="checkbox"
diff --git a/src/shared-components/chip/style.ts b/src/shared-components/chip/style.ts
index cf3920cf3..5588d8ef2 100644
--- a/src/shared-components/chip/style.ts
+++ b/src/shared-components/chip/style.ts
@@ -7,7 +7,7 @@ import { SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
 import { StatusType } from '.';
 
 export const ChipText = styled.span`
-  ${TYPOGRAPHY_STYLE.label};
+  ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)}
   font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
   position: relative;
   top: 1px;
diff --git a/src/shared-components/dialogModal/style.ts b/src/shared-components/dialogModal/style.ts
index 8b25233bb..1c2564df4 100644
--- a/src/shared-components/dialogModal/style.ts
+++ b/src/shared-components/dialogModal/style.ts
@@ -1,9 +1,7 @@
 import styled from '@emotion/styled';
 
 import Typography from '../typography';
-import {
- MEDIA_QUERIES, SPACER, Z_SCALE, BOX_SHADOWS, 
-} from '../../constants';
+import { MEDIA_QUERIES, SPACER, Z_SCALE, BOX_SHADOWS } from '../../constants';
 
 export const Overlay = styled.div`
   position: fixed;
diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx
index 782a62fec..b204c4f80 100644
--- a/src/shared-components/dropdown/desktopDropdown.tsx
+++ b/src/shared-components/dropdown/desktopDropdown.tsx
@@ -101,9 +101,7 @@ export const DesktopDropdown = ({
           aria-hidden={!isOpen}
         >
           {options.map((option, index) => {
-            const {
-              value: optionValue, disabled, label, ...rest 
-            } = option;
+            const { value: optionValue, disabled, label, ...rest } = option;
 
             const id = optionValue ? `${optionValue}` : `undefined-${index}`;
 
diff --git a/src/shared-components/field/style.ts b/src/shared-components/field/style.ts
index b6933d84c..e1d142325 100644
--- a/src/shared-components/field/style.ts
+++ b/src/shared-components/field/style.ts
@@ -7,7 +7,7 @@ import { BOX_SHADOWS, SPACER, ANIMATION } from '../../constants';
 import { MessagesTypes } from '../verificationMessages';
 
 export const HintItem = styled.div`
-  ${TYPOGRAPHY_STYLE.caption};
+  ${({ theme }) => TYPOGRAPHY_STYLE.caption(theme)}
   transition: all ${ANIMATION.defaultTiming} ease-in-out;
   opacity: 0;
   max-height: 0;
@@ -20,14 +20,14 @@ export const FieldContainer = styled.div`
 `;
 
 export const Label = styled.label<{ disabled: boolean }>`
-  ${TYPOGRAPHY_STYLE.label};
+  ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)}
 
   ${({ disabled, theme }) =>
     disabled ? `color: ${theme.COLORS.primaryTint3};` : ''}
 `;
 
 const inputStyles = (theme: ThemeType) => css`
-  ${TYPOGRAPHY_STYLE.body};
+  ${TYPOGRAPHY_STYLE.body(theme)}
   appearance: none;
   background: ${theme.COLORS.white};
   border: 1px solid ${theme.COLORS.border};
diff --git a/src/shared-components/indicator/style.ts b/src/shared-components/indicator/style.ts
index 95a9d4f9c..bca3d8cc1 100644
--- a/src/shared-components/indicator/style.ts
+++ b/src/shared-components/indicator/style.ts
@@ -21,7 +21,7 @@ export const IndicatorContainer = styled.div`
   > div {
     position: relative;
     top: 1px;
-    ${TYPOGRAPHY_STYLE.label};
+    ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)}
     font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
     color: ${({ theme }) => theme.COLORS.white};
   }
diff --git a/src/shared-components/loadingSpinner/index.tsx b/src/shared-components/loadingSpinner/index.tsx
index b8f58abdc..960b86bac 100644
--- a/src/shared-components/loadingSpinner/index.tsx
+++ b/src/shared-components/loadingSpinner/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors } from 'src/constants/themes/types';
 import { useTheme } from 'emotion-theming';
 
 import { LoadingSpinnerContainer, Overlay, Dot } from './style';
@@ -9,11 +9,11 @@ type LoadingSpinnerProps = {
   /**
    * Background color of loading container
    */
-  bgColor?: valueof<ThemeType['COLORS']>;
+  bgColor?: ThemeColors;
   /**
    * Color of the loading dots
    */
-  color?: valueof<ThemeType['COLORS']>;
+  color?: ThemeColors;
   /**
    * Length of time for animation loop
    */
@@ -31,11 +31,13 @@ type LoadingSpinnerProps = {
 /**
  * LoadingSpinner will cover the entirety of the container that holds it. The container should have `position: relative;` as part of its styling to prevent the LoadingSpinner from spilling outside the container.
  */
-export const LoadingSpinner = ({bgColor,
+export const LoadingSpinner = ({
+  bgColor,
   color,
   duration = 2,
   size = '14px',
-  translateX = '100px'}: LoadingSpinnerProps) => {
+  translateX = '100px',
+}: LoadingSpinnerProps) => {
   const theme = useTheme();
 
   const bgColorWithTheme = bgColor || theme.COLORS.background;
diff --git a/src/shared-components/loadingSpinner/style.ts b/src/shared-components/loadingSpinner/style.ts
index 35945431b..c3e653a6f 100644
--- a/src/shared-components/loadingSpinner/style.ts
+++ b/src/shared-components/loadingSpinner/style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors } from 'src/constants/themes/types';
 
 const appPreloader = (translateX: string) => keyframes`
   0% { opacity: 0; transform: translate3d(${translateX}, 0, 0) }
@@ -31,7 +31,7 @@ export const Overlay = styled.div`
 `;
 
 export const Dot = styled.span<{
-  dotColor: valueof<ThemeType['COLORS']>;
+  dotColor: ThemeColors;
   translateX: string;
   duration: number;
   dotSize: string;
diff --git a/src/shared-components/optionButton/style.ts b/src/shared-components/optionButton/style.ts
index 94ab1cee1..834c95bd5 100644
--- a/src/shared-components/optionButton/style.ts
+++ b/src/shared-components/optionButton/style.ts
@@ -51,10 +51,12 @@ export const FlexContainer = styled.div`
   align-items: center;
 `;
 
-const getBaseIconWrapperStyles = ({buttonType,
+const getBaseIconWrapperStyles = ({
+  buttonType,
   optionType,
   selected,
-  theme}: BaseIconWrapperStylesProps) => `
+  theme,
+}: BaseIconWrapperStylesProps) => `
   border: 1px solid;
   border-color: ${theme.COLORS.primary};
   background: ${theme.COLORS.white};
@@ -94,14 +96,24 @@ export const CheckmarkWrapper = styled.div<
   Omit<BaseIconWrapperStylesProps, 'theme'>
 >`
   ${({ buttonType, optionType, selected, theme }) =>
-    getBaseIconWrapperStyles({ buttonType, optionType, selected, theme })}
+    getBaseIconWrapperStyles({
+      buttonType,
+      optionType,
+      selected,
+      theme,
+    })}
 `;
 
 export const IconWrapper = styled.div<
   Omit<BaseIconWrapperStylesProps, 'theme'>
 >`
   ${({ buttonType, optionType, selected, theme }) =>
-    getBaseIconWrapperStyles({ buttonType, optionType, selected, theme })}
+    getBaseIconWrapperStyles({
+      buttonType,
+      optionType,
+      selected,
+      theme,
+    })}
   width: 48px;
   height: 48px;
 
@@ -131,6 +143,6 @@ export const Text = styled.div`
 `;
 
 export const SubText = styled.div`
-  ${TYPOGRAPHY_STYLE.caption};
+  ${({ theme }) => TYPOGRAPHY_STYLE.caption(theme)}
   line-height: 1.5;
 `;
diff --git a/src/shared-components/progressBar/index.tsx b/src/shared-components/progressBar/index.tsx
index c9fbc6d87..13ca2277b 100644
--- a/src/shared-components/progressBar/index.tsx
+++ b/src/shared-components/progressBar/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from 'emotion-theming';
-import { ThemeType } from 'src/constants/themes/types';
+import { ThemeColors } from 'src/constants/themes/types';
 
 import { PROGRESS_BAR_STATUS } from '../../constants';
 import { OuterContainer, InnerBar } from './style';
@@ -9,8 +9,8 @@ import { OuterContainer, InnerBar } from './style';
 export type ProgressBarStatusType = valueof<typeof PROGRESS_BAR_STATUS>;
 
 type ProgressBarProps = {
-  backgroundColor?: valueof<ThemeType['COLORS']>;
-  barColor?: valueof<ThemeType['COLORS']>;
+  backgroundColor?: ThemeColors;
+  barColor?: ThemeColors;
   /**
    * The bar height
    */
diff --git a/src/shared-components/progressBar/style.ts b/src/shared-components/progressBar/style.ts
index 779b6a633..d5e138b77 100644
--- a/src/shared-components/progressBar/style.ts
+++ b/src/shared-components/progressBar/style.ts
@@ -66,5 +66,5 @@ export const InnerBar = styled.div<{
   transform: translateX(-5%);
   transition: transform ${ANIMATION.defaultTiming} ease-in-out;
 
-  ${({ status, theme }) => getStatusStyles(status, theme)};
+  ${({ status, theme }) => getStatusStyles(status, theme)}
 `;
diff --git a/src/shared-components/tabs/style.ts b/src/shared-components/tabs/style.ts
index 690fde8b8..32b48967e 100644
--- a/src/shared-components/tabs/style.ts
+++ b/src/shared-components/tabs/style.ts
@@ -2,9 +2,7 @@ import styled from '@emotion/styled';
 import { buttonReset } from 'src/utils/styles/buttonReset';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';
-import {
- BOX_SHADOWS, SPACER, ANIMATION, MEDIA_QUERIES, 
-} from '../../constants';
+import { BOX_SHADOWS, SPACER, ANIMATION, MEDIA_QUERIES } from '../../constants';
 
 export const TabsContainer = styled.div`
   display: flex;
@@ -23,7 +21,7 @@ export const TabsContainer = styled.div`
 
 export const TabItem = styled.button<{ active: boolean }>`
   ${buttonReset}
-  ${TYPOGRAPHY_STYLE.button};
+  ${({ theme }) => TYPOGRAPHY_STYLE.button(theme)}
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/shared-components/typography/index.ts b/src/shared-components/typography/index.ts
index 7d974320e..2aa09962c 100644
--- a/src/shared-components/typography/index.ts
+++ b/src/shared-components/typography/index.ts
@@ -1,71 +1,71 @@
-import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import round from 'lodash.round';
+import { ThemeType } from 'src/constants/themes/types';
 
 import { withDeprecationWarning } from '../../utils';
-import { COLORS, TYPOGRAPHY_CONSTANTS } from '../../constants';
+import { TYPOGRAPHY_CONSTANTS } from '../../constants';
 
-const displayStyle = css`
-  color: ${COLORS.primary};
+const displayStyle = (theme: ThemeType) => `
+  color: ${theme.COLORS.primary};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.display};
   font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
   line-height: ${round(48 / 36, 2)};
 `;
 
-const headingStyle = css`
-  color: ${COLORS.primary};
+const headingStyle = (theme: ThemeType) => `
+  color: ${theme.COLORS.primary};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.heading};
   font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
   line-height: ${round(40 / 24, 2)};
 `;
 
-const titleStyle = css`
-  color: ${COLORS.primary};
+const titleStyle = (theme: ThemeType) => `
+  color: ${theme.COLORS.primary};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.title};
   line-height: ${round(32 / 20, 2)};
   font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
 `;
 
-export const baseBodyStyles = `
-  color: ${COLORS.primaryTint1};
+export const baseBodyStyles = (theme: ThemeType) => `
+  color: ${theme.COLORS.primaryTint1};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.body};
   line-height: ${round(28 / 16, 2)};
 `;
 
-const bodyStyle = css`
-  ${baseBodyStyles};
+const bodyStyle = (theme: ThemeType) => `
+  ${baseBodyStyles(theme)}
 `;
 
-const captionStyle = css`
-  color: ${COLORS.primaryTint2};
+const captionStyle = (theme: ThemeType) => `
+  color: ${theme.COLORS.primaryTint2};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption};
   line-height: ${round(24 / 14, 2)};
 `;
 
-const errorStyle = css`
-  ${captionStyle};
-  color: ${COLORS.error};
+const errorStyle = (theme: ThemeType) => `
+  ${captionStyle(theme)}
+  color: ${theme.COLORS.error};
 `;
 
-const successStyle = css`
-  ${captionStyle};
-  color: ${COLORS.success};
+const successStyle = (theme: ThemeType) => `
+  ${captionStyle(theme)}
+  color: ${theme.COLORS.success};
 `;
 
-const labelStyle = css`
-  color: ${COLORS.primaryTint1};
+const labelStyle = (theme: ThemeType) => `
+  color: ${theme.COLORS.primaryTint1};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.label};
   line-height: ${round(20 / 12, 2)};
 `;
 
-const buttonStyle = css`
-  ${labelStyle};
+const buttonStyle = (theme: ThemeType) => `
+  ${labelStyle(theme)}
   font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
   letter-spacing: 1px;
   text-transform: uppercase;
 `;
 
-const linkStyle = css`
+const linkStyle = () => `
   border-bottom: 1px solid currentColor;
   cursor: pointer;
   text-decoration: none;
@@ -93,15 +93,33 @@ export const style = {
   link: linkStyle,
 } as const;
 
-const Button = styled.span(buttonStyle);
-const Caption = styled.p(captionStyle);
-const Display = styled.h1(displayStyle);
-const ErrorComponent = styled.p(errorStyle);
-const Heading = styled.h2(headingStyle);
-const Label = styled.label(labelStyle);
-const Link = styled.a(linkStyle);
-const Success = styled.p(successStyle);
-const Title = styled.h3(titleStyle);
+const Button = styled.span`
+  ${({ theme }) => buttonStyle(theme)}
+`;
+const Caption = styled.p`
+  ${({ theme }) => captionStyle(theme)}
+`;
+const Display = styled.h1`
+  ${({ theme }) => displayStyle(theme)}
+`;
+const ErrorComponent = styled.p`
+  ${({ theme }) => errorStyle(theme)}
+`;
+const Heading = styled.h2`
+  ${({ theme }) => headingStyle(theme)}
+`;
+const Label = styled.label`
+  ${({ theme }) => labelStyle(theme)}
+`;
+const Link = styled.a`
+  ${linkStyle()}
+`;
+const Success = styled.p`
+  ${({ theme }) => successStyle(theme)}
+`;
+const Title = styled.h3`
+  ${({ theme }) => titleStyle(theme)}
+`;
 
 export const Typography = {
   Button,
diff --git a/src/shared-components/verificationMessages/index.tsx b/src/shared-components/verificationMessages/index.tsx
index 71f118ef7..8229cd7cb 100644
--- a/src/shared-components/verificationMessages/index.tsx
+++ b/src/shared-components/verificationMessages/index.tsx
@@ -17,9 +17,7 @@ type VerificationMessagesProps = {
   /**
    * Object of key and React Node message pair. It also accepts an array of React Node as value
    */
-  messages?: {
-    [key: string]: MessageType;
-  };
+  messages?: Record<string, MessageType>;
   type?: MessagesTypes;
 };
 
diff --git a/src/shared-components/verificationMessages/style.ts b/src/shared-components/verificationMessages/style.ts
index 5fa9ed5be..4630fa789 100644
--- a/src/shared-components/verificationMessages/style.ts
+++ b/src/shared-components/verificationMessages/style.ts
@@ -19,8 +19,10 @@ export const MessageItem = styled.li<{ type: MessagesTypes }>`
     margin: 0 0 ${SPACER.x2small} 0;
   }
 
-  ${({ type }) =>
-    type === 'success' ? TYPOGRAPHY_STYLE.success : TYPOGRAPHY_STYLE.error};
+  ${({ theme, type }) =>
+    type === 'success'
+      ? TYPOGRAPHY_STYLE.success(theme)
+      : TYPOGRAPHY_STYLE.error(theme)}
 
   line-height: 24px;
 `;
diff --git a/src/shared-components/verificationMessages/test.tsx b/src/shared-components/verificationMessages/test.tsx
index 137a10aea..a968f3cbe 100644
--- a/src/shared-components/verificationMessages/test.tsx
+++ b/src/shared-components/verificationMessages/test.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { VerificationMessages } from './index';
 
 describe('<VerificationMessages />', () => {
+  const DecoratedVerificationMessages = decorateWithThemeProvider(
+    VerificationMessages,
+  );
+
   describe('UI snapshot', () => {
     it('renders with default props and some messages', () => {
       const messages = {
@@ -30,7 +35,7 @@ describe('<VerificationMessages />', () => {
       };
 
       const component = renderer.create(
-        <VerificationMessages messages={messages} />,
+        <DecoratedVerificationMessages messages={messages} />,
       );
 
       const tree = component.toJSON();
@@ -47,7 +52,11 @@ describe('<VerificationMessages />', () => {
       };
 
       const component = renderer.create(
-        <VerificationMessages messages={messages} centered type="success" />,
+        <DecoratedVerificationMessages
+          messages={messages}
+          centered
+          type="success"
+        />,
       );
 
       const tree = component.toJSON();
@@ -60,7 +69,9 @@ describe('<VerificationMessages />', () => {
       const messages = {
         required: [],
       };
-      const wrapper = shallow(<VerificationMessages messages={messages} />);
+      const wrapper = shallow(
+        <DecoratedVerificationMessages messages={messages} />,
+      );
       expect(wrapper.html().indexOf('li') === -1).toBe(true);
     });
   });
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c801d903f..6418dd919 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,4 @@
 export * from './colors';
-export {
-  default as throwOnUndefinedProperty,
-} from './throwOnUndefinedProperty';
+export { default as throwOnUndefinedProperty } from './throwOnUndefinedProperty';
 export { default as withDeprecationWarning } from './withDeprecationWarning';
 export { default as isObject } from './isObject';
diff --git a/src/utils/injectGlobalStyles/style.ts b/src/utils/injectGlobalStyles/style.ts
index f5f5d6783..467d8139d 100644
--- a/src/utils/injectGlobalStyles/style.ts
+++ b/src/utils/injectGlobalStyles/style.ts
@@ -214,7 +214,7 @@ export const brandStyles = (theme: ThemeType) => `
   body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    ${baseBodyStyles};
+    ${baseBodyStyles(theme)}
     background-color: ${theme.COLORS.white};
     font-family: ${FONTS.baseFont};
     font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.normal};
diff --git a/src/utils/withDeprecationWarning/test.ts b/src/utils/withDeprecationWarning/test.ts
index b246447af..dea041f2a 100644
--- a/src/utils/withDeprecationWarning/test.ts
+++ b/src/utils/withDeprecationWarning/test.ts
@@ -38,7 +38,7 @@ describe('property that is in deprecatedProperties', () => {
     subject.deprecated;
 
     expect(warn).toHaveBeenCalledWith(
-      `[Deprecation Warning]: ${deprecatedMessage}`
+      `[Deprecation Warning]: ${deprecatedMessage}`,
     );
     warn.mockRestore();
   });
diff --git a/stories/button/index.stories.tsx b/stories/button/index.stories.tsx
index 945e19b46..66a518cc7 100644
--- a/stories/button/index.stories.tsx
+++ b/stories/button/index.stories.tsx
@@ -13,6 +13,7 @@ import { Button } from 'src/shared-components';
 import { COLORS } from 'src/constants';
 import { CheckmarkIcon } from 'src/svgs/icons';
 import type { Meta } from '@storybook/react';
+import { ThemeColors } from 'src/constants/themes/types';
 
 const noop = () => undefined;
 
@@ -166,11 +167,11 @@ export const WithControls = () => (
         ['primary', 'secondary', 'tertiary', 'quaternary'],
         'primary',
       )}
-      buttonColor={select('buttonColor', COLORS, COLORS.primary)}
+      buttonColor={select('buttonColor', COLORS, COLORS.primary) as ThemeColors}
       isLoading={boolean('isLoading', false)}
       disabled={boolean('disabled', false)}
       onClick={action('button clicked')}
-      textColor={text('textColor', '')}
+      textColor={text('textColor', '') as ThemeColors}
     >
       {text('children', 'Click me!')}
     </Button>
diff --git a/stories/button/linkButton/index.stories.tsx b/stories/button/linkButton/index.stories.tsx
index b79e03efc..9dd5d29c8 100644
--- a/stories/button/linkButton/index.stories.tsx
+++ b/stories/button/linkButton/index.stories.tsx
@@ -12,6 +12,7 @@ import { action } from '@storybook/addon-actions';
 import { LinkButton } from 'src/shared-components';
 import { COLORS } from 'src/constants';
 import type { Meta } from '@storybook/react';
+import { ThemeColors } from 'src/constants/themes/types';
 
 export const Default = () => (
   <LinkButton.Container>
@@ -78,10 +79,10 @@ export const WithControls = () => (
         ['primary', 'secondary', 'tertiary', 'quaternary'],
         'primary',
       )}
-      buttonColor={select('buttonColor', COLORS, COLORS.primary)}
+      buttonColor={select('buttonColor', COLORS, COLORS.primary) as ThemeColors}
       disabled={boolean('disabled', false)}
       onClick={action('You clicked a button')}
-      textColor={text('textColor', '')}
+      textColor={text('textColor', '') as ThemeColors}
     >
       {text('children', 'Click it!')}
     </LinkButton>
diff --git a/stories/button/roundButton/index.stories.tsx b/stories/button/roundButton/index.stories.tsx
index 42ccae7bb..eea538800 100644
--- a/stories/button/roundButton/index.stories.tsx
+++ b/stories/button/roundButton/index.stories.tsx
@@ -19,6 +19,7 @@ import {
   ArrowLeftIcon,
   CrossIcon,
 } from 'src/svgs/icons';
+import { ThemeColors } from 'src/constants/themes/types';
 
 const ButtonsContainer = styled.div`
   display: flex;
@@ -137,12 +138,12 @@ export const WithControls = () => (
         ['primary', 'secondary', 'tertiary', 'quaternary', 'action'],
         'primary',
       )}
-      buttonColor={select('buttonColor', COLORS, COLORS.primary)}
+      buttonColor={select('buttonColor', COLORS, COLORS.primary) as ThemeColors}
       isLoading={boolean('isLoading', false)}
       disabled={boolean('disabled', false)}
       onClick={action('button clicked')}
       icon={<CheckmarkIcon />}
-      textColor={text('textColor', '')}
+      textColor={text('textColor', '') as ThemeColors}
     >
       {text('children', 'Click me!')}
     </RoundButton>
diff --git a/stories/dialogModal/index.stories.tsx b/stories/dialogModal/index.stories.tsx
index bd1274f69..a651f45c1 100644
--- a/stories/dialogModal/index.stories.tsx
+++ b/stories/dialogModal/index.stories.tsx
@@ -12,7 +12,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import type { Meta } from '@storybook/react';
 import { ANIMATION } from 'src/constants';
-import { modalStoryDecoratorForChromatic } from 'stories/util';
+import { modalStoryDecoratorForChromatic } from 'stories/utils';
 
 const DIALOG_MODAL_STORY_ID_PREFIX = 'components-dialogmodal--';
 
diff --git a/stories/immersiveModal/index.stories.tsx b/stories/immersiveModal/index.stories.tsx
index 68d98c0bd..53b607138 100644
--- a/stories/immersiveModal/index.stories.tsx
+++ b/stories/immersiveModal/index.stories.tsx
@@ -12,7 +12,7 @@ import {
 import { Button, ImmersiveModal } from 'src/shared-components';
 import type { Meta } from '@storybook/react';
 import { ANIMATION } from 'src/constants';
-import { modalStoryDecoratorForChromatic } from 'stories/util';
+import { modalStoryDecoratorForChromatic } from 'stories/utils';
 
 import headerImage from './headerImage.jpg';
 
diff --git a/stories/loadingSpinner/index.stories.tsx b/stories/loadingSpinner/index.stories.tsx
index a3b758309..b29fe6efd 100644
--- a/stories/loadingSpinner/index.stories.tsx
+++ b/stories/loadingSpinner/index.stories.tsx
@@ -12,6 +12,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { Meta } from '@storybook/react';
+import { ThemeColors } from 'src/constants/themes/types';
 
 const SpinnerContainer = styled.div`
   position: relative;
@@ -43,8 +44,8 @@ export const WithDuration = () => (
 export const WithControls = () => (
   <SpinnerContainer>
     <LoadingSpinner
-      bgColor={text('bgColor', COLORS.background)}
-      color={text('color', COLORS.primary)}
+      bgColor={text('bgColor', COLORS.background) as ThemeColors}
+      color={text('color', COLORS.primary) as ThemeColors}
       translateX={text('translateX', '100px')}
       duration={number('duration', 2)}
       size={text('size', '14px')}
diff --git a/stories/progressBar/index.stories.tsx b/stories/progressBar/index.stories.tsx
index 1d3a6a96c..f9bffc22b 100644
--- a/stories/progressBar/index.stories.tsx
+++ b/stories/progressBar/index.stories.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  text, select, number, color, 
-} from '@storybook/addon-knobs';
+import { text, select, number, color } from '@storybook/addon-knobs';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ProgressBar } from 'src/shared-components';
@@ -15,6 +13,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { Meta } from '@storybook/react';
+import { ThemeColors } from 'src/constants/themes/types';
 
 const BarContainer = styled.div`
   position: relative;
@@ -59,8 +58,10 @@ export const WithCustomStyles = () => {
 export const WithControls = () => (
   <BarContainer>
     <ProgressBar
-      backgroundColor={color('backgroundColor', COLORS.background)}
-      barColor={color('barColor', COLORS.primary)}
+      backgroundColor={
+        color('backgroundColor', COLORS.background) as ThemeColors
+      }
+      barColor={color('barColor', COLORS.primary) as ThemeColors}
       loadingTime={text('loadingTime', '20s')}
       height={number('height', 4)}
       status={select(
diff --git a/stories/tooltip/index.stories.tsx b/stories/tooltip/index.stories.tsx
index e520f7b45..a6df25a9d 100644
--- a/stories/tooltip/index.stories.tsx
+++ b/stories/tooltip/index.stories.tsx
@@ -7,9 +7,7 @@ import {
   Title,
   Stories,
 } from '@storybook/addon-docs/blocks';
-import {
-  text, select, number, boolean, 
-} from '@storybook/addon-knobs';
+import { text, select, number, boolean } from '@storybook/addon-knobs';
 import styled from '@emotion/styled';
 import { Tooltip } from 'src/shared-components';
 import { SPACER, COLORS } from 'src/constants';
diff --git a/stories/tsconfig.json b/stories/tsconfig.json
index fc6a65718..708412db7 100644
--- a/stories/tsconfig.json
+++ b/stories/tsconfig.json
@@ -4,5 +4,15 @@
     "baseUrl": "../",
     "noEmit": true
   },
-  "include": ["*.js", "*.ts", "*.tsx", "../types/**/*.ts"]
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.js",
+    "../src/**/*.tsx",
+    "../stories/**/*.ts",
+    "../stories/**/*.js",
+    "../stories/**/*.tsx",
+    "../tests/**/*.ts",
+    "../tests/**/*.tsx",
+    "../types/**/*.ts"
+  ]
 }
diff --git a/stories/typography/index.stories.tsx b/stories/typography/index.stories.tsx
index 6dabce707..c61d26bca 100644
--- a/stories/typography/index.stories.tsx
+++ b/stories/typography/index.stories.tsx
@@ -27,7 +27,7 @@ export const Usage = () => (
   </React.Fragment>
 );
 
-const sourceCode = `<Typography.Display css={emotionSerializedStyleValue}>Override!</Typography.Display>`;
+const sourceCode = `<Typography.Display css={(theme) => emotionSerializedStyleValueWithTheme(theme)}>Override!</Typography.Display>`;
 
 export default {
   title: 'Components/Typography',
diff --git a/stories/typography_style/index.stories.tsx b/stories/typography_style/index.stories.tsx
index a48d31506..c31873d79 100644
--- a/stories/typography_style/index.stories.tsx
+++ b/stories/typography_style/index.stories.tsx
@@ -12,18 +12,18 @@ import { BREAKPOINTS } from 'src/constants';
 
 export const Usage = () => (
   <React.Fragment>
-    <div css={TYPOGRAPHY_STYLE.display}>display</div>
-    <div css={TYPOGRAPHY_STYLE.heading}>heading</div>
-    <div css={TYPOGRAPHY_STYLE.title}>title</div>
-    <div css={TYPOGRAPHY_STYLE.body}>body</div>
-    <div css={TYPOGRAPHY_STYLE.caption}>caption</div>
-    <div css={TYPOGRAPHY_STYLE.label}>label</div>
-    <div css={TYPOGRAPHY_STYLE.error}>error</div>
-    <div css={TYPOGRAPHY_STYLE.success}>success</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.display(theme)}>display</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.heading(theme)}>heading</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.title(theme)}>title</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.body(theme)}>body</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.caption(theme)}>caption</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.label(theme)}>label</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.error(theme)}>error</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.success(theme)}>success</div>
     <div>
       <span css={TYPOGRAPHY_STYLE.link}>link</span>
     </div>
-    <div css={TYPOGRAPHY_STYLE.button}>button</div>
+    <div css={(theme) => TYPOGRAPHY_STYLE.button(theme)}>button</div>
   </React.Fragment>
 );
 
diff --git a/stories/util.tsx b/stories/utils.tsx
similarity index 68%
rename from stories/util.tsx
rename to stories/utils.tsx
index d2b4b3813..468558272 100644
--- a/stories/util.tsx
+++ b/stories/utils.tsx
@@ -7,6 +7,6 @@ import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/typ
  *
  * @see: https://www.chromatic.com/docs/viewports#what-if-i-have-a-modal-component-that-doesnt-have-a-width-or-hei
  */
-export const modalStoryDecoratorForChromatic = (storyFn: () => StoryFnReactReturnType) => (
-  <div style={{ width: '1200px', height: '1000px' }}>{storyFn()}</div>
-);
+export const modalStoryDecoratorForChromatic = (
+  storyFn: () => StoryFnReactReturnType,
+) => <div style={{ width: '1200px', height: '1000px' }}>{storyFn()}</div>;
diff --git a/yarn.lock b/yarn.lock
index f349082be..a3395e600 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6758,6 +6758,13 @@ eslint-plugin-jsx-a11y@^6.4.1:
     jsx-ast-utils "^3.1.0"
     language-tags "^1.0.5"
 
+eslint-plugin-prettier@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2"
+  integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react-hooks@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
@@ -7175,6 +7182,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -11956,6 +11968,13 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"