diff --git a/package.json b/package.json
index 104031b3..9ff8ab68 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "build": "yarn build:dist && yarn build:storybook",
     "build:storybook": "cross-env NODE_ENV=production && storybook build -o public/dist",
     "build:dist": "cross-env NODE_ENV=production && rimraf public/dist && rimraf dist && rollup -c",
+    "build:sd": "node ./tokens/build.mjs && eslint --cache --ext=ts tokens --fix",
     "commit": "yarn test --coverage --no-cache --silent --forceExit --detectOpenHandles --runInBand --watch=false && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges && yarn lint --fix && yarn check",
     "lint": "eslint --cache --ext=ts,tsx,js src",
     "check": "tsc --noEmit --skipLibCheck",
@@ -129,6 +130,7 @@
     "rollup-plugin-css-only": "^4.5.2",
     "snyk": "^1.1288.0",
     "storybook": "^8.0.7",
+    "style-dictionary": "^3.9.2",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
diff --git a/src/components/accordion/__styles__/index.ts b/src/components/accordion/__styles__/index.ts
index 8bbcbd6f..50a56cf8 100644
--- a/src/components/accordion/__styles__/index.ts
+++ b/src/components/accordion/__styles__/index.ts
@@ -2,7 +2,7 @@ import { styled } from '@linaria/react'
 import { elIsActive } from '../../../styles/states'
 
 export const ElAccordionContainer = styled.div`
-  background-color: var(--color-white);
+  background-color: var(--white);
   height: auto;
   display: flex;
   flex-direction: column;
@@ -26,14 +26,14 @@ export const ElAccordionItem = styled.a`
   justify-content: space-between;
   align-items: center;
   padding: 0.875rem 0;
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
 
   &:has(+ .${elIsActive}) {
     border-bottom: none;
   }
 `
 export const ElAccordionTitle = styled.div`
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-medium);
 `
@@ -50,7 +50,7 @@ export const ElAccordionTitleContent = styled.div`
 
   svg {
     font-size: 1rem;
-    color: var(--color-grey-300);
+    color: var(--neutral-300);
   }
 
   &:last-child {
@@ -66,6 +66,6 @@ export const ElAccordionContent = styled.div`
   &.${elIsActive} {
     height: auto;
     padding: 1.5rem 0;
-    border-bottom: 1px solid var(--color-grey-100);
+    border-bottom: 1px solid var(--neutral-100);
   }
 `
diff --git a/src/components/avatar/__styles__/index.ts b/src/components/avatar/__styles__/index.ts
index af5b01dc..58015d78 100644
--- a/src/components/avatar/__styles__/index.ts
+++ b/src/components/avatar/__styles__/index.ts
@@ -9,7 +9,7 @@ export const ElAvatar = styled.div`
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-grey-100);
+  background-color: var(--neutral-100);
   border-radius: 50%;
   overflow: hidden;
   width: 2.5rem;
diff --git a/src/components/badge/__styles__/index.ts b/src/components/badge/__styles__/index.ts
index 1e8d2f8d..737ed72f 100644
--- a/src/components/badge/__styles__/index.ts
+++ b/src/components/badge/__styles__/index.ts
@@ -29,17 +29,17 @@ export const ElBadge = styled.span`
   }
 
   &.${elIntentSuccess} {
-    color: var(--color-green-600);
+    color: var(--green-600);
     background: var(--intent-success-lightest);
   }
 
   &.${elIntentPending} {
-    color: var(--color-yellow-600);
+    color: var(--yellow-600);
     background: var(--intent-pending-lightest);
   }
 
   &.${elIntentWarning} {
-    color: var(--color-orange-600);
+    color: var(--orange-600);
     background: var(--intent-warning-lightest);
   }
 
diff --git a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
index 8df0542e..024732a1 100644
--- a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -40,7 +40,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -79,7 +79,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -118,7 +118,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -162,7 +162,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -189,7 +189,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -228,7 +228,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -267,7 +267,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
diff --git a/src/components/button/__styles__/index.ts b/src/components/button/__styles__/index.ts
index fbe9c048..7008f65a 100644
--- a/src/components/button/__styles__/index.ts
+++ b/src/components/button/__styles__/index.ts
@@ -28,10 +28,10 @@ export const ElButtonLoader = styled.div`
   color: transparent !important;
   pointer-events: none;
   animation: spinAround 500ms infinite linear;
-  border: 2px solid var(--color-grey-400);
+  border: 2px solid var(--neutral-400);
   margin-right: 0.5rem;
   border-radius: 290486px;
-  border-color: transparent transparent var(--color-grey-400) var(--color-grey-400);
+  border-color: transparent transparent var(--neutral-400) var(--neutral-400);
   display: none;
   height: 0.75rem;
   width: 0.75rem;
@@ -53,45 +53,45 @@ export const ElButton = styled.button`
   white-space: nowrap;
   cursor: pointer;
   border-radius: var(--default-border-radius);
-  border: 1px solid var(--color-grey-100);
+  border: 1px solid var(--neutral-100);
   font-size: var(--font-size-small);
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   background-color: unset;
-  background-image: linear-gradient(to right, var(--color-white), var(--color-white));
+  background-image: linear-gradient(to right, var(--white), var(--white));
   outline-color: var(--intent-primary);
   background-repeat: no-repeat;
   height: 2.25rem;
 
   &:hover {
-    border: 1px solid var(--color-grey-400);
-    color: var(--color-grey-700);
+    border: 1px solid var(--neutral-400);
+    color: var(--neutral-700);
   }
 
   &.${elIntentPrimary} {
     background-image: linear-gradient(to right, var(--intent-primary), var(--intent-primary));
-    color: var(--color-white);
+    color: var(--white);
     outline-color: var(--intent-primary-dark);
     border: 1px solid var(--intent-primary);
 
     &:hover {
       background-image: linear-gradient(to right, var(--intent-primary-dark), var(--intent-primary-dark));
       border: 1px solid var(--intent-primary-dark);
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
   &.${elIntentDanger} {
     background-image: linear-gradient(to right, var(--intent-danger), var(--intent-danger));
-    color: var(--color-white);
+    color: var(--white);
     outline-color: var(--intent-danger-dark);
     border: 1px solid var(--intent-danger);
 
     &:hover {
       background-image: linear-gradient(to right, var(--intent-danger-dark), var(--intent-danger-dark));
       border: 1px solid var(--intent-danger-dark);
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
@@ -132,7 +132,7 @@ export const ElButton = styled.button`
 
   &.${elIntentDanger}, &.${elIntentPrimary} {
     ${ElIcon} {
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
@@ -147,9 +147,9 @@ export const ElButton = styled.button`
     .${elIntentPrimary},
     &.${elIsLoading}
     .${elIntentDefault} {
-    border: 1px solid var(--color-grey-100);
-    color: var(--color-grey-400);
-    background-image: linear-gradient(to right, var(--color-grey-100), var(--color-grey-100));
+    border: 1px solid var(--neutral-100);
+    color: var(--neutral-400);
+    background-image: linear-gradient(to right, var(--neutral-100), var(--neutral-100));
     cursor: disabled;
   }
 
@@ -182,16 +182,16 @@ export const ElButton = styled.button`
     }
 
     ${ElIcon} {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
 
       &:hover {
-        color: var(--color-grey-700);
+        color: var(--neutral-700);
       }
     }
 
     &.${elIntentDanger}, &.${elIntentPrimary} {
       ${ElIcon} {
-        color: var(--color-white);
+        color: var(--white);
       }
     }
 
diff --git a/src/components/card/__styles__/index.ts b/src/components/card/__styles__/index.ts
index ca09afcb..8023a7a2 100644
--- a/src/components/card/__styles__/index.ts
+++ b/src/components/card/__styles__/index.ts
@@ -4,14 +4,14 @@ import { isTablet } from '../../../styles/media'
 import { ElAvatar } from '../../avatar'
 
 export const elCardFocussed = css`
-  background-color: var(--color-purple-50);
+  background-color: var(--purple-050);
 `
 
 export const ElCardWrap = styled.div`
   padding: 1rem;
   border-radius: 0.25rem;
   box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.03);
-  background: var(--color-white);
+  background: var(--white);
   position: relative;
 
   ${isTablet} {
@@ -20,7 +20,7 @@ export const ElCardWrap = styled.div`
   }
 
   &.${elCardFocussed} {
-    background-color: var(--color-purple-50);
+    background-color: var(--purple-050);
   }
 `
 
@@ -64,7 +64,7 @@ export const ElCardHeading = styled.h5`
 `
 
 export const ElCardSubHeading = styled.h6`
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -74,7 +74,7 @@ export const ElCardSubHeading = styled.h6`
 export const elCardSubHeadingAdditionalExpanded = css``
 
 export const ElCardSubHeadingAdditional = styled.h6`
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   font-size: var(--font-size-smallest);
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
@@ -88,7 +88,7 @@ export const elCardBodyWrapExpanded = css``
 
 export const ElCardBodyWrap = styled.div`
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -117,7 +117,7 @@ export const ElCardAvatarWrap = styled.div`
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-grey-100);
+  background-color: var(--neutral-100);
   margin-right: 0.5rem;
   border-radius: 50%;
   width: 2.5rem;
@@ -164,7 +164,7 @@ export const ElCardListHeading = styled.h5`
 
 export const ElCardListSubHeading = styled.h6`
   font-size: var(--font-size-smallest);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -200,7 +200,7 @@ export const ElCardListItemTextWrap = styled.div`
 `
 
 export const ElCardListItemTextPrimary = styled.div`
-  color: var(--color-black);
+  color: var(--black);
 `
 
 export const ElCardListItemTextSecondary = styled.div`
diff --git a/src/components/chip/__styles__/index.ts b/src/components/chip/__styles__/index.ts
index 6996776d..ba82507e 100644
--- a/src/components/chip/__styles__/index.ts
+++ b/src/components/chip/__styles__/index.ts
@@ -13,9 +13,9 @@ export const ElChipCheckbox = styled.input`
 
   &:checked + label,
   &:hover + label {
-    background: var(--color-purple-50);
+    background: var(--purple-050);
     padding: 0.2rem 2rem 0.2rem 1rem;
-    color: var(--color-black);
+    color: var(--black);
 
     &::before {
       content: '';
@@ -35,8 +35,8 @@ export const ElChipLabel = styled.label`
   cursor: pointer;
   width: auto;
   height: 28px;
-  background: var(--color-purple-50);
-  border: 1px solid var(--color-purple-50);
+  background: var(--purple-050);
+  border: 1px solid var(--purple-050);
   border-radius: 1rem;
   padding: 0.2rem 1.5rem;
   position: relative;
@@ -45,10 +45,10 @@ export const ElChipLabel = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 
   &:hover {
-    color: var(--color-grey-700);
+    color: var(--neutral-700);
   }
 `
 
diff --git a/src/components/drawer/__styles__/index.ts b/src/components/drawer/__styles__/index.ts
index 77215020..c8818a73 100644
--- a/src/components/drawer/__styles__/index.ts
+++ b/src/components/drawer/__styles__/index.ts
@@ -9,7 +9,7 @@ export const ElDrawerBg = styled.div`
   height: 100%;
   top: 0;
   left: 0;
-  background: var(--color-grey-500);
+  background: var(--neutral-500);
   opacity: 0.2;
 
   &.${elIsActive} {
@@ -46,19 +46,19 @@ export const ElDrawer = styled.div`
 
 export const ElDrawerHeader = styled.div`
   padding: 1.5rem 2rem;
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 `
 
 export const ElDrawerSubtitle = styled.div`
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   font-size: var(--font-size-default);
 `
 
 export const ElDrawerTitle = styled.div`
-  color: var(--color-black);
+  color: var(--black);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-small-subheading);
 
@@ -73,6 +73,6 @@ export const ElDrawerBody = styled.div`
 `
 
 export const ElDrawerFooter = styled.div`
-  border-top: 1px solid var(--color-grey-100);
+  border-top: 1px solid var(--neutral-100);
   padding: 0.875rem 2rem;
 `
diff --git a/src/components/file-input/__styles__/index.ts b/src/components/file-input/__styles__/index.ts
index f129d696..06990447 100644
--- a/src/components/file-input/__styles__/index.ts
+++ b/src/components/file-input/__styles__/index.ts
@@ -40,7 +40,7 @@ export const ElFileInputIconContainer = styled.div`
   height: 34px;
 
   ${ElIcon} {
-    background: var(--color-white);
+    background: var(--white);
     border: 1px solid var(--component-input-focus-bg);
     border-radius: 0.25rem;
     height: 100%;
diff --git a/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap b/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap
index fc1ade17..79202000 100644
--- a/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap
+++ b/src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`FileInput component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -45,20 +45,20 @@ exports[`FileInput component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -151,7 +151,7 @@ exports[`FileInput component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -183,20 +183,20 @@ exports[`FileInput component should match a snapshot 1`] = `
         <div
           class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -418,7 +418,7 @@ exports[`FileInput component should match a snapshot with full props 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -491,7 +491,7 @@ exports[`FileInput component should match a snapshot with full props 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
diff --git a/src/components/form-layout/__styles__/index.ts b/src/components/form-layout/__styles__/index.ts
index 88d70c68..ba7a4230 100644
--- a/src/components/form-layout/__styles__/index.ts
+++ b/src/components/form-layout/__styles__/index.ts
@@ -34,7 +34,7 @@ export const ElFormLayout = styled.div`
 
 export const ElFormSectionDivider = styled.div`
   margin: 1.5rem 0;
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
 `
 
 export const ElInputWrapSmall = styled.div`
diff --git a/src/components/icon/__styles__/index.ts b/src/components/icon/__styles__/index.ts
index 88a55d9d..808be52f 100644
--- a/src/components/icon/__styles__/index.ts
+++ b/src/components/icon/__styles__/index.ts
@@ -11,7 +11,7 @@ import {
 
 export const ElIcon = styled.span`
   display: flex;
-  color: var(--color-black);
+  color: var(--black);
   font-size: 1.5rem;
 
   &.${elIntentPrimary} {
diff --git a/src/components/input-add-on/__styles__/index.ts b/src/components/input-add-on/__styles__/index.ts
index 8806e1e4..f7121e18 100644
--- a/src/components/input-add-on/__styles__/index.ts
+++ b/src/components/input-add-on/__styles__/index.ts
@@ -11,7 +11,7 @@ import {
 
 export const ElInputAddOn = styled.span`
   font-size: var(--font-size-default);
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
 
   &.${elIntentPrimary} {
     color: var(--intent-primary);
diff --git a/src/components/input-group/__styles__/index.ts b/src/components/input-group/__styles__/index.ts
index 7bd3b53d..fc9c4591 100644
--- a/src/components/input-group/__styles__/index.ts
+++ b/src/components/input-group/__styles__/index.ts
@@ -20,7 +20,7 @@ export const ElInputGroup = styled.div`
   }
 
   ${ElIcon} {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
     border: var(--component-input-border);
     border-right: none;
     border-radius: 0.125rem 0 0 0.125rem;
@@ -75,7 +75,7 @@ export const ElInputGroup = styled.div`
     &.${elHasInputError} {
       ~ ${ElIcon}, ~ ${ElInputAddOn} {
         border-color: var(--intent-danger);
-        background-color: var(--color-red-100);
+        background-color: var(--red-100);
       }
     }
 
@@ -102,11 +102,11 @@ export const ElInputGroup = styled.div`
 
     &:checked {
       ~ ${ElIcon}, ~ ${ElLabel}, ~ ${ElInputAddOn} {
-        background: var(--color-white);
+        background: var(--white);
       }
 
       ~ ${ElInputAddOn} {
-        color: var(--color-black);
+        color: var(--black);
       }
     }
   }
diff --git a/src/components/input/__styles__/index.ts b/src/components/input/__styles__/index.ts
index 4e93f4a5..15ce5e08 100644
--- a/src/components/input/__styles__/index.ts
+++ b/src/components/input/__styles__/index.ts
@@ -5,7 +5,7 @@ export const elHasInputError = css``
 
 export const ElInput = styled.input`
   display: flex;
-  color: var(--color-black);
+  color: var(--black);
   background: var(--component-input-bg);
   padding: 0.5rem 0.6875rem;
   margin: 0;
@@ -25,7 +25,7 @@ export const ElInput = styled.input`
 
     &.${elHasInputError} {
       border: 1px solid var(--intent-danger);
-      background-color: var(--color-red-100);
+      background-color: var(--red-100);
     }
   }
 
@@ -34,18 +34,18 @@ export const ElInput = styled.input`
   }
 
   &::placeholder {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
     font-family: var(--font-sans-serif);
     font-size: var(--font-size-small);
   }
 
   &:disabled {
-    background-color: var(--color-grey-100);
-    color: var(--color-grey-300);
+    background-color: var(--neutral-100);
+    color: var(--neutral-300);
     cursor: not-allowed;
 
     ::placeholder {
-      color: var(--color-grey-300);
+      color: var(--neutral-300);
     }
   }
 
@@ -56,7 +56,7 @@ export const ElInput = styled.input`
   &[type='checkbox'] {
     appearance: none;
     border: var(--component-input-border);
-    background-color: var(--color-white);
+    background-color: var(--white);
     border-radius: 0.125rem;
     width: 1.5rem;
     height: 1.5rem;
@@ -70,13 +70,13 @@ export const ElInput = styled.input`
       background-position: center center;
       background-repeat: no-repeat;
       background-size: 0.75rem;
-      border: 1px solid var(--color-grey-400);
+      border: 1px solid var(--neutral-400);
       background-color: var(--intent-primary);
       border: 1px solid var(--intent-primary);
     }
 
     &:disabled {
-      background-color: var(--color-grey-100);
+      background-color: var(--neutral-100);
       border: var(--component-input-border);
       cursor: not-allowed;
     }
@@ -85,7 +85,7 @@ export const ElInput = styled.input`
   &[type='radio'] {
     appearance: none;
     border: var(--component-input-border);
-    background-color: var(--color-white);
+    background-color: var(--white);
     border-radius: 100%;
     width: 1.5rem;
     height: 1.5rem;
@@ -98,7 +98,7 @@ export const ElInput = styled.input`
     }
 
     &:disabled {
-      background-color: var(--color-white);
+      background-color: var(--white);
       border: var(--component-input-border);
       cursor: not-allowed;
     }
@@ -119,9 +119,9 @@ export const ElInput = styled.input`
       }
 
       &:disabled {
-        background-color: var(--color-white);
+        background-color: var(--white);
         &:after {
-          background-color: var(--color-grey-300);
+          background-color: var(--neutral-300);
           border: var(--component-input-border);
         }
       }
diff --git a/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap b/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap
index 0eea2922..f1ebfa85 100644
--- a/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap
+++ b/src/components/key-value-list/__tests__/__snapshots__/key-value-list.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -45,20 +45,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -139,20 +139,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -255,7 +255,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -269,20 +269,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -363,20 +363,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -479,7 +479,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -493,20 +493,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -587,20 +587,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -703,7 +703,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -717,20 +717,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -811,20 +811,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -927,7 +927,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -941,20 +941,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1039,20 +1039,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1159,7 +1159,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1173,20 +1173,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1267,20 +1267,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1390,7 +1390,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1404,20 +1404,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1498,20 +1498,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1614,7 +1614,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1628,20 +1628,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1722,20 +1722,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1838,7 +1838,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1852,20 +1852,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1946,20 +1946,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2062,7 +2062,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -2076,20 +2076,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2170,20 +2170,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2286,7 +2286,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -2300,20 +2300,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2398,20 +2398,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2518,7 +2518,7 @@ exports[`KeyValueList component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -2532,20 +2532,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2626,20 +2626,20 @@ exports[`KeyValueList component should match a snapshot 1`] = `
           <div
             class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2793,7 +2793,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -2821,7 +2821,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -2835,20 +2835,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2929,20 +2929,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3033,7 +3033,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3061,7 +3061,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3075,20 +3075,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3169,20 +3169,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3273,7 +3273,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3301,7 +3301,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3315,20 +3315,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3409,20 +3409,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3513,7 +3513,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3541,7 +3541,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3555,20 +3555,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3649,20 +3649,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3753,7 +3753,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3781,7 +3781,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -3795,20 +3795,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3893,20 +3893,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4001,7 +4001,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4029,7 +4029,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4043,20 +4043,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4137,20 +4137,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
               <div
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4248,7 +4248,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4276,7 +4276,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4290,20 +4290,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4384,20 +4384,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4488,7 +4488,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4516,7 +4516,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4530,20 +4530,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4624,20 +4624,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4728,7 +4728,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4756,7 +4756,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4770,20 +4770,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4864,20 +4864,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4968,7 +4968,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -4996,7 +4996,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -5010,20 +5010,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5104,20 +5104,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5208,7 +5208,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -5236,7 +5236,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -5250,20 +5250,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5348,20 +5348,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5456,7 +5456,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -5484,7 +5484,7 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -5498,20 +5498,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5592,20 +5592,20 @@ exports[`KeyValueList component should match a snapshot for a grid 1`] = `
             <div
               class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
diff --git a/src/components/label/__styles__/index.ts b/src/components/label/__styles__/index.ts
index 338b2758..0d6ca241 100644
--- a/src/components/label/__styles__/index.ts
+++ b/src/components/label/__styles__/index.ts
@@ -2,5 +2,5 @@ import { styled } from '@linaria/react'
 
 export const ElLabel = styled.label`
   font-size: var(--font-size-small);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 `
diff --git a/src/components/layout/__styles__/index.ts b/src/components/layout/__styles__/index.ts
index 542fefdc..8dd38ea1 100644
--- a/src/components/layout/__styles__/index.ts
+++ b/src/components/layout/__styles__/index.ts
@@ -12,10 +12,10 @@ export const elMainContainer = css`
   height: 100%;
   overflow-y: visible;
   overflow-x: hidden;
-  background: var(--color-white);
+  background: var(--white);
 
   &.${elHasGreyBackground} {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &.${elHasMaxWidth} {
@@ -31,7 +31,7 @@ export const elPageContainer = css`
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
-  background-color: var(--color-white);
+  background-color: var(--white);
 
   ${isTablet} {
     padding: 2.5rem 1.5rem;
@@ -42,7 +42,7 @@ export const elPageContainer = css`
   }
 
   &.${elHasGreyBackground} {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &.${elHasMaxWidth} {
@@ -59,8 +59,8 @@ export const elSecondaryNavContainer = css`
   overflow-y: scroll;
   overflow-x: hidden;
   scrollbar-width: none;
-  background: var(--color-white);
-  border-right: 1px solid var(--color-grey-50);
+  background: var(--white);
+  border-right: 1px solid var(--neutral-050);
 
   &::-webkit-scrollbar {
     display: none;
@@ -77,7 +77,7 @@ export const elFlexContainer = css`
   min-width: 0;
 
   &.${elHasGreyBackground} {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &.${elHasMaxWidth} {
diff --git a/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap b/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap
index 7cfb303a..007bedff 100644
--- a/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap
+++ b/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`FlexContainer should match a snapshot and render children 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -35,7 +35,7 @@ exports[`FlexContainer should match a snapshot and render children 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -115,7 +115,7 @@ exports[`FlexContainer should match a snapshot and render children with all prop
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -180,7 +180,7 @@ exports[`FlexContainer should match a snapshot and render children with all prop
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -303,10 +303,10 @@ exports[`MainContainer should match a snapshot and render children 1`] = `
   height: 100%;
   overflow-y: visible;
   overflow-x: hidden;
-  background: var(--color-white);
+  background: var(--white);
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -330,10 +330,10 @@ exports[`MainContainer should match a snapshot and render children 1`] = `
   height: 100%;
   overflow-y: visible;
   overflow-x: hidden;
-  background: var(--color-white);
+  background: var(--white);
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -414,7 +414,7 @@ exports[`PageContainer should match a snapshot and render children 1`] = `
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
-  background-color: var(--color-white);
+  background-color: var(--white);
 
   , {
     padding: 2.5rem 1.5rem;
@@ -425,7 +425,7 @@ exports[`PageContainer should match a snapshot and render children 1`] = `
   }
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -449,7 +449,7 @@ exports[`PageContainer should match a snapshot and render children 1`] = `
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
-  background-color: var(--color-white);
+  background-color: var(--white);
 
   , {
     padding: 2.5rem 1.5rem;
@@ -460,7 +460,7 @@ exports[`PageContainer should match a snapshot and render children 1`] = `
   }
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -542,8 +542,8 @@ exports[`SecondaryNavContainer should match a snapshot and render children 1`] =
   overflow-y: scroll;
   overflow-x: hidden;
   scrollbar-width: none;
-  background: var(--color-white);
-  border-right: 1px solid var(--color-grey-50);
+  background: var(--white);
+  border-right: 1px solid var(--neutral-050);
 
   &::-webkit-scrollbar {
     display: none;
@@ -570,8 +570,8 @@ exports[`SecondaryNavContainer should match a snapshot and render children 1`] =
   overflow-y: scroll;
   overflow-x: hidden;
   scrollbar-width: none;
-  background: var(--color-white);
-  border-right: 1px solid var(--color-grey-50);
+  background: var(--white);
+  border-right: 1px solid var(--neutral-050);
 
   &::-webkit-scrollbar {
     display: none;
diff --git a/src/components/loader/__styles__/index.ts b/src/components/loader/__styles__/index.ts
index 038a9338..63378bca 100644
--- a/src/components/loader/__styles__/index.ts
+++ b/src/components/loader/__styles__/index.ts
@@ -18,12 +18,12 @@ export const ElLoaderContainer = styled.div`
 export const ElLoaderLabel = styled.p`
   margin-right: 0.75rem;
   font-size: var(--font-size-default);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 `
 
 export const ElLoader = styled.div`
   position: relative;
-  background: var(--color-grey-100);
+  background: var(--neutral-100);
   height: 3px;
   width: 80px;
 `
@@ -32,7 +32,7 @@ export const ElLoaderMovingBar = styled.div`
   position: absolute;
   height: 100%;
   width: 0;
-  background: var(--color-purple-500);
+  background: var(--purple-500);
   animation: moveDarkBlueBar ${ANIM_TIME}s infinite linear;
   z-index: 3;
 
diff --git a/src/components/mobile-controls/__styles__/index.ts b/src/components/mobile-controls/__styles__/index.ts
index a2e5dc8f..6c91a73d 100644
--- a/src/components/mobile-controls/__styles__/index.ts
+++ b/src/components/mobile-controls/__styles__/index.ts
@@ -16,7 +16,7 @@ export const ElMobileControlsBg = styled.div`
   height: 100%;
   top: 0;
   left: 0;
-  background: var(--color-grey-500);
+  background: var(--neutral-500);
   opacity: 0.2;
 
   &.${elIsActive} {
@@ -36,7 +36,7 @@ export const ElMobileControls = styled.div`
   z-index: 99;
 
   ${ElIcon}.${elIntentDefault} {
-    color: var(--color-white);
+    color: var(--white);
   }
 
   ${isTablet} {
@@ -50,14 +50,14 @@ export const ElMobileControls = styled.div`
 
 export const ElMobileControlItem = styled.a`
   padding: 0.5rem 1rem;
-  background: var(--color-white);
+  background: var(--white);
   text-decoration: none;
   border-radius: var(--default-border-radius);
-  border: 1px solid var(--color-grey-100);
+  border: 1px solid var(--neutral-100);
   font-size: var(--font-size-small);
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   margin: 0 0.5rem 0.25rem 0;
   display: none;
   opacity: 1;
@@ -71,7 +71,7 @@ export const ElMobileControlItem = styled.a`
   }
 
   &:hover {
-    border: 1px solid var(--color-grey-400);
-    color: var(--color-grey-700);
+    border: 1px solid var(--neutral-400);
+    color: var(--neutral-700);
   }
 `
diff --git a/src/components/modal/__styles__/index.ts b/src/components/modal/__styles__/index.ts
index 7616dc7f..3d713674 100644
--- a/src/components/modal/__styles__/index.ts
+++ b/src/components/modal/__styles__/index.ts
@@ -9,7 +9,7 @@ export const ElModalBg = styled.div`
   height: 100%;
   top: 0;
   left: 0;
-  background: var(--color-grey-500);
+  background: var(--neutral-500);
   opacity: 0.2;
 
   &.${elIsActive} {
@@ -41,7 +41,7 @@ export const ElModal = styled.div`
 `
 
 export const ElModalHeader = styled.div`
-  color: var(--color-black);
+  color: var(--black);
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
   font-size: var(--font-size-subheading);
diff --git a/src/components/multi-select/__styles__/index.ts b/src/components/multi-select/__styles__/index.ts
index 53d701cc..acaee513 100644
--- a/src/components/multi-select/__styles__/index.ts
+++ b/src/components/multi-select/__styles__/index.ts
@@ -21,9 +21,9 @@ export const ElMultiSelectCheckbox = styled.input`
   position: absolute;
 
   &:checked + label {
-    background: var(--color-white);
+    background: var(--white);
     padding: 0.2rem 2rem 0.2rem 1rem;
-    color: var(--color-black);
+    color: var(--black);
 
     &::before {
       content: '';
@@ -44,7 +44,7 @@ export const ElMultiSelectCheckbox = styled.input`
     }
 
     &.${elHasGreyChips} {
-      background: var(--color-purple-50);
+      background: var(--purple-050);
     }
   }
 
@@ -72,9 +72,9 @@ export const ElMultiSelectLabel = styled.label`
   width: auto;
   margin: 0.25rem 0.375rem;
   height: 28px;
-  background: var(--color-white);
+  background: var(--white);
   border-radius: 1rem;
-  border: 1px solid var(--color-grey-150);
+  border: 1px solid var(--neutral-150);
   padding: 0.2rem 1.5rem;
   position: relative;
   font-size: var(--font-size-small);
@@ -82,22 +82,22 @@ export const ElMultiSelectLabel = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 
   &.${elHasGreyChips} {
-    background: var(--color-purple-50);
-    border: 1px solid var(--color-purple-50);
+    background: var(--purple-050);
+    border: 1px solid var(--purple-050);
   }
 
   &:hover {
-    color: var(--color-black);
+    color: var(--black);
   }
 `
 
 export const ElMultiSelect = styled.div`
   display: flex;
   flex-wrap: wrap;
-  background-color: var(--color-white);
+  background-color: var(--white);
   padding: 0.25rem 0.5rem;
   position: relative;
 `
@@ -107,8 +107,8 @@ export const ElMultiSelectSelected = styled.div`
   align-items: center;
   flex-wrap: wrap;
   padding: 0.25rem 0.5rem;
-  background-color: var(--color-white);
-  border: 1px solid var(--color-grey-150);
+  background-color: var(--white);
+  border: 1px solid var(--neutral-150);
   border-radius: 2px 2px 0 0;
   min-height: 3rem;
   padding: 0.25rem 0.5rem;
@@ -117,7 +117,7 @@ export const ElMultiSelectSelected = styled.div`
   p {
     margin-left: 0.375rem;
     font-size: var(--font-size-small);
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 `
 
@@ -125,8 +125,8 @@ export const ElMultiSelectUnSelected = styled.div`
   display: flex;
   flex-wrap: wrap;
   padding: 0.25rem 0.5rem;
-  background-color: var(--color-white);
-  border: 1px solid var(--color-grey-150);
+  background-color: var(--white);
+  border: 1px solid var(--neutral-150);
   border-top: none;
   border-radius: 0 0 4px 4px;
   padding: 0.25rem 0.5rem;
diff --git a/src/components/nav/__styles__/index.ts b/src/components/nav/__styles__/index.ts
index e1d1b43d..e3812274 100644
--- a/src/components/nav/__styles__/index.ts
+++ b/src/components/nav/__styles__/index.ts
@@ -10,7 +10,7 @@ export const ElNavBg = styled.div`
   height: 100%;
   top: 0;
   left: 0;
-  background: var(--color-grey-500);
+  background: var(--neutral-500);
   opacity: 0.2;
 
   &.${elIsActive} {
@@ -37,7 +37,7 @@ export const ElNavContainer = styled.nav`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--color-white);
+  background-color: var(--white);
   height: auto;
   width: 100%;
   position: sticky;
@@ -53,7 +53,7 @@ export const ElNavContainer = styled.nav`
     flex: 0 0 3.5rem;
     flex-wrap: nowrap;
     justify-content: space-between;
-    border-bottom: 1px solid var(--color-grey-100);
+    border-bottom: 1px solid var(--neutral-100);
   }
 `
 
@@ -72,7 +72,7 @@ export const ElNavItem = styled.a`
   font-family: var(--font-sans-serif);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   display: flex;
   text-align: center;
   justify-content: flex-start;
@@ -84,25 +84,25 @@ export const ElNavItem = styled.a`
   opacity: 1;
   flex: 1 0 100%;
   width: 100%;
-  border-left: 3px solid var(--color-white);
+  border-left: 3px solid var(--white);
 
   &:hover {
-    color: var(--color-grey-500);
-    background-color: var(--color-grey-50);
+    color: var(--neutral-500);
+    background-color: var(--neutral-050);
   }
 
   &:hover:not(:first-child) {
-    border-left: 3px solid var(--color-purple-300);
+    border-left: 3px solid var(--purple-300);
   }
 
   &:first-child {
     opacity: 1;
     padding: 0;
-    background-color: var(--color-white);
+    background-color: var(--white);
     margin-right: auto;
     width: 100%;
     padding: 0rem 1.25rem;
-    border-bottom: 1px solid var(--color-grey-100);
+    border-bottom: 1px solid var(--neutral-100);
   }
 
   &:not(:first-child) {
@@ -129,7 +129,7 @@ export const ElNavItem = styled.a`
     }
 
     &:hover:not(:first-child) {
-      background-color: var(--color-grey-50);
+      background-color: var(--neutral-050);
       border-left: none;
     }
 
@@ -147,18 +147,18 @@ export const ElNavItem = styled.a`
 
 export const elNavItemActive = css`
   &:not(:first-child) {
-    background-color: var(--color-purple-50);
-    border-left: 3px solid var(--color-purple-500);
-    color: var(--color-purple-500);
+    background-color: var(--purple-050);
+    border-left: 3px solid var(--purple-500);
+    color: var(--purple-500);
   }
 
   @media screen and (min-width: 768px) {
     &:not(:first-child) {
-      --nav-menu-icon-primary-accent: var(--color-purple-500);
-      --nav-menu-icon-secondary-accent: var(--color-purple-300);
+      --nav-menu-icon-primary-accent: var(--purple-500);
+      --nav-menu-icon-secondary-accent: var(--purple-300);
       padding: 0.375rem 0.75rem;
       border-radius: 0.25rem;
-      background-color: var(--color-grey-50);
+      background-color: var(--neutral-050);
       border-left: none;
       height: 2rem;
     }
@@ -177,7 +177,7 @@ export const elNavItemExpanded = css`
     height: auto;
 
     &:last-child {
-      border-bottom: 1px solid var(--color-grey-100);
+      border-bottom: 1px solid var(--neutral-100);
     }
   }
 `
@@ -192,14 +192,14 @@ export const ElNavSubItem = styled.a`
   height: 0;
   font-family: var(--font-sans-serif);
   font-size: var(--font-size-small);
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   opacity: 0;
   display: flex;
   text-align: flex-start;
   justify-content: flex-start;
   align-items: center;
   transition: all 0.3s linear;
-  border-left: 3px solid var(--color-white);
+  border-left: 3px solid var(--white);
 
   @media screen and (min-width: 768px) {
     display: none;
@@ -216,13 +216,13 @@ export const elNavSubItemExpanded = css`
     margin-left: 1rem;
 
     &:hover {
-      color: var(--color-purple-300);
+      color: var(--purple-300);
     }
   }
 `
 
 export const elNavSubItemActive = css`
-  color: var(--color-purple-500);
+  color: var(--purple-500);
   margin-left: 1rem;
 `
 
@@ -244,8 +244,8 @@ export const ElNavMenu = styled.div`
   position: absolute;
   top: 44px;
   right: 0;
-  background-color: var(--color-white);
-  color: var(--color-black);
+  background-color: var(--white);
+  color: var(--black);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -280,7 +280,7 @@ export const ElNavMenuOption = styled.div`
 export const ElNavMenuOptionDivider = styled.div`
   height: 0;
   width: 100%;
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
   margin: 0.5rem 0;
 `
 
@@ -302,7 +302,7 @@ export const ElNavResponsiveAvatarWrap = styled.div`
 
   &:hover {
     ${ElAvatar} {
-      background-color: var(--color-purple-100);
+      background-color: var(--purple-100);
     }
   }
 
diff --git a/src/components/nav/__tests__/__snapshots__/nav-responsive.test.tsx.snap b/src/components/nav/__tests__/__snapshots__/nav-responsive.test.tsx.snap
index 940097f1..1e75ef51 100644
--- a/src/components/nav/__tests__/__snapshots__/nav-responsive.test.tsx.snap
+++ b/src/components/nav/__tests__/__snapshots__/nav-responsive.test.tsx.snap
@@ -53,18 +53,18 @@ exports[`NavResponsive component should match a snapshot 1`] = `
         <mock-styled.a
           classname="mock-css.
   &:not(:first-child) {
-    background-color: var(--color-purple-50);
-    border-left: 3px solid var(--color-purple-500);
-    color: var(--color-purple-500);
+    background-color: var(--purple-050);
+    border-left: 3px solid var(--purple-500);
+    color: var(--purple-500);
   }
 
   @media screen and (min-width: 768px) {
     &:not(:first-child) {
-      --nav-menu-icon-primary-accent: var(--color-purple-500);
-      --nav-menu-icon-secondary-accent: var(--color-purple-300);
+      --nav-menu-icon-primary-accent: var(--purple-500);
+      --nav-menu-icon-secondary-accent: var(--purple-300);
       padding: 0.375rem 0.75rem;
       border-radius: 0.25rem;
-      background-color: var(--color-grey-50);
+      background-color: var(--neutral-050);
       border-left: none;
       height: 2rem;
     }
@@ -182,18 +182,18 @@ exports[`NavResponsive component should match a snapshot 1`] = `
       <mock-styled.a
         classname="mock-css.
   &:not(:first-child) {
-    background-color: var(--color-purple-50);
-    border-left: 3px solid var(--color-purple-500);
-    color: var(--color-purple-500);
+    background-color: var(--purple-050);
+    border-left: 3px solid var(--purple-500);
+    color: var(--purple-500);
   }
 
   @media screen and (min-width: 768px) {
     &:not(:first-child) {
-      --nav-menu-icon-primary-accent: var(--color-purple-500);
-      --nav-menu-icon-secondary-accent: var(--color-purple-300);
+      --nav-menu-icon-primary-accent: var(--purple-500);
+      --nav-menu-icon-secondary-accent: var(--purple-300);
       padding: 0.375rem 0.75rem;
       border-radius: 0.25rem;
-      background-color: var(--color-grey-50);
+      background-color: var(--neutral-050);
       border-left: none;
       height: 2rem;
     }
diff --git a/src/components/page-header/__styles__/index.ts b/src/components/page-header/__styles__/index.ts
index fcdac280..68e7463d 100644
--- a/src/components/page-header/__styles__/index.ts
+++ b/src/components/page-header/__styles__/index.ts
@@ -113,7 +113,7 @@ export const ElPageHeaderSeparator = styled.span`
   height: 1.5rem;
   width: 1.5rem;
   position: relative;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 
   &::before {
     content: '';
diff --git a/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap b/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap
index 95088b43..7116e1e3 100644
--- a/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap
+++ b/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -50,7 +50,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -89,7 +89,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -128,7 +128,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -184,7 +184,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -201,20 +201,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                   <h1
                     class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -314,20 +314,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                 <h2
                   class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -412,7 +412,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -424,20 +424,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                   <div
                     class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -516,20 +516,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                   <div
                     class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -608,20 +608,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                   <div
                     class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -750,11 +750,11 @@ exports[`PageHeader component should match a snapshot 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
                 >
                   Tab Content 1
@@ -781,11 +781,11 @@ exports[`PageHeader component should match a snapshot 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
                 >
                   Tab Content 2
@@ -812,11 +812,11 @@ exports[`PageHeader component should match a snapshot 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
                 >
                   Tab Content 3
@@ -853,7 +853,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -880,7 +880,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -919,7 +919,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -958,7 +958,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1014,7 +1014,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1031,20 +1031,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                 <h1
                   class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1144,20 +1144,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
               <h2
                 class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1242,7 +1242,7 @@ exports[`PageHeader component should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -1254,20 +1254,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                 <div
                   class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1346,20 +1346,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                 <div
                   class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1438,20 +1438,20 @@ exports[`PageHeader component should match a snapshot 1`] = `
                 <div
                   class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1580,11 +1580,11 @@ exports[`PageHeader component should match a snapshot 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
               >
                 Tab Content 1
@@ -1611,11 +1611,11 @@ exports[`PageHeader component should match a snapshot 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
               >
                 Tab Content 2
@@ -1642,11 +1642,11 @@ exports[`PageHeader component should match a snapshot 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
               >
                 Tab Content 3
diff --git a/src/components/pagination/__styles__/index.ts b/src/components/pagination/__styles__/index.ts
index 3edadbe4..81caa26d 100644
--- a/src/components/pagination/__styles__/index.ts
+++ b/src/components/pagination/__styles__/index.ts
@@ -41,7 +41,7 @@ export const ElPaginationButton = styled.button`
   margin: 0 0.25rem;
 
   svg {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
     font-size: 1rem;
   }
 
diff --git a/src/components/persistent-notification/__styles__/index.ts b/src/components/persistent-notification/__styles__/index.ts
index 766bb9d0..8a690ca6 100644
--- a/src/components/persistent-notification/__styles__/index.ts
+++ b/src/components/persistent-notification/__styles__/index.ts
@@ -26,7 +26,7 @@ export const elPnIcon = css`
   cursor: pointer;
 
   ${ElIcon} {
-    color: var(--color-white);
+    color: var(--white);
   }
 `
 
@@ -34,7 +34,7 @@ export const elPnContent = css`
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 `
 
@@ -67,7 +67,7 @@ export const ElPersistentNotification = styled.div`
   &.${elPnIsInline} {
     z-index: auto;
     position: relative;
-    background: var(--color-white);
+    background: var(--white);
     .${elPnContent} {
       border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;
     }
diff --git a/src/components/persistent-notification/__tests__/__snapshots__/persistent-notification.test.tsx.snap b/src/components/persistent-notification/__tests__/__snapshots__/persistent-notification.test.tsx.snap
index b2156223..bfe81aa0 100644
--- a/src/components/persistent-notification/__tests__/__snapshots__/persistent-notification.test.tsx.snap
+++ b/src/components/persistent-notification/__tests__/__snapshots__/persistent-notification.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`PersistentNotification component should match a snapshot 1`] = `
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
           data-testid="close-icon"
@@ -40,7 +40,7 @@ exports[`PersistentNotification component should match a snapshot 1`] = `
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
         >
@@ -63,7 +63,7 @@ exports[`PersistentNotification component should match a snapshot 1`] = `
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
         data-testid="close-icon"
@@ -85,7 +85,7 @@ exports[`PersistentNotification component should match a snapshot 1`] = `
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
       >
@@ -165,7 +165,7 @@ exports[`PersistentNotification component should match a snapshot for an inline
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
           data-testid="close-icon"
@@ -187,7 +187,7 @@ exports[`PersistentNotification component should match a snapshot for an inline
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
         >
@@ -210,7 +210,7 @@ exports[`PersistentNotification component should match a snapshot for an inline
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
         data-testid="close-icon"
@@ -232,7 +232,7 @@ exports[`PersistentNotification component should match a snapshot for an inline
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
       >
@@ -312,7 +312,7 @@ exports[`PersistentNotification component should match a snapshot when expanded
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
           data-testid="close-icon"
@@ -334,7 +334,7 @@ exports[`PersistentNotification component should match a snapshot when expanded
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
         >
@@ -357,7 +357,7 @@ exports[`PersistentNotification component should match a snapshot when expanded
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
         data-testid="close-icon"
@@ -379,7 +379,7 @@ exports[`PersistentNotification component should match a snapshot when expanded
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
       >
@@ -459,7 +459,7 @@ exports[`PersistentNotification component should match a snapshot when given an
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
           data-testid="close-icon"
@@ -481,7 +481,7 @@ exports[`PersistentNotification component should match a snapshot when given an
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
         >
@@ -504,7 +504,7 @@ exports[`PersistentNotification component should match a snapshot when given an
   cursor: pointer;
 
   , {
-    color: var(--color-white);
+    color: var(--white);
   }
 "
         data-testid="close-icon"
@@ -526,7 +526,7 @@ exports[`PersistentNotification component should match a snapshot when given an
   padding: 0.75rem;
   transition: 0.5s;
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
 "
       >
diff --git a/src/components/placeholder-image/__styles__/index.ts b/src/components/placeholder-image/__styles__/index.ts
index d2cd3b9b..526748ed 100644
--- a/src/components/placeholder-image/__styles__/index.ts
+++ b/src/components/placeholder-image/__styles__/index.ts
@@ -4,8 +4,8 @@ export const ElPlaceholderImage = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-black);
-  background-color: var(--color-white);
+  color: var(--black);
+  background-color: var(--white);
   border-radius: 0.25rem;
   flex-shrink: 0;
 `
@@ -17,5 +17,5 @@ export const ElPlaceholderImageWrapper = styled.div`
   width: 100%;
   height: 100%;
   border-radius: 0.25rem;
-  background-color: var(--color-white);
+  background-color: var(--white);
 `
diff --git a/src/components/progress-bar/__styles__/index.ts b/src/components/progress-bar/__styles__/index.ts
index d6bb6ac0..1384e288 100644
--- a/src/components/progress-bar/__styles__/index.ts
+++ b/src/components/progress-bar/__styles__/index.ts
@@ -7,7 +7,7 @@ export const ElProgressBarContainer = styled.div`
   justify-content: flex-start;
   width: 100%;
   height: 3px;
-  background-color: var(--color-grey-100);
+  background-color: var(--neutral-100);
 `
 
 export const ElProgressBarLabel = styled.div`
@@ -26,7 +26,7 @@ export const ElProgressBarInner = styled.div`
 export const ElProgressBarItem = styled.div`
   width: 100%;
   height: 3px;
-  background-color: var(--color-purple-500);
+  background-color: var(--purple-500);
 `
 
 export const elProgressBarLabelRight = css`
diff --git a/src/components/searchable-dropdown/__styles__/index.ts b/src/components/searchable-dropdown/__styles__/index.ts
index cdd7a543..0abd3f23 100644
--- a/src/components/searchable-dropdown/__styles__/index.ts
+++ b/src/components/searchable-dropdown/__styles__/index.ts
@@ -9,7 +9,7 @@ export const ElSearchableDropdownContainer = styled.div`
   display: flex;
   position: relative;
   flex-grow: 1;
-  color: var(--color-black);
+  color: var(--black);
 `
 
 export const ElSearchableDropdownResult = styled.div`
@@ -22,7 +22,7 @@ export const ElSearchableDropdownResult = styled.div`
 
   &:hover {
     background-color: var(--intent-primary);
-    color: var(--color-white);
+    color: var(--white);
     cursor: pointer;
   }
 `
@@ -39,7 +39,7 @@ export const ElSearchableDropdownResultsContainer = styled.div`
   border: 1px solid #ccc;
   border-top: none;
   border-radius: 4px;
-  background: var(--color-white);
+  background: var(--white);
   box-shadow: 0px 4px 16px 0px rgba(34, 43, 51, 0.16);
 `
 
diff --git a/src/components/secondary-nav/__styles__/index.ts b/src/components/secondary-nav/__styles__/index.ts
index c90b4997..578da0fd 100644
--- a/src/components/secondary-nav/__styles__/index.ts
+++ b/src/components/secondary-nav/__styles__/index.ts
@@ -8,20 +8,20 @@ export const ElSecondaryNav = styled.div`
 
 export const ElSecondaryNavItem = styled.div`
   padding: 0.625rem 1.5rem;
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   font-size: var(--font-size-small);
   cursor: pointer;
   position: relative;
-  border-left: 3px solid var(--color-white);
+  border-left: 3px solid var(--white);
 
   &.${elIsActive} {
-    border-left: 3px solid var(--color-purple-500);
-    background-color: var(--color-purple-50);
-    color: var(--color-purple-500);
+    border-left: 3px solid var(--purple-500);
+    background-color: var(--purple-050);
+    color: var(--purple-500);
   }
 
   &:hover {
-    border-left: 3px solid var(--color-purple-500);
-    background-color: var(--color-purple-50);
+    border-left: 3px solid var(--purple-500);
+    background-color: var(--purple-050);
   }
 `
diff --git a/src/components/select/__styles__/index.ts b/src/components/select/__styles__/index.ts
index a77bc393..31a64b52 100644
--- a/src/components/select/__styles__/index.ts
+++ b/src/components/select/__styles__/index.ts
@@ -2,7 +2,7 @@ import { styled } from '@linaria/react'
 
 export const ElSelect = styled.select`
   display: flex;
-  color: var(--color-black);
+  color: var(--black);
   width: 100%;
   background-color: var(--component-input-bg);
   padding: 0 0.6875rem;
@@ -29,8 +29,8 @@ export const ElSelect = styled.select`
   }
 
   &:disabled {
-    background-color: var(--color-grey-100);
-    color: var(--color-grey-300);
+    background-color: var(--neutral-100);
+    color: var(--neutral-300);
 
     &:hover {
       background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0498 3.17368L6.00273 8.55662L0.956931 3.17508C0.738006 2.94162 0.383056 2.94165 0.164132 3.1751C-0.054715 3.40862 -0.0547118 3.78713 0.164149 4.02062L5.60635 9.82494C5.82527 10.0584 6.1802 10.0583 6.39913 9.82493L11.8413 4.02064L11.8426 4.01921C12.0577 3.78166 12.0516 3.40311 11.8288 3.17369C11.6116 2.94991 11.2671 2.94989 11.0498 3.17368Z" fill="currentColor"/></svg>');
diff --git a/src/components/snack/__styles__/index.ts b/src/components/snack/__styles__/index.ts
index 7fab3a82..e2fca3fa 100644
--- a/src/components/snack/__styles__/index.ts
+++ b/src/components/snack/__styles__/index.ts
@@ -15,8 +15,8 @@ export const ElSnack = styled.div`
   border-radius: var(--default-border-radius);
   padding: 0.75rem 0.75rem;
   align-items: center;
-  background: var(--color-grey-100);
-  color: var(--color-black);
+  background: var(--neutral-100);
+  color: var(--black);
   font-size: var(--font-size-default);
 
   &.${elIntentPrimary} {
@@ -55,7 +55,7 @@ export const elSnackIcon = css`
 export const elSnackCloseIcon = css`
   cursor: pointer;
   padding-left: 0.5rem;
-  color: var(--color-black);
+  color: var(--black);
 `
 
 export const ElSnackHolder = styled.div`
@@ -70,6 +70,6 @@ export const ElSnackHolder = styled.div`
   ${ElSnack} {
     display: flex;
     margin-bottom: 1rem;
-    /* box-shadow: 3px 3px 5px var(--color-grey-400); */
+    /* box-shadow: 3px 3px 5px var(--neutral-400); */
   }
 `
diff --git a/src/components/snack/__tests__/__snapshots__/snack.test.tsx.snap b/src/components/snack/__tests__/__snapshots__/snack.test.tsx.snap
index 760ee40f..5da0d4de 100644
--- a/src/components/snack/__tests__/__snapshots__/snack.test.tsx.snap
+++ b/src/components/snack/__tests__/__snapshots__/snack.test.tsx.snap
@@ -200,7 +200,7 @@ exports[`SnackHolder component should match a snapshot 1`] = `
             classname="mock-css.
   cursor: pointer;
   padding-left: 0.5rem;
-  color: var(--color-black);
+  color: var(--black);
 "
             data-testid="close-icon"
             style="font-size: 1.25rem;"
@@ -239,7 +239,7 @@ exports[`SnackHolder component should match a snapshot 1`] = `
           classname="mock-css.
   cursor: pointer;
   padding-left: 0.5rem;
-  color: var(--color-black);
+  color: var(--black);
 "
           data-testid="close-icon"
           style="font-size: 1.25rem;"
diff --git a/src/components/status-indicator/__styles__/index.ts b/src/components/status-indicator/__styles__/index.ts
index cd815060..0bd61334 100644
--- a/src/components/status-indicator/__styles__/index.ts
+++ b/src/components/status-indicator/__styles__/index.ts
@@ -18,8 +18,8 @@ export const ElStatusIndicator = styled.span`
   width: 0.75rem;
   height: 0.75rem;
   margin: 0 0.25rem;
-  background: var(--color-grey-400);
-  color: var(--color-black);
+  background: var(--neutral-400);
+  color: var(--black);
 
   &.${elIntentPrimary} {
     background-image: linear-gradient(to right, var(--intent-primary), var(--intent-primary));
diff --git a/src/components/steps/__styles__/index.ts b/src/components/steps/__styles__/index.ts
index 87aed92b..2e82c2fe 100644
--- a/src/components/steps/__styles__/index.ts
+++ b/src/components/steps/__styles__/index.ts
@@ -6,8 +6,8 @@ export const ElSteps = styled.div`
   display: flex;
 `
 export const ElStep = styled.div`
-  background-color: var(--color-grey-100);
-  color: var(--color-grey-500);
+  background-color: var(--neutral-100);
+  color: var(--neutral-500);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-default);
   border-radius: 100%;
@@ -26,12 +26,12 @@ export const ElStep = styled.div`
   &.${elIsUsed} {
     &:before,
     &:after {
-      background: var(--color-grey-100);
+      background: var(--neutral-100);
     }
   }
 
   &.${elIsActive} {
-    color: var(--color-white);
+    color: var(--white);
     background-color: var(--intent-primary);
   }
 
@@ -43,7 +43,7 @@ export const ElStep = styled.div`
     top: 50%;
     width: var(--component-steps-gutter-width);
     height: 1.5px;
-    background: var(--color-grey-100);
+    background: var(--neutral-100);
   }
 
   &:before {
diff --git a/src/components/table/__styles__/index.ts b/src/components/table/__styles__/index.ts
index 5747a4d4..b1347880 100644
--- a/src/components/table/__styles__/index.ts
+++ b/src/components/table/__styles__/index.ts
@@ -144,7 +144,7 @@ export const elTableNarrowCellIsFullWidth = css`
 export const elTableCellHasDarkText = css``
 
 export const elTableRowFocused = css`
-  background: var(--color-purple-50);
+  background: var(--purple-050);
 `
 
 // molecules
@@ -180,7 +180,7 @@ export const ElTableHeadersRow = styled.div`
   grid-template-columns:
     repeat(var(--component-table-num-columns, auto-fit), minmax(var(--component-table-min-column-width), 1fr))
     var(--component-table-expandable-trigger-width, 0);
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
 
   ${isNarrow} {
     display: none;
@@ -188,7 +188,7 @@ export const ElTableHeadersRow = styled.div`
 `
 
 export const ElTableHeader = styled.div`
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   padding: 1rem 0.5rem;
   display: flex;
   align-items: center;
@@ -208,8 +208,8 @@ export const ElTableRow = styled.div`
   grid-template-columns:
     repeat(var(--component-table-num-columns, auto-fit), minmax(var(--component-table-min-column-width), 1fr))
     var(--component-table-expandable-trigger-width, 0);
-  background: var(--color-white);
-  border-bottom: 1px solid var(--color-grey-100);
+  background: var(--white);
+  border-bottom: 1px solid var(--neutral-100);
 
   ${isNarrow} {
     grid-template-columns: 1fr 1fr;
@@ -217,7 +217,7 @@ export const ElTableRow = styled.div`
 `
 
 export const ElTableCtaCell = styled.div`
-  background: var(--color-white);
+  background: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -240,7 +240,7 @@ export const ElTableCell = styled.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   /* margin-right: 2px; */
   word-break: break-word;
   font-size: var(--font-size-small);
@@ -256,7 +256,7 @@ export const ElTableCell = styled.div`
   }
 
   &.${elTableCellHasDarkText} {
-    color: var(--color-black);
+    color: var(--black);
   }
 `
 
@@ -267,7 +267,7 @@ export const ElTableCellSplitWrap = styled.div`
 
 export const ElTableCellSplitData = styled.div`
   font-size: var(--font-size-small);
-  color: var(--color-black);
+  color: var(--black);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -275,7 +275,7 @@ export const ElTableCellSplitData = styled.div`
 
 export const ElTableCellSplitSubData = styled.div`
   font-size: var(--font-size-smallest);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -299,27 +299,27 @@ export const ElTableExpandableRowTriggerCell = styled.div`
 
 export const ElTableRowContainer = styled.div`
   &:hover:not(.${elIsActive}) {
-    background-color: var(--color-grey-100);
+    background-color: var(--neutral-100);
 
     ${ElTableCell}, ${ElTableExpandableRowTriggerCell}, ${ElTableRow}, ${ElTableCtaCell} {
-      background-color: var(--color-grey-100);
+      background-color: var(--neutral-100);
     }
   }
 
   &:focus,
   &.${elIsActive}, .${elTableRowFocused} {
-    background: var(--color-purple-50);
+    background: var(--purple-050);
 
     ${ElTableCell}, ${ElTableExpandableRowTriggerCell}, ${ElTableRow}, ${ElTableCtaCell} {
-      background: var(--color-purple-50);
+      background: var(--purple-050);
     }
   }
 
   &:not(.${elIsActive}) {
-    background: var(--color-white);
+    background: var(--white);
 
     ${ElTableCell}, ${ElTableExpandableRowTriggerCell}, ${ElTableRow}, ${ElTableCtaCell} {
-      background: var(--color-white);
+      background: var(--white);
     }
   }
 `
@@ -339,7 +339,7 @@ export const ElTableCellContent = styled.div`
       display: block;
       content: attr(data-narrow-label);
       width: 100%;
-      color: var(--color-black);
+      color: var(--black);
     }
   }
 `
@@ -352,7 +352,7 @@ export const ElTableCtaIconContainer = styled.div`
 
 export const ElTableExpandableRow = styled.div`
   height: 0;
-  background: var(--color-white);
+  background: var(--white);
   opacity: 0;
   border: none;
   overflow-y: scroll;
@@ -366,7 +366,7 @@ export const ElTableExpandableRow = styled.div`
 
 export const ElTableExpandableContainer = styled.div`
   padding: 1rem 0.5rem;
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
 `
 
 export const ElTable = styled.div`
@@ -396,7 +396,7 @@ export const ElTable = styled.div`
         display: block;
         content: attr(data-narrow-label);
         width: 100%;
-        color: var(--color-black);
+        color: var(--black);
       }
     }
 
diff --git a/src/components/tabs/__styles__/index.ts b/src/components/tabs/__styles__/index.ts
index fa30c1fa..4bdeb53f 100644
--- a/src/components/tabs/__styles__/index.ts
+++ b/src/components/tabs/__styles__/index.ts
@@ -9,11 +9,11 @@ export const elTabsItem = css`
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 `
 
 export const elTabsFullWidth = css`
@@ -48,7 +48,7 @@ export const ElTabs = styled.input`
 
 export const ElTabsLabel = styled.label`
   cursor: pointer;
-  background: var(--color-white);
+  background: var(--white);
   display: flex;
   align-items: center;
   margin: 0 auto;
@@ -62,7 +62,7 @@ export const ElTabsLabel = styled.label`
 export const ElTabsWrap = styled.div`
   display: flex;
   flex-direction: column;
-  background: var(--color-white);
+  background: var(--white);
   overflow: hidden;
   width: fit-content;
   align-items: flex-start;
@@ -87,7 +87,7 @@ export const ElTabsOptionsWrap = styled.div`
 export const ElTabsFooter = styled.div`
   width: 100%;
   height: 1.125rem;
-  border-top: 1px solid var(--color-grey-100);
+  border-top: 1px solid var(--neutral-100);
 
   &.${elTabsFullWidth} {
     width: 100%;
diff --git a/src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap b/src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
index b39904dd..5f7704f4 100644
--- a/src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
+++ b/src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
@@ -36,11 +36,11 @@ exports[`Tabs should match a snapshot and render children 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
             >
               Option 1
@@ -68,11 +68,11 @@ exports[`Tabs should match a snapshot and render children 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
             >
               Option 2
@@ -100,11 +100,11 @@ exports[`Tabs should match a snapshot and render children 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
             >
               Option 3
@@ -152,11 +152,11 @@ exports[`Tabs should match a snapshot and render children 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
           >
             Option 1
@@ -184,11 +184,11 @@ exports[`Tabs should match a snapshot and render children 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
           >
             Option 2
@@ -216,11 +216,11 @@ exports[`Tabs should match a snapshot and render children 1`] = `
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 2px solid var(--color-white);
+  border-bottom: 2px solid var(--white);
   white-space: nowrap;
   font-size: var(--font-size-default);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 "
           >
             Option 3
diff --git a/src/components/tag/__styles__/index.ts b/src/components/tag/__styles__/index.ts
index 35735379..d8148367 100644
--- a/src/components/tag/__styles__/index.ts
+++ b/src/components/tag/__styles__/index.ts
@@ -14,8 +14,8 @@ export const ElTag = styled.span`
   display: inline-block;
   font-size: var(--font-size-smallest);
   padding: 0.25rem 1rem;
-  background: var(--color-grey-400);
-  color: var(--color-white);
+  background: var(--neutral-400);
+  color: var(--white);
 
   &.${elIntentPrimary} {
     background-image: linear-gradient(to right, var(--intent-primary), var(--intent-primary));
diff --git a/src/components/textarea/__styles__/index.ts b/src/components/textarea/__styles__/index.ts
index ff9cfe62..9e45306f 100644
--- a/src/components/textarea/__styles__/index.ts
+++ b/src/components/textarea/__styles__/index.ts
@@ -5,7 +5,7 @@ export const elTextAreaHasError = css``
 
 export const ElTextArea = styled.textarea`
   display: flex;
-  color: var(--color-black);
+  color: var(--black);
   flex-grow: 1;
   background: var(--component-input-bg);
   padding: 0.5rem 0.6875rem;
@@ -22,11 +22,11 @@ export const ElTextArea = styled.textarea`
 
   &.${elTextAreaHasError} {
     border: 1px solid var(--intent-danger);
-    background-color: var(--color-red-100);
+    background-color: var(--red-100);
   }
 
   &::placeholder {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
     font-family: var(--font-sans-serif);
     font-size: var(--font-size-small);
   }
diff --git a/src/components/tile/__styles__/index.ts b/src/components/tile/__styles__/index.ts
index d90bfb5e..206df844 100644
--- a/src/components/tile/__styles__/index.ts
+++ b/src/components/tile/__styles__/index.ts
@@ -6,9 +6,9 @@ export const elTilePaddingNone = css``
 
 export const ElTile = styled.div`
   border-radius: 0.5rem;
-  border: 1px solid var(--color-grey-100);
+  border: 1px solid var(--neutral-100);
   padding: 1.5rem;
-  background-color: var(--color-white);
+  background-color: var(--white);
 
   &.${elTilePaddingSmall} {
     padding: 1rem;
diff --git a/src/components/toggle/__styles__/index.ts b/src/components/toggle/__styles__/index.ts
index d37491a5..0ec86cb6 100644
--- a/src/components/toggle/__styles__/index.ts
+++ b/src/components/toggle/__styles__/index.ts
@@ -13,7 +13,7 @@ export const ElToggleItem = styled.span`
   justify-content: center;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 `
 
 export const ElToggleRadioItem = styled.span`
@@ -38,7 +38,7 @@ export const ElToggleCheckbox = styled.input`
   width: 0;
   visibility: hidden;
   position: absolute;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 
   + label ${ElToggleItem} {
     transition: all 0.2s linear;
@@ -51,14 +51,14 @@ export const ElToggleCheckbox = styled.input`
   &:not(:checked) + label ${ElToggleItem} {
     &:last-child {
       background: var(--intent-primary);
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
   &:checked + label ${ElToggleItem} {
     &:first-child {
       background: var(--intent-primary);
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 `
@@ -67,7 +67,7 @@ export const ElToggleLabel = styled.label`
   cursor: pointer;
   width: fit-content;
   height: 2rem;
-  background: var(--color-white);
+  background: var(--white);
   border-radius: 1.5rem;
   border: var(--component-input-border);
   display: flex;
@@ -76,8 +76,8 @@ export const ElToggleLabel = styled.label`
   padding: 0.25rem;
 
   &.${elHasGreyBg} {
-    background: var(--color-purple-50);
-    border: 1px solid var(--color-purple-50);
+    background: var(--purple-050);
+    border: 1px solid var(--purple-050);
   }
 
   &.${elToggleFullWidth} {
@@ -90,7 +90,7 @@ export const ElToggleRadio = styled.input`
   width: 0;
   visibility: hidden;
   position: absolute;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 
   + label ${ElToggleRadioItem} {
     transition: all 0.2s linear;
@@ -98,7 +98,7 @@ export const ElToggleRadio = styled.input`
 
   &:checked + label ${ElToggleRadioItem} {
     background: var(--intent-primary);
-    color: var(--color-white);
+    color: var(--white);
   }
 
   &:disabled + label ${ElToggleRadioItem} {
@@ -109,7 +109,7 @@ export const ElToggleRadio = styled.input`
 export const ElToggleRadioLabel = styled.label`
   cursor: pointer;
   width: fit-content;
-  background: var(--color-white);
+  background: var(--white);
   display: flex;
   align-items: center;
   height: 100%;
@@ -117,14 +117,14 @@ export const ElToggleRadioLabel = styled.label`
   margin-right: 0.375rem;
 
   &.${elHasGreyBg} {
-    background: var(--color-purple-50);
+    background: var(--purple-050);
   }
 `
 
 export const ElToggleRadioWrap = styled.div`
   display: flex;
   border: var(--component-input-border);
-  background: var(--color-white);
+  background: var(--white);
   border-radius: 1rem;
   overflow: hidden;
   padding: 0.25rem 0 0.25rem 0.25rem;
@@ -138,7 +138,7 @@ export const ElToggleRadioWrap = styled.div`
   }
 
   &.${elHasGreyBg} {
-    background: var(--color-purple-50);
-    border: 1px solid var(--color-purple-50);
+    background: var(--purple-050);
+    border: 1px solid var(--purple-050);
   }
 `
diff --git a/src/components/tool-tip/__styles__/index.ts b/src/components/tool-tip/__styles__/index.ts
index d24c9929..06e6fc7a 100644
--- a/src/components/tool-tip/__styles__/index.ts
+++ b/src/components/tool-tip/__styles__/index.ts
@@ -4,10 +4,10 @@ import { css } from '@linaria/core'
 export const ElToolTipChild = styled.div`
   position: absolute;
   padding: 0.5rem;
-  background: var(--color-black);
+  background: var(--black);
   border-radius: 0.5rem;
   font-size: var(--font-size-small);
-  color: var(--color-white);
+  color: var(--white);
   top: calc(-35px + -0.25rem);
   display: none;
   left: auto;
@@ -18,7 +18,7 @@ export const ElToolTipChild = styled.div`
     bottom: -0.5rem;
     left: calc(50% - 0.25rem);
     border: 0.25rem solid transparent;
-    border-top-color: var(--color-black);
+    border-top-color: var(--black);
     content: '';
   }
 `
diff --git a/src/components/typography/__styles__/index.ts b/src/components/typography/__styles__/index.ts
index 260005a5..3939863e 100644
--- a/src/components/typography/__styles__/index.ts
+++ b/src/components/typography/__styles__/index.ts
@@ -24,20 +24,20 @@ export const elHasUpperCasedText = css``
 
 export const elTextBase = css`
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &.${elHasGreyText} {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &.${elHasDisabledText} {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -148,21 +148,21 @@ export const elText2XS = css`
 export const elTitle = css`
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-bold);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-heading);
   line-height: 2.25rem;
   letter-spacing: 0%;
   margin-bottom: 1rem;
 
   &.${elHasGreyText} {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &.${elHasDisabledText} {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -230,21 +230,21 @@ export const elTitle = css`
 export const elSubtitle = css`
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-subheading);
   line-height: 1.5rem;
   letter-spacing: 0%;
   margin-bottom: 0.75rem;
 
   &.${elHasGreyText} {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &.${elHasDisabledText} {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -312,21 +312,21 @@ export const elSubtitle = css`
 export const elBodyText = css`
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
   line-height: 1.25rem;
   letter-spacing: -1%;
   margin-bottom: 0.5rem;
 
   &.${elHasGreyText} {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &.${elHasDisabledText} {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -394,21 +394,21 @@ export const elBodyText = css`
 export const elSmallText = css`
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &.${elHasGreyText} {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &.${elHasDisabledText} {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
diff --git a/src/components/typography/__tests__/__snapshots__/typography.test.tsx.snap b/src/components/typography/__tests__/__snapshots__/typography.test.tsx.snap
index 358e951e..837ffe47 100644
--- a/src/components/typography/__tests__/__snapshots__/typography.test.tsx.snap
+++ b/src/components/typography/__tests__/__snapshots__/typography.test.tsx.snap
@@ -8,20 +8,20 @@ exports[`Typography Base Text2XL should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -105,20 +105,20 @@ exports[`Typography Base Text2XL should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -259,20 +259,20 @@ exports[`Typography Base Text2XL should match a snapshot with all modifiers 1`]
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -356,20 +356,20 @@ exports[`Typography Base Text2XL should match a snapshot with all modifiers 1`]
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -510,20 +510,20 @@ exports[`Typography Base Text2XS should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -607,20 +607,20 @@ exports[`Typography Base Text2XS should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -761,20 +761,20 @@ exports[`Typography Base Text2XS should match a snapshot with all modifiers 1`]
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -858,20 +858,20 @@ exports[`Typography Base Text2XS should match a snapshot with all modifiers 1`]
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1012,20 +1012,20 @@ exports[`Typography Base Text3XL should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1109,20 +1109,20 @@ exports[`Typography Base Text3XL should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1263,20 +1263,20 @@ exports[`Typography Base Text3XL should match a snapshot with all modifiers 1`]
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1360,20 +1360,20 @@ exports[`Typography Base Text3XL should match a snapshot with all modifiers 1`]
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1514,20 +1514,20 @@ exports[`Typography Base TextBase should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1608,20 +1608,20 @@ exports[`Typography Base TextBase should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1759,20 +1759,20 @@ exports[`Typography Base TextBase should match a snapshot with all modifiers 1`]
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -1853,20 +1853,20 @@ exports[`Typography Base TextBase should match a snapshot with all modifiers 1`]
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2004,20 +2004,20 @@ exports[`Typography Base TextL should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2101,20 +2101,20 @@ exports[`Typography Base TextL should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2255,20 +2255,20 @@ exports[`Typography Base TextL should match a snapshot with all modifiers 1`] =
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2352,20 +2352,20 @@ exports[`Typography Base TextL should match a snapshot with all modifiers 1`] =
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2506,20 +2506,20 @@ exports[`Typography Base TextSM should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2603,20 +2603,20 @@ exports[`Typography Base TextSM should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2757,20 +2757,20 @@ exports[`Typography Base TextSM should match a snapshot with all modifiers 1`] =
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -2854,20 +2854,20 @@ exports[`Typography Base TextSM should match a snapshot with all modifiers 1`] =
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3008,20 +3008,20 @@ exports[`Typography Base TextXL should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3105,20 +3105,20 @@ exports[`Typography Base TextXL should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3259,20 +3259,20 @@ exports[`Typography Base TextXL should match a snapshot with all modifiers 1`] =
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3356,20 +3356,20 @@ exports[`Typography Base TextXL should match a snapshot with all modifiers 1`] =
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3510,20 +3510,20 @@ exports[`Typography Base TextXS should match a snapshot 1`] = `
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3607,20 +3607,20 @@ exports[`Typography Base TextXS should match a snapshot 1`] = `
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3761,20 +3761,20 @@ exports[`Typography Base TextXS should match a snapshot with all modifiers 1`] =
       <div
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -3858,20 +3858,20 @@ exports[`Typography Base TextXS should match a snapshot with all modifiers 1`] =
     <div
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4012,20 +4012,20 @@ exports[`Typography Helpers BodyText should match a snapshot 1`] = `
       <p
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4099,21 +4099,21 @@ exports[`Typography Helpers BodyText should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
   line-height: 1.25rem;
   letter-spacing: -1%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4186,20 +4186,20 @@ exports[`Typography Helpers BodyText should match a snapshot 1`] = `
     <p
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4273,21 +4273,21 @@ exports[`Typography Helpers BodyText should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
   line-height: 1.25rem;
   letter-spacing: -1%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4417,20 +4417,20 @@ exports[`Typography Helpers BodyText should match a snapshot with all modifiers
       <p
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4504,21 +4504,21 @@ exports[`Typography Helpers BodyText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
   line-height: 1.25rem;
   letter-spacing: -1%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4591,20 +4591,20 @@ exports[`Typography Helpers BodyText should match a snapshot with all modifiers
     <p
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4678,21 +4678,21 @@ exports[`Typography Helpers BodyText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-default);
   line-height: 1.25rem;
   letter-spacing: -1%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4822,20 +4822,20 @@ exports[`Typography Helpers SmallText should match a snapshot 1`] = `
       <small
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4909,21 +4909,21 @@ exports[`Typography Helpers SmallText should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -4996,20 +4996,20 @@ exports[`Typography Helpers SmallText should match a snapshot 1`] = `
     <small
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5083,21 +5083,21 @@ exports[`Typography Helpers SmallText should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5227,20 +5227,20 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = `
       <small
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5314,21 +5314,21 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5401,20 +5401,20 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = `
     <small
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5488,21 +5488,21 @@ exports[`Typography Helpers SmallText should match a snapshot 2`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5632,20 +5632,20 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
       <small
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5719,21 +5719,21 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5806,20 +5806,20 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
     <small
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -5893,21 +5893,21 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6037,20 +6037,20 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
       <small
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6124,21 +6124,21 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6211,20 +6211,20 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
     <small
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6298,21 +6298,21 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6442,20 +6442,20 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
       <small
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6529,21 +6529,21 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6616,20 +6616,20 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
     <small
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6703,21 +6703,21 @@ exports[`Typography Helpers SmallText should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   line-height: 1.125rem;
   letter-spacing: 0%;
   margin-bottom: 0.5rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6847,20 +6847,20 @@ exports[`Typography Helpers SubTitle should match a snapshot 1`] = `
       <h2
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -6934,21 +6934,21 @@ exports[`Typography Helpers SubTitle should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-subheading);
   line-height: 1.5rem;
   letter-spacing: 0%;
   margin-bottom: 0.75rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7021,20 +7021,20 @@ exports[`Typography Helpers SubTitle should match a snapshot 1`] = `
     <h2
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7108,21 +7108,21 @@ exports[`Typography Helpers SubTitle should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-subheading);
   line-height: 1.5rem;
   letter-spacing: 0%;
   margin-bottom: 0.75rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7252,20 +7252,20 @@ exports[`Typography Helpers SubTitle should match a snapshot with all modifiers
       <h2
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7339,21 +7339,21 @@ exports[`Typography Helpers SubTitle should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-subheading);
   line-height: 1.5rem;
   letter-spacing: 0%;
   margin-bottom: 0.75rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7426,20 +7426,20 @@ exports[`Typography Helpers SubTitle should match a snapshot with all modifiers
     <h2
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7513,21 +7513,21 @@ exports[`Typography Helpers SubTitle should match a snapshot with all modifiers
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-default);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-subheading);
   line-height: 1.5rem;
   letter-spacing: 0%;
   margin-bottom: 0.75rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7657,20 +7657,20 @@ exports[`Typography Helpers Title should match a snapshot 1`] = `
       <h1
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7744,21 +7744,21 @@ exports[`Typography Helpers Title should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-bold);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-heading);
   line-height: 2.25rem;
   letter-spacing: 0%;
   margin-bottom: 1rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7831,20 +7831,20 @@ exports[`Typography Helpers Title should match a snapshot 1`] = `
     <h1
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -7918,21 +7918,21 @@ exports[`Typography Helpers Title should match a snapshot 1`] = `
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-bold);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-heading);
   line-height: 2.25rem;
   letter-spacing: 0%;
   margin-bottom: 1rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -8062,20 +8062,20 @@ exports[`Typography Helpers Title should match a snapshot with all modifiers 1`]
       <h1
         class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -8149,21 +8149,21 @@ exports[`Typography Helpers Title should match a snapshot with all modifiers 1`]
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-bold);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-heading);
   line-height: 2.25rem;
   letter-spacing: 0%;
   margin-bottom: 1rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -8236,20 +8236,20 @@ exports[`Typography Helpers Title should match a snapshot with all modifiers 1`]
     <h1
       class="mock-css.
   font-family: var(--font-sans-serif);
-  color: var(--color-black);
+  color: var(--black);
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
@@ -8323,21 +8323,21 @@ exports[`Typography Helpers Title should match a snapshot with all modifiers 1`]
  mock-css.
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-bold);
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-heading);
   line-height: 2.25rem;
   letter-spacing: 0%;
   margin-bottom: 1rem;
 
   &., {
-    color: var(--color-grey-500);
+    color: var(--neutral-500);
   }
 
   &., {
-    color: var(--color-grey-400);
+    color: var(--neutral-400);
 
     a {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
     }
   }
 
diff --git a/src/index.ts b/src/index.ts
index c05f813e..f9f174cc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,3 +64,4 @@ export * from './hooks/use-drawer'
 
 export * from './helpers/intent'
 export * from './icons'
+export * from '../tokens'
diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx
index ff3b569f..fe7d9578 100644
--- a/src/storybook/changelog.mdx
+++ b/src/storybook/changelog.mdx
@@ -16,6 +16,12 @@ We will publish release version history and changes here. Where possible, we wil
 
 Beta versions should be relatively stable but subject to occssional breaking changes.
 
+### **5.0.0-beta.12 - 24/06/24**
+
+- Adds code to import Figma design tokens into project
+- Updates global variables to reflect DS naming conventions
+- Updates colour variables to align with new Figma primitive tokens
+
 ### **5.0.0-beta.9 - 26/04/24**
 
 - Fix issue where disabled inputs not aligned with design system
diff --git a/src/storybook/demo-block.tsx b/src/storybook/demo-block.tsx
index bdde21dc..b6f8451f 100644
--- a/src/storybook/demo-block.tsx
+++ b/src/storybook/demo-block.tsx
@@ -3,13 +3,13 @@ import { styled } from '@linaria/react'
 export const GridDemoBlock = styled.div`
   width: 100%;
   min-height: 3rem;
-  background-color: var(--color-purple-500);
+  background-color: var(--purple-500);
 `
 
 export const GridDemoBlockFeatured = styled.div`
   width: 100%;
   height: 3rem;
-  background: var(--color-purple-500);
+  background: var(--purple-500);
   display: flex;
   text-align: center;
   align-items: center;
@@ -19,7 +19,7 @@ export const GridDemoBlockFeatured = styled.div`
 
 export const GridDemoBlockWithMargin = styled.div`
   height: 3rem;
-  background-color: var(--color-purple-500);
+  background-color: var(--purple-500);
   margin: 0.5rem;
   color: white;
   text-align: center;
@@ -31,8 +31,8 @@ export const GridDemoBlockWithMargin = styled.div`
 `
 
 export const GridDemoBlockSizing = styled.div`
-  background-color: var(--color-purple-500);
-  color: var(--color-white);
+  background-color: var(--purple-500);
+  color: var(--white);
   text-align: center;
   display: flex;
   align-items: center;
@@ -42,8 +42,8 @@ export const GridDemoBlockSizing = styled.div`
 `
 
 export const GridDemoBorders = styled.div`
-  background-color: var(--color-grey-100);
-  color: var(--color-black);
+  background-color: var(--neutral-100);
+  color: var(--black);
   padding: 1rem;
   width: 100%;
   text-align: center;
diff --git a/src/storybook/welcome.tsx b/src/storybook/welcome.tsx
index b23d164b..02202995 100644
--- a/src/storybook/welcome.tsx
+++ b/src/storybook/welcome.tsx
@@ -4,7 +4,7 @@ import { isTablet } from '../styles/media'
 import { ReactComponent as ReapitLogoInfographic } from '../../assets/icons/reapitLogo.svg'
 
 const WelcomeWrapper = styled.div`
-  background-color: var(--color-white);
+  background-color: var(--white);
   width: 100%;
   box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
   border-top-left-radius: 1rem;
@@ -24,7 +24,7 @@ const WelcomeWrapper = styled.div`
 
 const WelcomeTitle = styled.h1`
   font-size: 2.5rem;
-  color: var(--color-black);
+  color: var(--black);
 
   ${isTablet} {
     width: 65%;
@@ -33,7 +33,7 @@ const WelcomeTitle = styled.h1`
 
 const WelcomeFooter = styled.div`
   display: flex;
-  background-color: var(--color-grey-50);
+  background-color: var(--neutral-050);
   flex-wrap: wrap;
   border-bottom-left-radius: 1rem;
   border-bottom-right-radius: 1rem;
@@ -42,7 +42,7 @@ const WelcomeFooter = styled.div`
 const WelcomeFooterItem = styled.div`
   width: 50%;
   box-sizing: border-box;
-  color: var(--color-black);
+  color: var(--black);
   display: flex;
   flex-direction: column;
   padding: 2rem;
@@ -59,7 +59,7 @@ const WelcomeFooterItem = styled.div`
 export const WelcomeFooterTitle = styled.div`
   font-size: 1.3rem;
   font-weight: 400;
-  color: var(--color-black);
+  color: var(--black);
   margin-bottom: 1rem;
 `
 
diff --git a/src/styles/globals.ts b/src/styles/globals.ts
index 7c57b3a6..40f5d40e 100644
--- a/src/styles/globals.ts
+++ b/src/styles/globals.ts
@@ -15,6 +15,8 @@ export const intentSecondary = '#4e56ea'
 export const elGlobals = css`
   :global() {
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro&display=swap');
+    /* Root color pallet */
+    @import url('./../../tokens/reapit/tokens.css');
     /* Reset CSS */
     html,
     body,
@@ -186,138 +188,51 @@ export const elGlobals = css`
     }
 
     :root {
-      /* Root color pallet */
-
-      /* Greys */
-      --color-grey-900: #222b33;
-      --color-grey-800: #323e4b;
-      --color-grey-700: #415161;
-      --color-grey-600: #506478;
-      --color-grey-500: #607890;
-      --color-grey-400: #798da1;
-      --color-grey-300: #9faebc;
-      --color-grey-200: #c5ced6;
-      --color-grey-150: #d8dee4;
-      --color-grey-100: #e5e9ed;
-      --color-grey-50: #f2f4f6;
-
-      /* Purples */
-      --color-purple-900: #262884;
-      --color-purple-800: #3632a6;
-      --color-purple-700: #4036c8;
-      --color-purple-600: #4844da;
-      --color-purple-500: #4e56ea;
-      --color-purple-400: #5a73fd;
-      --color-purple-300: #7e9bfa;
-      --color-purple-200: #b0c6fa;
-      --color-purple-100: #d4e1ff;
-      --color-purple-50: #ecf3ff;
-
-      /* Blues */
-      --color-blue-900: #002e5c;
-      --color-blue-800: #004285;
-      --color-blue-700: #0056ad;
-      --color-blue-600: #006bd6;
-      --color-blue-500: #0080ff;
-      --color-blue-400: #2994ff;
-      --color-blue-300: #66b2ff;
-      --color-blue-200: #a3d1ff;
-      --color-blue-100: #d6eaff;
-      --color-blue-50: #ebf5ff;
-
-      /* Greens */
-      --color-green-900: #0b4517;
-      --color-green-800: #106421;
-      --color-green-700: #15822b;
-      --color-green-600: #1aa135;
-      --color-green-500: #20c040;
-      --color-green-400: #43ca5e;
-      --color-green-300: #79d98c;
-      --color-green-200: #aee8ba;
-      --color-green-100: #dbf4e0;
-      --color-green-50: #edfaf0;
-
-      /* Yellows */
-      --color-yellow-900: #5c3900;
-      --color-yellow-800: #855300;
-      --color-yellow-700: #ad6c00;
-      --color-yellow-600: #d68600;
-      --color-yellow-500: #ffa000;
-      --color-yellow-400: #ffaf29;
-      --color-yellow-300: #ffc666;
-      --color-yellow-200: #ffdca3;
-      --color-yellow-100: #ffefd6;
-      --color-yellow-50: #fff7eb;
-
-      /* Oranges */
-      --color-orange-900: #5c2200;
-      --color-orange-800: #853200;
-      --color-orange-700: #ad4100;
-      --color-orange-600: #d65000;
-      --color-orange-500: #ff6000;
-      --color-orange-400: #ff7929;
-      --color-orange-300: #ff9f66;
-      --color-orange-200: #ffc5a3;
-      --color-orange-100: #ffe5d6;
-      --color-orange-50: #fff2eb;
-
-      /* Reds */
-      --color-red-900: #560811;
-      --color-red-800: #7d0c19;
-      --color-red-700: #a21020;
-      --color-red-600: #c91428;
-      --color-red-500: #f01830;
-      --color-red-400: #f23d51;
-      --color-red-300: #f67482;
-      --color-red-200: #f9abb4;
-      --color-red-100: #fcd9dd;
-      --color-red-50: #fdecee;
-
       /* Neutral color variables */
-      --color-white: #fff;
-      --color-black: var(--color-grey-900);
-      --color-grey-darkest: var(--color-grey-700);
-      --color-grey-dark: var(--color-grey-500);
-      --color-grey-medium: var(--color-grey-400);
-      --color-grey-medium-light: var(--color-grey-300);
-      --color-grey-light: var(--color-grey-100);
-      --color-grey-lightest: var(--color-grey-50);
+      --white: #fff;
+      --black: var(--neutral-900);
+      --neutral-darkest: var(--neutral-700);
+      --neutral-dark: var(--neutral-500);
+      --neutral-medium: var(--neutral-400);
+      --neutral-medium-light: var(--neutral-300);
+      --neutral-light: var(--neutral-100);
+      --neutral-lightest: var(--neutral-050);
 
       /** intent color variables */
-      --intent-primary: var(--color-purple-500);
-      --intent-neutral: var(--color-blue-500);
-      --intent-success: var(--color-green-500);
-      --intent-pending: var(--color-yellow-500);
-      --intent-warning: var(--color-orange-500);
-      --intent-danger: var(--color-red-500);
-      --intent-default: var(--color-grey-500);
+      --intent-primary: var(--purple-500);
+      --intent-neutral: var(--blue-500);
+      --intent-success: var(--green-500);
+      --intent-pending: var(--yellow-500);
+      --intent-warning: var(--orange-500);
+      --intent-danger: var(--red-500);
+      --intent-default: var(--neutral-500);
 
       /* intent light colors */
-      --intent-primary-light: var(--color-purple-300);
-      --intent-neutral-light: var(--color-blue-300);
-      --intent-success-light: var(--color-green-300);
-      --intent-pending-light: var(--color-yellow-300);
-      --intent-warning-light: var(--color-orange-300);
-      --intent-danger-light: var(--color-red-300);
-      --intent-default-light: var(--color-grey-300);
+      --intent-primary-light: var(--purple-300);
+      --intent-neutral-light: var(--blue-300);
+      --intent-success-light: var(--green-300);
+      --intent-pending-light: var(--yellow-300);
+      --intent-warning-light: var(--orange-300);
+      --intent-danger-light: var(--red-300);
+      --intent-default-light: var(--neutral-300);
 
       /* intent lightest colors */
-      --intent-primary-lightest: var(--color-purple-50);
-      --intent-neutral-lightest: var(--color-blue-50);
-      --intent-success-lightest: var(--color-green-50);
-      --intent-pending-lightest: var(--color-yellow-50);
-      --intent-warning-lightest: var(--color-orange-50);
-      --intent-danger-lightest: var(--color-red-50);
-      --intent-default-lightest: var(--color-grey-50);
+      --intent-primary-lightest: var(--purple-050);
+      --intent-neutral-lightest: var(--blue-050);
+      --intent-success-lightest: var(--green-050);
+      --intent-pending-lightest: var(--yellow-050);
+      --intent-warning-lightest: var(--orange-050);
+      --intent-danger-lightest: var(--red-050);
+      --intent-default-lightest: var(--neutral-050);
 
       /** intent dark colors */
-      --intent-primary-dark: var(--color-purple-700);
-      --intent-neutral-dark: var(--color-blue-700);
-      --intent-success-dark: var(--color-green-700);
-      --intent-pending-dark: var(--color-yellow-700);
-      --intent-warning-dark: var(--color-orange-700);
-      --intent-danger-dark: var(--color-red-700);
-      --intent-default-dark: var(--color-grey-700);
+      --intent-primary-dark: var(--purple-700);
+      --intent-neutral-dark: var(--blue-700);
+      --intent-success-dark: var(--green-700);
+      --intent-pending-dark: var(--yellow-700);
+      --intent-warning-dark: var(--orange-700);
+      --intent-danger-dark: var(--red-700);
+      --intent-default-dark: var(--neutral-700);
 
       /** font variables */
       --font-sans-serif: 'Inter', Helvetica, Arial, sans-serif;
@@ -343,32 +258,32 @@ export const elGlobals = css`
       --default-border-radius: 0.25rem;
 
       /** component specific variables */
-      --component-input-bg: var(--color-white);
-      --component-input-focus-bg: var(--color-grey-light);
-      --component-input-shadow: inset 0px -1px 0px var(--color-white);
-      --component-input-border: 1px solid var(--color-grey-150);
-      --component-input-border-focus: 1px solid var(--color-purple-500);
+      --component-input-bg: var(--white);
+      --component-input-focus-bg: var(--neutral-light);
+      --component-input-shadow: inset 0px -1px 0px var(--white);
+      --component-input-border: 1px solid var(--neutral-150);
+      --component-input-border-focus: 1px solid var(--purple-500);
       --component-steps-gutter-width: 12px;
       --component-table-min-column-width: 3rem;
 
       /** Navigation specific variables */
-      --nav-menu-background-dark: var(--color-white);
-      --nav-menu-background-accent: var(--color-white);
-      --nav-menu-text: var(--color-grey-medium);
-      --nav-menu-text-hover: var(--color-grey-dark);
-      --nav-menu-icon-primary-accent: var(--color-grey-600);
-      --nav-menu-icon-secondary-accent: var(--color-grey-400);
+      --nav-menu-background-dark: var(--white);
+      --nav-menu-background-accent: var(--white);
+      --nav-menu-text: var(--neutral-medium);
+      --nav-menu-text-hover: var(--neutral-dark);
+      --nav-menu-icon-primary-accent: var(--neutral-600);
+      --nav-menu-icon-secondary-accent: var(--neutral-400);
       --nav-brand-height: 1.5rem;
 
       /* Component specific variables */
-      --page-header-bg: var(--color-white);
-      --page-header-border: 1px solid var(--color-grey-100);
-      --pagination-bg: var(--color-white);
+      --page-header-bg: var(--white);
+      --page-header-border: 1px solid var(--neutral-100);
+      --pagination-bg: var(--white);
 
       /* Utility Decorative variables */
 
-      --util-border-grey: 1px solid var(--color-grey-100, '#dbdbdb');
-      --util-border-purple: 1px solid var(--color-purple-300, '#9faebc');
+      --util-border-grey: 1px solid var(--neutral-100, '#dbdbdb');
+      --util-border-purple: 1px solid var(--purple-300, '#9faebc');
       --util-border-radius: 0.25rem;
       --util-box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.08);
 
@@ -406,20 +321,20 @@ export const elGlobals = css`
       --util-rems-12: 3rem;
 
       /** To deprecated, left in to avoid breaking changes, some duplication */
-      --color-blue-light: var(--color-purple-300);
-      --color-blue-light2: var(--color-purple-300);
-      --color-blue-dark: var(--color-purple-700);
-      --color-blue-dark2: var(--color-purple-700);
-      --intent-low: var(--color-grey-light);
-      --intent-secondary: var(--color-purple-500);
-      --intent-secondary-light: var(--color-purple-300);
-      --intent-secondary-dark: var(--color-purple-700);
-      --intent-critical: var(--color-purple-500);
-      --intent-critical-text: var(--color-white);
-      --intent-critical-light: var(--color-purple-300);
-      --intent-critical-light-text: var(--color-black);
-      --intent-critical-dark: var(--color-purple-700);
-      --intent-critical-dark-text: var(--color-white);
+      --blue-light: var(--purple-300);
+      --blue-light2: var(--purple-300);
+      --blue-dark: var(--purple-700);
+      --blue-dark2: var(--purple-700);
+      --intent-low: var(--neutral-light);
+      --intent-secondary: var(--purple-500);
+      --intent-secondary-light: var(--purple-300);
+      --intent-secondary-dark: var(--purple-700);
+      --intent-critical: var(--purple-500);
+      --intent-critical-text: var(--white);
+      --intent-critical-light: var(--purple-300);
+      --intent-critical-light-text: var(--black);
+      --intent-critical-dark: var(--purple-700);
+      --intent-critical-dark-text: var(--white);
       --layout-size-1_2: 0.5rem;
       --layout-size-1_4: 0.25rem;
       --layout-size-3_4: 0.75rem;
@@ -427,7 +342,7 @@ export const elGlobals = css`
       --layout-size-2_3: calc(2rem / 3);
       --layout-size-2: 2rem;
       --layout-size-3: 3rem;
-      --component-input-border-bottom: 1px solid var(--color-grey-150);
+      --component-input-border-bottom: 1px solid var(--neutral-150);
       --component-input-border-bottom-focus: 1px solid #000000;
     }
   }
diff --git a/tokens/build.mjs b/tokens/build.mjs
new file mode 100644
index 00000000..7eda55e8
--- /dev/null
+++ b/tokens/build.mjs
@@ -0,0 +1,57 @@
+import StyleDictionaryPackage from 'style-dictionary'
+// const { fileHeader, formattedVariables } = StyleDictionaryPackage.formatHelpers
+
+const themes = ['Reapit', 'PayProp']
+
+const getStyleDictionaryConfig = (theme) => {
+  const lowerCasedTheme = theme.toLowerCase()
+  return {
+    source: ['./tokens/tokens.json'],
+    parsers: [
+      {
+        pattern: /\.json$/,
+        parse: ({ contents }) => {
+          try {
+            const object = JSON.parse(contents)
+            // Bit fragile but I only want the primitives, semantic and component variables for each theme
+            // Figma exports a "mode 1" that we don't need - confirmed with Andrei
+            const primitives = object['_Primitives/Value']
+            // The PayProp theme isn't yet defined but when it is...
+            const components = object[`Semantic variables/${theme}`] || object['Semantic variables/Reapit']
+            const semantics = object[`_Component variables/${theme}`] || object['_Component variables/Reapit']
+            return { ...primitives, ...semantics, ...components }
+          } catch (error) {
+            console.log(error)
+          }
+        },
+      },
+    ],
+    platforms: {
+      css: {
+        buildPath: `tokens/${lowerCasedTheme}/`,
+        files: [
+          {
+            destination: 'tokens.css',
+            format: 'css/variables',
+          },
+        ],
+      },
+      ts: {
+        buildPath: `tokens/${lowerCasedTheme}/`,
+        files: [
+          {
+            destination: 'tokens.ts',
+            format: 'javascript/es6',
+          },
+        ],
+        transforms: ['name/cti/camel'],
+      },
+    },
+  }
+}
+
+themes.map((theme) => {
+  const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(theme))
+
+  StyleDictionary.buildAllPlatforms()
+})
diff --git a/tokens/index.ts b/tokens/index.ts
new file mode 100644
index 00000000..b39dc7a1
--- /dev/null
+++ b/tokens/index.ts
@@ -0,0 +1 @@
+export * as reapitDesignTokens from './reapit/tokens'
diff --git a/tokens/payprop/tokens.css b/tokens/payprop/tokens.css
new file mode 100644
index 00000000..7e36fcdc
--- /dev/null
+++ b/tokens/payprop/tokens.css
@@ -0,0 +1,301 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ */
+
+:root {
+  --neutral-900: #222b33;
+  --neutral-800: #323e4b;
+  --neutral-700: #415161;
+  --neutral-600: #506478;
+  --neutral-500: #607890;
+  --neutral-400: #798da1;
+  --neutral-300: #9faebc;
+  --neutral-200: #c5ced6;
+  --neutral-150: #d8dee4;
+  --neutral-100: #e5e9ed;
+  --neutral-050: #f2f4f6;
+  --blue-900: #002e5c;
+  --blue-800: #004285;
+  --blue-700: #0056ad;
+  --blue-600: #006bd6;
+  --blue-500: #0080ff;
+  --blue-400: #2994ff;
+  --blue-300: #66b2ff;
+  --blue-200: #a3d1ff;
+  --blue-100: #d6eaff;
+  --blue-050: #ebf5ff;
+  --green-900: #0b4517;
+  --green-800: #106421;
+  --green-700: #15822b;
+  --green-600: #1aa135;
+  --green-500: #20c040;
+  --green-400: #43ca5e;
+  --green-300: #79d98c;
+  --green-200: #aee8ba;
+  --green-100: #dbf4e0;
+  --green-050: #edfaf0;
+  --yellow-900: #5c3900;
+  --yellow-800: #855300;
+  --yellow-700: #ad6c00;
+  --yellow-600: #d68600;
+  --yellow-500: #ffa000;
+  --yellow-400: #ffaf29;
+  --yellow-300: #ffc666;
+  --yellow-200: #ffdca3;
+  --yellow-100: #ffefd6;
+  --yellow-050: #fff7eb;
+  --orange-900: #5c2200;
+  --orange-800: #853200;
+  --orange-700: #ad4100;
+  --orange-600: #d65000;
+  --orange-500: #ff6000;
+  --orange-400: #ff7929;
+  --orange-300: #ff9f66;
+  --orange-200: #ffc5a3;
+  --orange-100: #ffe5d6;
+  --orange-050: #fff2eb;
+  --red-900: #560811;
+  --red-800: #7d0c19;
+  --red-700: #a21020;
+  --red-600: #c91428;
+  --red-500: #f01830;
+  --red-400: #f23d51;
+  --red-300: #f67482;
+  --red-200: #f9abb4;
+  --red-100: #fcd9dd;
+  --red-050: #fdecee;
+  --purple-900: #262884;
+  --purple-800: #3632a6;
+  --purple-700: #4036c8;
+  --purple-600: #4844da;
+  --purple-500: #4e56ea;
+  --purple-400: #5573fd;
+  --purple-300: #7e9bfa;
+  --purple-200: #b0c6fa;
+  --purple-100: #d6e1ff;
+  --purple-050: #ecf3ff;
+  --white: #ffffff;
+  --brand-red: #d1263d;
+  --brand-teal: #98c1c2;
+  --brand-orange: #fd9e1d;
+  --brand-black: #222b33;
+  --brand-indigo: #08415c;
+  --brand-white: #ffffff;
+  --brand-pink: #ffeaee;
+  --teal-900: #00505a;
+  --teal-800: #00646e;
+  --teal-700: #008292;
+  --teal-600: #0096aa;
+  --teal-500: #00acbe;
+  --teal-400: #14c4d0;
+  --teal-300: #50d2dc;
+  --teal-200: #8ce2ea;
+  --teal-100: #bef6fa;
+  --teal-050: #e2fafa;
+  --plum-900: #5a0a82;
+  --plum-800: #6e1296;
+  --plum-700: #7e20a2;
+  --plum-600: #8c2caa;
+  --plum-500: #9a32b4;
+  --plum-400: #af50c4;
+  --plum-300: #bd78cc;
+  --plum-200: #d0a0da;
+  --plum-100: #e6d2f0;
+  --plum-050: #faf4ff;
+  --font-weight-regular: Regular;
+  --font-weight-medium: Medium;
+  --font-weight-semibold: Semi Bold;
+  --font-family: Inter;
+  --unit-0: 0rem;
+  --unit-px: 0.0625rem;
+  --unit-half: 0.125rem;
+  --unit-1: 0.25rem;
+  --unit-2: 0.5rem;
+  --unit-3: 0.75rem;
+  --unit-4: 1rem;
+  --unit-5: 1.25rem;
+  --unit-6: 1.5rem;
+  --unit-8: 2rem;
+  --unit-10: 2.5rem;
+  --unit-12: 3rem;
+  --unit-14: 3.5rem;
+  --unit-16: 4rem;
+  --unit-18: 4.5rem;
+  --unit-20: 5rem;
+  --unit-7: 1.75rem;
+  --unit-9: 2.25rem;
+  --unit-11: 2.75rem;
+  --unit-24: 6rem;
+  --unit-28: 7rem;
+  --unit-32: 8rem;
+  --unit-36: 9rem;
+  --unit-40: 10rem;
+  --font-size-3xl: 2rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-xl: 1.25rem;
+  --font-size-lg: 1.125rem;
+  --font-size-base: 0.9375rem;
+  --font-size-sm: 0.875rem;
+  --font-size-xs: 0.8125rem;
+  --font-size-2xs: 0.75rem;
+  --line-height-3xl: 2.5rem;
+  --line-height-2xl: 2rem;
+  --line-height-xl: 1.75rem;
+  --line-height-lg: 1.5rem;
+  --line-height-base: 1.5rem;
+  --line-height-sm: 1.25rem;
+  --line-height-xs: 1rem;
+  --line-height-2xs: 1rem;
+  --letter-spacing-3xl: -0.019999999552965164rem;
+  --letter-spacing-2xl: -0.014999999664723873rem;
+  --letter-spacing-xl: -0.012500000186264515rem;
+  --letter-spacing-lg: -0.011250000447034836rem;
+  --letter-spacing-base: -0.00937500037252903rem;
+  --letter-spacing-sm: -0.008750000037252903rem;
+  --letter-spacing-xs: -0.008124999701976776rem;
+  --letter-spacing-2xs: -0.007499999832361937rem;
+  --text-button_reversed-secondary-label-default: #e5e9ed;
+  --text-button_reversed-secondary-label-disabled: #798da1;
+  --icon-app_bar-default: #798da1;
+  --icon-button_primary-default: #d6e1ff;
+  --icon-button_primary-hover: #7e9bfa;
+  --icon-checkbox-hover: #4036c8;
+  --icon-radio_button-hover: #4036c8;
+  --icon-button_danger-default: #fcd9dd;
+  --icon-button_danger-hover: #f67482;
+  --icon-reversed_button-hover: #607890;
+  --icon-reversed_button-disabled: #798da1;
+  --icon-split_button-secondary-hover: #415161;
+  --fill-button-primary-hover: #4036c8;
+  --fill-button-danger-hover: #a21020;
+  --fill-reversed_button-secondary-disabled: #415161;
+  --fill-switch-hover: #4036c8;
+  --outline-text_input-default: #d8dee4;
+  --outline-text_input-focus: #0080ff;
+  --outline-button-secondary-hover: #9faebc;
+  --outline-button_reversed-secondary-default: #415161;
+  --outline-input_chip-orange: #ffc5a3;
+  --text-primary: #222b33;
+  --text-secondary: #607890;
+  --text-tertiary: #415161;
+  --text-placeholder: #9faebc;
+  --text-action: #4e56ea;
+  --text-error: #f01830;
+  --text-success: #1aa135;
+  --text-warning: #ff6000;
+  --text-info: #0080ff;
+  --text-white: #ffffff;
+  --text-pending: #d68600;
+  --text-accent_1: #0096aa;
+  --text-accent_2: #9a32b4;
+  --icon-secondary: #607890;
+  --icon-primary: #9faebc;
+  --icon-disabled: #e5e9ed;
+  --icon-action: #4e56ea;
+  --icon-error: #f01830;
+  --icon-success: #1aa135;
+  --icon-warning: #ff6000;
+  --icon-info: #0080ff;
+  --icon-white: #ffffff;
+  --icon-star: #ffa000;
+  --icon-pending: #d68600;
+  --icon-accent_1: #0096aa;
+  --icon-accent_2: #9a32b4;
+  --outline-dashed: #d8dee4;
+  --outline-default: #e5e9ed;
+  --outline-primary: #4e56ea;
+  --outline-warning: #ff6000;
+  --outline-error: #f01830;
+  --outline-info: #0080ff;
+  --outline-success: #20c040;
+  --outline-white: #ffffff;
+  --outline-pending: #d68600;
+  --outline-accent_1: #0096aa;
+  --outline-accent_2: #9a32b4;
+  --fill-default-lightest: #f2f4f6;
+  --fill-default-light: #e5e9ed;
+  --fill-default-medium: #9faebc;
+  --fill-default-dark: #607890;
+  --fill-default-darkest: #222b33;
+  --fill-action-lightest: #ecf3ff;
+  --fill-action-light: #d6e1ff;
+  --fill-action-dark: #4e56ea;
+  --fill-success-lightest: #edfaf0;
+  --fill-success-dark: #20c040;
+  --fill-warning-lightest: #fff2eb;
+  --fill-warning-dark: #ff6000;
+  --fill-error-lightest: #fdecee;
+  --fill-error-light: #fcd9dd;
+  --fill-error-dark: #f01830;
+  --fill-white: #ffffff;
+  --fill-info-lightest: #ebf5ff;
+  --fill-info-dark: #0080ff;
+  --fill-pending-lightest: #fff7eb;
+  --fill-accent_1-lightest: #e2fafa;
+  --fill-accent_2-lightest: #faf4ff;
+  --fill-warning-light: #ffe5d6;
+  --fill-success-light: #dbf4e0;
+  --fill-info-light: #d6eaff;
+  --fill-pending-light: #ffefd6;
+  --fill-pending-dark: #d68600;
+  --fill-accent_1-light: #bef6fa;
+  --fill-accent_1-dark: #0096aa;
+  --fill-accent_2-light: #e6d2f0;
+  --fill-accent_2-dark: #9a32b4;
+  --spacing-none: 0rem;
+  --spacing-half: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 2rem;
+  --spacing-8: 2.5rem;
+  --spacing-9: 3rem;
+  --spacing-10: 3.5rem;
+  --spacing-11: 4rem;
+  --spacing-12: 4.5rem;
+  --spacing-13: 5rem;
+  --spacing-14: 6rem;
+  --spacing-15: 7rem;
+  --spacing-16: 8rem;
+  --spacing-17: 9rem;
+  --spacing-18: 10rem;
+  --corner-none: 0rem;
+  --corner-sm: 0.125rem;
+  --corner-default: 0.25rem;
+  --corner-xl: 0.75rem;
+  --corner-2xl: 1rem;
+  --corner-3xl: 1.5rem;
+  --corner-lg: 0.5rem;
+  --border-none: 0rem;
+  --border-default: 0.0625rem;
+  --border-double: 0.125rem;
+  --size-none: 0rem;
+  --size-half: 0.125rem;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 2rem;
+  --size-8: 2.5rem;
+  --size-9: 3rem;
+  --size-10: 3.5rem;
+  --size-11: 4rem;
+  --size-12: 4.5rem;
+  --size-13: 5rem;
+  --size-14: 6rem;
+  --size-15: 7rem;
+  --size-16: 8rem;
+  --size-17: 9rem;
+  --size-18: 10rem;
+  --size-px: 0.0625rem;
+  --icon-xs: 0.75rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.25rem;
+  --icon-default: 1.5rem;
+}
diff --git a/tokens/payprop/tokens.ts b/tokens/payprop/tokens.ts
new file mode 100644
index 00000000..d13e90dc
--- /dev/null
+++ b/tokens/payprop/tokens.ts
@@ -0,0 +1,299 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ */
+
+export const neutral900 = '#222b33'
+export const neutral800 = '#323e4b'
+export const neutral700 = '#415161'
+export const neutral600 = '#506478'
+export const neutral500 = '#607890'
+export const neutral400 = '#798da1'
+export const neutral300 = '#9faebc'
+export const neutral200 = '#c5ced6'
+export const neutral150 = '#d8dee4'
+export const neutral100 = '#e5e9ed'
+export const neutral050 = '#f2f4f6'
+export const blue900 = '#002e5c'
+export const blue800 = '#004285'
+export const blue700 = '#0056ad'
+export const blue600 = '#006bd6'
+export const blue500 = '#0080ff'
+export const blue400 = '#2994ff'
+export const blue300 = '#66b2ff'
+export const blue200 = '#a3d1ff'
+export const blue100 = '#d6eaff'
+export const blue050 = '#ebf5ff'
+export const green900 = '#0b4517'
+export const green800 = '#106421'
+export const green700 = '#15822b'
+export const green600 = '#1aa135'
+export const green500 = '#20c040'
+export const green400 = '#43ca5e'
+export const green300 = '#79d98c'
+export const green200 = '#aee8ba'
+export const green100 = '#dbf4e0'
+export const green050 = '#edfaf0'
+export const yellow900 = '#5c3900'
+export const yellow800 = '#855300'
+export const yellow700 = '#ad6c00'
+export const yellow600 = '#d68600'
+export const yellow500 = '#ffa000'
+export const yellow400 = '#ffaf29'
+export const yellow300 = '#ffc666'
+export const yellow200 = '#ffdca3'
+export const yellow100 = '#ffefd6'
+export const yellow050 = '#fff7eb'
+export const orange900 = '#5c2200'
+export const orange800 = '#853200'
+export const orange700 = '#ad4100'
+export const orange600 = '#d65000'
+export const orange500 = '#ff6000'
+export const orange400 = '#ff7929'
+export const orange300 = '#ff9f66'
+export const orange200 = '#ffc5a3'
+export const orange100 = '#ffe5d6'
+export const orange050 = '#fff2eb'
+export const red900 = '#560811'
+export const red800 = '#7d0c19'
+export const red700 = '#a21020'
+export const red600 = '#c91428'
+export const red500 = '#f01830'
+export const red400 = '#f23d51'
+export const red300 = '#f67482'
+export const red200 = '#f9abb4'
+export const red100 = '#fcd9dd'
+export const red050 = '#fdecee'
+export const purple900 = '#262884'
+export const purple800 = '#3632a6'
+export const purple700 = '#4036c8'
+export const purple600 = '#4844da'
+export const purple500 = '#4e56ea'
+export const purple400 = '#5573fd'
+export const purple300 = '#7e9bfa'
+export const purple200 = '#b0c6fa'
+export const purple100 = '#d6e1ff'
+export const purple050 = '#ecf3ff'
+export const white = '#ffffff'
+export const brandRed = '#d1263d'
+export const brandTeal = '#98c1c2'
+export const brandOrange = '#fd9e1d'
+export const brandBlack = '#222b33'
+export const brandIndigo = '#08415c'
+export const brandWhite = '#ffffff'
+export const brandPink = '#ffeaee'
+export const teal900 = '#00505a'
+export const teal800 = '#00646e'
+export const teal700 = '#008292'
+export const teal600 = '#0096aa'
+export const teal500 = '#00acbe'
+export const teal400 = '#14c4d0'
+export const teal300 = '#50d2dc'
+export const teal200 = '#8ce2ea'
+export const teal100 = '#bef6fa'
+export const teal050 = '#e2fafa'
+export const plum900 = '#5a0a82'
+export const plum800 = '#6e1296'
+export const plum700 = '#7e20a2'
+export const plum600 = '#8c2caa'
+export const plum500 = '#9a32b4'
+export const plum400 = '#af50c4'
+export const plum300 = '#bd78cc'
+export const plum200 = '#d0a0da'
+export const plum100 = '#e6d2f0'
+export const plum050 = '#faf4ff'
+export const fontWeightRegular = 'Regular'
+export const fontWeightMedium = 'Medium'
+export const fontWeightSemibold = 'Semi Bold'
+export const fontFamily = 'Inter'
+export const unit0 = '0rem'
+export const unitPx = '0.0625rem'
+export const unitHalf = '0.125rem'
+export const unit1 = '0.25rem'
+export const unit2 = '0.5rem'
+export const unit3 = '0.75rem'
+export const unit4 = '1rem'
+export const unit5 = '1.25rem'
+export const unit6 = '1.5rem'
+export const unit8 = '2rem'
+export const unit10 = '2.5rem'
+export const unit12 = '3rem'
+export const unit14 = '3.5rem'
+export const unit16 = '4rem'
+export const unit18 = '4.5rem'
+export const unit20 = '5rem'
+export const unit7 = '1.75rem'
+export const unit9 = '2.25rem'
+export const unit11 = '2.75rem'
+export const unit24 = '6rem'
+export const unit28 = '7rem'
+export const unit32 = '8rem'
+export const unit36 = '9rem'
+export const unit40 = '10rem'
+export const fontSize3xl = '2rem'
+export const fontSize2xl = '1.5rem'
+export const fontSizeXl = '1.25rem'
+export const fontSizeLg = '1.125rem'
+export const fontSizeBase = '0.9375rem'
+export const fontSizeSm = '0.875rem'
+export const fontSizeXs = '0.8125rem'
+export const fontSize2xs = '0.75rem'
+export const lineHeight3xl = '2.5rem'
+export const lineHeight2xl = '2rem'
+export const lineHeightXl = '1.75rem'
+export const lineHeightLg = '1.5rem'
+export const lineHeightBase = '1.5rem'
+export const lineHeightSm = '1.25rem'
+export const lineHeightXs = '1rem'
+export const lineHeight2xs = '1rem'
+export const letterSpacing3xl = '-0.019999999552965164rem'
+export const letterSpacing2xl = '-0.014999999664723873rem'
+export const letterSpacingXl = '-0.012500000186264515rem'
+export const letterSpacingLg = '-0.011250000447034836rem'
+export const letterSpacingBase = '-0.00937500037252903rem'
+export const letterSpacingSm = '-0.008750000037252903rem'
+export const letterSpacingXs = '-0.008124999701976776rem'
+export const letterSpacing2xs = '-0.007499999832361937rem'
+export const componentTextColourTextButtonReversedSecondaryLabelDefault = '#e5e9ed'
+export const componentTextColourTextButtonReversedSecondaryLabelDisabled = '#798da1'
+export const componentIconColourIconAppBarDefault = '#798da1'
+export const componentIconColourIconButtonPrimaryDefault = '#d6e1ff'
+export const componentIconColourIconButtonPrimaryHover = '#7e9bfa'
+export const componentIconColourIconCheckboxHover = '#4036c8'
+export const componentIconColourIconRadioButtonHover = '#4036c8'
+export const componentIconColourIconButtonDangerDefault = '#fcd9dd'
+export const componentIconColourIconButtonDangerHover = '#f67482'
+export const componentIconColourIconReversedButtonHover = '#607890'
+export const componentIconColourIconReversedButtonDisabled = '#798da1'
+export const componentIconColourIconSplitButtonSecondaryHover = '#415161'
+export const componentFillColourFillButtonPrimaryHover = '#4036c8'
+export const componentFillColourFillButtonDangerHover = '#a21020'
+export const componentFillColourFillReversedButtonSecondaryDisabled = '#415161'
+export const componentFillColourFillSwitchHover = '#4036c8'
+export const componentOutlineColourOutlineTextInputDefault = '#d8dee4'
+export const componentOutlineColourOutlineTextInputFocus = '#0080ff'
+export const componentOutlineColourOutlineButtonSecondaryHover = '#9faebc'
+export const componentOutlineColourOutlineButtonReversedSecondaryDefault = '#415161'
+export const componentOutlineColourOutlineInputChipOrange = '#ffc5a3'
+export const textColourTextPrimary = '#222b33'
+export const textColourTextSecondary = '#607890'
+export const textColourTextTertiary = '#415161'
+export const textColourTextPlaceholder = '#9faebc'
+export const textColourTextAction = '#4e56ea'
+export const textColourTextError = '#f01830'
+export const textColourTextSuccess = '#1aa135'
+export const textColourTextWarning = '#ff6000'
+export const textColourTextInfo = '#0080ff'
+export const textColourTextWhite = '#ffffff'
+export const textColourTextPending = '#d68600'
+export const textColourTextAccent1 = '#0096aa'
+export const textColourTextAccent2 = '#9a32b4'
+export const iconColourIconSecondary = '#607890'
+export const iconColourIconPrimary = '#9faebc'
+export const iconColourIconDisabled = '#e5e9ed'
+export const iconColourIconAction = '#4e56ea'
+export const iconColourIconError = '#f01830'
+export const iconColourIconSuccess = '#1aa135'
+export const iconColourIconWarning = '#ff6000'
+export const iconColourIconInfo = '#0080ff'
+export const iconColourIconWhite = '#ffffff'
+export const iconColourIconStar = '#ffa000'
+export const iconColourIconPending = '#d68600'
+export const iconColourIconAccent1 = '#0096aa'
+export const iconColourIconAccent2 = '#9a32b4'
+export const outlineColourOutlineDashed = '#d8dee4'
+export const outlineColourOutlineDefault = '#e5e9ed'
+export const outlineColourOutlinePrimary = '#4e56ea'
+export const outlineColourOutlineWarning = '#ff6000'
+export const outlineColourOutlineError = '#f01830'
+export const outlineColourOutlineInfo = '#0080ff'
+export const outlineColourOutlineSuccess = '#20c040'
+export const outlineColourOutlineWhite = '#ffffff'
+export const outlineColourOutlinePending = '#d68600'
+export const outlineColourOutlineAccent1 = '#0096aa'
+export const outlineColourOutlineAccent2 = '#9a32b4'
+export const fillColourFillDefaultLightest = '#f2f4f6'
+export const fillColourFillDefaultLight = '#e5e9ed'
+export const fillColourFillDefaultMedium = '#9faebc'
+export const fillColourFillDefaultDark = '#607890'
+export const fillColourFillDefaultDarkest = '#222b33'
+export const fillColourFillActionLightest = '#ecf3ff'
+export const fillColourFillActionLight = '#d6e1ff'
+export const fillColourFillActionDark = '#4e56ea'
+export const fillColourFillSuccessLightest = '#edfaf0'
+export const fillColourFillSuccessDark = '#20c040'
+export const fillColourFillWarningLightest = '#fff2eb'
+export const fillColourFillWarningDark = '#ff6000'
+export const fillColourFillErrorLightest = '#fdecee'
+export const fillColourFillErrorLight = '#fcd9dd'
+export const fillColourFillErrorDark = '#f01830'
+export const fillColourFillWhite = '#ffffff'
+export const fillColourFillInfoLightest = '#ebf5ff'
+export const fillColourFillInfoDark = '#0080ff'
+export const fillColourFillPendingLightest = '#fff7eb'
+export const fillColourFillAccent1Lightest = '#e2fafa'
+export const fillColourFillAccent2Lightest = '#faf4ff'
+export const fillColourFillWarningLight = '#ffe5d6'
+export const fillColourFillSuccessLight = '#dbf4e0'
+export const fillColourFillInfoLight = '#d6eaff'
+export const fillColourFillPendingLight = '#ffefd6'
+export const fillColourFillPendingDark = '#d68600'
+export const fillColourFillAccent1Light = '#bef6fa'
+export const fillColourFillAccent1Dark = '#0096aa'
+export const fillColourFillAccent2Light = '#e6d2f0'
+export const fillColourFillAccent2Dark = '#9a32b4'
+export const spacingSpacingNone = '0rem'
+export const spacingSpacingHalf = '0.125rem'
+export const spacingSpacing1 = '0.25rem'
+export const spacingSpacing2 = '0.5rem'
+export const spacingSpacing3 = '0.75rem'
+export const spacingSpacing4 = '1rem'
+export const spacingSpacing5 = '1.25rem'
+export const spacingSpacing6 = '1.5rem'
+export const spacingSpacing7 = '2rem'
+export const spacingSpacing8 = '2.5rem'
+export const spacingSpacing9 = '3rem'
+export const spacingSpacing10 = '3.5rem'
+export const spacingSpacing11 = '4rem'
+export const spacingSpacing12 = '4.5rem'
+export const spacingSpacing13 = '5rem'
+export const spacingSpacing14 = '6rem'
+export const spacingSpacing15 = '7rem'
+export const spacingSpacing16 = '8rem'
+export const spacingSpacing17 = '9rem'
+export const spacingSpacing18 = '10rem'
+export const cornerRadiusCornerNone = '0rem'
+export const cornerRadiusCornerSm = '0.125rem'
+export const cornerRadiusCornerDefault = '0.25rem'
+export const cornerRadiusCornerXl = '0.75rem'
+export const cornerRadiusCorner2xl = '1rem'
+export const cornerRadiusCorner3xl = '1.5rem'
+export const cornerRadiusCornerLg = '0.5rem'
+export const borderWidthBorderNone = '0rem'
+export const borderWidthBorderDefault = '0.0625rem'
+export const borderWidthBorderDouble = '0.125rem'
+export const sizeSizeNone = '0rem'
+export const sizeSizeHalf = '0.125rem'
+export const sizeSize1 = '0.25rem'
+export const sizeSize2 = '0.5rem'
+export const sizeSize3 = '0.75rem'
+export const sizeSize4 = '1rem'
+export const sizeSize5 = '1.25rem'
+export const sizeSize6 = '1.5rem'
+export const sizeSize7 = '2rem'
+export const sizeSize8 = '2.5rem'
+export const sizeSize9 = '3rem'
+export const sizeSize10 = '3.5rem'
+export const sizeSize11 = '4rem'
+export const sizeSize12 = '4.5rem'
+export const sizeSize13 = '5rem'
+export const sizeSize14 = '6rem'
+export const sizeSize15 = '7rem'
+export const sizeSize16 = '8rem'
+export const sizeSize17 = '9rem'
+export const sizeSize18 = '10rem'
+export const sizeSizePx = '0.0625rem'
+export const iconSizeIconXs = '0.75rem'
+export const iconSizeIconSm = '1rem'
+export const iconSizeIconMd = '1.25rem'
+export const iconSizeIconDefault = '1.5rem'
diff --git a/tokens/reapit/tokens.css b/tokens/reapit/tokens.css
new file mode 100644
index 00000000..7e36fcdc
--- /dev/null
+++ b/tokens/reapit/tokens.css
@@ -0,0 +1,301 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ */
+
+:root {
+  --neutral-900: #222b33;
+  --neutral-800: #323e4b;
+  --neutral-700: #415161;
+  --neutral-600: #506478;
+  --neutral-500: #607890;
+  --neutral-400: #798da1;
+  --neutral-300: #9faebc;
+  --neutral-200: #c5ced6;
+  --neutral-150: #d8dee4;
+  --neutral-100: #e5e9ed;
+  --neutral-050: #f2f4f6;
+  --blue-900: #002e5c;
+  --blue-800: #004285;
+  --blue-700: #0056ad;
+  --blue-600: #006bd6;
+  --blue-500: #0080ff;
+  --blue-400: #2994ff;
+  --blue-300: #66b2ff;
+  --blue-200: #a3d1ff;
+  --blue-100: #d6eaff;
+  --blue-050: #ebf5ff;
+  --green-900: #0b4517;
+  --green-800: #106421;
+  --green-700: #15822b;
+  --green-600: #1aa135;
+  --green-500: #20c040;
+  --green-400: #43ca5e;
+  --green-300: #79d98c;
+  --green-200: #aee8ba;
+  --green-100: #dbf4e0;
+  --green-050: #edfaf0;
+  --yellow-900: #5c3900;
+  --yellow-800: #855300;
+  --yellow-700: #ad6c00;
+  --yellow-600: #d68600;
+  --yellow-500: #ffa000;
+  --yellow-400: #ffaf29;
+  --yellow-300: #ffc666;
+  --yellow-200: #ffdca3;
+  --yellow-100: #ffefd6;
+  --yellow-050: #fff7eb;
+  --orange-900: #5c2200;
+  --orange-800: #853200;
+  --orange-700: #ad4100;
+  --orange-600: #d65000;
+  --orange-500: #ff6000;
+  --orange-400: #ff7929;
+  --orange-300: #ff9f66;
+  --orange-200: #ffc5a3;
+  --orange-100: #ffe5d6;
+  --orange-050: #fff2eb;
+  --red-900: #560811;
+  --red-800: #7d0c19;
+  --red-700: #a21020;
+  --red-600: #c91428;
+  --red-500: #f01830;
+  --red-400: #f23d51;
+  --red-300: #f67482;
+  --red-200: #f9abb4;
+  --red-100: #fcd9dd;
+  --red-050: #fdecee;
+  --purple-900: #262884;
+  --purple-800: #3632a6;
+  --purple-700: #4036c8;
+  --purple-600: #4844da;
+  --purple-500: #4e56ea;
+  --purple-400: #5573fd;
+  --purple-300: #7e9bfa;
+  --purple-200: #b0c6fa;
+  --purple-100: #d6e1ff;
+  --purple-050: #ecf3ff;
+  --white: #ffffff;
+  --brand-red: #d1263d;
+  --brand-teal: #98c1c2;
+  --brand-orange: #fd9e1d;
+  --brand-black: #222b33;
+  --brand-indigo: #08415c;
+  --brand-white: #ffffff;
+  --brand-pink: #ffeaee;
+  --teal-900: #00505a;
+  --teal-800: #00646e;
+  --teal-700: #008292;
+  --teal-600: #0096aa;
+  --teal-500: #00acbe;
+  --teal-400: #14c4d0;
+  --teal-300: #50d2dc;
+  --teal-200: #8ce2ea;
+  --teal-100: #bef6fa;
+  --teal-050: #e2fafa;
+  --plum-900: #5a0a82;
+  --plum-800: #6e1296;
+  --plum-700: #7e20a2;
+  --plum-600: #8c2caa;
+  --plum-500: #9a32b4;
+  --plum-400: #af50c4;
+  --plum-300: #bd78cc;
+  --plum-200: #d0a0da;
+  --plum-100: #e6d2f0;
+  --plum-050: #faf4ff;
+  --font-weight-regular: Regular;
+  --font-weight-medium: Medium;
+  --font-weight-semibold: Semi Bold;
+  --font-family: Inter;
+  --unit-0: 0rem;
+  --unit-px: 0.0625rem;
+  --unit-half: 0.125rem;
+  --unit-1: 0.25rem;
+  --unit-2: 0.5rem;
+  --unit-3: 0.75rem;
+  --unit-4: 1rem;
+  --unit-5: 1.25rem;
+  --unit-6: 1.5rem;
+  --unit-8: 2rem;
+  --unit-10: 2.5rem;
+  --unit-12: 3rem;
+  --unit-14: 3.5rem;
+  --unit-16: 4rem;
+  --unit-18: 4.5rem;
+  --unit-20: 5rem;
+  --unit-7: 1.75rem;
+  --unit-9: 2.25rem;
+  --unit-11: 2.75rem;
+  --unit-24: 6rem;
+  --unit-28: 7rem;
+  --unit-32: 8rem;
+  --unit-36: 9rem;
+  --unit-40: 10rem;
+  --font-size-3xl: 2rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-xl: 1.25rem;
+  --font-size-lg: 1.125rem;
+  --font-size-base: 0.9375rem;
+  --font-size-sm: 0.875rem;
+  --font-size-xs: 0.8125rem;
+  --font-size-2xs: 0.75rem;
+  --line-height-3xl: 2.5rem;
+  --line-height-2xl: 2rem;
+  --line-height-xl: 1.75rem;
+  --line-height-lg: 1.5rem;
+  --line-height-base: 1.5rem;
+  --line-height-sm: 1.25rem;
+  --line-height-xs: 1rem;
+  --line-height-2xs: 1rem;
+  --letter-spacing-3xl: -0.019999999552965164rem;
+  --letter-spacing-2xl: -0.014999999664723873rem;
+  --letter-spacing-xl: -0.012500000186264515rem;
+  --letter-spacing-lg: -0.011250000447034836rem;
+  --letter-spacing-base: -0.00937500037252903rem;
+  --letter-spacing-sm: -0.008750000037252903rem;
+  --letter-spacing-xs: -0.008124999701976776rem;
+  --letter-spacing-2xs: -0.007499999832361937rem;
+  --text-button_reversed-secondary-label-default: #e5e9ed;
+  --text-button_reversed-secondary-label-disabled: #798da1;
+  --icon-app_bar-default: #798da1;
+  --icon-button_primary-default: #d6e1ff;
+  --icon-button_primary-hover: #7e9bfa;
+  --icon-checkbox-hover: #4036c8;
+  --icon-radio_button-hover: #4036c8;
+  --icon-button_danger-default: #fcd9dd;
+  --icon-button_danger-hover: #f67482;
+  --icon-reversed_button-hover: #607890;
+  --icon-reversed_button-disabled: #798da1;
+  --icon-split_button-secondary-hover: #415161;
+  --fill-button-primary-hover: #4036c8;
+  --fill-button-danger-hover: #a21020;
+  --fill-reversed_button-secondary-disabled: #415161;
+  --fill-switch-hover: #4036c8;
+  --outline-text_input-default: #d8dee4;
+  --outline-text_input-focus: #0080ff;
+  --outline-button-secondary-hover: #9faebc;
+  --outline-button_reversed-secondary-default: #415161;
+  --outline-input_chip-orange: #ffc5a3;
+  --text-primary: #222b33;
+  --text-secondary: #607890;
+  --text-tertiary: #415161;
+  --text-placeholder: #9faebc;
+  --text-action: #4e56ea;
+  --text-error: #f01830;
+  --text-success: #1aa135;
+  --text-warning: #ff6000;
+  --text-info: #0080ff;
+  --text-white: #ffffff;
+  --text-pending: #d68600;
+  --text-accent_1: #0096aa;
+  --text-accent_2: #9a32b4;
+  --icon-secondary: #607890;
+  --icon-primary: #9faebc;
+  --icon-disabled: #e5e9ed;
+  --icon-action: #4e56ea;
+  --icon-error: #f01830;
+  --icon-success: #1aa135;
+  --icon-warning: #ff6000;
+  --icon-info: #0080ff;
+  --icon-white: #ffffff;
+  --icon-star: #ffa000;
+  --icon-pending: #d68600;
+  --icon-accent_1: #0096aa;
+  --icon-accent_2: #9a32b4;
+  --outline-dashed: #d8dee4;
+  --outline-default: #e5e9ed;
+  --outline-primary: #4e56ea;
+  --outline-warning: #ff6000;
+  --outline-error: #f01830;
+  --outline-info: #0080ff;
+  --outline-success: #20c040;
+  --outline-white: #ffffff;
+  --outline-pending: #d68600;
+  --outline-accent_1: #0096aa;
+  --outline-accent_2: #9a32b4;
+  --fill-default-lightest: #f2f4f6;
+  --fill-default-light: #e5e9ed;
+  --fill-default-medium: #9faebc;
+  --fill-default-dark: #607890;
+  --fill-default-darkest: #222b33;
+  --fill-action-lightest: #ecf3ff;
+  --fill-action-light: #d6e1ff;
+  --fill-action-dark: #4e56ea;
+  --fill-success-lightest: #edfaf0;
+  --fill-success-dark: #20c040;
+  --fill-warning-lightest: #fff2eb;
+  --fill-warning-dark: #ff6000;
+  --fill-error-lightest: #fdecee;
+  --fill-error-light: #fcd9dd;
+  --fill-error-dark: #f01830;
+  --fill-white: #ffffff;
+  --fill-info-lightest: #ebf5ff;
+  --fill-info-dark: #0080ff;
+  --fill-pending-lightest: #fff7eb;
+  --fill-accent_1-lightest: #e2fafa;
+  --fill-accent_2-lightest: #faf4ff;
+  --fill-warning-light: #ffe5d6;
+  --fill-success-light: #dbf4e0;
+  --fill-info-light: #d6eaff;
+  --fill-pending-light: #ffefd6;
+  --fill-pending-dark: #d68600;
+  --fill-accent_1-light: #bef6fa;
+  --fill-accent_1-dark: #0096aa;
+  --fill-accent_2-light: #e6d2f0;
+  --fill-accent_2-dark: #9a32b4;
+  --spacing-none: 0rem;
+  --spacing-half: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 2rem;
+  --spacing-8: 2.5rem;
+  --spacing-9: 3rem;
+  --spacing-10: 3.5rem;
+  --spacing-11: 4rem;
+  --spacing-12: 4.5rem;
+  --spacing-13: 5rem;
+  --spacing-14: 6rem;
+  --spacing-15: 7rem;
+  --spacing-16: 8rem;
+  --spacing-17: 9rem;
+  --spacing-18: 10rem;
+  --corner-none: 0rem;
+  --corner-sm: 0.125rem;
+  --corner-default: 0.25rem;
+  --corner-xl: 0.75rem;
+  --corner-2xl: 1rem;
+  --corner-3xl: 1.5rem;
+  --corner-lg: 0.5rem;
+  --border-none: 0rem;
+  --border-default: 0.0625rem;
+  --border-double: 0.125rem;
+  --size-none: 0rem;
+  --size-half: 0.125rem;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 2rem;
+  --size-8: 2.5rem;
+  --size-9: 3rem;
+  --size-10: 3.5rem;
+  --size-11: 4rem;
+  --size-12: 4.5rem;
+  --size-13: 5rem;
+  --size-14: 6rem;
+  --size-15: 7rem;
+  --size-16: 8rem;
+  --size-17: 9rem;
+  --size-18: 10rem;
+  --size-px: 0.0625rem;
+  --icon-xs: 0.75rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.25rem;
+  --icon-default: 1.5rem;
+}
diff --git a/tokens/reapit/tokens.ts b/tokens/reapit/tokens.ts
new file mode 100644
index 00000000..d13e90dc
--- /dev/null
+++ b/tokens/reapit/tokens.ts
@@ -0,0 +1,299 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ */
+
+export const neutral900 = '#222b33'
+export const neutral800 = '#323e4b'
+export const neutral700 = '#415161'
+export const neutral600 = '#506478'
+export const neutral500 = '#607890'
+export const neutral400 = '#798da1'
+export const neutral300 = '#9faebc'
+export const neutral200 = '#c5ced6'
+export const neutral150 = '#d8dee4'
+export const neutral100 = '#e5e9ed'
+export const neutral050 = '#f2f4f6'
+export const blue900 = '#002e5c'
+export const blue800 = '#004285'
+export const blue700 = '#0056ad'
+export const blue600 = '#006bd6'
+export const blue500 = '#0080ff'
+export const blue400 = '#2994ff'
+export const blue300 = '#66b2ff'
+export const blue200 = '#a3d1ff'
+export const blue100 = '#d6eaff'
+export const blue050 = '#ebf5ff'
+export const green900 = '#0b4517'
+export const green800 = '#106421'
+export const green700 = '#15822b'
+export const green600 = '#1aa135'
+export const green500 = '#20c040'
+export const green400 = '#43ca5e'
+export const green300 = '#79d98c'
+export const green200 = '#aee8ba'
+export const green100 = '#dbf4e0'
+export const green050 = '#edfaf0'
+export const yellow900 = '#5c3900'
+export const yellow800 = '#855300'
+export const yellow700 = '#ad6c00'
+export const yellow600 = '#d68600'
+export const yellow500 = '#ffa000'
+export const yellow400 = '#ffaf29'
+export const yellow300 = '#ffc666'
+export const yellow200 = '#ffdca3'
+export const yellow100 = '#ffefd6'
+export const yellow050 = '#fff7eb'
+export const orange900 = '#5c2200'
+export const orange800 = '#853200'
+export const orange700 = '#ad4100'
+export const orange600 = '#d65000'
+export const orange500 = '#ff6000'
+export const orange400 = '#ff7929'
+export const orange300 = '#ff9f66'
+export const orange200 = '#ffc5a3'
+export const orange100 = '#ffe5d6'
+export const orange050 = '#fff2eb'
+export const red900 = '#560811'
+export const red800 = '#7d0c19'
+export const red700 = '#a21020'
+export const red600 = '#c91428'
+export const red500 = '#f01830'
+export const red400 = '#f23d51'
+export const red300 = '#f67482'
+export const red200 = '#f9abb4'
+export const red100 = '#fcd9dd'
+export const red050 = '#fdecee'
+export const purple900 = '#262884'
+export const purple800 = '#3632a6'
+export const purple700 = '#4036c8'
+export const purple600 = '#4844da'
+export const purple500 = '#4e56ea'
+export const purple400 = '#5573fd'
+export const purple300 = '#7e9bfa'
+export const purple200 = '#b0c6fa'
+export const purple100 = '#d6e1ff'
+export const purple050 = '#ecf3ff'
+export const white = '#ffffff'
+export const brandRed = '#d1263d'
+export const brandTeal = '#98c1c2'
+export const brandOrange = '#fd9e1d'
+export const brandBlack = '#222b33'
+export const brandIndigo = '#08415c'
+export const brandWhite = '#ffffff'
+export const brandPink = '#ffeaee'
+export const teal900 = '#00505a'
+export const teal800 = '#00646e'
+export const teal700 = '#008292'
+export const teal600 = '#0096aa'
+export const teal500 = '#00acbe'
+export const teal400 = '#14c4d0'
+export const teal300 = '#50d2dc'
+export const teal200 = '#8ce2ea'
+export const teal100 = '#bef6fa'
+export const teal050 = '#e2fafa'
+export const plum900 = '#5a0a82'
+export const plum800 = '#6e1296'
+export const plum700 = '#7e20a2'
+export const plum600 = '#8c2caa'
+export const plum500 = '#9a32b4'
+export const plum400 = '#af50c4'
+export const plum300 = '#bd78cc'
+export const plum200 = '#d0a0da'
+export const plum100 = '#e6d2f0'
+export const plum050 = '#faf4ff'
+export const fontWeightRegular = 'Regular'
+export const fontWeightMedium = 'Medium'
+export const fontWeightSemibold = 'Semi Bold'
+export const fontFamily = 'Inter'
+export const unit0 = '0rem'
+export const unitPx = '0.0625rem'
+export const unitHalf = '0.125rem'
+export const unit1 = '0.25rem'
+export const unit2 = '0.5rem'
+export const unit3 = '0.75rem'
+export const unit4 = '1rem'
+export const unit5 = '1.25rem'
+export const unit6 = '1.5rem'
+export const unit8 = '2rem'
+export const unit10 = '2.5rem'
+export const unit12 = '3rem'
+export const unit14 = '3.5rem'
+export const unit16 = '4rem'
+export const unit18 = '4.5rem'
+export const unit20 = '5rem'
+export const unit7 = '1.75rem'
+export const unit9 = '2.25rem'
+export const unit11 = '2.75rem'
+export const unit24 = '6rem'
+export const unit28 = '7rem'
+export const unit32 = '8rem'
+export const unit36 = '9rem'
+export const unit40 = '10rem'
+export const fontSize3xl = '2rem'
+export const fontSize2xl = '1.5rem'
+export const fontSizeXl = '1.25rem'
+export const fontSizeLg = '1.125rem'
+export const fontSizeBase = '0.9375rem'
+export const fontSizeSm = '0.875rem'
+export const fontSizeXs = '0.8125rem'
+export const fontSize2xs = '0.75rem'
+export const lineHeight3xl = '2.5rem'
+export const lineHeight2xl = '2rem'
+export const lineHeightXl = '1.75rem'
+export const lineHeightLg = '1.5rem'
+export const lineHeightBase = '1.5rem'
+export const lineHeightSm = '1.25rem'
+export const lineHeightXs = '1rem'
+export const lineHeight2xs = '1rem'
+export const letterSpacing3xl = '-0.019999999552965164rem'
+export const letterSpacing2xl = '-0.014999999664723873rem'
+export const letterSpacingXl = '-0.012500000186264515rem'
+export const letterSpacingLg = '-0.011250000447034836rem'
+export const letterSpacingBase = '-0.00937500037252903rem'
+export const letterSpacingSm = '-0.008750000037252903rem'
+export const letterSpacingXs = '-0.008124999701976776rem'
+export const letterSpacing2xs = '-0.007499999832361937rem'
+export const componentTextColourTextButtonReversedSecondaryLabelDefault = '#e5e9ed'
+export const componentTextColourTextButtonReversedSecondaryLabelDisabled = '#798da1'
+export const componentIconColourIconAppBarDefault = '#798da1'
+export const componentIconColourIconButtonPrimaryDefault = '#d6e1ff'
+export const componentIconColourIconButtonPrimaryHover = '#7e9bfa'
+export const componentIconColourIconCheckboxHover = '#4036c8'
+export const componentIconColourIconRadioButtonHover = '#4036c8'
+export const componentIconColourIconButtonDangerDefault = '#fcd9dd'
+export const componentIconColourIconButtonDangerHover = '#f67482'
+export const componentIconColourIconReversedButtonHover = '#607890'
+export const componentIconColourIconReversedButtonDisabled = '#798da1'
+export const componentIconColourIconSplitButtonSecondaryHover = '#415161'
+export const componentFillColourFillButtonPrimaryHover = '#4036c8'
+export const componentFillColourFillButtonDangerHover = '#a21020'
+export const componentFillColourFillReversedButtonSecondaryDisabled = '#415161'
+export const componentFillColourFillSwitchHover = '#4036c8'
+export const componentOutlineColourOutlineTextInputDefault = '#d8dee4'
+export const componentOutlineColourOutlineTextInputFocus = '#0080ff'
+export const componentOutlineColourOutlineButtonSecondaryHover = '#9faebc'
+export const componentOutlineColourOutlineButtonReversedSecondaryDefault = '#415161'
+export const componentOutlineColourOutlineInputChipOrange = '#ffc5a3'
+export const textColourTextPrimary = '#222b33'
+export const textColourTextSecondary = '#607890'
+export const textColourTextTertiary = '#415161'
+export const textColourTextPlaceholder = '#9faebc'
+export const textColourTextAction = '#4e56ea'
+export const textColourTextError = '#f01830'
+export const textColourTextSuccess = '#1aa135'
+export const textColourTextWarning = '#ff6000'
+export const textColourTextInfo = '#0080ff'
+export const textColourTextWhite = '#ffffff'
+export const textColourTextPending = '#d68600'
+export const textColourTextAccent1 = '#0096aa'
+export const textColourTextAccent2 = '#9a32b4'
+export const iconColourIconSecondary = '#607890'
+export const iconColourIconPrimary = '#9faebc'
+export const iconColourIconDisabled = '#e5e9ed'
+export const iconColourIconAction = '#4e56ea'
+export const iconColourIconError = '#f01830'
+export const iconColourIconSuccess = '#1aa135'
+export const iconColourIconWarning = '#ff6000'
+export const iconColourIconInfo = '#0080ff'
+export const iconColourIconWhite = '#ffffff'
+export const iconColourIconStar = '#ffa000'
+export const iconColourIconPending = '#d68600'
+export const iconColourIconAccent1 = '#0096aa'
+export const iconColourIconAccent2 = '#9a32b4'
+export const outlineColourOutlineDashed = '#d8dee4'
+export const outlineColourOutlineDefault = '#e5e9ed'
+export const outlineColourOutlinePrimary = '#4e56ea'
+export const outlineColourOutlineWarning = '#ff6000'
+export const outlineColourOutlineError = '#f01830'
+export const outlineColourOutlineInfo = '#0080ff'
+export const outlineColourOutlineSuccess = '#20c040'
+export const outlineColourOutlineWhite = '#ffffff'
+export const outlineColourOutlinePending = '#d68600'
+export const outlineColourOutlineAccent1 = '#0096aa'
+export const outlineColourOutlineAccent2 = '#9a32b4'
+export const fillColourFillDefaultLightest = '#f2f4f6'
+export const fillColourFillDefaultLight = '#e5e9ed'
+export const fillColourFillDefaultMedium = '#9faebc'
+export const fillColourFillDefaultDark = '#607890'
+export const fillColourFillDefaultDarkest = '#222b33'
+export const fillColourFillActionLightest = '#ecf3ff'
+export const fillColourFillActionLight = '#d6e1ff'
+export const fillColourFillActionDark = '#4e56ea'
+export const fillColourFillSuccessLightest = '#edfaf0'
+export const fillColourFillSuccessDark = '#20c040'
+export const fillColourFillWarningLightest = '#fff2eb'
+export const fillColourFillWarningDark = '#ff6000'
+export const fillColourFillErrorLightest = '#fdecee'
+export const fillColourFillErrorLight = '#fcd9dd'
+export const fillColourFillErrorDark = '#f01830'
+export const fillColourFillWhite = '#ffffff'
+export const fillColourFillInfoLightest = '#ebf5ff'
+export const fillColourFillInfoDark = '#0080ff'
+export const fillColourFillPendingLightest = '#fff7eb'
+export const fillColourFillAccent1Lightest = '#e2fafa'
+export const fillColourFillAccent2Lightest = '#faf4ff'
+export const fillColourFillWarningLight = '#ffe5d6'
+export const fillColourFillSuccessLight = '#dbf4e0'
+export const fillColourFillInfoLight = '#d6eaff'
+export const fillColourFillPendingLight = '#ffefd6'
+export const fillColourFillPendingDark = '#d68600'
+export const fillColourFillAccent1Light = '#bef6fa'
+export const fillColourFillAccent1Dark = '#0096aa'
+export const fillColourFillAccent2Light = '#e6d2f0'
+export const fillColourFillAccent2Dark = '#9a32b4'
+export const spacingSpacingNone = '0rem'
+export const spacingSpacingHalf = '0.125rem'
+export const spacingSpacing1 = '0.25rem'
+export const spacingSpacing2 = '0.5rem'
+export const spacingSpacing3 = '0.75rem'
+export const spacingSpacing4 = '1rem'
+export const spacingSpacing5 = '1.25rem'
+export const spacingSpacing6 = '1.5rem'
+export const spacingSpacing7 = '2rem'
+export const spacingSpacing8 = '2.5rem'
+export const spacingSpacing9 = '3rem'
+export const spacingSpacing10 = '3.5rem'
+export const spacingSpacing11 = '4rem'
+export const spacingSpacing12 = '4.5rem'
+export const spacingSpacing13 = '5rem'
+export const spacingSpacing14 = '6rem'
+export const spacingSpacing15 = '7rem'
+export const spacingSpacing16 = '8rem'
+export const spacingSpacing17 = '9rem'
+export const spacingSpacing18 = '10rem'
+export const cornerRadiusCornerNone = '0rem'
+export const cornerRadiusCornerSm = '0.125rem'
+export const cornerRadiusCornerDefault = '0.25rem'
+export const cornerRadiusCornerXl = '0.75rem'
+export const cornerRadiusCorner2xl = '1rem'
+export const cornerRadiusCorner3xl = '1.5rem'
+export const cornerRadiusCornerLg = '0.5rem'
+export const borderWidthBorderNone = '0rem'
+export const borderWidthBorderDefault = '0.0625rem'
+export const borderWidthBorderDouble = '0.125rem'
+export const sizeSizeNone = '0rem'
+export const sizeSizeHalf = '0.125rem'
+export const sizeSize1 = '0.25rem'
+export const sizeSize2 = '0.5rem'
+export const sizeSize3 = '0.75rem'
+export const sizeSize4 = '1rem'
+export const sizeSize5 = '1.25rem'
+export const sizeSize6 = '1.5rem'
+export const sizeSize7 = '2rem'
+export const sizeSize8 = '2.5rem'
+export const sizeSize9 = '3rem'
+export const sizeSize10 = '3.5rem'
+export const sizeSize11 = '4rem'
+export const sizeSize12 = '4.5rem'
+export const sizeSize13 = '5rem'
+export const sizeSize14 = '6rem'
+export const sizeSize15 = '7rem'
+export const sizeSize16 = '8rem'
+export const sizeSize17 = '9rem'
+export const sizeSize18 = '10rem'
+export const sizeSizePx = '0.0625rem'
+export const iconSizeIconXs = '0.75rem'
+export const iconSizeIconSm = '1rem'
+export const iconSizeIconMd = '1.25rem'
+export const iconSizeIconDefault = '1.5rem'
diff --git a/tokens/tokens.json b/tokens/tokens.json
index 7c592c0c..751b5f64 100644
--- a/tokens/tokens.json
+++ b/tokens/tokens.json
@@ -1805,4 +1805,4 @@
       "_Component variables/Reapit"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index f0dca9da..946b04d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3765,6 +3765,7 @@ __metadata:
     rollup-plugin-css-only: "npm:^4.5.2"
     snyk: "npm:^1.1288.0"
     storybook: "npm:^8.0.7"
+    style-dictionary: "npm:^3.9.2"
     ts-jest: "npm:^29.1.2"
     ts-node: "npm:^10.9.2"
     tslib: "npm:^2.6.2"
@@ -7053,6 +7054,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camel-case@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "camel-case@npm:4.1.2"
+  dependencies:
+    pascal-case: "npm:^3.1.2"
+    tslib: "npm:^2.0.3"
+  checksum: 10/bcbd25cd253b3cbc69be3f535750137dbf2beb70f093bdc575f73f800acc8443d34fd52ab8f0a2413c34f1e8203139ffc88428d8863e4dfe530cfb257a379ad6
+  languageName: node
+  linkType: hard
+
 "camelcase-keys@npm:^7.0.0":
   version: 7.0.2
   resolution: "camelcase-keys@npm:7.0.2"
@@ -7093,6 +7104,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"capital-case@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "capital-case@npm:1.0.4"
+  dependencies:
+    no-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+    upper-case-first: "npm:^2.0.2"
+  checksum: 10/41fa8fa87f6d24d0835a2b4a9341a3eaecb64ac29cd7c5391f35d6175a0fa98ab044e7f2602e1ec3afc886231462ed71b5b80c590b8b41af903ec2c15e5c5931
+  languageName: node
+  linkType: hard
+
 "case@npm:1.6.3":
   version: 1.6.3
   resolution: "case@npm:1.6.3"
@@ -7121,6 +7143,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"change-case@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "change-case@npm:4.1.2"
+  dependencies:
+    camel-case: "npm:^4.1.2"
+    capital-case: "npm:^1.0.4"
+    constant-case: "npm:^3.0.4"
+    dot-case: "npm:^3.0.4"
+    header-case: "npm:^2.0.4"
+    no-case: "npm:^3.0.4"
+    param-case: "npm:^3.0.4"
+    pascal-case: "npm:^3.1.2"
+    path-case: "npm:^3.0.4"
+    sentence-case: "npm:^3.0.4"
+    snake-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+  checksum: 10/e4bc4a093a1f7cce8b33896665cf9e456e3bc3cc0def2ad7691b1994cfca99b3188d0a513b16855b01a6bd20692fcde12a7d4d87a5615c4c515bbbf0e651f116
+  languageName: node
+  linkType: hard
+
 "char-regex@npm:^1.0.2":
   version: 1.0.2
   resolution: "char-regex@npm:1.0.2"
@@ -7360,6 +7402,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^8.3.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 10/6b7b5d334483ce24bd73c5dac2eab901a7dbb25fd983ea24a1eeac6e7166bb1967f641546e8abf1920afbde86a45fbfe5812fbc69d0dc451bb45ca416a12a3a3
+  languageName: node
+  linkType: hard
+
 "commondir@npm:^1.0.1":
   version: 1.0.1
   resolution: "commondir@npm:1.0.1"
@@ -7425,6 +7474,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"constant-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "constant-case@npm:3.0.4"
+  dependencies:
+    no-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+    upper-case: "npm:^2.0.2"
+  checksum: 10/6c3346d51afc28d9fae922e966c68eb77a19d94858dba230dd92d7b918b37d36db50f0311e9ecf6847e43e934b1c01406a0936973376ab17ec2c471fbcfb2cf3
+  languageName: node
+  linkType: hard
+
 "constructs@npm:^10.3.0":
   version: 10.3.0
   resolution: "constructs@npm:10.3.0"
@@ -9277,6 +9337,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^10.0.0":
+  version: 10.1.0
+  resolution: "fs-extra@npm:10.1.0"
+  dependencies:
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10/05ce2c3b59049bcb7b52001acd000e44b3c4af4ec1f8839f383ef41ec0048e3cfa7fd8a637b1bddfefad319145db89be91f4b7c1db2908205d38bf91e7d1d3b7
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^11.2.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
@@ -9871,6 +9942,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"header-case@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "header-case@npm:2.0.4"
+  dependencies:
+    capital-case: "npm:^1.0.4"
+    tslib: "npm:^2.0.3"
+  checksum: 10/571c83eeb25e8130d172218712f807c0b96d62b020981400bccc1503a7cf14b09b8b10498a962d2739eccf231d950e3848ba7d420b58a6acd2f9283439546cd9
+  languageName: node
+  linkType: hard
+
 "highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
   version: 10.7.3
   resolution: "highlight.js@npm:10.7.3"
@@ -11448,6 +11529,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonc-parser@npm:^3.0.0":
+  version: 3.2.1
+  resolution: "jsonc-parser@npm:3.2.1"
+  checksum: 10/fe2df6f39e21653781d52cae20c5b9e0ab62461918d97f9430b216cea9b6500efc1d8b42c6584cc0a7548b4c996055e9cdc39f09b9782fa6957af2f45306c530
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
@@ -12667,6 +12755,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"param-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "param-case@npm:3.0.4"
+  dependencies:
+    dot-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+  checksum: 10/b34227fd0f794e078776eb3aa6247442056cb47761e9cd2c4c881c86d84c64205f6a56ef0d70b41ee7d77da02c3f4ed2f88e3896a8fefe08bdfb4deca037c687
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -12718,6 +12816,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pascal-case@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "pascal-case@npm:3.1.2"
+  dependencies:
+    no-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+  checksum: 10/ba98bfd595fc91ef3d30f4243b1aee2f6ec41c53b4546bfa3039487c367abaa182471dcfc830a1f9e1a0df00c14a370514fa2b3a1aacc68b15a460c31116873e
+  languageName: node
+  linkType: hard
+
+"path-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "path-case@npm:3.0.4"
+  dependencies:
+    dot-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+  checksum: 10/61de0526222629f65038a66f63330dd22d5b54014ded6636283e1d15364da38b3cf29e4433aa3f9d8b0dba407ae2b059c23b0104a34ee789944b1bc1c5c7e06d
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^3.0.0":
   version: 3.0.0
   resolution: "path-exists@npm:3.0.0"
@@ -14114,6 +14232,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sentence-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "sentence-case@npm:3.0.4"
+  dependencies:
+    no-case: "npm:^3.0.4"
+    tslib: "npm:^2.0.3"
+    upper-case-first: "npm:^2.0.2"
+  checksum: 10/3cfe6c0143e649132365695706702d7f729f484fa7b25f43435876efe7af2478243eefb052bacbcce10babf9319fd6b5b6bc59b94c80a1c819bcbb40651465d5
+  languageName: node
+  linkType: hard
+
 "serialize-error@npm:^7.0.1":
   version: 7.0.1
   resolution: "serialize-error@npm:7.0.1"
@@ -14737,6 +14866,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-dictionary@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "style-dictionary@npm:3.9.2"
+  dependencies:
+    chalk: "npm:^4.0.0"
+    change-case: "npm:^4.1.2"
+    commander: "npm:^8.3.0"
+    fs-extra: "npm:^10.0.0"
+    glob: "npm:^10.3.10"
+    json5: "npm:^2.2.2"
+    jsonc-parser: "npm:^3.0.0"
+    lodash: "npm:^4.17.15"
+    tinycolor2: "npm:^1.4.1"
+  bin:
+    style-dictionary: bin/style-dictionary
+  checksum: 10/3b12b00075caf708c15faf3e397011576c1297565421d5bba88ce4f27e01446dc28e9f7eb79d239ecad5b4ba92a689d1888216dca08883d32dc45ce255ecf84a
+  languageName: node
+  linkType: hard
+
 "stylis@npm:^3.5.4":
   version: 3.5.4
   resolution: "stylis@npm:3.5.4"
@@ -14972,6 +15120,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinycolor2@npm:^1.4.1":
+  version: 1.6.0
+  resolution: "tinycolor2@npm:1.6.0"
+  checksum: 10/066c3acf4f82b81c58a0d3ab85f49407efe95ba87afc3c7a16b1d77625193dfbe10dd46c26d0a263c1137361dd5a6a68bff2fb71def5fb9b9aec940fb030bcd4
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"
@@ -15577,6 +15732,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"upper-case-first@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "upper-case-first@npm:2.0.2"
+  dependencies:
+    tslib: "npm:^2.0.3"
+  checksum: 10/4487db4701effe3b54ced4b3e4aa4d9ab06c548f97244d04aafb642eedf96a76d5a03cf5f38f10f415531d5792d1ac6e1b50f2a76984dc6964ad530f12876409
+  languageName: node
+  linkType: hard
+
+"upper-case@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "upper-case@npm:2.0.2"
+  dependencies:
+    tslib: "npm:^2.0.3"
+  checksum: 10/508723a2b03ab90cf1d6b7e0397513980fab821cbe79c87341d0e96cedefadf0d85f9d71eac24ab23f526a041d585a575cfca120a9f920e44eb4f8a7cf89121c
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"