diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx
index 7c5a8ee2..63aeeb6d 100644
--- a/docs/BrandColors.stories.tsx
+++ b/docs/BrandColors.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokens from '../src/figma/tokens.json';
-import { ColorSwatchGroup } from './components';
+import { brandColor } from '../src/js';
+import { ColorSwatchGroup, ColorSwatch } from './components';
 import README from './BrandColors.mdx';
 
 const meta: Meta<typeof ColorSwatchGroup> = {
@@ -22,3 +23,20 @@ export const DefaultStory: Story = {
   render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />,
   name: 'Default',
 };
+
+export const JS: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, 300px)',
+      }}
+    >
+      {/* Mapping through each brand color and rendering a ColorSwatch component for it */}
+      {Object.entries(brandColor).map(([name, color]) => (
+        <ColorSwatch key={name} color={color} name={`brandColor.${name}`} />
+      ))}
+    </div>
+  ),
+};
diff --git a/src/index.ts b/src/index.ts
index 3c79023c..9800d7b7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,8 @@
-export { colors, typography, lightTheme, darkTheme, Theme } from './js';
+export {
+  colors,
+  typography,
+  lightTheme,
+  darkTheme,
+  Theme,
+  brandColor,
+} from './js';
diff --git a/src/js/brandColor/brandColor.test.ts b/src/js/brandColor/brandColor.test.ts
new file mode 100644
index 00000000..932e3c78
--- /dev/null
+++ b/src/js/brandColor/brandColor.test.ts
@@ -0,0 +1,410 @@
+/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
+import { brandColor } from './brandColor';
+
+const designTokens = require('../../figma/tokens.json');
+
+describe('Brand Color', () => {
+  describe('White', () => {
+    it('js tokens for white000 matches figma tokens white000', () => {
+      expect(brandColor.white000).toStrictEqual(
+        designTokens.global.brandColors.white.white000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for white010 matches figma tokens white010', () => {
+      expect(brandColor.white010).toStrictEqual(
+        designTokens.global.brandColors.white.white010.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Black', () => {
+    it('js tokens for black000 matches figma tokens black000', () => {
+      expect(brandColor.black000).toStrictEqual(
+        designTokens.global.brandColors.black.black000.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Grey', () => {
+    it('js tokens for grey030 matches figma tokens grey030', () => {
+      expect(brandColor.grey030).toStrictEqual(
+        designTokens.global.brandColors.grey.grey030.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey040 matches figma tokens grey040', () => {
+      expect(brandColor.grey040).toStrictEqual(
+        designTokens.global.brandColors.grey.grey040.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey100 matches figma tokens grey100', () => {
+      expect(brandColor.grey100).toStrictEqual(
+        designTokens.global.brandColors.grey.grey100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey200 matches figma tokens grey200', () => {
+      expect(brandColor.grey200).toStrictEqual(
+        designTokens.global.brandColors.grey.grey200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey300 matches figma tokens grey300', () => {
+      expect(brandColor.grey300).toStrictEqual(
+        designTokens.global.brandColors.grey.grey300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey400 matches figma tokens grey400', () => {
+      expect(brandColor.grey400).toStrictEqual(
+        designTokens.global.brandColors.grey.grey400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey500 matches figma tokens grey500', () => {
+      expect(brandColor.grey500).toStrictEqual(
+        designTokens.global.brandColors.grey.grey500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey600 matches figma tokens grey600', () => {
+      expect(brandColor.grey600).toStrictEqual(
+        designTokens.global.brandColors.grey.grey600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey700 matches figma tokens grey700', () => {
+      expect(brandColor.grey700).toStrictEqual(
+        designTokens.global.brandColors.grey.grey700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey750 matches figma tokens grey750', () => {
+      expect(brandColor.grey750).toStrictEqual(
+        designTokens.global.brandColors.grey.grey750.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey800 matches figma tokens grey800', () => {
+      expect(brandColor.grey800).toStrictEqual(
+        designTokens.global.brandColors.grey.grey800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for grey900 matches figma tokens grey900', () => {
+      expect(brandColor.grey900).toStrictEqual(
+        designTokens.global.brandColors.grey.grey900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Blue', () => {
+    it('js tokens for blue000 matches figma tokens blue000', () => {
+      expect(brandColor.blue000).toStrictEqual(
+        designTokens.global.brandColors.blue.blue000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue100 matches figma tokens blue100', () => {
+      expect(brandColor.blue100).toStrictEqual(
+        designTokens.global.brandColors.blue.blue100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue200 matches figma tokens blue200', () => {
+      expect(brandColor.blue200).toStrictEqual(
+        designTokens.global.brandColors.blue.blue200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue300 matches figma tokens blue300', () => {
+      expect(brandColor.blue300).toStrictEqual(
+        designTokens.global.brandColors.blue.blue300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue400 matches figma tokens blue400', () => {
+      expect(brandColor.blue400).toStrictEqual(
+        designTokens.global.brandColors.blue.blue400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue500 matches figma tokens blue500', () => {
+      expect(brandColor.blue500).toStrictEqual(
+        designTokens.global.brandColors.blue.blue500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue600 matches figma tokens blue600', () => {
+      expect(brandColor.blue600).toStrictEqual(
+        designTokens.global.brandColors.blue.blue600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue700 matches figma tokens blue700', () => {
+      expect(brandColor.blue700).toStrictEqual(
+        designTokens.global.brandColors.blue.blue700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue800 matches figma tokens blue800', () => {
+      expect(brandColor.blue800).toStrictEqual(
+        designTokens.global.brandColors.blue.blue800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for blue900 matches figma tokens blue900', () => {
+      expect(brandColor.blue900).toStrictEqual(
+        designTokens.global.brandColors.blue.blue900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Orange', () => {
+    it('js tokens for orange000 matches figma tokens orange000', () => {
+      expect(brandColor.orange000).toStrictEqual(
+        designTokens.global.brandColors.orange.orange000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange100 matches figma tokens orange100', () => {
+      expect(brandColor.orange100).toStrictEqual(
+        designTokens.global.brandColors.orange.orange100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange200 matches figma tokens orange200', () => {
+      expect(brandColor.orange200).toStrictEqual(
+        designTokens.global.brandColors.orange.orange200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange300 matches figma tokens orange300', () => {
+      expect(brandColor.orange300).toStrictEqual(
+        designTokens.global.brandColors.orange.orange300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange400 matches figma tokens orange400', () => {
+      expect(brandColor.orange400).toStrictEqual(
+        designTokens.global.brandColors.orange.orange400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange500 matches figma tokens orange500', () => {
+      expect(brandColor.orange500).toStrictEqual(
+        designTokens.global.brandColors.orange.orange500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange600 matches figma tokens orange600', () => {
+      expect(brandColor.orange600).toStrictEqual(
+        designTokens.global.brandColors.orange.orange600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange700 matches figma tokens orange700', () => {
+      expect(brandColor.orange700).toStrictEqual(
+        designTokens.global.brandColors.orange.orange700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange800 matches figma tokens orange800', () => {
+      expect(brandColor.orange800).toStrictEqual(
+        designTokens.global.brandColors.orange.orange800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for orange900 matches figma tokens orange900', () => {
+      expect(brandColor.orange900).toStrictEqual(
+        designTokens.global.brandColors.orange.orange900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Green', () => {
+    it('js tokens for green000 matches figma tokens green000', () => {
+      expect(brandColor.green000).toStrictEqual(
+        designTokens.global.brandColors.green.green000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green100 matches figma tokens green100', () => {
+      expect(brandColor.green100).toStrictEqual(
+        designTokens.global.brandColors.green.green100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green200 matches figma tokens green200', () => {
+      expect(brandColor.green200).toStrictEqual(
+        designTokens.global.brandColors.green.green200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green300 matches figma tokens green300', () => {
+      expect(brandColor.green300).toStrictEqual(
+        designTokens.global.brandColors.green.green300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green400 matches figma tokens green400', () => {
+      expect(brandColor.green400).toStrictEqual(
+        designTokens.global.brandColors.green.green400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green500 matches figma tokens green500', () => {
+      expect(brandColor.green500).toStrictEqual(
+        designTokens.global.brandColors.green.green500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green600 matches figma tokens green600', () => {
+      expect(brandColor.green600).toStrictEqual(
+        designTokens.global.brandColors.green.green600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green700 matches figma tokens green700', () => {
+      expect(brandColor.green700).toStrictEqual(
+        designTokens.global.brandColors.green.green700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green800 matches figma tokens green800', () => {
+      expect(brandColor.green800).toStrictEqual(
+        designTokens.global.brandColors.green.green800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for green900 matches figma tokens green900', () => {
+      expect(brandColor.green900).toStrictEqual(
+        designTokens.global.brandColors.green.green900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Red', () => {
+    it('js tokens for red000 matches figma tokens red000', () => {
+      expect(brandColor.red000).toStrictEqual(
+        designTokens.global.brandColors.red.red000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red100 matches figma tokens red100', () => {
+      expect(brandColor.red100).toStrictEqual(
+        designTokens.global.brandColors.red.red100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red200 matches figma tokens red200', () => {
+      expect(brandColor.red200).toStrictEqual(
+        designTokens.global.brandColors.red.red200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red300 matches figma tokens red300', () => {
+      expect(brandColor.red300).toStrictEqual(
+        designTokens.global.brandColors.red.red300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red400 matches figma tokens red400', () => {
+      expect(brandColor.red400).toStrictEqual(
+        designTokens.global.brandColors.red.red400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red500 matches figma tokens red500', () => {
+      expect(brandColor.red500).toStrictEqual(
+        designTokens.global.brandColors.red.red500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red600 matches figma tokens red600', () => {
+      expect(brandColor.red600).toStrictEqual(
+        designTokens.global.brandColors.red.red600.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red700 matches figma tokens red700', () => {
+      expect(brandColor.red700).toStrictEqual(
+        designTokens.global.brandColors.red.red700.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red800 matches figma tokens red800', () => {
+      expect(brandColor.red800).toStrictEqual(
+        designTokens.global.brandColors.red.red800.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for red900 matches figma tokens red900', () => {
+      expect(brandColor.red900).toStrictEqual(
+        designTokens.global.brandColors.red.red900.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Purple', () => {
+    it('js tokens for purple500 matches figma tokens purple500', () => {
+      expect(brandColor.purple500).toStrictEqual(
+        designTokens.global.brandColors.purple.purple500.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Violet', () => {
+    it('js tokens for violet300 matches figma tokens violet300', () => {
+      expect(brandColor.violet300).toStrictEqual(
+        designTokens.global.brandColors.violet.violet300.value.toLowerCase(),
+      );
+    });
+  });
+
+  describe('Yellow', () => {
+    it('js tokens for yellow000 matches figma tokens yellow000', () => {
+      expect(brandColor.yellow000).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow000.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow100 matches figma tokens yellow100', () => {
+      expect(brandColor.yellow100).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow100.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow200 matches figma tokens yellow200', () => {
+      expect(brandColor.yellow200).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow200.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow300 matches figma tokens yellow300', () => {
+      expect(brandColor.yellow300).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow300.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow400 matches figma tokens yellow400', () => {
+      expect(brandColor.yellow400).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow400.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow500 matches figma tokens yellow500', () => {
+      expect(brandColor.yellow500).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow500.value.toLowerCase(),
+      );
+    });
+
+    it('js tokens for yellow600 matches figma tokens yellow600', () => {
+      expect(brandColor.yellow600).toStrictEqual(
+        designTokens.global.brandColors.yellow.yellow600.value.toLowerCase(),
+      );
+    });
+  });
+});
diff --git a/src/js/brandColor/brandColor.ts b/src/js/brandColor/brandColor.ts
new file mode 100644
index 00000000..1608011c
--- /dev/null
+++ b/src/js/brandColor/brandColor.ts
@@ -0,0 +1,78 @@
+import { BrandColor } from './brandColor.types';
+
+export const brandColor: BrandColor = {
+  // White
+  white000: '#ffffff',
+  white010: '#fcfcfc',
+  // Black
+  black000: '#000000',
+  // Grey
+  grey030: '#fafbfc',
+  grey040: '#f2f4f6',
+  grey100: '#d6d9dc',
+  grey200: '#bbc0c5',
+  grey300: '#9fa6ae',
+  grey400: '#848c96',
+  grey500: '#6a737d',
+  grey600: '#535a61',
+  grey700: '#3b4046',
+  grey750: '#2e3339',
+  grey800: '#24272a',
+  grey900: '#141618',
+  // Blue
+  blue000: '#eaf6ff',
+  blue100: '#a7d9fe',
+  blue200: '#75c4fd',
+  blue300: '#43aefc',
+  blue400: '#1098fc',
+  blue500: '#0376c9',
+  blue600: '#0260a4',
+  blue700: '#024272',
+  blue800: '#01253f',
+  blue900: '#00080d',
+  // Orange
+  orange000: '#fef5ef',
+  orange100: '#fde2cf',
+  orange200: '#fbc49d',
+  orange300: '#faa66c',
+  orange400: '#f8883b',
+  orange500: '#f66a0a',
+  orange600: '#c65507',
+  orange700: '#954005',
+  orange800: '#632b04',
+  orange900: '#321602',
+  // Green
+  green000: '#f3fcf5',
+  green100: '#d6ffdf',
+  green200: '#afecbd',
+  green300: '#86e29b',
+  green400: '#5dd879',
+  green500: '#28a745',
+  green600: '#1e7e34',
+  green700: '#145523',
+  green800: '#0a2c12',
+  green900: '#041007',
+  // Red
+  red000: '#fcf2f3',
+  red100: '#f7d5d8',
+  red200: '#f1b9be',
+  red300: '#e88f97',
+  red400: '#e06470',
+  red500: '#d73847',
+  red600: '#b92534',
+  red700: '#8e1d28',
+  red800: '#64141c',
+  red900: '#3a0c10',
+  // Purple
+  purple500: '#8b45b6',
+  // Violet
+  violet300: '#cfb5f0',
+  // Yellow
+  yellow000: '#fffdf8',
+  yellow100: '#fefcde',
+  yellow200: '#fff2c5',
+  yellow300: '#ffeaa3',
+  yellow400: '#ffdf70',
+  yellow500: '#ffd33d',
+  yellow600: '#ffc70a',
+};
diff --git a/src/js/brandColor/brandColor.types.ts b/src/js/brandColor/brandColor.types.ts
new file mode 100644
index 00000000..25c4292c
--- /dev/null
+++ b/src/js/brandColor/brandColor.types.ts
@@ -0,0 +1,130 @@
+export interface BrandColor {
+  /** white/white000: #ffffff */
+  white000: string;
+  /** white/white010: #fcfcfc */
+  white010: string;
+  /** black/black000: #000000 */
+  black000: string;
+  /** grey/grey030: #fafbfc */
+  grey030: string;
+  /** grey/grey040: #f2f4f6 */
+  grey040: string;
+  /** grey/grey100: #d6d9dc */
+  grey100: string;
+  /** grey/grey200: #bbc0c5 */
+  grey200: string;
+  /** grey/grey300: #9fa6ae */
+  grey300: string;
+  /** grey/grey400: #848c96 */
+  grey400: string;
+  /** grey/grey500: #6a737d */
+  grey500: string;
+  /** grey/grey600: #535a61 */
+  grey600: string;
+  /** grey/grey700: #3b4046 */
+  grey700: string;
+  /** grey/grey750: #2e3339 */
+  grey750: string;
+  /** grey/grey800: #24272a */
+  grey800: string;
+  /** grey/grey900: #141618 */
+  grey900: string;
+  /** blue/blue000: #eaf6ff */
+  blue000: string;
+  /** blue/blue100: #a7d9fe */
+  blue100: string;
+  /** blue/blue200: #75c4fd */
+  blue200: string;
+  /** blue/blue300: #43aefc */
+  blue300: string;
+  /** blue/blue400: #1098fc */
+  blue400: string;
+  /** blue/blue500: #0376c9 */
+  blue500: string;
+  /** blue/blue600: #0260a4 */
+  blue600: string;
+  /** blue/blue700: #024272 */
+  blue700: string;
+  /** blue/blue800: #01253f */
+  blue800: string;
+  /** blue/blue900: #00080d */
+  blue900: string;
+  /** orange/orange000: #fef5ef */
+  orange000: string;
+  /** orange/orange100: #fde2cf */
+  orange100: string;
+  /** orange/orange200: #fbc49d */
+  orange200: string;
+  /** orange/orange300: #faa66c */
+  orange300: string;
+  /** orange/orange400: #f8883b */
+  orange400: string;
+  /** orange/orange500: #f66a0a */
+  orange500: string;
+  /** orange/orange600: #c65507 */
+  orange600: string;
+  /** orange/orange700: #954005 */
+  orange700: string;
+  /** orange/orange800: #632b04 */
+  orange800: string;
+  /** orange/orange900: #321602 */
+  orange900: string;
+  /** green/green000: #f3fcf5 */
+  green000: string;
+  /** green/green100: #d6ffdf */
+  green100: string;
+  /** green/green200: #afecbd */
+  green200: string;
+  /** green/green300: #86e29b */
+  green300: string;
+  /** green/green400: #5dd879 */
+  green400: string;
+  /** green/green500: #28a745 */
+  green500: string;
+  /** green/green600: #1e7e34 */
+  green600: string;
+  /** green/green700: #145523 */
+  green700: string;
+  /** green/green800: #0a2c12 */
+  green800: string;
+  /** green/green900: #041007 */
+  green900: string;
+  /** red/red000: #fcf2f3 */
+  red000: string;
+  /** red/red100: #f7d5d8 */
+  red100: string;
+  /** red/red200: #f1b9be */
+  red200: string;
+  /** red/red300: #e88f97 */
+  red300: string;
+  /** red/red400: #e06470 */
+  red400: string;
+  /** red/red500: #d73847 */
+  red500: string;
+  /** red/red600: #b92534 */
+  red600: string;
+  /** red/red700: #8e1d28 */
+  red700: string;
+  /** red/red800: #64141c */
+  red800: string;
+  /** red/red900: #3a0c10 */
+  red900: string;
+  /** purple/purple500: #8b45b6 */
+  purple500: string;
+  /** violet/violet300: #cfb5f0 */
+  violet300: string;
+  /** yellow/yellow000: #fffdf8 */
+  yellow000: string;
+  /** yellow/yellow100: #fefcde */
+  yellow100: string;
+  /** yellow/yellow200: #fff2c5 */
+  yellow200: string;
+  /** yellow/yellow300: #ffeaa3 */
+  yellow300: string;
+  /** yellow/yellow400: #ffdf70 */
+  yellow400: string;
+  /** yellow/yellow500: #ffd33d */
+  yellow500: string;
+  /** yellow/yellow600: #ffc70a */
+  yellow600: string;
+}
diff --git a/src/js/brandColor/index.ts b/src/js/brandColor/index.ts
new file mode 100644
index 00000000..56ff4c6c
--- /dev/null
+++ b/src/js/brandColor/index.ts
@@ -0,0 +1 @@
+export { brandColor } from './brandColor';
diff --git a/src/js/index.ts b/src/js/index.ts
index 5fa681c3..97abd096 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 { brandColor } from './brandColor';
 
 // DEPRECATED in favor of importing theme objects above
 export { colors } from './colors';