diff --git a/package-lock.json b/package-lock.json
index 61f7b69..bc7c985 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0-development",
       "license": "MIT",
       "dependencies": {
-        "@hyphen/hyphen-design-tokens": "^3.2.0",
+        "@hyphen/hyphen-design-tokens": "^3.2.1",
         "@popperjs/core": "^2.11.8",
         "@types/react-modal": "^3.16.3",
         "classnames": "^2.5.1",
@@ -2658,9 +2658,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@hyphen/hyphen-design-tokens": {
-      "version": "3.2.0",
-      "resolved": "https://npm.pkg.github.com/download/@hyphen/hyphen-design-tokens/3.2.0/5e408985859009d45cad3a2ceaf2ea3de29b927b",
-      "integrity": "sha512-1D9yOUGpL3SWZ4NI/f94oW2s6oArAPpwplnpXnHwhZDjNvMvH+KzVt4oaO+HActfq5b3wlLxSp3ex5yJ9t5WjQ==",
+      "version": "3.2.1",
+      "resolved": "https://npm.pkg.github.com/download/@hyphen/hyphen-design-tokens/3.2.1/285542c31bff781a39448da6c6219d3e161aaf3c",
+      "integrity": "sha512-Jke4rRcHOGwVSJWRTh/Wl5q8El1caX/efcEGMDPV+F5aP9WS8JvPzScKTvd3/L74x83+cVe8IThjmrQpKq0W6Q==",
       "license": "MIT",
       "peerDependencies": {
         "react": ">=16.8.0",
diff --git a/package.json b/package.json
index 9ae9443..76bb4a1 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^3.2.0",
+    "@hyphen/hyphen-design-tokens": "^3.2.1",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
index 4a6bd54..a16701d 100644
--- a/src/components/Box/Box.stories.tsx
+++ b/src/components/Box/Box.stories.tsx
@@ -98,7 +98,16 @@ export const Border = () => {
   return (
     <Box gap="md">
       <Box borderColor="default" borderWidth="sm" padding="md">
-        separator
+        default
+      </Box>
+      <Box borderColor="subtle" borderWidth="sm" padding="md">
+        subtle
+      </Box>
+      <Box borderColor="hover" borderWidth="sm" padding="md">
+        hover
+      </Box>
+      <Box borderColor="active" borderWidth="sm" padding="md">
+        active
       </Box>
       <Box borderColor="info" borderWidth="sm" padding="md">
         info
diff --git a/src/docs/Colors.mdx b/src/docs/Colors.mdx
index 96234fd..b91d2f3 100644
--- a/src/docs/Colors.mdx
+++ b/src/docs/Colors.mdx
@@ -1,5 +1,6 @@
 import { ColorPalette, ColorItem, Meta } from '@storybook/addon-docs';
 import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json';
+import { Box } from '../../src/components/Box/Box';
 
 <Meta title="Foundation/Colors" />
 
@@ -126,3 +127,33 @@ import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json
     )}
   />
 </ColorPalette>
+
+## Borders
+
+<ColorPalette>
+  <ColorItem
+    title="Backgrounds"
+    subtitle="used for borders"
+    colors={Object.keys(designTokens.color.border).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.border).map(
+        (g) => designTokens.color.border[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>
+
+## Text
+
+<ColorPalette>
+  <ColorItem
+    title="Text"
+    subtitle="used for text"
+    colors={Object.keys(designTokens.color.font).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.font).map(
+        (g) => designTokens.color.font[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>