diff --git a/src/js/brandColors/brandColors.test.ts b/src/js/brandColors/brandColors.test.ts
new file mode 100644
index 00000000..96790ae3
--- /dev/null
+++ b/src/js/brandColors/brandColors.test.ts
@@ -0,0 +1,410 @@
+/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
+import { brandColors } from './brandColors';
+
+const designTokens = require('../../figma/tokens.json');
+
+describe('Brand Colors', () => {
+  describe('White', () => {
+    it('js tokens for white000 matches figma tokens white000', () => {
+      expect(brandColors.white['000']).toStrictEqual(
+        designTokens.global.brandColors.white.white000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for white010 matches figma tokens white010', () => {
+      expect(brandColors.white['010']).toStrictEqual(
+        designTokens.global.brandColors.white.white010.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Black', () => {
+    it('js tokens for black000 matches figma tokens black000', () => {
+      expect(brandColors.black['000']).toStrictEqual(
+        designTokens.global.brandColors.black.black000.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Grey', () => {
+    it('js tokens for grey030 matches figma tokens grey030', () => {
+      expect(brandColors.grey['030']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey030.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey040 matches figma tokens grey040', () => {
+      expect(brandColors.grey['040']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey040.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey100 matches figma tokens grey100', () => {
+      expect(brandColors.grey['100']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey200 matches figma tokens grey200', () => {
+      expect(brandColors.grey['200']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey300 matches figma tokens grey300', () => {
+      expect(brandColors.grey['300']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey400 matches figma tokens grey400', () => {
+      expect(brandColors.grey['400']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey500 matches figma tokens grey500', () => {
+      expect(brandColors.grey['500']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey600 matches figma tokens grey600', () => {
+      expect(brandColors.grey['600']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey700 matches figma tokens grey700', () => {
+      expect(brandColors.grey['700']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey750 matches figma tokens grey750', () => {
+      expect(brandColors.grey['750']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey750.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey800 matches figma tokens grey800', () => {
+      expect(brandColors.grey['800']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey900 matches figma tokens grey900', () => {
+      expect(brandColors.grey['900']).toStrictEqual(
+        designTokens.global.brandColors.grey.grey900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Blue', () => {
+    it('js tokens for blue000 matches figma tokens blue000', () => {
+      expect(brandColors.blue['000']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue100 matches figma tokens blue100', () => {
+      expect(brandColors.blue['100']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue200 matches figma tokens blue200', () => {
+      expect(brandColors.blue['200']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue300 matches figma tokens blue300', () => {
+      expect(brandColors.blue['300']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue400 matches figma tokens blue400', () => {
+      expect(brandColors.blue['400']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue500 matches figma tokens blue500', () => {
+      expect(brandColors.blue['500']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue600 matches figma tokens blue600', () => {
+      expect(brandColors.blue['600']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue700 matches figma tokens blue700', () => {
+      expect(brandColors.blue['700']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue800 matches figma tokens blue800', () => {
+      expect(brandColors.blue['800']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue900 matches figma tokens blue900', () => {
+      expect(brandColors.blue['900']).toStrictEqual(
+        designTokens.global.brandColors.blue.blue900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Orange', () => {
+    it('js tokens for orange000 matches figma tokens orange000', () => {
+      expect(brandColors.orange['000']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange100 matches figma tokens orange100', () => {
+      expect(brandColors.orange['100']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange200 matches figma tokens orange200', () => {
+      expect(brandColors.orange['200']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange300 matches figma tokens orange300', () => {
+      expect(brandColors.orange['300']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange400 matches figma tokens orange400', () => {
+      expect(brandColors.orange['400']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange500 matches figma tokens orange500', () => {
+      expect(brandColors.orange['500']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange600 matches figma tokens orange600', () => {
+      expect(brandColors.orange['600']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange700 matches figma tokens orange700', () => {
+      expect(brandColors.orange['700']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange800 matches figma tokens orange800', () => {
+      expect(brandColors.orange['800']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange900 matches figma tokens orange900', () => {
+      expect(brandColors.orange['900']).toStrictEqual(
+        designTokens.global.brandColors.orange.orange900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Green', () => {
+    it('js tokens for green000 matches figma tokens green000', () => {
+      expect(brandColors.green['000']).toStrictEqual(
+        designTokens.global.brandColors.green.green000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green100 matches figma tokens green100', () => {
+      expect(brandColors.green['100']).toStrictEqual(
+        designTokens.global.brandColors.green.green100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green200 matches figma tokens green200', () => {
+      expect(brandColors.green['200']).toStrictEqual(
+        designTokens.global.brandColors.green.green200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green300 matches figma tokens green300', () => {
+      expect(brandColors.green['300']).toStrictEqual(
+        designTokens.global.brandColors.green.green300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green400 matches figma tokens green400', () => {
+      expect(brandColors.green['400']).toStrictEqual(
+        designTokens.global.brandColors.green.green400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green500 matches figma tokens green500', () => {
+      expect(brandColors.green['500']).toStrictEqual(
+        designTokens.global.brandColors.green.green500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green600 matches figma tokens green600', () => {
+      expect(brandColors.green['600']).toStrictEqual(
+        designTokens.global.brandColors.green.green600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green700 matches figma tokens green700', () => {
+      expect(brandColors.green['700']).toStrictEqual(
+        designTokens.global.brandColors.green.green700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green800 matches figma tokens green800', () => {
+      expect(brandColors.green['800']).toStrictEqual(
+        designTokens.global.brandColors.green.green800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green900 matches figma tokens green900', () => {
+      expect(brandColors.green['900']).toStrictEqual(
+        designTokens.global.brandColors.green.green900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Red', () => {
+    it('js tokens for red000 matches figma tokens red000', () => {
+      expect(brandColors.red['000']).toStrictEqual(
+        designTokens.global.brandColors.red.red000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red100 matches figma tokens red100', () => {
+      expect(brandColors.red['100']).toStrictEqual(
+        designTokens.global.brandColors.red.red100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red200 matches figma tokens red200', () => {
+      expect(brandColors.red['200']).toStrictEqual(
+        designTokens.global.brandColors.red.red200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red300 matches figma tokens red300', () => {
+      expect(brandColors.red['300']).toStrictEqual(
+        designTokens.global.brandColors.red.red300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red400 matches figma tokens red400', () => {
+      expect(brandColors.red['400']).toStrictEqual(
+        designTokens.global.brandColors.red.red400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red500 matches figma tokens red500', () => {
+      expect(brandColors.red['500']).toStrictEqual(
+        designTokens.global.brandColors.red.red500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red600 matches figma tokens red600', () => {
+      expect(brandColors.red['600']).toStrictEqual(
+        designTokens.global.brandColors.red.red600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red700 matches figma tokens red700', () => {
+      expect(brandColors.red['700']).toStrictEqual(
+        designTokens.global.brandColors.red.red700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red800 matches figma tokens red800', () => {
+      expect(brandColors.red['800']).toStrictEqual(
+        designTokens.global.brandColors.red.red800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red900 matches figma tokens red900', () => {
+      expect(brandColors.red['900']).toStrictEqual(
+        designTokens.global.brandColors.red.red900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Purple', () => {
+    it('js tokens for purple500 matches figma tokens purple500', () => {
+      expect(brandColors.purple['500']).toStrictEqual(
+        designTokens.global.brandColors.purple.purple500.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Violet', () => {
+    it('js tokens for violet300 matches figma tokens violet300', () => {
+      expect(brandColors.violet['300']).toStrictEqual(
+        designTokens.global.brandColors.violet.violet300.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Yellow', () => {
+    it('js tokens for yellow000 matches figma tokens yellow000', () => {
+      expect(brandColors.yellow['000']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow100 matches figma tokens yellow100', () => {
+      expect(brandColors.yellow['100']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow200 matches figma tokens yellow200', () => {
+      expect(brandColors.yellow['200']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow300 matches figma tokens yellow300', () => {
+      expect(brandColors.yellow['300']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow400 matches figma tokens yellow400', () => {
+      expect(brandColors.yellow['400']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow500 matches figma tokens yellow500', () => {
+      expect(brandColors.yellow['500']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow600 matches figma tokens yellow600', () => {
+      expect(brandColors.yellow['600']).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow600.value.toLowerCase(),
+      );
+    });
+  });
+});
diff --git a/src/js/brandColors/brandColors.ts b/src/js/brandColors/brandColors.ts
new file mode 100644
index 00000000..78e34a0c
--- /dev/null
+++ b/src/js/brandColors/brandColors.ts
@@ -0,0 +1,88 @@
+import { BrandColors } from './brandColors.types';
+
+export const brandColors: BrandColors = {
+  white: {
+    '000': '#ffffff',
+    '010': '#fcfcfc',
+  },
+  black: {
+    '000': '#000000',
+  },
+  grey: {
+    '030': '#fafbfc',
+    '040': '#f2f4f6',
+    '100': '#d6d9dc',
+    '200': '#bbc0c5',
+    '300': '#9fa6ae',
+    '400': '#848c96',
+    '500': '#6a737d',
+    '600': '#535a61',
+    '700': '#3b4046',
+    '750': '#2e3339',
+    '800': '#24272a',
+    '900': '#141618',
+  },
+  blue: {
+    '000': '#eaf6ff',
+    '100': '#a7d9fe',
+    '200': '#75c4fd',
+    '300': '#43aefc',
+    '400': '#1098fc',
+    '500': '#0376c9',
+    '600': '#0260a4',
+    '700': '#024272',
+    '800': '#01253f',
+    '900': '#00080d',
+  },
+  orange: {
+    '000': '#fef5ef',
+    '100': '#fde2cf',
+    '200': '#fbc49d',
+    '300': '#faa66c',
+    '400': '#f8883b',
+    '500': '#f66a0a',
+    '600': '#c65507',
+    '700': '#954005',
+    '800': '#632b04',
+    '900': '#321602',
+  },
+  green: {
+    '000': '#f3fcf5',
+    '100': '#d6ffdf',
+    '200': '#afecbd',
+    '300': '#86e29b',
+    '400': '#5dd879',
+    '500': '#28a745',
+    '600': '#1e7e34',
+    '700': '#145523',
+    '800': '#0a2c12',
+    '900': '#041007',
+  },
+  red: {
+    '000': '#fcf2f3',
+    '100': '#f7d5d8',
+    '200': '#f1b9be',
+    '300': '#e88f97',
+    '400': '#e06470',
+    '500': '#d73847',
+    '600': '#b92534',
+    '700': '#8e1d28',
+    '800': '#64141c',
+    '900': '#3a0c10',
+  },
+  purple: {
+    '500': '#8b45b6',
+  },
+  violet: {
+    '300': '#cfb5f0',
+  },
+  yellow: {
+    '000': '#fffdf8',
+    '100': '#fefcde',
+    '200': '#fff2c5',
+    '300': '#ffeaa3',
+    '400': '#ffdf70',
+    '500': '#ffd33d',
+    '600': '#ffc70a',
+  },
+};
diff --git a/src/js/brandColors/brandColors.types.ts b/src/js/brandColors/brandColors.types.ts
new file mode 100644
index 00000000..bc9e2ceb
--- /dev/null
+++ b/src/js/brandColors/brandColors.types.ts
@@ -0,0 +1,16 @@
+export interface Color {
+  [key: string]: string;
+}
+
+export interface BrandColors {
+  white: Color;
+  black: Color;
+  grey: Color;
+  blue: Color;
+  orange: Color;
+  green: Color;
+  red: Color;
+  purple: Color;
+  violet: Color;
+  yellow: Color;
+}
diff --git a/src/js/brandColors/index.ts b/src/js/brandColors/index.ts
new file mode 100644
index 00000000..48f25994
--- /dev/null
+++ b/src/js/brandColors/index.ts
@@ -0,0 +1 @@
+export { brandColors } from './brandColors';
diff --git a/src/js/index.ts b/src/js/index.ts
index 5fa681c3..44e41be7 100644
--- a/src/js/index.ts
+++ b/src/js/index.ts
@@ -1,6 +1,7 @@
 export { Theme } from './themes';
 export { lightTheme } from './themes';
 export { darkTheme } from './themes';
+export { brandColors } from './brandColors';
 
 // DEPRECATED in favor of importing theme objects above
 export { colors } from './colors';