diff --git a/src/components/react/Grid.tsx b/src/components/react/Grid.tsx
index a0a1a5d..b9c74a6 100644
--- a/src/components/react/Grid.tsx
+++ b/src/components/react/Grid.tsx
@@ -1,4 +1,4 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import styles from './Grid.module.css';
 import type { FC, ReactNode } from 'react';
 
@@ -12,7 +12,7 @@ interface Props {
 const Grid: FC<Props> = ({
   children,
   minimum = '250px',
-  space = DesignToken.size['spacing-lg'].value.toString(),
+  space = DesignTokens.size['spacing-lg'].value.toString(),
   role,
 }) => {
   const cssCariables = {
diff --git a/src/components/react/figures/color/ColorChip.tsx b/src/components/react/figures/color/ColorChip.tsx
index 9edab08..a4a5f92 100644
--- a/src/components/react/figures/color/ColorChip.tsx
+++ b/src/components/react/figures/color/ColorChip.tsx
@@ -1,6 +1,12 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import ButtonCopy from '@components/react/CopyButton';
-import { validateContrast, convertHexWithPercentage, convertDisplayName, deleteAlpha } from '@utils/client';
+import {
+  validateContrast,
+  convertHexWithPercentage,
+  convertDisplayName,
+  deleteAlpha,
+  createColorTokenJsCode,
+} from '@utils/client';
 import styles from './ColorChip.module.css';
 import ColorChipValidationIndicator from './ColorChipValidationIndicator';
 import type { DesignToken as Token } from '@types';
@@ -13,11 +19,11 @@ interface Props {
 const ColorChip: FC<Props> = ({ token }) => {
   const cssVariables = `--${token.path?.[0]}-${token.path?.[1]}`;
 
-  const jsonPath = `DesignToken.${token.path?.[0]}['${token.path?.[1]}']`;
+  const jsPath = createColorTokenJsCode(token);
 
-  const blackIsValid = validateContrast(token.original.value, DesignToken.color['text-main'].value);
+  const blackIsValid = validateContrast(token.original.value, DesignTokens.color['text-main'].value);
 
-  const whiteIsValid = validateContrast(token.original.value, DesignToken.color['ubie-white'].original.value);
+  const whiteIsValid = validateContrast(token.original.value, DesignTokens.color['ubie-white'].original.value);
 
   const name = convertDisplayName(token.name ?? '');
 
@@ -57,8 +63,8 @@ const ColorChip: FC<Props> = ({ token }) => {
           <div className={styles.value}>
             <p className={styles.valueTypeName}>JavaScript Object</p>
 
-            <code className={styles.code}>{jsonPath}</code>
-            <ButtonCopy className={styles.copy} text={`var(${jsonPath})`}></ButtonCopy>
+            <code className={styles.code}>{jsPath}</code>
+            <ButtonCopy className={styles.copy} text={jsPath}></ButtonCopy>
           </div>
         </li>
       </ul>
diff --git a/src/components/react/figures/color/ColorListBase.tsx b/src/components/react/figures/color/ColorListBase.tsx
index 6962132..afc3e42 100644
--- a/src/components/react/figures/color/ColorListBase.tsx
+++ b/src/components/react/figures/color/ColorListBase.tsx
@@ -1,4 +1,4 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import ColorChip from './ColorChip';
 import Grid from '../../Grid';
 import type { DesignToken as Token } from '@types';
@@ -9,7 +9,7 @@ interface Props {
 }
 
 const ColorListBase: FC<Props> = ({ tokens }) => (
-  <Grid minimum="200px" space={DesignToken.size['spacing-sm'].value}>
+  <Grid minimum="200px" space={DesignTokens.size['spacing-sm'].value}>
     {tokens.map((token, index) => {
       return <ColorChip token={token} key={index} />;
     })}
diff --git a/src/components/react/figures/color/semantic/BaseGrid.tsx b/src/components/react/figures/color/semantic/BaseGrid.tsx
index 432cd47..5df3f35 100644
--- a/src/components/react/figures/color/semantic/BaseGrid.tsx
+++ b/src/components/react/figures/color/semantic/BaseGrid.tsx
@@ -1,5 +1,5 @@
 import CopyButton from '@components/react/CopyButton';
-import { convertHexWithPercentage, convertDisplayName, deleteAlpha } from '@utils/client';
+import { convertHexWithPercentage, convertDisplayName, deleteAlpha, createColorTokenJsCode } from '@utils/client';
 import styles from './BaseGrid.module.css';
 import type { DesignToken } from '@types';
 import type { FC } from 'react';
@@ -46,10 +46,7 @@ const BaseGrid: FC<Props> = ({ colors }) => (
             <td className={styles.cellCopy}>
               <CopyButton label="HEX" text={deleteAlpha(color.token.value)}></CopyButton>
               <CopyButton label="CSS" text={`var(--${color.token.path?.[0]}-${color.token.path?.[1]})`}></CopyButton>
-              <CopyButton
-                label="JS"
-                text={`DesignToken.${color.token.path?.[0]}['${color.token.path?.[1]}']`}
-              ></CopyButton>
+              <CopyButton label="JS" text={createColorTokenJsCode(color.token)}></CopyButton>
             </td>
           </tr>
         ))}
diff --git a/src/components/react/figures/color/semantic/ColorListAlert.tsx b/src/components/react/figures/color/semantic/ColorListAlert.tsx
index 8e4b1d6..f66cca6 100644
--- a/src/components/react/figures/color/semantic/ColorListAlert.tsx
+++ b/src/components/react/figures/color/semantic/ColorListAlert.tsx
@@ -1,8 +1,8 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import BaseGrid from './BaseGrid';
 import type { FC } from 'react';
 
-const { color } = DesignToken;
+const { color } = DesignTokens;
 
 const ColorListAlert: FC = () => {
   return (
diff --git a/src/components/react/figures/color/semantic/ColorListBranding.tsx b/src/components/react/figures/color/semantic/ColorListBranding.tsx
index eee4240..97e7291 100644
--- a/src/components/react/figures/color/semantic/ColorListBranding.tsx
+++ b/src/components/react/figures/color/semantic/ColorListBranding.tsx
@@ -1,8 +1,8 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import BaseGrid from './BaseGrid';
 import type { FC } from 'react';
 
-const { color } = DesignToken;
+const { color } = DesignTokens;
 
 const ColorListBranding: FC = () => {
   return (
diff --git a/src/components/react/figures/color/semantic/ColorListUI.tsx b/src/components/react/figures/color/semantic/ColorListUI.tsx
index 5d03724..878cc11 100644
--- a/src/components/react/figures/color/semantic/ColorListUI.tsx
+++ b/src/components/react/figures/color/semantic/ColorListUI.tsx
@@ -1,8 +1,8 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import BaseGrid from './BaseGrid';
 import type { FC } from 'react';
 
-const { color } = DesignToken;
+const { color } = DesignTokens;
 
 const ColorListUI: FC = () => {
   return (
diff --git a/src/components/react/figures/radius/TokenList.tsx b/src/components/react/figures/radius/TokenList.tsx
index eede143..c2bce6d 100644
--- a/src/components/react/figures/radius/TokenList.tsx
+++ b/src/components/react/figures/radius/TokenList.tsx
@@ -1,11 +1,11 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import CopyButton from '@components/react/CopyButton';
 import Table, { Row, TBody, THead, Cell, HeadCell, HeadRow } from '@components/react/Table';
 import { pascalCaseToCSSVariables } from '@utils/client/css';
 import { getKeys } from '@utils/client/object';
 import type { FC } from 'react';
 
-const { radius } = DesignToken;
+const { radius } = DesignTokens;
 const radiusArray = getKeys(radius)
   .map((key) => {
     return {
@@ -51,7 +51,7 @@ const TokenList: FC = () => (
               label="CSS"
             ></CopyButton>
             <CopyButton
-              text={`DesignToken.${radius.token.path?.[0]}['${radius.token.path?.[1]}']`}
+              text={`DesignTokens.${radius.token.path?.[0]}['${radius.token.path?.[1]}']`}
               label="JS"
             ></CopyButton>
           </Cell>
diff --git a/src/components/react/figures/spacing/TokenList.tsx b/src/components/react/figures/spacing/TokenList.tsx
index 6ee7125..a62a98a 100644
--- a/src/components/react/figures/spacing/TokenList.tsx
+++ b/src/components/react/figures/spacing/TokenList.tsx
@@ -1,11 +1,11 @@
-import DesignToken from '@ubie/design-tokens';
+import DesignTokens from '@ubie/design-tokens';
 import CopyButton from '@components/react/CopyButton';
 import Table, { Row, TBody, THead, Cell, HeadCell, HeadRow } from '@components/react/Table';
 import { pascalCaseToCSSVariables } from '@utils/client/css';
 import { getKeys } from '@utils/client/object';
 import type { FC } from 'react';
 
-const { size } = DesignToken;
+const { size } = DesignTokens;
 const sizeArray = getKeys(size)
   .map((key) => {
     return {
@@ -54,7 +54,10 @@ const TokenList: FC = () => (
               text={`var(${pascalCaseToCSSVariables(size.token.name ? size.token.name : '')})`}
               label="CSS"
             ></CopyButton>
-            <CopyButton text={`DesignToken.${size.token.path?.[0]}['${size.token.path?.[1]}']`} label="JS"></CopyButton>
+            <CopyButton
+              text={`DesignTokens.${size.token.path?.[0]}['${size.token.path?.[1]}']`}
+              label="JS"
+            ></CopyButton>
           </Cell>
         </Row>
       ))}
diff --git a/src/utils/client/color.ts b/src/utils/client/color.ts
index 016151d..f22c94f 100644
--- a/src/utils/client/color.ts
+++ b/src/utils/client/color.ts
@@ -1,5 +1,6 @@
 import { normal } from 'color-blend';
 import rgba from 'color-rgba';
+import type { DesignToken } from '@types';
 
 type RGBA = {
   r: number;
@@ -238,3 +239,7 @@ if (import.meta.vitest) {
     });
   });
 }
+
+export const createColorTokenJsCode = (token: DesignToken): string => {
+  return `DesignTokens.${token.path?.[0]}['${token.path?.[1]}']`;
+};