diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..84f01be72c
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+# Generated by `npm run tokens` from @octopusdeploy/design-system-tokens.
+# Excluded so prettier and the generator don't rewrite each other on every dev run.
+public/docs/css/design-tokens.css
diff --git a/package.json b/package.json
index 7fb50e08dc..e5f8700d7f 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,16 @@
         "pnpm": ">=9.10.0"
     },
     "scripts": {
-        "dev": "npm-run-all --parallel dev:img dev:dictionary dev:astro dev:watch",
+        "dev": "npm-run-all dev:tokens --parallel dev:img dev:dictionary dev:astro dev:watch",
         "dev:dictionary": "node ./dictionary-sorter.mjs",
         "dev:img": "node ./src/themes/octopus/utilities/img.mjs",
+        "dev:tokens": "npm run tokens",
         "dev:astro": "astro dev --mode staging",
+        "tokens": "node ./src/themes/octopus/utilities/design-tokens.mjs",
         "dev:watch": "onchange 'src/**/*.{js,mjs,ts,astro,css}' 'public/docs/js/**/*.js' 'public/docs/css/**/*.css' -- prettier --write --plugin=prettier-plugin-astro {{changed}}",
         "astro": "astro",
         "snapshot": "node --env-file=.env.production ./scripts/snapshot-shared.mjs",
+        "prebuild": "npm run tokens",
         "build": "astro build",
         "crawl": "linkinator ./dist --skip \"^(?!http://localhost)\" --recurse  --verbosity error",
         "format": "prettier --write --plugin=prettier-plugin-astro 'src/**/*.{js,mjs,ts,astro,css}' 'public/docs/js/**/*.js' 'public/docs/css/**/*.css'",
@@ -30,6 +33,7 @@
     "dependencies": {
         "@astrojs/markdown-remark": "7.2.1",
         "@astrojs/mdx": "^7.0.3",
+        "@octopusdeploy/design-system-tokens": "^2026.3.7935",
         "astro": "^7.0.9",
         "astro-accelerator-utils": "^0.3.84",
         "glob": "^13.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d90cff0c41..8bd7cb0ffc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
       '@astrojs/mdx':
         specifier: ^7.0.3
         version: 7.0.3(@astrojs/markdown-satteri@0.3.4)(astro@7.0.9(@astrojs/markdown-remark@7.2.1)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.10.1)(rollup@4.60.3)(yaml@2.8.4))
+      '@octopusdeploy/design-system-tokens':
+        specifier: ^2026.3.7935
+        version: 2026.3.7935
       astro:
         specifier: ^7.0.9
         version: 7.0.9(@astrojs/markdown-remark@7.2.1)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.10.1)(rollup@4.60.3)(yaml@2.8.4)
@@ -814,6 +817,9 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@octopusdeploy/design-system-tokens@2026.3.7935':
+    resolution: {integrity: sha512-JAn1i5rYWyZdKSLBccVz/gwzJAVsi7PsG6/YR73kHLlx+tmNqYHT3l0SkGDwzblW1Fu4Qm2rQuEhsjlIEWv/SQ==}
+
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
@@ -3929,6 +3935,8 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
+  '@octopusdeploy/design-system-tokens@2026.3.7935': {}
+
   '@oslojs/encoding@1.1.0': {}
 
   '@oxc-project/types@0.139.0': {}
diff --git a/public/docs/css/design-tokens.css b/public/docs/css/design-tokens.css
new file mode 100644
index 0000000000..e511361610
--- /dev/null
+++ b/public/docs/css/design-tokens.css
@@ -0,0 +1,997 @@
+/*
+ * GENERATED FILE - DO NOT EDIT.
+ *
+ * Source: @octopusdeploy/design-system-tokens@2026.3.7935
+ * Regenerate with: npm run tokens
+ *
+ * Site-specific variables live in vars.css, which is loaded after this
+ * file and therefore wins on any name it also defines.
+ */
+
+:root {
+  /* Typography composites and font families (textTheme) */
+  --fontFamilyCode: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace;
+  --fontFamilyDefault: BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --textBodyBoldLarge: 600 1rem/1.5rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyBoldMedium: 600 0.875rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyBoldSmall: 600 0.8125rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyBoldXSmall: 600 0.75rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyRegularLarge: 400 1rem/1.5rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyRegularMedium: 400 0.875rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyRegularSmall: 400 0.8125rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textBodyRegularXSmall: 400 0.75rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textCodeBoldLarge: 600 1rem/1.5rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeBoldMedium: 600 0.875rem/1.25rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeBoldSmall: 600 0.8125rem/1.25rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeBoldXSmall: 600 0.75rem/1.25rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeRegularLarge: 400 1rem/1.5rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeRegularMedium: 400 0.875rem/1.25rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeRegularSmall: 400 0.8125rem/1.25rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textCodeRegularXSmall: 400 0.75rem/1.25rem var(--fontFamilyCode, 'ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace');
+  --textHeading2xLarge: 600 3rem/3.5rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textHeadingLarge: 600 1.5rem/2rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textHeadingMedium: 600 1.25rem/1.75rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textHeadingSmall: 600 1rem/1.5rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textHeadingXLarge: 600 2rem/2.75rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+  --textHeadingXSmall: 600 0.75rem/1.25rem var(--fontFamilyDefault, 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol');
+
+  /* Theme-invariant scales */
+  --space-0: 0;
+  --space-1: 0.063rem;
+  --space-2: 0.125rem;
+  --space-4: 0.25rem;
+  --space-6: 0.375rem;
+  --space-8: 0.5rem;
+  --space-12: 0.75rem;
+  --space-16: 1rem;
+  --space-24: 1.5rem;
+  --space-32: 2rem;
+  --space-40: 2.5rem;
+  --space-48: 3rem;
+  --space-56: 3.5rem;
+  --space-64: 4rem;
+  --space-72: 4.5rem;
+  --space-80: 5rem;
+  --borderRadius-circle: 9999px;
+  --borderRadius-extraLarge: 16px;
+  --borderRadius-extraSmall: 2px;
+  --borderRadius-large: 8px;
+  --borderRadius-medium: 6px;
+  --borderRadius-none: 0px;
+  --borderRadius-small: 4px;
+  --borderWidth-1: 1px;
+  --borderWidth-2: 2px;
+  --borderWidth-3: 3px;
+  --borderWidth-4: 4px;
+  --borderWidth-none: 0px;
+  --fontSize-2xLarge: 2rem;
+  --fontSize-3xLarge: 3rem;
+  --fontSize-base: 1rem;
+  --fontSize-large: 1.25rem;
+  --fontSize-medium: 0.875rem;
+  --fontSize-small: 0.8125rem;
+  --fontSize-xLarge: 1.5rem;
+  --fontSize-xSmall: 0.75rem;
+  --fontWeight-400: 400;
+  --fontWeight-500: 500;
+  --fontWeight-600: 600;
+  --fontWeight-700: 700;
+  --lineHeight-2xLarge: 2.75rem;
+  --lineHeight-3xLarge: 3.5rem;
+  --lineHeight-large: 2rem;
+  --lineHeight-medium: 1.75rem;
+  --lineHeight-small: 1.5rem;
+  --lineHeight-xLarge: 2.5rem;
+  --lineHeight-xSmall: 1.25rem;
+  --letterSpacing-none: 0;
+  --letterSpacing-tight: -0.006rem;
+  --letterSpacing-wide: 0.006rem;
+  --letterSpacing-wider: 0.013rem;
+
+  /* Colors and shadows (lightTheme) */
+  --colorAvatarBackgroundImageDefault: #DAE2E9;
+  --colorAvatarBackgroundImageHover: #A9BBCB;
+  --colorAvatarBackgroundProjectDefault: #557999;
+  --colorAvatarBackgroundProjectHover: #3E607D;
+  --colorAvatarBackgroundSpaceDefault: #1A77CA;
+  --colorAvatarBackgroundSpaceHover: #155EA0;
+  --colorAvatarBackgroundTemplateDefault: #F4F6F8;
+  --colorAvatarBackgroundTemplateHover: #DAE2E9;
+  --colorAvatarBackgroundTenantDefault: #FFFFFF;
+  --colorAvatarBackgroundTenantHover: #F4F6F8;
+  --colorAvatarBackgroundUserDefault: #1A77CA;
+  --colorAvatarBackgroundUserHover: #155EA0;
+  --colorAvatarIconPrimary: #FFFFFF;
+  --colorAvatarIconSecondary: #1F303F;
+  --colorAvatarStackBackgroundHover: #CDE4F7;
+  --colorAvatarStackBorder: #FFFFFF;
+  --colorAvatarText: #FFFFFF;
+  --colorBackgroundBold: #FFFFFF;
+  --colorBackgroundDanger: #FFF3F3;
+  --colorBackgroundDisabled: #DEE1E6;
+  --colorBackgroundFeature: #F8F5FD;
+  --colorBackgroundInfo: #F2F8FD;
+  --colorBackgroundInverseNeutral: #515D70;
+  --colorBackgroundInversePrimary: #16191F;
+  --colorBackgroundInverseSecondary: #3D4653;
+  --colorBackgroundInverseSuccess: #00874D;
+  --colorBackgroundPrimaryDefault: #FFFFFF;
+  --colorBackgroundPrimaryHover: #F5F6F8;
+  --colorBackgroundPrimaryPressed: #DEE1E6;
+  --colorBackgroundPrimaryTransparent: rgb(from #FFFFFF r g b / 0.72);
+  --colorBackgroundQuartaryDefault: #FFFFFF;
+  --colorBackgroundQuartaryHover: #F5F6F8;
+  --colorBackgroundQuartaryPressed: #DEE1E6;
+  --colorBackgroundSecondaryDefault: #F5F6F8;
+  --colorBackgroundSecondaryHover: #FFFFFF;
+  --colorBackgroundSecondaryPressed: #B2B9C5;
+  --colorBackgroundSecondaryTransparent: rgb(from #F5F6F8 r g b / 0.72);
+  --colorBackgroundSelected: #1A77CA;
+  --colorBackgroundSuccess: #EEFAF5;
+  --colorBackgroundTertiary: #DEE1E6;
+  --colorBackgroundWarning: #FFF7D9;
+  --colorBadgeBackgroundDanger: #D63D3D;
+  --colorBadgeBackgroundFeature: #E7DEF8;
+  --colorBadgeBackgroundInfo: #1A77CA;
+  --colorBadgeBackgroundInverseNeutral: #515D70;
+  --colorBadgeBackgroundNeutral: #DEE1E6;
+  --colorBadgeBackgroundSuccess: #00874D;
+  --colorBadgeBackgroundUpsell: #E7DEF8;
+  --colorBadgeBackgroundWarning: #927002;
+  --colorBadgeBorderDanger: #FFD8D8;
+  --colorBadgeBorderSuccess: #B8E7D3;
+  --colorBadgeIconFeature: #572B97;
+  --colorBadgeIconPrimary: #FFFFFF;
+  --colorBadgeIconSecondary: #000000;
+  --colorBadgeIconUpsell: #572B97;
+  --colorBadgeTextDanger: #AA3030;
+  --colorBadgeTextFeature: #572B97;
+  --colorBadgeTextPrimary: #FFFFFF;
+  --colorBadgeTextSecondary: #000000;
+  --colorBadgeTextSuccess: #006A3D;
+  --colorBadgeTextUpsell: #572B97;
+  --colorBorderBold: #68778D;
+  --colorBorderDanger: #D63D3D;
+  --colorBorderDefault: #515D70;
+  --colorBorderDisabled: #B2B9C5;
+  --colorBorderFeature: #895ED3;
+  --colorBorderInfo: #1A77CA;
+  --colorBorderInversePrimary: #3D4653;
+  --colorBorderInverseSecondary: #3D4653;
+  --colorBorderLinkDefault: #1A77CA;
+  --colorBorderLinkHover: #155EA0;
+  --colorBorderPrimary: #DEE1E6;
+  --colorBorderSecondary: #F5F6F8;
+  --colorBorderSelected: #1A77CA;
+  --colorBorderSuccess: #00874D;
+  --colorBorderTertiary: #B2B9C5;
+  --colorBorderWarning: #B98F02;
+  --colorButtonBackgroundDestructiveDefault: #D63D3D;
+  --colorButtonBackgroundDestructiveHover: #AA3030;
+  --colorButtonBackgroundDestructivePressed: #802424;
+  --colorButtonBackgroundDisabled: rgb(from #DEE1E6 r g b / 0.56);
+  --colorButtonBackgroundLoudDefault: #1A77CA;
+  --colorButtonBackgroundLoudHover: #155EA0;
+  --colorButtonBackgroundLoudPressed: #0F4778;
+  --colorButtonBackgroundNeutralDefault: #F5F6F8;
+  --colorButtonBackgroundNeutralHover: #DEE1E6;
+  --colorButtonBackgroundNeutralPressed: #B2B9C5;
+  --colorButtonBackgroundPrimaryDefault: #00874D;
+  --colorButtonBackgroundPrimaryHover: #006A3D;
+  --colorButtonBackgroundPrimaryPressed: #00502E;
+  --colorButtonBackgroundQuietDefault: rgb(from #1A77CA r g b / 0);
+  --colorButtonBackgroundQuietHover: rgb(from #1A77CA r g b / 0.08);
+  --colorButtonBackgroundQuietPressed: rgb(from #1A77CA r g b / 0.24);
+  --colorButtonBackgroundSecondaryDefault: rgb(from #1A77CA r g b / 0);
+  --colorButtonBackgroundSecondaryHover: rgb(from #1A77CA r g b / 0.08);
+  --colorButtonBackgroundSecondaryPressed: rgb(from #1A77CA r g b / 0.24);
+  --colorButtonBackgroundTertiaryDefault: rgb(from #1A77CA r g b / 0.06);
+  --colorButtonBackgroundTertiaryHover: rgb(from #1A77CA r g b / 0.16);
+  --colorButtonBackgroundTertiaryPressed: rgb(from #1A77CA r g b / 0.24);
+  --colorButtonBorderDisabled: #DEE1E6;
+  --colorButtonBorderSecondary: #449BE1;
+  --colorButtonIconDestructive: #FFFFFF;
+  --colorButtonIconDisabled: #B2B9C5;
+  --colorButtonIconLoud: #FFFFFF;
+  --colorButtonIconNeutral: #282F38;
+  --colorButtonIconPrimary: #FFFFFF;
+  --colorButtonIconQuiet: #1A77CA;
+  --colorButtonIconSecondary: #1A77CA;
+  --colorButtonIconTertiary: #1A77CA;
+  --colorButtonTextDestructive: #FFFFFF;
+  --colorButtonTextDisabled: #8A96A7;
+  --colorButtonTextLoud: #FFFFFF;
+  --colorButtonTextNeutral: #282F38;
+  --colorButtonTextPrimary: #FFFFFF;
+  --colorButtonTextQuiet: #1A77CA;
+  --colorButtonTextSecondary: #1A77CA;
+  --colorButtonTextTertiary: #1A77CA;
+  --colorCalloutBackgroundDangerDefault: rgb(from #FFD8D8 r g b / 0.5);
+  --colorCalloutBackgroundDangerHover: rgb(from #FF9F9F r g b / 0.4);
+  --colorCalloutBackgroundDangerPressed: rgb(from #FF9F9F r g b / 0.64);
+  --colorCalloutBackgroundFeatureDefault: rgb(from #E7DEF8 r g b / 0.5);
+  --colorCalloutBackgroundFeatureHover: rgb(from #C5AEEE r g b / 0.4);
+  --colorCalloutBackgroundFeaturePressed: rgb(from #C5AEEE r g b / 0.64);
+  --colorCalloutBackgroundInfoDefault: rgb(from #CDE4F7 r g b / 0.5);
+  --colorCalloutBackgroundInfoHover: rgb(from #87BFEC r g b / 0.4);
+  --colorCalloutBackgroundInfoPressed: rgb(from #87BFEC r g b / 0.64);
+  --colorCalloutBackgroundSuccessDefault: rgb(from #B8E7D3 r g b / 0.45);
+  --colorCalloutBackgroundSuccessHover: rgb(from #5ECD9E r g b / 0.4);
+  --colorCalloutBackgroundSuccessPressed: rgb(from #5ECD9E r g b / 0.64);
+  --colorCalloutBackgroundUpsell: linear-gradient(95deg, rgb(from #CDE4F7 r g b / 0.5) 0%, rgb(from #E7DEF8 r g b / 0.5) 100%);
+  --colorCalloutBackgroundWarningDefault: rgb(from #FFDF62 r g b / 0.32);
+  --colorCalloutBackgroundWarningHover: rgb(from #FFDF62 r g b / 0.4);
+  --colorCalloutBackgroundWarningPressed: rgb(from #FFDF62 r g b / 0.64);
+  --colorCalloutBorderDanger: #D63D3D;
+  --colorCalloutBorderDefault: #68778D;
+  --colorCalloutBorderFeature: #895ED3;
+  --colorCalloutBorderInfo: #1A77CA;
+  --colorCalloutBorderSuccess: #00874D;
+  --colorCalloutBorderUpsell: linear-gradient(180deg, #87BFEC 0%, #C5AEEE 100%);
+  --colorCalloutBorderWarning: #B98F02;
+  --colorCalloutCodeBackground: #557999;
+  --colorCalloutIconDanger: #AA3030;
+  --colorCalloutIconFeature: #7043B7;
+  --colorCalloutIconInfo: #155EA0;
+  --colorCalloutIconSuccess: #006A3D;
+  --colorCalloutIconWarning: #745801;
+  --colorCalloutTextBody: #454545;
+  --colorCalloutTextDanger: #571818;
+  --colorCalloutTextFeature: #3B1D66;
+  --colorCalloutTextInfo: #093051;
+  --colorCalloutTextSuccess: #00361F;
+  --colorCalloutTextWarning: #3B2C00;
+  --colorCardBackgroundPrimaryDefault: #FFFFFF;
+  --colorCardBackgroundSecondaryDefault: rgb(from #FFFFFF r g b / 0);
+  --colorCardBackgroundSecondaryHover: rgb(from #F5F6F8 r g b / 0.64);
+  --colorCardChartBackgroundDefault: rgb(from #F4F6F8 r g b / 0.3);
+  --colorCardChartBackgroundHover: rgb(from #F4F6F8 r g b / 0.5);
+  --colorCarouselBackgroundPrimary: #16191F;
+  --colorCarouselIconDefault: rgb(from #B2B9C5 r g b / 0.32);
+  --colorCarouselIconHover: rgb(from #B2B9C5 r g b / 0.72);
+  --colorCarouselIconSelected: #449BE1;
+  --colorCarouselTextPrimary: #FFFFFF;
+  --colorCategorySelectListBackgroundActive: rgb(from #1A77CA r g b / 0.06);
+  --colorCategorySelectListBackgroundDefault: #F5F6F8;
+  --colorCategorySelectListBackgroundHover: #1A77CA;
+  --colorCategorySelectListIconActive: #1A77CA;
+  --colorCategorySelectListIconDefault: #515D70;
+  --colorCategorySelectListIconHover: #FFFFFF;
+  --colorCategorySelectListTextActive: #1A77CA;
+  --colorCategorySelectListTextHover: #FFFFFF;
+  --colorChipBackgroundDanger: #D63D3D;
+  --colorChipBackgroundPrimary: #DEE1E6;
+  --colorChipBackgroundSecondary: #B2B9C5;
+  --colorChipBackgroundSuccessful: #00874D;
+  --colorChipBorderPrimary: #B2B9C5;
+  --colorChipFilledBackgroundDanger: #FFD8D8;
+  --colorChipFilledBackgroundInfo: #CDE4F7;
+  --colorChipFilledBackgroundPrimary: #DAE2E9;
+  --colorChipFilledBackgroundSecondary: #E7DEF8;
+  --colorChipFilledBackgroundSuccess: #B8E7D3;
+  --colorChipFilledBackgroundWarning: #FFDF62;
+  --colorChipFilledIconDanger: #AA3030;
+  --colorChipFilledIconInfo: #155EA0;
+  --colorChipFilledIconPrimary: #3E607D;
+  --colorChipFilledIconSecondary: #7043B7;
+  --colorChipFilledIconSuccess: #006A3D;
+  --colorChipFilledIconWarning: #745801;
+  --colorChipFilledTextDanger: #AA3030;
+  --colorChipFilledTextInfo: #155EA0;
+  --colorChipFilledTextPrimary: #3E607D;
+  --colorChipFilledTextSecondary: #7043B7;
+  --colorChipFilledTextSuccess: #006A3D;
+  --colorChipFilledTextWarning: #745801;
+  --colorChipIconInverse: #FFFFFF;
+  --colorChipIconPrimary: #282F38;
+  --colorChipIconWarning: #C45317;
+  --colorChipOutlinedBorderDanger: #D63D3D;
+  --colorChipOutlinedBorderInfo: #1A77CA;
+  --colorChipOutlinedBorderPrimary: #557999;
+  --colorChipOutlinedBorderSecondary: #895ED3;
+  --colorChipOutlinedBorderSuccess: #00874D;
+  --colorChipOutlinedBorderWarning: #927002;
+  --colorChipOutlinedIconDanger: #D63D3D;
+  --colorChipOutlinedIconInfo: #1A77CA;
+  --colorChipOutlinedIconPrimary: #557999;
+  --colorChipOutlinedIconSecondary: #895ED3;
+  --colorChipOutlinedIconSuccess: #00874D;
+  --colorChipOutlinedIconWarning: #927002;
+  --colorChipOutlinedTextDanger: #D63D3D;
+  --colorChipOutlinedTextInfo: #1A77CA;
+  --colorChipOutlinedTextPrimary: #557999;
+  --colorChipOutlinedTextSecondary: #895ED3;
+  --colorChipOutlinedTextSuccess: #00874D;
+  --colorChipOutlinedTextWarning: #927002;
+  --colorChipTextInverse: #FFFFFF;
+  --colorChipTextPrimary: #282F38;
+  --colorCodeEditorBackground: #F5F6F8;
+  --colorCodeEditorCodeActivelineBackground: rgb(from #68778D r g b / 0.15);
+  --colorCodeEditorCodeAtomNumberKeywordVariableAttributeQuoteColor: #093051;
+  --colorCodeEditorCodeBracketCommentColor: #8A96A7;
+  --colorCodeEditorCodeCursorBorderLeft: #1F303F;
+  --colorCodeEditorCodeCursorBorderRight: #A9BBCB;
+  --colorCodeEditorCodeDefTagBuiltinQualifierHeaderEmColor: #AA3030;
+  --colorCodeEditorCodeErrorInvalidcharColor: #802424;
+  --colorCodeEditorCodeFatCursorBackground: #A9BBCB;
+  --colorCodeEditorCodeHint: #282F38;
+  --colorCodeEditorCodeHintActiveBackground: #DEE1E6;
+  --colorCodeEditorCodeHintsBackground: #DEE1E6;
+  --colorCodeEditorCodeIndentationMarkerActiveColor: #B2B9C5;
+  --colorCodeEditorCodeIndentationMarkerColor: #DEE1E6;
+  --colorCodeEditorCodeLinenumberColor: #8A96A7;
+  --colorCodeEditorCodeMatchingbracketColor: #16191F;
+  --colorCodeEditorCodePositiveColor: #00361F;
+  --colorCodeEditorCodePropertyColor: #59170D;
+  --colorCodeEditorCodePunctuationUnitNegativeColor: #AA3030;
+  --colorCodeEditorCodeSelectedBackground: #DEE1E6;
+  --colorCodeEditorCodeStringOperatorColor: #00502E;
+  --colorCodeEditorCodeSyntaxAtom: #A13C14;
+  --colorCodeEditorCodeSyntaxAttributeName: #155EA0;
+  --colorCodeEditorCodeSyntaxBool: #A13C14;
+  --colorCodeEditorCodeSyntaxBracket: #515D70;
+  --colorCodeEditorCodeSyntaxClassName: #7043B7;
+  --colorCodeEditorCodeSyntaxComment: #515D70;
+  --colorCodeEditorCodeSyntaxDeleted: #AA3030;
+  --colorCodeEditorCodeSyntaxDeletedBackground: #FFF3F3;
+  --colorCodeEditorCodeSyntaxEmphasis: #2E2E2E;
+  --colorCodeEditorCodeSyntaxEscape: #093051;
+  --colorCodeEditorCodeSyntaxHeading: #2E2E2E;
+  --colorCodeEditorCodeSyntaxInvalid: #AA3030;
+  --colorCodeEditorCodeSyntaxKeyword: #AA3030;
+  --colorCodeEditorCodeSyntaxLink: #093051;
+  --colorCodeEditorCodeSyntaxMeta: #093051;
+  --colorCodeEditorCodeSyntaxName: #006A3D;
+  --colorCodeEditorCodeSyntaxNumber: #155EA0;
+  --colorCodeEditorCodeSyntaxOperator: #155EA0;
+  --colorCodeEditorCodeSyntaxPropertyName: #7043B7;
+  --colorCodeEditorCodeSyntaxQuote: #006A3D;
+  --colorCodeEditorCodeSyntaxRegexp: #093051;
+  --colorCodeEditorCodeSyntaxSpecialVariableName: #A13C14;
+  --colorCodeEditorCodeSyntaxString: #093051;
+  --colorCodeEditorCodeSyntaxStrong: #2E2E2E;
+  --colorCodeEditorCodeSyntaxTagName: #006A3D;
+  --colorCodeEditorCodeSyntaxTypeName: #AA3030;
+  --colorCodeEditorCodeSyntaxTypeOperator: #AA3030;
+  --colorCodeEditorCodeSyntaxUrl: #093051;
+  --colorCodeEditorCodeSyntaxVariableName: #155EA0;
+  --colorCodeEditorCodeVariable2Variable3String2UrlColor: #155EA0;
+  --colorCodeEditorCodeVariableColor: #7043B7;
+  --colorCodeEditorForeground: #282F38;
+  --colorCodeEditorSelection: #DEE1E6;
+  --colorCodeEditorSelectionMatch: #DEE1E6;
+  --colorCodeEditorTextDefault: #282F38;
+  --colorCodeEditorTextGutter: #8A96A7;
+  --colorCodeEditorTextHighlight: #59170D;
+  --colorCodeEditorTextHintHighlight: #00874D;
+  --colorCodeEditorToolbarBackground: #DEE1E6;
+  --colorCodeEditorToolbarButtonHover: #B2B9C5;
+  --colorCodeReviewBackgroundDangerDefault: #FFD8D8;
+  --colorCodeReviewBackgroundDangerMuted: #FF9F9F;
+  --colorCodeReviewBackgroundPrimaryDefault: #F5F6F8;
+  --colorCodeReviewBackgroundPrimaryMuted: #FFFFFF;
+  --colorCodeReviewBackgroundSuccessDefault: #B8E7D3;
+  --colorCodeReviewBackgroundSuccessMuted: #5ECD9E;
+  --colorCodeReviewTextDanger: #802424;
+  --colorCodeReviewTextPrimary: #282F38;
+  --colorCodeReviewTextSuccess: #00502E;
+  --colorDeprecatedBackgroundWarning: #FFF5ED;
+  --colorDeprecatedBorderWarning: #C45317;
+  --colorDeprecatedIconWarning: #EA7325;
+  --colorDeprecatedTextWarning: #C45317;
+  --colorDialogBackgroundPrimary: #FFFFFF;
+  --colorDialogBackgroundSecondaryDefault: #F5F6F8;
+  --colorDialogBackgroundSecondaryUpsell: linear-gradient(95deg, rgb(from #1A77CA r g b / 0.6) 0%, rgb(from #895ED3 r g b / 0.6) 100%);
+  --colorDialogHelpPanelText: #FFFFFF;
+  --colorFormLegendBackgroundHover: #CDE4F7;
+  --colorFormLegendBackgroundRest: #F2F8FD;
+  --colorHealthStatusBackgroundExecuting: #1A77CA;
+  --colorHealthStatusBackgroundFailure: #D63D3D;
+  --colorHealthStatusBackgroundNeutral: #DEE1E6;
+  --colorHealthStatusBackgroundSuccess: #00874D;
+  --colorHealthStatusBackgroundWarning: #927002;
+  --colorHealthStatusIconDefault: #FFFFFF;
+  --colorHealthStatusIconInverse: #3D4653;
+  --colorIconDanger: #D63D3D;
+  --colorIconDisabled: #B2B9C5;
+  --colorIconFeature: #A683E5;
+  --colorIconInfo: #1A77CA;
+  --colorIconInversePrimary: #FFFFFF;
+  --colorIconInverseSecondary: #DEE1E6;
+  --colorIconLinkDefault: #1A77CA;
+  --colorIconLinkHover: #155EA0;
+  --colorIconPrimary: #282F38;
+  --colorIconSecondary: #515D70;
+  --colorIconSelected: #155EA0;
+  --colorIconSuccess: #00874D;
+  --colorIconTertiary: #8A96A7;
+  --colorIconWarning: #B98F02;
+  --colorLifecycleBackgroundPrimary: #8A96A7;
+  --colorLifecycleBorderDefault: #515D70;
+  --colorLifecycleIconPrimary: #FFFFFF;
+  --colorLifecycleTextPrimary: #282F38;
+  --colorMenuListBackgroundActive: #DEE1E6;
+  --colorMenuListBackgroundDefault: #FFFFFF;
+  --colorMenuListBackgroundHover: #F5F6F8;
+  --colorMenuListBorderPrimary: #DEE1E6;
+  --colorMenuListIconPrimary: #515D70;
+  --colorMenuListTextHighlight: #1A77CA;
+  --colorMenuListTextPrimary: #282F38;
+  --colorMenuListTextSecondary: #515D70;
+  --colorNavButtonBackgroundActive: #1A77CA;
+  --colorNavButtonBackgroundDefault: rgb(from #1A77CA r g b / 0);
+  --colorNavButtonBackgroundHover: #1A77CA;
+  --colorNavButtonBackgroundPressed: #155EA0;
+  --colorNavButtonIconActive: #FFFFFF;
+  --colorNavButtonIconDefault: #282F38;
+  --colorNavButtonIconHover: #FFFFFF;
+  --colorNavButtonIconPressed: #FFFFFF;
+  --colorNavListBackgroundActive: #F5F6F8;
+  --colorNavListBackgroundDefault: rgb(from #1A77CA r g b / 0);
+  --colorNavListBackgroundHover: #1A77CA;
+  --colorNavListIconActive: #1A77CA;
+  --colorNavListIconDefault: #282F38;
+  --colorNavListTextActive: #1A77CA;
+  --colorNavListTextDefault: #282F38;
+  --colorNavListTextHover: #FFFFFF;
+  --colorNavTabBackgroundActive: rgb(from #FFFFFF r g b / 0);
+  --colorNavTabBackgroundHover: #FFFFFF;
+  --colorNavTabBorderPrimary: #449BE1;
+  --colorNavTabIconActive: #1A77CA;
+  --colorNavTabIconDefault: #093051;
+  --colorNavTabIconHover: #1A77CA;
+  --colorNavTabTextActive: #1A77CA;
+  --colorNavTabTextDefault: #093051;
+  --colorNavTabTextHover: #1A77CA;
+  --colorOverlayPrimary: rgb(from #111A23 r g b / 0.56);
+  --colorOverlaySecondary: rgb(from #000000 r g b / 0.31);
+  --colorPaginationBackgroundActive: #1A77CA;
+  --colorPaginationBackgroundDefault: #FFFFFF;
+  --colorPaginationBackgroundDisabled: #FFFFFF;
+  --colorPaginationBackgroundHover: #8A96A7;
+  --colorPaginationIconActive: #FFFFFF;
+  --colorPaginationIconDefault: #282F38;
+  --colorPaginationIconDisabled: #959595;
+  --colorPaginationIconHover: #FFFFFF;
+  --colorPaginationTextActive: #FFFFFF;
+  --colorPaginationTextDefault: #282F38;
+  --colorPaginationTextDisabled: #959595;
+  --colorPaginationTextHover: #FFFFFF;
+  --colorParallelChipBackground: #1A77CA;
+  --colorParallelChipIcon: #FFFFFF;
+  --colorPopoverBackgroundPrimary: #FFFFFF;
+  --colorPopoverBackgroundSecondary: #F5F6F8;
+  --colorPopoverInfoCircleBackgroundDefault: #CDE4F7;
+  --colorPopoverInfoCircleBackgroundHover: #1A77CA;
+  --colorPopoverInfoCircleTextDefault: #155EA0;
+  --colorPopoverInfoCircleTextHover: #FFFFFF;
+  --colorPortalCardBackground: #FFFFFF;
+  --colorPortalCardContentDisabled: #757575;
+  --colorPortalCardContentText: #5C5C5C;
+  --colorPortalChipBackground: #E1E1E1;
+  --colorPortalLinkTextHover: #155EA0;
+  --colorPortalLogoBackground: transparent;
+  --colorPortalPopoverBackground: #FFFFFF;
+  --colorProcessContainerBackgroundSelected: #F2F8FD;
+  --colorProcessContainerBorderSelected: #449BE1;
+  --colorProcessStepBackgroundErrorPrimary: #FFF3F3;
+  --colorProcessStepBackgroundErrorSecondary: #FF9F9F;
+  --colorProcessStepBackgroundErrorSelected: #FFD8D8;
+  --colorProcessStepBackgroundHoverError: #FFD8D8;
+  --colorProcessStepBackgroundHoverPrimary: #F2F8FD;
+  --colorProcessStepBackgroundHoverSecondary: #CDE4F7;
+  --colorProcessStepBackgroundHoverTertiary: #F7F7F7;
+  --colorProcessStepBackgroundHoverWarning: #FFDABF;
+  --colorProcessStepBackgroundPrimaryDefault: #FFFFFF;
+  --colorProcessStepBackgroundPrimarySelected: #F2F8FD;
+  --colorProcessStepBackgroundSecondaryDefault: #F2F8FD;
+  --colorProcessStepBackgroundWarningDefault: #FFF5ED;
+  --colorProcessStepBackgroundWarningSecondary: #FFA461;
+  --colorProcessStepBackgroundWarningSelected: #FFDABF;
+  --colorProcessStepBorderDefault: #E1E1E1;
+  --colorProcessStepBorderDisabled: #E1E1E1;
+  --colorProcessStepBorderErrorDefault: #FF9F9F;
+  --colorProcessStepBorderErrorHover: #FF5D5D;
+  --colorProcessStepBorderErrorSelected: #D63D3D;
+  --colorProcessStepBorderHover: #87BFEC;
+  --colorProcessStepBorderSelected: #449BE1;
+  --colorProcessStepBorderWarningDefault: #FFA461;
+  --colorProcessStepBorderWarningHover: #EA7325;
+  --colorProcessStepBorderWarningSelected: #C45317;
+  --colorProcessStepIconDefault: #1A77CA;
+  --colorProcessStepIconErrorPrimary: #D63D3D;
+  --colorProcessStepIconErrorSecondary: #AA3030;
+  --colorProcessStepIconWarningPrimary: #EA7325;
+  --colorProcessStepIconWarningSecondary: #C45317;
+  --colorProcessStepTextDisabled: #757575;
+  --colorProcessWrapperBackgroundPrimary: #F2F8FD;
+  --colorProcessWrapperBackgroundSecondary: #CDE4F7;
+  --colorProgressBackgroundLinear: #CDE4F7;
+  --colorProgressBackgroundPrimary: #1A77CA;
+  --colorProgressBackgroundSecondary: #CDE4F7;
+  --colorProgressForegroundCircular: #1A77CA;
+  --colorProgressForegroundLinear: #1A77CA;
+  --colorProgressTextInfo: #1A77CA;
+  --colorScrollbarBackground: rgb(from #FFFFFF r g b / 0);
+  --colorScrollbarHandle: #959595;
+  --colorSpaceSwitcherBackgroundDefault: rgb(from #E1E1E1 r g b / 0.32);
+  --colorSpaceSwitcherBackgroundHover: #1A77CA;
+  --colorSpaceSwitcherBackgroundPressed: #1A77CA;
+  --colorSpaceSwitcherBorderPrimary: rgb(from #000000 r g b / 0.16);
+  --colorSpaceSwitcherIconDefault: #515D70;
+  --colorSpaceSwitcherTextDefault: #515D70;
+  --colorSpaceSwitcherTextHover: #FFFFFF;
+  --colorSpaceSwitcherTextPressed: #FFFFFF;
+  --colorStatusBadgeBackgroundHealthy: #00874D;
+  --colorStatusBadgeBackgroundNeutral: #DEE1E6;
+  --colorStatusBadgeBackgroundUnhealthy: #D63D3D;
+  --colorStatusBadgeBackgroundWarning: #927002;
+  --colorStatusBadgeIconDefault: #FFFFFF;
+  --colorStatusBadgeIconInverse: #3D4653;
+  --colorStatusBadgeTextInverse: #3D4653;
+  --colorStatusBadgeTextPrimary: #FFFFFF;
+  --colorSwitchBackgroundOffDefault: #B2B9C5;
+  --colorSwitchBackgroundOffDisabled: #DEE1E6;
+  --colorSwitchBackgroundOnDefault: #87BFEC;
+  --colorSwitchBackgroundOnDisabled: #CDE4F7;
+  --colorSwitchForegroundOffDefault: #F5F6F8;
+  --colorSwitchForegroundOffDisabled: #B2B9C5;
+  --colorSwitchForegroundOnDefault: #1A77CA;
+  --colorSwitchForegroundOnDisabled: #87BFEC;
+  --colorSwitchIconActive: #1A77CA;
+  --colorSwitchOverlayOff: rgb(from #B2B9C5 r g b / 0.16);
+  --colorSwitchOverlayOn: rgb(from #87BFEC r g b / 0.16);
+  --colorTableHeaderBackground: rgb(from #F4F6F8 r g b / 0.3);
+  --colorTagBackgroundDefault: #CDE4F7;
+  --colorTagBackgroundHover: #87BFEC;
+  --colorTextDanger: #D63D3D;
+  --colorTextDisabled: #B2B9C5;
+  --colorTextFeature: #895ED3;
+  --colorTextFieldBorderActive: #1A77CA;
+  --colorTextFieldBorderDanger: #D63D3D;
+  --colorTextFieldBorderDefault: #B2B9C5;
+  --colorTextFieldBorderDisabled: #B2B9C5;
+  --colorTextFieldBorderHover: #68778D;
+  --colorTextFieldIconDisabled: #B2B9C5;
+  --colorTextFieldIconPrimary: #3D4653;
+  --colorTextFieldTextDanger: #D63D3D;
+  --colorTextFieldTextDisabled: #B2B9C5;
+  --colorTextFieldTextPrimary: #282F38;
+  --colorTextFieldTextSecondary: #68778D;
+  --colorTextFieldTextSelected: #1A77CA;
+  --colorTextInfo: #1A77CA;
+  --colorTextInversePrimary: #FFFFFF;
+  --colorTextInverseSecondary: #DEE1E6;
+  --colorTextLinkDefault: #1A77CA;
+  --colorTextLinkHover: #155EA0;
+  --colorTextPrimary: #282F38;
+  --colorTextSecondary: #515D70;
+  --colorTextSelected: #1A77CA;
+  --colorTextSuccess: #00874D;
+  --colorTextTertiary: #68778D;
+  --colorTextWarning: #B98F02;
+  --shadowDrawer: -4px 0 16px 0 rgba(0,0,0,0.08), -12px 4px 24px -4px rgba(0,0,0,0.1);
+  --shadowExtraSmall: 0 1px 8px 0 rgba(0,0,0,0.02), 0 1px 2px 0 rgba(0,0,0,0.06);
+  --shadowFocused: 0 0 0 1px rgb(26,119,202), 0 0 0 5px rgba(26,119,202,0.32);
+  --shadowFocusedInset: inset 0 0 0 4px rgba(26,119,202,0.32);
+  --shadowLarge: 0 14px 32px -4px rgba(0,0,0,0.12), 0 2px 6px 0 rgba(0,0,0,0.10);
+  --shadowLayoutPrimary: -2px -2px 6px 0 rgba(0,0,0,0.06);
+  --shadowMedium: 0 6px 12px 0 rgba(0,0,0,0.1), 0 1px 4px 0 rgba(0,0,0,0.04);
+  --shadowSmall: 0 1px 1px 0 rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.06);
+}
+
+html[data-theme='dark'] {
+  --colorAvatarBackgroundImageDefault: #A9BBCB;
+  --colorAvatarBackgroundImageHover: #7C98B4;
+  --colorAvatarBackgroundProjectDefault: #3E607D;
+  --colorAvatarBackgroundProjectHover: #2E475D;
+  --colorAvatarBackgroundSpaceDefault: #155EA0;
+  --colorAvatarBackgroundSpaceHover: #0F4778;
+  --colorAvatarBackgroundTemplateDefault: #DAE2E9;
+  --colorAvatarBackgroundTemplateHover: #A9BBCB;
+  --colorAvatarBackgroundUserDefault: #155EA0;
+  --colorAvatarBackgroundUserHover: #0F4778;
+  --colorAvatarStackBackgroundHover: #093051;
+  --colorAvatarStackBorder: #111A23;
+  --colorBackgroundBold: #000000;
+  --colorBackgroundDanger: #802424;
+  --colorBackgroundDisabled: #2E475D;
+  --colorBackgroundFeature: #572B97;
+  --colorBackgroundInfo: #0F4778;
+  --colorBackgroundInverseNeutral: #8A96A7;
+  --colorBackgroundInversePrimary: #FFFFFF;
+  --colorBackgroundInverseSecondary: #A9BBCB;
+  --colorBackgroundInverseSuccess: #00AB62;
+  --colorBackgroundPrimaryDefault: #111A23;
+  --colorBackgroundPrimaryHover: #1F303F;
+  --colorBackgroundPrimaryPressed: #2E475D;
+  --colorBackgroundPrimaryTransparent: rgb(from #111A23 r g b / 0.52);
+  --colorBackgroundQuartaryDefault: #1F303F;
+  --colorBackgroundQuartaryHover: #2E475D;
+  --colorBackgroundQuartaryPressed: #111A23;
+  --colorBackgroundSecondaryDefault: #1F303F;
+  --colorBackgroundSecondaryHover: #2E475D;
+  --colorBackgroundSecondaryPressed: #111A23;
+  --colorBackgroundSecondaryTransparent: rgb(from #1F303F r g b / 0.52);
+  --colorBackgroundSelected: #449BE1;
+  --colorBackgroundSuccess: #00502E;
+  --colorBackgroundTertiary: #2E475D;
+  --colorBackgroundWarning: #745801;
+  --colorBadgeBackgroundFeature: #C5AEEE;
+  --colorBadgeBackgroundInverseNeutral: #3D4653;
+  --colorBadgeBackgroundNeutral: #8A96A7;
+  --colorBadgeBackgroundUpsell: #C5AEEE;
+  --colorBadgeBorderDanger: #AA3030;
+  --colorBadgeBorderSuccess: #006A3D;
+  --colorBadgeIconFeature: #3B1D66;
+  --colorBadgeIconUpsell: #3B1D66;
+  --colorBadgeTextDanger: #FFD8D8;
+  --colorBadgeTextFeature: #3B1D66;
+  --colorBadgeTextSuccess: #B8E7D3;
+  --colorBadgeTextUpsell: #3B1D66;
+  --colorBorderBold: #7C98B4;
+  --colorBorderDanger: #FF5D5D;
+  --colorBorderDefault: #557999;
+  --colorBorderDisabled: #3E607D;
+  --colorBorderFeature: #A683E5;
+  --colorBorderInfo: #449BE1;
+  --colorBorderInversePrimary: #DAE2E9;
+  --colorBorderInverseSecondary: #F4F6F8;
+  --colorBorderLinkDefault: #87BFEC;
+  --colorBorderLinkHover: #449BE1;
+  --colorBorderPrimary: #2E475D;
+  --colorBorderSecondary: #1F303F;
+  --colorBorderSelected: #449BE1;
+  --colorBorderSuccess: #00AB62;
+  --colorBorderTertiary: #3E607D;
+  --colorBorderWarning: #E5B203;
+  --colorButtonBackgroundDisabled: rgb(from #1F303F r g b / 0.56);
+  --colorButtonBackgroundNeutralDefault: #111A23;
+  --colorButtonBackgroundNeutralHover: #2E475D;
+  --colorButtonBackgroundNeutralPressed: #3E607D;
+  --colorButtonBackgroundQuietDefault: rgb(from #1A77CA r g b / 0.01);
+  --colorButtonBackgroundQuietHover: rgb(from #1A77CA r g b / 0.16);
+  --colorButtonBackgroundQuietPressed: rgb(from #1A77CA r g b / 0.32);
+  --colorButtonBackgroundSecondaryDefault: rgb(from #1A77CA r g b / 0.01);
+  --colorButtonBackgroundSecondaryHover: rgb(from #1A77CA r g b / 0.16);
+  --colorButtonBackgroundSecondaryPressed: rgb(from #1A77CA r g b / 0.32);
+  --colorButtonBackgroundTertiaryDefault: rgb(from #1A77CA r g b / 0.24);
+  --colorButtonBackgroundTertiaryHover: rgb(from #1A77CA r g b / 0.32);
+  --colorButtonBackgroundTertiaryPressed: rgb(from #1A77CA r g b / 0.4);
+  --colorButtonBorderDisabled: #2E475D;
+  --colorButtonBorderSecondary: #1A77CA;
+  --colorButtonIconDisabled: #3E607D;
+  --colorButtonIconNeutral: #F4F6F8;
+  --colorButtonIconQuiet: #449BE1;
+  --colorButtonIconSecondary: #449BE1;
+  --colorButtonIconTertiary: #449BE1;
+  --colorButtonTextDisabled: #3E607D;
+  --colorButtonTextNeutral: #F4F6F8;
+  --colorButtonTextQuiet: #449BE1;
+  --colorButtonTextSecondary: #449BE1;
+  --colorButtonTextTertiary: #449BE1;
+  --colorCalloutBackgroundDangerDefault: rgb(from #571818 r g b / 0.8);
+  --colorCalloutBackgroundDangerHover: rgb(from #AA3030 r g b / 0.48);
+  --colorCalloutBackgroundDangerPressed: rgb(from #AA3030 r g b / 0.32);
+  --colorCalloutBackgroundFeatureDefault: rgb(from #3B1D66 r g b / 0.75);
+  --colorCalloutBackgroundFeatureHover: rgb(from #7043B7 r g b / 0.48);
+  --colorCalloutBackgroundFeaturePressed: rgb(from #7043B7 r g b / 0.32);
+  --colorCalloutBackgroundInfoDefault: rgb(from #093051 r g b / 0.8);
+  --colorCalloutBackgroundInfoHover: rgb(from #155EA0 r g b / 0.48);
+  --colorCalloutBackgroundInfoPressed: rgb(from #155EA0 r g b / 0.32);
+  --colorCalloutBackgroundSuccessDefault: rgb(from #00361F r g b / 0.75);
+  --colorCalloutBackgroundSuccessHover: rgb(from #006A3D r g b / 0.48);
+  --colorCalloutBackgroundSuccessPressed: rgb(from #006A3D r g b / 0.32);
+  --colorCalloutBackgroundUpsell: linear-gradient(95deg, rgb(from #0F4778 r g b / 0.5) 0%, rgb(from #572B97 r g b / 0.5) 100%);
+  --colorCalloutBackgroundWarningDefault: rgb(from #584201 r g b / 0.90);
+  --colorCalloutBackgroundWarningHover: rgb(from #745801 r g b / 0.56);
+  --colorCalloutBackgroundWarningPressed: rgb(from #745801 r g b / 0.4);
+  --colorCalloutBorderDanger: #FF5D5D;
+  --colorCalloutBorderDefault: #557999;
+  --colorCalloutBorderFeature: #A683E5;
+  --colorCalloutBorderInfo: #449BE1;
+  --colorCalloutBorderSuccess: #00AB62;
+  --colorCalloutBorderUpsell: linear-gradient(180deg, #1A77CA 0%, #895ED3 100%);
+  --colorCalloutCodeBackground: #A9BBCB;
+  --colorCalloutIconDanger: #FF9F9F;
+  --colorCalloutIconFeature: #C5AEEE;
+  --colorCalloutIconInfo: #87BFEC;
+  --colorCalloutIconSuccess: #5ECD9E;
+  --colorCalloutIconWarning: #FFDF62;
+  --colorCalloutTextBody: #E1E1E1;
+  --colorCalloutTextDanger: #FFD8D8;
+  --colorCalloutTextFeature: #E7DEF8;
+  --colorCalloutTextInfo: #CDE4F7;
+  --colorCalloutTextSuccess: #B8E7D3;
+  --colorCalloutTextWarning: #FFF7D9;
+  --colorCardBackgroundPrimaryDefault: #1F303F;
+  --colorCardBackgroundSecondaryDefault: rgb(from #111A23 r g b / 0);
+  --colorCardBackgroundSecondaryHover: rgb(from #282F38 r g b / 0.64);
+  --colorCardChartBackgroundDefault: rgb(from #1F303F r g b / 0.3);
+  --colorCardChartBackgroundHover: rgb(from #1F303F r g b / 0.5);
+  --colorCarouselBackgroundPrimary: #111A23;
+  --colorCarouselIconDefault: rgb(from #A9BBCB r g b / 0.32);
+  --colorCarouselIconHover: rgb(from #A9BBCB r g b / 0.72);
+  --colorCategorySelectListBackgroundActive: rgb(from #1A77CA r g b / 0.24);
+  --colorCategorySelectListBackgroundDefault: #1F303F;
+  --colorCategorySelectListIconActive: #449BE1;
+  --colorCategorySelectListIconDefault: #B2B9C5;
+  --colorCategorySelectListTextActive: #449BE1;
+  --colorChipBackgroundPrimary: #2E475D;
+  --colorChipBackgroundSecondary: #155EA0;
+  --colorChipBorderPrimary: #515D70;
+  --colorChipFilledBackgroundDanger: #802424;
+  --colorChipFilledBackgroundInfo: #0F4778;
+  --colorChipFilledBackgroundPrimary: #2E475D;
+  --colorChipFilledBackgroundSecondary: #572B97;
+  --colorChipFilledBackgroundSuccess: #00502E;
+  --colorChipFilledBackgroundWarning: #584201;
+  --colorChipFilledIconDanger: #FFD8D8;
+  --colorChipFilledIconInfo: #CDE4F7;
+  --colorChipFilledIconPrimary: #DAE2E9;
+  --colorChipFilledIconSecondary: #E7DEF8;
+  --colorChipFilledIconSuccess: #B8E7D3;
+  --colorChipFilledIconWarning: #FFDF62;
+  --colorChipFilledTextDanger: #FFD8D8;
+  --colorChipFilledTextInfo: #CDE4F7;
+  --colorChipFilledTextPrimary: #DAE2E9;
+  --colorChipFilledTextSecondary: #E7DEF8;
+  --colorChipFilledTextSuccess: #B8E7D3;
+  --colorChipFilledTextWarning: #FFDF62;
+  --colorChipIconPrimary: #FFFFFF;
+  --colorChipOutlinedBorderDanger: #FF5D5D;
+  --colorChipOutlinedBorderInfo: #449BE1;
+  --colorChipOutlinedBorderPrimary: #7C98B4;
+  --colorChipOutlinedBorderSecondary: #A683E5;
+  --colorChipOutlinedBorderSuccess: #00AB62;
+  --colorChipOutlinedBorderWarning: #B98F02;
+  --colorChipOutlinedIconDanger: #FF5D5D;
+  --colorChipOutlinedIconInfo: #449BE1;
+  --colorChipOutlinedIconPrimary: #7C98B4;
+  --colorChipOutlinedIconSecondary: #A683E5;
+  --colorChipOutlinedIconSuccess: #00AB62;
+  --colorChipOutlinedIconWarning: #B98F02;
+  --colorChipOutlinedTextDanger: #FF5D5D;
+  --colorChipOutlinedTextInfo: #449BE1;
+  --colorChipOutlinedTextPrimary: #7C98B4;
+  --colorChipOutlinedTextSecondary: #A683E5;
+  --colorChipOutlinedTextSuccess: #00AB62;
+  --colorChipOutlinedTextWarning: #B98F02;
+  --colorChipTextInverse: #1F303F;
+  --colorChipTextPrimary: #FFFFFF;
+  --colorCodeEditorBackground: #111A23;
+  --colorCodeEditorCodeActivelineBackground: rgb(from #7C98B4 r g b / 0.15);
+  --colorCodeEditorCodeAtomNumberKeywordVariableAttributeQuoteColor: #449BE1;
+  --colorCodeEditorCodeBracketCommentColor: #959595;
+  --colorCodeEditorCodeCursorBorderLeft: #A9BBCB;
+  --colorCodeEditorCodeDefTagBuiltinQualifierHeaderEmColor: #FF9F9F;
+  --colorCodeEditorCodeErrorInvalidcharColor: #FF5D5D;
+  --colorCodeEditorCodeHint: #F4F6F8;
+  --colorCodeEditorCodeHintActiveBackground: #1F303F;
+  --colorCodeEditorCodeHintsBackground: #1F303F;
+  --colorCodeEditorCodeIndentationMarkerActiveColor: #3E607D;
+  --colorCodeEditorCodeIndentationMarkerColor: #1F303F;
+  --colorCodeEditorCodeMatchingbracketColor: #8A96A7;
+  --colorCodeEditorCodePositiveColor: #00AB62;
+  --colorCodeEditorCodePropertyColor: #FFA461;
+  --colorCodeEditorCodePunctuationUnitNegativeColor: #FFD8D8;
+  --colorCodeEditorCodeSelectedBackground: #1F303F;
+  --colorCodeEditorCodeStringOperatorColor: #5ECD9E;
+  --colorCodeEditorCodeSyntaxAtom: #FFA461;
+  --colorCodeEditorCodeSyntaxAttributeName: #87BFEC;
+  --colorCodeEditorCodeSyntaxBool: #FFA461;
+  --colorCodeEditorCodeSyntaxBracket: #8A96A7;
+  --colorCodeEditorCodeSyntaxClassName: #C5AEEE;
+  --colorCodeEditorCodeSyntaxComment: #8A96A7;
+  --colorCodeEditorCodeSyntaxDeleted: #FFD8D8;
+  --colorCodeEditorCodeSyntaxEmphasis: #C5AEEE;
+  --colorCodeEditorCodeSyntaxEscape: #CDE4F7;
+  --colorCodeEditorCodeSyntaxHeading: #C5AEEE;
+  --colorCodeEditorCodeSyntaxInvalid: #FF5D5D;
+  --colorCodeEditorCodeSyntaxKeyword: #FF9F9F;
+  --colorCodeEditorCodeSyntaxLink: #CDE4F7;
+  --colorCodeEditorCodeSyntaxMeta: #CDE4F7;
+  --colorCodeEditorCodeSyntaxName: #5ECD9E;
+  --colorCodeEditorCodeSyntaxNumber: #87BFEC;
+  --colorCodeEditorCodeSyntaxOperator: #87BFEC;
+  --colorCodeEditorCodeSyntaxPropertyName: #C5AEEE;
+  --colorCodeEditorCodeSyntaxQuote: #5ECD9E;
+  --colorCodeEditorCodeSyntaxRegexp: #CDE4F7;
+  --colorCodeEditorCodeSyntaxSpecialVariableName: #FFA461;
+  --colorCodeEditorCodeSyntaxString: #CDE4F7;
+  --colorCodeEditorCodeSyntaxStrong: #C5AEEE;
+  --colorCodeEditorCodeSyntaxTagName: #5ECD9E;
+  --colorCodeEditorCodeSyntaxTypeName: #FF9F9F;
+  --colorCodeEditorCodeSyntaxTypeOperator: #FF9F9F;
+  --colorCodeEditorCodeSyntaxUrl: #CDE4F7;
+  --colorCodeEditorCodeSyntaxVariableName: #87BFEC;
+  --colorCodeEditorCodeVariable2Variable3String2UrlColor: #87BFEC;
+  --colorCodeEditorCodeVariableColor: #C5AEEE;
+  --colorCodeEditorForeground: #DAE2E9;
+  --colorCodeEditorSelection: #0F4778;
+  --colorCodeEditorSelectionMatch: #0F4778;
+  --colorCodeEditorTextDefault: #DEE1E6;
+  --colorCodeEditorTextGutter: #7C98B4;
+  --colorCodeEditorTextHighlight: #FFDABF;
+  --colorCodeEditorTextHintHighlight: #B8E7D3;
+  --colorCodeEditorToolbarBackground: #1F303F;
+  --colorCodeEditorToolbarButtonHover: #111A23;
+  --colorCodeReviewBackgroundDangerDefault: #571818;
+  --colorCodeReviewBackgroundDangerMuted: #802424;
+  --colorCodeReviewBackgroundPrimaryDefault: #111A23;
+  --colorCodeReviewBackgroundPrimaryMuted: #1F303F;
+  --colorCodeReviewBackgroundSuccessDefault: #00361F;
+  --colorCodeReviewBackgroundSuccessMuted: #00502E;
+  --colorCodeReviewTextDanger: #FF9F9F;
+  --colorCodeReviewTextPrimary: #F4F6F8;
+  --colorCodeReviewTextSuccess: #5ECD9E;
+  --colorDeprecatedBackgroundWarning: #7E2812;
+  --colorDeprecatedBorderWarning: #EA7325;
+  --colorDeprecatedTextWarning: #FFA461;
+  --colorDialogBackgroundPrimary: #1F303F;
+  --colorDialogBackgroundSecondaryDefault: #2E475D;
+  --colorFormLegendBackgroundHover: #2E475D;
+  --colorFormLegendBackgroundRest: #1F303F;
+  --colorHealthStatusBackgroundExecuting: #155EA0;
+  --colorHealthStatusBackgroundFailure: #AA3030;
+  --colorHealthStatusBackgroundNeutral: #515D70;
+  --colorHealthStatusBackgroundSuccess: #006A3D;
+  --colorHealthStatusBackgroundWarning: #745801;
+  --colorHealthStatusIconInverse: #F5F6F8;
+  --colorIconDanger: #FF5D5D;
+  --colorIconDisabled: #3E607D;
+  --colorIconInfo: #449BE1;
+  --colorIconInversePrimary: #111A23;
+  --colorIconInverseSecondary: #1F303F;
+  --colorIconLinkDefault: #87BFEC;
+  --colorIconLinkHover: #449BE1;
+  --colorIconPrimary: #F4F6F8;
+  --colorIconSecondary: #A9BBCB;
+  --colorIconSelected: #87BFEC;
+  --colorIconSuccess: #00AB62;
+  --colorIconTertiary: #7C98B4;
+  --colorIconWarning: #E5B203;
+  --colorLifecycleBackgroundPrimary: #557999;
+  --colorLifecycleBorderDefault: #A9BBCB;
+  --colorLifecycleTextPrimary: #F4F6F8;
+  --colorMenuListBackgroundActive: #3E607D;
+  --colorMenuListBackgroundDefault: #1F303F;
+  --colorMenuListBackgroundHover: #2E475D;
+  --colorMenuListBorderPrimary: #3E607D;
+  --colorMenuListIconPrimary: #7C98B4;
+  --colorMenuListTextHighlight: #449BE1;
+  --colorMenuListTextPrimary: #F4F6F8;
+  --colorMenuListTextSecondary: #DAE2E9;
+  --colorNavButtonBackgroundDefault: rgb(from #1A77CA r g b / 0.01);
+  --colorNavButtonIconDefault: #FFFFFF;
+  --colorNavListBackgroundActive: rgb(from #2E475D r g b / 0.7);
+  --colorNavListIconActive: #449BE1;
+  --colorNavListIconDefault: #557999;
+  --colorNavListTextActive: #449BE1;
+  --colorNavListTextDefault: #F4F6F8;
+  --colorNavTabBackgroundHover: #2E475D;
+  --colorNavTabIconActive: #87BFEC;
+  --colorNavTabIconDefault: #FFFFFF;
+  --colorNavTabIconHover: #FFFFFF;
+  --colorNavTabTextActive: #87BFEC;
+  --colorNavTabTextDefault: #FFFFFF;
+  --colorNavTabTextHover: #FFFFFF;
+  --colorPaginationBackgroundActive: #449BE1;
+  --colorPaginationBackgroundDefault: #111A23;
+  --colorPaginationBackgroundDisabled: #111A23;
+  --colorPaginationBackgroundHover: #557999;
+  --colorPaginationIconActive: #111A23;
+  --colorPaginationIconDefault: #F4F6F8;
+  --colorPaginationIconDisabled: #3E607D;
+  --colorPaginationTextActive: #111A23;
+  --colorPaginationTextDefault: #F4F6F8;
+  --colorPaginationTextDisabled: #3E607D;
+  --colorPopoverBackgroundPrimary: #111A23;
+  --colorPopoverBackgroundSecondary: #1F303F;
+  --colorPopoverInfoCircleBackgroundDefault: #87BFEC;
+  --colorPopoverInfoCircleTextDefault: #0F4778;
+  --colorPortalCardBackground: #2E475D;
+  --colorPortalCardContentDisabled: #A9BBCB;
+  --colorPortalCardContentText: #DAE2E9;
+  --colorPortalChipBackground: #2E475D;
+  --colorPortalLinkTextHover: #FFFFFF;
+  --colorPortalLogoBackground: #F2F8FD;
+  --colorPortalPopoverBackground: #2E475D;
+  --colorProcessContainerBackgroundSelected: #2E475D;
+  --colorProcessContainerBorderSelected: #3E607D;
+  --colorProcessStepBackgroundErrorPrimary: #571818;
+  --colorProcessStepBackgroundErrorSecondary: #AA3030;
+  --colorProcessStepBackgroundErrorSelected: #802424;
+  --colorProcessStepBackgroundHoverError: #802424;
+  --colorProcessStepBackgroundHoverPrimary: #1F303F;
+  --colorProcessStepBackgroundHoverSecondary: #2E475D;
+  --colorProcessStepBackgroundHoverTertiary: #1F303F;
+  --colorProcessStepBackgroundHoverWarning: #C45317;
+  --colorProcessStepBackgroundPrimaryDefault: #111A23;
+  --colorProcessStepBackgroundPrimarySelected: #3E607D;
+  --colorProcessStepBackgroundSecondaryDefault: #1F303F;
+  --colorProcessStepBackgroundWarningDefault: #A13C14;
+  --colorProcessStepBackgroundWarningSecondary: #EA7325;
+  --colorProcessStepBackgroundWarningSelected: #C45317;
+  --colorProcessStepBorderDefault: #2E475D;
+  --colorProcessStepBorderDisabled: #2E475D;
+  --colorProcessStepBorderErrorDefault: #802424;
+  --colorProcessStepBorderErrorHover: #AA3030;
+  --colorProcessStepBorderHover: #3E607D;
+  --colorProcessStepBorderSelected: #557999;
+  --colorProcessStepBorderWarningDefault: #C45317;
+  --colorProcessStepBorderWarningSelected: #FFA461;
+  --colorProcessStepIconDefault: #CDE4F7;
+  --colorProcessStepIconErrorPrimary: #FF5D5D;
+  --colorProcessStepIconErrorSecondary: #FF9F9F;
+  --colorProcessStepIconWarningPrimary: #FFA461;
+  --colorProcessStepIconWarningSecondary: #FFDABF;
+  --colorProcessStepTextDisabled: #7C98B4;
+  --colorProcessWrapperBackgroundPrimary: #111A23;
+  --colorProcessWrapperBackgroundSecondary: #1F303F;
+  --colorProgressBackgroundLinear: #87BFEC;
+  --colorProgressBackgroundPrimary: #87BFEC;
+  --colorProgressBackgroundSecondary: #155EA0;
+  --colorProgressForegroundLinear: #155EA0;
+  --colorProgressTextInfo: #449BE1;
+  --colorScrollbarBackground: rgb(from #111A23 r g b / 0);
+  --colorScrollbarHandle: #557999;
+  --colorSpaceSwitcherBackgroundDefault: rgb(from #2E475D r g b / 0.64);
+  --colorSpaceSwitcherIconDefault: #A9BBCB;
+  --colorSpaceSwitcherTextDefault: #A9BBCB;
+  --colorStatusBadgeBackgroundHealthy: #006A3D;
+  --colorStatusBadgeBackgroundNeutral: #515D70;
+  --colorStatusBadgeBackgroundUnhealthy: #AA3030;
+  --colorStatusBadgeBackgroundWarning: #745801;
+  --colorStatusBadgeIconInverse: #F5F6F8;
+  --colorStatusBadgeTextInverse: #F5F6F8;
+  --colorStatusBadgeTextPrimary: #F4F6F8;
+  --colorSwitchBackgroundOffDefault: #557999;
+  --colorSwitchBackgroundOffDisabled: #2E475D;
+  --colorSwitchBackgroundOnDefault: #CDE4F7;
+  --colorSwitchBackgroundOnDisabled: #155EA0;
+  --colorSwitchForegroundOffDefault: #A9BBCB;
+  --colorSwitchForegroundOffDisabled: #3E607D;
+  --colorSwitchForegroundOnDefault: #449BE1;
+  --colorSwitchForegroundOnDisabled: #0F4778;
+  --colorSwitchIconActive: #449BE1;
+  --colorSwitchOverlayOff: rgb(from #557999 r g b / 0.16);
+  --colorSwitchOverlayOn: rgb(from #CDE4F7 r g b / 0.16);
+  --colorTableHeaderBackground: rgb(from #1F303F r g b / 0.3);
+  --colorTagBackgroundDefault: #2E475D;
+  --colorTagBackgroundHover: #1F303F;
+  --colorTextDanger: #FF9F9F;
+  --colorTextDisabled: #3E607D;
+  --colorTextFeature: #C5AEEE;
+  --colorTextFieldBorderActive: #449BE1;
+  --colorTextFieldBorderDanger: #FF5D5D;
+  --colorTextFieldBorderDefault: #2E475D;
+  --colorTextFieldBorderDisabled: #2E475D;
+  --colorTextFieldBorderHover: #557999;
+  --colorTextFieldIconDisabled: #3E607D;
+  --colorTextFieldIconPrimary: #DAE2E9;
+  --colorTextFieldTextDanger: #FF5D5D;
+  --colorTextFieldTextDisabled: #3E607D;
+  --colorTextFieldTextPrimary: #F4F6F8;
+  --colorTextFieldTextSecondary: #A9BBCB;
+  --colorTextFieldTextSelected: #449BE1;
+  --colorTextInfo: #87BFEC;
+  --colorTextInversePrimary: #111A23;
+  --colorTextInverseSecondary: #1F303F;
+  --colorTextLinkDefault: #87BFEC;
+  --colorTextLinkHover: #449BE1;
+  --colorTextPrimary: #F4F6F8;
+  --colorTextSecondary: #A9BBCB;
+  --colorTextSelected: #449BE1;
+  --colorTextSuccess: #5ECD9E;
+  --colorTextTertiary: #7C98B4;
+  --colorTextWarning: #FFDF62;
+  --shadowDrawer: -4px 0 16px 0 rgba(0,0,0,0.16), -12px 4px 24px -4px rgba(0,0,0,0.32);
+  --shadowExtraSmall: 0 1px 8px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.06);
+  --shadowFocused: 0 0 0 1px rgb(68,155,225), 0 0 0 5px rgba(68,155,225,0.4);
+  --shadowFocusedInset: inset 0 0 0 4px rgba(68,155,225,0.4);
+  --shadowLarge: 0 2px 6px 0 rgba(0,0,0,0.26), 0 24px 32px -4px rgba(0,0,0,0.42);
+  --shadowLayoutPrimary: -2px -2px 16px 0 rgba(0,0,0,0.06);
+  --shadowMedium: 0 0 4px 0 rgba(0,0,0,0.24), 0 6px 12px 0 rgba(0,0,0,0.30);
+  --shadowSmall: 0 1px 1px 0 rgba(0,0,0,0.16), 0 1px 8px 0 rgba(0,0,0,0.16);
+}
diff --git a/src/themes/octopus/components/HtmlHead.astro b/src/themes/octopus/components/HtmlHead.astro
index a43ae28e60..15378aa46d 100644
--- a/src/themes/octopus/components/HtmlHead.astro
+++ b/src/themes/octopus/components/HtmlHead.astro
@@ -64,6 +64,7 @@ stats.stop();
   <link rel="stylesheet" href={`${ASSETS}/pu-vars.css`} />
   <link rel="stylesheet" href={`${ASSETS}/footer-pu-styles.css`} />
   <link rel="stylesheet" href={`${ASSETS}/marketo-pu-styles.css`} />
+  <link rel="stylesheet" href={SITE.subfolder + '/css/design-tokens.css'} />
   <link rel="stylesheet" href={SITE.subfolder + '/css/vars.css'} />
   <link rel="stylesheet" href={SITE.subfolder + '/css/main.css'} />
   {
diff --git a/src/themes/octopus/utilities/design-tokens.mjs b/src/themes/octopus/utilities/design-tokens.mjs
new file mode 100644
index 0000000000..2b5fde1a39
--- /dev/null
+++ b/src/themes/octopus/utilities/design-tokens.mjs
@@ -0,0 +1,157 @@
+/**
+ * Generates public/docs/css/design-tokens.css from
+ * @octopusdeploy/design-system-tokens.
+ *
+ * The tokens package ships no CSS of its own. Its ergonomic exports
+ * (themeTokens, text, fontFamily) resolve to `var(--name)` strings, while
+ * lightTheme / darkTheme / textTheme are the matching name -> value maps that a
+ * consumer is expected to paint into a :root block. In the Octopus app that job
+ * belongs to the Theme component in @octopusdeploy/design-system-components.
+ * This docs site has no React runtime, so we emit the same custom properties as
+ * a static stylesheet instead.
+ *
+ * Run via `npm run tokens`. Do not edit the generated CSS by hand.
+ *
+ * @format
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { createRequire } from 'module';
+
+// The tokens package is CommonJS and re-exports lightTheme / darkTheme through
+// tslib's __exportStar, which Node's ESM-CJS interop cannot statically detect -
+// named ESM imports of those come back undefined. createRequire sidesteps it.
+const require = createRequire(import.meta.url);
+const tokens = require('@octopusdeploy/design-system-tokens');
+
+// "exports" is a bare string, so no subpath - including ./package.json - is
+// exported. Resolve the entry point and walk back up to the package root to
+// read the version we generated from.
+const entryPoint = require.resolve('@octopusdeploy/design-system-tokens');
+const packageRoot = path.resolve(entryPoint, '..', '..', '..');
+const { version } = JSON.parse(
+    await fs.readFile(path.join(packageRoot, 'package.json'), 'utf8')
+);
+
+const workingDirectory = process.cwd();
+const outputFile = path.join(
+    workingDirectory,
+    'public',
+    'docs',
+    'css',
+    'design-tokens.css'
+);
+
+// The dark theme is applied with the same selector vars.css already uses, so
+// both stylesheets switch off the existing theme toggle.
+const darkSelector = "html[data-theme='dark']";
+
+// Theme-invariant scales. The package exposes these as plain literals rather
+// than var() references, so it defines no custom property names for them -
+// these ones are ours, kept in the package's camelCase style for consistency.
+const scales = {
+    space: tokens.space,
+    borderRadius: tokens.borderRadius,
+    borderWidth: tokens.borderWidth,
+    fontSize: tokens.fontSize,
+    fontWeight: tokens.fontWeight,
+    lineHeight: tokens.lineHeight,
+    letterSpacing: tokens.letterSpacing,
+};
+
+function declaration(name, value) {
+    return `  --${name}: ${value};`;
+}
+
+function block(selector, lines) {
+    return `${selector} {\n${lines.join('\n')}\n}`;
+}
+
+// Several scales are keyed by number (space, borderWidth, fontWeight), where a
+// plain lexicographic sort would read 1, 12, 16, 2, 24.
+function sortKeys(keys) {
+    return [...keys].sort((a, b) =>
+        /^\d+$/.test(a) && /^\d+$/.test(b)
+            ? Number(a) - Number(b)
+            : a.localeCompare(b)
+    );
+}
+
+function scaleDeclarations() {
+    const lines = [];
+
+    for (const [group, values] of Object.entries(scales)) {
+        for (const key of sortKeys(Object.keys(values))) {
+            lines.push(declaration(`${group}-${key}`, values[key]));
+        }
+    }
+
+    return lines;
+}
+
+function themeDeclarations(theme) {
+    return Object.keys(theme)
+        .sort()
+        .map((key) => declaration(key, theme[key]));
+}
+
+// Only the keys that actually differ need repeating in the dark block.
+function darkOverrides(light, dark) {
+    return Object.keys(dark)
+        .sort()
+        .filter((key) => light[key] !== dark[key])
+        .map((key) => declaration(key, dark[key]));
+}
+
+const { lightTheme, darkTheme, textTheme } = tokens;
+
+const rootLines = [
+    '  /* Typography composites and font families (textTheme) */',
+    ...themeDeclarations(textTheme),
+    '',
+    '  /* Theme-invariant scales */',
+    ...scaleDeclarations(),
+    '',
+    '  /* Colors and shadows (lightTheme) */',
+    ...themeDeclarations(lightTheme),
+];
+
+const darkLines = darkOverrides(lightTheme, darkTheme);
+
+const header = [
+    '/*',
+    ' * GENERATED FILE - DO NOT EDIT.',
+    ' *',
+    ' * Source: @octopusdeploy/design-system-tokens@' + version,
+    ' * Regenerate with: npm run tokens',
+    ' *',
+    ' * Site-specific variables live in vars.css, which is loaded after this',
+    ' * file and therefore wins on any name it also defines.',
+    ' */',
+].join('\n');
+
+const css =
+    [header, block(':root', rootLines), block(darkSelector, darkLines)].join(
+        '\n\n'
+    ) + '\n';
+
+await fs.mkdir(path.dirname(outputFile), { recursive: true });
+await fs.writeFile(outputFile, css, 'utf8');
+
+const counts = {
+    'text/font': Object.keys(textTheme).length,
+    scales: scaleDeclarations().length,
+    'light colors/shadows': Object.keys(lightTheme).length,
+    'dark overrides': darkLines.length,
+};
+
+console.log(
+    `Generated ${path.relative(workingDirectory, outputFile)} from @octopusdeploy/design-system-tokens@${version}`
+);
+console.log(
+    '  ' +
+        Object.entries(counts)
+            .map(([label, count]) => `${label}: ${count}`)
+            .join(', ')
+);