diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index df63f0d..721c24f 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -13,7 +13,7 @@ const preview: Preview = {
       theme: hyphenTheme,
     },
     backgrounds: {
-      default: 'hyphen light',
+      default: 'primary (light)',
       values: [
         {
           name: 'primary (light)',
diff --git a/package-lock.json b/package-lock.json
index b7daf10..84eb3e7 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.1.0",
+        "@hyphen/hyphen-design-tokens": "^3.1.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.1.0",
-      "resolved": "https://npm.pkg.github.com/download/@hyphen/hyphen-design-tokens/3.1.0/73d7fff00f420e42b7894f95dc63c8d9a1a9538c",
-      "integrity": "sha512-Zi9tM/w4B2dRIrFKSuUCfJUTPepuipM1kqBYXzeJrGFmFgG/iK6NcN2zfSqfd+8yp4RggfQAaAqJjH92dY31vg==",
+      "version": "3.1.1",
+      "resolved": "https://npm.pkg.github.com/download/@hyphen/hyphen-design-tokens/3.1.1/ad373cb781ed0886550dd98e4e21e1a15bd79ef9",
+      "integrity": "sha512-Aoz5V6kmL+Tv2IUcQM8y0G9p2dCkxmjv6yvKnq7urHTsAWeMv5+SoHSMDNs34ViTL1kHqjRjc89ojdFfwDStVw==",
       "license": "MIT",
       "peerDependencies": {
         "react": ">=16.8.0",
diff --git a/package.json b/package.json
index 527fd99..82d3a44 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.1.0",
+    "@hyphen/hyphen-design-tokens": "^3.1.1",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 9327669..d20e360 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -5,12 +5,12 @@
   background: transparent;
   cursor: pointer;
   padding: var(--size-spacing-xs);
-  color: var(--modal-close-button-color, var(--color-base-grey-500));
+  color: var(--color-font-secondary);
   line-height: var(--size-line-height-base);
   border-radius: var(--size-border-radius-sm);
 
   &:hover {
-    color: var(--modal-close-button-color-hover, var(--color-base-grey-600));
+    color: var(--color-font-secondary);
   }
 
   // Show focus styles on keyboard focus.
@@ -58,11 +58,10 @@
     grid-column: 1;
     z-index: var(--size-z-index-modal);
     margin: 0;
-    background-color: var(--modal-background-color, var(--color-base-white));
+    background-color: var(--color-background-primary);
     padding: 0;
     width: 100%;
-    border-radius: var(--modal-border-radius, var(--size-border-radius-md))
-      var(--modal-border-radius, var(--size-border-radius-md)) 0 0;
+    border-radius: var(--size-border-radius-md) var(--size-border-radius-md) 0 0;
 
     :global {
       animation: slideInUp 0.3s;
@@ -74,7 +73,7 @@
       grid-column: 2;
       margin: auto;
       outline: none;
-      border-radius: var(--modal-border-radius, var(--size-border-radius-md));
+      border-radius: var(--size-border-radius-md);
       box-shadow: var(--modal-box-shadow, var(--size-box-shadow-md));
       width: 70vw;
       min-height: unset;
@@ -118,8 +117,8 @@
       grid-column: 2;
       margin: auto;
       outline: none;
-      border-radius: var(--modal-border-radius, var(--size-border-radius-md));
-      box-shadow: var(--modal-box-shadow, var(--size-box-shadow-md));
+      border-radius:var(--size-border-radius-md);
+      box-shadow: var(--size-box-shadow-md);
       width: 70vw;
       min-height: unset;
       max-height: calc(100vh - 80px);
diff --git a/src/hooks/useBreakpoint/useBreakpoint.stories.tsx b/src/hooks/useBreakpoint/useBreakpoint.stories.tsx
index a6590ec..67f82a4 100644
--- a/src/hooks/useBreakpoint/useBreakpoint.stories.tsx
+++ b/src/hooks/useBreakpoint/useBreakpoint.stories.tsx
@@ -5,9 +5,6 @@ import { useBreakpoint } from './useBreakpoint';
 
 const meta: Meta<typeof useBreakpoint> = {
   title: 'Hooks/useBreakpoint',
-  parameters: {
-    controls: { hideNoControlsWarning: true },
-  },
 };
 
 export default meta;
@@ -18,10 +15,10 @@ export const BasicUsage = () =>
       const { isPhone, isTablet, isDesktop, isHd } = useBreakpoint();
       return (
         <div>
-          {isPhone && <p>Phone layout</p>}
-          {isTablet && <p>Tablet layout</p>}
-          {isDesktop && <p>Desktop layout</p>}
-          {isHd && <p>HD layout</p>}
+          <p>phone: {isPhone ? '✅' : '❌'}</p>
+          <p>tablet: {isTablet ? '✅' : '❌'}</p>
+          <p>desktop: {isDesktop ? '✅' : '❌'}</p>
+          <p>hd: {isHd ? '✅' : '❌'}</p>
         </div>
       );
     };
diff --git a/src/lib/tokens.ts b/src/lib/tokens.ts
index bc9b8fc..273ab5f 100644
--- a/src/lib/tokens.ts
+++ b/src/lib/tokens.ts
@@ -43,11 +43,15 @@ export const BREAKPOINT_OPTIONS = Object.keys(
 
 export const BREAKPOINTS = [
   ...Object.entries(designTokens.size.breakpoint),
-  ['base', 0],
-].map(([name, value]) => ({
-  name,
-  minWidth: parseInt(value as string, 10),
-})) as Breakpoint[];
+  ['base', { value: '0' }],
+].map(([name, data]) => {
+  if (typeof data === 'object' && data !== null && 'value' in data) {
+    return {
+      name,
+      minWidth: parseInt(data['value'] as string, 10),
+    };
+  }
+}) as Breakpoint[];
 
 export const BASE_COLOR_OPTIONS = (
   Object.keys(designTokens.color.base) as ColorName[]