diff --git a/base/border-radius.css b/base/border-radius.css
index b4aca65a10..9cab353184 100644
--- a/base/border-radius.css
+++ b/base/border-radius.css
@@ -5,11 +5,11 @@
 
 :root {
   /* No radius */
-  --borderradiusborderradiusnone: 0px;
-  --borderradiusborderradiussmall: 3px;
-  --borderradiusborderradiusdefault: 5px;
-  --borderradiusborderradiusmedium: 7px;
-  --borderradiusborderradiuslarge: 12px;
+  --dsprimary-border-radius-border-radius-none: 0px;
+  --dsprimary-border-radius-border-radius-small: 3px;
+  --dsprimary-border-radius-border-radius-default: 5px;
+  --dsprimary-border-radius-border-radius-medium: 7px;
+  --dsprimary-border-radius-border-radius-large: 12px;
   /* Essentially a circle */
-  --borderradiusborderradiusfull: 999px;
+  --dsprimary-border-radius-border-radius-full: 999px;
 }
\ No newline at end of file
diff --git a/base/color.css b/base/color.css
index 5d92a91fe0..da1f27c881 100644
--- a/base/color.css
+++ b/base/color.css
@@ -4,297 +4,297 @@
  */
 
 :root {
-  --colorforegroundneutralfaded: #606981;
-  --colorforegroundplaceholder: #7f8694;
-  --colorbackgroundneutralhighlighted: #182d6614;
-  --colorbackgroundpagefaded: #fafafa;
-  --colorbackgroundcritical: #e22c2c;
-  --colorbackgroundpositive: #118850;
-  --colorbackgroundblur: #fffffff2;
-  --colorbackgroundblurneutral: #f4f5f7f2;
-  --colorbackgroundblurneutralhighlighted: #ecedf0f2;
-  --colorborderneutralfaded: #eceef3;
-  --colorbordercriticalfaded: #fbd5d8;
-  --colorborderpositivefaded: #cdedd5;
-  --colorborderupgradefaded: #e3dbfa;
-  --colorborderdisabled: #dfe2ea;
-  --colorborderfocus: #4589ff;
-  --colordecorativecyanforeground: #0e7490;
-  --colordecorativecyanbackground: #d5fbfe;
-  --colordecorativecyanborder: #b6e9ec;
-  --colordecorativefuchsiaforeground: #b725cb;
-  --colordecorativefuchsiabackground: #fcf0ff;
-  --colordecorativefuchsiaborder: #f3d6f9;
-  --colordecorativegreenborder: #c9e6da;
-  --colordecorativegreyforeground: #4e536a;
-  --colordecorativegreybackground: #edeff3;
-  --colordecorativegreyborder: #e1e4eb;
-  --colordecorativelightgreyforeground: #68718d;
-  --colordecorativelightgreybackground: #f6f7f9;
-  --colordecorativelightgreyborder: #e3e4e9;
-  --colordecorativeorangeforeground: #c2410c;
-  --colordecorativeorangebackground: #fff2e1;
-  --colordecorativeorangeborder: #f9dbaf;
-  --colordecorativepinkforeground: #d12372;
-  --colordecorativepinkbackground: #fdf0f7;
-  --colordecorativepinkborder: #fad6ea;
-  --colordecorativepurpleborder: #e4dbfa;
-  --colordecorativeredborder: #fcd7da;
-  --colordecorativetealforeground: #107a71;
-  --colordecorativetealbackground: #e2fff8;
-  --colordecorativetealborder: #cae5df;
-  --colordecorativeyellowforeground: #a16207;
-  --colordecorativeyellowbackground: #fffde7;
-  --colordecorativeyellowborder: #efe991;
-  --colorprimaryprimary200: #edf5ff;
-  --colorprimaryprimary400: #d0e2ff;
-  --colorprimaryprimary500: #8cb4ff;
-  --colorprimaryprimary600: #0f62fe;
-  --colorprimaryprimary700: #004ee1;
-  --colorprimaryprimary800: #104fc6;
-  --colorredred100: #fef1f2;
-  --colorredred600: #cb101d;
-  --colorwhite: #ffffff;
-  --colorneutralneutral100opaque: #141a2b05;
-  --colorneutralneutral200opaque: #182d660a;
-  --colorneutralneutral400: #606981;
-  --colorneutralneutral500: #c7cddb;
-  --colorneutralneutral900: #14171f;
-  --colorgreengreen100: #ebfef6;
-  --colorgreengreen600: #05751f;
-  --colorpurplepurple100: #f5f2fd;
-  --colorpurplepurple600: #874ce6;
-  --colorpurplepurple700: #6a2bbf;
-  --colororangeorange100: #fef8eb;
-  --colororangeorange200: #fbe5c5;
-  --colororangeorange500: #cc4d00;
-  --colororangeorange600: #b53c0a;
-  --colorpalettegreengreen1100: #0e2a21;
-  --colorpalettegreengreen1000: #1c4130;
-  --colorpalettegreengreen900: #2d6944;
-  --colorpalettegreengreen800: #3c884d;
-  --colorpalettegreengreen700: #4ca45a;
-  --colorpalettegreengreen600: #5ab261;
-  --colorpalettegreengreen500: #78c767;
-  --colorpalettegreengreen400: #8fda75;
-  --colorpalettegreengreen300: #a9e297;
-  --colorpalettegreengreen200: #ccf0c2;
-  --colorpalettegreengreen100: #ddf3d9;
-  --colorpalettegreengreen0: #eef9ec;
-  --colorpaletteblueblue1100: #00213f;
-  --colorpaletteblueblue1000: #18395d;
-  --colorpaletteblueblue900: #245685;
+  --dsprimary-color-foreground-neutral-faded: #606981;
+  --dsprimary-color-foreground-placeholder: #7f8694;
+  --dsprimary-color-background-neutral-highlighted: #182d6614;
+  --dsprimary-color-background-page-faded: #fafafa;
+  --dsprimary-color-background-critical: #e22c2c;
+  --dsprimary-color-background-positive: #118850;
+  --dsprimary-color-background-blur: #fffffff2;
+  --dsprimary-color-background-blur-neutral: #f4f5f7f2;
+  --dsprimary-color-background-blur-neutral-highlighted: #ecedf0f2;
+  --dsprimary-color-border-neutral-faded: #eceef3;
+  --dsprimary-color-border-critical-faded: #fbd5d8;
+  --dsprimary-color-border-positive-faded: #cdedd5;
+  --dsprimary-color-border-upgrade-faded: #e3dbfa;
+  --dsprimary-color-border-disabled: #dfe2ea;
+  --dsprimary-color-border-focus: #4589ff;
+  --dsprimary-color-decorative-cyan-foreground: #0e7490;
+  --dsprimary-color-decorative-cyan-background: #d5fbfe;
+  --dsprimary-color-decorative-cyan-border: #b6e9ec;
+  --dsprimary-color-decorative-fuchsia-foreground: #b725cb;
+  --dsprimary-color-decorative-fuchsia-background: #fcf0ff;
+  --dsprimary-color-decorative-fuchsia-border: #f3d6f9;
+  --dsprimary-color-decorative-green-border: #c9e6da;
+  --dsprimary-color-decorative-grey-foreground: #4e536a;
+  --dsprimary-color-decorative-grey-background: #edeff3;
+  --dsprimary-color-decorative-grey-border: #e1e4eb;
+  --dsprimary-color-decorative-light-grey-foreground: #68718d;
+  --dsprimary-color-decorative-light-grey-background: #f6f7f9;
+  --dsprimary-color-decorative-light-grey-border: #e3e4e9;
+  --dsprimary-color-decorative-orange-foreground: #c2410c;
+  --dsprimary-color-decorative-orange-background: #fff2e1;
+  --dsprimary-color-decorative-orange-border: #f9dbaf;
+  --dsprimary-color-decorative-pink-foreground: #d12372;
+  --dsprimary-color-decorative-pink-background: #fdf0f7;
+  --dsprimary-color-decorative-pink-border: #fad6ea;
+  --dsprimary-color-decorative-purple-border: #e4dbfa;
+  --dsprimary-color-decorative-red-border: #fcd7da;
+  --dsprimary-color-decorative-teal-foreground: #107a71;
+  --dsprimary-color-decorative-teal-background: #e2fff8;
+  --dsprimary-color-decorative-teal-border: #cae5df;
+  --dsprimary-color-decorative-yellow-foreground: #a16207;
+  --dsprimary-color-decorative-yellow-background: #fffde7;
+  --dsprimary-color-decorative-yellow-border: #efe991;
+  --dsprimary-color-primary-200: #edf5ff;
+  --dsprimary-color-primary-400: #d0e2ff;
+  --dsprimary-color-primary-500: #8cb4ff;
+  --dsprimary-color-primary-600: #0f62fe;
+  --dsprimary-color-primary-700: #004ee1;
+  --dsprimary-color-primary-800: #104fc6;
+  --dsprimary-color-red-100: #fef1f2;
+  --dsprimary-color-red-600: #cb101d;
+  --dsprimary-color-white: #ffffff;
+  --dsprimary-color-neutral-100-opaque: #141a2b05;
+  --dsprimary-color-neutral-200-opaque: #182d660a;
+  --dsprimary-color-neutral-400: #606981;
+  --dsprimary-color-neutral-500: #c7cddb;
+  --dsprimary-color-neutral-900: #14171f;
+  --dsprimary-color-green-100: #ebfef6;
+  --dsprimary-color-green-600: #05751f;
+  --dsprimary-color-purple-100: #f5f2fd;
+  --dsprimary-color-purple-600: #874ce6;
+  --dsprimary-color-purple-700: #6a2bbf;
+  --dsprimary-color-orange-100: #fef8eb;
+  --dsprimary-color-orange-200: #fbe5c5;
+  --dsprimary-color-orange-500: #cc4d00;
+  --dsprimary-color-orange-600: #b53c0a;
+  --dsprimary-color-palette-green-1100: #0e2a21;
+  --dsprimary-color-palette-green-1000: #1c4130;
+  --dsprimary-color-palette-green-900: #2d6944;
+  --dsprimary-color-palette-green-800: #3c884d;
+  --dsprimary-color-palette-green-700: #4ca45a;
+  --dsprimary-color-palette-green-600: #5ab261;
+  --dsprimary-color-palette-green-500: #78c767;
+  --dsprimary-color-palette-green-400: #8fda75;
+  --dsprimary-color-palette-green-300: #a9e297;
+  --dsprimary-color-palette-green-200: #ccf0c2;
+  --dsprimary-color-palette-green-100: #ddf3d9;
+  --dsprimary-color-palette-green-0: #eef9ec;
+  --dsprimary-color-palette-blue-1100: #00213f;
+  --dsprimary-color-palette-blue-1000: #18395d;
+  --dsprimary-color-palette-blue-900: #245685;
   /* This is our new main color :) */
-  --colorpaletteblueblue800: #306ca5;
-  --colorpaletteblueblue700: #3a79bd;
-  --colorpaletteblueblue600: #4587cd;
-  --colorpaletteblueblue500: #5196dd;
-  --colorpaletteblueblue400: #6aacef;
-  --colorpaletteblueblue300: #aad2f4;
-  --colorpaletteblueblue200: #cde3f7;
-  --colorpaletteblueblue100: #e0f1fe;
-  --colorpaletteblueblue0: #ecf8fe;
+  --dsprimary-color-palette-blue-800: #306ca5;
+  --dsprimary-color-palette-blue-700: #3a79bd;
+  --dsprimary-color-palette-blue-600: #4587cd;
+  --dsprimary-color-palette-blue-500: #5196dd;
+  --dsprimary-color-palette-blue-400: #6aacef;
+  --dsprimary-color-palette-blue-300: #aad2f4;
+  --dsprimary-color-palette-blue-200: #cde3f7;
+  --dsprimary-color-palette-blue-100: #e0f1fe;
+  --dsprimary-color-palette-blue-0: #ecf8fe;
   /* Darkest aqua there is */
-  --colorpaletteaquaaqua1100: #0b2737;
+  --dsprimary-color-palette-aqua-1100: #0b2737;
   /* Slightly less aquatic, still deep as an ocean */
-  --colorpaletteaquaaqua1000: #193c4d;
-  --colorpaletteaquaaqua900: #265d71;
-  --colorpaletteaquaaqua800: #316c82;
-  --colorpaletteaquaaqua700: #3a8396;
-  --colorpaletteaquaaqua600: #4295ab;
-  --colorpaletteaquaaqua500: #54b5cb;
-  --colorpaletteaquaaqua400: #6ad3df;
-  --colorpaletteaquaaqua300: #91e2e1;
-  --colorpaletteaquaaqua200: #b5f0f1;
-  --colorpaletteaquaaqua100: #d0f7f8;
-  --colorpaletteaquaaqua0: #e0fbfb;
-  --colorpalettepurplepurple1100: #1d1e36;
-  --colorpalettepurplepurple1000: #2b2667;
-  --colorpalettepurplepurple900: #453e96;
-  --colorpalettepurplepurple800: #5a52b4;
-  --colorpalettepurplepurple700: #6b62cc;
-  --colorpalettepurplepurple600: #7d73e2;
-  --colorpalettepurplepurple500: #8d84ed;
-  --colorpalettepurplepurple400: #9e95ec;
-  --colorpalettepurplepurple300: #c0c2f3;
-  --colorpalettepurplepurple200: #d8d8f6;
-  --colorpalettepurplepurple100: #eaeaf8;
-  --colorpalettepurplepurple0: #f2f2f8;
-  --colorpaletteneutralneutral1100: #040404;
-  --colorpaletteneutralneutral1000: #182020;
-  --colorpaletteneutralneutral900: #293333;
-  --colorpaletteneutralneutral800: #384141;
-  --colorpaletteneutralneutral700: #545e5f;
-  --colorpaletteneutralneutral600: #70797a;
-  --colorpaletteneutralneutral500: #939a9b;
-  --colorpaletteneutralneutral400: #b1b6b7;
-  --colorpaletteneutralneutral300: #c9cccc;
-  --colorpaletteneutralneutral200: #dfe1e1;
-  --colorpaletteneutralneutral100: #f3f4f4;
-  --colorpaletteneutralneutral0: #ffffff;
-  --colorpalettetealteal1100: #0b2427;
-  --colorpalettetealteal1000: #1b3e3e;
-  --colorpalettetealteal900: #2a6461;
-  --colorpalettetealteal800: #357a7b;
-  --colorpalettetealteal700: #42948e;
-  --colorpalettetealteal600: #4aa69c;
-  --colorpalettetealteal500: #58c1b2;
-  --colorpalettetealteal400: #6addc6;
-  --colorpalettetealteal300: #97e7d5;
-  --colorpalettetealteal200: #c0f0e6;
-  --colorpalettetealteal100: #d5f6ef;
-  --colorpalettetealteal0: #e9f8f5;
-  --colorpalettepinkpink1100: #281821;
-  --colorpalettepinkpink1000: #4f1930;
-  --colorpalettepinkpink900: #872647;
-  --colorpalettepinkpink800: #a43b5b;
-  --colorpalettepinkpink700: #be4466;
-  --colorpalettepinkpink600: #cf517c;
-  --colorpalettepinkpink500: #de638b;
-  --colorpalettepinkpink400: #ee7fad;
-  --colorpalettepinkpink300: #f19bc0;
-  --colorpalettepinkpink200: #f4b8d4;
-  --colorpalettepinkpink100: #f7dcea;
-  --colorpalettepinkpink0: #fbeaf2;
-  --colorpaletteredred1100: #281212;
-  --colorpaletteredred1000: #641c18;
-  --colorpaletteredred900: #8d2d28;
-  --colorpaletteredred800: #b6403b;
-  --colorpaletteredred700: #ca4b45;
-  --colorpaletteredred600: #dc584a;
-  --colorpaletteredred500: #e56a5b;
-  --colorpaletteredred400: #ef8674;
-  --colorpaletteredred300: #f1a193;
-  --colorpaletteredred200: #f4bbb3;
-  --colorpaletteredred100: #f8d7d3;
-  --colorpaletteredred0: #fbebe9;
-  --colorpaletteorangeorange1100: #2a140f;
-  --colorpaletteorangeorange1000: #581d09;
-  --colorpaletteorangeorange900: #8a341a;
-  --colorpaletteorangeorange800: #bf5c29;
-  --colorpaletteorangeorange700: #de763a;
-  --colorpaletteorangeorange600: #e68246;
-  --colorpaletteorangeorange500: #ee8e53;
-  --colorpaletteorangeorange400: #f2a069;
+  --dsprimary-color-palette-aqua-1000: #193c4d;
+  --dsprimary-color-palette-aqua-900: #265d71;
+  --dsprimary-color-palette-aqua-800: #316c82;
+  --dsprimary-color-palette-aqua-700: #3a8396;
+  --dsprimary-color-palette-aqua-600: #4295ab;
+  --dsprimary-color-palette-aqua-500: #54b5cb;
+  --dsprimary-color-palette-aqua-400: #6ad3df;
+  --dsprimary-color-palette-aqua-300: #91e2e1;
+  --dsprimary-color-palette-aqua-200: #b5f0f1;
+  --dsprimary-color-palette-aqua-100: #d0f7f8;
+  --dsprimary-color-palette-aqua-0: #e0fbfb;
+  --dsprimary-color-palette-purple-1100: #1d1e36;
+  --dsprimary-color-palette-purple-1000: #2b2667;
+  --dsprimary-color-palette-purple-900: #453e96;
+  --dsprimary-color-palette-purple-800: #5a52b4;
+  --dsprimary-color-palette-purple-700: #6b62cc;
+  --dsprimary-color-palette-purple-600: #7d73e2;
+  --dsprimary-color-palette-purple-500: #8d84ed;
+  --dsprimary-color-palette-purple-400: #9e95ec;
+  --dsprimary-color-palette-purple-300: #c0c2f3;
+  --dsprimary-color-palette-purple-200: #d8d8f6;
+  --dsprimary-color-palette-purple-100: #eaeaf8;
+  --dsprimary-color-palette-purple-0: #f2f2f8;
+  --dsprimary-color-palette-neutral-1100: #040404;
+  --dsprimary-color-palette-neutral-1000: #182020;
+  --dsprimary-color-palette-neutral-900: #293333;
+  --dsprimary-color-palette-neutral-800: #384141;
+  --dsprimary-color-palette-neutral-700: #545e5f;
+  --dsprimary-color-palette-neutral-600: #70797a;
+  --dsprimary-color-palette-neutral-500: #939a9b;
+  --dsprimary-color-palette-neutral-400: #b1b6b7;
+  --dsprimary-color-palette-neutral-300: #c9cccc;
+  --dsprimary-color-palette-neutral-200: #dfe1e1;
+  --dsprimary-color-palette-neutral-100: #f3f4f4;
+  --dsprimary-color-palette-neutral-0: #ffffff;
+  --dsprimary-color-palette-teal-1100: #0b2427;
+  --dsprimary-color-palette-teal-1000: #1b3e3e;
+  --dsprimary-color-palette-teal-900: #2a6461;
+  --dsprimary-color-palette-teal-800: #357a7b;
+  --dsprimary-color-palette-teal-700: #42948e;
+  --dsprimary-color-palette-teal-600: #4aa69c;
+  --dsprimary-color-palette-teal-500: #58c1b2;
+  --dsprimary-color-palette-teal-400: #6addc6;
+  --dsprimary-color-palette-teal-300: #97e7d5;
+  --dsprimary-color-palette-teal-200: #c0f0e6;
+  --dsprimary-color-palette-teal-100: #d5f6ef;
+  --dsprimary-color-palette-teal-0: #e9f8f5;
+  --dsprimary-color-palette-pink-1100: #281821;
+  --dsprimary-color-palette-pink-1000: #4f1930;
+  --dsprimary-color-palette-pink-900: #872647;
+  --dsprimary-color-palette-pink-800: #a43b5b;
+  --dsprimary-color-palette-pink-700: #be4466;
+  --dsprimary-color-palette-pink-600: #cf517c;
+  --dsprimary-color-palette-pink-500: #de638b;
+  --dsprimary-color-palette-pink-400: #ee7fad;
+  --dsprimary-color-palette-pink-300: #f19bc0;
+  --dsprimary-color-palette-pink-200: #f4b8d4;
+  --dsprimary-color-palette-pink-100: #f7dcea;
+  --dsprimary-color-palette-pink-0: #fbeaf2;
+  --dsprimary-color-palette-red-1100: #281212;
+  --dsprimary-color-palette-red-1000: #641c18;
+  --dsprimary-color-palette-red-900: #8d2d28;
+  --dsprimary-color-palette-red-800: #b6403b;
+  --dsprimary-color-palette-red-700: #ca4b45;
+  --dsprimary-color-palette-red-600: #dc584a;
+  --dsprimary-color-palette-red-500: #e56a5b;
+  --dsprimary-color-palette-red-400: #ef8674;
+  --dsprimary-color-palette-red-300: #f1a193;
+  --dsprimary-color-palette-red-200: #f4bbb3;
+  --dsprimary-color-palette-red-100: #f8d7d3;
+  --dsprimary-color-palette-red-0: #fbebe9;
+  --dsprimary-color-palette-orange-1100: #2a140f;
+  --dsprimary-color-palette-orange-1000: #581d09;
+  --dsprimary-color-palette-orange-900: #8a341a;
+  --dsprimary-color-palette-orange-800: #bf5c29;
+  --dsprimary-color-palette-orange-700: #de763a;
+  --dsprimary-color-palette-orange-600: #e68246;
+  --dsprimary-color-palette-orange-500: #ee8e53;
+  --dsprimary-color-palette-orange-400: #f2a069;
   /* This is our main color. And this description will show inside the documentation */
-  --colorpaletteorangeorange300: #f4b388;
-  --colorpaletteorangeorange200: #f6c7a9;
-  --colorpaletteorangeorange100: #f7ddce;
-  --colorpaletteorangeorange0: #fceee4;
-  --colorpaletteyellowyellow1100: #2a1b08;
-  --colorpaletteyellowyellow1000: #4e2c0b;
-  --colorpaletteyellowyellow900: #8b4f1f;
-  --colorpaletteyellowyellow800: #b0772a;
-  --colorpaletteyellowyellow700: #d49b35;
-  --colorpaletteyellowyellow600: #f6be41;
-  --colorpaletteyellowyellow500: #f8ce4c;
-  --colorpaletteyellowyellow400: #fad961;
-  --colorpaletteyellowyellow300: #fbe17f;
-  --colorpaletteyellowyellow200: #fbe9a4;
-  --colorpaletteyellowyellow100: #fbeed1;
-  --colorpaletteyellowyellow0: #fef8e4;
-  --colorpalettemagentamagenta1100: #271a2c;
-  --colorpalettemagentamagenta1000: #3f1a4e;
-  --colorpalettemagentamagenta900: #642a73;
-  --colorpalettemagentamagenta800: #854091;
-  --colorpalettemagentamagenta700: #a04da3;
-  --colorpalettemagentamagenta600: #b659b4;
-  --colorpalettemagentamagenta500: #cc6bd5;
-  --colorpalettemagentamagenta400: #e38aef;
-  --colorpalettemagentamagenta300: #e3b1ee;
-  --colorpalettemagentamagenta200: #ecc7f4;
-  --colorpalettemagentamagenta100: #f5e4fa;
-  --colorpalettemagentamagenta0: #fcf0fe;
-  --colorsemanticprimaryprimaryactivebackground: #453e96;
-  --colorsemanticprimaryprimaryhoverbackground: #5a52b4;
-  --colorsemanticprimaryprimaryhovercolor: #ffffff;
-  --colorsemanticprimaryprimarybackground: #6b62cc;
-  --colorsemanticprimaryprimarycolor: #ffffff;
-  --colorsemantictexttextinverse: #ffffff;
-  --colorsemantictexttextsubtext: #545e5f;
-  --colorsemantictexttextheadline: #293333;
-  --colorsemantictexttextbody: #384141;
-  --colorsemanticerrorerrorcolor: #b6403b;
-  --colorsemanticerrorerroricon: #b6403b;
-  --colorsemanticerrorerrorborder: #ef8674;
-  --colorsemanticerrorerrorbackground: #f8d7d3;
-  --colorsemanticwarningwarningcolor: #8b4f1f;
-  --colorsemanticwarningwarningicon: #ba7506;
-  --colorsemanticwarningwarningborder: #fad961;
-  --colorsemanticwarningwarningbackground: #fbeed1;
-  --colorsemanticsuccesssuccesscolor: #2d6944;
-  --colorsemanticsuccesssuccessicon: #3c884d;
-  --colorsemanticsuccesssuccessborder: #8fda75;
-  --colorsemanticsuccesssuccessbackground: #ddf3d9;
-  --colorsemanticinfoinfocolor: #3a79bd;
-  --colorsemanticinfoinfoicon: #306ca5;
-  --colorsemanticinfoinfoborder: #6aacef;
-  --colorsemanticinfoinfobackground: #e0f1fe;
-  --colorsemanticopportunityopportunitycolor: #357a7b;
-  --colorsemanticopportunityopportunityicon: #357a7b;
-  --colorsemanticopportunityopportunityborder: #6addc6;
-  --colorsemanticopportunityopportunitybackground: #d5f6ef;
-  --colorsemanticprimaryprimaryinnactivebackground: #d8d8f6;
-  --colorsemanticprimaryprimaryborder: #6b62cc;
-  --colorsemanticprimaryhoverinnactivebackground: #c0c2f3;
-  --colorsemanticsalesale70background: #ac7d13;
-  --colorsemanticsalesale50background: #b51d4e;
-  --colorsemanticsalesale30background: #5869c1;
-  --colorsemanticsalesalecolor: #b7b7b7;
-  --colordarkblue: #ff0000;
-  --colorforegroundneutral: var(--colorneutralneutral900);
-  --colorforegroundprimary: var(--colorprimaryprimary800);
-  --colorforegroundcritical: var(--colorredred600);
-  --colorforegroundwarning: var(--colororangeorange600);
-  --colorforegroundpositive: var(--colorgreengreen600);
-  --colorforegroundupgrade: var(--colorpurplepurple600);
-  --colorforegrounddisabled: var(--colorneutralneutral500);
-  --colorbackgroundelevationbase: var(--colorwhite);
-  --colorbackgroundelevationraised: var(--colorwhite);
-  --colorbackgroundelevationoverlay: var(--colorwhite);
-  --colorbackgroundneutral: var(--colorneutralneutral200opaque);
-  --colorbackgroundneutralfaded: var(--colorneutralneutral100opaque);
-  --colorbackgroundpage: var(--colorwhite);
-  --colorbackgroundprimary: var(--colorprimaryprimary800);
-  --colorbackgroundprimaryhighlighted: var(--colorprimaryprimary700);
-  --colorbackgroundprimaryfaded: var(--colorprimaryprimary200);
-  --colorbackgroundcriticalhighlighted: var(--colorredred600);
-  --colorbackgroundcriticalfaded: var(--colorredred100);
-  --colorbackgroundwarning: var(--colororangeorange500);
-  --colorbackgroundwarninghighlighted: var(--colororangeorange600);
-  --colorbackgroundwarningfaded: var(--colororangeorange100);
-  --colorbackgroundpositivehighlighted: var(--colorgreengreen600);
-  --colorbackgroundpositivefaded: var(--colorgreengreen100);
-  --colorbackgroundupgrade: var(--colorpurplepurple600);
-  --colorbackgroundupgradehighlighted: var(--colorpurplepurple700);
-  --colorbackgroundupgradefaded: var(--colorpurplepurple100);
-  --colorbackgrounddisabled: var(--colorneutralneutral200opaque);
-  --colorbackgrounddisabledfaded: var(--colorneutralneutral100opaque);
-  --colorbackgroundfocushighlight: var(--colorprimaryprimary400);
-  --colorborderneutral: var(--colorneutralneutral500);
-  --colorborderprimary: var(--colorprimaryprimary700);
-  --colorborderprimaryfaded: var(--colorprimaryprimary400);
-  --colorbordercritical: var(--colorredred600);
-  --colorborderwarning: var(--colororangeorange600);
-  --colorborderwarningfaded: var(--colororangeorange200);
-  --colorborderpositive: var(--colorgreengreen600);
-  --colorborderupgrade: var(--colorpurplepurple700);
-  --colorborderfocusfaded: var(--colorprimaryprimary400);
-  --coloronbackgroundneutral: var(--colorneutralneutral900);
-  --colorpersistentblack: var(--colorneutralneutral900);
-  --colordecorativeblueforeground: var(--colorprimaryprimary600);
-  --colordecorativebluebackground: var(--colorprimaryprimary200);
-  --colordecorativeblueborder: var(--colorprimaryprimary400);
-  --colordecorativegreenforeground: var(--colorgreengreen600);
-  --colordecorativegreenbackground: var(--colorgreengreen100);
-  --coloronbackgroundprimary: var(--colorwhite);
-  --coloronbackgroundcritical: var(--colorwhite);
-  --coloronbackgroundwarning: var(--colorwhite);
-  --coloronbackgroundpositive: var(--colorwhite);
-  --coloronbackgroundupgrade: var(--colorwhite);
-  --colorpersistentwhite: var(--colorwhite);
-  --colordecorativepurpleforeground: var(--colorpurplepurple600);
-  --colordecorativepurplebackground: var(--colorpurplepurple100);
-  --colordecorativeredforeground: var(--colorredred600);
-  --colordecorativeredbackground: var(--colorredred100);
+  --dsprimary-color-palette-orange-300: #f4b388;
+  --dsprimary-color-palette-orange-200: #f6c7a9;
+  --dsprimary-color-palette-orange-100: #f7ddce;
+  --dsprimary-color-palette-orange-0: #fceee4;
+  --dsprimary-color-palette-yellow-1100: #2a1b08;
+  --dsprimary-color-palette-yellow-1000: #4e2c0b;
+  --dsprimary-color-palette-yellow-900: #8b4f1f;
+  --dsprimary-color-palette-yellow-800: #b0772a;
+  --dsprimary-color-palette-yellow-700: #d49b35;
+  --dsprimary-color-palette-yellow-600: #f6be41;
+  --dsprimary-color-palette-yellow-500: #f8ce4c;
+  --dsprimary-color-palette-yellow-400: #fad961;
+  --dsprimary-color-palette-yellow-300: #fbe17f;
+  --dsprimary-color-palette-yellow-200: #fbe9a4;
+  --dsprimary-color-palette-yellow-100: #fbeed1;
+  --dsprimary-color-palette-yellow-0: #fef8e4;
+  --dsprimary-color-palette-magenta-1100: #271a2c;
+  --dsprimary-color-palette-magenta-1000: #3f1a4e;
+  --dsprimary-color-palette-magenta-900: #642a73;
+  --dsprimary-color-palette-magenta-800: #854091;
+  --dsprimary-color-palette-magenta-700: #a04da3;
+  --dsprimary-color-palette-magenta-600: #b659b4;
+  --dsprimary-color-palette-magenta-500: #cc6bd5;
+  --dsprimary-color-palette-magenta-400: #e38aef;
+  --dsprimary-color-palette-magenta-300: #e3b1ee;
+  --dsprimary-color-palette-magenta-200: #ecc7f4;
+  --dsprimary-color-palette-magenta-100: #f5e4fa;
+  --dsprimary-color-palette-magenta-0: #fcf0fe;
+  --dsprimary-color-semantic-primary-active-background: #453e96;
+  --dsprimary-color-semantic-primary-hover-background: #5a52b4;
+  --dsprimary-color-semantic-primary-hover-color: #ffffff;
+  --dsprimary-color-semantic-primary-background: #6b62cc;
+  --dsprimary-color-semantic-primary-color: #ffffff;
+  --dsprimary-color-semantic-text-inverse: #ffffff;
+  --dsprimary-color-semantic-text-subtext: #545e5f;
+  --dsprimary-color-semantic-text-headline: #293333;
+  --dsprimary-color-semantic-text-body: #384141;
+  --dsprimary-color-semantic-error-color: #b6403b;
+  --dsprimary-color-semantic-error-icon: #b6403b;
+  --dsprimary-color-semantic-error-border: #ef8674;
+  --dsprimary-color-semantic-error-background: #f8d7d3;
+  --dsprimary-color-semantic-warning-color: #8b4f1f;
+  --dsprimary-color-semantic-warning-icon: #ba7506;
+  --dsprimary-color-semantic-warning-border: #fad961;
+  --dsprimary-color-semantic-warning-background: #fbeed1;
+  --dsprimary-color-semantic-success-color: #2d6944;
+  --dsprimary-color-semantic-success-icon: #3c884d;
+  --dsprimary-color-semantic-success-border: #8fda75;
+  --dsprimary-color-semantic-success-background: #ddf3d9;
+  --dsprimary-color-semantic-info-color: #3a79bd;
+  --dsprimary-color-semantic-info-icon: #306ca5;
+  --dsprimary-color-semantic-info-border: #6aacef;
+  --dsprimary-color-semantic-info-background: #e0f1fe;
+  --dsprimary-color-semantic-opportunity-color: #357a7b;
+  --dsprimary-color-semantic-opportunity-icon: #357a7b;
+  --dsprimary-color-semantic-opportunity-border: #6addc6;
+  --dsprimary-color-semantic-opportunity-background: #d5f6ef;
+  --dsprimary-color-semantic-primary-innactive-background: #d8d8f6;
+  --dsprimary-color-semantic-primary-border: #6b62cc;
+  --dsprimary-color-semantic-primary-hover-innactive-background: #c0c2f3;
+  --dsprimary-color-semantic-sale-sale70-background: #ac7d13;
+  --dsprimary-color-semantic-sale-sale50-background: #b51d4e;
+  --dsprimary-color-semantic-sale-sale30-background: #5869c1;
+  --dsprimary-color-semantic-sale-color: #b7b7b7;
+  --dsprimary-color-dark-blue: #ff0000;
+  --dsprimary-color-foreground-neutral: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-foreground-primary: var(--dsprimary-color-primary-800);
+  --dsprimary-color-foreground-critical: var(--dsprimary-color-red-600);
+  --dsprimary-color-foreground-warning: var(--dsprimary-color-orange-600);
+  --dsprimary-color-foreground-positive: var(--dsprimary-color-green-600);
+  --dsprimary-color-foreground-upgrade: var(--dsprimary-color-purple-600);
+  --dsprimary-color-foreground-disabled: var(--dsprimary-color-neutral-500);
+  --dsprimary-color-background-elevation-base: var(--dsprimary-color-white);
+  --dsprimary-color-background-elevation-raised: var(--dsprimary-color-white);
+  --dsprimary-color-background-elevation-overlay: var(--dsprimary-color-white);
+  --dsprimary-color-background-neutral: var(--dsprimary-color-neutral-200-opaque);
+  --dsprimary-color-background-neutral-faded: var(--dsprimary-color-neutral-100-opaque);
+  --dsprimary-color-background-page: var(--dsprimary-color-white);
+  --dsprimary-color-background-primary: var(--dsprimary-color-primary-800);
+  --dsprimary-color-background-primary-highlighted: var(--dsprimary-color-primary-700);
+  --dsprimary-color-background-primary-faded: var(--dsprimary-color-primary-200);
+  --dsprimary-color-background-critical-highlighted: var(--dsprimary-color-red-600);
+  --dsprimary-color-background-critical-faded: var(--dsprimary-color-red-100);
+  --dsprimary-color-background-warning: var(--dsprimary-color-orange-500);
+  --dsprimary-color-background-warning-highlighted: var(--dsprimary-color-orange-600);
+  --dsprimary-color-background-warning-faded: var(--dsprimary-color-orange-100);
+  --dsprimary-color-background-positive-highlighted: var(--dsprimary-color-green-600);
+  --dsprimary-color-background-positive-faded: var(--dsprimary-color-green-100);
+  --dsprimary-color-background-upgrade: var(--dsprimary-color-purple-600);
+  --dsprimary-color-background-upgrade-highlighted: var(--dsprimary-color-purple-700);
+  --dsprimary-color-background-upgrade-faded: var(--dsprimary-color-purple-100);
+  --dsprimary-color-background-disabled: var(--dsprimary-color-neutral-200-opaque);
+  --dsprimary-color-background-disabled-faded: var(--dsprimary-color-neutral-100-opaque);
+  --dsprimary-color-background-focus-highlight: var(--dsprimary-color-primary-400);
+  --dsprimary-color-border-neutral: var(--dsprimary-color-neutral-500);
+  --dsprimary-color-border-primary: var(--dsprimary-color-primary-700);
+  --dsprimary-color-border-primary-faded: var(--dsprimary-color-primary-400);
+  --dsprimary-color-border-critical: var(--dsprimary-color-red-600);
+  --dsprimary-color-border-warning: var(--dsprimary-color-orange-600);
+  --dsprimary-color-border-warning-faded: var(--dsprimary-color-orange-200);
+  --dsprimary-color-border-positive: var(--dsprimary-color-green-600);
+  --dsprimary-color-border-upgrade: var(--dsprimary-color-purple-700);
+  --dsprimary-color-border-focus-faded: var(--dsprimary-color-primary-400);
+  --dsprimary-color-on-background-neutral: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-persistent-black: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-decorative-blue-foreground: var(--dsprimary-color-primary-600);
+  --dsprimary-color-decorative-blue-background: var(--dsprimary-color-primary-200);
+  --dsprimary-color-decorative-blue-border: var(--dsprimary-color-primary-400);
+  --dsprimary-color-decorative-green-foreground: var(--dsprimary-color-green-600);
+  --dsprimary-color-decorative-green-background: var(--dsprimary-color-green-100);
+  --dsprimary-color-on-background-primary: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-critical: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-warning: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-positive: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-upgrade: var(--dsprimary-color-white);
+  --dsprimary-color-persistent-white: var(--dsprimary-color-white);
+  --dsprimary-color-decorative-purple-foreground: var(--dsprimary-color-purple-600);
+  --dsprimary-color-decorative-purple-background: var(--dsprimary-color-purple-100);
+  --dsprimary-color-decorative-red-foreground: var(--dsprimary-color-red-600);
+  --dsprimary-color-decorative-red-background: var(--dsprimary-color-red-100);
 }
\ No newline at end of file
diff --git a/base/dimension.css b/base/dimension.css
index e4e3cb9edd..6d0929fcd6 100644
--- a/base/dimension.css
+++ b/base/dimension.css
@@ -4,7 +4,7 @@
  */
 
 :root {
-  --dimensionspacingsemanticstackgap: 1px;
-  --dimensionshadowfocusringwidth: 3px;
-  --dimensionfontweightbold: 640px;
+  --dsprimary-dimension-spacing-semantic-stack-gap: 1px;
+  --dsprimary-dimension-shadow-focus-ring-width: 3px;
+  --dsprimary-dimension-font-weight-bold: 640px;
 }
\ No newline at end of file
diff --git a/base/font-family.css b/base/font-family.css
index 6a41c5e9f4..e01f8a6254 100644
--- a/base/font-family.css
+++ b/base/font-family.css
@@ -4,5 +4,5 @@
  */
 
 :root {
-  --fontfamilyfontfamilydefault: "Inter";
+  --dsprimary-font-family-font-family-default: "Inter";
 }
\ No newline at end of file
diff --git a/base/font-size.css b/base/font-size.css
index 6d2254661d..1280bcd95d 100644
--- a/base/font-size.css
+++ b/base/font-size.css
@@ -4,5 +4,5 @@
  */
 
 :root {
-  --fontsizetitle1fontsize: 32px;
+  --dsprimary-font-size-title-1-font-size: 32px;
 }
\ No newline at end of file
diff --git a/base/font-weight.css b/base/font-weight.css
new file mode 100644
index 0000000000..dc6edc8571
--- /dev/null
+++ b/base/font-weight.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --fontweightnamingishard: 400;
+}
\ No newline at end of file
diff --git a/base/gradient.css b/base/gradient.css
new file mode 100644
index 0000000000..fc184be2ec
--- /dev/null
+++ b/base/gradient.css
@@ -0,0 +1,9 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --gradientstory: linear-gradient(-135deg, #7638fa 0%, #d300c5 17%, #ff0069 36%, #ff7a00 62.5%, #ffd600 83.5%);
+  --gradientscrim: linear-gradient(-179.9427042395855deg, #000000 0%, #00000066 47.14%, #00000000 100%);
+}
\ No newline at end of file
diff --git a/base/line-height.css b/base/line-height.css
index 6e5f77c8ed..63ae9bd951 100644
--- a/base/line-height.css
+++ b/base/line-height.css
@@ -4,5 +4,5 @@
  */
 
 :root {
-  --lineheighttitle1lineheight: 40px;
+  --dsprimary-line-height-title-1-line-height: 40px;
 }
\ No newline at end of file
diff --git a/base/opacity.css b/base/opacity.css
index 552485680a..c2e16517dc 100644
--- a/base/opacity.css
+++ b/base/opacity.css
@@ -4,5 +4,5 @@
  */
 
 :root {
-  --opacityopacitydisabled: 0.5;
+  --dsprimary-opacity-disabled: 0.5;
 }
\ No newline at end of file
diff --git a/base/shadow.css b/base/shadow.css
new file mode 100644
index 0000000000..da348cdef7
--- /dev/null
+++ b/base/shadow.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --shadowblue: 0px 4px 4px 0px var(--colorforegroundprimary);
+}
\ No newline at end of file
diff --git a/base/size.css b/base/size.css
new file mode 100644
index 0000000000..75136b449e
--- /dev/null
+++ b/base/size.css
@@ -0,0 +1,10 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --sizedimensionsdefault: 36px;
+  --sizedimensionssmall: 28px;
+  --sizedimensionslarge: 44px;
+}
\ No newline at end of file
diff --git a/base/space.css b/base/space.css
index eab7eb215f..d8b4b7c184 100644
--- a/base/space.css
+++ b/base/space.css
@@ -4,16 +4,16 @@
  */
 
 :root {
-  --spacespacing0: 0px;
-  --spacespacing2: 2px;
-  --spacespacing4: 4px;
-  --spacespacing8: 8px;
-  --spacespacing12: 12px;
-  --spacespacing16: 16px;
-  --spacespacing20: 20px;
-  --spacespacing24: 24px;
-  --spacespacing28: 28px;
-  --spacespacing32: 32px;
-  --spacespacing36: 36px;
-  --spacespacing40: 40px;
+  --dsprimary-space-spacing-0: 0px;
+  --dsprimary-space-spacing-2: 2px;
+  --dsprimary-space-spacing-4: 4px;
+  --dsprimary-space-spacing-8: 8px;
+  --dsprimary-space-spacing-12: 12px;
+  --dsprimary-space-spacing-16: 16px;
+  --dsprimary-space-spacing-20: 20px;
+  --dsprimary-space-spacing-24: 24px;
+  --dsprimary-space-spacing-28: 28px;
+  --dsprimary-space-spacing-32: 32px;
+  --dsprimary-space-spacing-36: 36px;
+  --dsprimary-space-spacing-40: 40px;
 }
\ No newline at end of file
diff --git a/base/string.css b/base/string.css
index 84a0339045..39c8fead59 100644
--- a/base/string.css
+++ b/base/string.css
@@ -4,5 +4,5 @@
  */
 
 :root {
-  --stringfontfamily: "Inter";
+  --dsprimary-string-font-family: "Inter";
 }
\ No newline at end of file
diff --git a/base/typography.css b/base/typography.css
index 21506129af..223c67d708 100644
--- a/base/typography.css
+++ b/base/typography.css
@@ -4,20 +4,20 @@
  */
 
 :root {
-  --typographyh1: 700 57px/64px "Advent Pro";
-  --typographyh2: 700 43px/50px "Advent Pro";
-  --typographyh3: 700 32px/40px "Advent Pro";
-  --typographyh4: 700 24px/32px "Advent Pro";
-  --typographyh5: 700 21px/29px "Advent Pro";
-  --typographylargelead: 400 24px/32px "Advent Pro";
-  --typographymediumlead: 400 21px/29px "Advent Pro";
-  --typographybuttonlabel: 400 21px/29px "Advent Pro";
-  --typographyparagraph: 400 18px/26px "Advent Pro";
-  --typographysmallparagraph: 400 16px/24px "Advent Pro";
-  --typographytinyparagraph: 400 12px/24px "Advent Pro";
-  --typographysale: 700 24px/32px "Advent Pro";
+  --dsprimary-typography-h1: 700 57px/64px "Advent Pro";
+  --dsprimary-typography-h2: 700 43px/50px "Advent Pro";
+  --dsprimary-typography-h3: 700 32px/40px "Advent Pro";
+  --dsprimary-typography-h4: 700 24px/32px "Advent Pro";
+  --dsprimary-typography-h5: 700 21px/29px "Advent Pro";
+  --dsprimary-typography-large-lead: 400 24px/32px "Advent Pro";
+  --dsprimary-typography-medium-lead: 400 21px/29px "Advent Pro";
+  --dsprimary-typography-button-label: 400 21px/29px "Advent Pro";
+  --dsprimary-typography-paragraph: 400 18px/26px "Advent Pro";
+  --dsprimary-typography-small-paragraph: 400 16px/24px "Advent Pro";
+  --dsprimary-typography-tiny-paragraph: 400 12px/24px "Advent Pro";
+  --dsprimary-typography-sale: 700 24px/32px "Advent Pro";
   /* typewriter font test */
-  --typographyimpactlabel: 400 13px "Impact Label";
+  --dsprimary-typography-impact-label: 400 13px "Impact Label";
   /* importing test */
-  --typographypoppins: 400 13px "Poppins";
+  --dsprimary-typography-poppins: 400 13px "Poppins";
 }
\ No newline at end of file
diff --git a/base/z-index.css b/base/z-index.css
new file mode 100644
index 0000000000..1f62576c3f
--- /dev/null
+++ b/base/z-index.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --zindexzindexbase: 100;
+}
\ No newline at end of file
diff --git a/dark-d38a/border-radius.css b/dark-d38a/border-radius.css
index 85c24f3884..5ceb733bf0 100644
--- a/dark-d38a/border-radius.css
+++ b/dark-d38a/border-radius.css
@@ -5,11 +5,11 @@
 
 .theme-dark-d38a {
   /* No radius */
-  --borderradiusborderradiusnone: 0px;
-  --borderradiusborderradiussmall: 3px;
-  --borderradiusborderradiusdefault: 5px;
-  --borderradiusborderradiusmedium: 7px;
-  --borderradiusborderradiuslarge: 12px;
+  --dsprimary-border-radius-border-radius-none: 0px;
+  --dsprimary-border-radius-border-radius-small: 3px;
+  --dsprimary-border-radius-border-radius-default: 5px;
+  --dsprimary-border-radius-border-radius-medium: 7px;
+  --dsprimary-border-radius-border-radius-large: 12px;
   /* Essentially a circle */
-  --borderradiusborderradiusfull: 999px;
+  --dsprimary-border-radius-border-radius-full: 999px;
 }
\ No newline at end of file
diff --git a/dark-d38a/color.css b/dark-d38a/color.css
index 7d8b4f7736..37e4550e12 100644
--- a/dark-d38a/color.css
+++ b/dark-d38a/color.css
@@ -4,297 +4,297 @@
  */
 
 .theme-dark-d38a {
-  --colorforegroundneutralfaded: #9da8bb;
-  --colorforegroundplaceholder: #7f8694;
-  --colorbackgroundneutralhighlighted: #d0e2ff14;
-  --colorbackgroundpagefaded: #09122a;
-  --colorbackgroundcritical: #e22c2c;
-  --colorbackgroundpositive: #118850;
-  --colorbackgroundblur: #fffffff2;
-  --colorbackgroundblurneutral: #f4f5f7f2;
-  --colorbackgroundblurneutralhighlighted: #ecedf0f2;
-  --colorborderneutralfaded: #22273a;
-  --colorbordercriticalfaded: #fbd5d8;
-  --colorborderpositivefaded: #cdedd5;
-  --colorborderupgradefaded: #e3dbfa;
-  --colorborderdisabled: #dfe2ea;
-  --colorborderfocus: #4589ff;
-  --colordecorativecyanforeground: #0e7490;
-  --colordecorativecyanbackground: #d5fbfe;
-  --colordecorativecyanborder: #b6e9ec;
-  --colordecorativefuchsiaforeground: #b725cb;
-  --colordecorativefuchsiabackground: #fcf0ff;
-  --colordecorativefuchsiaborder: #f3d6f9;
-  --colordecorativegreenborder: #c9e6da;
-  --colordecorativegreyforeground: #4e536a;
-  --colordecorativegreybackground: #edeff3;
-  --colordecorativegreyborder: #e1e4eb;
-  --colordecorativelightgreyforeground: #68718d;
-  --colordecorativelightgreybackground: #f6f7f9;
-  --colordecorativelightgreyborder: #e3e4e9;
-  --colordecorativeorangeforeground: #c2410c;
-  --colordecorativeorangebackground: #fff2e1;
-  --colordecorativeorangeborder: #f9dbaf;
-  --colordecorativepinkforeground: #d12372;
-  --colordecorativepinkbackground: #fdf0f7;
-  --colordecorativepinkborder: #fad6ea;
-  --colordecorativepurpleborder: #e4dbfa;
-  --colordecorativeredborder: #fcd7da;
-  --colordecorativetealforeground: #107a71;
-  --colordecorativetealbackground: #e2fff8;
-  --colordecorativetealborder: #cae5df;
-  --colordecorativeyellowforeground: #a16207;
-  --colordecorativeyellowbackground: #fffde7;
-  --colordecorativeyellowborder: #efe991;
-  --colorprimaryprimary200: #edf5ff;
-  --colorprimaryprimary400: #d0e2ff;
-  --colorprimaryprimary500: #8cb4ff;
-  --colorprimaryprimary600: #0f62fe;
-  --colorprimaryprimary700: #004ee1;
-  --colorprimaryprimary800: #104fc6;
-  --colorredred100: #fef1f2;
-  --colorredred600: #cb101d;
-  --colorwhite: #ffffff;
-  --colorneutralneutral100opaque: #141a2b05;
-  --colorneutralneutral200opaque: #182d660a;
-  --colorneutralneutral400: #606981;
-  --colorneutralneutral500: #c7cddb;
-  --colorneutralneutral900: #14171f;
-  --colorgreengreen100: #ebfef6;
-  --colorgreengreen600: #05751f;
-  --colorpurplepurple100: #f5f2fd;
-  --colorpurplepurple600: #874ce6;
-  --colorpurplepurple700: #6a2bbf;
-  --colororangeorange100: #fef8eb;
-  --colororangeorange200: #fbe5c5;
-  --colororangeorange500: #cc4d00;
-  --colororangeorange600: #b53c0a;
-  --colorpalettegreengreen1100: #0e2a21;
-  --colorpalettegreengreen1000: #1c4130;
-  --colorpalettegreengreen900: #2d6944;
-  --colorpalettegreengreen800: #3c884d;
-  --colorpalettegreengreen700: #4ca45a;
-  --colorpalettegreengreen600: #5ab261;
-  --colorpalettegreengreen500: #78c767;
-  --colorpalettegreengreen400: #8fda75;
-  --colorpalettegreengreen300: #a9e297;
-  --colorpalettegreengreen200: #ccf0c2;
-  --colorpalettegreengreen100: #ddf3d9;
-  --colorpalettegreengreen0: #eef9ec;
-  --colorpaletteblueblue1100: #00213f;
-  --colorpaletteblueblue1000: #18395d;
-  --colorpaletteblueblue900: #245685;
+  --dsprimary-color-foreground-neutral-faded: #9da8bb;
+  --dsprimary-color-foreground-placeholder: #7f8694;
+  --dsprimary-color-background-neutral-highlighted: #d0e2ff14;
+  --dsprimary-color-background-page-faded: #09122a;
+  --dsprimary-color-background-critical: #e22c2c;
+  --dsprimary-color-background-positive: #118850;
+  --dsprimary-color-background-blur: #fffffff2;
+  --dsprimary-color-background-blur-neutral: #f4f5f7f2;
+  --dsprimary-color-background-blur-neutral-highlighted: #ecedf0f2;
+  --dsprimary-color-border-neutral-faded: #22273a;
+  --dsprimary-color-border-critical-faded: #fbd5d8;
+  --dsprimary-color-border-positive-faded: #cdedd5;
+  --dsprimary-color-border-upgrade-faded: #e3dbfa;
+  --dsprimary-color-border-disabled: #dfe2ea;
+  --dsprimary-color-border-focus: #4589ff;
+  --dsprimary-color-decorative-cyan-foreground: #0e7490;
+  --dsprimary-color-decorative-cyan-background: #d5fbfe;
+  --dsprimary-color-decorative-cyan-border: #b6e9ec;
+  --dsprimary-color-decorative-fuchsia-foreground: #b725cb;
+  --dsprimary-color-decorative-fuchsia-background: #fcf0ff;
+  --dsprimary-color-decorative-fuchsia-border: #f3d6f9;
+  --dsprimary-color-decorative-green-border: #c9e6da;
+  --dsprimary-color-decorative-grey-foreground: #4e536a;
+  --dsprimary-color-decorative-grey-background: #edeff3;
+  --dsprimary-color-decorative-grey-border: #e1e4eb;
+  --dsprimary-color-decorative-light-grey-foreground: #68718d;
+  --dsprimary-color-decorative-light-grey-background: #f6f7f9;
+  --dsprimary-color-decorative-light-grey-border: #e3e4e9;
+  --dsprimary-color-decorative-orange-foreground: #c2410c;
+  --dsprimary-color-decorative-orange-background: #fff2e1;
+  --dsprimary-color-decorative-orange-border: #f9dbaf;
+  --dsprimary-color-decorative-pink-foreground: #d12372;
+  --dsprimary-color-decorative-pink-background: #fdf0f7;
+  --dsprimary-color-decorative-pink-border: #fad6ea;
+  --dsprimary-color-decorative-purple-border: #e4dbfa;
+  --dsprimary-color-decorative-red-border: #fcd7da;
+  --dsprimary-color-decorative-teal-foreground: #107a71;
+  --dsprimary-color-decorative-teal-background: #e2fff8;
+  --dsprimary-color-decorative-teal-border: #cae5df;
+  --dsprimary-color-decorative-yellow-foreground: #a16207;
+  --dsprimary-color-decorative-yellow-background: #fffde7;
+  --dsprimary-color-decorative-yellow-border: #efe991;
+  --dsprimary-color-primary-200: #edf5ff;
+  --dsprimary-color-primary-400: #d0e2ff;
+  --dsprimary-color-primary-500: #8cb4ff;
+  --dsprimary-color-primary-600: #0f62fe;
+  --dsprimary-color-primary-700: #004ee1;
+  --dsprimary-color-primary-800: #104fc6;
+  --dsprimary-color-red-100: #fef1f2;
+  --dsprimary-color-red-600: #cb101d;
+  --dsprimary-color-white: #ffffff;
+  --dsprimary-color-neutral-100-opaque: #141a2b05;
+  --dsprimary-color-neutral-200-opaque: #182d660a;
+  --dsprimary-color-neutral-400: #606981;
+  --dsprimary-color-neutral-500: #c7cddb;
+  --dsprimary-color-neutral-900: #14171f;
+  --dsprimary-color-green-100: #ebfef6;
+  --dsprimary-color-green-600: #05751f;
+  --dsprimary-color-purple-100: #f5f2fd;
+  --dsprimary-color-purple-600: #874ce6;
+  --dsprimary-color-purple-700: #6a2bbf;
+  --dsprimary-color-orange-100: #fef8eb;
+  --dsprimary-color-orange-200: #fbe5c5;
+  --dsprimary-color-orange-500: #cc4d00;
+  --dsprimary-color-orange-600: #b53c0a;
+  --dsprimary-color-palette-green-1100: #0e2a21;
+  --dsprimary-color-palette-green-1000: #1c4130;
+  --dsprimary-color-palette-green-900: #2d6944;
+  --dsprimary-color-palette-green-800: #3c884d;
+  --dsprimary-color-palette-green-700: #4ca45a;
+  --dsprimary-color-palette-green-600: #5ab261;
+  --dsprimary-color-palette-green-500: #78c767;
+  --dsprimary-color-palette-green-400: #8fda75;
+  --dsprimary-color-palette-green-300: #a9e297;
+  --dsprimary-color-palette-green-200: #ccf0c2;
+  --dsprimary-color-palette-green-100: #ddf3d9;
+  --dsprimary-color-palette-green-0: #eef9ec;
+  --dsprimary-color-palette-blue-1100: #00213f;
+  --dsprimary-color-palette-blue-1000: #18395d;
+  --dsprimary-color-palette-blue-900: #245685;
   /* This is our new main color :) */
-  --colorpaletteblueblue800: #306ca5;
-  --colorpaletteblueblue700: #3a79bd;
-  --colorpaletteblueblue600: #4587cd;
-  --colorpaletteblueblue500: #5196dd;
-  --colorpaletteblueblue400: #6aacef;
-  --colorpaletteblueblue300: #aad2f4;
-  --colorpaletteblueblue200: #cde3f7;
-  --colorpaletteblueblue100: #e0f1fe;
-  --colorpaletteblueblue0: #ecf8fe;
+  --dsprimary-color-palette-blue-800: #306ca5;
+  --dsprimary-color-palette-blue-700: #3a79bd;
+  --dsprimary-color-palette-blue-600: #4587cd;
+  --dsprimary-color-palette-blue-500: #5196dd;
+  --dsprimary-color-palette-blue-400: #6aacef;
+  --dsprimary-color-palette-blue-300: #aad2f4;
+  --dsprimary-color-palette-blue-200: #cde3f7;
+  --dsprimary-color-palette-blue-100: #e0f1fe;
+  --dsprimary-color-palette-blue-0: #ecf8fe;
   /* Darkest aqua there is */
-  --colorpaletteaquaaqua1100: #0b2737;
+  --dsprimary-color-palette-aqua-1100: #0b2737;
   /* Slightly less aquatic, still deep as an ocean */
-  --colorpaletteaquaaqua1000: #193c4d;
-  --colorpaletteaquaaqua900: #265d71;
-  --colorpaletteaquaaqua800: #316c82;
-  --colorpaletteaquaaqua700: #3a8396;
-  --colorpaletteaquaaqua600: #4295ab;
-  --colorpaletteaquaaqua500: #54b5cb;
-  --colorpaletteaquaaqua400: #6ad3df;
-  --colorpaletteaquaaqua300: #91e2e1;
-  --colorpaletteaquaaqua200: #b5f0f1;
-  --colorpaletteaquaaqua100: #d0f7f8;
-  --colorpaletteaquaaqua0: #e0fbfb;
-  --colorpalettepurplepurple1100: #1d1e36;
-  --colorpalettepurplepurple1000: #2b2667;
-  --colorpalettepurplepurple900: #453e96;
-  --colorpalettepurplepurple800: #5a52b4;
-  --colorpalettepurplepurple700: #6b62cc;
-  --colorpalettepurplepurple600: #7d73e2;
-  --colorpalettepurplepurple500: #8d84ed;
-  --colorpalettepurplepurple400: #9e95ec;
-  --colorpalettepurplepurple300: #c0c2f3;
-  --colorpalettepurplepurple200: #d8d8f6;
-  --colorpalettepurplepurple100: #eaeaf8;
-  --colorpalettepurplepurple0: #f2f2f8;
-  --colorpaletteneutralneutral1100: #040404;
-  --colorpaletteneutralneutral1000: #182020;
-  --colorpaletteneutralneutral900: #293333;
-  --colorpaletteneutralneutral800: #384141;
-  --colorpaletteneutralneutral700: #545e5f;
-  --colorpaletteneutralneutral600: #70797a;
-  --colorpaletteneutralneutral500: #939a9b;
-  --colorpaletteneutralneutral400: #b1b6b7;
-  --colorpaletteneutralneutral300: #c9cccc;
-  --colorpaletteneutralneutral200: #dfe1e1;
-  --colorpaletteneutralneutral100: #f3f4f4;
-  --colorpaletteneutralneutral0: #ffffff;
-  --colorpalettetealteal1100: #0b2427;
-  --colorpalettetealteal1000: #1b3e3e;
-  --colorpalettetealteal900: #2a6461;
-  --colorpalettetealteal800: #357a7b;
-  --colorpalettetealteal700: #42948e;
-  --colorpalettetealteal600: #4aa69c;
-  --colorpalettetealteal500: #58c1b2;
-  --colorpalettetealteal400: #6addc6;
-  --colorpalettetealteal300: #97e7d5;
-  --colorpalettetealteal200: #c0f0e6;
-  --colorpalettetealteal100: #d5f6ef;
-  --colorpalettetealteal0: #e9f8f5;
-  --colorpalettepinkpink1100: #281821;
-  --colorpalettepinkpink1000: #4f1930;
-  --colorpalettepinkpink900: #872647;
-  --colorpalettepinkpink800: #a43b5b;
-  --colorpalettepinkpink700: #be4466;
-  --colorpalettepinkpink600: #cf517c;
-  --colorpalettepinkpink500: #de638b;
-  --colorpalettepinkpink400: #ee7fad;
-  --colorpalettepinkpink300: #f19bc0;
-  --colorpalettepinkpink200: #f4b8d4;
-  --colorpalettepinkpink100: #f7dcea;
-  --colorpalettepinkpink0: #fbeaf2;
-  --colorpaletteredred1100: #281212;
-  --colorpaletteredred1000: #641c18;
-  --colorpaletteredred900: #8d2d28;
-  --colorpaletteredred800: #b6403b;
-  --colorpaletteredred700: #ca4b45;
-  --colorpaletteredred600: #dc584a;
-  --colorpaletteredred500: #e56a5b;
-  --colorpaletteredred400: #ef8674;
-  --colorpaletteredred300: #f1a193;
-  --colorpaletteredred200: #f4bbb3;
-  --colorpaletteredred100: #f8d7d3;
-  --colorpaletteredred0: #fbebe9;
-  --colorpaletteorangeorange1100: #2a140f;
-  --colorpaletteorangeorange1000: #581d09;
-  --colorpaletteorangeorange900: #8a341a;
-  --colorpaletteorangeorange800: #bf5c29;
-  --colorpaletteorangeorange700: #de763a;
-  --colorpaletteorangeorange600: #e68246;
-  --colorpaletteorangeorange500: #ee8e53;
-  --colorpaletteorangeorange400: #f2a069;
+  --dsprimary-color-palette-aqua-1000: #193c4d;
+  --dsprimary-color-palette-aqua-900: #265d71;
+  --dsprimary-color-palette-aqua-800: #316c82;
+  --dsprimary-color-palette-aqua-700: #3a8396;
+  --dsprimary-color-palette-aqua-600: #4295ab;
+  --dsprimary-color-palette-aqua-500: #54b5cb;
+  --dsprimary-color-palette-aqua-400: #6ad3df;
+  --dsprimary-color-palette-aqua-300: #91e2e1;
+  --dsprimary-color-palette-aqua-200: #b5f0f1;
+  --dsprimary-color-palette-aqua-100: #d0f7f8;
+  --dsprimary-color-palette-aqua-0: #e0fbfb;
+  --dsprimary-color-palette-purple-1100: #1d1e36;
+  --dsprimary-color-palette-purple-1000: #2b2667;
+  --dsprimary-color-palette-purple-900: #453e96;
+  --dsprimary-color-palette-purple-800: #5a52b4;
+  --dsprimary-color-palette-purple-700: #6b62cc;
+  --dsprimary-color-palette-purple-600: #7d73e2;
+  --dsprimary-color-palette-purple-500: #8d84ed;
+  --dsprimary-color-palette-purple-400: #9e95ec;
+  --dsprimary-color-palette-purple-300: #c0c2f3;
+  --dsprimary-color-palette-purple-200: #d8d8f6;
+  --dsprimary-color-palette-purple-100: #eaeaf8;
+  --dsprimary-color-palette-purple-0: #f2f2f8;
+  --dsprimary-color-palette-neutral-1100: #040404;
+  --dsprimary-color-palette-neutral-1000: #182020;
+  --dsprimary-color-palette-neutral-900: #293333;
+  --dsprimary-color-palette-neutral-800: #384141;
+  --dsprimary-color-palette-neutral-700: #545e5f;
+  --dsprimary-color-palette-neutral-600: #70797a;
+  --dsprimary-color-palette-neutral-500: #939a9b;
+  --dsprimary-color-palette-neutral-400: #b1b6b7;
+  --dsprimary-color-palette-neutral-300: #c9cccc;
+  --dsprimary-color-palette-neutral-200: #dfe1e1;
+  --dsprimary-color-palette-neutral-100: #f3f4f4;
+  --dsprimary-color-palette-neutral-0: #ffffff;
+  --dsprimary-color-palette-teal-1100: #0b2427;
+  --dsprimary-color-palette-teal-1000: #1b3e3e;
+  --dsprimary-color-palette-teal-900: #2a6461;
+  --dsprimary-color-palette-teal-800: #357a7b;
+  --dsprimary-color-palette-teal-700: #42948e;
+  --dsprimary-color-palette-teal-600: #4aa69c;
+  --dsprimary-color-palette-teal-500: #58c1b2;
+  --dsprimary-color-palette-teal-400: #6addc6;
+  --dsprimary-color-palette-teal-300: #97e7d5;
+  --dsprimary-color-palette-teal-200: #c0f0e6;
+  --dsprimary-color-palette-teal-100: #d5f6ef;
+  --dsprimary-color-palette-teal-0: #e9f8f5;
+  --dsprimary-color-palette-pink-1100: #281821;
+  --dsprimary-color-palette-pink-1000: #4f1930;
+  --dsprimary-color-palette-pink-900: #872647;
+  --dsprimary-color-palette-pink-800: #a43b5b;
+  --dsprimary-color-palette-pink-700: #be4466;
+  --dsprimary-color-palette-pink-600: #cf517c;
+  --dsprimary-color-palette-pink-500: #de638b;
+  --dsprimary-color-palette-pink-400: #ee7fad;
+  --dsprimary-color-palette-pink-300: #f19bc0;
+  --dsprimary-color-palette-pink-200: #f4b8d4;
+  --dsprimary-color-palette-pink-100: #f7dcea;
+  --dsprimary-color-palette-pink-0: #fbeaf2;
+  --dsprimary-color-palette-red-1100: #281212;
+  --dsprimary-color-palette-red-1000: #641c18;
+  --dsprimary-color-palette-red-900: #8d2d28;
+  --dsprimary-color-palette-red-800: #b6403b;
+  --dsprimary-color-palette-red-700: #ca4b45;
+  --dsprimary-color-palette-red-600: #dc584a;
+  --dsprimary-color-palette-red-500: #e56a5b;
+  --dsprimary-color-palette-red-400: #ef8674;
+  --dsprimary-color-palette-red-300: #f1a193;
+  --dsprimary-color-palette-red-200: #f4bbb3;
+  --dsprimary-color-palette-red-100: #f8d7d3;
+  --dsprimary-color-palette-red-0: #fbebe9;
+  --dsprimary-color-palette-orange-1100: #2a140f;
+  --dsprimary-color-palette-orange-1000: #581d09;
+  --dsprimary-color-palette-orange-900: #8a341a;
+  --dsprimary-color-palette-orange-800: #bf5c29;
+  --dsprimary-color-palette-orange-700: #de763a;
+  --dsprimary-color-palette-orange-600: #e68246;
+  --dsprimary-color-palette-orange-500: #ee8e53;
+  --dsprimary-color-palette-orange-400: #f2a069;
   /* This is our main color. And this description will show inside the documentation */
-  --colorpaletteorangeorange300: #f4b388;
-  --colorpaletteorangeorange200: #f6c7a9;
-  --colorpaletteorangeorange100: #f7ddce;
-  --colorpaletteorangeorange0: #fceee4;
-  --colorpaletteyellowyellow1100: #2a1b08;
-  --colorpaletteyellowyellow1000: #4e2c0b;
-  --colorpaletteyellowyellow900: #8b4f1f;
-  --colorpaletteyellowyellow800: #b0772a;
-  --colorpaletteyellowyellow700: #d49b35;
-  --colorpaletteyellowyellow600: #f6be41;
-  --colorpaletteyellowyellow500: #f8ce4c;
-  --colorpaletteyellowyellow400: #fad961;
-  --colorpaletteyellowyellow300: #fbe17f;
-  --colorpaletteyellowyellow200: #fbe9a4;
-  --colorpaletteyellowyellow100: #fbeed1;
-  --colorpaletteyellowyellow0: #fef8e4;
-  --colorpalettemagentamagenta1100: #271a2c;
-  --colorpalettemagentamagenta1000: #3f1a4e;
-  --colorpalettemagentamagenta900: #642a73;
-  --colorpalettemagentamagenta800: #854091;
-  --colorpalettemagentamagenta700: #a04da3;
-  --colorpalettemagentamagenta600: #b659b4;
-  --colorpalettemagentamagenta500: #cc6bd5;
-  --colorpalettemagentamagenta400: #e38aef;
-  --colorpalettemagentamagenta300: #e3b1ee;
-  --colorpalettemagentamagenta200: #ecc7f4;
-  --colorpalettemagentamagenta100: #f5e4fa;
-  --colorpalettemagentamagenta0: #fcf0fe;
-  --colorsemanticprimaryprimaryactivebackground: #453e96;
-  --colorsemanticprimaryprimaryhoverbackground: #5a52b4;
-  --colorsemanticprimaryprimaryhovercolor: #ffffff;
-  --colorsemanticprimaryprimarybackground: #6b62cc;
-  --colorsemanticprimaryprimarycolor: #ffffff;
-  --colorsemantictexttextinverse: #ffffff;
-  --colorsemantictexttextsubtext: #545e5f;
-  --colorsemantictexttextheadline: #293333;
-  --colorsemantictexttextbody: #384141;
-  --colorsemanticerrorerrorcolor: #b6403b;
-  --colorsemanticerrorerroricon: #b6403b;
-  --colorsemanticerrorerrorborder: #ef8674;
-  --colorsemanticerrorerrorbackground: #f8d7d3;
-  --colorsemanticwarningwarningcolor: #8b4f1f;
-  --colorsemanticwarningwarningicon: #ba7506;
-  --colorsemanticwarningwarningborder: #fad961;
-  --colorsemanticwarningwarningbackground: #fbeed1;
-  --colorsemanticsuccesssuccesscolor: #2d6944;
-  --colorsemanticsuccesssuccessicon: #3c884d;
-  --colorsemanticsuccesssuccessborder: #8fda75;
-  --colorsemanticsuccesssuccessbackground: #ddf3d9;
-  --colorsemanticinfoinfocolor: #3a79bd;
-  --colorsemanticinfoinfoicon: #306ca5;
-  --colorsemanticinfoinfoborder: #6aacef;
-  --colorsemanticinfoinfobackground: #e0f1fe;
-  --colorsemanticopportunityopportunitycolor: #357a7b;
-  --colorsemanticopportunityopportunityicon: #357a7b;
-  --colorsemanticopportunityopportunityborder: #6addc6;
-  --colorsemanticopportunityopportunitybackground: #d5f6ef;
-  --colorsemanticprimaryprimaryinnactivebackground: #d8d8f6;
-  --colorsemanticprimaryprimaryborder: #6b62cc;
-  --colorsemanticprimaryhoverinnactivebackground: #c0c2f3;
-  --colorsemanticsalesale70background: #ac7d13;
-  --colorsemanticsalesale50background: #b51d4e;
-  --colorsemanticsalesale30background: #5869c1;
-  --colorsemanticsalesalecolor: #b7b7b7;
-  --colordarkblue: #ff0000;
-  --colorforegroundneutral: var(--colorwhite);
-  --colorforegroundprimary: var(--colorprimaryprimary500);
-  --colorforegroundcritical: var(--colorredred600);
-  --colorforegroundwarning: var(--colororangeorange600);
-  --colorforegroundpositive: var(--colorgreengreen600);
-  --colorforegroundupgrade: var(--colorpurplepurple600);
-  --colorforegrounddisabled: #c7cddb;
-  --colorbackgroundelevationbase: var(--colorneutralneutral900);
-  --colorbackgroundelevationraised: var(--colorneutralneutral900);
-  --colorbackgroundelevationoverlay: var(--colorneutralneutral900);
-  --colorbackgroundneutral: #d0e2ff0f;
-  --colorbackgroundneutralfaded: #d0e2ff0a;
-  --colorbackgroundpage: #040a1e;
-  --colorbackgroundprimary: var(--colorprimaryprimary800);
-  --colorbackgroundprimaryhighlighted: var(--colorprimaryprimary700);
-  --colorbackgroundprimaryfaded: #004ee1;
-  --colorbackgroundcriticalhighlighted: var(--colorredred600);
-  --colorbackgroundcriticalfaded: var(--colorredred100);
-  --colorbackgroundwarning: var(--colororangeorange500);
-  --colorbackgroundwarninghighlighted: var(--colororangeorange600);
-  --colorbackgroundwarningfaded: var(--colororangeorange100);
-  --colorbackgroundpositivehighlighted: var(--colorgreengreen600);
-  --colorbackgroundpositivefaded: var(--colorgreengreen100);
-  --colorbackgroundupgrade: var(--colorpurplepurple600);
-  --colorbackgroundupgradehighlighted: var(--colorpurplepurple700);
-  --colorbackgroundupgradefaded: #f5f2fd;
-  --colorbackgrounddisabled: #d0e2ff12;
-  --colorbackgrounddisabledfaded: var(--colorneutralneutral100opaque);
-  --colorbackgroundfocushighlight: var(--colorprimaryprimary400);
-  --colorborderneutral: var(--colorneutralneutral500);
-  --colorborderprimary: var(--colorprimaryprimary700);
-  --colorborderprimaryfaded: var(--colorprimaryprimary400);
-  --colorbordercritical: var(--colorredred600);
-  --colorborderwarning: var(--colororangeorange600);
-  --colorborderwarningfaded: var(--colororangeorange200);
-  --colorborderpositive: var(--colorgreengreen600);
-  --colorborderupgrade: var(--colorpurplepurple700);
-  --colorborderfocusfaded: var(--colorprimaryprimary400);
-  --coloronbackgroundneutral: var(--colorwhite);
-  --colorpersistentblack: var(--colorneutralneutral900);
-  --colordecorativeblueforeground: var(--colorprimaryprimary600);
-  --colordecorativebluebackground: var(--colorprimaryprimary200);
-  --colordecorativeblueborder: var(--colorprimaryprimary400);
-  --colordecorativegreenforeground: var(--colorgreengreen600);
-  --colordecorativegreenbackground: var(--colorgreengreen100);
-  --coloronbackgroundprimary: var(--colorwhite);
-  --coloronbackgroundcritical: var(--colorwhite);
-  --coloronbackgroundwarning: var(--colorwhite);
-  --coloronbackgroundpositive: var(--colorwhite);
-  --coloronbackgroundupgrade: var(--colorwhite);
-  --colorpersistentwhite: var(--colorwhite);
-  --colordecorativepurpleforeground: var(--colorpurplepurple600);
-  --colordecorativepurplebackground: var(--colorpurplepurple100);
-  --colordecorativeredforeground: var(--colorredred600);
-  --colordecorativeredbackground: var(--colorredred100);
+  --dsprimary-color-palette-orange-300: #f4b388;
+  --dsprimary-color-palette-orange-200: #f6c7a9;
+  --dsprimary-color-palette-orange-100: #f7ddce;
+  --dsprimary-color-palette-orange-0: #fceee4;
+  --dsprimary-color-palette-yellow-1100: #2a1b08;
+  --dsprimary-color-palette-yellow-1000: #4e2c0b;
+  --dsprimary-color-palette-yellow-900: #8b4f1f;
+  --dsprimary-color-palette-yellow-800: #b0772a;
+  --dsprimary-color-palette-yellow-700: #d49b35;
+  --dsprimary-color-palette-yellow-600: #f6be41;
+  --dsprimary-color-palette-yellow-500: #f8ce4c;
+  --dsprimary-color-palette-yellow-400: #fad961;
+  --dsprimary-color-palette-yellow-300: #fbe17f;
+  --dsprimary-color-palette-yellow-200: #fbe9a4;
+  --dsprimary-color-palette-yellow-100: #fbeed1;
+  --dsprimary-color-palette-yellow-0: #fef8e4;
+  --dsprimary-color-palette-magenta-1100: #271a2c;
+  --dsprimary-color-palette-magenta-1000: #3f1a4e;
+  --dsprimary-color-palette-magenta-900: #642a73;
+  --dsprimary-color-palette-magenta-800: #854091;
+  --dsprimary-color-palette-magenta-700: #a04da3;
+  --dsprimary-color-palette-magenta-600: #b659b4;
+  --dsprimary-color-palette-magenta-500: #cc6bd5;
+  --dsprimary-color-palette-magenta-400: #e38aef;
+  --dsprimary-color-palette-magenta-300: #e3b1ee;
+  --dsprimary-color-palette-magenta-200: #ecc7f4;
+  --dsprimary-color-palette-magenta-100: #f5e4fa;
+  --dsprimary-color-palette-magenta-0: #fcf0fe;
+  --dsprimary-color-semantic-primary-active-background: #453e96;
+  --dsprimary-color-semantic-primary-hover-background: #5a52b4;
+  --dsprimary-color-semantic-primary-hover-color: #ffffff;
+  --dsprimary-color-semantic-primary-background: #6b62cc;
+  --dsprimary-color-semantic-primary-color: #ffffff;
+  --dsprimary-color-semantic-text-inverse: #ffffff;
+  --dsprimary-color-semantic-text-subtext: #545e5f;
+  --dsprimary-color-semantic-text-headline: #293333;
+  --dsprimary-color-semantic-text-body: #384141;
+  --dsprimary-color-semantic-error-color: #b6403b;
+  --dsprimary-color-semantic-error-icon: #b6403b;
+  --dsprimary-color-semantic-error-border: #ef8674;
+  --dsprimary-color-semantic-error-background: #f8d7d3;
+  --dsprimary-color-semantic-warning-color: #8b4f1f;
+  --dsprimary-color-semantic-warning-icon: #ba7506;
+  --dsprimary-color-semantic-warning-border: #fad961;
+  --dsprimary-color-semantic-warning-background: #fbeed1;
+  --dsprimary-color-semantic-success-color: #2d6944;
+  --dsprimary-color-semantic-success-icon: #3c884d;
+  --dsprimary-color-semantic-success-border: #8fda75;
+  --dsprimary-color-semantic-success-background: #ddf3d9;
+  --dsprimary-color-semantic-info-color: #3a79bd;
+  --dsprimary-color-semantic-info-icon: #306ca5;
+  --dsprimary-color-semantic-info-border: #6aacef;
+  --dsprimary-color-semantic-info-background: #e0f1fe;
+  --dsprimary-color-semantic-opportunity-color: #357a7b;
+  --dsprimary-color-semantic-opportunity-icon: #357a7b;
+  --dsprimary-color-semantic-opportunity-border: #6addc6;
+  --dsprimary-color-semantic-opportunity-background: #d5f6ef;
+  --dsprimary-color-semantic-primary-innactive-background: #d8d8f6;
+  --dsprimary-color-semantic-primary-border: #6b62cc;
+  --dsprimary-color-semantic-primary-hover-innactive-background: #c0c2f3;
+  --dsprimary-color-semantic-sale-sale70-background: #ac7d13;
+  --dsprimary-color-semantic-sale-sale50-background: #b51d4e;
+  --dsprimary-color-semantic-sale-sale30-background: #5869c1;
+  --dsprimary-color-semantic-sale-color: #b7b7b7;
+  --dsprimary-color-dark-blue: #ff0000;
+  --dsprimary-color-foreground-neutral: var(--dsprimary-color-white);
+  --dsprimary-color-foreground-primary: var(--dsprimary-color-primary-500);
+  --dsprimary-color-foreground-critical: var(--dsprimary-color-red-600);
+  --dsprimary-color-foreground-warning: var(--dsprimary-color-orange-600);
+  --dsprimary-color-foreground-positive: var(--dsprimary-color-green-600);
+  --dsprimary-color-foreground-upgrade: var(--dsprimary-color-purple-600);
+  --dsprimary-color-foreground-disabled: #c7cddb;
+  --dsprimary-color-background-elevation-base: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-background-elevation-raised: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-background-elevation-overlay: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-background-neutral: #d0e2ff0f;
+  --dsprimary-color-background-neutral-faded: #d0e2ff0a;
+  --dsprimary-color-background-page: #040a1e;
+  --dsprimary-color-background-primary: var(--dsprimary-color-primary-800);
+  --dsprimary-color-background-primary-highlighted: var(--dsprimary-color-primary-700);
+  --dsprimary-color-background-primary-faded: #004ee1;
+  --dsprimary-color-background-critical-highlighted: var(--dsprimary-color-red-600);
+  --dsprimary-color-background-critical-faded: var(--dsprimary-color-red-100);
+  --dsprimary-color-background-warning: var(--dsprimary-color-orange-500);
+  --dsprimary-color-background-warning-highlighted: var(--dsprimary-color-orange-600);
+  --dsprimary-color-background-warning-faded: var(--dsprimary-color-orange-100);
+  --dsprimary-color-background-positive-highlighted: var(--dsprimary-color-green-600);
+  --dsprimary-color-background-positive-faded: var(--dsprimary-color-green-100);
+  --dsprimary-color-background-upgrade: var(--dsprimary-color-purple-600);
+  --dsprimary-color-background-upgrade-highlighted: var(--dsprimary-color-purple-700);
+  --dsprimary-color-background-upgrade-faded: #f5f2fd;
+  --dsprimary-color-background-disabled: #d0e2ff12;
+  --dsprimary-color-background-disabled-faded: var(--dsprimary-color-neutral-100-opaque);
+  --dsprimary-color-background-focus-highlight: var(--dsprimary-color-primary-400);
+  --dsprimary-color-border-neutral: var(--dsprimary-color-neutral-500);
+  --dsprimary-color-border-primary: var(--dsprimary-color-primary-700);
+  --dsprimary-color-border-primary-faded: var(--dsprimary-color-primary-400);
+  --dsprimary-color-border-critical: var(--dsprimary-color-red-600);
+  --dsprimary-color-border-warning: var(--dsprimary-color-orange-600);
+  --dsprimary-color-border-warning-faded: var(--dsprimary-color-orange-200);
+  --dsprimary-color-border-positive: var(--dsprimary-color-green-600);
+  --dsprimary-color-border-upgrade: var(--dsprimary-color-purple-700);
+  --dsprimary-color-border-focus-faded: var(--dsprimary-color-primary-400);
+  --dsprimary-color-on-background-neutral: var(--dsprimary-color-white);
+  --dsprimary-color-persistent-black: var(--dsprimary-color-neutral-900);
+  --dsprimary-color-decorative-blue-foreground: var(--dsprimary-color-primary-600);
+  --dsprimary-color-decorative-blue-background: var(--dsprimary-color-primary-200);
+  --dsprimary-color-decorative-blue-border: var(--dsprimary-color-primary-400);
+  --dsprimary-color-decorative-green-foreground: var(--dsprimary-color-green-600);
+  --dsprimary-color-decorative-green-background: var(--dsprimary-color-green-100);
+  --dsprimary-color-on-background-primary: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-critical: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-warning: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-positive: var(--dsprimary-color-white);
+  --dsprimary-color-on-background-upgrade: var(--dsprimary-color-white);
+  --dsprimary-color-persistent-white: var(--dsprimary-color-white);
+  --dsprimary-color-decorative-purple-foreground: var(--dsprimary-color-purple-600);
+  --dsprimary-color-decorative-purple-background: var(--dsprimary-color-purple-100);
+  --dsprimary-color-decorative-red-foreground: var(--dsprimary-color-red-600);
+  --dsprimary-color-decorative-red-background: var(--dsprimary-color-red-100);
 }
\ No newline at end of file
diff --git a/dark-d38a/dimension.css b/dark-d38a/dimension.css
index 4a5325db32..49df4c3d79 100644
--- a/dark-d38a/dimension.css
+++ b/dark-d38a/dimension.css
@@ -4,7 +4,7 @@
  */
 
 .theme-dark-d38a {
-  --dimensionspacingsemanticstackgap: 1px;
-  --dimensionshadowfocusringwidth: 3px;
-  --dimensionfontweightbold: 640px;
+  --dsprimary-dimension-spacing-semantic-stack-gap: 1px;
+  --dsprimary-dimension-shadow-focus-ring-width: 3px;
+  --dsprimary-dimension-font-weight-bold: 640px;
 }
\ No newline at end of file
diff --git a/dark-d38a/font-family.css b/dark-d38a/font-family.css
index 28377ae39d..f683f74ba5 100644
--- a/dark-d38a/font-family.css
+++ b/dark-d38a/font-family.css
@@ -4,5 +4,5 @@
  */
 
 .theme-dark-d38a {
-  --fontfamilyfontfamilydefault: "Inter";
+  --dsprimary-font-family-font-family-default: "Inter";
 }
\ No newline at end of file
diff --git a/dark-d38a/font-size.css b/dark-d38a/font-size.css
index f1b2ea732a..ded603e14a 100644
--- a/dark-d38a/font-size.css
+++ b/dark-d38a/font-size.css
@@ -4,5 +4,5 @@
  */
 
 .theme-dark-d38a {
-  --fontsizetitle1fontsize: 32px;
+  --dsprimary-font-size-title-1-font-size: 32px;
 }
\ No newline at end of file
diff --git a/dark-d38a/line-height.css b/dark-d38a/line-height.css
index 74312f41fc..87b7e83195 100644
--- a/dark-d38a/line-height.css
+++ b/dark-d38a/line-height.css
@@ -4,5 +4,5 @@
  */
 
 .theme-dark-d38a {
-  --lineheighttitle1lineheight: 40px;
+  --dsprimary-line-height-title-1-line-height: 40px;
 }
\ No newline at end of file
diff --git a/dark-d38a/opacity.css b/dark-d38a/opacity.css
index 30a19ddcad..cdc6de6856 100644
--- a/dark-d38a/opacity.css
+++ b/dark-d38a/opacity.css
@@ -4,5 +4,5 @@
  */
 
 .theme-dark-d38a {
-  --opacityopacitydisabled: 0.5;
+  --dsprimary-opacity-disabled: 0.5;
 }
\ No newline at end of file
diff --git a/dark-d38a/space.css b/dark-d38a/space.css
index 213771ad2d..dfde92a529 100644
--- a/dark-d38a/space.css
+++ b/dark-d38a/space.css
@@ -4,16 +4,16 @@
  */
 
 .theme-dark-d38a {
-  --spacespacing0: 0px;
-  --spacespacing2: 2px;
-  --spacespacing4: 4px;
-  --spacespacing8: 8px;
-  --spacespacing12: 12px;
-  --spacespacing16: 16px;
-  --spacespacing20: 20px;
-  --spacespacing24: 24px;
-  --spacespacing28: 28px;
-  --spacespacing32: 32px;
-  --spacespacing36: 36px;
-  --spacespacing40: 40px;
+  --dsprimary-space-spacing-0: 0px;
+  --dsprimary-space-spacing-2: 2px;
+  --dsprimary-space-spacing-4: 4px;
+  --dsprimary-space-spacing-8: 8px;
+  --dsprimary-space-spacing-12: 12px;
+  --dsprimary-space-spacing-16: 16px;
+  --dsprimary-space-spacing-20: 20px;
+  --dsprimary-space-spacing-24: 24px;
+  --dsprimary-space-spacing-28: 28px;
+  --dsprimary-space-spacing-32: 32px;
+  --dsprimary-space-spacing-36: 36px;
+  --dsprimary-space-spacing-40: 40px;
 }
\ No newline at end of file
diff --git a/dark-d38a/string.css b/dark-d38a/string.css
index 29f40d865e..facf7f102c 100644
--- a/dark-d38a/string.css
+++ b/dark-d38a/string.css
@@ -4,5 +4,5 @@
  */
 
 .theme-dark-d38a {
-  --stringfontfamily: "Inter";
+  --dsprimary-string-font-family: "Inter";
 }
\ No newline at end of file
diff --git a/dark-d38a/typography.css b/dark-d38a/typography.css
index 51605db5e7..44dadcd08c 100644
--- a/dark-d38a/typography.css
+++ b/dark-d38a/typography.css
@@ -4,20 +4,20 @@
  */
 
 .theme-dark-d38a {
-  --typographyh1: 700 57px/64px "Advent Pro";
-  --typographyh2: 700 43px/50px "Advent Pro";
-  --typographyh3: 700 32px/40px "Advent Pro";
-  --typographyh4: 700 24px/32px "Advent Pro";
-  --typographyh5: 700 21px/29px "Advent Pro";
-  --typographylargelead: 400 24px/32px "Advent Pro";
-  --typographymediumlead: 400 21px/29px "Advent Pro";
-  --typographybuttonlabel: 400 21px/29px "Advent Pro";
-  --typographyparagraph: 400 18px/26px "Advent Pro";
-  --typographysmallparagraph: 400 16px/24px "Advent Pro";
-  --typographytinyparagraph: 400 12px/24px "Advent Pro";
-  --typographysale: 700 24px/32px "Advent Pro";
+  --dsprimary-typography-h1: 700 57px/64px "Advent Pro";
+  --dsprimary-typography-h2: 700 43px/50px "Advent Pro";
+  --dsprimary-typography-h3: 700 32px/40px "Advent Pro";
+  --dsprimary-typography-h4: 700 24px/32px "Advent Pro";
+  --dsprimary-typography-h5: 700 21px/29px "Advent Pro";
+  --dsprimary-typography-large-lead: 400 24px/32px "Advent Pro";
+  --dsprimary-typography-medium-lead: 400 21px/29px "Advent Pro";
+  --dsprimary-typography-button-label: 400 21px/29px "Advent Pro";
+  --dsprimary-typography-paragraph: 400 18px/26px "Advent Pro";
+  --dsprimary-typography-small-paragraph: 400 16px/24px "Advent Pro";
+  --dsprimary-typography-tiny-paragraph: 400 12px/24px "Advent Pro";
+  --dsprimary-typography-sale: 700 24px/32px "Advent Pro";
   /* typewriter font test */
-  --typographyimpactlabel: 400 13px "Impact Label";
+  --dsprimary-typography-impact-label: 400 13px "Impact Label";
   /* importing test */
-  --typographypoppins: 400 13px "Poppins";
+  --dsprimary-typography-poppins: 400 13px "Poppins";
 }
\ No newline at end of file
diff --git a/dark/border-radius.css b/dark/border-radius.css
index 49346b6013..9d53409fbc 100644
--- a/dark/border-radius.css
+++ b/dark/border-radius.css
@@ -5,11 +5,11 @@
 
 .theme-dark {
   /* No radius */
-  --Border-Radius-Border-Radius-None: 0px;
-  --Border-Radius-Border-Radius-Small: 3px;
-  --Border-Radius-Border-Radius-Default: 5px;
-  --Border-Radius-Border-Radius-Medium: 7px;
-  --Border-Radius-Border-Radius-Large: 12px;
+  --borderradiusborderradiusnone: 0px;
+  --borderradiusborderradiussmall: 3px;
+  --borderradiusborderradiusdefault: 5px;
+  --borderradiusborderradiusmedium: 7px;
+  --borderradiusborderradiuslarge: 12px;
   /* Essentially a circle */
-  --Border-Radius-Border-Radius-Full: 999px;
+  --borderradiusborderradiusfull: 999px;
 }
\ No newline at end of file
diff --git a/dark/color.css b/dark/color.css
index 7ed6b4c35f..4c47491717 100644
--- a/dark/color.css
+++ b/dark/color.css
@@ -4,301 +4,337 @@
  */
 
 .theme-dark {
-  --Color-Foreground-Neutral-Faded: #9da8bb;
-  --Color-Foreground-Placeholder: #7f8694;
-  --Color-Background-Neutral-Highlighted: #d0e2ff14;
-  --Color-Background-Page-Faded: #09122a;
-  --Color-Background-Critical: #e22c2c;
-  --Color-Background-Positive: #118850;
-  --Color-Background-Blur: #fffffff2;
-  --Color-Background-Blur-Neutral: #f4f5f7f2;
-  --Color-Background-Blur-Neutral-Highlighted: #ecedf0f2;
-  --Color-Border-Neutral-Faded: #22273a;
-  --Color-Border-Critical-Faded: #fbd5d8;
-  --Color-Border-Positive-Faded: #cdedd5;
-  --Color-Border-Upgrade-Faded: #e3dbfa;
-  --Color-Border-Disabled: #dfe2ea;
-  --Color-Border-Focus: #4589ff;
-  --Color-Decorative-Cyan-Foreground: #0e7490;
-  --Color-Decorative-Cyan-Background: #d5fbfe;
-  --Color-Decorative-Cyan-Border: #b6e9ec;
-  --Color-Decorative-Fuchsia-Foreground: #b725cb;
-  --Color-Decorative-Fuchsia-Background: #fcf0ff;
-  --Color-Decorative-Fuchsia-Border: #f3d6f9;
-  --Color-Decorative-Green-Border: #c9e6da;
-  --Color-Decorative-Grey-Foreground: #4e536a;
-  --Color-Decorative-Grey-Background: #edeff3;
-  --Color-Decorative-Grey-Border: #e1e4eb;
-  --Color-Decorative-Light-Grey-Foreground: #68718d;
-  --Color-Decorative-Light-Grey-Background: #f6f7f9;
-  --Color-Decorative-Light-Grey-Border: #e3e4e9;
-  --Color-Decorative-Orange-Foreground: #c2410c;
-  --Color-Decorative-Orange-Background: #fff2e1;
-  --Color-Decorative-Orange-Border: #f9dbaf;
-  --Color-Decorative-Pink-Foreground: #d12372;
-  --Color-Decorative-Pink-Background: #fdf0f7;
-  --Color-Decorative-Purple-Border: #e4dbfa;
-  --Color-Decorative-Pink-Border: #fad6ea;
-  --Color-Decorative-Red-Border: #fcd7da;
-  --Color-Decorative-Teal-Foreground: #107a71;
-  --Color-Decorative-Teal-Background: #e2fff8;
-  --Color-Decorative-Teal-Border: #cae5df;
-  --Color-Decorative-Yellow-Foreground: #a16207;
-  --Color-Decorative-Yellow-Background: #fffde7;
-  --Color-Decorative-Yellow-Border: #efe991;
-  --Color-Primary-Primary-200: #edf5ff;
-  --Color-Primary-Primary-400: #d0e2ff;
-  --Color-Primary-Primary-500: #8cb4ff;
-  --Color-Primary-Primary-600: #0f62fe;
-  --Color-Primary-Primary-700: #004ee1;
-  --Color-Primary-Primary-800: #104fc6;
-  --Color-Red-Red-100: #fef1f2;
-  --Color-Red-Red-600: #cb101d;
-  --Color-White: #ffffff;
-  --Color-Neutral-Neutral-100-Opaque: #141a2b05;
-  --Color-Neutral-Neutral-200-Opaque: #182d660a;
-  --Color-Neutral-Neutral-400: #606981;
-  --Color-Neutral-Neutral-500: #c7cddb;
-  --Color-Neutral-Neutral-900: #14171f;
-  --Color-Green-Green-100: #ebfef6;
-  --Color-Green-Green-600: #05751f;
-  --Color-Purple-Purple-100: #f5f2fd;
-  --Color-Purple-Purple-600: #874ce6;
-  --Color-Purple-Purple-700: #6a2bbf;
-  --Color-Orange-Orange-100: #fef8eb;
-  --Color-Orange-Orange-200: #fbe5c5;
-  --Color-Orange-Orange-500: #cc4d00;
-  --Color-Orange-Orange-600: #b53c0a;
-  --Color-Blue-200: #ffffff;
-  --Color-Test: #5d2121;
-  --Color-Test-1: #ffffff;
-  --Color-Palette-Green-Green-1100: #0e2a21;
-  --Color-Palette-Green-Green-1000: #1c4130;
-  --Color-Palette-Green-Green-900: #2d6944;
-  --Color-Palette-Green-Green-800: #3c884d;
-  --Color-Palette-Green-Green-700: #4ca45a;
-  --Color-Palette-Green-Green-600: #5ab261;
-  --Color-Palette-Green-Green-500: #78c767;
-  --Color-Palette-Green-Green-400: #8fda75;
-  --Color-Palette-Green-Green-300: #a9e297;
-  --Color-Palette-Green-Green-200: #ccf0c2;
-  --Color-Palette-Green-Green-100: #ddf3d9;
-  --Color-Palette-Green-Green-0: #eef9ec;
-  --Color-Palette-Blue-Blue-1100: #00213f;
-  --Color-Palette-Blue-Blue-1000: #18395d;
-  --Color-Palette-Blue-Blue-900: #245685;
-  /* This is our new main color :) */
-  --Color-Palette-Blue-Blue-800: #306ca5;
-  --Color-Palette-Blue-Blue-700: #3a79bd;
-  --Color-Palette-Blue-Blue-600: #4587cd;
-  --Color-Palette-Blue-Blue-500: #5196dd;
-  --Color-Palette-Blue-Blue-400: #6aacef;
-  --Color-Palette-Blue-Blue-300: #aad2f4;
-  --Color-Palette-Blue-Blue-200: #cde3f7;
-  --Color-Palette-Blue-Blue-100: #e0f1fe;
-  --Color-Palette-Blue-Blue-0: #ecf8fe;
+  --colorforegroundneutral: #f2ffff;
+  --colorforegroundneutralfaded: #828ea7;
+  --colorforegroundprimary: #75b9ff;
+  --colorforegroundcritical: #ff7b7b;
+  --colorforegroundwarning: #ff9561;
+  --colorforegroundpositive: #71d887;
+  --colorforegroundupgrade: #ca8bff;
+  --colorforegrounddisabled: #49546b;
+  --colorforegroundneutralplaceholder: #657088;
+  --colorbackgroundelevationbase: #0c162e;
+  --colorbackgroundelevationraised: #101b33;
+  --colorbackgroundelevationoverlay: #152038;
+  --colorbackgroundneutral: #91a0c013;
+  --colorbackgroundneutralfaded: #91a0c00b;
+  --colorbackgroundneutralhighlighted: #91a0c01b;
+  --colorbackgroundpage: #0c162e;
+  --colorbackgroundpagefaded: #081129;
+  --colorbackgroundprimary: #104fc6;
+  --colorbackgroundprimaryhighlighted: #0038ae;
+  --colorbackgroundprimaryfaded: #5699ff1f;
+  --colorbackgroundcritical: #c50027;
+  --colorbackgroundcriticalhighlighted: #ac000f;
+  --colorbackgroundcriticalfaded: #ff595d1f;
+  --colorbackgroundwarning: #d0571e;
+  --colorbackgroundwarninghighlighted: #b84100;
+  --colorbackgroundwarningfaded: #f175411f;
+  --colorbackgroundpositive: #008236;
+  --colorbackgroundpositivehighlighted: #006d21;
+  --colorbackgroundpositivefaded: #50b7691f;
+  --colorbackgroundupgrade: #7f22fe;
+  --colorbackgroundupgradehighlighted: #6d00e5;
+  --colorbackgroundupgradefaded: #ac67ff1f;
+  --colorbackgroundblur: #0c162ef2;
+  --colorbackgroundblurneutral: #f4f5f7f2;
+  --colorbackgroundblurneutralhighlighted: #0e1831f2;
+  --colorbackgrounddisabled: #91a0c013;
+  --colorbackgrounddisabledfaded: #141a2b05;
+  --colorbackgroundfocushighlight: #d0e2ff;
+  --coloronbackgroundneutral: #ffffff;
+  --colorpersistentblack: #000000;
+  --colorforegrounddecorativeblue: #66bbff;
+  --colorbackgrounddecorativebluefaded: #4699ff1f;
+  --colorforegrounddecorativecyan: #06d4f3;
+  --colorbackgrounddecorativecyanfaded: #00b4d21f;
+  --colorforegrounddecorativefuchsia: #ff65ff;
+  --colorbackgrounddecorativefuchsiafaded: #ed3bff1f;
+  --colorforegrounddecorativegreen: #36e16c;
+  --colorbackgrounddecorativegreenfaded: #00c04c1f;
+  --colorforegrounddecorativegrey: #acbfdc;
+  --colorbackgrounddecorativegreyfaded: #8da0bb1f;
+  --colorforegrounddecorativelightgrey: #bdbebe;
+  --coloronbackgroundprimary: #ffffff;
+  --colorbackgrounddecorativelightgreyfaded: #9e9e9e1f;
+  --coloronbackgroundcritical: #ffffff;
+  --coloronbackgroundwarning: #ffffff;
+  --coloronbackgroundpositive: #ffffff;
+  --coloronbackgroundupgrade: #ffffff;
+  --colorpersistentwhite: #ffffff;
+  --colordecorativelightgreyborder: #edeff3;
+  --colorforegrounddecorativeorange: #ff9b2d;
+  --colorbackgrounddecorativeorangefaded: #ef7a001f;
+  --colorforegrounddecorativepink: #ff6bc7;
+  --colorbackgrounddecorativepinkfaded: #ff46a81f;
+  --colorforegrounddecorativepurple: #ca95ff;
+  --colorbackgrounddecorativepurplefaded: #ab73ff1f;
+  --colorforegrounddecorativered: #ff6f5e;
+  --colorbackgrounddecorativeredfaded: #ff4a3d1f;
+  --colorforegrounddecorativeteal: #1adbc3;
+  --colorbackgrounddecorativetealfaded: #00baa41f;
+  --colorforegrounddecorativeyellow: #eab600;
+  --colorbackgrounddecorativeyellowfaded: #c996001f;
+  --colorprimary200: #edf5ff;
+  --colorprimary400: #d0e2ff;
+  --colorprimary500: #8cb4ff;
+  --colorprimary600: #0f62fe;
+  --colorprimary700: #004ee1;
+  --colorprimary800: #104fc6;
+  --colorred100: #fef1f2;
+  --colorred600: #cb101d;
+  --colorwhite: #ffffff;
+  --colorneutral100opaque: #141a2b05;
+  --colorneutral200opaque: #182d660a;
+  --colorneutral400: #606981;
+  --colorneutral500: #c7cddb;
+  --colorneutral900: #14171f;
+  --colorgreen100: #ebfef6;
+  --colorgreen600: #05751f;
+  --colorpurple100: #f5f2fd;
+  --colorpurple600: #874ce6;
+  --colorpurple700: #6a2bbf;
+  --colororange100: #fef8eb;
+  --colororange200: #fbe5c5;
+  --colororange500: #cc4d00;
+  --colororange600: #b53c0a;
+  /* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim id erat vestibulum luctus. */
+  --color0001: #ffffff;
+  /* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim id erat vestibulum luctus. */
+  --color0002: #953333;
+  /* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim id erat vestibulum luctus. */
+  --color0003: #a2a731;
+  --colorpalettegreen1100: #0e2a21;
+  --colorpalettegreen1000: #1c4130;
+  --colorpalettegreen900: #2d6944;
+  --colorpalettegreen800: #3c884d;
+  --colorpalettegreen700: #4ca45a;
+  --colorpalettegreen600: #5ab261;
+  --colorpalettegreen500: #78c767;
+  --colorpalettegreen400: #8fda75;
+  --colorpalettegreen300: #a9e297;
+  --colorpalettegreen200: #ccf0c2;
+  --colorpalettegreen100: #ddf3d9;
+  --colorpalettegreen0: #eef9ec;
   /* Darkest aqua there is */
-  --Color-Palette-Aqua-Aqua-1100: #0b2737;
+  --colorpaletteaqua1100: #0b2737;
   /* Slightly less aquatic, still deep as an ocean */
-  --Color-Palette-Aqua-Aqua-1000: #193c4d;
-  --Color-Palette-Aqua-Aqua-900: #265d71;
-  --Color-Palette-Aqua-Aqua-800: #316c82;
-  --Color-Palette-Aqua-Aqua-700: #3a8396;
-  --Color-Palette-Aqua-Aqua-600: #4295ab;
-  --Color-Palette-Aqua-Aqua-500: #54b5cb;
-  --Color-Palette-Aqua-Aqua-400: #6ad3df;
-  --Color-Palette-Aqua-Aqua-300: #91e2e1;
-  --Color-Palette-Aqua-Aqua-200: #b5f0f1;
-  --Color-Palette-Aqua-Aqua-100: #d0f7f8;
-  --Color-Palette-Aqua-Aqua-0: #e0fbfb;
-  --Color-Palette-Purple-Purple-1100: #1d1e36;
-  --Color-Palette-Purple-Purple-1000: #2b2667;
-  --Color-Palette-Purple-Purple-900: #453e96;
-  --Color-Palette-Purple-Purple-800: #5a52b4;
-  --Color-Palette-Purple-Purple-700: #6b62cc;
-  --Color-Palette-Purple-Purple-600: #7d73e2;
-  --Color-Palette-Purple-Purple-500: #8d84ed;
-  --Color-Palette-Purple-Purple-400: #9e95ec;
-  --Color-Palette-Purple-Purple-300: #c0c2f3;
-  --Color-Palette-Purple-Purple-200: #d8d8f6;
-  --Color-Palette-Purple-Purple-100: #eaeaf8;
-  --Color-Palette-Purple-Purple-0: #f2f2f8;
-  --Color-Palette-Neutral-Neutral-1100: #040404;
-  --Color-Palette-Neutral-Neutral-1000: #182020;
-  --Color-Palette-Neutral-Neutral-900: #293333;
-  --Color-Palette-Neutral-Neutral-800: #384141;
-  --Color-Palette-Neutral-Neutral-700: #545e5f;
-  --Color-Palette-Neutral-Neutral-600: #70797a;
-  --Color-Palette-Neutral-Neutral-500: #939a9b;
-  --Color-Palette-Neutral-Neutral-400: #b1b6b7;
-  --Color-Palette-Neutral-Neutral-300: #c9cccc;
-  --Color-Palette-Neutral-Neutral-200: #dfe1e1;
-  --Color-Palette-Neutral-Neutral-100: #f3f4f4;
-  --Color-Palette-Neutral-Neutral-0: #ffffff;
-  --Color-Palette-Teal-Teal-1100: #0b2427;
-  --Color-Palette-Teal-Teal-1000: #1b3e3e;
-  --Color-Palette-Teal-Teal-900: #2a6461;
-  --Color-Palette-Teal-Teal-800: #357a7b;
-  --Color-Palette-Teal-Teal-700: #42948e;
-  --Color-Palette-Teal-Teal-600: #4aa69c;
-  --Color-Palette-Teal-Teal-500: #58c1b2;
-  --Color-Palette-Teal-Teal-400: #6addc6;
-  --Color-Palette-Teal-Teal-300: #97e7d5;
-  --Color-Palette-Teal-Teal-200: #c0f0e6;
-  --Color-Palette-Teal-Teal-100: #d5f6ef;
-  --Color-Palette-Teal-Teal-0: #e9f8f5;
-  --Color-Palette-Pink-Pink-1100: #281821;
-  --Color-Palette-Pink-Pink-1000: #4f1930;
-  --Color-Palette-Pink-Pink-900: #872647;
-  --Color-Palette-Pink-Pink-800: #a43b5b;
-  --Color-Palette-Pink-Pink-700: #be4466;
-  --Color-Palette-Pink-Pink-600: #cf517c;
-  --Color-Palette-Pink-Pink-500: #de638b;
-  --Color-Palette-Pink-Pink-400: #ee7fad;
-  --Color-Palette-Pink-Pink-300: #f19bc0;
-  --Color-Palette-Pink-Pink-200: #f4b8d4;
-  --Color-Palette-Pink-Pink-100: #f7dcea;
-  --Color-Palette-Pink-Pink-0: #fbeaf2;
-  --Color-Palette-Red-Red-1100: #281212;
-  --Color-Palette-Red-Red-1000: #641c18;
-  --Color-Palette-Red-Red-900: #8d2d28;
-  --Color-Palette-Red-Red-800: #b6403b;
-  --Color-Palette-Red-Red-700: #ca4b45;
-  --Color-Palette-Red-Red-600: #dc584a;
-  --Color-Palette-Red-Red-500: #e56a5b;
-  --Color-Palette-Red-Red-400: #ef8674;
-  --Color-Palette-Red-Red-300: #f1a193;
-  --Color-Palette-Red-Red-200: #f4bbb3;
-  --Color-Palette-Red-Red-100: #f8d7d3;
-  --Color-Palette-Red-Red-0: #fbebe9;
-  --Color-Palette-Orange-Orange-1100: #2a140f;
-  --Color-Palette-Orange-Orange-1000: #581d09;
-  --Color-Palette-Orange-Orange-900: #8a341a;
-  --Color-Palette-Orange-Orange-800: #bf5c29;
-  --Color-Palette-Orange-Orange-700: #de763a;
-  --Color-Palette-Orange-Orange-600: #e68246;
-  --Color-Palette-Orange-Orange-500: #ee8e53;
-  --Color-Palette-Orange-Orange-400: #f2a069;
+  --colorpaletteaqua1000: #193c4d;
+  --colorpaletteaqua900: #265d71;
+  --colorpaletteaqua800: #316c82;
+  --colorpaletteaqua700: #3a8396;
+  --colorpaletteaqua600: #4295ab;
+  --colorpaletteaqua500: #54b5cb;
+  --colorpaletteaqua400: #6ad3df;
+  --colorpaletteaqua300: #91e2e1;
+  --colorpaletteaqua200: #b5f0f1;
+  --colorpaletteaqua100: #d0f7f8;
+  --colorpaletteaqua0: #e0fbfb;
+  --colorpalettepurple1100: #1d1e36;
+  --colorpalettepurple1000: #2b2667;
+  --colorpalettepurple900: #453e96;
+  --colorpalettepurple800: #5a52b4;
+  --colorpalettepurple700: #6b62cc;
+  --colorpalettepurple600: #7d73e2;
+  --colorpalettepurple500: #8d84ed;
+  --colorpalettepurple400: #9e95ec;
+  --colorpalettepurple300: #c0c2f3;
+  --colorpalettepurple200: #d8d8f6;
+  --colorpalettepurple100: #eaeaf8;
+  --colorpalettepurple0: #f2f2f8;
+  --colorpaletteneutral1100: #040404;
+  --colorpaletteneutral1000: #182020;
+  --colorpaletteneutral900: #293333;
+  --colorpaletteneutral800: #384141;
+  --colorpaletteneutral700: #545e5f;
+  --colorpaletteneutral600: #70797a;
+  --colorpaletteneutral500: #939a9b;
+  --colorpaletteneutral400: #b1b6b7;
+  --colorpaletteneutral300: #c9cccc;
+  --colorpaletteneutral200: #dfe1e1;
+  --colorpaletteneutral100: #f3f4f4;
+  --colorpaletteneutral0: #ffffff;
+  --colorpaletteteal1100: #0b2427;
+  --colorpaletteteal1000: #1b3e3e;
+  --colorpaletteteal900: #2a6461;
+  --colorpaletteteal800: #357a7b;
+  --colorpaletteteal700: #42948e;
+  --colorpaletteteal600: #4aa69c;
+  --colorpaletteteal500: #58c1b2;
+  --colorpaletteteal400: #6addc6;
+  --colorpaletteteal300: #97e7d5;
+  --colorpaletteteal200: #c0f0e6;
+  --colorpaletteteal100: #d5f6ef;
+  --colorpaletteteal0: #e9f8f5;
+  --colorpalettepink1100: #281821;
+  --colorpalettepink1000: #4f1930;
+  --colorpalettepink900: #872647;
+  --colorpalettepink800: #a43b5b;
+  --colorpalettepink700: #be4466;
+  --colorpalettepink600: #cf517c;
+  --colorpalettepink500: #de638b;
+  --colorpalettepink400: #ee7fad;
+  --colorpalettepink300: #f19bc0;
+  --colorpalettepink200: #f4b8d4;
+  --colorpalettepink100: #f7dcea;
+  --colorpalettepink0: #fbeaf2;
+  --colorpalettered1100: #281212;
+  --colorpalettered1000: #641c18;
+  --colorpalettered900: #8d2d28;
+  --colorpalettered800: #b6403b;
+  --colorpalettered700: #ca4b45;
+  --colorpalettered600: #dc584a;
+  --colorpalettered500: #e56a5b;
+  --colorpalettered400: #ef8674;
+  --colorpalettered300: #f1a193;
+  --colorpalettered200: #f4bbb3;
+  --colorpalettered100: #f8d7d3;
+  --colorpalettered0: #fbebe9;
+  --colorpaletteorange1100: #2a140f;
+  --colorpaletteorange1000: #581d09;
+  --colorpaletteorange900: #8a341a;
+  --colorpaletteorange800: #bf5c29;
+  --colorpaletteorange700: #de763a;
+  --colorpaletteorange600: #e68246;
+  --colorpaletteorange500: #ee8e53;
+  --colorpaletteorange400: #f2a069;
   /* This is our main color. And this description will show inside the documentation */
-  --Color-Palette-Orange-Orange-300: #f4b388;
-  --Color-Palette-Orange-Orange-200: #f6c7a9;
-  --Color-Palette-Orange-Orange-100: #f7ddce;
-  --Color-Palette-Orange-Orange-0: #fceee4;
-  --Color-Palette-Yellow-Yellow-1100: #2a1b08;
-  --Color-Palette-Yellow-Yellow-1000: #4e2c0b;
-  --Color-Palette-Yellow-Yellow-900: #8b4f1f;
-  --Color-Palette-Yellow-Yellow-800: #b0772a;
-  --Color-Palette-Yellow-Yellow-700: #d49b35;
-  --Color-Palette-Yellow-Yellow-600: #f6be41;
-  --Color-Palette-Yellow-Yellow-500: #f8ce4c;
-  --Color-Palette-Yellow-Yellow-400: #fad961;
-  --Color-Palette-Yellow-Yellow-300: #fbe17f;
-  --Color-Palette-Yellow-Yellow-200: #fbe9a4;
-  --Color-Palette-Yellow-Yellow-100: #fbeed1;
-  --Color-Palette-Yellow-Yellow-0: #fef8e4;
-  --Color-Palette-Magenta-Magenta-1100: #271a2c;
-  --Color-Palette-Magenta-Magenta-1000: #3f1a4e;
-  --Color-Palette-Magenta-Magenta-900: #642a73;
-  --Color-Palette-Magenta-Magenta-800: #854091;
-  --Color-Palette-Magenta-Magenta-700: #a04da3;
-  --Color-Palette-Magenta-Magenta-600: #b659b4;
-  --Color-Palette-Magenta-Magenta-500: #cc6bd5;
-  --Color-Palette-Magenta-Magenta-400: #e38aef;
-  --Color-Palette-Magenta-Magenta-300: #e3b1ee;
-  --Color-Palette-Magenta-Magenta-200: #ecc7f4;
-  --Color-Palette-Magenta-Magenta-100: #f5e4fa;
-  --Color-Palette-Magenta-Magenta-0: #fcf0fe;
-  --Color-Semantic-Primary-Primary-Active-Background: #453e96;
-  --Color-Semantic-Primary-Primary-Hover-Background: #5a52b4;
-  --Color-Semantic-Primary-Primary-Hover-Color: #ffffff;
-  --Color-Semantic-Primary-Primary-Background: #6b62cc;
-  --Color-Semantic-Primary-Primary-Color: #ffffff;
-  --Color-Semantic-Text-Text-Inverse: #ffffff;
-  --Color-Semantic-Text-Text-Subtext: #545e5f;
-  --Color-Semantic-Text-Text-Headline: #293333;
-  --Color-Semantic-Text-Text-Body: #384141;
-  --Color-Semantic-Error-Error-Color: #b6403b;
-  --Color-Semantic-Error-Error-Icon: #b6403b;
-  --Color-Semantic-Error-Error-Border: #ef8674;
-  --Color-Semantic-Error-Error-Background: #f8d7d3;
-  --Color-Semantic-Warning-Warning-Color: #8b4f1f;
-  --Color-Semantic-Warning-Warning-Icon: #ba7506;
-  --Color-Semantic-Warning-Warning-Border: #fad961;
-  --Color-Semantic-Warning-Warning-Background: #fbeed1;
-  --Color-Semantic-Success-Success-Color: #2d6944;
-  --Color-Semantic-Success-Success-Icon: #3c884d;
-  --Color-Semantic-Success-Success-Border: #8fda75;
-  --Color-Semantic-Success-Success-Background: #ddf3d9;
-  --Color-Semantic-Info-Info-Color: #3a79bd;
-  --Color-Semantic-Info-Info-Icon: #306ca5;
-  --Color-Semantic-Info-Info-Border: #6aacef;
-  --Color-Semantic-Info-Info-Background: #e0f1fe;
-  --Color-Semantic-Opportunity-Opportunity-Color: #357a7b;
-  --Color-Semantic-Opportunity-Opportunity-Icon: #357a7b;
-  --Color-Semantic-Opportunity-Opportunity-Border: #6addc6;
-  --Color-Semantic-Opportunity-Opportunity-Background: #d5f6ef;
-  --Color-Semantic-Primary-Primary-Innactive-Background: #d8d8f6;
-  --Color-Semantic-Primary-Primary-Border: #6b62cc;
-  --Color-Semantic-Primary-Hover-Innactive-Background: #c0c2f3;
-  --Color-Semantic-Sale-Sale70-Background: #ac7d13;
-  --Color-Semantic-Sale-Sale50-Background: #b51d4e;
-  --Color-Semantic-Sale-Sale30-Background: #5869c1;
-  --Color-Semantic-Sale-Sale-Color: #b7b7b7;
-  --Color-Dark-Blue: #ff0000;
-  --Color-Test: #ffffff;
-  --Color-Foreground-Neutral: var(--Color-White);
-  --Color-Foreground-Primary: var(--Color-Primary-Primary-500);
-  --Color-Foreground-Critical: var(--Color-Red-Red-600);
-  --Color-Foreground-Warning: var(--Color-Orange-Orange-600);
-  --Color-Foreground-Positive: var(--Color-Green-Green-600);
-  --Color-Foreground-Upgrade: var(--Color-Purple-Purple-600);
-  --Color-Foreground-Disabled: #c7cddb;
-  --Color-Background-Elevation-Base: var(--Color-Neutral-Neutral-900);
-  --Color-Background-Elevation-Raised: var(--Color-Neutral-Neutral-900);
-  --Color-Background-Elevation-Overlay: var(--Color-Neutral-Neutral-900);
-  --Color-Background-Neutral: #d0e2ff0f;
-  --Color-Background-Neutral-Faded: #d0e2ff0a;
-  --Color-Background-Page: #040a1e;
-  --Color-Background-Primary: var(--Color-Primary-Primary-800);
-  --Color-Background-Primary-Highlighted: var(--Color-Primary-Primary-700);
-  --Color-Background-Primary-Faded: #004ee1;
-  --Color-Background-Critical-Highlighted: var(--Color-Red-Red-600);
-  --Color-Background-Critical-Faded: var(--Color-Red-Red-100);
-  --Color-Background-Warning: var(--Color-Orange-Orange-500);
-  --Color-Background-Warning-Highlighted: var(--Color-Orange-Orange-600);
-  --Color-Background-Warning-Faded: var(--Color-Orange-Orange-100);
-  --Color-Background-Positive-Highlighted: var(--Color-Green-Green-600);
-  --Color-Background-Positive-Faded: var(--Color-Green-Green-100);
-  --Color-Background-Upgrade: var(--Color-Purple-Purple-600);
-  --Color-Background-Upgrade-Highlighted: var(--Color-Purple-Purple-700);
-  --Color-Background-Upgrade-Faded: #f5f2fd;
-  --Color-Background-Disabled: #d0e2ff12;
-  --Color-Background-Disabled-Faded: var(--Color-Neutral-Neutral-100-Opaque);
-  --Color-Background-Focus-Highlight: var(--Color-Primary-Primary-400);
-  --Color-Border-Neutral: var(--Color-Neutral-Neutral-500);
-  --Color-Border-Primary: var(--Color-Primary-Primary-700);
-  --Color-Border-Primary-Faded: var(--Color-Primary-Primary-400);
-  --Color-Border-Critical: var(--Color-Red-Red-600);
-  --Color-Border-Warning: var(--Color-Orange-Orange-600);
-  --Color-Border-Warning-Faded: var(--Color-Orange-Orange-200);
-  --Color-Border-Positive: var(--Color-Green-Green-600);
-  --Color-Border-Upgrade: var(--Color-Purple-Purple-700);
-  --Color-Border-Focus-Faded: var(--Color-Primary-Primary-400);
-  --Color-On-Background-Neutral: var(--Color-White);
-  --Color-Persistent-Black: var(--Color-Neutral-Neutral-900);
-  --Color-Decorative-Blue-Foreground: var(--Color-Primary-Primary-600);
-  --Color-Decorative-Blue-Background: var(--Color-Primary-Primary-200);
-  --Color-Decorative-Blue-Border: var(--Color-Primary-Primary-400);
-  --Color-Decorative-Green-Foreground: var(--Color-Green-Green-600);
-  --Color-Decorative-Green-Background: var(--Color-Green-Green-100);
-  --Color-On-Background-Primary: var(--Color-White);
-  --Color-On-Background-Critical: var(--Color-White);
-  --Color-On-Background-Warning: var(--Color-White);
-  --Color-On-Background-Positive: var(--Color-White);
-  --Color-On-Background-Upgrade: var(--Color-White);
-  --Color-Persistent-White: var(--Color-White);
-  --Color-Decorative-Purple-Foreground: var(--Color-Purple-Purple-600);
-  --Color-Decorative-Purple-Background: var(--Color-Purple-Purple-100);
-  --Color-Decorative-Red-Foreground: var(--Color-Red-Red-600);
-  --Color-Decorative-Red-Background: var(--Color-Red-Red-100);
+  --colorpaletteorange300: #f4b388;
+  --colorpaletteorange200: #f6c7a9;
+  --colorpaletteorange100: #f7ddce;
+  --colorpaletteorange0: #fceee4;
+  --colorpaletteyellow1100: #2a1b08;
+  --colorpaletteyellow1000: #4e2c0b;
+  --colorpaletteyellow900: #8b4f1f;
+  --colorpaletteyellow800: #b0772a;
+  --colorpaletteyellow700: #d49b35;
+  --colorpaletteyellow600: #f6be41;
+  --colorpaletteyellow500: #f8ce4c;
+  --colorpaletteyellow400: #fad961;
+  --colorpaletteyellow300: #fbe17f;
+  --colorpaletteyellow200: #fbe9a4;
+  --colorpaletteyellow100: #fbeed1;
+  --colorpaletteyellow0: #fef8e4;
+  --colorpalettemagenta1100: #271a2c;
+  --colorpalettemagenta1000: #3f1a4e;
+  --colorpalettemagenta900: #642a73;
+  --colorpalettemagenta800: #854091;
+  --colorpalettemagenta700: #a04da3;
+  --colorpalettemagenta600: #b659b4;
+  --colorpalettemagenta500: #cc6bd5;
+  --colorpalettemagenta400: #e38aef;
+  --colorpalettemagenta300: #e3b1ee;
+  --colorpalettemagenta200: #ecc7f4;
+  --colorpalettemagenta100: #f5e4fa;
+  --colorpalettemagenta0: #fcf0fe;
+  --colorsemanticinfobackground: #e0f1fe;
+  --colorsemanticinfoborder: #5196dd;
+  --colorsemanticinfocolor: #3a79bd;
+  --colorsemanticinfoicon: #306ca5;
+  --colorsemanticwarningbackground: #ffffff;
+  --colorforegroundprimaryfaded: #75b9ff;
+  --colorforegroundcriticalfaded: #ff7b7b;
+  --colorforegroundwarningfaded: #ff9561;
+  --colorforegroundpositivefaded: #71d887;
+  --colorforegroundupgradefaded: #ca8bff;
+  --colorbackgroundblurneutralfaded: #f4f5f7f2;
+  --colorbackgrounddecorativeblue: #2b7fff;
+  --colorbackgrounddecorativecyan: #00d3f2;
+  --colorbackgrounddecorativeteal: #00d5be;
+  --colorbackgrounddecorativegreen: #31de69;
+  --colorbackgrounddecorativeyellow: #fcc801;
+  --colorbackgrounddecorativeorange: #ff8904;
+  --colorbackgrounddecorativered: #fb2e27;
+  --colorbackgrounddecorativepink: #f6339a;
+  --colorbackgrounddecorativefuchsia: #e12afb;
+  --colorbackgrounddecorativepurple: #8e51ff;
+  --colorbackgrounddecorativegrey: #62748e;
+  --colorbackgrounddecorativelightgrey: #d4d4d4;
+  --coloronbackgrounddecorativeblue: #ffffff;
+  --coloronbackgrounddecorativecyan: #001e3a;
+  --coloronbackgrounddecorativeteal: #002116;
+  --coloronbackgrounddecorativegreen: #002500;
+  --coloronbackgrounddecorativeyellow: #421100;
+  --coloronbackgrounddecorativeorange: #350000;
+  --coloronbackgrounddecorativered: #ffffff;
+  --coloronbackgrounddecorativepink: #ffffff;
+  --coloronbackgrounddecorativefuchsia: #ffffff;
+  --coloronbackgrounddecorativepurple: #ffffff;
+  --coloronbackgrounddecorativegrey: #ffffff;
+  --coloronbackgrounddecorativelightgrey: #262626;
+  --colororange400: #ff9250;
+  --colorborderneutral: #efffff26;
+  --colorborderneutralfaded: #efffff13;
+  --colorborderprimary: #75b9ff;
+  --colorborderprimaryfaded: #3978f34d;
+  --colorbordercritical: #ff7b7b;
+  --colorbordercriticalfaded: #e2333f4d;
+  --colorborderwarning: #ff9561;
+  --colorborderwarningfaded: #ce551c4d;
+  --colorborderpositive: #71d887;
+  --colorborderpositivefaded: #2b984b4d;
+  --colorborderupgrade: #ca8bff;
+  --colorborderupgradefaded: #8f40ff4d;
+  --colorborderdisabled: #dfe2ea;
+  --colorborderfocus: #75b9ff;
+  --colorborderdecorativeblue: #66bbff;
+  --colorborderdecorativecyan: #06d4f3;
+  --colorborderfocusfaded: #3978f34d;
+  --colorborderdecorativeteal: #1adbc3;
+  --colorborderdecorativegreen: #36e16c;
+  --colorborderdecorativeyellow: #eab600;
+  --colorborderdecorativeorange: #ff9b2d;
+  --colorborderdecorativered: #ff6f5e;
+  --colorborderdecorativepink: #ff6bc7;
+  --colorborderdecorativefuchsia: #ff65ff;
+  --colorborderdecorativepurple: #ca95ff;
+  --colorborderdecorativegrey: #acbfdc;
+  --colorborderdecorativelightgrey: #bdbebe;
+  --colorborderdecorativebluefaded: #2479f84d;
+  --colorborderdecorativecyanfaded: #0094b24d;
+  --colorborderdecorativetealfaded: #009a864d;
+  --colorborderdecorativegreenfaded: #009f294d;
+  --colorborderdecorativeyellowfaded: #a977004d;
+  --colorborderdecorativeorangefaded: #cc5a004d;
+  --colorborderdecorativeredfaded: #ed17174d;
+  --colorborderdecorativepinkfaded: #e112894d;
+  --colorborderdecorativefuchsiafaded: #ca00e44d;
+  --colorborderdecorativepurplefaded: #8e51ff4d;
+  --colorborderdecorativelightgreyfaded: #8080804d;
+  --colorborderdecorativegreyfaded: #6f829c4d;
+  --colorbrandbase: #a74a7f;
+  /* Used for error backgrunds */
+  --colorsemanticerrorbackground: var(--colorpalettered100);
+  --colorsemanticerrorborder: var(--colorpalettered600);
+  --colorsemanticerrorcolor: var(--colorpalettered800);
+  --colorsemanticerroricon: var(--colorpalettered800);
+  --colorsemanticopportunitybackground: var(--colorpaletteteal100);
+  --colorsemanticopportunityborder: var(--colorpaletteaqua300);
+  --colorsemanticopportunitycolor: var(--colorpaletteaqua800);
+  --colorsemanticopportunityicon: var(--colorpaletteaqua700);
+  --colorsemanticprimaryhoverinnactivebackground: var(--colorpaletteyellow400);
+  --colorsemanticprimaryactivebackground: var(--colorpaletteyellow600);
+  --colorsemanticprimarybackground: var(--colorpaletteyellow500);
+  --colorsemanticprimaryborder: var(--colorpaletteyellow600);
+  --colorsemanticprimarycolor: var(--colorpaletteyellow1100);
+  --colorsemanticprimaryhoverbackground: var(--colorpaletteyellow600);
+  --colorsemanticprimaryhovercolor: var(--colorpaletteyellow1000);
+  --colorsemanticprimaryinnactivebackground: var(--colorpaletteyellow200);
+  /* Some test description */
+  --colorsemanticsalesale30background: var(--colorpaletteteal500);
+  --colorsemanticsalesale50background: var(--colorpalettepink600);
+  --colorsemanticsalesale70background: var(--colorpaletteyellow600);
+  --colorsemanticsalecolor: var(--colorpaletteneutral0);
+  --colorsemanticsuccessbackground: var(--colorpalettegreen100);
+  --colorsemanticsuccessborder: var(--colorpalettegreen400);
+  --colorsemanticsuccesscolor: var(--colorpalettegreen900);
+  --colorsemanticsuccessicon: var(--colorpalettegreen800);
+  --colorsemantictextbody: var(--colorpaletteorange1000);
+  --colorsemantictextheadline: var(--colorpaletteorange1100);
+  --colorsemantictextinverse: var(--colorpaletteneutral0);
+  --colorsemantictextsubtext: var(--colorpaletteneutral700);
+  --colorsemanticwarningborder: var(--colorpaletteyellow600);
+  --colorsemanticwarningcolor: var(--colorpaletteyellow900);
+  --colorsemanticwarningicon: var(--colorpaletteyellow800);
+  --color: var(--colorforegroundneutral);
 }
\ No newline at end of file
diff --git a/dark/dimension.css b/dark/dimension.css
index db201fa91f..ff48bf8144 100644
--- a/dark/dimension.css
+++ b/dark/dimension.css
@@ -4,6 +4,36 @@
  */
 
 .theme-dark {
-  --Dimension-Spacing-Semantic-Stack-Gap: 1px;
-  --Dimension-Shadow-Focus-Ring-Width: 3px;
+  --dimensionspacingsemanticstackgap: 1px;
+  --dimensionshadowfocusringwidth: 3px;
+  --dimensionpalettemagentanumber: 0px;
+  --dimensionnumber: 20px;
+  --dimensionnumber2: 0px;
+  /* No radius */
+  --dimensionborderradiusnone: 0px;
+  --dimensionborderradiussmall: 3px;
+  --dimensionborderradiusdefault: 5px;
+  --dimensionborderradiusmedium: 7px;
+  --dimensionborderradiuslarge: 12px;
+  /* Essentially a circle */
+  --dimensionborderradiusfull: 999px;
+  --dimensionspacing0: 0px;
+  --dimensionspacing2: 2px;
+  --dimensionspacing4: 4px;
+  --dimensionspacing8: 8px;
+  --dimensionspacing12: 12px;
+  --dimensionspacing16: 16px;
+  --dimensionspacing20: 20px;
+  --dimensionspacing24: 24px;
+  --dimensionspacing28: 28px;
+  --dimensionspacing32: 32px;
+  --dimensionspacing36: 36px;
+  --dimensionspacing40: 40px;
+  --dimensionopacitydisabled: 50px;
+  --dimensiondimensionsdefault: 36px;
+  --dimensiondimensionssmall: 28px;
+  --dimensiondimensionslarge: 44px;
+  --dimensionheadingtitle1fontsize: 32px;
+  --dimensionheadingtitle1lineheight: 40px;
+  --dimensionfontweightbold: 640px;
 }
\ No newline at end of file
diff --git a/dark/font-family.css b/dark/font-family.css
new file mode 100644
index 0000000000..b97fca1e17
--- /dev/null
+++ b/dark/font-family.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --fontfamilypalettegreenstring: "String value";
+}
\ No newline at end of file
diff --git a/dark/font-size.css b/dark/font-size.css
new file mode 100644
index 0000000000..24a6f0a98d
--- /dev/null
+++ b/dark/font-size.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --fontsizeexample: 100px;
+}
\ No newline at end of file
diff --git a/dark/font-weight.css b/dark/font-weight.css
new file mode 100644
index 0000000000..4f4f86257f
--- /dev/null
+++ b/dark/font-weight.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --fontweightnamingishard: 400;
+}
\ No newline at end of file
diff --git a/dark/gradient.css b/dark/gradient.css
new file mode 100644
index 0000000000..d4dff993df
--- /dev/null
+++ b/dark/gradient.css
@@ -0,0 +1,9 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --gradientstory: linear-gradient(-135deg, #7638fa 0%, #d300c5 17%, #ff0069 36%, #ff7a00 62.5%, #ffd600 83.5%);
+  --gradientscrim: linear-gradient(-179.9427042395855deg, #000000 0%, #00000066 47.14%, #00000000 100%);
+}
\ No newline at end of file
diff --git a/dark/opacity.css b/dark/opacity.css
index e5a40a5d85..d2fdef4e19 100644
--- a/dark/opacity.css
+++ b/dark/opacity.css
@@ -4,5 +4,5 @@
  */
 
 .theme-dark {
-  --Opacity-Opacity-Disabled: 0.5;
+  --opacitydisabled: 0.5;
 }
\ No newline at end of file
diff --git a/dark/shadow.css b/dark/shadow.css
new file mode 100644
index 0000000000..b00c26ae9a
--- /dev/null
+++ b/dark/shadow.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --shadowblue: 0px 4px 4px 0px var(--colorforegroundprimary);
+}
\ No newline at end of file
diff --git a/dark/size.css b/dark/size.css
new file mode 100644
index 0000000000..4015be23a6
--- /dev/null
+++ b/dark/size.css
@@ -0,0 +1,10 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --sizedimensionsdefault: 36px;
+  --sizedimensionssmall: 28px;
+  --sizedimensionslarge: 44px;
+}
\ No newline at end of file
diff --git a/dark/space.css b/dark/space.css
index eebd7b04e6..c6e93a2940 100644
--- a/dark/space.css
+++ b/dark/space.css
@@ -4,16 +4,16 @@
  */
 
 .theme-dark {
-  --Space-Spacing-0: 0px;
-  --Space-Spacing-2: 2px;
-  --Space-Spacing-4: 4px;
-  --Space-Spacing-8: 8px;
-  --Space-Spacing-12: 12px;
-  --Space-Spacing-16: 16px;
-  --Space-Spacing-20: 20px;
-  --Space-Spacing-24: 24px;
-  --Space-Spacing-28: 28px;
-  --Space-Spacing-32: 32px;
-  --Space-Spacing-36: 36px;
-  --Space-Spacing-40: 40px;
+  --spacespacing0: 0px;
+  --spacespacing2: 2px;
+  --spacespacing4: 4px;
+  --spacespacing8: 8px;
+  --spacespacing12: 12px;
+  --spacespacing16: 16px;
+  --spacespacing20: 20px;
+  --spacespacing24: 24px;
+  --spacespacing28: 28px;
+  --spacespacing32: 32px;
+  --spacespacing36: 36px;
+  --spacespacing40: 40px;
 }
\ No newline at end of file
diff --git a/dark/string.css b/dark/string.css
index 39b32bb806..b80bf56930 100644
--- a/dark/string.css
+++ b/dark/string.css
@@ -4,5 +4,8 @@
  */
 
 .theme-dark {
-  --String-Font-Family: "Inter";
+  --stringpalettemagentastring: "String value";
+  --stringfontfamily: "Inter";
+  --string: "String value";
+  --stringfontfamilydefault: "Inter";
 }
\ No newline at end of file
diff --git a/dark/typography.css b/dark/typography.css
index cbcd9b2eb5..be94f8272f 100644
--- a/dark/typography.css
+++ b/dark/typography.css
@@ -4,20 +4,16 @@
  */
 
 .theme-dark {
-  --Typography-H1: 700 57px/64px "Roboto";
-  --Typography-H2: 700 43px/50px "Roboto";
-  --Typography-H3: 700 32px/40px "Roboto";
-  --Typography-H4: 700 24px/32px "Roboto";
-  --Typography-H5: 700 21px/29px "Roboto";
-  --Typography-Large-Lead: 400 24px/32px "Roboto";
-  --Typography-Medium-Lead: 400 21px/29px "Roboto";
-  --Typography-Button-Label: 400 21px/29px "Roboto";
-  --Typography-Paragraph: 400 18px/26px "Roboto";
-  --Typography-Small-Paragraph: 400 16px/24px "Roboto";
-  --Typography-Tiny-Paragraph: 400 12px/24px "Roboto";
-  --Typography-Sale: 700 24px/34px "Roboto";
-  /* typewriter font test */
-  --Typography-Impact-Label: 400 13px "Impact Label";
-  /* importing test */
-  --Typography-Poppins: 400 13px "Poppins";
+  --typographyh1: 700 57px/64px "Roboto";
+  --typographyh2: 700 43px/50px "Roboto";
+  --typographyh3: 700 32px/40px "Roboto";
+  --typographyh4: 700 24px/32px "Roboto";
+  --typographyh5: 700 21px/29px "Roboto";
+  --typographylargelead: 400 24px/32px "Roboto";
+  --typographymediumlead: 400 21px/29px "Roboto";
+  --typographybuttonlabel: 400 21px/29px "Roboto";
+  --typographyparagraph: 400 18px/26px "Roboto";
+  --typographysmallparagraph: 400 16px/24px "Roboto";
+  --typographytinyparagraph: 400 12px/24px "Roboto";
+  --typographysale: 700 24px/34px "Roboto";
 }
\ No newline at end of file
diff --git a/dark/z-index.css b/dark/z-index.css
new file mode 100644
index 0000000000..2be7ebe703
--- /dev/null
+++ b/dark/z-index.css
@@ -0,0 +1,8 @@
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+.theme-dark {
+  --zindexzindexbase: 100;
+}
\ No newline at end of file