diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index 5d2df0bba..36c91125e 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -120,8 +120,6 @@ or array of these values.
 import { DISPLAY } from '../../../helpers/constants/design-system';
 import Box from '../ui/box';
 
-
-
 <Box display={DISPLAY.BLOCK} />
 <Box display={DISPLAY.FLEX} />
 <Box display={DISPLAY.GRID} />
@@ -131,6 +129,28 @@ import Box from '../ui/box';
 <Box display={DISPLAY.NONE} />
 ```
 
+### Color
+
+The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props.
+
+<Canvas>
+  <Story id="ui-components-ui-box-box-stories-js--color" />
+</Canvas>
+
+Example of importing `COLORS` object with `Box` component
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import Box from '../ui/box';
+
+<Box
+  backgroundColor={COLORS.BACKGROUND_DEFAULT}
+  color={COLORS.ERROR_DEFAULT}
+>
+  Text goes here
+</Box>;
+```
+
 ### Background Color
 
 Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
@@ -172,6 +192,7 @@ import Box from '../ui/box';
 </Box>;
 ```
 
+
 ### Responsive Props
 
 The box component provides a responsive props api in the form of array props. Array props are inspired by [styled-systems array props](https://styled-system.com/guides/array-props). The responsive props follow a mobile first methodology with the first item in the array applying the style to the base level size e.g. `0px` and up. The second item overwrites the first items styles at the next breakpoint.
diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index 09c4c0f39..85d638211 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -6,7 +6,9 @@ import {
   ALIGN_ITEMS,
   BLOCK_SIZES,
   BORDER_STYLE,
-  COLORS,
+  BACKGROUND_COLORS,
+  BORDER_COLORS,
+  TEXT_COLORS,
   DISPLAY,
   JUSTIFY_CONTENT,
   SIZES,
@@ -18,64 +20,14 @@ import {
 
 const BASE_CLASS_NAME = 'box';
 const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-export const BackgroundColors = [
-  COLORS.BACKGROUND_DEFAULT,
-  COLORS.BACKGROUND_ALTERNATIVE,
-  COLORS.OVERLAY_DEFAULT,
-  COLORS.PRIMARY_DEFAULT,
-  COLORS.PRIMARY_ALTERNATIVE,
-  COLORS.PRIMARY_MUTED,
-  COLORS.ERROR_DEFAULT,
-  COLORS.ERROR_ALTERNATIVE,
-  COLORS.ERROR_MUTED,
-  COLORS.WARNING_DEFAULT,
-  COLORS.WARNING_ALTERNATIVE,
-  COLORS.WARNING_MUTED,
-  COLORS.SUCCESS_DEFAULT,
-  COLORS.SUCCESS_ALTERNATIVE,
-  COLORS.SUCCESS_MUTED,
-  COLORS.INFO_DEFAULT,
-  COLORS.INFO_ALTERNATIVE,
-  COLORS.INFO_MUTED,
-  COLORS.MAINNET,
-  COLORS.ROPSTEN,
-  COLORS.KOVAN,
-  COLORS.RINKEBY,
-  COLORS.GOERLI,
-  COLORS.TRANSPARENT,
-  COLORS.LOCALHOST,
-];
-export const BorderColors = [
-  COLORS.BORDER_DEFAULT,
-  COLORS.BORDER_MUTED,
-  COLORS.PRIMARY_DEFAULT,
-  COLORS.PRIMARY_ALTERNATIVE,
-  COLORS.PRIMARY_MUTED,
-  COLORS.ERROR_DEFAULT,
-  COLORS.ERROR_ALTERNATIVE,
-  COLORS.ERROR_MUTED,
-  COLORS.WARNING_DEFAULT,
-  COLORS.WARNING_ALTERNATIVE,
-  COLORS.WARNING_MUTED,
-  COLORS.SUCCESS_DEFAULT,
-  COLORS.SUCCESS_ALTERNATIVE,
-  COLORS.SUCCESS_MUTED,
-  COLORS.INFO_DEFAULT,
-  COLORS.INFO_ALTERNATIVE,
-  COLORS.INFO_MUTED,
-  COLORS.MAINNET,
-  COLORS.ROPSTEN,
-  COLORS.KOVAN,
-  COLORS.RINKEBY,
-  COLORS.GOERLI,
-  COLORS.TRANSPARENT,
-  COLORS.LOCALHOST,
-];
 
 const ValidSize = PropTypes.oneOf(Sizes);
 const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
-export const ValidBackgroundColors = PropTypes.oneOf(BackgroundColors);
-export const ValidBorderColors = PropTypes.oneOf(BorderColors);
+export const ValidBackgroundColors = PropTypes.oneOf(
+  Object.values(BACKGROUND_COLORS),
+);
+export const ValidBorderColors = PropTypes.oneOf(Object.values(BORDER_COLORS));
+export const ValidTextColors = PropTypes.oneOf(Object.values(TEXT_COLORS));
 
 const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
 export const MultipleSizes = PropTypes.oneOfType([
@@ -101,6 +53,12 @@ export const MultipleBackgroundColors = PropTypes.oneOfType([
   ArrayOfValidBackgroundColors,
 ]);
 
+const ArrayOfValidTextColors = PropTypes.arrayOf(ValidTextColors);
+export const MultipleTextColors = PropTypes.oneOfType([
+  ValidTextColors,
+  ArrayOfValidTextColors,
+]);
+
 function isValidSize(type, value) {
   // Only margin types allow 'auto'
   return (
@@ -228,6 +186,7 @@ export default function Box({
   className,
   backgroundColor,
   as = 'div',
+  color,
   ...props
 }) {
   const boxClassName = classnames(
@@ -259,6 +218,7 @@ export default function Box({
     textAlign && generateClassNames('text-align', textAlign, isValidString),
     width && generateClassNames('width', width, isValidString),
     height && generateClassNames('height', height, isValidString),
+    color && generateClassNames('color', color, isValidString),
     backgroundColor &&
       generateClassNames('background-color', backgroundColor, isValidString),
     borderRadius && generateClassNames('rounded', borderRadius, isValidString),
@@ -267,6 +227,7 @@ export default function Box({
     borderColor &&
       generateClassNames('border-color', borderColor, isValidString),
     borderWidth && generateClassNames('border-width', borderWidth, isValidSize),
+
     {
       // Auto applied classes
       // ---Borders---
@@ -352,6 +313,7 @@ Box.propTypes = {
     PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))),
   ]),
   backgroundColor: MultipleBackgroundColors,
+  color: MultipleTextColors,
   className: PropTypes.string,
   /**
    * The polymorphic `as` prop allows you to change the root HTML element of the Box component
diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index edafb9fcb..77a7364bf 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -416,4 +416,21 @@ $attributesToApplyExtraProperties: margin;
       }
     }
   }
+
+  // color
+  @each $variant, $color in design-system.$color-map {
+    &--color-#{$variant} {
+      color: var($color);
+    }
+  }
+  // breakpoint classes
+  @each $breakpoint, $min-width in $screen-sizes-map {
+    @each $variant, $color in design-system.$color-map {
+      @media screen and (min-width: $min-width) {
+        &--#{$breakpoint}\color-#{$variant} {
+          color: var($color);
+        }
+      }
+    }
+  }
 }
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index ea50b0e23..2341b3798 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -4,6 +4,9 @@ import {
   BLOCK_SIZES,
   BORDER_STYLE,
   COLORS,
+  TEXT_COLORS,
+  BORDER_COLORS,
+  BACKGROUND_COLORS,
   DISPLAY,
   JUSTIFY_CONTENT,
   SIZES,
@@ -14,7 +17,7 @@ import {
 
 import Typography from '../typography';
 
-import Box, { BackgroundColors, BorderColors } from './box';
+import Box from './box';
 
 import README from './README.mdx';
 
@@ -60,12 +63,17 @@ export default {
       table: { category: 'display' },
     },
     backgroundColor: {
-      options: BackgroundColors,
+      options: Object.values(BACKGROUND_COLORS),
       control: 'select',
       table: {
         category: 'background',
       },
     },
+    color: {
+      options: Object.values(TEXT_COLORS),
+      control: 'select',
+      table: { category: 'color' },
+    },
     borderStyle: {
       options: Object.values(BORDER_STYLE),
       control: 'select',
@@ -78,7 +86,7 @@ export default {
       table: { category: 'border' },
     },
     borderColor: {
-      options: BorderColors,
+      options: Object.values(BORDER_COLORS),
       control: 'select',
       defaultValue: COLORS.BORDER_DEFAULT,
       table: { category: 'border' },
@@ -426,3 +434,25 @@ export const As = (args) => {
     </>
   );
 };
+
+export const Color = () => {
+  return (
+    <>
+      <Box padding={3} color={COLORS.TEXT_DEFAULT}>
+        <Typography>COLORS.TEXT_DEFAULT</Typography>
+      </Box>
+      <Box padding={3} color={COLORS.PRIMARY_DEFAULT}>
+        COLORS.PRIMARY_DEFAULT
+      </Box>
+      <Box padding={3} color={COLORS.SECONDARY_DEFAULT}>
+        COLORS.SECONDARY_DEFAULT
+      </Box>
+      <Box padding={3} color={COLORS.ERROR_DEFAULT}>
+        COLORS.ERROR_DEFAULT
+      </Box>
+      <Box padding={3} color={COLORS.SUCCESS_DEFAULT}>
+        COLORS.SUCCESS_DEFAULT
+      </Box>
+    </>
+  );
+};
diff --git a/ui/components/ui/box/box.test.js b/ui/components/ui/box/box.test.js
index c2b87bffb..12fb89e19 100644
--- a/ui/components/ui/box/box.test.js
+++ b/ui/components/ui/box/box.test.js
@@ -659,6 +659,7 @@ describe('Box', () => {
       );
     });
   });
+
   describe('width, height', () => {
     it('should render the Box with the width class', () => {
       const { getByText } = render(
@@ -747,4 +748,38 @@ describe('Box', () => {
       );
     });
   });
+  describe('color', () => {
+    it('should render the Box with the color class', () => {
+      const { getByText } = render(
+        <Box color={COLORS.TEXT_DEFAULT}>Box content</Box>,
+      );
+      expect(getByText('Box content')).toHaveClass('box--color-text-default');
+    });
+    it('should render the Box with the responsive color classes', () => {
+      const { getByText } = render(
+        <Box
+          color={[
+            COLORS.PRIMARY_DEFAULT,
+            COLORS.SECONDARY_DEFAULT,
+            COLORS.ERROR_DEFAULT,
+            COLORS.SUCCESS_DEFAULT,
+          ]}
+        >
+          Box content
+        </Box>,
+      );
+      expect(getByText('Box content')).toHaveClass(
+        'box--color-primary-default',
+      );
+      expect(getByText('Box content')).toHaveClass(
+        'box--sm:color-secondary-default',
+      );
+      expect(getByText('Box content')).toHaveClass(
+        'box--md:color-error-default',
+      );
+      expect(getByText('Box content')).toHaveClass(
+        'box--lg:color-success-default',
+      );
+    });
+  });
 });
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 7e0487c40..3c21822f2 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -4,6 +4,9 @@
  * should match the property. When detailing a collection of things, it should
  * match the plural form of the thing. e.g. COLORS, TYPOGRAPHY
  */
+
+import { pick } from 'lodash';
+
 export const COLORS = {
   BACKGROUND_DEFAULT: 'background-default',
   BACKGROUND_ALTERNATIVE: 'background-alternative',
@@ -54,8 +57,80 @@ export const COLORS = {
   GOERLI: 'goerli',
   TRANSPARENT: 'transparent',
   LOCALHOST: 'localhost',
+  INHERIT: 'inherit',
 };
+export const BACKGROUND_COLORS = pick(COLORS, [
+  'BACKGROUND_DEFAULT',
+  'BACKGROUND_ALTERNATIVE',
+  'OVERLAY_DEFAULT',
+  'PRIMARY_DEFAULT',
+  'PRIMARY_ALTERNATIVE',
+  'PRIMARY_MUTED',
+  'ERROR_DEFAULT',
+  'ERROR_ALTERNATIVE',
+  'ERROR_MUTED',
+  'WARNING_DEFAULT',
+  'WARNING_ALTERNATIVE',
+  'WARNING_MUTED',
+  'SUCCESS_DEFAULT',
+  'SUCCESS_ALTERNATIVE',
+  'SUCCESS_MUTED',
+  'INFO_DEFAULT',
+  'INFO_ALTERNATIVE',
+  'INFO_MUTED',
+  'MAINNET',
+  'ROPSTEN',
+  'KOVAN',
+  'RINKEBY',
+  'GOERLI',
+  'TRANSPARENT',
+  'LOCALHOST',
+]);
 
+export const BORDER_COLORS = pick(COLORS, [
+  'BORDER_DEFAULT',
+  'BORDER_MUTED',
+  'PRIMARY_DEFAULT',
+  'PRIMARY_ALTERNATIVE',
+  'PRIMARY_MUTED',
+  'ERROR_DEFAULT',
+  'ERROR_ALTERNATIVE',
+  'ERROR_MUTED',
+  'WARNING_DEFAULT',
+  'WARNING_ALTERNATIVE',
+  'WARNING_MUTED',
+  'SUCCESS_DEFAULT',
+  'SUCCESS_ALTERNATIVE',
+  'SUCCESS_MUTED',
+  'INFO_DEFAULT',
+  'INFO_ALTERNATIVE',
+  'INFO_MUTED',
+  'MAINNET',
+  'ROPSTEN',
+  'KOVAN',
+  'RINKEBY',
+  'GOERLI',
+  'TRANSPARENT',
+  'LOCALHOST',
+]);
+
+export const TEXT_COLORS = pick(COLORS, [
+  'TEXT_DEFAULT',
+  'TEXT_ALTERNATIVE',
+  'TEXT_MUTED',
+  'OVERLAY_INVERSE',
+  'PRIMARY_DEFAULT',
+  'PRIMARY_INVERSE',
+  'SECONDARY_DEFAULT',
+  'SECONDARY_INVERSE',
+  'ERROR_DEFAULT',
+  'ERROR_INVERSE',
+  'SUCCESS_DEFAULT',
+  'SUCCESS_INVERSE',
+  'WARNING_INVERSE',
+  'INFO_DEFAULT',
+  'INFO_INVERSE',
+]);
 export const TYPOGRAPHY = {
   H1: 'h1',
   H2: 'h2',