diff --git a/apps/theme/app/page.module.css b/apps/theme/app/page.module.css
index 170361601f..797fd5ac44 100644
--- a/apps/theme/app/page.module.css
+++ b/apps/theme/app/page.module.css
@@ -8,12 +8,6 @@
   font-size: 18px;
 }
 
-.preview.dark,
-.preview.contrast {
-  --back: var(--grey1);
-  --fore: var(--grey2);
-}
-
 .container {
   max-width: 1600px;
   margin: 0 auto;
diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
index cdd934e056..f2da3ed0d9 100644
--- a/apps/theme/app/page.tsx
+++ b/apps/theme/app/page.tsx
@@ -231,8 +231,7 @@ export default function Home() {
       <Header />
 
       <ColorModal
-        name={selectedColor.name}
-        color={selectedColor.hex}
+        color={selectedColor}
         colorModalRef={colorModalRef}
       />
 
diff --git a/apps/theme/components/Color/Color.tsx b/apps/theme/components/Color/Color.tsx
index b968ff85ed..865227ef6c 100644
--- a/apps/theme/components/Color/Color.tsx
+++ b/apps/theme/components/Color/Color.tsx
@@ -1,6 +1,6 @@
 import cl from 'clsx/lite';
 import { SunIcon } from '@navikt/aksel-icons';
-import type { ColorInfo } from '@digdir/designsystemet/color';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
 
 import { useThemeStore } from '../../store';
 
@@ -14,6 +14,7 @@ type ColorProps = {
   featured?: boolean;
   hex?: string;
   showColorMeta?: boolean;
+  type: ColorType;
 };
 
 const Color = ({
@@ -23,17 +24,21 @@ const Color = ({
   lightness,
   hex,
   showColorMeta = true,
+  type,
 }: ColorProps) => {
   const setSelectedColor = useThemeStore((state) => state.setSelectedColor);
   return (
     <div>
       <button
         onClick={() => {
-          setSelectedColor({
-            hex: color.hex,
-            number: color.number,
-            name: color.name,
-          });
+          setSelectedColor(
+            {
+              hex: color.hex,
+              number: color.number,
+              name: color.name,
+            },
+            type,
+          );
         }}
         style={{ backgroundColor: color.hex }}
         className={cl(classes.box, featured && classes.featured)}
diff --git a/apps/theme/components/ColorModal/ColorModal.module.css b/apps/theme/components/ColorModal/ColorModal.module.css
index db825c7abb..ec1dfdd683 100644
--- a/apps/theme/components/ColorModal/ColorModal.module.css
+++ b/apps/theme/components/ColorModal/ColorModal.module.css
@@ -3,9 +3,9 @@
 }
 
 .container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--ds-color-neutral-border-subtle);
   border-radius: 8px;
-  min-height: 280px;
+  min-height: 275px;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
@@ -13,17 +13,26 @@
 
 .left {
   width: 50%;
-  padding: 20px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  font-size: 16px;
 }
 
 .right {
   width: 50%;
+  border-left: 1px solid var(--ds-color-neutral-border-subtle);
 }
 
 .field {
   display: flex;
   align-items: center;
-  font-size: 18px;
+  height: 24px;
+}
+
+.field:last-child {
+  margin-bottom: 0;
 }
 
 .label {
@@ -32,5 +41,5 @@
 }
 
 .value {
-  margin-right: 12px;
+  margin-right: 8px;
 }
diff --git a/apps/theme/components/ColorModal/ColorModal.tsx b/apps/theme/components/ColorModal/ColorModal.tsx
index 51eb6b9264..6eb49bda74 100644
--- a/apps/theme/components/ColorModal/ColorModal.tsx
+++ b/apps/theme/components/ColorModal/ColorModal.tsx
@@ -1,5 +1,6 @@
 import { Modal } from '@digdir/designsystemet-react';
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
+import { getCssVariable, hexToHSL } from '@digdir/designsystemet/color';
 
 import { CopyBtn } from '../CopyBtn/CopyBtn';
 
@@ -8,10 +9,32 @@ import classes from './ColorModal.module.css';
 type ColorModalProps = {
   colorModalRef: React.RefObject<HTMLDialogElement>;
   name: string;
-  color: CssColor;
+  color: { color: ColorInfo; type: ColorType };
 };
 
-export const ColorModal = ({ colorModalRef, name, color }: ColorModalProps) => {
+const Field = ({
+  label,
+  value,
+  copyBtn = false,
+}: {
+  label: string;
+  value: string;
+  copyBtn?: boolean;
+}) => {
+  return (
+    <div className={classes.field}>
+      <div className={classes.label}>{label}</div>
+      <div className={classes.value}>{value}</div>
+      {copyBtn && <CopyBtn text={value} />}
+    </div>
+  );
+};
+
+const capitalizeFirstLetter = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const ColorModal = ({ colorModalRef, color }: ColorModalProps) => {
   return (
     <Modal
       ref={colorModalRef}
@@ -21,19 +44,44 @@ export const ColorModal = ({ colorModalRef, name, color }: ColorModalProps) => {
       className={classes.modal}
       onInteractOutside={() => colorModalRef.current?.close()}
     >
-      <Modal.Header>{name}</Modal.Header>
+      <Modal.Header>
+        {capitalizeFirstLetter(color.type) + ' ' + color.color.name}
+      </Modal.Header>
       <Modal.Content className={classes.modalContent}>
         <div className={classes.container}>
           <div className={classes.left}>
-            <div className={classes.field}>
-              <div className={classes.label}>Hexkode:</div>
-              <div className={classes.value}>{color}</div>
-              <CopyBtn text={color} />
-            </div>
+            <Field
+              label='Hexkode:'
+              value={color.color.hex}
+              copyBtn
+            />
+            <Field
+              label='HSLuv:'
+              value={
+                hexToHSL(color.color.hex)[0].toFixed(0) +
+                '° ' +
+                hexToHSL(color.color.hex)[1].toFixed(0) +
+                '% ' +
+                hexToHSL(color.color.hex)[2].toFixed(0) +
+                '%'
+              }
+            />
+            <Field
+              label='CSS variabel:'
+              value={getCssVariable(color.type, color.color.number)}
+              copyBtn
+            />
+            {/* <Field
+              label='Illuminans terskel:'
+              value='30-40%'
+            />
+            <div>
+              Les mer om denne fargen <Link href='#'>her</Link>.
+            </div> */}
           </div>
           <div
             className={classes.right}
-            style={{ backgroundColor: color }}
+            style={{ backgroundColor: color.color.hex }}
           ></div>
         </div>
       </Modal.Content>
diff --git a/apps/theme/components/Group/Group.tsx b/apps/theme/components/Group/Group.tsx
index 46cf5ace32..69aff42ddc 100644
--- a/apps/theme/components/Group/Group.tsx
+++ b/apps/theme/components/Group/Group.tsx
@@ -1,5 +1,5 @@
 import cl from 'clsx/lite';
-import type { ColorInfo } from '@digdir/designsystemet/color';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
 
 import { Color } from '../Color/Color';
 
@@ -11,6 +11,7 @@ type GroupProps = {
   showColorMeta?: boolean;
   names?: string[];
   featured?: boolean;
+  type: ColorType;
 };
 
 export const Group = ({
@@ -18,7 +19,7 @@ export const Group = ({
   colors,
   showColorMeta,
   names,
-
+  type,
   featured = false,
 }: GroupProps) => {
   return (
@@ -46,6 +47,7 @@ export const Group = ({
               lightness={'dd'}
               hex={item.hex}
               showColorMeta={showColorMeta}
+              type={type}
             />
           );
         })}
diff --git a/apps/theme/components/Previews/Dashboard/AreaChart/AreaChart.module.css b/apps/theme/components/Previews/Dashboard/AreaChart/AreaChart.module.css
index c3521c59f7..b737cf9bad 100644
--- a/apps/theme/components/Previews/Dashboard/AreaChart/AreaChart.module.css
+++ b/apps/theme/components/Previews/Dashboard/AreaChart/AreaChart.module.css
@@ -3,9 +3,9 @@
 }
 
 .area svg g:nth-child(7) path:first-child {
-  fill: var(--brandOne7);
+  fill: var(--brand1-7);
 }
 
 .area svg g:nth-child(8) path:first-child {
-  fill: var(--brandThree7);
+  fill: var(--brand3-7);
 }
diff --git a/apps/theme/components/Previews/Dashboard/BarChart/BarChart.module.css b/apps/theme/components/Previews/Dashboard/BarChart/BarChart.module.css
index 9e78c0bfb9..0e6a3e5587 100644
--- a/apps/theme/components/Previews/Dashboard/BarChart/BarChart.module.css
+++ b/apps/theme/components/Previews/Dashboard/BarChart/BarChart.module.css
@@ -3,9 +3,9 @@
 }
 
 .bar svg g:nth-child(7) path {
-  fill: var(--brandThree6);
+  fill: var(--brand3-6);
 }
 
 .bar svg g:nth-child(8) path {
-  fill: var(--brandOne6);
+  fill: var(--brand1-6);
 }
diff --git a/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.module.css b/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.module.css
index 89b6db868d..ccea40050a 100644
--- a/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.module.css
+++ b/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.module.css
@@ -1,20 +1,20 @@
 .colorCard {
-  background-color: var(--brandOne3);
+  background-color: var(--brand1-3);
   width: 270px;
   border-radius: 8px;
   padding: 24px;
 }
 
 .colorCardTwo {
-  background-color: var(--brandTwo3);
+  background-color: var(--brand2-3);
 }
 
 .colorCardThree {
-  background-color: var(--brandThree3);
+  background-color: var(--brand3-3);
 }
 
 .colorCardIcon {
-  background-color: var(--brandOne5);
+  background-color: var(--brand1-5);
   height: 40px;
   width: 40px;
   border-radius: 50%;
@@ -26,30 +26,30 @@
 }
 
 .colorCardIconTwo {
-  background-color: var(--brandTwo5);
-  color: var(--brandTwo12);
+  background-color: var(--brand2-5);
+  color: var(--brand2-12);
 }
 
 .colorCardIconThree {
-  background-color: var(--brandThree5);
-  color: var(--brandThree12);
+  background-color: var(--brand3-5);
+  color: var(--brand3-12);
 }
 
 .colorCardTitle {
-  color: var(--brandOne12);
+  color: var(--brand1-12);
   margin-bottom: 8px;
 }
 
 .colorCardDesc {
-  color: var(--brandOne12);
+  color: var(--brand1-12);
 }
 
 .textTwo .colorCardTitle,
 .textTwo .colorCardDesc {
-  color: var(--brandTwo12) !important;
+  color: var(--brand2-12) !important;
 }
 
 .textThree .colorCardTitle,
 .textThree .colorCardDesc {
-  color: var(--brandThree12) !important;
+  color: var(--brand3-12) !important;
 }
diff --git a/apps/theme/components/Previews/Dashboard/Dashboard.module.css b/apps/theme/components/Previews/Dashboard/Dashboard.module.css
index 7dc8957b1e..6b01388c04 100644
--- a/apps/theme/components/Previews/Dashboard/Dashboard.module.css
+++ b/apps/theme/components/Previews/Dashboard/Dashboard.module.css
@@ -114,7 +114,7 @@
 
 .userName {
   font-size: 16px;
-  color: var(--grey13);
+  color: var(--neutral-13);
 }
 
 .user img {
diff --git a/apps/theme/components/Previews/Dashboard/LineCart/LineChart.module.css b/apps/theme/components/Previews/Dashboard/LineCart/LineChart.module.css
index 11e6417323..a41f67dfa3 100644
--- a/apps/theme/components/Previews/Dashboard/LineCart/LineChart.module.css
+++ b/apps/theme/components/Previews/Dashboard/LineCart/LineChart.module.css
@@ -3,9 +3,9 @@
 }
 
 .line svg g:nth-child(7) path {
-  stroke: var(--brandOne9);
+  stroke: var(--brand1-9);
 }
 
 .line svg g:nth-child(8) path {
-  stroke: var(--brandThree9);
+  stroke: var(--brand3-9);
 }
diff --git a/apps/theme/components/Previews/Landing/Landing.module.css b/apps/theme/components/Previews/Landing/Landing.module.css
index fc12a06849..4b9c0bea65 100644
--- a/apps/theme/components/Previews/Landing/Landing.module.css
+++ b/apps/theme/components/Previews/Landing/Landing.module.css
@@ -12,11 +12,11 @@
 }
 
 .headerLeft svg path:first-child {
-  fill: var(--accent9);
+  fill: var(--accent-9);
 }
 
 .headerLeft svg path:last-child {
-  fill: var(--accent6);
+  fill: var(--accent-6);
 }
 
 .headerLeft svg {
@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: space-between;
   height: 80px;
-  background-color: var(--accent1);
+  background-color: var(--accent-1);
 }
 
 .headerLeft {
@@ -39,7 +39,7 @@
   font-weight: 500;
   gap: 10px;
   font-size: 21px;
-  color: var(--grey12);
+  color: var(--neutral-12);
 }
 
 .headerRight {
@@ -51,7 +51,7 @@
 .headerMiddle {
   margin-right: auto;
   margin-left: 72px;
-  color: var(--grey12);
+  color: var(--neutral-12);
 }
 
 .menu {
@@ -61,7 +61,7 @@
 }
 
 .banner {
-  background-color: var(--accent2);
+  background-color: var(--accent-2);
   padding: 72px 0;
 }
 
@@ -85,7 +85,7 @@
 }
 
 .bannerSub {
-  color: var(--accent11);
+  color: var(--accent-11);
   font-weight: 500;
   font-size: 21px;
 }
@@ -95,5 +95,5 @@
   width: 220px;
   margin-left: 250px;
   border-radius: 50%;
-  background-color: var(--accent7);
+  background-color: var(--accent-7);
 }
diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
index bfab949d96..c1ab09eb06 100644
--- a/apps/theme/components/Previews/Previews.module.css
+++ b/apps/theme/components/Previews/Previews.module.css
@@ -69,8 +69,8 @@
 }
 
 .preview {
-  --background: var(--grey2);
-  --foreground: var(--grey1);
+  --background: var(--neutral-2);
+  --foreground: var(--neutral-1);
 
   border: 1px solid #ebebeb;
   width: 100%;
@@ -82,6 +82,6 @@
 
 .preview[data-ds-color-mode='dark'],
 .preview[data-ds-color-mode='contrast'] {
-  --background: var(--grey1);
-  --foreground: var(--grey2);
+  --background: var(--neutral-1);
+  --foreground: var(--neutral-2);
 }
diff --git a/apps/theme/components/Scale/Scale.tsx b/apps/theme/components/Scale/Scale.tsx
index 5b2001d0ec..2b4a33d27c 100644
--- a/apps/theme/components/Scale/Scale.tsx
+++ b/apps/theme/components/Scale/Scale.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { ColorInfo } from '@digdir/designsystemet/color';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
 
 import type { modeType } from '../../types';
 import { Group } from '../Group/Group';
@@ -11,7 +11,7 @@ type ScaleProps = {
   showHeader?: boolean;
   showColorMeta?: boolean;
   themeMode: modeType;
-  type: 'accent' | 'grey' | 'brandOne' | 'brandTwo' | 'brandThree';
+  type: ColorType;
 };
 
 const setTokens = (lightColors: ColorInfo[], type: string) => {
@@ -19,7 +19,7 @@ const setTokens = (lightColors: ColorInfo[], type: string) => {
   if (previewElement) {
     for (let i = 0; i < lightColors.length; i++) {
       previewElement.style.setProperty(
-        '--' + type + (i + 1),
+        '--' + type + '-' + (i + 1),
         lightColors[i].hex,
       );
     }
@@ -63,24 +63,28 @@ export const Scale = ({
           colors={[colors[0], colors[1]]}
           showColorMeta={showColorMeta}
           names={['1. Default', '2. Subtle']}
+          type={type}
         />
         <Group
           header={showHeader ? 'Surface' : ''}
           colors={[colors[2], colors[3], colors[4]]}
           showColorMeta={showColorMeta}
           names={['3. Default', '4. Hover', '5. Active']}
+          type={type}
         />
         <Group
           showColorMeta={showColorMeta}
           header={showHeader ? 'Border' : ''}
           colors={[colors[5], colors[6], colors[7]]}
           names={['6. Subtle', '7. Default', '8. Strong']}
+          type={type}
         />
         <Group
           showColorMeta={showColorMeta}
           header={showHeader ? 'Base' : ''}
           colors={[colors[8], colors[9], colors[10]]}
           names={['9. Default', '10. Hover', '11. Active']}
+          type={type}
           featured
         />
         <Group
@@ -88,6 +92,7 @@ export const Scale = ({
           header={showHeader ? 'Text' : ''}
           colors={[colors[11], colors[12]]}
           names={['12. Subtle', '13. Default']}
+          type={type}
         />
       </div>
     </div>
diff --git a/apps/theme/components/Scales/Scales.tsx b/apps/theme/components/Scales/Scales.tsx
index 8b93a9b8fa..c65c1e4723 100644
--- a/apps/theme/components/Scales/Scales.tsx
+++ b/apps/theme/components/Scales/Scales.tsx
@@ -34,7 +34,7 @@ export const Scales = ({ themeMode }: ScalesProps) => {
           colorScale={neutralTheme.theme[themeMode]}
           showColorMeta={false}
           themeMode={themeMode}
-          type='grey'
+          type='neutral'
         />
       </div>
 
@@ -44,7 +44,7 @@ export const Scales = ({ themeMode }: ScalesProps) => {
           colorScale={brandOneTheme.theme[themeMode]}
           showColorMeta={false}
           themeMode={themeMode}
-          type='brandOne'
+          type='brand1'
         />
       </div>
       <div className={classes.row}>
@@ -53,7 +53,7 @@ export const Scales = ({ themeMode }: ScalesProps) => {
           colorScale={brandTwoTheme.theme[themeMode]}
           showColorMeta={false}
           themeMode={themeMode}
-          type='brandTwo'
+          type='brand2'
         />
       </div>
 
@@ -63,7 +63,7 @@ export const Scales = ({ themeMode }: ScalesProps) => {
           colorScale={brandThreeTheme.theme[themeMode]}
           showColorMeta={false}
           themeMode={themeMode}
-          type='brandThree'
+          type='brand3'
         />
       </div>
     </div>
diff --git a/apps/theme/store.ts b/apps/theme/store.ts
index 59011bbadb..3036e0cac9 100644
--- a/apps/theme/store.ts
+++ b/apps/theme/store.ts
@@ -1,7 +1,11 @@
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import type { ColorInfo, ThemeInfo } from '@digdir/designsystemet/color';
+import type {
+  ColorInfo,
+  ColorType,
+  ThemeInfo,
+} from '@digdir/designsystemet/color';
 
 import { Settings } from './settings';
 
@@ -21,8 +25,8 @@ type ColorStore = {
   setBrandOneTheme: (theme: ThemeInfo, color: CssColor) => void;
   setBrandTwoTheme: (theme: ThemeInfo, color: CssColor) => void;
   setBrandThreeTheme: (theme: ThemeInfo, color: CssColor) => void;
-  selectedColor: ColorInfo;
-  setSelectedColor: (color: ColorInfo) => void;
+  selectedColor: { color: ColorInfo; type: string };
+  setSelectedColor: (color: ColorInfo, type: ColorType) => void;
 };
 
 const defaultTheme = () => {
@@ -56,11 +60,15 @@ export const useThemeStore = create(
       color: Settings.brand3BaseColor,
     },
     selectedColor: {
-      hex: '#ffffff',
-      number: 1,
-      name: 'Default',
+      color: {
+        hex: '#ffffff',
+        number: 1,
+        name: 'Default',
+      },
+      type: '',
     },
-    setSelectedColor: (color) => set({ selectedColor: color }),
+    setSelectedColor: (color, type) =>
+      set({ selectedColor: { color: color, type: type } }),
     setAccentTheme: (theme, color) => set({ accentTheme: { theme, color } }),
     setNeutralTheme: (theme, color) => set({ neutralTheme: { theme, color } }),
     setBrandOneTheme: (theme, color) =>
diff --git a/apps/theme/utils/tokenMapping.ts b/apps/theme/utils/tokenMapping.ts
index a4d72ab384..55f3b9934b 100644
--- a/apps/theme/utils/tokenMapping.ts
+++ b/apps/theme/utils/tokenMapping.ts
@@ -1,91 +1,91 @@
 export const mapTokens = () => {
   // accent
-  setToken('--ds-color-accent-background-default', 'var(--accent1)');
-  setToken('--ds-color-accent-background-subtle', 'var(--accent2)');
-  setToken('--ds-color-accent-surface-default', 'var(--accent3)');
-  setToken('--ds-color-accent-surface-hover', 'var(--accent4)');
-  setToken('--ds-color-accent-surface-active', 'var(--accent5)');
-  setToken('--ds-color-accent-border-subtle', 'var(--accent6)');
-  setToken('--ds-color-accent-border-default', 'var(--accent7)');
-  setToken('--ds-color-accent-border-strong', 'var(--accent8)');
-  setToken('--ds-color-accent-base-default', 'var(--accent9)');
-  setToken('--ds-color-accent-base-hover', 'var(--accent10)');
-  setToken('--ds-color-accent-base-active', 'var(--accent11)');
-  setToken('--ds-color-accent-text-subtle', 'var(--accent12)');
-  setToken('--ds-color-accent-text-default', 'var(--accent13)');
-  setToken('--ds-color-accent-contrast-default', 'var(--accent14)');
-  setToken('--ds-color-accent-contrast-sublte', 'var(--accent15)');
+  setToken('--ds-color-accent-background-default', 'var(--accent-1)');
+  setToken('--ds-color-accent-background-subtle', 'var(--accent-2)');
+  setToken('--ds-color-accent-surface-default', 'var(--accent-3)');
+  setToken('--ds-color-accent-surface-hover', 'var(--accent-4)');
+  setToken('--ds-color-accent-surface-active', 'var(--accent-5)');
+  setToken('--ds-color-accent-border-subtle', 'var(--accent-6)');
+  setToken('--ds-color-accent-border-default', 'var(--accent-7)');
+  setToken('--ds-color-accent-border-strong', 'var(--accent-8)');
+  setToken('--ds-color-accent-base-default', 'var(--accent-9)');
+  setToken('--ds-color-accent-base-hover', 'var(--accent-10)');
+  setToken('--ds-color-accent-base-active', 'var(--accent-11)');
+  setToken('--ds-color-accent-text-subtle', 'var(--accent-12)');
+  setToken('--ds-color-accent-text-default', 'var(--accent-13)');
+  setToken('--ds-color-accent-contrast-default', 'var(--accent-14)');
+  setToken('--ds-color-accent-contrast-sublte', 'var(--accent-15)');
 
   // neutral
-  setToken('--ds-color-neutral-background-default', 'var(--grey1)');
-  setToken('--ds-color-neutral-background-subtle', 'var(--grey2)');
-  setToken('--ds-color-neutral-surface-default', 'var(--grey3)');
-  setToken('--ds-color-neutral-surface-hover', 'var(--grey4)');
-  setToken('--ds-color-neutral-surface-active', 'var(--grey5)');
-  setToken('--ds-color-neutral-border-subtle', 'var(--grey6)');
-  setToken('--ds-color-neutral-border-default', 'var(--grey7)');
-  setToken('--ds-color-neutral-border-strong', 'var(--grey8)');
-  setToken('--ds-color-neutral-base-default', 'var(--grey9)');
-  setToken('--ds-color-neutral-base-hover', 'var(--grey10)');
-  setToken('--ds-color-neutral-base-active', 'var(--grey11)');
-  setToken('--ds-color-neutral-text-subtle', 'var(--grey12)');
-  setToken('--ds-color-neutral-text-default', 'var(--grey13)');
-  setToken('--ds-color-neutral-contrast-default', 'var(--grey14)');
-  setToken('--ds-color-neutral-contrast-sublte', 'var(--grey15)');
+  setToken('--ds-color-neutral-background-default', 'var(--neutral-1)');
+  setToken('--ds-color-neutral-background-subtle', 'var(--neutral-2)');
+  setToken('--ds-color-neutral-surface-default', 'var(--neutral-3)');
+  setToken('--ds-color-neutral-surface-hover', 'var(--neutral-4)');
+  setToken('--ds-color-neutral-surface-active', 'var(--neutral-5)');
+  setToken('--ds-color-neutral-border-subtle', 'var(--neutral-6)');
+  setToken('--ds-color-neutral-border-default', 'var(--neutral-7)');
+  setToken('--ds-color-neutral-border-strong', 'var(--neutral-8)');
+  setToken('--ds-color-neutral-base-default', 'var(--neutral-9)');
+  setToken('--ds-color-neutral-base-hover', 'var(--neutral-10)');
+  setToken('--ds-color-neutral-base-active', 'var(--neutral-11)');
+  setToken('--ds-color-neutral-text-subtle', 'var(--neutral-12)');
+  setToken('--ds-color-neutral-text-default', 'var(--neutral-13)');
+  setToken('--ds-color-neutral-contrast-default', 'var(--neutral-14)');
+  setToken('--ds-color-neutral-contrast-sublte', 'var(--neutral-15)');
 
   // brand 1
-  setToken('--ds-color-brand1-background-default', 'var(--brandOne1)');
-  setToken('--ds-color-brand1-background-subtle', 'var(--brandOne2)');
-  setToken('--ds-color-brand1-surface-default', 'var(--brandOne3)');
-  setToken('--ds-color-brand1-surface-hover', 'var(--brandOne4)');
-  setToken('--ds-color-brand1-surface-active', 'var(--brandOne5)');
-  setToken('--ds-color-brand1-border-subtle', 'var(--brandOne6)');
-  setToken('--ds-color-brand1-border-default', 'var(--brandOne7)');
-  setToken('--ds-color-brand1-border-strong', 'var(--brandOne8)');
-  setToken('--ds-color-brand1-base-default', 'var(--brandOne9)');
-  setToken('--ds-color-brand1-base-hover', 'var(--brandOne10)');
-  setToken('--ds-color-brand1-base-active', 'var(--brandOne11)');
-  setToken('--ds-color-brand1-text-subtle', 'var(--brandOne12)');
-  setToken('--ds-color-brand1-text-default', 'var(--brandOne13)');
-  setToken('--ds-color-brand1-contrast-default', 'var(--brandOne14)');
-  setToken('--ds-color-brand1-contrast-sublte', 'var(--brandOne15)');
+  setToken('--ds-color-brand1-background-default', 'var(--brand1-1)');
+  setToken('--ds-color-brand1-background-subtle', 'var(--brand1-2)');
+  setToken('--ds-color-brand1-surface-default', 'var(--brand1-3)');
+  setToken('--ds-color-brand1-surface-hover', 'var(--brand1-4)');
+  setToken('--ds-color-brand1-surface-active', 'var(--brand1-5)');
+  setToken('--ds-color-brand1-border-subtle', 'var(--brand1-6)');
+  setToken('--ds-color-brand1-border-default', 'var(--brand1-7)');
+  setToken('--ds-color-brand1-border-strong', 'var(--brand1-8)');
+  setToken('--ds-color-brand1-base-default', 'var(--brand1-9)');
+  setToken('--ds-color-brand1-base-hover', 'var(--brand1-10)');
+  setToken('--ds-color-brand1-base-active', 'var(--brand1-11)');
+  setToken('--ds-color-brand1-text-subtle', 'var(--brand1-12)');
+  setToken('--ds-color-brand1-text-default', 'var(--brand1-13)');
+  setToken('--ds-color-brand1-contrast-default', 'var(--brand1-14)');
+  setToken('--ds-color-brand1-contrast-sublte', 'var(--brand1-15)');
 
   // brand 2
-  setToken('--ds-color-brand2-background-default', 'var(--brandTwo1)');
-  setToken('--ds-color-brand2-background-subtle', 'var(--brandTwo2)');
-  setToken('--ds-color-brand2-surface-default', 'var(--brandTwo3)');
-  setToken('--ds-color-brand2-surface-hover', 'var(--brandTwo4)');
-  setToken('--ds-color-brand2-surface-active', 'var(--brandTwo5)');
-  setToken('--ds-color-brand2-border-subtle', 'var(--brandTwo6)');
-  setToken('--ds-color-brand2-border-default', 'var(--brandTwo7)');
-  setToken('--ds-color-brand2-border-strong', 'var(--brandTwo8)');
-  setToken('--ds-color-brand2-base-default', 'var(--brandTwo9)');
-  setToken('--ds-color-brand2-base-hover', 'var(--brandTwo10)');
-  setToken('--ds-color-brand2-base-active', 'var(--brandTwo11)');
-  setToken('--ds-color-brand2-text-subtle', 'var(--brandTwo12)');
-  setToken('--ds-color-brand2-text-default', 'var(--brandTwo13)');
-  setToken('--ds-color-brand2-contrast-default', 'var(--brandTwo14)');
-  setToken('--ds-color-brand2-contrast-sublte', 'var(--brandTwo15)');
+  setToken('--ds-color-brand2-background-default', 'var(--brand2-1)');
+  setToken('--ds-color-brand2-background-subtle', 'var(--brand2-2)');
+  setToken('--ds-color-brand2-surface-default', 'var(--brand2-3)');
+  setToken('--ds-color-brand2-surface-hover', 'var(--brand2-4)');
+  setToken('--ds-color-brand2-surface-active', 'var(--brand2-5)');
+  setToken('--ds-color-brand2-border-subtle', 'var(--brand2-6)');
+  setToken('--ds-color-brand2-border-default', 'var(--brand2-7)');
+  setToken('--ds-color-brand2-border-strong', 'var(--brand2-8)');
+  setToken('--ds-color-brand2-base-default', 'var(--brand2-9)');
+  setToken('--ds-color-brand2-base-hover', 'var(--brand2-10)');
+  setToken('--ds-color-brand2-base-active', 'var(--brand2-11)');
+  setToken('--ds-color-brand2-text-subtle', 'var(--brand2-12)');
+  setToken('--ds-color-brand2-text-default', 'var(--brand2-13)');
+  setToken('--ds-color-brand2-contrast-default', 'var(--brand2-14)');
+  setToken('--ds-color-brand2-contrast-sublte', 'var(--brand2-15)');
 
   // brand 3
-  setToken('--ds-color-brand3-background-default', 'var(--brandThree1)');
-  setToken('--ds-color-brand3-background-subtle', 'var(--brandThree2)');
-  setToken('--ds-color-brand3-surface-default', 'var(--brandThree3)');
-  setToken('--ds-color-brand3-surface-hover', 'var(--brandThree4)');
-  setToken('--ds-color-brand3-surface-active', 'var(--brandThree5)');
-  setToken('--ds-color-brand3-border-subtle', 'var(--brandThree6)');
-  setToken('--ds-color-brand3-border-default', 'var(--brandThree7)');
-  setToken('--ds-color-brand3-border-strong', 'var(--brandThree8)');
-  setToken('--ds-color-brand3-base-default', 'var(--brandThree9)');
-  setToken('--ds-color-brand3-base-hover', 'var(--brandThree10)');
-  setToken('--ds-color-brand3-base-active', 'var(--brandThree11)');
-  setToken('--ds-color-brand3-text-subtle', 'var(--brandThree12)');
-  setToken('--ds-color-brand3-text-default', 'var(--brandThree13)');
-  setToken('--ds-color-brand3-contrast-default', 'var(--brandThree14)');
-  setToken('--ds-color-brand3-contrast-sublte', 'var(--brandThree15)');
+  setToken('--ds-color-brand3-background-default', 'var(--brand3-1)');
+  setToken('--ds-color-brand3-background-subtle', 'var(--brand3-2)');
+  setToken('--ds-color-brand3-surface-default', 'var(--brand3-3)');
+  setToken('--ds-color-brand3-surface-hover', 'var(--brand3-4)');
+  setToken('--ds-color-brand3-surface-active', 'var(--brand3-5)');
+  setToken('--ds-color-brand3-border-subtle', 'var(--brand3-6)');
+  setToken('--ds-color-brand3-border-default', 'var(--brand3-7)');
+  setToken('--ds-color-brand3-border-strong', 'var(--brand3-8)');
+  setToken('--ds-color-brand3-base-default', 'var(--brand3-9)');
+  setToken('--ds-color-brand3-base-hover', 'var(--brand3-10)');
+  setToken('--ds-color-brand3-base-active', 'var(--brand3-11)');
+  setToken('--ds-color-brand3-text-subtle', 'var(--brand3-12)');
+  setToken('--ds-color-brand3-text-default', 'var(--brand3-13)');
+  setToken('--ds-color-brand3-contrast-default', 'var(--brand3-14)');
+  setToken('--ds-color-brand3-contrast-sublte', 'var(--brand3-15)');
 
-  setToken('--ds-color-focus-outer', 'var(--grey13)');
-  setToken('--ds-color-focus-inner', 'var(--grey1)');
+  setToken('--ds-color-focus-outer', 'var(--neutral13)');
+  setToken('--ds-color-focus-inner', 'var(--neutral1)');
 };
 
 const setToken = (token: string, color: string) => {
diff --git a/packages/cli/src/colors/themeUtils.ts b/packages/cli/src/colors/themeUtils.ts
index 78397cce8b..20c0898ecc 100644
--- a/packages/cli/src/colors/themeUtils.ts
+++ b/packages/cli/src/colors/themeUtils.ts
@@ -2,7 +2,7 @@ import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
 import { Hsluv } from 'hsluv';
 
-import type { ContrastMode, Mode, ColorInfo, ColorNumber, ThemeInfo } from './types.ts';
+import type { ContrastMode, Mode, ColorInfo, ColorNumber, ThemeInfo, ColorType } from './types.ts';
 import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from './colorUtils';
 
 const blueBaseColor = '#0A71C0';
@@ -351,3 +351,7 @@ export const getBaseColor = (color: CssColor) => {
 
   return conv.hex as CssColor;
 };
+
+export const getCssVariable = (colorType: ColorType, colorNumber: ColorNumber) => {
+  return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, '-')}`;
+};