diff --git a/design-tokens/build.js b/design-tokens/build.js
index 6ef04dbda..86ec56ad2 100644
--- a/design-tokens/build.js
+++ b/design-tokens/build.js
@@ -76,7 +76,7 @@ const themedDesignTokenGroups = designTokenGroups
     ...theme,
     selectedTokenSets: Object.fromEntries(
       Object.entries(theme.selectedTokenSets).map(([key, val]) => [
-        key.startsWith('brand/') ? `brand/${brandDir}/${key.split('/').pop()}` : key,
+        key.startsWith('brand/') ? `brand/${brandDir}/${key.split('/').slice(2).join('/')}` : key,
         val,
       ]),
     ),
@@ -114,7 +114,7 @@ function initStyleDictionary(licenseHeader) {
           return type === 'dimension' && ['space', 'width', 'height'].includes(item);
         },
         [CUSTOM_FILTER_THEMED_TOKENS]: ({ attributes, filePath }) =>
-          !filePath.includes(`brand/`) &&
+          (!filePath.includes(`brand/`) || /palettes\/(light|dark)\.json$/.test(filePath)) &&
           !(filePath.endsWith('base.json') && attributes.type !== 'color'),
       },
       fileHeaders: {
diff --git a/design-tokens/references/echoes-color-palettes-option-2.json b/design-tokens/references/echoes-color-palettes-option-2.json
new file mode 100644
index 000000000..a6b2a356f
--- /dev/null
+++ b/design-tokens/references/echoes-color-palettes-option-2.json
@@ -0,0 +1,428 @@
+{
+  "schemaVersion": 1,
+  "exportedAt": "2026-08-06T11:29:16.939Z",
+  "optionId": "option-2",
+  "palettes": [
+    {
+      "id": "gray",
+      "name": "Gray",
+      "description": "Monochromatic values for surfaces, borders, text, and everyday interaction.",
+      "group": "Foundations",
+      "kind": "ui",
+      "light": [
+        "#FAFBFC",
+        "#F4F6F8",
+        "#EEF1F4",
+        "#E7EAEE",
+        "#DFE3E8",
+        "#D6DBE1",
+        "#C9CED6",
+        "#AEB5BE",
+        "#4D5663",
+        "#3B434E",
+        "#2A313A",
+        "#0A0A0A"
+      ],
+      "dark": [
+        "#0C0D10",
+        "#111417",
+        "#181B1F",
+        "#1E2227",
+        "#262B31",
+        "#333840",
+        "#474E57",
+        "#616A75",
+        "#7F8791",
+        "#999FA7",
+        "#B7BBC0",
+        "#F4F6F8"
+      ]
+    },
+    {
+      "id": "gray-alpha",
+      "name": "Gray alpha",
+      "description": "True neutral alpha overlays that preserve the character of their underlying surface.",
+      "group": "Foundations",
+      "kind": "ui",
+      "light": [
+        "#00000003",
+        "#00000005",
+        "#00000008",
+        "#0000000D",
+        "#00000014",
+        "#0000001F",
+        "#0000002E",
+        "#00000047",
+        "#000000A6",
+        "#000000B8",
+        "#000000C7",
+        "#000000E6"
+      ],
+      "dark": [
+        "#FFFFFF05",
+        "#FFFFFF08",
+        "#FFFFFF0D",
+        "#FFFFFF14",
+        "#FFFFFF1F",
+        "#FFFFFF2E",
+        "#FFFFFF3D",
+        "#FFFFFF52",
+        "#FFFFFF70",
+        "#FFFFFF85",
+        "#FFFFFFB8",
+        "#FFFFFFEB"
+      ]
+    },
+    {
+      "id": "blue",
+      "name": "Blue",
+      "description": "Brand feature color for AI, upgrades, upsell, and pricing—not routine interaction.",
+      "group": "Foundations",
+      "kind": "ui",
+      "light": [
+        "#F9FAFC",
+        "#F4F6FA",
+        "#EBF0F7",
+        "#E1E9F3",
+        "#D1DEEE",
+        "#B7CBE5",
+        "#8CAFDD",
+        "#508FE0",
+        "#126ED3",
+        "#2360AB",
+        "#275085",
+        "#1E2F44"
+      ],
+      "dark": [
+        "#10161F",
+        "#151D29",
+        "#1A2533",
+        "#202F42",
+        "#253851",
+        "#2E496B",
+        "#375D8F",
+        "#407BC7",
+        "#73A7EC",
+        "#92B7E8",
+        "#BACCE4",
+        "#EEF0F4"
+      ]
+    },
+    {
+      "id": "green",
+      "name": "Green",
+      "description": "Candidate sentiment ramp for positive outcomes.",
+      "group": "Sentiments",
+      "kind": "ui",
+      "light": [
+        "#F7FCF7",
+        "#EFFAEF",
+        "#E1F7E1",
+        "#CFF3CF",
+        "#B1EFB2",
+        "#8EE090",
+        "#71C375",
+        "#4BA452",
+        "#158829",
+        "#27722E",
+        "#2B5D2E",
+        "#203320"
+      ],
+      "dark": [
+        "#111811",
+        "#162016",
+        "#1B281B",
+        "#223322",
+        "#273D27",
+        "#315132",
+        "#3B693D",
+        "#458D49",
+        "#4FC059",
+        "#68CF6F",
+        "#94E197",
+        "#E8F4E8"
+      ]
+    },
+    {
+      "id": "yellow",
+      "name": "Yellow",
+      "description": "Candidate sentiment ramp for attention states.",
+      "group": "Sentiments",
+      "kind": "ui",
+      "light": [
+        "#FCFAF7",
+        "#FAF6EE",
+        "#F7EFE0",
+        "#F3E7CD",
+        "#EEDAB2",
+        "#E4C585",
+        "#C6A869",
+        "#A88944",
+        "#8D6B12",
+        "#765C22",
+        "#5F4D27",
+        "#342D1E"
+      ],
+      "dark": [
+        "#181610",
+        "#201C15",
+        "#282319",
+        "#332D20",
+        "#3E3624",
+        "#52462E",
+        "#6B5A36",
+        "#90773F",
+        "#C69F47",
+        "#D4AF5F",
+        "#E3C78C",
+        "#F4F0E7"
+      ]
+    },
+    {
+      "id": "red",
+      "name": "Red",
+      "description": "Candidate sentiment ramp for failure and destructive states.",
+      "group": "Sentiments",
+      "kind": "ui",
+      "light": [
+        "#FCFAFA",
+        "#FAF5F4",
+        "#F7EDEC",
+        "#F3E4E2",
+        "#EED6D3",
+        "#E6BEB9",
+        "#E0968F",
+        "#E45A54",
+        "#CF1926",
+        "#A92B2C",
+        "#852F2C",
+        "#46221F"
+      ],
+      "dark": [
+        "#1F1211",
+        "#291716",
+        "#341D1A",
+        "#432421",
+        "#522926",
+        "#6D3431",
+        "#913F3A",
+        "#C74B46",
+        "#EE8078",
+        "#E99D96",
+        "#E5C1BD",
+        "#F4EFEE"
+      ]
+    },
+    {
+      "id": "teal",
+      "name": "Teal",
+      "description": "Candidate blue-green ramp for analytical categories and supporting feature families.",
+      "group": "Extended colors",
+      "kind": "ui",
+      "light": [
+        "#F6FCFB",
+        "#EBFAF8",
+        "#DAF7F4",
+        "#C2F3EF",
+        "#9FEDE8",
+        "#8ED9D4",
+        "#72BCB7",
+        "#4C9D98",
+        "#15817C",
+        "#276D69",
+        "#2B5956",
+        "#203230"
+      ],
+      "dark": [
+        "#111717",
+        "#161F1E",
+        "#1B2726",
+        "#223130",
+        "#273B3A",
+        "#314E4C",
+        "#3B6562",
+        "#458783",
+        "#4FB8B2",
+        "#69C7C1",
+        "#95DAD4",
+        "#E4F4F2"
+      ]
+    },
+    {
+      "id": "cyan",
+      "name": "Cyan",
+      "description": "Candidate sky-cyan ramp for charts, technical highlights, and secondary classification.",
+      "group": "Extended colors",
+      "kind": "ui",
+      "light": [
+        "#F8FBFC",
+        "#F1F7FA",
+        "#E6F2F7",
+        "#D7ECF3",
+        "#C2E3EE",
+        "#9BD3E5",
+        "#71B8CF",
+        "#4B9AB1",
+        "#157D96",
+        "#266A7D",
+        "#2B5764",
+        "#203136"
+      ],
+      "dark": [
+        "#111719",
+        "#161E21",
+        "#1B262A",
+        "#223135",
+        "#263A41",
+        "#314C55",
+        "#3A6370",
+        "#448498",
+        "#4EB3D1",
+        "#68C3DE",
+        "#A2D4E4",
+        "#EBF1F4"
+      ]
+    },
+    {
+      "id": "purple",
+      "name": "Purple",
+      "description": "Candidate violet ramp for categorical distinction and non-interactive feature classification.",
+      "group": "Extended colors",
+      "kind": "ui",
+      "light": [
+        "#FBFAFC",
+        "#F7F5FA",
+        "#F1EEF7",
+        "#E9E5F3",
+        "#DFD8EE",
+        "#CEC2E5",
+        "#B5A0DD",
+        "#9E73E0",
+        "#8F1CF5",
+        "#7630C4",
+        "#5F3397",
+        "#34244C"
+      ],
+      "dark": [
+        "#181322",
+        "#20182D",
+        "#281E39",
+        "#332649",
+        "#3D2C5A",
+        "#513878",
+        "#6A43A1",
+        "#8D58D6",
+        "#B290EC",
+        "#BDA7E8",
+        "#CFC4E4",
+        "#F1EFF4"
+      ]
+    },
+    {
+      "id": "magenta",
+      "name": "Magenta",
+      "description": "Candidate magenta ramp for categorical distinction, ratings, and comparative visualization.",
+      "group": "Extended colors",
+      "kind": "ui",
+      "light": [
+        "#FCFAFB",
+        "#FAF4F8",
+        "#F7ECF3",
+        "#F3E2ED",
+        "#EED3E4",
+        "#E7B9D6",
+        "#E08DC5",
+        "#D950B3",
+        "#BD1898",
+        "#9C2A7F",
+        "#7B2E65",
+        "#412137"
+      ],
+      "dark": [
+        "#1E1219",
+        "#271722",
+        "#311C2A",
+        "#3F2336",
+        "#4D2841",
+        "#663356",
+        "#873D71",
+        "#B9499A",
+        "#EE6FC9",
+        "#EA93CD",
+        "#E5BDD6",
+        "#F4EEF2"
+      ]
+    },
+    {
+      "id": "orange",
+      "name": "Orange",
+      "description": "Candidate orange ramp for classification between yellow attention and red danger.",
+      "group": "Extended colors",
+      "kind": "ui",
+      "light": [
+        "#FCFAF9",
+        "#FAF5F2",
+        "#F7EEE8",
+        "#F3E5DC",
+        "#EED7C9",
+        "#E6C0A7",
+        "#DF9B6C",
+        "#C37944",
+        "#A85811",
+        "#8B4F22",
+        "#6E4426",
+        "#3B291D"
+      ],
+      "dark": [
+        "#1B1410",
+        "#241B15",
+        "#2D2119",
+        "#3A2A1F",
+        "#463224",
+        "#5D412D",
+        "#7A5236",
+        "#A76A3E",
+        "#E68B46",
+        "#E9A271",
+        "#E5C3AD",
+        "#F4EFEC"
+      ]
+    },
+    {
+      "id": "data-viz-categorical",
+      "name": "Categorical",
+      "description": "Eight candidate series colors for unrelated categories.",
+      "group": "Data visualization",
+      "kind": "categorical",
+      "light": [
+        "#347BD0",
+        "#D44194",
+        "#388779",
+        "#8838E0",
+        "#C66F39",
+        "#295A69",
+        "#84307F",
+        "#3D6127"
+      ],
+      "dark": [
+        "#78A7E5",
+        "#E986B7",
+        "#5CB8A7",
+        "#9F6BEB",
+        "#E89361",
+        "#8AD8F1",
+        "#F0A8E9",
+        "#91DC63"
+      ]
+    },
+    {
+      "id": "data-viz-severity",
+      "name": "Severity",
+      "description": "Candidate ordered colors for blocker, high, medium, low, info, and placeholder data.",
+      "group": "Data visualization",
+      "kind": "severity",
+      "light": ["#5E221A", "#AE2E22", "#A2642A", "#937F30", "#2E6FBD", "#737373"],
+      "dark": ["#D53A2C", "#E98475", "#E39757", "#CDB761", "#78A7E5", "#828282"]
+    }
+  ]
+}
diff --git a/design-tokens/tokens/$metadata.json b/design-tokens/tokens/$metadata.json
index fddc29e91..e5c5cd788 100644
--- a/design-tokens/tokens/$metadata.json
+++ b/design-tokens/tokens/$metadata.json
@@ -1,13 +1,17 @@
 {
   "tokenSetOrder": [
     "brand/brand-A/base",
-    "brand/brand-A/colors",
+    "brand/brand-A/palettes/base",
+    "brand/brand-A/palettes/light",
+    "brand/brand-A/palettes/dark",
     "brand/brand-B/base",
-    "brand/brand-B/colors",
+    "brand/brand-B/palettes/base",
+    "brand/brand-B/palettes/light",
+    "brand/brand-B/palettes/dark",
     "modes/light",
     "modes/dark",
     "component/base",
     "component/light",
     "component/dark"
   ]
-}
\ No newline at end of file
+}
diff --git a/design-tokens/tokens/$themes.json b/design-tokens/tokens/$themes.json
index 7dd6683f2..bf96f9645 100644
--- a/design-tokens/tokens/$themes.json
+++ b/design-tokens/tokens/$themes.json
@@ -5,7 +5,8 @@
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
       "brand/brand-A/base": "source",
-      "brand/brand-A/colors": "source",
+      "brand/brand-A/palettes/base": "source",
+      "brand/brand-A/palettes/light": "source",
       "modes/light": "enabled",
       "component/light": "enabled"
     },
@@ -231,7 +232,8 @@
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
       "brand/brand-A/base": "source",
-      "brand/brand-A/colors": "source",
+      "brand/brand-A/palettes/base": "source",
+      "brand/brand-A/palettes/dark": "source",
       "modes/dark": "enabled",
       "component/dark": "enabled"
     },
@@ -457,7 +459,7 @@
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
       "brand/brand-A/base": "enabled",
-      "brand/brand-A/colors": "enabled"
+      "brand/brand-A/palettes/base": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:5472:921",
     "$figmaModeId": "5472:2",
@@ -529,57 +531,6 @@
       "echoes.fontSize.50": "0ec05bc0c534613da6211659b994e3f0af29e170",
       "echoes.fontSize.60": "c7df0d9bf7ddef3ffc821f820ec87ad472a725fa",
       "echoes.borderWidth.default": "9c77fe2efd29172a4a818ff43401cc0574bcd911",
-      "echoes.color.roles.support.black": "2981f508d2f3a67144310e74d092ea7b7309d989",
-      "echoes.color.roles.support.white": "e1d993c7098946f06ad47a6d4cce1b945497c5a5",
-      "echoes.color.roles.support.transparent": "9ba7b90b9e969908c6cf9f7be448aff512c34ce6",
-      "echoes.color.roles.neutral.lightest": "e16ec51814bbe028daf3feebef70a80a0b711e8a",
-      "echoes.color.roles.neutral.light": "d1439215ab8ffae6d9e8cb9ebcd8f9d298b46644",
-      "echoes.color.roles.neutral.medium": "05bf3075fee6adf75ac886074b273e2bb245eb1b",
-      "echoes.color.roles.neutral.strong": "7397373e81a836cfc46f601fe88e8c45d3faa366",
-      "echoes.color.roles.neutral.bold": "aff84ce5ee6fbdfde550f14e3730e78cd153479d",
-      "echoes.color.roles.neutral.dark": "7e92797d310d7202170796311fbcf77830b0f02c",
-      "echoes.color.roles.primary.lightest": "1bf92ecd6e48e9f24096d08c5d27b5bac66be9e7",
-      "echoes.color.roles.primary.light": "bd34c19c47a481f747170923da12db1f28ef3254",
-      "echoes.color.roles.primary.medium": "f798df1a5132cb23c55cc4153150e909ba588fc8",
-      "echoes.color.roles.primary.strong": "198fd8b0e79bc69eed51d8175dc5b3ea10a480fe",
-      "echoes.color.roles.primary.bold": "11c3d8bb3860d6eea7f02a56c22f489f572f3a01",
-      "echoes.color.roles.primary.dark": "367805c9be948ed7b0f4f410a518a93d6680d82e",
-      "echoes.color.roles.secondary.lightest": "1d9d02d271a354cc078f63df8086c98be9346a9b",
-      "echoes.color.roles.secondary.light": "06d1d022bcbf7f8e3ed308bdf4cda1bd22a3b442",
-      "echoes.color.roles.secondary.medium": "474cd98d2fecb18a2f869b2d97d6bace6f3c9fb0",
-      "echoes.color.roles.secondary.strong": "83717a9d00c6aba4bc3a0218d63a9a8007503004",
-      "echoes.color.roles.secondary.bold": "80a5a7e8b3f4c0ff93b245c6a7f7ee625bef07c3",
-      "echoes.color.roles.secondary.dark": "e4f17529a371bf575e395ec9786630ac9d270b89",
-      "echoes.color.roles.info.lightest": "4c1f499a6efae5a48ce75e179ebf39293a79d20b",
-      "echoes.color.roles.info.light": "eefb623f64873015433118a06f1d0f2f4237bad2",
-      "echoes.color.roles.info.medium": "4ba9e232e21ed87648f6afa87ff03fa4a66e61c8",
-      "echoes.color.roles.info.strong": "7005aeb0d35c90732e1e75c989e7a9b9cd5c7a1d",
-      "echoes.color.roles.info.bold": "26606267267228a180040de4b668756de84d7c65",
-      "echoes.color.roles.info.dark": "8fc73a8522db46dbb5c10d276580363c30e4d7de",
-      "echoes.color.roles.success.lightest": "82100dcd7bb6cc20e043ee884732935ee03f0a49",
-      "echoes.color.roles.success.light": "dcf650d19885309e3801e40c0f8705d09ed303de",
-      "echoes.color.roles.success.medium": "c7d4f409b2838ab6b7bd0e849b5c2305e3666034",
-      "echoes.color.roles.success.strong": "15a78921d889af2e2665c5068c8a1936d381411d",
-      "echoes.color.roles.success.bold": "8acc16b73b9cfe5ff1602c46cdcabd559c083c3e",
-      "echoes.color.roles.success.dark": "b25e8419ceb53a310504c95078e0d75c97247a00",
-      "echoes.color.roles.warning.lightest": "336a7da496cd670b5ddc5da1968f2c6caf9ba484",
-      "echoes.color.roles.warning.light": "f8668dcf1a86603baafb145bf9b8c4b719860034",
-      "echoes.color.roles.warning.medium": "f4561d87cdfdd5287e7fc998794208cbaa0ba550",
-      "echoes.color.roles.warning.strong": "3c769a44d7ca2be3711294ed3cd9cde61d84c65e",
-      "echoes.color.roles.warning.bold": "6f822009a12e12d8c663513354e838bcab231e3e",
-      "echoes.color.roles.warning.dark": "10d9139ef4167adffff20b8c0e8a55250330fa93",
-      "echoes.color.roles.danger.lightest": "442dd5595b7dc6369fd84ecabafaf4606d0d6d57",
-      "echoes.color.roles.danger.light": "f9dcdfefb4b3f9a3f9e05c7ab21c81a7b670c187",
-      "echoes.color.roles.danger.medium": "7532ebed27aac54d568679f13971271c46f5bf02",
-      "echoes.color.roles.danger.strong": "2ad11057d48780f70eea131c8ff5427f1ebfd4a1",
-      "echoes.color.roles.danger.bold": "a770447d1592279fa87375dd7f5ecc7964f33f88",
-      "echoes.color.roles.danger.dark": "065fa4ec7ecde633abeaa4770ca28198289674fc",
-      "echoes.color.roles.highlight.lightest": "a451a67864aab79d72bb4710dbe686c05fef9ce8",
-      "echoes.color.roles.highlight.light": "c6109a2510dc38c6541f3cb184fe11b6a8fe43a6",
-      "echoes.color.roles.highlight.medium": "782e48f6c88d1abe2836ad61a0e4d2a95b78f6a5",
-      "echoes.color.roles.highlight.strong": "307167cf3ed55348314337df1fd7edf45d90f0d2",
-      "echoes.color.roles.highlight.bold": "e73d97d0dd805c9da95524673a48ac015eaac887",
-      "echoes.color.roles.highlight.dark": "2b1574233865fb0861caeb70883d885324bc1eb1",
       "echoes.color.palette.support.black": "7d59aca6990f5c47b9b96ed41a8743782c298272",
       "echoes.color.palette.support.white": "ef059170076e233799460efaecab4abe6ea4821d",
       "echoes.color.palette.support.transparent": "fa42802e7e3e00e90259717f44e83951e66993f7",
@@ -715,7 +666,7 @@
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
       "brand/brand-B/base": "enabled",
-      "brand/brand-B/colors": "enabled"
+      "brand/brand-B/palettes/base": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:5472:921",
     "$figmaModeId": "5472:3",
@@ -787,57 +738,6 @@
       "echoes.fontSize.50": "0ec05bc0c534613da6211659b994e3f0af29e170",
       "echoes.fontSize.60": "c7df0d9bf7ddef3ffc821f820ec87ad472a725fa",
       "echoes.borderWidth.default": "9c77fe2efd29172a4a818ff43401cc0574bcd911",
-      "echoes.color.roles.support.black": "2981f508d2f3a67144310e74d092ea7b7309d989",
-      "echoes.color.roles.support.white": "e1d993c7098946f06ad47a6d4cce1b945497c5a5",
-      "echoes.color.roles.support.transparent": "9ba7b90b9e969908c6cf9f7be448aff512c34ce6",
-      "echoes.color.roles.neutral.lightest": "e16ec51814bbe028daf3feebef70a80a0b711e8a",
-      "echoes.color.roles.neutral.light": "d1439215ab8ffae6d9e8cb9ebcd8f9d298b46644",
-      "echoes.color.roles.neutral.medium": "05bf3075fee6adf75ac886074b273e2bb245eb1b",
-      "echoes.color.roles.neutral.strong": "7397373e81a836cfc46f601fe88e8c45d3faa366",
-      "echoes.color.roles.neutral.bold": "aff84ce5ee6fbdfde550f14e3730e78cd153479d",
-      "echoes.color.roles.neutral.dark": "7e92797d310d7202170796311fbcf77830b0f02c",
-      "echoes.color.roles.primary.lightest": "1bf92ecd6e48e9f24096d08c5d27b5bac66be9e7",
-      "echoes.color.roles.primary.light": "bd34c19c47a481f747170923da12db1f28ef3254",
-      "echoes.color.roles.primary.medium": "f798df1a5132cb23c55cc4153150e909ba588fc8",
-      "echoes.color.roles.primary.strong": "198fd8b0e79bc69eed51d8175dc5b3ea10a480fe",
-      "echoes.color.roles.primary.bold": "11c3d8bb3860d6eea7f02a56c22f489f572f3a01",
-      "echoes.color.roles.primary.dark": "367805c9be948ed7b0f4f410a518a93d6680d82e",
-      "echoes.color.roles.secondary.lightest": "1d9d02d271a354cc078f63df8086c98be9346a9b",
-      "echoes.color.roles.secondary.light": "06d1d022bcbf7f8e3ed308bdf4cda1bd22a3b442",
-      "echoes.color.roles.secondary.medium": "474cd98d2fecb18a2f869b2d97d6bace6f3c9fb0",
-      "echoes.color.roles.secondary.strong": "83717a9d00c6aba4bc3a0218d63a9a8007503004",
-      "echoes.color.roles.secondary.bold": "80a5a7e8b3f4c0ff93b245c6a7f7ee625bef07c3",
-      "echoes.color.roles.secondary.dark": "e4f17529a371bf575e395ec9786630ac9d270b89",
-      "echoes.color.roles.info.lightest": "4c1f499a6efae5a48ce75e179ebf39293a79d20b",
-      "echoes.color.roles.info.light": "eefb623f64873015433118a06f1d0f2f4237bad2",
-      "echoes.color.roles.info.medium": "4ba9e232e21ed87648f6afa87ff03fa4a66e61c8",
-      "echoes.color.roles.info.strong": "7005aeb0d35c90732e1e75c989e7a9b9cd5c7a1d",
-      "echoes.color.roles.info.bold": "26606267267228a180040de4b668756de84d7c65",
-      "echoes.color.roles.info.dark": "8fc73a8522db46dbb5c10d276580363c30e4d7de",
-      "echoes.color.roles.success.lightest": "82100dcd7bb6cc20e043ee884732935ee03f0a49",
-      "echoes.color.roles.success.light": "dcf650d19885309e3801e40c0f8705d09ed303de",
-      "echoes.color.roles.success.medium": "c7d4f409b2838ab6b7bd0e849b5c2305e3666034",
-      "echoes.color.roles.success.strong": "15a78921d889af2e2665c5068c8a1936d381411d",
-      "echoes.color.roles.success.bold": "8acc16b73b9cfe5ff1602c46cdcabd559c083c3e",
-      "echoes.color.roles.success.dark": "b25e8419ceb53a310504c95078e0d75c97247a00",
-      "echoes.color.roles.warning.lightest": "336a7da496cd670b5ddc5da1968f2c6caf9ba484",
-      "echoes.color.roles.warning.light": "f8668dcf1a86603baafb145bf9b8c4b719860034",
-      "echoes.color.roles.warning.medium": "f4561d87cdfdd5287e7fc998794208cbaa0ba550",
-      "echoes.color.roles.warning.strong": "3c769a44d7ca2be3711294ed3cd9cde61d84c65e",
-      "echoes.color.roles.warning.bold": "6f822009a12e12d8c663513354e838bcab231e3e",
-      "echoes.color.roles.warning.dark": "10d9139ef4167adffff20b8c0e8a55250330fa93",
-      "echoes.color.roles.danger.lightest": "442dd5595b7dc6369fd84ecabafaf4606d0d6d57",
-      "echoes.color.roles.danger.light": "f9dcdfefb4b3f9a3f9e05c7ab21c81a7b670c187",
-      "echoes.color.roles.danger.medium": "7532ebed27aac54d568679f13971271c46f5bf02",
-      "echoes.color.roles.danger.strong": "2ad11057d48780f70eea131c8ff5427f1ebfd4a1",
-      "echoes.color.roles.danger.bold": "a770447d1592279fa87375dd7f5ecc7964f33f88",
-      "echoes.color.roles.danger.dark": "065fa4ec7ecde633abeaa4770ca28198289674fc",
-      "echoes.color.roles.highlight.lightest": "a451a67864aab79d72bb4710dbe686c05fef9ce8",
-      "echoes.color.roles.highlight.light": "c6109a2510dc38c6541f3cb184fe11b6a8fe43a6",
-      "echoes.color.roles.highlight.medium": "782e48f6c88d1abe2836ad61a0e4d2a95b78f6a5",
-      "echoes.color.roles.highlight.strong": "307167cf3ed55348314337df1fd7edf45d90f0d2",
-      "echoes.color.roles.highlight.bold": "e73d97d0dd805c9da95524673a48ac015eaac887",
-      "echoes.color.roles.highlight.dark": "2b1574233865fb0861caeb70883d885324bc1eb1",
       "echoes.color.palette.support.black": "7d59aca6990f5c47b9b96ed41a8743782c298272",
       "echoes.color.palette.support.white": "ef059170076e233799460efaecab4abe6ea4821d",
       "echoes.color.palette.support.transparent": "fa42802e7e3e00e90259717f44e83951e66993f7",
@@ -967,4 +867,4 @@
     },
     "group": "Brand"
   }
-]
\ No newline at end of file
+]
diff --git a/design-tokens/tokens/brand/brand-A/colors.json b/design-tokens/tokens/brand/brand-A/palettes/base.json
similarity index 66%
rename from design-tokens/tokens/brand/brand-A/colors.json
rename to design-tokens/tokens/brand/brand-A/palettes/base.json
index 5122feaa2..b8cc83282 100644
--- a/design-tokens/tokens/brand/brand-A/colors.json
+++ b/design-tokens/tokens/brand/brand-A/palettes/base.json
@@ -1,230 +1,6 @@
 {
   "echoes": {
     "color": {
-      "roles": {
-        "support": {
-          "black": {
-            "$type": "color",
-            "$value": "#000000"
-          },
-          "white": {
-            "$type": "color",
-            "$value": "#ffffff"
-          },
-          "transparent": {
-            "$type": "color",
-            "$value": "#00000000"
-          }
-        },
-        "neutral": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.900}"
-          }
-        },
-        "primary": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.900}"
-          }
-        },
-        "secondary": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.900}"
-          }
-        },
-        "info": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.900}"
-          }
-        },
-        "success": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.900}"
-          }
-        },
-        "warning": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.900}"
-          }
-        },
-        "danger": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.900}"
-          }
-        },
-        "highlight": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.900}"
-          }
-        }
-      },
       "palette": {
         "support": {
           "black": {
@@ -779,4 +555,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/design-tokens/tokens/brand/brand-A/palettes/dark.json b/design-tokens/tokens/brand/brand-A/palettes/dark.json
new file mode 100644
index 000000000..510080d29
--- /dev/null
+++ b/design-tokens/tokens/brand/brand-A/palettes/dark.json
@@ -0,0 +1,186 @@
+{
+  "echoes": {
+    "color": {
+      "palette": {
+        "ui": {
+          "gray": {
+            "1": { "$type": "color", "$value": "#0C0D10" },
+            "2": { "$type": "color", "$value": "#111417" },
+            "3": { "$type": "color", "$value": "#181B1F" },
+            "4": { "$type": "color", "$value": "#1E2227" },
+            "5": { "$type": "color", "$value": "#262B31" },
+            "6": { "$type": "color", "$value": "#333840" },
+            "7": { "$type": "color", "$value": "#474E57" },
+            "8": { "$type": "color", "$value": "#616A75" },
+            "9": { "$type": "color", "$value": "#7F8791" },
+            "10": { "$type": "color", "$value": "#999FA7" },
+            "11": { "$type": "color", "$value": "#B7BBC0" },
+            "12": { "$type": "color", "$value": "#F4F6F8" }
+          },
+          "gray-alpha": {
+            "1": { "$type": "color", "$value": "#FFFFFF05" },
+            "2": { "$type": "color", "$value": "#FFFFFF08" },
+            "3": { "$type": "color", "$value": "#FFFFFF0D" },
+            "4": { "$type": "color", "$value": "#FFFFFF14" },
+            "5": { "$type": "color", "$value": "#FFFFFF1F" },
+            "6": { "$type": "color", "$value": "#FFFFFF2E" },
+            "7": { "$type": "color", "$value": "#FFFFFF3D" },
+            "8": { "$type": "color", "$value": "#FFFFFF52" },
+            "9": { "$type": "color", "$value": "#FFFFFF70" },
+            "10": { "$type": "color", "$value": "#FFFFFF85" },
+            "11": { "$type": "color", "$value": "#FFFFFFB8" },
+            "12": { "$type": "color", "$value": "#FFFFFFEB" }
+          },
+          "blue": {
+            "1": { "$type": "color", "$value": "#10161F" },
+            "2": { "$type": "color", "$value": "#151D29" },
+            "3": { "$type": "color", "$value": "#1A2533" },
+            "4": { "$type": "color", "$value": "#202F42" },
+            "5": { "$type": "color", "$value": "#253851" },
+            "6": { "$type": "color", "$value": "#2E496B" },
+            "7": { "$type": "color", "$value": "#375D8F" },
+            "8": { "$type": "color", "$value": "#407BC7" },
+            "9": { "$type": "color", "$value": "#73A7EC" },
+            "10": { "$type": "color", "$value": "#92B7E8" },
+            "11": { "$type": "color", "$value": "#BACCE4" },
+            "12": { "$type": "color", "$value": "#EEF0F4" }
+          },
+          "green": {
+            "1": { "$type": "color", "$value": "#111811" },
+            "2": { "$type": "color", "$value": "#162016" },
+            "3": { "$type": "color", "$value": "#1B281B" },
+            "4": { "$type": "color", "$value": "#223322" },
+            "5": { "$type": "color", "$value": "#273D27" },
+            "6": { "$type": "color", "$value": "#315132" },
+            "7": { "$type": "color", "$value": "#3B693D" },
+            "8": { "$type": "color", "$value": "#458D49" },
+            "9": { "$type": "color", "$value": "#4FC059" },
+            "10": { "$type": "color", "$value": "#68CF6F" },
+            "11": { "$type": "color", "$value": "#94E197" },
+            "12": { "$type": "color", "$value": "#E8F4E8" }
+          },
+          "yellow": {
+            "1": { "$type": "color", "$value": "#181610" },
+            "2": { "$type": "color", "$value": "#201C15" },
+            "3": { "$type": "color", "$value": "#282319" },
+            "4": { "$type": "color", "$value": "#332D20" },
+            "5": { "$type": "color", "$value": "#3E3624" },
+            "6": { "$type": "color", "$value": "#52462E" },
+            "7": { "$type": "color", "$value": "#6B5A36" },
+            "8": { "$type": "color", "$value": "#90773F" },
+            "9": { "$type": "color", "$value": "#C69F47" },
+            "10": { "$type": "color", "$value": "#D4AF5F" },
+            "11": { "$type": "color", "$value": "#E3C78C" },
+            "12": { "$type": "color", "$value": "#F4F0E7" }
+          },
+          "red": {
+            "1": { "$type": "color", "$value": "#1F1211" },
+            "2": { "$type": "color", "$value": "#291716" },
+            "3": { "$type": "color", "$value": "#341D1A" },
+            "4": { "$type": "color", "$value": "#432421" },
+            "5": { "$type": "color", "$value": "#522926" },
+            "6": { "$type": "color", "$value": "#6D3431" },
+            "7": { "$type": "color", "$value": "#913F3A" },
+            "8": { "$type": "color", "$value": "#C74B46" },
+            "9": { "$type": "color", "$value": "#EE8078" },
+            "10": { "$type": "color", "$value": "#E99D96" },
+            "11": { "$type": "color", "$value": "#E5C1BD" },
+            "12": { "$type": "color", "$value": "#F4EFEE" }
+          },
+          "teal": {
+            "1": { "$type": "color", "$value": "#111717" },
+            "2": { "$type": "color", "$value": "#161F1E" },
+            "3": { "$type": "color", "$value": "#1B2726" },
+            "4": { "$type": "color", "$value": "#223130" },
+            "5": { "$type": "color", "$value": "#273B3A" },
+            "6": { "$type": "color", "$value": "#314E4C" },
+            "7": { "$type": "color", "$value": "#3B6562" },
+            "8": { "$type": "color", "$value": "#458783" },
+            "9": { "$type": "color", "$value": "#4FB8B2" },
+            "10": { "$type": "color", "$value": "#69C7C1" },
+            "11": { "$type": "color", "$value": "#95DAD4" },
+            "12": { "$type": "color", "$value": "#E4F4F2" }
+          },
+          "cyan": {
+            "1": { "$type": "color", "$value": "#111719" },
+            "2": { "$type": "color", "$value": "#161E21" },
+            "3": { "$type": "color", "$value": "#1B262A" },
+            "4": { "$type": "color", "$value": "#223135" },
+            "5": { "$type": "color", "$value": "#263A41" },
+            "6": { "$type": "color", "$value": "#314C55" },
+            "7": { "$type": "color", "$value": "#3A6370" },
+            "8": { "$type": "color", "$value": "#448498" },
+            "9": { "$type": "color", "$value": "#4EB3D1" },
+            "10": { "$type": "color", "$value": "#68C3DE" },
+            "11": { "$type": "color", "$value": "#A2D4E4" },
+            "12": { "$type": "color", "$value": "#EBF1F4" }
+          },
+          "purple": {
+            "1": { "$type": "color", "$value": "#181322" },
+            "2": { "$type": "color", "$value": "#20182D" },
+            "3": { "$type": "color", "$value": "#281E39" },
+            "4": { "$type": "color", "$value": "#332649" },
+            "5": { "$type": "color", "$value": "#3D2C5A" },
+            "6": { "$type": "color", "$value": "#513878" },
+            "7": { "$type": "color", "$value": "#6A43A1" },
+            "8": { "$type": "color", "$value": "#8D58D6" },
+            "9": { "$type": "color", "$value": "#B290EC" },
+            "10": { "$type": "color", "$value": "#BDA7E8" },
+            "11": { "$type": "color", "$value": "#CFC4E4" },
+            "12": { "$type": "color", "$value": "#F1EFF4" }
+          },
+          "magenta": {
+            "1": { "$type": "color", "$value": "#1E1219" },
+            "2": { "$type": "color", "$value": "#271722" },
+            "3": { "$type": "color", "$value": "#311C2A" },
+            "4": { "$type": "color", "$value": "#3F2336" },
+            "5": { "$type": "color", "$value": "#4D2841" },
+            "6": { "$type": "color", "$value": "#663356" },
+            "7": { "$type": "color", "$value": "#873D71" },
+            "8": { "$type": "color", "$value": "#B9499A" },
+            "9": { "$type": "color", "$value": "#EE6FC9" },
+            "10": { "$type": "color", "$value": "#EA93CD" },
+            "11": { "$type": "color", "$value": "#E5BDD6" },
+            "12": { "$type": "color", "$value": "#F4EEF2" }
+          },
+          "orange": {
+            "1": { "$type": "color", "$value": "#1B1410" },
+            "2": { "$type": "color", "$value": "#241B15" },
+            "3": { "$type": "color", "$value": "#2D2119" },
+            "4": { "$type": "color", "$value": "#3A2A1F" },
+            "5": { "$type": "color", "$value": "#463224" },
+            "6": { "$type": "color", "$value": "#5D412D" },
+            "7": { "$type": "color", "$value": "#7A5236" },
+            "8": { "$type": "color", "$value": "#A76A3E" },
+            "9": { "$type": "color", "$value": "#E68B46" },
+            "10": { "$type": "color", "$value": "#E9A271" },
+            "11": { "$type": "color", "$value": "#E5C3AD" },
+            "12": { "$type": "color", "$value": "#F4EFEC" }
+          },
+          "data-viz": {
+            "categorical": {
+              "1": { "$type": "color", "$value": "#78A7E5" },
+              "2": { "$type": "color", "$value": "#E986B7" },
+              "3": { "$type": "color", "$value": "#5CB8A7" },
+              "4": { "$type": "color", "$value": "#9F6BEB" },
+              "5": { "$type": "color", "$value": "#E89361" },
+              "6": { "$type": "color", "$value": "#8AD8F1" },
+              "7": { "$type": "color", "$value": "#F0A8E9" },
+              "8": { "$type": "color", "$value": "#91DC63" }
+            },
+            "severity": {
+              "blocker": { "$type": "color", "$value": "#D53A2C" },
+              "high": { "$type": "color", "$value": "#E98475" },
+              "medium": { "$type": "color", "$value": "#E39757" },
+              "low": { "$type": "color", "$value": "#CDB761" },
+              "info": { "$type": "color", "$value": "#78A7E5" }
+            },
+            "placeholder": {
+              "default": { "$type": "color", "$value": "#828282" }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/design-tokens/tokens/brand/brand-A/palettes/light.json b/design-tokens/tokens/brand/brand-A/palettes/light.json
new file mode 100644
index 000000000..d3f2d93ba
--- /dev/null
+++ b/design-tokens/tokens/brand/brand-A/palettes/light.json
@@ -0,0 +1,186 @@
+{
+  "echoes": {
+    "color": {
+      "palette": {
+        "ui": {
+          "gray": {
+            "1": { "$type": "color", "$value": "#FAFBFC" },
+            "2": { "$type": "color", "$value": "#F4F6F8" },
+            "3": { "$type": "color", "$value": "#EEF1F4" },
+            "4": { "$type": "color", "$value": "#E7EAEE" },
+            "5": { "$type": "color", "$value": "#DFE3E8" },
+            "6": { "$type": "color", "$value": "#D6DBE1" },
+            "7": { "$type": "color", "$value": "#C9CED6" },
+            "8": { "$type": "color", "$value": "#AEB5BE" },
+            "9": { "$type": "color", "$value": "#4D5663" },
+            "10": { "$type": "color", "$value": "#3B434E" },
+            "11": { "$type": "color", "$value": "#2A313A" },
+            "12": { "$type": "color", "$value": "#0A0A0A" }
+          },
+          "gray-alpha": {
+            "1": { "$type": "color", "$value": "#00000003" },
+            "2": { "$type": "color", "$value": "#00000005" },
+            "3": { "$type": "color", "$value": "#00000008" },
+            "4": { "$type": "color", "$value": "#0000000D" },
+            "5": { "$type": "color", "$value": "#00000014" },
+            "6": { "$type": "color", "$value": "#0000001F" },
+            "7": { "$type": "color", "$value": "#0000002E" },
+            "8": { "$type": "color", "$value": "#00000047" },
+            "9": { "$type": "color", "$value": "#000000A6" },
+            "10": { "$type": "color", "$value": "#000000B8" },
+            "11": { "$type": "color", "$value": "#000000C7" },
+            "12": { "$type": "color", "$value": "#000000E6" }
+          },
+          "blue": {
+            "1": { "$type": "color", "$value": "#F9FAFC" },
+            "2": { "$type": "color", "$value": "#F4F6FA" },
+            "3": { "$type": "color", "$value": "#EBF0F7" },
+            "4": { "$type": "color", "$value": "#E1E9F3" },
+            "5": { "$type": "color", "$value": "#D1DEEE" },
+            "6": { "$type": "color", "$value": "#B7CBE5" },
+            "7": { "$type": "color", "$value": "#8CAFDD" },
+            "8": { "$type": "color", "$value": "#508FE0" },
+            "9": { "$type": "color", "$value": "#126ED3" },
+            "10": { "$type": "color", "$value": "#2360AB" },
+            "11": { "$type": "color", "$value": "#275085" },
+            "12": { "$type": "color", "$value": "#1E2F44" }
+          },
+          "green": {
+            "1": { "$type": "color", "$value": "#F7FCF7" },
+            "2": { "$type": "color", "$value": "#EFFAEF" },
+            "3": { "$type": "color", "$value": "#E1F7E1" },
+            "4": { "$type": "color", "$value": "#CFF3CF" },
+            "5": { "$type": "color", "$value": "#B1EFB2" },
+            "6": { "$type": "color", "$value": "#8EE090" },
+            "7": { "$type": "color", "$value": "#71C375" },
+            "8": { "$type": "color", "$value": "#4BA452" },
+            "9": { "$type": "color", "$value": "#158829" },
+            "10": { "$type": "color", "$value": "#27722E" },
+            "11": { "$type": "color", "$value": "#2B5D2E" },
+            "12": { "$type": "color", "$value": "#203320" }
+          },
+          "yellow": {
+            "1": { "$type": "color", "$value": "#FCFAF7" },
+            "2": { "$type": "color", "$value": "#FAF6EE" },
+            "3": { "$type": "color", "$value": "#F7EFE0" },
+            "4": { "$type": "color", "$value": "#F3E7CD" },
+            "5": { "$type": "color", "$value": "#EEDAB2" },
+            "6": { "$type": "color", "$value": "#E4C585" },
+            "7": { "$type": "color", "$value": "#C6A869" },
+            "8": { "$type": "color", "$value": "#A88944" },
+            "9": { "$type": "color", "$value": "#8D6B12" },
+            "10": { "$type": "color", "$value": "#765C22" },
+            "11": { "$type": "color", "$value": "#5F4D27" },
+            "12": { "$type": "color", "$value": "#342D1E" }
+          },
+          "red": {
+            "1": { "$type": "color", "$value": "#FCFAFA" },
+            "2": { "$type": "color", "$value": "#FAF5F4" },
+            "3": { "$type": "color", "$value": "#F7EDEC" },
+            "4": { "$type": "color", "$value": "#F3E4E2" },
+            "5": { "$type": "color", "$value": "#EED6D3" },
+            "6": { "$type": "color", "$value": "#E6BEB9" },
+            "7": { "$type": "color", "$value": "#E0968F" },
+            "8": { "$type": "color", "$value": "#E45A54" },
+            "9": { "$type": "color", "$value": "#CF1926" },
+            "10": { "$type": "color", "$value": "#A92B2C" },
+            "11": { "$type": "color", "$value": "#852F2C" },
+            "12": { "$type": "color", "$value": "#46221F" }
+          },
+          "teal": {
+            "1": { "$type": "color", "$value": "#F6FCFB" },
+            "2": { "$type": "color", "$value": "#EBFAF8" },
+            "3": { "$type": "color", "$value": "#DAF7F4" },
+            "4": { "$type": "color", "$value": "#C2F3EF" },
+            "5": { "$type": "color", "$value": "#9FEDE8" },
+            "6": { "$type": "color", "$value": "#8ED9D4" },
+            "7": { "$type": "color", "$value": "#72BCB7" },
+            "8": { "$type": "color", "$value": "#4C9D98" },
+            "9": { "$type": "color", "$value": "#15817C" },
+            "10": { "$type": "color", "$value": "#276D69" },
+            "11": { "$type": "color", "$value": "#2B5956" },
+            "12": { "$type": "color", "$value": "#203230" }
+          },
+          "cyan": {
+            "1": { "$type": "color", "$value": "#F8FBFC" },
+            "2": { "$type": "color", "$value": "#F1F7FA" },
+            "3": { "$type": "color", "$value": "#E6F2F7" },
+            "4": { "$type": "color", "$value": "#D7ECF3" },
+            "5": { "$type": "color", "$value": "#C2E3EE" },
+            "6": { "$type": "color", "$value": "#9BD3E5" },
+            "7": { "$type": "color", "$value": "#71B8CF" },
+            "8": { "$type": "color", "$value": "#4B9AB1" },
+            "9": { "$type": "color", "$value": "#157D96" },
+            "10": { "$type": "color", "$value": "#266A7D" },
+            "11": { "$type": "color", "$value": "#2B5764" },
+            "12": { "$type": "color", "$value": "#203136" }
+          },
+          "purple": {
+            "1": { "$type": "color", "$value": "#FBFAFC" },
+            "2": { "$type": "color", "$value": "#F7F5FA" },
+            "3": { "$type": "color", "$value": "#F1EEF7" },
+            "4": { "$type": "color", "$value": "#E9E5F3" },
+            "5": { "$type": "color", "$value": "#DFD8EE" },
+            "6": { "$type": "color", "$value": "#CEC2E5" },
+            "7": { "$type": "color", "$value": "#B5A0DD" },
+            "8": { "$type": "color", "$value": "#9E73E0" },
+            "9": { "$type": "color", "$value": "#8F1CF5" },
+            "10": { "$type": "color", "$value": "#7630C4" },
+            "11": { "$type": "color", "$value": "#5F3397" },
+            "12": { "$type": "color", "$value": "#34244C" }
+          },
+          "magenta": {
+            "1": { "$type": "color", "$value": "#FCFAFB" },
+            "2": { "$type": "color", "$value": "#FAF4F8" },
+            "3": { "$type": "color", "$value": "#F7ECF3" },
+            "4": { "$type": "color", "$value": "#F3E2ED" },
+            "5": { "$type": "color", "$value": "#EED3E4" },
+            "6": { "$type": "color", "$value": "#E7B9D6" },
+            "7": { "$type": "color", "$value": "#E08DC5" },
+            "8": { "$type": "color", "$value": "#D950B3" },
+            "9": { "$type": "color", "$value": "#BD1898" },
+            "10": { "$type": "color", "$value": "#9C2A7F" },
+            "11": { "$type": "color", "$value": "#7B2E65" },
+            "12": { "$type": "color", "$value": "#412137" }
+          },
+          "orange": {
+            "1": { "$type": "color", "$value": "#FCFAF9" },
+            "2": { "$type": "color", "$value": "#FAF5F2" },
+            "3": { "$type": "color", "$value": "#F7EEE8" },
+            "4": { "$type": "color", "$value": "#F3E5DC" },
+            "5": { "$type": "color", "$value": "#EED7C9" },
+            "6": { "$type": "color", "$value": "#E6C0A7" },
+            "7": { "$type": "color", "$value": "#DF9B6C" },
+            "8": { "$type": "color", "$value": "#C37944" },
+            "9": { "$type": "color", "$value": "#A85811" },
+            "10": { "$type": "color", "$value": "#8B4F22" },
+            "11": { "$type": "color", "$value": "#6E4426" },
+            "12": { "$type": "color", "$value": "#3B291D" }
+          },
+          "data-viz": {
+            "categorical": {
+              "1": { "$type": "color", "$value": "#347BD0" },
+              "2": { "$type": "color", "$value": "#D44194" },
+              "3": { "$type": "color", "$value": "#388779" },
+              "4": { "$type": "color", "$value": "#8838E0" },
+              "5": { "$type": "color", "$value": "#C66F39" },
+              "6": { "$type": "color", "$value": "#295A69" },
+              "7": { "$type": "color", "$value": "#84307F" },
+              "8": { "$type": "color", "$value": "#3D6127" }
+            },
+            "severity": {
+              "blocker": { "$type": "color", "$value": "#5E221A" },
+              "high": { "$type": "color", "$value": "#AE2E22" },
+              "medium": { "$type": "color", "$value": "#A2642A" },
+              "low": { "$type": "color", "$value": "#937F30" },
+              "info": { "$type": "color", "$value": "#2E6FBD" }
+            },
+            "placeholder": {
+              "default": { "$type": "color", "$value": "#737373" }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/design-tokens/tokens/brand/brand-B/colors.json b/design-tokens/tokens/brand/brand-B/palettes/base.json
similarity index 66%
rename from design-tokens/tokens/brand/brand-B/colors.json
rename to design-tokens/tokens/brand/brand-B/palettes/base.json
index 5122feaa2..b8cc83282 100644
--- a/design-tokens/tokens/brand/brand-B/colors.json
+++ b/design-tokens/tokens/brand/brand-B/palettes/base.json
@@ -1,230 +1,6 @@
 {
   "echoes": {
     "color": {
-      "roles": {
-        "support": {
-          "black": {
-            "$type": "color",
-            "$value": "#000000"
-          },
-          "white": {
-            "$type": "color",
-            "$value": "#ffffff"
-          },
-          "transparent": {
-            "$type": "color",
-            "$value": "#00000000"
-          }
-        },
-        "neutral": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.900}"
-          }
-        },
-        "primary": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.indigo.900}"
-          }
-        },
-        "secondary": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.tangerine.900}"
-          }
-        },
-        "info": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.900}"
-          }
-        },
-        "success": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.900}"
-          }
-        },
-        "warning": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.900}"
-          }
-        },
-        "danger": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.900}"
-          }
-        },
-        "highlight": {
-          "lightest": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.50}"
-          },
-          "light": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.100}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.300}"
-          },
-          "strong": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.500}"
-          },
-          "bold": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.700}"
-          },
-          "dark": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.purple.900}"
-          }
-        }
-      },
       "palette": {
         "support": {
           "black": {
@@ -779,4 +555,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/design-tokens/tokens/brand/brand-B/palettes/dark.json b/design-tokens/tokens/brand/brand-B/palettes/dark.json
new file mode 100644
index 000000000..510080d29
--- /dev/null
+++ b/design-tokens/tokens/brand/brand-B/palettes/dark.json
@@ -0,0 +1,186 @@
+{
+  "echoes": {
+    "color": {
+      "palette": {
+        "ui": {
+          "gray": {
+            "1": { "$type": "color", "$value": "#0C0D10" },
+            "2": { "$type": "color", "$value": "#111417" },
+            "3": { "$type": "color", "$value": "#181B1F" },
+            "4": { "$type": "color", "$value": "#1E2227" },
+            "5": { "$type": "color", "$value": "#262B31" },
+            "6": { "$type": "color", "$value": "#333840" },
+            "7": { "$type": "color", "$value": "#474E57" },
+            "8": { "$type": "color", "$value": "#616A75" },
+            "9": { "$type": "color", "$value": "#7F8791" },
+            "10": { "$type": "color", "$value": "#999FA7" },
+            "11": { "$type": "color", "$value": "#B7BBC0" },
+            "12": { "$type": "color", "$value": "#F4F6F8" }
+          },
+          "gray-alpha": {
+            "1": { "$type": "color", "$value": "#FFFFFF05" },
+            "2": { "$type": "color", "$value": "#FFFFFF08" },
+            "3": { "$type": "color", "$value": "#FFFFFF0D" },
+            "4": { "$type": "color", "$value": "#FFFFFF14" },
+            "5": { "$type": "color", "$value": "#FFFFFF1F" },
+            "6": { "$type": "color", "$value": "#FFFFFF2E" },
+            "7": { "$type": "color", "$value": "#FFFFFF3D" },
+            "8": { "$type": "color", "$value": "#FFFFFF52" },
+            "9": { "$type": "color", "$value": "#FFFFFF70" },
+            "10": { "$type": "color", "$value": "#FFFFFF85" },
+            "11": { "$type": "color", "$value": "#FFFFFFB8" },
+            "12": { "$type": "color", "$value": "#FFFFFFEB" }
+          },
+          "blue": {
+            "1": { "$type": "color", "$value": "#10161F" },
+            "2": { "$type": "color", "$value": "#151D29" },
+            "3": { "$type": "color", "$value": "#1A2533" },
+            "4": { "$type": "color", "$value": "#202F42" },
+            "5": { "$type": "color", "$value": "#253851" },
+            "6": { "$type": "color", "$value": "#2E496B" },
+            "7": { "$type": "color", "$value": "#375D8F" },
+            "8": { "$type": "color", "$value": "#407BC7" },
+            "9": { "$type": "color", "$value": "#73A7EC" },
+            "10": { "$type": "color", "$value": "#92B7E8" },
+            "11": { "$type": "color", "$value": "#BACCE4" },
+            "12": { "$type": "color", "$value": "#EEF0F4" }
+          },
+          "green": {
+            "1": { "$type": "color", "$value": "#111811" },
+            "2": { "$type": "color", "$value": "#162016" },
+            "3": { "$type": "color", "$value": "#1B281B" },
+            "4": { "$type": "color", "$value": "#223322" },
+            "5": { "$type": "color", "$value": "#273D27" },
+            "6": { "$type": "color", "$value": "#315132" },
+            "7": { "$type": "color", "$value": "#3B693D" },
+            "8": { "$type": "color", "$value": "#458D49" },
+            "9": { "$type": "color", "$value": "#4FC059" },
+            "10": { "$type": "color", "$value": "#68CF6F" },
+            "11": { "$type": "color", "$value": "#94E197" },
+            "12": { "$type": "color", "$value": "#E8F4E8" }
+          },
+          "yellow": {
+            "1": { "$type": "color", "$value": "#181610" },
+            "2": { "$type": "color", "$value": "#201C15" },
+            "3": { "$type": "color", "$value": "#282319" },
+            "4": { "$type": "color", "$value": "#332D20" },
+            "5": { "$type": "color", "$value": "#3E3624" },
+            "6": { "$type": "color", "$value": "#52462E" },
+            "7": { "$type": "color", "$value": "#6B5A36" },
+            "8": { "$type": "color", "$value": "#90773F" },
+            "9": { "$type": "color", "$value": "#C69F47" },
+            "10": { "$type": "color", "$value": "#D4AF5F" },
+            "11": { "$type": "color", "$value": "#E3C78C" },
+            "12": { "$type": "color", "$value": "#F4F0E7" }
+          },
+          "red": {
+            "1": { "$type": "color", "$value": "#1F1211" },
+            "2": { "$type": "color", "$value": "#291716" },
+            "3": { "$type": "color", "$value": "#341D1A" },
+            "4": { "$type": "color", "$value": "#432421" },
+            "5": { "$type": "color", "$value": "#522926" },
+            "6": { "$type": "color", "$value": "#6D3431" },
+            "7": { "$type": "color", "$value": "#913F3A" },
+            "8": { "$type": "color", "$value": "#C74B46" },
+            "9": { "$type": "color", "$value": "#EE8078" },
+            "10": { "$type": "color", "$value": "#E99D96" },
+            "11": { "$type": "color", "$value": "#E5C1BD" },
+            "12": { "$type": "color", "$value": "#F4EFEE" }
+          },
+          "teal": {
+            "1": { "$type": "color", "$value": "#111717" },
+            "2": { "$type": "color", "$value": "#161F1E" },
+            "3": { "$type": "color", "$value": "#1B2726" },
+            "4": { "$type": "color", "$value": "#223130" },
+            "5": { "$type": "color", "$value": "#273B3A" },
+            "6": { "$type": "color", "$value": "#314E4C" },
+            "7": { "$type": "color", "$value": "#3B6562" },
+            "8": { "$type": "color", "$value": "#458783" },
+            "9": { "$type": "color", "$value": "#4FB8B2" },
+            "10": { "$type": "color", "$value": "#69C7C1" },
+            "11": { "$type": "color", "$value": "#95DAD4" },
+            "12": { "$type": "color", "$value": "#E4F4F2" }
+          },
+          "cyan": {
+            "1": { "$type": "color", "$value": "#111719" },
+            "2": { "$type": "color", "$value": "#161E21" },
+            "3": { "$type": "color", "$value": "#1B262A" },
+            "4": { "$type": "color", "$value": "#223135" },
+            "5": { "$type": "color", "$value": "#263A41" },
+            "6": { "$type": "color", "$value": "#314C55" },
+            "7": { "$type": "color", "$value": "#3A6370" },
+            "8": { "$type": "color", "$value": "#448498" },
+            "9": { "$type": "color", "$value": "#4EB3D1" },
+            "10": { "$type": "color", "$value": "#68C3DE" },
+            "11": { "$type": "color", "$value": "#A2D4E4" },
+            "12": { "$type": "color", "$value": "#EBF1F4" }
+          },
+          "purple": {
+            "1": { "$type": "color", "$value": "#181322" },
+            "2": { "$type": "color", "$value": "#20182D" },
+            "3": { "$type": "color", "$value": "#281E39" },
+            "4": { "$type": "color", "$value": "#332649" },
+            "5": { "$type": "color", "$value": "#3D2C5A" },
+            "6": { "$type": "color", "$value": "#513878" },
+            "7": { "$type": "color", "$value": "#6A43A1" },
+            "8": { "$type": "color", "$value": "#8D58D6" },
+            "9": { "$type": "color", "$value": "#B290EC" },
+            "10": { "$type": "color", "$value": "#BDA7E8" },
+            "11": { "$type": "color", "$value": "#CFC4E4" },
+            "12": { "$type": "color", "$value": "#F1EFF4" }
+          },
+          "magenta": {
+            "1": { "$type": "color", "$value": "#1E1219" },
+            "2": { "$type": "color", "$value": "#271722" },
+            "3": { "$type": "color", "$value": "#311C2A" },
+            "4": { "$type": "color", "$value": "#3F2336" },
+            "5": { "$type": "color", "$value": "#4D2841" },
+            "6": { "$type": "color", "$value": "#663356" },
+            "7": { "$type": "color", "$value": "#873D71" },
+            "8": { "$type": "color", "$value": "#B9499A" },
+            "9": { "$type": "color", "$value": "#EE6FC9" },
+            "10": { "$type": "color", "$value": "#EA93CD" },
+            "11": { "$type": "color", "$value": "#E5BDD6" },
+            "12": { "$type": "color", "$value": "#F4EEF2" }
+          },
+          "orange": {
+            "1": { "$type": "color", "$value": "#1B1410" },
+            "2": { "$type": "color", "$value": "#241B15" },
+            "3": { "$type": "color", "$value": "#2D2119" },
+            "4": { "$type": "color", "$value": "#3A2A1F" },
+            "5": { "$type": "color", "$value": "#463224" },
+            "6": { "$type": "color", "$value": "#5D412D" },
+            "7": { "$type": "color", "$value": "#7A5236" },
+            "8": { "$type": "color", "$value": "#A76A3E" },
+            "9": { "$type": "color", "$value": "#E68B46" },
+            "10": { "$type": "color", "$value": "#E9A271" },
+            "11": { "$type": "color", "$value": "#E5C3AD" },
+            "12": { "$type": "color", "$value": "#F4EFEC" }
+          },
+          "data-viz": {
+            "categorical": {
+              "1": { "$type": "color", "$value": "#78A7E5" },
+              "2": { "$type": "color", "$value": "#E986B7" },
+              "3": { "$type": "color", "$value": "#5CB8A7" },
+              "4": { "$type": "color", "$value": "#9F6BEB" },
+              "5": { "$type": "color", "$value": "#E89361" },
+              "6": { "$type": "color", "$value": "#8AD8F1" },
+              "7": { "$type": "color", "$value": "#F0A8E9" },
+              "8": { "$type": "color", "$value": "#91DC63" }
+            },
+            "severity": {
+              "blocker": { "$type": "color", "$value": "#D53A2C" },
+              "high": { "$type": "color", "$value": "#E98475" },
+              "medium": { "$type": "color", "$value": "#E39757" },
+              "low": { "$type": "color", "$value": "#CDB761" },
+              "info": { "$type": "color", "$value": "#78A7E5" }
+            },
+            "placeholder": {
+              "default": { "$type": "color", "$value": "#828282" }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/design-tokens/tokens/brand/brand-B/palettes/light.json b/design-tokens/tokens/brand/brand-B/palettes/light.json
new file mode 100644
index 000000000..d3f2d93ba
--- /dev/null
+++ b/design-tokens/tokens/brand/brand-B/palettes/light.json
@@ -0,0 +1,186 @@
+{
+  "echoes": {
+    "color": {
+      "palette": {
+        "ui": {
+          "gray": {
+            "1": { "$type": "color", "$value": "#FAFBFC" },
+            "2": { "$type": "color", "$value": "#F4F6F8" },
+            "3": { "$type": "color", "$value": "#EEF1F4" },
+            "4": { "$type": "color", "$value": "#E7EAEE" },
+            "5": { "$type": "color", "$value": "#DFE3E8" },
+            "6": { "$type": "color", "$value": "#D6DBE1" },
+            "7": { "$type": "color", "$value": "#C9CED6" },
+            "8": { "$type": "color", "$value": "#AEB5BE" },
+            "9": { "$type": "color", "$value": "#4D5663" },
+            "10": { "$type": "color", "$value": "#3B434E" },
+            "11": { "$type": "color", "$value": "#2A313A" },
+            "12": { "$type": "color", "$value": "#0A0A0A" }
+          },
+          "gray-alpha": {
+            "1": { "$type": "color", "$value": "#00000003" },
+            "2": { "$type": "color", "$value": "#00000005" },
+            "3": { "$type": "color", "$value": "#00000008" },
+            "4": { "$type": "color", "$value": "#0000000D" },
+            "5": { "$type": "color", "$value": "#00000014" },
+            "6": { "$type": "color", "$value": "#0000001F" },
+            "7": { "$type": "color", "$value": "#0000002E" },
+            "8": { "$type": "color", "$value": "#00000047" },
+            "9": { "$type": "color", "$value": "#000000A6" },
+            "10": { "$type": "color", "$value": "#000000B8" },
+            "11": { "$type": "color", "$value": "#000000C7" },
+            "12": { "$type": "color", "$value": "#000000E6" }
+          },
+          "blue": {
+            "1": { "$type": "color", "$value": "#F9FAFC" },
+            "2": { "$type": "color", "$value": "#F4F6FA" },
+            "3": { "$type": "color", "$value": "#EBF0F7" },
+            "4": { "$type": "color", "$value": "#E1E9F3" },
+            "5": { "$type": "color", "$value": "#D1DEEE" },
+            "6": { "$type": "color", "$value": "#B7CBE5" },
+            "7": { "$type": "color", "$value": "#8CAFDD" },
+            "8": { "$type": "color", "$value": "#508FE0" },
+            "9": { "$type": "color", "$value": "#126ED3" },
+            "10": { "$type": "color", "$value": "#2360AB" },
+            "11": { "$type": "color", "$value": "#275085" },
+            "12": { "$type": "color", "$value": "#1E2F44" }
+          },
+          "green": {
+            "1": { "$type": "color", "$value": "#F7FCF7" },
+            "2": { "$type": "color", "$value": "#EFFAEF" },
+            "3": { "$type": "color", "$value": "#E1F7E1" },
+            "4": { "$type": "color", "$value": "#CFF3CF" },
+            "5": { "$type": "color", "$value": "#B1EFB2" },
+            "6": { "$type": "color", "$value": "#8EE090" },
+            "7": { "$type": "color", "$value": "#71C375" },
+            "8": { "$type": "color", "$value": "#4BA452" },
+            "9": { "$type": "color", "$value": "#158829" },
+            "10": { "$type": "color", "$value": "#27722E" },
+            "11": { "$type": "color", "$value": "#2B5D2E" },
+            "12": { "$type": "color", "$value": "#203320" }
+          },
+          "yellow": {
+            "1": { "$type": "color", "$value": "#FCFAF7" },
+            "2": { "$type": "color", "$value": "#FAF6EE" },
+            "3": { "$type": "color", "$value": "#F7EFE0" },
+            "4": { "$type": "color", "$value": "#F3E7CD" },
+            "5": { "$type": "color", "$value": "#EEDAB2" },
+            "6": { "$type": "color", "$value": "#E4C585" },
+            "7": { "$type": "color", "$value": "#C6A869" },
+            "8": { "$type": "color", "$value": "#A88944" },
+            "9": { "$type": "color", "$value": "#8D6B12" },
+            "10": { "$type": "color", "$value": "#765C22" },
+            "11": { "$type": "color", "$value": "#5F4D27" },
+            "12": { "$type": "color", "$value": "#342D1E" }
+          },
+          "red": {
+            "1": { "$type": "color", "$value": "#FCFAFA" },
+            "2": { "$type": "color", "$value": "#FAF5F4" },
+            "3": { "$type": "color", "$value": "#F7EDEC" },
+            "4": { "$type": "color", "$value": "#F3E4E2" },
+            "5": { "$type": "color", "$value": "#EED6D3" },
+            "6": { "$type": "color", "$value": "#E6BEB9" },
+            "7": { "$type": "color", "$value": "#E0968F" },
+            "8": { "$type": "color", "$value": "#E45A54" },
+            "9": { "$type": "color", "$value": "#CF1926" },
+            "10": { "$type": "color", "$value": "#A92B2C" },
+            "11": { "$type": "color", "$value": "#852F2C" },
+            "12": { "$type": "color", "$value": "#46221F" }
+          },
+          "teal": {
+            "1": { "$type": "color", "$value": "#F6FCFB" },
+            "2": { "$type": "color", "$value": "#EBFAF8" },
+            "3": { "$type": "color", "$value": "#DAF7F4" },
+            "4": { "$type": "color", "$value": "#C2F3EF" },
+            "5": { "$type": "color", "$value": "#9FEDE8" },
+            "6": { "$type": "color", "$value": "#8ED9D4" },
+            "7": { "$type": "color", "$value": "#72BCB7" },
+            "8": { "$type": "color", "$value": "#4C9D98" },
+            "9": { "$type": "color", "$value": "#15817C" },
+            "10": { "$type": "color", "$value": "#276D69" },
+            "11": { "$type": "color", "$value": "#2B5956" },
+            "12": { "$type": "color", "$value": "#203230" }
+          },
+          "cyan": {
+            "1": { "$type": "color", "$value": "#F8FBFC" },
+            "2": { "$type": "color", "$value": "#F1F7FA" },
+            "3": { "$type": "color", "$value": "#E6F2F7" },
+            "4": { "$type": "color", "$value": "#D7ECF3" },
+            "5": { "$type": "color", "$value": "#C2E3EE" },
+            "6": { "$type": "color", "$value": "#9BD3E5" },
+            "7": { "$type": "color", "$value": "#71B8CF" },
+            "8": { "$type": "color", "$value": "#4B9AB1" },
+            "9": { "$type": "color", "$value": "#157D96" },
+            "10": { "$type": "color", "$value": "#266A7D" },
+            "11": { "$type": "color", "$value": "#2B5764" },
+            "12": { "$type": "color", "$value": "#203136" }
+          },
+          "purple": {
+            "1": { "$type": "color", "$value": "#FBFAFC" },
+            "2": { "$type": "color", "$value": "#F7F5FA" },
+            "3": { "$type": "color", "$value": "#F1EEF7" },
+            "4": { "$type": "color", "$value": "#E9E5F3" },
+            "5": { "$type": "color", "$value": "#DFD8EE" },
+            "6": { "$type": "color", "$value": "#CEC2E5" },
+            "7": { "$type": "color", "$value": "#B5A0DD" },
+            "8": { "$type": "color", "$value": "#9E73E0" },
+            "9": { "$type": "color", "$value": "#8F1CF5" },
+            "10": { "$type": "color", "$value": "#7630C4" },
+            "11": { "$type": "color", "$value": "#5F3397" },
+            "12": { "$type": "color", "$value": "#34244C" }
+          },
+          "magenta": {
+            "1": { "$type": "color", "$value": "#FCFAFB" },
+            "2": { "$type": "color", "$value": "#FAF4F8" },
+            "3": { "$type": "color", "$value": "#F7ECF3" },
+            "4": { "$type": "color", "$value": "#F3E2ED" },
+            "5": { "$type": "color", "$value": "#EED3E4" },
+            "6": { "$type": "color", "$value": "#E7B9D6" },
+            "7": { "$type": "color", "$value": "#E08DC5" },
+            "8": { "$type": "color", "$value": "#D950B3" },
+            "9": { "$type": "color", "$value": "#BD1898" },
+            "10": { "$type": "color", "$value": "#9C2A7F" },
+            "11": { "$type": "color", "$value": "#7B2E65" },
+            "12": { "$type": "color", "$value": "#412137" }
+          },
+          "orange": {
+            "1": { "$type": "color", "$value": "#FCFAF9" },
+            "2": { "$type": "color", "$value": "#FAF5F2" },
+            "3": { "$type": "color", "$value": "#F7EEE8" },
+            "4": { "$type": "color", "$value": "#F3E5DC" },
+            "5": { "$type": "color", "$value": "#EED7C9" },
+            "6": { "$type": "color", "$value": "#E6C0A7" },
+            "7": { "$type": "color", "$value": "#DF9B6C" },
+            "8": { "$type": "color", "$value": "#C37944" },
+            "9": { "$type": "color", "$value": "#A85811" },
+            "10": { "$type": "color", "$value": "#8B4F22" },
+            "11": { "$type": "color", "$value": "#6E4426" },
+            "12": { "$type": "color", "$value": "#3B291D" }
+          },
+          "data-viz": {
+            "categorical": {
+              "1": { "$type": "color", "$value": "#347BD0" },
+              "2": { "$type": "color", "$value": "#D44194" },
+              "3": { "$type": "color", "$value": "#388779" },
+              "4": { "$type": "color", "$value": "#8838E0" },
+              "5": { "$type": "color", "$value": "#C66F39" },
+              "6": { "$type": "color", "$value": "#295A69" },
+              "7": { "$type": "color", "$value": "#84307F" },
+              "8": { "$type": "color", "$value": "#3D6127" }
+            },
+            "severity": {
+              "blocker": { "$type": "color", "$value": "#5E221A" },
+              "high": { "$type": "color", "$value": "#AE2E22" },
+              "medium": { "$type": "color", "$value": "#A2642A" },
+              "low": { "$type": "color", "$value": "#937F30" },
+              "info": { "$type": "color", "$value": "#2E6FBD" }
+            },
+            "placeholder": {
+              "default": { "$type": "color", "$value": "#737373" }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/design-tokens/tokens/component/dark.json b/design-tokens/tokens/component/dark.json
index fa6e8d69a..2fb78e5cd 100644
--- a/design-tokens/tokens/component/dark.json
+++ b/design-tokens/tokens/component/dark.json
@@ -1,80 +1,141 @@
 {
   "echoes": {
-    "bottom-scroll": {
+    "button": {
       "colors": {
-        "shadow": {
-          "gradient": {
-            "$type": "color",
-            "$value": "#ffffff33"
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.background.action.neutral.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.background.action.neutral.hover}" },
+          "active": { "$type": "color", "$value": "{echoes.color.background.action.neutral.active}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.surface.disabled}" }
+        },
+        "border": {
+          "default": { "$type": "color", "$value": "{echoes.color.border.action.neutral}" }
+        },
+        "text": {
+          "default": { "$type": "color", "$value": "{echoes.color.text.onAction}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+        },
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" },
+        "outlined": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+            "active": { "$type": "color", "$value": "{echoes.color.surface.active}" },
+            "focus": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.surface.disabled}" }
+          },
+          "border": {
+            "default": { "$type": "color", "$value": "{echoes.color.border.bolder}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.color.text.link.default}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+          }
+        },
+        "ghost": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.hover}" },
+            "active": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.active}" },
+            "focus": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.focus}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.default}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.color.text.link.default}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
           }
         }
       }
     },
-    "form-control": {
+    "input": {
       "colors": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.surface.default}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.surface.hover}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.surface.disabled}" }
         },
         "border": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.border.bolder}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.border.weak}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.border.bolder}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.border.bold}" }
         },
+        "text": {
+          "default": { "$type": "color", "$value": "{echoes.color.text.strong}" },
+          "placeholder": { "$type": "color", "$value": "{echoes.color.text.subtle}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+        },
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" },
         "icon": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.icon.subtle}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.icon.subtle}" }
         }
       }
     },
-    "logos": {
+    "navigation-item": {
       "colors": {
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.background.selected.weak.default}" },
+          "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.weak.hover}" }
+        },
         "text": {
-          "$type": "color",
-          "$value": "#ffffff"
+          "default": { "$type": "color", "$value": "{echoes.color.text.strong}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.text.strong}" }
         },
-        "brand": {
-          "$type": "color",
-          "$value": "#ffffff"
+        "icon": {
+          "default": { "$type": "color", "$value": "{echoes.color.icon.subtle}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.icon.bold}" }
         },
-        "sonar-whale": {
-          "$type": "color",
-          "$value": "#d3121d"
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" }
+      }
+    },
+    "issue-row": {
+      "colors": {
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.background.selected.weak.default}" },
+          "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.weak.hover}" }
+        },
+        "border": { "$type": "color", "$value": "{echoes.color.border.weak}" }
+      }
+    },
+    "bottom-scroll": {
+      "colors": {
+        "shadow": {
+          "gradient": { "$type": "color", "$value": "#ffffff33" }
         }
       }
     },
+    "form-control": {
+      "colors": {
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" }
+        },
+        "border": {
+          "default": { "$type": "color", "$value": "{echoes.color.border.bolder}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.border.weak}" }
+        },
+        "icon": {
+          "default": { "$type": "color", "$value": "{echoes.color.icon.subtle}" }
+        }
+      }
+    },
+    "logos": {
+      "colors": {
+        "text": { "$type": "color", "$value": "#ffffff" },
+        "brand": { "$type": "color", "$value": "#ffffff" },
+        "sonar-whale": { "$type": "color", "$value": "#d3121d" }
+      }
+    },
     "margin-indicator": {
       "colors": {
         "background": {
-          "duplication": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.300}"
-          },
-          "covered": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.200}"
-          },
-          "partially-covered": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.300}"
-          },
-          "uncovered": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.300}"
-          }
+          "duplication": { "$type": "color", "$value": "{echoes.color.palette.grey.300}" },
+          "covered": { "$type": "color", "$value": "{echoes.color.palette.green.200}" },
+          "partially-covered": { "$type": "color", "$value": "{echoes.color.palette.yellow.300}" },
+          "uncovered": { "$type": "color", "$value": "{echoes.color.palette.red.300}" }
         }
       }
     },
@@ -96,10 +157,7 @@
     "quality-gate-indicator": {
       "colors": {
         "passed": {
-          "icon": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.100}"
-          },
+          "icon": { "$type": "color", "$value": "{echoes.color.palette.green.100}" },
           "background": {
             "$extensions": {
               "studio.tokens": {
@@ -115,10 +173,7 @@
           }
         },
         "failed": {
-          "icon": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.100}"
-          },
+          "icon": { "$type": "color", "$value": "{echoes.color.palette.red.100}" },
           "background": {
             "$extensions": {
               "studio.tokens": {
@@ -139,74 +194,41 @@
       "colors": {
         "background": {
           "ratingA": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.data.ratings.emerald.5}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.data.ratings.emerald.5}" }
           },
           "ratingB": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.green.700}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.green.700}" }
           },
           "ratingC": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.700}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.700}" }
           },
           "ratingD": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.700}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.700}" }
           },
           "ratingE": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.700}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.700}" }
           }
         },
         "text": {
           "ratingA": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.data.ratings.emerald.1}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.data.ratings.emerald.1}" }
           },
           "ratingB": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.green.50}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.green.50}" }
           },
           "ratingC": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.50}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.50}" }
           },
           "ratingD": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.50}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.50}" }
           },
           "ratingE": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.50}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.50}" }
           }
         },
         "border": {
           "ratingA": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.data.ratings.emerald.3}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.data.ratings.emerald.3}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -222,10 +244,7 @@
             }
           },
           "ratingB": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.green.400}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.green.400}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -241,10 +260,7 @@
             }
           },
           "ratingC": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.300}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.300}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -260,10 +276,7 @@
             }
           },
           "ratingD": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.500}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.500}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -279,10 +292,7 @@
             }
           },
           "ratingE": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.300}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.300}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -534,72 +544,42 @@
         "foreground": {
           "blocker": {
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.100}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.100}" }
             },
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.200}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.200}" }
             }
           },
           "high": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.100}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.100}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.200}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.200}" }
             }
           },
           "medium": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.orange.75}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.orange.75}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.orange.100}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.orange.100}" }
             }
           },
           "low": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.yellow.100}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.100}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.yellow.200}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.200}" }
             }
           },
           "info": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.blue.400}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.blue.400}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.blue.300}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.blue.300}" }
             }
           }
         },
@@ -685,28 +665,16 @@
     "sidebar-navigation": {
       "colors": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.700}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.700}" }
         }
       }
     },
     "sidebar-navigation-item": {
       "colors": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.700}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.800}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.900}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.700}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.grey.800}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.grey.900}" }
         }
       }
     },
@@ -714,10 +682,78 @@
       "colors": {
         "background": {
           "header": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.grey.500}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" }
+          }
+        }
+      }
+    },
+    "link": {
+      "colors": {
+        "text": {
+          "default": { "$type": "color", "$value": "{echoes.color.text.link.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.text.link.hover}" },
+          "subtle": { "$type": "color", "$value": "{echoes.color.text.subtle}" }
+        },
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" }
+      }
+    },
+    "select": {
+      "colors": {
+        "input": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.background.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.input.colors.background.hover}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.background.disabled}" }
+          },
+          "border": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.border.default}" },
+            "focus": { "$type": "color", "$value": "{echoes.input.colors.border.focus}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.border.disabled}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.text.default}" },
+            "placeholder": { "$type": "color", "$value": "{echoes.input.colors.text.placeholder}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.text.disabled}" }
+          },
+          "icon": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.icon.default}" }
+          },
+          "focus": { "$type": "color", "$value": "{echoes.input.colors.focus}" }
+        },
+        "option": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.hover}" },
+            "selected": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.selected}" },
+            "selected-hover": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.selected-hover}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.navigation-item.colors.text.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.navigation-item.colors.text.selected}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+          },
+          "icon": {
+            "default": { "$type": "color", "$value": "{echoes.navigation-item.colors.icon.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.navigation-item.colors.icon.selected}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.icon.disabled}" }
+          }
+        },
+        "indicator": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.background.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.color.background.selected.bold.default}" },
+            "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.bold.hover}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.background.disabled}" }
+          },
+          "border": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.border.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.color.background.selected.bold.default}" },
+            "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.bold.hover}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.border.disabled}" }
+          },
+          "foreground": {
+            "selected": { "$type": "color", "$value": "{echoes.color.text.onColor}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.icon.disabled}" }
           }
         }
       }
diff --git a/design-tokens/tokens/component/light.json b/design-tokens/tokens/component/light.json
index 37cbf757f..9a243090b 100644
--- a/design-tokens/tokens/component/light.json
+++ b/design-tokens/tokens/component/light.json
@@ -1,80 +1,141 @@
 {
   "echoes": {
-    "bottom-scroll": {
+    "button": {
       "colors": {
-        "shadow": {
-          "gradient": {
-            "$type": "color",
-            "$value": "#00000033"
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.background.action.neutral.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.background.action.neutral.hover}" },
+          "active": { "$type": "color", "$value": "{echoes.color.background.action.neutral.active}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.surface.disabled}" }
+        },
+        "border": {
+          "default": { "$type": "color", "$value": "{echoes.color.border.action.neutral}" }
+        },
+        "text": {
+          "default": { "$type": "color", "$value": "{echoes.color.text.onAction}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+        },
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" },
+        "outlined": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+            "active": { "$type": "color", "$value": "{echoes.color.surface.active}" },
+            "focus": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.surface.disabled}" }
+          },
+          "border": {
+            "default": { "$type": "color", "$value": "{echoes.color.border.bolder}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.color.text.link.default}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+          }
+        },
+        "ghost": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.hover}" },
+            "active": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.active}" },
+            "focus": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.focus}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.background.ghost.neutral.default}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.color.text.link.default}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
           }
         }
       }
     },
-    "form-control": {
+    "input": {
       "colors": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.surface.default}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.surface.hover}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.surface.disabled}" }
         },
         "border": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.border.bolder}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.border.weak}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.border.bolder}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.border.bold}" }
+        },
+        "text": {
+          "default": { "$type": "color", "$value": "{echoes.color.text.strong}" },
+          "placeholder": { "$type": "color", "$value": "{echoes.color.text.subtle}" },
+          "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
         },
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" },
         "icon": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.icon.subtle}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.icon.subtle}" }
         }
       }
     },
-    "logos": {
+    "navigation-item": {
       "colors": {
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.background.selected.weak.default}" },
+          "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.weak.hover}" }
+        },
         "text": {
-          "$type": "color",
-          "$value": "#290042"
+          "default": { "$type": "color", "$value": "{echoes.color.text.strong}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.text.strong}" }
         },
-        "brand": {
-          "$type": "color",
-          "$value": "#126ed3"
+        "icon": {
+          "default": { "$type": "color", "$value": "{echoes.color.icon.subtle}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.icon.bold}" }
         },
-        "sonar-whale": {
-          "$type": "color",
-          "$value": "#d3121d"
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" }
+      }
+    },
+    "issue-row": {
+      "colors": {
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" },
+          "selected": { "$type": "color", "$value": "{echoes.color.background.selected.weak.default}" },
+          "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.weak.hover}" }
+        },
+        "border": { "$type": "color", "$value": "{echoes.color.border.weak}" }
+      }
+    },
+    "bottom-scroll": {
+      "colors": {
+        "shadow": {
+          "gradient": { "$type": "color", "$value": "#00000033" }
         }
       }
     },
+    "form-control": {
+      "colors": {
+        "background": {
+          "default": { "$type": "color", "$value": "{echoes.color.surface.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.surface.hover}" }
+        },
+        "border": {
+          "default": { "$type": "color", "$value": "{echoes.color.border.bolder}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.border.weak}" }
+        },
+        "icon": {
+          "default": { "$type": "color", "$value": "{echoes.color.icon.subtle}" }
+        }
+      }
+    },
+    "logos": {
+      "colors": {
+        "text": { "$type": "color", "$value": "#290042" },
+        "brand": { "$type": "color", "$value": "#126ed3" },
+        "sonar-whale": { "$type": "color", "$value": "#d3121d" }
+      }
+    },
     "margin-indicator": {
       "colors": {
         "background": {
-          "duplication": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.200}"
-          },
-          "covered": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.700}"
-          },
-          "partially-covered": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.700}"
-          },
-          "uncovered": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.600}"
-          }
+          "duplication": { "$type": "color", "$value": "{echoes.color.palette.grey.200}" },
+          "covered": { "$type": "color", "$value": "{echoes.color.palette.green.700}" },
+          "partially-covered": { "$type": "color", "$value": "{echoes.color.palette.yellow.700}" },
+          "uncovered": { "$type": "color", "$value": "{echoes.color.palette.red.600}" }
         }
       }
     },
@@ -96,24 +157,12 @@
     "quality-gate-indicator": {
       "colors": {
         "passed": {
-          "icon": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.900}"
-          },
-          "background": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.200}"
-          }
+          "icon": { "$type": "color", "$value": "{echoes.color.palette.green.900}" },
+          "background": { "$type": "color", "$value": "{echoes.color.palette.green.200}" }
         },
         "failed": {
-          "icon": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.800}"
-          },
-          "background": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.200}"
-          }
+          "icon": { "$type": "color", "$value": "{echoes.color.palette.red.800}" },
+          "background": { "$type": "color", "$value": "{echoes.color.palette.red.200}" }
         }
       }
     },
@@ -121,74 +170,41 @@
       "colors": {
         "background": {
           "ratingA": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.data.ratings.emerald.2}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.data.ratings.emerald.2}" }
           },
           "ratingB": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.green.200}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.green.200}" }
           },
           "ratingC": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.200}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.200}" }
           },
           "ratingD": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.200}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.200}" }
           },
           "ratingE": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.200}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.200}" }
           }
         },
         "text": {
           "ratingA": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.data.ratings.emerald.6}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.data.ratings.emerald.6}" }
           },
           "ratingB": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.green.900}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.green.900}" }
           },
           "ratingC": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.900}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.900}" }
           },
           "ratingD": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.900}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.900}" }
           },
           "ratingE": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.900}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.900}" }
           }
         },
         "border": {
           "ratingA": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.data.ratings.emerald.4}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.data.ratings.emerald.4}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -204,10 +220,7 @@
             }
           },
           "ratingB": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.green.500}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.green.500}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -223,10 +236,7 @@
             }
           },
           "ratingC": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.500}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.500}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -242,10 +252,7 @@
             }
           },
           "ratingD": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.400}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.400}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -261,10 +268,7 @@
             }
           },
           "ratingE": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.500}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.500}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -288,16 +292,10 @@
           "severity": {
             "blocker": {
               "prefix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.red.100}"
-                }
+                "default": { "$type": "color", "$value": "{echoes.color.palette.red.100}" }
               },
               "suffix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.red.200}"
-                },
+                "default": { "$type": "color", "$value": "{echoes.color.palette.red.200}" },
                 "hover": {
                   "$extensions": {
                     "studio.tokens": {
@@ -315,16 +313,10 @@
             },
             "high": {
               "prefix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.red.50}"
-                }
+                "default": { "$type": "color", "$value": "{echoes.color.palette.red.50}" }
               },
               "suffix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.red.100}"
-                },
+                "default": { "$type": "color", "$value": "{echoes.color.palette.red.100}" },
                 "hover": {
                   "$extensions": {
                     "studio.tokens": {
@@ -342,16 +334,10 @@
             },
             "medium": {
               "prefix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.orange.50}"
-                }
+                "default": { "$type": "color", "$value": "{echoes.color.palette.orange.50}" }
               },
               "suffix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.orange.75}"
-                },
+                "default": { "$type": "color", "$value": "{echoes.color.palette.orange.75}" },
                 "hover": {
                   "$extensions": {
                     "studio.tokens": {
@@ -369,16 +355,10 @@
             },
             "low": {
               "prefix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.yellow.50}"
-                }
+                "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.50}" }
               },
               "suffix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.yellow.100}"
-                },
+                "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.100}" },
                 "hover": {
                   "$extensions": {
                     "studio.tokens": {
@@ -396,16 +376,10 @@
             },
             "info": {
               "prefix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.blue.50}"
-                }
+                "default": { "$type": "color", "$value": "{echoes.color.palette.blue.50}" }
               },
               "suffix": {
-                "default": {
-                  "$type": "color",
-                  "$value": "{echoes.color.palette.blue.100}"
-                },
+                "default": { "$type": "color", "$value": "{echoes.color.palette.blue.100}" },
                 "hover": {
                   "$extensions": {
                     "studio.tokens": {
@@ -426,105 +400,60 @@
         "foreground": {
           "blocker": {
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.700}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.700}" }
             },
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.800}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.800}" }
             }
           },
           "high": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.700}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.700}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.red.600}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.red.600}" }
             }
           },
           "medium": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.orange.800}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.orange.800}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.orange.600}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.orange.600}" }
             }
           },
           "low": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.yellow.800}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.800}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.yellow.700}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.700}" }
             }
           },
           "info": {
             "text": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.blue.800}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.blue.800}" }
             },
             "icon": {
-              "default": {
-                "$type": "color",
-                "$value": "{echoes.color.palette.blue.700}"
-              }
+              "default": { "$type": "color", "$value": "{echoes.color.palette.blue.700}" }
             }
           }
         },
         "borders": {
           "blocker": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.200}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.200}" }
           },
           "high": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.red.100}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.red.100}" }
           },
           "medium": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.orange.75}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.orange.75}" }
           },
           "low": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.yellow.100}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.100}" }
           },
           "info": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.blue.100}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.blue.100}" }
           }
         }
       }
@@ -532,28 +461,16 @@
     "sidebar-navigation": {
       "colors": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.25}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.25}" }
         }
       }
     },
     "sidebar-navigation-item": {
       "colors": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.25}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.40}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.50}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.25}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.grey.40}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.grey.50}" }
         }
       }
     },
@@ -561,10 +478,78 @@
       "colors": {
         "background": {
           "header": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.palette.grey.50}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.palette.grey.50}" }
+          }
+        }
+      }
+    },
+    "link": {
+      "colors": {
+        "text": {
+          "default": { "$type": "color", "$value": "{echoes.color.text.link.default}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.text.link.hover}" },
+          "subtle": { "$type": "color", "$value": "{echoes.color.text.subtle}" }
+        },
+        "focus": { "$type": "color", "$value": "{echoes.color.focus.default}" }
+      }
+    },
+    "select": {
+      "colors": {
+        "input": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.background.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.input.colors.background.hover}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.background.disabled}" }
+          },
+          "border": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.border.default}" },
+            "focus": { "$type": "color", "$value": "{echoes.input.colors.border.focus}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.border.disabled}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.text.default}" },
+            "placeholder": { "$type": "color", "$value": "{echoes.input.colors.text.placeholder}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.text.disabled}" }
+          },
+          "icon": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.icon.default}" }
+          },
+          "focus": { "$type": "color", "$value": "{echoes.input.colors.focus}" }
+        },
+        "option": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.default}" },
+            "hover": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.hover}" },
+            "selected": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.selected}" },
+            "selected-hover": { "$type": "color", "$value": "{echoes.navigation-item.colors.background.selected-hover}" }
+          },
+          "text": {
+            "default": { "$type": "color", "$value": "{echoes.navigation-item.colors.text.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.navigation-item.colors.text.selected}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.text.disabled}" }
+          },
+          "icon": {
+            "default": { "$type": "color", "$value": "{echoes.navigation-item.colors.icon.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.navigation-item.colors.icon.selected}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.icon.disabled}" }
+          }
+        },
+        "indicator": {
+          "background": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.background.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.color.background.selected.bold.default}" },
+            "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.bold.hover}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.background.disabled}" }
+          },
+          "border": {
+            "default": { "$type": "color", "$value": "{echoes.input.colors.border.default}" },
+            "selected": { "$type": "color", "$value": "{echoes.color.background.selected.bold.default}" },
+            "selected-hover": { "$type": "color", "$value": "{echoes.color.background.selected.bold.hover}" },
+            "disabled": { "$type": "color", "$value": "{echoes.input.colors.border.disabled}" }
+          },
+          "foreground": {
+            "selected": { "$type": "color", "$value": "{echoes.color.text.onColor}" },
+            "disabled": { "$type": "color", "$value": "{echoes.color.icon.disabled}" }
           }
         }
       }
diff --git a/design-tokens/tokens/modes/dark.json b/design-tokens/tokens/modes/dark.json
index 92c90af35..8142fb104 100644
--- a/design-tokens/tokens/modes/dark.json
+++ b/design-tokens/tokens/modes/dark.json
@@ -4,10 +4,7 @@
       "background": {
         "neutral": {
           "subtle": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.roles.neutral.strong}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -19,12 +16,9 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.strong}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.roles.neutral.strong}"
+              "$value": "{echoes.color.palette.grey.500}"
             },
+            "focus": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" },
             "active": {
               "$extensions": {
                 "studio.tokens": {
@@ -36,105 +30,86 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.strong}"
+              "$value": "{echoes.color.palette.grey.500}"
             }
           },
           "bolder": {
+            "default": { "$type": "color", "$value": "{echoes.color.palette.grey.400}" }
+          }
+        },
+        "action": {
+          "neutral": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.palette.grey.400}"
+              "$value": "{echoes.color.palette.ui.gray.12}",
+              "$description": "Highest-contrast neutral fill for primary and routine actions."
+            },
+            "hover": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.11}",
+              "$description": "Hover fill for primary and routine neutral actions."
+            },
+            "focus": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.12}",
+              "$description": "Focused fill for primary and routine neutral actions."
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.10}",
+              "$description": "Active fill for primary and routine neutral actions."
             }
           }
         },
         "accent": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.medium}"
+            "$value": "{echoes.color.background.action.neutral.default}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.palette.indigo.200}"
+            "$value": "{echoes.color.background.action.neutral.hover}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "focus": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.medium}"
+            "$value": "{echoes.color.background.action.neutral.focus}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.light}"
+            "$value": "{echoes.color.background.action.neutral.active}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "weak": {
             "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.3}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "hsl"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.4}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.3}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.4",
-                    "space": "hsl"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.5}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             }
           }
         },
         "warning": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.warning.medium}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.warning.medium}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.warning.light}"
-          },
+          "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.300}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.yellow.200}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.palette.yellow.300}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.yellow.100}" },
           "weak": {
             "default": {
               "$extensions": {
@@ -147,7 +122,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.medium}"
+              "$value": "{echoes.color.palette.yellow.300}"
             },
             "hover": {
               "$extensions": {
@@ -160,7 +135,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.medium}"
+              "$value": "{echoes.color.palette.yellow.300}"
             },
             "focus": {
               "$extensions": {
@@ -173,7 +148,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.medium}"
+              "$value": "{echoes.color.palette.yellow.300}"
             },
             "active": {
               "$extensions": {
@@ -186,27 +161,15 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.medium}"
+              "$value": "{echoes.color.palette.yellow.300}"
             }
           }
         },
         "success": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.success.medium}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.success.medium}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.success.light}"
-          },
+          "default": { "$type": "color", "$value": "{echoes.color.palette.green.300}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.green.200}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.palette.green.300}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.green.100}" },
           "weak": {
             "default": {
               "$extensions": {
@@ -219,7 +182,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.success.medium}"
+              "$value": "{echoes.color.palette.green.300}"
             },
             "hover": {
               "$extensions": {
@@ -232,7 +195,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.success.medium}"
+              "$value": "{echoes.color.palette.green.300}"
             },
             "focus": {
               "$extensions": {
@@ -245,7 +208,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.success.medium}"
+              "$value": "{echoes.color.palette.green.300}"
             },
             "active": {
               "$extensions": {
@@ -258,27 +221,15 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.success.medium}"
+              "$value": "{echoes.color.palette.green.300}"
             }
           }
         },
         "danger": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.danger.medium}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.danger.medium}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.danger.light}"
-          },
+          "default": { "$type": "color", "$value": "{echoes.color.palette.red.300}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.red.200}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.palette.red.300}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.red.100}" },
           "weak": {
             "default": {
               "$extensions": {
@@ -291,7 +242,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.medium}"
+              "$value": "{echoes.color.palette.red.300}"
             },
             "hover": {
               "$extensions": {
@@ -304,7 +255,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.medium}"
+              "$value": "{echoes.color.palette.red.300}"
             },
             "focus": {
               "$extensions": {
@@ -317,7 +268,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.medium}"
+              "$value": "{echoes.color.palette.red.300}"
             },
             "active": {
               "$extensions": {
@@ -330,27 +281,15 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.medium}"
+              "$value": "{echoes.color.palette.red.300}"
             }
           }
         },
         "info": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.info.medium}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.blue.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.info.medium}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.info.light}"
-          },
+          "default": { "$type": "color", "$value": "{echoes.color.palette.blue.300}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.blue.200}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.palette.blue.300}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.blue.100}" },
           "weak": {
             "default": {
               "$extensions": {
@@ -363,7 +302,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.info.medium}"
+              "$value": "{echoes.color.palette.blue.300}"
             },
             "hover": {
               "$extensions": {
@@ -376,7 +315,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.info.medium}"
+              "$value": "{echoes.color.palette.blue.300}"
             },
             "focus": {
               "$extensions": {
@@ -389,7 +328,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.info.medium}"
+              "$value": "{echoes.color.palette.blue.300}"
             },
             "active": {
               "$extensions": {
@@ -402,70 +341,46 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.info.medium}"
+              "$value": "{echoes.color.palette.blue.300}"
             }
           }
         },
         "utility": {
-          "transparent": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.support.transparent}"
-          }
+          "transparent": { "$type": "color", "$value": "{echoes.color.palette.support.transparent}" }
         },
         "selected": {
           "weak": {
             "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.3}",
+              "$description": "Neutral selected background for rows, options, and navigation items."
             },
             "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.4}",
+              "$description": "Hover state for a neutral selected background."
             },
             "pressed": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.4",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.palette.ui.gray.5}",
+              "$description": "Pressed state for a neutral selected background."
             }
           },
           "bold": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.palette.indigo.200}"
+              "$value": "{echoes.color.palette.ui.gray.12}",
+              "$description": "High-contrast neutral selected fill for checkboxes, radios, and compact indicators."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.light}"
+              "$value": "{echoes.color.palette.ui.gray.11}",
+              "$description": "Hover state for a high-contrast neutral selected fill."
             },
             "pressed": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.lightest}"
+              "$value": "{echoes.color.palette.ui.gray.10}",
+              "$description": "Pressed state for a high-contrast neutral selected fill."
             }
           }
         },
@@ -473,62 +388,49 @@
           "accent": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.ghost.neutral.default}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.background.ghost.neutral.hover}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "hsl"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}"
+              "$value": "{echoes.color.background.ghost.neutral.active}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.ghost.neutral.focus}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             }
           },
           "neutral": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.utility.transparent}",
+              "$description": "Resting background for quiet neutral actions."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.bold}"
+              "$value": "{echoes.color.palette.ui.gray-alpha.3}",
+              "$description": "Hover background for quiet neutral actions."
             },
             "active": {
               "$type": "color",
-              "$value": "{echoes.color.palette.grey.800}"
+              "$value": "{echoes.color.palette.ui.gray-alpha.5}",
+              "$description": "Active background for quiet neutral actions."
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.utility.transparent}",
+              "$description": "Focused background for quiet neutral actions; the focus ring supplies the visible cue."
             }
           },
           "danger": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
+            "default": { "$type": "color", "$value": "{echoes.color.background.utility.transparent}" },
             "hover": {
               "$extensions": {
                 "studio.tokens": {
@@ -540,7 +442,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.dark}"
+              "$value": "{echoes.color.palette.red.900}"
             },
             "active": {
               "$extensions": {
@@ -553,138 +455,74 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.dark}"
+              "$value": "{echoes.color.palette.red.900}"
             },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
+            "focus": { "$type": "color", "$value": "{echoes.color.background.utility.transparent}" }
           }
         },
         "emphasis": {
           "weak": {
             "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.palette.purple.600}"
+              "$value": "{echoes.color.palette.ui.blue.3}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             },
             "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.palette.purple.600}"
+              "$value": "{echoes.color.palette.ui.blue.4}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             },
             "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.palette.purple.600}"
+              "$value": "{echoes.color.palette.ui.blue.3}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             },
             "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.1",
-                    "space": "lch"
-                  }
-                }
-              },
               "$type": "color",
-              "$value": "{echoes.color.palette.purple.600}"
+              "$value": "{echoes.color.palette.ui.blue.5}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             }
           },
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.palette.purple.400}"
+            "$value": "{echoes.color.palette.ui.blue.9}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.roles.highlight.medium}"
+            "$value": "{echoes.color.palette.ui.blue.10}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           },
           "focus": {
             "$type": "color",
-            "$value": "{echoes.color.palette.purple.400}"
+            "$value": "{echoes.color.palette.ui.blue.9}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.palette.purple.200}"
+            "$value": "{echoes.color.palette.ui.blue.10}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           }
         },
         "favourite": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.warning.medium}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.200}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.300}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.yellow.200}" }
         }
       },
       "surface": {
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.600}"
-        },
-        "hover": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.bold}"
-        },
-        "active": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.800}"
-        },
+        "default": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.2}" },
+        "hover": { "$type": "color", "$value": "{echoes.color.palette.ui.gray-alpha.3}" },
+        "active": { "$type": "color", "$value": "{echoes.color.palette.ui.gray-alpha.5}" },
         "canvas": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.neutral.bold}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.1}" }
         },
         "inverse": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.neutral.light}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.neutral.lightest}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.neutral.light}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.40}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.100}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.grey.50}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.palette.grey.100}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.grey.40}" }
         },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
-        }
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.3}" }
       },
       "overlays": {
         "backDrop": {
@@ -699,157 +537,97 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.neutral.dark}"
+            "$value": "{echoes.color.palette.grey.900}"
           }
         },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
-        }
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" }
       },
       "text": {
-        "strong": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.25}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.light}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.600}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.600}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.danger.medium}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
+        "strong": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.12}" },
+        "default": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.11}" },
+        "subtle": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.11}" },
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.9}" },
+        "onColor": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.2}" },
+        "onAction": {
+          "$type": "color",
+          "$value": "{echoes.color.palette.ui.gray.1}",
+          "$description": "Inverse neutral foreground on high-contrast neutral actions."
+        },
+        "onColor-Inverse": { "$type": "color", "$value": "{echoes.color.palette.grey.600}" },
+        "danger": { "$type": "color", "$value": "{echoes.color.palette.red.300}" },
+        "placeholder": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.11}" },
         "accent": {
           "$type": "color",
-          "$value": "{echoes.color.roles.primary.medium}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.info.medium}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.success.medium}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.warning.light}"
+          "$value": "{echoes.color.text.link.default}",
+          "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
         },
+        "info": { "$type": "color", "$value": "{echoes.color.palette.blue.300}" },
+        "success": { "$type": "color", "$value": "{echoes.color.palette.green.300}" },
+        "warning": { "$type": "color", "$value": "{echoes.color.palette.yellow.100}" },
         "emphasis": {
           "$type": "color",
-          "$value": "{echoes.color.palette.purple.200}"
+          "$value": "{echoes.color.palette.ui.blue.11}",
+          "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
         },
         "link": {
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.palette.indigo.200}"
+            "$value": "{echoes.color.palette.ui.gray.12}",
+            "$description": "Neutral hover and focus foreground for links; underline supplies the additional interaction cue."
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.palette.ui.gray.12}",
+            "$description": "Neutral foreground for links. Inline links remain persistently underlined."
           }
         }
       },
       "icon": {
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.25}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.light}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
+        "bold": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.12}" },
+        "default": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.11}" },
+        "subtle": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.11}" },
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.9}" },
+        "placeholder": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.11}" },
         "accent": {
           "$type": "color",
-          "$value": "{echoes.color.palette.indigo.200}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.danger.medium}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.yellow.200}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.green.200}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.blue.200}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.600}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.600}"
+          "$value": "{echoes.color.icon.bold}",
+          "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
         },
+        "danger": { "$type": "color", "$value": "{echoes.color.palette.red.300}" },
+        "warning": { "$type": "color", "$value": "{echoes.color.palette.yellow.200}" },
+        "success": { "$type": "color", "$value": "{echoes.color.palette.green.200}" },
+        "info": { "$type": "color", "$value": "{echoes.color.palette.blue.200}" },
+        "onColor": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.2}" },
+        "onColor-Inverse": { "$type": "color", "$value": "{echoes.color.palette.grey.600}" },
         "selected": {
           "$type": "color",
-          "$value": "{echoes.color.palette.indigo.200}"
+          "$value": "{echoes.color.icon.bold}",
+          "$description": "Neutral icon foreground for selected rows, options, and navigation items."
         },
         "emphasis": {
           "$type": "color",
-          "$value": "{echoes.color.palette.purple.200}"
+          "$value": "{echoes.color.palette.ui.blue.11}",
+          "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
         }
       },
       "border": {
-        "bolder": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.medium}"
-        },
-        "weak": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "weaker": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
+        "bolder": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
+        "bold": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.7}" },
+        "weak": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.6}" },
+        "weaker": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.5}" },
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.7}" },
         "accent": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.palette.indigo.200}"
+            "$value": "{echoes.color.border.action.neutral}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
+          }
+        },
+        "action": {
+          "neutral": {
+            "$type": "color",
+            "$value": "{echoes.color.background.action.neutral.default}",
+            "$description": "Boundary color for high-contrast neutral actions."
           }
         },
         "danger": {
@@ -864,17 +642,11 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.danger.medium}"
+            "$value": "{echoes.color.palette.red.300}"
           },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.danger.medium}"
-          }
-        },
-        "none": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.support.transparent}"
+          "default": { "$type": "color", "$value": "{echoes.color.palette.red.300}" }
         },
+        "none": { "$type": "color", "$value": "{echoes.color.palette.support.transparent}" },
         "success": {
           "weak": {
             "$extensions": {
@@ -887,12 +659,9 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.success.medium}"
+            "$value": "{echoes.color.palette.green.300}"
           },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.green.400}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.green.400}" }
         },
         "warning": {
           "weak": {
@@ -906,7 +675,7 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.warning.medium}"
+            "$value": "{echoes.color.palette.yellow.300}"
           }
         },
         "info": {
@@ -921,149 +690,64 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.info.medium}"
+            "$value": "{echoes.color.palette.blue.300}"
           }
         },
         "emphasis": {
           "weak": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            },
             "$type": "color",
-            "$value": "{echoes.color.palette.purple.600}"
+            "$value": "{echoes.color.palette.ui.blue.7}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           }
         }
       },
       "code": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.500}"
-          },
-          "highlight": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.600}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" },
+          "highlight": { "$type": "color", "$value": "{echoes.color.palette.grey.600}" }
         },
         "border": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.support.transparent}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.support.transparent}" }
         },
         "text": {
-          "default": {
-            "$type": "color",
-            "$value": "#E2E7F1"
-          },
-          "highlight": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.300}"
-          },
-          "annotation": {
-            "$type": "color",
-            "$value": "#61AEEE"
-          },
-          "constant": {
-            "$type": "color",
-            "$value": "#D19A66"
-          },
-          "comment": {
-            "$type": "color",
-            "$value": "#A7ACB4"
-          },
-          "keyword": {
-            "$type": "color",
-            "$value": "#DF91F6"
-          },
-          "string": {
-            "$type": "color",
-            "$value": "#98C379"
-          },
-          "keyword-subtle": {
-            "$type": "color",
-            "$value": "#ABABFF"
-          },
-          "preprocessing-directive": {
-            "$type": "color",
-            "$value": "#78D779"
-          }
+          "default": { "$type": "color", "$value": "#E2E7F1" },
+          "highlight": { "$type": "color", "$value": "{echoes.color.palette.red.300}" },
+          "annotation": { "$type": "color", "$value": "#61AEEE" },
+          "constant": { "$type": "color", "$value": "#D19A66" },
+          "comment": { "$type": "color", "$value": "#A7ACB4" },
+          "keyword": { "$type": "color", "$value": "#DF91F6" },
+          "string": { "$type": "color", "$value": "#98C379" },
+          "keyword-subtle": { "$type": "color", "$value": "#ABABFF" },
+          "preprocessing-directive": { "$type": "color", "$value": "#78D779" }
         }
       },
       "focus": {
         "default": {
           "$type": "color",
-          "$value": "{echoes.color.palette.indigo.200}"
+          "$value": "{echoes.color.palette.ui.gray.12}",
+          "$description": "Theme-neutral high-contrast keyboard focus indicator."
         }
       },
       "charts": {
         "categorical": {
-          "1": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.cobalt}"
-          },
-          "2": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.pink}"
-          },
-          "3": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.teal}"
-          },
-          "4": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.violet}"
-          },
-          "5": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.sienna}"
-          },
-          "6": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.navy.1}"
-          },
-          "7": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.magenta.1}"
-          },
-          "8": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.jade.1}"
-          }
+          "1": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.cobalt}" },
+          "2": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.pink}" },
+          "3": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.teal}" },
+          "4": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.violet}" },
+          "5": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.sienna}" },
+          "6": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.navy.1}" },
+          "7": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.magenta.1}" },
+          "8": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.jade.1}" }
         },
         "severity": {
-          "blocker": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.crimson.2}"
-          },
-          "high": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.crimson.1}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.amber.1}"
-          },
-          "low": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.ochre.1}"
-          },
-          "info": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.steel-blue.1}"
-          }
+          "blocker": { "$type": "color", "$value": "{echoes.color.palette.data.severity.crimson.2}" },
+          "high": { "$type": "color", "$value": "{echoes.color.palette.data.severity.crimson.1}" },
+          "medium": { "$type": "color", "$value": "{echoes.color.palette.data.severity.amber.1}" },
+          "low": { "$type": "color", "$value": "{echoes.color.palette.data.severity.ochre.1}" },
+          "info": { "$type": "color", "$value": "{echoes.color.palette.data.severity.steel-blue.1}" }
         },
         "placeholder": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.placeholder.stone}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.data.placeholder.stone}" }
         }
       }
     },
diff --git a/design-tokens/tokens/modes/light.json b/design-tokens/tokens/modes/light.json
index f68c8172c..d1ec293f3 100644
--- a/design-tokens/tokens/modes/light.json
+++ b/design-tokens/tokens/modes/light.json
@@ -6,17 +6,17 @@
           "subtle": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.lightest}",
+              "$value": "{echoes.color.palette.grey.50}",
               "$description": "Use it in components with neutral sentiment"
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.lightest}",
+              "$value": "{echoes.color.palette.grey.50}",
               "$description": "Use it in components with neutral sentiment"
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.light}",
+              "$value": "{echoes.color.palette.grey.100}",
               "$description": "Use it in components with neutral sentiment"
             },
             "active": {
@@ -28,58 +28,83 @@
           "bolder": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.light}",
+              "$value": "{echoes.color.palette.grey.100}",
               "$description": "Use it in components with neutral sentiment that need a bolder highlight"
             }
           }
         },
+        "action": {
+          "neutral": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.12}",
+              "$description": "Highest-contrast neutral fill for primary and routine actions."
+            },
+            "hover": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.11}",
+              "$description": "Hover fill for primary and routine neutral actions."
+            },
+            "focus": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.12}",
+              "$description": "Focused fill for primary and routine neutral actions."
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{echoes.color.palette.ui.gray.10}",
+              "$description": "Active fill for primary and routine neutral actions."
+            }
+          }
+        },
         "accent": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.strong}",
-            "$description": "Used as the background color of components that reinforce our brand"
+            "$value": "{echoes.color.background.action.neutral.default}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.palette.indigo.600}",
-            "$description": "Hover state of components that reinforce our brand"
+            "$value": "{echoes.color.background.action.neutral.hover}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "focus": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.strong}"
+            "$value": "{echoes.color.background.action.neutral.focus}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.bold}",
-            "$description": "Active state of components that reinforce our brand"
+            "$value": "{echoes.color.background.action.neutral.active}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           },
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.palette.indigo.25}",
-              "$description": "Used as the background color of components that reinforce our brand with less visual highlight"
+              "$value": "{echoes.color.palette.ui.gray.3}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.lightest}",
-              "$description": "Hover state of components that reinforce our brand with less visual highlight"
+              "$value": "{echoes.color.palette.ui.gray.4}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "active": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.light}",
-              "$description": "Active state of components that reinforce our brand with less visual highlight"
+              "$value": "{echoes.color.palette.ui.gray.5}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.lightest}",
-              "$description": "Focus state of components that reinforce our brand with less visual highlight"
+              "$value": "{echoes.color.palette.ui.gray.3}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             }
           }
         },
         "warning": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.roles.warning.strong}",
+            "$value": "{echoes.color.palette.yellow.500}",
             "$description": "Use for backgrounds that communicate warning or caution"
           },
           "hover": {
@@ -93,33 +118,33 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.warning.strong}",
+            "$value": "{echoes.color.palette.yellow.500}",
             "$description": "Use for backgrounds that communicate warning or caution"
           },
           "focus": {
             "$type": "color",
-            "$value": "{echoes.color.roles.warning.strong}",
+            "$value": "{echoes.color.palette.yellow.500}",
             "$description": "Use for backgrounds that communicate warning or caution"
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.roles.warning.bold}",
+            "$value": "{echoes.color.palette.yellow.700}",
             "$description": "Use for backgrounds that communicate warning or caution"
           },
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.lightest}",
+              "$value": "{echoes.color.palette.yellow.50}",
               "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.light}",
+              "$value": "{echoes.color.palette.yellow.100}",
               "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.roles.warning.lightest}",
+              "$value": "{echoes.color.palette.yellow.50}",
               "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
             },
             "active": {
@@ -132,7 +157,7 @@
         "success": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.roles.success.bold}",
+            "$value": "{echoes.color.palette.green.700}",
             "$description": "Use for backgrounds that communicate positive or success messages"
           },
           "hover": {
@@ -142,23 +167,23 @@
           },
           "focus": {
             "$type": "color",
-            "$value": "{echoes.color.roles.success.bold}",
+            "$value": "{echoes.color.palette.green.700}",
             "$description": "Use for backgrounds that communicate positive or success messages"
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.roles.success.dark}",
+            "$value": "{echoes.color.palette.green.900}",
             "$description": "Use for backgrounds that communicate positive or success messages"
           },
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.success.lightest}",
+              "$value": "{echoes.color.palette.green.50}",
               "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.success.light}",
+              "$value": "{echoes.color.palette.green.100}",
               "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
             },
             "active": {
@@ -168,7 +193,7 @@
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.roles.success.lightest}",
+              "$value": "{echoes.color.palette.green.50}",
               "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
             }
           }
@@ -181,7 +206,7 @@
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.roles.danger.bold}",
+            "$value": "{echoes.color.palette.red.700}",
             "$description": "Hover state for backgrounds that communicate danger or destructive messages"
           },
           "focus": {
@@ -197,12 +222,12 @@
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.lightest}",
+              "$value": "{echoes.color.palette.red.50}",
               "$description": "Use it for backgrounds that communicate danger or destructive messages, with less visual highlight"
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.danger.light}",
+              "$value": "{echoes.color.palette.red.100}",
               "$description": "Hover state for backgrounds that communicate danger or destructive messages, with less visual highlight"
             },
             "active": {
@@ -210,10 +235,7 @@
               "$value": "{echoes.color.palette.red.200}",
               "$description": "Active state for backgrounds that communicate danger or destructive messages, with less visual highlight"
             },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.roles.danger.lightest}"
-            }
+            "focus": { "$type": "color", "$value": "{echoes.color.palette.red.50}" }
           }
         },
         "info": {
@@ -224,7 +246,7 @@
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.roles.info.dark}",
+            "$value": "{echoes.color.palette.blue.900}",
             "$description": "Use for backgrounds that communicate information to the user"
           },
           "focus": {
@@ -243,23 +265,23 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.info.dark}",
+            "$value": "{echoes.color.palette.blue.900}",
             "$description": "Use for backgrounds that communicate information to the user"
           },
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.info.lightest}",
+              "$value": "{echoes.color.palette.blue.50}",
               "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.info.light}",
+              "$value": "{echoes.color.palette.blue.100}",
               "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.roles.info.lightest}",
+              "$value": "{echoes.color.palette.blue.50}",
               "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
             },
             "active": {
@@ -272,7 +294,7 @@
         "utility": {
           "transparent": {
             "$type": "color",
-            "$value": "{echoes.color.roles.support.transparent}",
+            "$value": "{echoes.color.palette.support.transparent}",
             "$description": "Use it when you need transparency in the background"
           }
         },
@@ -280,35 +302,35 @@
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.palette.indigo.25}",
-              "$description": "Use it in backgrounds of components that have a selected state that need less visual highlight, like dropdown or selects"
+              "$value": "{echoes.color.palette.ui.gray.3}",
+              "$description": "Neutral selected background for rows, options, and navigation items."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.lightest}",
-              "$description": "Hover state of components that have a selected state that need less visual highlight, like dropdown or selects"
+              "$value": "{echoes.color.palette.ui.gray.4}",
+              "$description": "Hover state for a neutral selected background."
             },
             "pressed": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.light}",
-              "$description": "Pressed state of components that have a selected state that need less visual highlight, like dropdown or selects"
+              "$value": "{echoes.color.palette.ui.gray.5}",
+              "$description": "Pressed state for a neutral selected background."
             }
           },
           "bold": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.strong}",
-              "$description": "Use it in backgrounds of components that have a selected state, like checkboxes or radios"
+              "$value": "{echoes.color.palette.ui.gray.12}",
+              "$description": "High-contrast neutral selected fill for checkboxes, radios, and compact indicators."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.palette.indigo.600}",
-              "$description": "Hover state of components that have a selected state, like checkboxes or radios"
+              "$value": "{echoes.color.palette.ui.gray.11}",
+              "$description": "Hover state for a high-contrast neutral selected fill."
             },
             "pressed": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.bold}",
-              "$description": "Pressed state of components that have a selected state, like checkboxes or radios"
+              "$value": "{echoes.color.palette.ui.gray.10}",
+              "$description": "Pressed state for a high-contrast neutral selected fill."
             }
           }
         },
@@ -316,125 +338,123 @@
           "accent": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.ghost.neutral.default}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.lightest}"
+              "$value": "{echoes.color.background.ghost.neutral.hover}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "active": {
               "$type": "color",
-              "$value": "{echoes.color.roles.primary.light}"
+              "$value": "{echoes.color.background.ghost.neutral.active}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.ghost.neutral.focus}",
+              "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
             }
           },
           "neutral": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.utility.transparent}",
+              "$description": "Resting background for quiet neutral actions."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.lightest}"
+              "$value": "{echoes.color.palette.ui.gray-alpha.3}",
+              "$description": "Hover background for quiet neutral actions."
             },
             "active": {
               "$type": "color",
-              "$value": "{echoes.color.roles.neutral.light}"
+              "$value": "{echoes.color.palette.ui.gray-alpha.5}",
+              "$description": "Active background for quiet neutral actions."
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
+              "$value": "{echoes.color.background.utility.transparent}",
+              "$description": "Focused background for quiet neutral actions; the focus ring supplies the visible cue."
             }
           },
           "danger": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.roles.danger.lightest}"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.roles.danger.light}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
+            "default": { "$type": "color", "$value": "{echoes.color.background.utility.transparent}" },
+            "hover": { "$type": "color", "$value": "{echoes.color.palette.red.50}" },
+            "active": { "$type": "color", "$value": "{echoes.color.palette.red.100}" },
+            "focus": { "$type": "color", "$value": "{echoes.color.background.utility.transparent}" }
           }
         },
         "emphasis": {
           "weak": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.roles.highlight.light}"
+              "$value": "{echoes.color.palette.ui.blue.3}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             },
             "hover": {
               "$type": "color",
-              "$value": "{echoes.color.palette.purple.200}"
+              "$value": "{echoes.color.palette.ui.blue.4}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             },
             "focus": {
               "$type": "color",
-              "$value": "{echoes.color.roles.highlight.light}"
+              "$value": "{echoes.color.palette.ui.blue.3}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             },
             "active": {
               "$type": "color",
-              "$value": "{echoes.color.roles.highlight.medium}"
+              "$value": "{echoes.color.palette.ui.blue.5}",
+              "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
             }
           },
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.roles.highlight.bold}"
+            "$value": "{echoes.color.palette.ui.blue.9}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.palette.purple.800}"
+            "$value": "{echoes.color.palette.ui.blue.10}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           },
           "focus": {
             "$type": "color",
-            "$value": "{echoes.color.roles.highlight.bold}"
+            "$value": "{echoes.color.palette.ui.blue.9}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.roles.highlight.dark}"
+            "$value": "{echoes.color.palette.ui.blue.10}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           }
         },
         "favourite": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.yellow.600}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.warning.bold}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.yellow.600}" },
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.yellow.700}" }
         }
       },
       "surface": {
         "default": {
           "$type": "color",
-          "$value": "{echoes.color.roles.support.white}",
+          "$value": "{echoes.color.palette.ui.gray.1}",
           "$description": "Go to color for surfaces.. eg: cards, modals, popovers, etc..."
         },
         "hover": {
           "$type": "color",
-          "$value": "{echoes.color.palette.grey.40}",
+          "$value": "{echoes.color.palette.ui.gray-alpha.3}",
           "$description": "Hover color for bg-default"
         },
         "active": {
           "$type": "color",
-          "$value": "{echoes.color.roles.neutral.light}",
+          "$value": "{echoes.color.palette.ui.gray-alpha.5}",
           "$description": "Active color for bg-default"
         },
         "canvas": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.palette.grey.25}",
+            "$value": "{echoes.color.palette.ui.gray.2}",
             "$description": "Use it as page background"
           }
         },
@@ -444,22 +464,13 @@
             "$value": "{echoes.color.palette.grey.600}",
             "$description": "Inverse color for bgs, creates high contrast against bg-default and bg-page"
           },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.neutral.bold}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.600}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.800}"
-          }
+          "hover": { "$type": "color", "$value": "{echoes.color.palette.grey.700}" },
+          "focus": { "$type": "color", "$value": "{echoes.color.palette.grey.600}" },
+          "active": { "$type": "color", "$value": "{echoes.color.palette.grey.800}" }
         },
         "disabled": {
           "$type": "color",
-          "$value": "{echoes.color.roles.neutral.lightest}",
+          "$value": "{echoes.color.palette.ui.gray.3}",
           "$description": "Use it as background for disabled components"
         }
       },
@@ -476,327 +487,173 @@
               }
             },
             "$type": "color",
-            "$value": "{echoes.color.roles.neutral.dark}"
+            "$value": "{echoes.color.palette.grey.900}"
           }
         },
         "disabled": {
           "$type": "color",
-          "$value": "{echoes.color.roles.neutral.lightest}",
+          "$value": "{echoes.color.palette.grey.50}",
           "$description": "Use it as background for disabled components"
         }
       },
       "text": {
-        "strong": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.bold}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.medium}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.support.white}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
-        },
+        "strong": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.12}" },
+        "default": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.9}" },
+        "placeholder": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
+        "subtle": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
+        "onColor": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.1}" },
+        "onAction": {
+          "$type": "color",
+          "$value": "{echoes.color.palette.ui.gray.1}",
+          "$description": "Inverse neutral foreground on high-contrast neutral actions."
+        },
+        "onColor-Inverse": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" },
         "accent": {
           "$type": "color",
-          "$value": "{echoes.color.roles.primary.strong}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.danger.bold}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.yellow.800}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.green.800}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.blue.800}"
+          "$value": "{echoes.color.text.link.default}",
+          "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
         },
+        "danger": { "$type": "color", "$value": "{echoes.color.palette.red.700}" },
+        "warning": { "$type": "color", "$value": "{echoes.color.palette.yellow.800}" },
+        "success": { "$type": "color", "$value": "{echoes.color.palette.green.800}" },
+        "info": { "$type": "color", "$value": "{echoes.color.palette.blue.800}" },
         "emphasis": {
           "$type": "color",
-          "$value": "{echoes.color.palette.purple.800}"
+          "$value": "{echoes.color.palette.ui.blue.11}",
+          "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
         },
         "link": {
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.palette.indigo.600}"
+            "$value": "{echoes.color.palette.ui.gray.11}",
+            "$description": "Neutral hover and focus foreground for links; underline supplies the additional interaction cue."
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.palette.ui.gray.12}",
+            "$description": "Neutral foreground for links. Inline links remain persistently underlined."
           }
         }
       },
       "icon": {
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.bold}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.medium}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
+        "bold": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.12}" },
+        "default": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
+        "subtle": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.9}" },
+        "placeholder": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.10}" },
         "accent": {
           "$type": "color",
-          "$value": "{echoes.color.roles.primary.strong}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.red.600}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.warning.bold}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.green.600}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.blue.600}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.support.white}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.strong}"
+          "$value": "{echoes.color.icon.bold}",
+          "$description": "Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis."
         },
+        "danger": { "$type": "color", "$value": "{echoes.color.palette.red.600}" },
+        "warning": { "$type": "color", "$value": "{echoes.color.palette.yellow.700}" },
+        "success": { "$type": "color", "$value": "{echoes.color.palette.green.600}" },
+        "info": { "$type": "color", "$value": "{echoes.color.palette.blue.600}" },
+        "onColor": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.1}" },
+        "onColor-Inverse": { "$type": "color", "$value": "{echoes.color.palette.grey.500}" },
         "selected": {
           "$type": "color",
-          "$value": "{echoes.color.roles.primary.strong}"
+          "$value": "{echoes.color.icon.bold}",
+          "$description": "Neutral icon foreground for selected rows, options, and navigation items."
         },
         "emphasis": {
           "$type": "color",
-          "$value": "{echoes.color.palette.purple.800}"
+          "$value": "{echoes.color.palette.ui.blue.11}",
+          "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
         }
       },
       "border": {
-        "bolder": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.400}"
-        },
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
-        "weak": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.light}"
-        },
-        "weaker": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.neutral.lightest}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.palette.grey.200}"
-        },
+        "bolder": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.9}" },
+        "bold": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.7}" },
+        "weak": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.6}" },
+        "weaker": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.5}" },
+        "disabled": { "$type": "color", "$value": "{echoes.color.palette.ui.gray.7}" },
         "accent": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.roles.primary.strong}"
+            "$value": "{echoes.color.border.action.neutral}",
+            "$description": "Deprecated compatibility alias. Use the neutral action semantic role for routine interaction."
           }
         },
-        "danger": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.danger.light}"
-          },
-          "default": {
+        "action": {
+          "neutral": {
             "$type": "color",
-            "$value": "{echoes.color.palette.red.600}"
+            "$value": "{echoes.color.background.action.neutral.default}",
+            "$description": "Boundary color for high-contrast neutral actions."
           }
         },
-        "none": {
-          "$type": "color",
-          "$value": "{echoes.color.roles.support.transparent}"
+        "danger": {
+          "weak": { "$type": "color", "$value": "{echoes.color.palette.red.100}" },
+          "default": { "$type": "color", "$value": "{echoes.color.palette.red.600}" }
         },
+        "none": { "$type": "color", "$value": "{echoes.color.palette.support.transparent}" },
         "success": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.success.light}"
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.success.bold}"
-          }
+          "weak": { "$type": "color", "$value": "{echoes.color.palette.green.100}" },
+          "default": { "$type": "color", "$value": "{echoes.color.palette.green.700}" }
         },
         "warning": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.warning.light}"
-          }
+          "weak": { "$type": "color", "$value": "{echoes.color.palette.yellow.100}" }
         },
         "info": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.roles.info.light}"
-          }
+          "weak": { "$type": "color", "$value": "{echoes.color.palette.blue.100}" }
         },
         "emphasis": {
           "weak": {
             "$type": "color",
-            "$value": "{echoes.color.palette.purple.200}"
+            "$value": "{echoes.color.palette.ui.blue.7}",
+            "$description": "Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns."
           }
         }
       },
       "code": {
         "background": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.25}"
-          },
-          "highlight": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.200}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.25}" },
+          "highlight": { "$type": "color", "$value": "{echoes.color.palette.grey.200}" }
         },
         "border": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.grey.100}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.grey.100}" }
         },
         "text": {
-          "default": {
-            "$type": "color",
-            "$value": "#383A42"
-          },
-          "highlight": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.red.600}"
-          },
-          "annotation": {
-            "$type": "color",
-            "$value": "#235BD5"
-          },
-          "constant": {
-            "$type": "color",
-            "$value": "#875702"
-          },
-          "comment": {
-            "$type": "color",
-            "$value": "#5F6066"
-          },
-          "keyword": {
-            "$type": "color",
-            "$value": "#A222A0"
-          },
-          "string": {
-            "$type": "color",
-            "$value": "#247523"
-          },
-          "keyword-subtle": {
-            "$type": "color",
-            "$value": "#1E1EAD"
-          },
-          "preprocessing-directive": {
-            "$type": "color",
-            "$value": "#347235"
-          }
+          "default": { "$type": "color", "$value": "#383A42" },
+          "highlight": { "$type": "color", "$value": "{echoes.color.palette.red.600}" },
+          "annotation": { "$type": "color", "$value": "#235BD5" },
+          "constant": { "$type": "color", "$value": "#875702" },
+          "comment": { "$type": "color", "$value": "#5F6066" },
+          "keyword": { "$type": "color", "$value": "#A222A0" },
+          "string": { "$type": "color", "$value": "#247523" },
+          "keyword-subtle": { "$type": "color", "$value": "#1E1EAD" },
+          "preprocessing-directive": { "$type": "color", "$value": "#347235" }
         }
       },
       "focus": {
         "default": {
           "$type": "color",
-          "$value": "{echoes.color.palette.indigo.600}"
+          "$value": "{echoes.color.palette.ui.gray.12}",
+          "$description": "Theme-neutral high-contrast keyboard focus indicator."
         }
       },
       "charts": {
         "categorical": {
-          "1": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.cobalt}"
-          },
-          "2": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.pink}"
-          },
-          "3": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.teal}"
-          },
-          "4": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.violet}"
-          },
-          "5": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.sienna}"
-          },
-          "6": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.navy.2}"
-          },
-          "7": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.magenta.2}"
-          },
-          "8": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.categorical.jade.2}"
-          }
+          "1": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.cobalt}" },
+          "2": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.pink}" },
+          "3": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.teal}" },
+          "4": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.violet}" },
+          "5": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.sienna}" },
+          "6": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.navy.2}" },
+          "7": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.magenta.2}" },
+          "8": { "$type": "color", "$value": "{echoes.color.palette.data.categorical.jade.2}" }
         },
         "severity": {
-          "blocker": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.crimson.3}"
-          },
-          "high": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.crimson.2}"
-          },
-          "medium": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.amber.2}"
-          },
-          "low": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.ochre.2}"
-          },
-          "info": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.severity.steel-blue.2}"
-          }
+          "blocker": { "$type": "color", "$value": "{echoes.color.palette.data.severity.crimson.3}" },
+          "high": { "$type": "color", "$value": "{echoes.color.palette.data.severity.crimson.2}" },
+          "medium": { "$type": "color", "$value": "{echoes.color.palette.data.severity.amber.2}" },
+          "low": { "$type": "color", "$value": "{echoes.color.palette.data.severity.ochre.2}" },
+          "info": { "$type": "color", "$value": "{echoes.color.palette.data.severity.steel-blue.2}" }
         },
         "placeholder": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.palette.data.placeholder.stone}"
-          }
+          "default": { "$type": "color", "$value": "{echoes.color.palette.data.placeholder.stone}" }
         }
       }
     },
diff --git a/docs/new-design-language-color-pilot-summary.md b/docs/new-design-language-color-pilot-summary.md
new file mode 100644
index 000000000..f79d18939
--- /dev/null
+++ b/docs/new-design-language-color-pilot-summary.md
@@ -0,0 +1,334 @@
+# New Design Language Option 2 Color Migration
+
+## Leadership and engineering summary
+
+**Status:** Repository pilot complete and available for review  
+**Repository:** `SonarSource/echoes-react`  
+**Branch:** `marcio/new-design-language`  
+**Compared with:** `origin/main` at `804f413`  
+**Figma:** [New Design Language](https://www.figma.com/design/w7V1ABgakVKASqv2ZuTZRt/-New--Design-language?node-id=5752-2)  
+**Last updated:** 6 August 2026
+
+## Executive summary
+
+We implemented the Option 2 Echoes color migration for a neutral-first product UI. Routine actions, selection, navigation, links, and keyboard focus are neutral. Blue is reserved for explicitly labeled AI, upgrade, upsell, pricing-plan, and approved feature-emphasis patterns.
+
+The work preserves Echoes' three-layer token architecture:
+
+```text
+Brand primitives → Light/dark semantics → Component tokens → Echoes components
+```
+
+The migration imports the authoritative Option 2 light and dark palettes without regeneration, connects neutral interaction and restricted Blue feature roles to semantic tokens, and migrates Button, Link, Input, Select, navigation-item, and issue-row/table interactions to component-level tokens. Three realistic Storybook product pages provide integration test surfaces in both themes.
+
+The changes are additive or internal to token resolution; no new public React components or production routes were introduced. Existing legacy palette and semantic tokens remain where they are still needed for compatibility.
+
+## Design direction and decisions
+
+| Decision                  | Outcome                                                                                                                         |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| Overall product character | Predominantly monochromatic UI, using neutral values for routine controls and structure.                                        |
+| Primary actions           | High-contrast neutral fills rather than Blue. Dark mode inverts the neutral action pair.                                        |
+| Blue                      | Reserved for explicitly labeled AI, upgrade, upsell, pricing-plan, and approved feature-emphasis patterns.                      |
+| Selection and navigation  | Neutral backgrounds, text, icons, and markers; Blue is forbidden.                                                               |
+| Focus                     | Theme-neutral focus indicators derived from the neutral scale.                                                                  |
+| Palette model             | Twelve steps per UI scale with independently tuned light and dark values.                                                       |
+| Alpha format              | Eight-digit hexadecimal values are preserved end-to-end.                                                                        |
+| Layering                  | Components do not bind directly to primitive palette values; they consume component tokens that resolve through semantic roles. |
+| Brand ownership           | Light and dark primitive palettes now live under Brand A and Brand B rather than inside semantic mode files.                    |
+
+Examples of the resulting neutral action system:
+
+| Role                   | Light     | Dark      |
+| ---------------------- | --------- | --------- |
+| Primary action default | `#0A0A0A` | `#F4F6F8` |
+| Primary action hover   | `#2A313A` | `#B7BBC0` |
+| Primary action active  | `#3B434E` | `#999FA7` |
+| Primary action text    | `#FAFBFC` | `#0C0D10` |
+
+## Token architecture
+
+### Before the pilot
+
+- Brand files mixed raw palettes with an intermediate `echoes.color.roles` layer.
+- Light and dark mode files contained both primitive UI palettes and semantic tokens.
+- Several Echoes components consumed semantic tokens directly rather than component-specific contracts.
+- Accent roles largely implied a colored treatment.
+
+### Current structure
+
+```text
+design-tokens/tokens/
+├── brand/
+│   ├── brand-A/
+│   │   ├── base.json
+│   │   └── palettes/
+│   │       ├── base.json
+│   │       ├── light.json
+│   │       └── dark.json
+│   └── brand-B/
+│       ├── base.json
+│       └── palettes/
+│           ├── base.json
+│           ├── light.json
+│           └── dark.json
+├── modes/
+│   ├── light.json
+│   └── dark.json
+└── component/
+    ├── base.json
+    ├── light.json
+    └── dark.json
+```
+
+Responsibilities are now clearer:
+
+- `brand/*/palettes/*` contains primitive color values only.
+- `modes/light.json` and `modes/dark.json` contain semantic roles only.
+- `component/light.json` and `component/dark.json` map semantic intent to component contracts.
+- React components consume component tokens through `cssVar()`.
+
+The obsolete `echoes.color.roles` layer was removed from Brand A and Brand B. Light and dark semantic tokens now reference palette tokens directly.
+
+The token builder was updated so nested brand paths resolve correctly for either selected brand. Mode-specific brand palettes remain available in generated themed CSS, while generated consumer output stays compatible with the previous pilot output.
+
+## Primitive palette changes
+
+The following 12-step UI scales exist for both light and dark themes:
+
+- Gray
+- Gray Alpha
+- Blue
+- Green candidate
+- Yellow candidate
+- Red candidate
+- Teal candidate
+- Cyan candidate
+- Purple candidate
+- Magenta candidate
+- Orange candidate
+
+The palette also includes exploratory data-visualization candidates:
+
+- Eight categorical colors
+- Five severity colors
+- One placeholder color
+
+Light and dark values are independently tuned rather than mechanically inverted. Opaque scales progress monotonically in OKLCH lightness. Chromatic scales keep their hue stable and reach peak chroma at step 9.
+
+Gray Alpha uses black overlays in light mode and white overlays in dark mode. All 12 steps in both themes remain eight-digit hexadecimal values such as `#0000001F` and `#FFFFFF2E`.
+
+Brand A and Brand B currently contain identical pilot palette values. Their separate files intentionally allow each brand to diverge later without changing semantic or component token names.
+
+## Semantic token changes
+
+The pilot introduced or revised semantic coverage for:
+
+- Page canvas and UI surfaces
+- Default, hover, active, disabled, and inverse surfaces
+- Neutral action backgrounds
+- Neutral selected backgrounds in weak and bold strengths
+- Neutral ghost interactions
+- Blue emphasis backgrounds
+- Weak, default, and strong border hierarchy
+- Low- and high-contrast text
+- Text and icon colors on neutral actions
+- Neutral focus indicators
+- Neutral selection and restricted Blue feature emphasis
+
+The key distinction used in the system is:
+
+- **Surface:** the material or container behind content, such as the page canvas, card, table, modal, popover, or input.
+- **Background:** a state or treatment applied to a surface or interactive element, such as hover, active, selected, emphasis, or action fill.
+
+Accent semantics were retained as deprecated compatibility aliases that resolve to neutral interaction values. Blue is available only through the explicit `emphasis` family and is not used by routine selection or interaction.
+
+## Component token and implementation changes
+
+### Button
+
+- Added component tokens for background, border, text, disabled, hover, active, and focus states.
+- Primary buttons now resolve through neutral-action semantics.
+- Primary button implementation no longer binds directly to generic accent semantics.
+- Focus and disabled styling resolve through button tokens.
+
+### Input
+
+- Added component tokens for background, border, text, placeholder, disabled, hover, and focus states.
+- `TextInput` now consumes the input token contract rather than a mixture of generic form-control and semantic tokens.
+
+### Link
+
+- Added neutral link component tokens for default, hover, subtle, and focus states.
+- Inline links retain a persistent underline.
+- Standalone and navigation-style links add an underline on hover and keyboard focus.
+- The public `Accent` link highlight remains compatible but resolves to the neutral link contract.
+
+### Select
+
+- Added Select component tokens that resolve through Input and navigation-item contracts.
+- Input focus, option selection, text, icons, and selection indicators are neutral.
+- Existing danger validation remains on the protected production danger semantic.
+
+### Navigation item
+
+- Added component tokens for default, hover, selected, selected-hover, text, icon, and focus states.
+- Sidebar navigation consumption was migrated to the new navigation-item contract.
+- Selection, routine hover, and focus use neutral semantics.
+
+### Table and issue-row interaction
+
+- Added issue-row tokens for default, hover, selected, selected-hover, and border states.
+- Table row and cell interactions now consume issue-row tokens.
+- Transparent table and scroll effects use the semantic transparent-background token after removal of the support role layer.
+
+### Type safety
+
+The `cssVar()` helper now preserves the exact token literal in its return type. This improves inference for CSS custom-property objects while retaining compile-time validation against the generated Echoes token union.
+
+## Storybook review surfaces
+
+### Focused token specimen
+
+`Design Tokens/12-step color pilot` includes:
+
+- Side-by-side light and dark themes
+- Default, hover, active, focus, selected, and disabled examples
+- Gray Alpha over white, neutral, tinted, and Blue feature surfaces
+- A realistic SonarQube workflow and state comparison
+- Step 9 and 10 role guidance
+- Sentiment and extended Option 2 palette candidates
+- Categorical and severity data-visualization candidates
+
+Local links:
+
+- [Workflow and states](http://localhost:6006/iframe.html?id=design-tokens-12-step-color-pilot--workflow-and-states&viewMode=story)
+- [Sentiment and data visualization](http://localhost:6006/iframe.html?id=design-tokens-12-step-color-pilot--sentiment-and-data-visualization&viewMode=story)
+
+### Product playground
+
+Three top-level Storybook integration stories were added using exported Echoes components and the real layout shell:
+
+- [Issues](http://localhost:6006/?path=/story/playground-issues--default): project navigation, filters, selectable issue table, pagination, and row actions.
+- [Project Settings](http://localhost:6006/?path=/story/playground-project-settings--default): administration navigation, grouped form controls, validation, help text, and actions.
+- [Portfolio Overview](http://localhost:6006/?path=/story/playground-portfolio-overview--default): summary cards, Quality Gate content, project table, and supporting actions.
+
+These stories are repository-only integration surfaces. They do not add public components or product routes.
+
+## Figma and Tokens Studio
+
+The design exploration includes:
+
+- Raw light and dark palette presentation
+- Semantic token presentation with descriptions and resolved hex values
+- Plain-English semantic labels and improved visual hierarchy
+- Color-step role guidance and examples inspired by Radix scale documentation
+- A dedicated explanation of surfaces versus state backgrounds
+- Sentiment and data-visualization palette exploration
+
+The GitHub branch is the current repository source for Tokens Studio:
+
+```text
+marcio/new-design-language
+```
+
+After pulling the branch, Tokens Studio should show the light and dark palette sets under both Brand A and Brand B. The mode files should show semantic tokens only.
+
+Figma synchronization should be verified after pulling because repository restructuring does not itself prove that every existing Figma variable reference or artboard instance has refreshed.
+
+## Validation completed
+
+The current branch passed:
+
+- Token generation for Brand A
+- Token generation for Brand B
+- TypeScript source and declaration checks
+- ESLint
+- Library production build
+- Focused Jest color-pilot tests
+- Existing affected component tests
+- Storybook production build
+- Live Storybook smoke checks at desktop and constrained widths
+- JSON parsing and token-reference checks
+- Git whitespace validation
+
+Automated color tests verify:
+
+- Every Brand A and Brand B primitive exactly matches the authoritative Option 2 export
+- All 12 Gray Alpha steps remain eight-digit hexadecimal in both themes
+- Opaque 12-step scales are monotonic in OKLCH lightness
+- WCAG 2.2 AA text contrast for the connected component pairs
+- At least 3:1 contrast for tested component boundaries and focus indicators
+- Categorical and severity colors have at least 3:1 contrast against the canvas
+- Categorical candidates maintain a minimum perceptual separation in OKLab
+- Neutral actions, selection, navigation, links, and focus resolve through the intended semantic and component layers
+- Blue feature emphasis resolves through the Option 2 Blue ramp rather than Purple
+- Migrated component-token families contain no primitive palette references
+
+Final validation completed successfully with 25 focused color-system tests and 197 affected tests across 27 suites, TypeScript source and declaration checks, ESLint, Prettier, the production library build, the Storybook production build, and token generation for both brands. Live Storybook checks covered the color workflow in both themes, the three product playground pages, constrained-width rendering, search filtering, row selection, and disabled-to-enabled bulk-action state.
+
+The repository `tokens-check` script compares generated files with the current commit, so it reports the expected pre-commit difference while these generated Option 2 artifacts remain uncommitted. Rebuilding Brand A after Brand B produces the checked-in target deterministically; the freshness check will pass once source and generated artifacts share the same commit baseline.
+
+## Compatibility and scope
+
+- No new public React component APIs were added.
+- Existing component props and imports remain unchanged.
+- Existing legacy palettes remain in `palettes/base.json` for unresolved consumers.
+- Brand selection still occurs at token build time, with light and dark remaining the public runtime themes.
+- Generated token names used by migrated consumers remain typed and exported.
+- The Storybook playground is not included in the published component API.
+
+## Known conflicts and open decisions
+
+### Sentiment and data visualization are candidates, not a completed migration
+
+The new Green, Yellow, Red, Teal, Cyan, Purple, Magenta, Orange, and data-visualization palettes are present, displayed, and tested. However, the existing production sentiment semantics and `echoes.color.charts.*` roles still resolve mainly through the legacy base palettes. Connecting those roles to the new candidates should be a separate reviewed migration.
+
+### Option 2 export and DESIGN.md contain documented hex discrepancies
+
+The exported `option-2` JSON is authoritative. Several frontmatter examples in `DESIGN.md` do not exist in the exported ramps, including `action-on-light: #FFFFFF`, `action-dark: #EFF2F9`, and `feature-blue-dark: #6BA9F0`. The implemented palette instead uses the exact exported values, including Gray 1 light `#FAFBFC`, Gray 12 dark `#F4F6F8`, and Blue 9 dark `#73A7EC`. The design documentation should be synchronized with the approved export.
+
+### Information Blue remains a semantic collision
+
+Production information roles still use the legacy base Blue palette, while Option 2 Blue is restricted to feature emphasis. This migration intentionally leaves information semantics unchanged. A follow-up audit must decide whether the two Blue meanings can coexist or whether information needs a different approved mapping.
+
+### Parallel legacy and pilot component tokens remain
+
+The repository still contains older contracts such as `form-control` and `sidebar-navigation-item` alongside the new `input` and `navigation-item` pilot contracts. Migrated components use the pilot tokens, but naming consolidation should be agreed before broader rollout.
+
+### Brand A and Brand B need an ownership decision
+
+Both brands currently use the same new light and dark values. Leadership and design should decide whether these represent shared product foundations or whether each brand is expected to diverge. If they remain shared, duplicating the files may create maintenance overhead; if they diverge, the current structure supports that cleanly.
+
+### Semantic naming needs a final review
+
+The current model uses `surface.canvas.default` for the page background and separate `background.*` roles for interaction treatments. This is coherent, but the final naming should be reviewed before consumers begin depending on it broadly.
+
+### Visual regression baseline is still needed
+
+The Storybook surfaces support visual review, but a committed screenshot baseline or CI visual-regression service has not been established by this pilot. That should be added before a large migration.
+
+### Downstream product validation remains required
+
+The pilot verifies the Echoes library and realistic Storybook pages. It does not replace testing in SonarQube and SonarQube Cloud, where product-specific composition, custom CSS, charts, and contrast contexts may expose additional issues.
+
+## Recommended next steps
+
+1. Review the Storybook product playground with product design, accessibility, and engineering representatives.
+2. Confirm the final surface/background vocabulary and component-token naming.
+3. Decide whether Brand A and Brand B palettes are shared or independently owned.
+4. Pull the branch into Tokens Studio and verify Figma variables and artboards against the repository values.
+5. Establish visual-regression baselines for the focused specimen and three product pages.
+6. Publish a prerelease Echoes package and validate it in one contained SonarQube workflow.
+7. Resolve product feedback before migrating additional components.
+8. Treat sentiment and data visualization as separate migrations with accessibility and product-data review.
+
+## Git history
+
+| Commit    | Change                                                                                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `9b7f0a1` | Added the new-design-language color pilot, component integration, automated color tests, focused token specimen, and three product playground stories. |
+| `76a314b` | Removed the obsolete Brand A/Brand B color-role layer and connected light/dark semantic tokens directly to palettes.                                   |
+| `5cee00f` | Moved light and dark primitive palettes under Brand A and Brand B and made mode files semantic-only.                                                   |
+
+Across the three implementation commits, the repository has 33 changed files relative to `origin/main`, with approximately 2,741 additions and 1,037 deletions, excluding this report.
diff --git a/src/common/helpers/__tests__/__snapshots__/useShadowScroll-test.tsx.snap b/src/common/helpers/__tests__/__snapshots__/useShadowScroll-test.tsx.snap
index e82096991..05a4b60e5 100644
--- a/src/common/helpers/__tests__/__snapshots__/useShadowScroll-test.tsx.snap
+++ b/src/common/helpers/__tests__/__snapshots__/useShadowScroll-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`BottomShadowScroll component should render with correct styling 1`] = `
   background: radial-gradient(
         farthest-side at 50% 100%,
         var(--echoes-bottom-scroll-colors-shadow-gradient),
-        var(--echoes-color-roles-support-transparent)
+        var(--echoes-color-background-utility-transparent)
       ) center bottom;
 }
 
diff --git a/src/common/helpers/useShadowScroll.tsx b/src/common/helpers/useShadowScroll.tsx
index 07e196df3..37a9882d6 100644
--- a/src/common/helpers/useShadowScroll.tsx
+++ b/src/common/helpers/useShadowScroll.tsx
@@ -90,7 +90,7 @@ export const BottomShadowScroll = styled.div`
   background: radial-gradient(
       farthest-side at 50% 100%,
       ${cssVar('bottom-scroll-colors-shadow-gradient')},
-      ${cssVar('color-roles-support-transparent')}
+      ${cssVar('color-background-utility-transparent')}
     )
     center bottom;
 `;
diff --git a/src/components/buttons/ButtonStyles.tsx b/src/components/buttons/ButtonStyles.tsx
index f9fd11da2..3de09e429 100644
--- a/src/components/buttons/ButtonStyles.tsx
+++ b/src/components/buttons/ButtonStyles.tsx
@@ -55,7 +55,7 @@ export const ButtonStyled = styled.button`
   }
 
   &:focus-visible {
-    outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+    outline: ${cssVar('button-colors-focus')} solid ${cssVar('focus-border-width-default')};
     outline-offset: ${cssVar('focus-border-offset-default')};
   }
 
@@ -69,7 +69,7 @@ export const ButtonStyled = styled.button`
 
   &:disabled,
   &:disabled:has(:hover, :active, :focus, :focus-visible) {
-    color: ${cssVar('color-text-disabled')};
+    color: ${cssVar('button-colors-text-disabled')};
     background-color: var(--button-background-disabled);
 
     border: none;
@@ -110,49 +110,49 @@ export const SpinnerButton = styled(SpinnerOverrideColor)`
   margin-right: ${cssVar('dimension-space-75')};
 `;
 
-export const BUTTON_VARIETY_STYLES = {
+export const BUTTON_VARIETY_STYLES: Record<ButtonVariety, Record<string, string>> = {
   [ButtonVariety.Default]: {
-    '--button-color': cssVar('color-text-default'),
-    '--button-border': `${cssVar('color-border-bold')} solid ${cssVar('border-width-default')}`,
-    '--button-background': cssVar('color-surface-default'),
-    '--button-background-hover': cssVar('color-surface-hover'),
-    '--button-background-active': cssVar('color-surface-active'),
-    '--button-background-focus': cssVar('color-surface-default'),
-    '--button-background-disabled': cssVar('color-surface-disabled'),
-    '--spinner-color-override': cssVar('color-icon-default'),
-    '--spinner-track-color-override': cssVar('color-border-bold'),
+    '--button-color': cssVar('button-colors-outlined-text-default'),
+    '--button-border': `${cssVar('button-colors-outlined-border-default')} solid ${cssVar('border-width-default')}`,
+    '--button-background': cssVar('button-colors-outlined-background-default'),
+    '--button-background-hover': cssVar('button-colors-outlined-background-hover'),
+    '--button-background-active': cssVar('button-colors-outlined-background-active'),
+    '--button-background-focus': cssVar('button-colors-outlined-background-focus'),
+    '--button-background-disabled': cssVar('button-colors-outlined-background-disabled'),
+    '--spinner-color-override': cssVar('button-colors-outlined-text-default'),
+    '--spinner-track-color-override': cssVar('button-colors-outlined-border-default'),
   },
   [ButtonVariety.DefaultGhost]: {
-    '--button-color': cssVar('color-text-default'),
+    '--button-color': cssVar('button-colors-ghost-text-default'),
     '--button-border': 'none',
-    '--button-background': cssVar('color-background-ghost-neutral-default'),
-    '--button-background-hover': cssVar('color-background-ghost-neutral-hover'),
-    '--button-background-active': cssVar('color-background-ghost-neutral-active'),
-    '--button-background-focus': cssVar('color-background-ghost-neutral-focus'),
-    '--button-background-disabled': cssVar('color-background-ghost-neutral-default'),
-    '--spinner-color-override': cssVar('color-icon-default'),
-    '--spinner-track-color-override': cssVar('color-border-bold'),
+    '--button-background': cssVar('button-colors-ghost-background-default'),
+    '--button-background-hover': cssVar('button-colors-ghost-background-hover'),
+    '--button-background-active': cssVar('button-colors-ghost-background-active'),
+    '--button-background-focus': cssVar('button-colors-ghost-background-focus'),
+    '--button-background-disabled': cssVar('button-colors-ghost-background-disabled'),
+    '--spinner-color-override': cssVar('button-colors-ghost-text-default'),
+    '--spinner-track-color-override': cssVar('button-colors-outlined-border-default'),
   },
   [ButtonVariety.Primary]: {
-    '--button-color': cssVar('color-text-on-color'),
-    '--button-border': 'none',
-    '--button-background': cssVar('color-background-accent-default'),
-    '--button-background-hover': cssVar('color-background-accent-hover'),
-    '--button-background-active': cssVar('color-background-accent-active'),
-    '--button-background-focus': cssVar('color-background-accent-focus'),
-    '--button-background-disabled': cssVar('color-surface-disabled'),
-    '--spinner-color-override': cssVar('color-icon-on-color'),
+    '--button-color': cssVar('button-colors-text-default'),
+    '--button-border': `${cssVar('button-colors-border-default')} solid ${cssVar('border-width-default')}`,
+    '--button-background': cssVar('button-colors-background-default'),
+    '--button-background-hover': cssVar('button-colors-background-hover'),
+    '--button-background-active': cssVar('button-colors-background-active'),
+    '--button-background-focus': cssVar('button-colors-background-default'),
+    '--button-background-disabled': cssVar('button-colors-background-disabled'),
+    '--spinner-color-override': cssVar('button-colors-text-default'),
     '--spinner-track-color-override': cssVar('color-border-bold'),
   },
   [ButtonVariety.PrimaryGhost]: {
-    '--button-color': cssVar('color-text-accent'),
+    '--button-color': cssVar('button-colors-ghost-text-default'),
     '--button-border': 'none',
-    '--button-background': cssVar('color-background-ghost-accent-default'),
-    '--button-background-hover': cssVar('color-background-ghost-accent-hover'),
-    '--button-background-active': cssVar('color-background-ghost-accent-active'),
-    '--button-background-focus': cssVar('color-background-ghost-accent-focus'),
-    '--button-background-disabled': cssVar('color-background-ghost-accent-default'),
-    '--spinner-color-override': cssVar('color-border-accent-default'),
+    '--button-background': cssVar('button-colors-ghost-background-default'),
+    '--button-background-hover': cssVar('button-colors-ghost-background-hover'),
+    '--button-background-active': cssVar('button-colors-ghost-background-active'),
+    '--button-background-focus': cssVar('button-colors-ghost-background-focus'),
+    '--button-background-disabled': cssVar('button-colors-ghost-background-disabled'),
+    '--spinner-color-override': cssVar('button-colors-ghost-text-default'),
   },
   [ButtonVariety.Danger]: {
     '--button-color': cssVar('color-text-on-color'),
diff --git a/src/components/buttons/__tests__/Button-test.tsx b/src/components/buttons/__tests__/Button-test.tsx
index 3fa11ea78..b6be4df8f 100644
--- a/src/components/buttons/__tests__/Button-test.tsx
+++ b/src/components/buttons/__tests__/Button-test.tsx
@@ -65,9 +65,17 @@ describe('Button', () => {
   });
 
   it.each([
-    [ButtonVariety.Default, cssVar('color-icon-default'), cssVar('color-border-bold')],
-    [ButtonVariety.DefaultGhost, cssVar('color-icon-default'), cssVar('color-border-bold')],
-    [ButtonVariety.Primary, cssVar('color-icon-on-color'), cssVar('color-border-bold')],
+    [
+      ButtonVariety.Default,
+      cssVar('button-colors-outlined-text-default'),
+      cssVar('button-colors-outlined-border-default'),
+    ],
+    [
+      ButtonVariety.DefaultGhost,
+      cssVar('button-colors-ghost-text-default'),
+      cssVar('button-colors-outlined-border-default'),
+    ],
+    [ButtonVariety.Primary, cssVar('button-colors-text-default'), cssVar('color-border-bold')],
     [ButtonVariety.Danger, cssVar('color-icon-on-color'), cssVar('color-background-danger-active')],
   ])('defines %s spinner arc and track sentiment tokens', (variety, spinnerColor, trackColor) => {
     expect(BUTTON_VARIETY_STYLES[variety]).toMatchObject({
@@ -77,7 +85,7 @@ describe('Button', () => {
   });
 
   it.each([
-    [ButtonVariety.PrimaryGhost, cssVar('color-border-accent-default')],
+    [ButtonVariety.PrimaryGhost, cssVar('button-colors-ghost-text-default')],
     [ButtonVariety.DangerGhost, cssVar('color-icon-danger')],
     [ButtonVariety.DangerOutline, cssVar('color-icon-danger')],
   ])('defines %s spinner arc sentiment token', (variety, spinnerColor) => {
diff --git a/src/components/filters/FilterDropdownCategory.tsx b/src/components/filters/FilterDropdownCategory.tsx
index 3dfbd154c..003bd2592 100644
--- a/src/components/filters/FilterDropdownCategory.tsx
+++ b/src/components/filters/FilterDropdownCategory.tsx
@@ -81,7 +81,7 @@ const StyledCategoryButton = styled(styleDropdownItemBase('button'))`
   }
 
   &[data-active] ${StyledCategoryLabel} {
-    color: ${cssVar('color-text-accent')};
+    color: ${cssVar('color-text-strong')};
     font: ${cssVar('typography-text-default-semi-bold')};
   }
 `;
diff --git a/src/components/layout/global-navigation/GlobalNavigationItemStyles.tsx b/src/components/layout/global-navigation/GlobalNavigationItemStyles.tsx
index 9ad262748..5d9815056 100644
--- a/src/components/layout/global-navigation/GlobalNavigationItemStyles.tsx
+++ b/src/components/layout/global-navigation/GlobalNavigationItemStyles.tsx
@@ -30,7 +30,7 @@ export const StyledNavMenuItem = styled(radixNavigationMenu.Item)<{ 'data-select
   border-bottom: ${cssVar('focus-border-width-default')} solid transparent;
 
   &[data-selected='true'] {
-    border-bottom-color: ${cssVar('color-border-accent-default')};
+    border-bottom-color: ${cssVar('color-border-bolder')};
   }
 `;
 StyledNavMenuItem.displayName = 'StyledNavMenuItem';
@@ -53,9 +53,14 @@ export const globalNavigationItemStyle = css`
 
   &:hover {
     background-color: ${cssVar('color-surface-hover')};
+    text-decoration-line: ${cssVar('text-decoration-underline')};
   }
 
   &:active {
     background-color: ${cssVar('color-surface-active')};
   }
+
+  &:focus-visible {
+    text-decoration-line: ${cssVar('text-decoration-underline')};
+  }
 `;
diff --git a/src/components/layout/global-navigation/__tests__/GlobalNavigationItem-test.tsx b/src/components/layout/global-navigation/__tests__/GlobalNavigationItem-test.tsx
index dd99f67cb..b436b2587 100644
--- a/src/components/layout/global-navigation/__tests__/GlobalNavigationItem-test.tsx
+++ b/src/components/layout/global-navigation/__tests__/GlobalNavigationItem-test.tsx
@@ -18,10 +18,16 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { matchers } from '@emotion/jest';
+import styled from '@emotion/styled';
 import { screen } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { render } from '~common/helpers/test-utils';
+import { cssVar } from '~utils/design-tokens';
 import { GlobalNavigation } from '..';
+import { globalNavigationItemStyle } from '../GlobalNavigationItemStyles';
+
+expect.extend(matchers);
 
 it('should render with active indicator', () => {
   setupWithContext(<GlobalNavigation.Item to="/">Take me home</GlobalNavigation.Item>);
@@ -55,7 +61,30 @@ it('should render without active indicator when forced', () => {
   expect(screen.getByRole('link')).not.toHaveAttribute('data-active');
 });
 
-const setupWithContext = (component: JSX.Element) => {
+it('should underline the link on hover and keyboard focus', () => {
+  setupGlobalNavigationItemStyles();
+
+  const link = screen.getByRole('link');
+  expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'), {
+    target: ':hover',
+  });
+  expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'), {
+    target: ':focus-visible',
+  });
+});
+
+const GlobalNavigationItemStyleProbe = styled.a`
+  ${globalNavigationItemStyle}
+`;
+GlobalNavigationItemStyleProbe.displayName = 'GlobalNavigationItemStyleProbe';
+
+function setupGlobalNavigationItemStyles() {
+  return render(
+    <GlobalNavigationItemStyleProbe href="/">Take me home</GlobalNavigationItemStyleProbe>,
+  );
+}
+
+function setupWithContext(component: JSX.Element) {
   return render(
     <MemoryRouter
       future={{ v7_relativeSplatPath: true, v7_startTransition: true }}
@@ -68,4 +97,4 @@ const setupWithContext = (component: JSX.Element) => {
       </Routes>
     </MemoryRouter>,
   );
-};
+}
diff --git a/src/components/layout/sidebar-navigation/SidebarNavigationBaseItem.tsx b/src/components/layout/sidebar-navigation/SidebarNavigationBaseItem.tsx
index 8cdb04b21..027ea0143 100644
--- a/src/components/layout/sidebar-navigation/SidebarNavigationBaseItem.tsx
+++ b/src/components/layout/sidebar-navigation/SidebarNavigationBaseItem.tsx
@@ -103,12 +103,12 @@ const SidebarNavigationBaseItemLink = styled(NavLinkBase)`
     display: flex;
     visibility: visible;
 
-    background-color: ${cssVar('sidebar-navigation-item-colors-background-active')};
-    color: ${cssVar('color-text-accent')};
+    background-color: ${cssVar('navigation-item-colors-background-selected')};
+    color: ${cssVar('navigation-item-colors-text-selected')};
     font: ${cssVar('typography-text-default-semi-bold')};
 
     &:hover {
-      background-color: ${cssVar('sidebar-navigation-item-colors-background-hover')};
+      background-color: ${cssVar('navigation-item-colors-background-selected-hover')};
     }
   }
 `;
@@ -120,6 +120,6 @@ const sidebarNavigationBaseItemIconStyles = css`
 
   ${SidebarNavigationBaseItemLink}.active > &,
   ${SidebarNavigationBaseItemLink}:active > & {
-    color: ${cssVar('color-icon-accent')};
+    color: ${cssVar('navigation-item-colors-icon-selected')};
   }
 `;
diff --git a/src/components/layout/sidebar-navigation/SidebarNavigationItemStyles.tsx b/src/components/layout/sidebar-navigation/SidebarNavigationItemStyles.tsx
index 9db00a41e..0442c4986 100644
--- a/src/components/layout/sidebar-navigation/SidebarNavigationItemStyles.tsx
+++ b/src/components/layout/sidebar-navigation/SidebarNavigationItemStyles.tsx
@@ -39,19 +39,21 @@ export const sidebarNavigationBaseItemStyles = css`
 
   flex-shrink: 0;
 
-  color: ${cssVar('color-text-default')};
+  color: ${cssVar('navigation-item-colors-text-default')};
   font: ${cssVar('typography-text-default-regular')};
 
   cursor: pointer;
 
   &:hover {
-    background-color: ${cssVar('sidebar-navigation-item-colors-background-hover')};
+    background-color: ${cssVar('navigation-item-colors-background-hover')};
+    text-decoration-line: ${cssVar('text-decoration-underline')};
   }
 
   &:focus-visible {
-    outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+    outline: ${cssVar('navigation-item-colors-focus')} solid ${cssVar('focus-border-width-default')};
     outline-offset: ${cssVar('focus-border-offset-default')};
     border-radius: ${cssVar('border-radius-400')};
+    text-decoration-line: ${cssVar('text-decoration-underline')};
   }
 `;
 
@@ -63,7 +65,7 @@ export const SidebarNavigationItemLabel = styled.span`
 SidebarNavigationItemLabel.displayName = 'SidebarNavigationItemLabel';
 
 export const sidebarNavigationItemIconStyles = css`
-  color: ${cssVar('color-icon-subtle')};
+  color: ${cssVar('navigation-item-colors-icon-default')};
   font-size: ${cssVar('font-size-30')};
 `;
 
diff --git a/src/components/layout/sidebar-navigation/__tests__/SidebarNavigationItem-test.tsx b/src/components/layout/sidebar-navigation/__tests__/SidebarNavigationItem-test.tsx
index 5932703f2..d9f435f8d 100644
--- a/src/components/layout/sidebar-navigation/__tests__/SidebarNavigationItem-test.tsx
+++ b/src/components/layout/sidebar-navigation/__tests__/SidebarNavigationItem-test.tsx
@@ -22,6 +22,7 @@ import { matchers } from '@emotion/jest';
 import { screen } from '@testing-library/react';
 import { createRef, type Ref } from 'react';
 import { renderWithMemoryRouter } from '~common/helpers/test-utils';
+import { cssVar } from '~utils/design-tokens';
 import { IconBranch, IconClock } from '../../../icons';
 import { SidebarNavigationItem, SidebarNavigationItemProps } from '../SidebarNavigationItem';
 
@@ -132,6 +133,18 @@ describe('CSS custom properties for accordion integration', () => {
   });
 });
 
+it('should underline the link on hover and keyboard focus', () => {
+  setupSidebarNavigationItem();
+
+  const link = screen.getByRole('link');
+  expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'), {
+    target: ':hover',
+  });
+  expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'), {
+    target: ':focus-visible',
+  });
+});
+
 it("shouldn't have any a11y violation", async () => {
   const { container } = setupSidebarNavigationItem({ Icon: IconBranch });
   await expect(container).toHaveNoA11yViolations();
diff --git a/src/components/links/LinkBaseStyled.tsx b/src/components/links/LinkBaseStyled.tsx
index 55e8ca2e5..2932bb915 100644
--- a/src/components/links/LinkBaseStyled.tsx
+++ b/src/components/links/LinkBaseStyled.tsx
@@ -26,20 +26,20 @@ import { cssVar } from '~utils/design-tokens';
 
 const LinkBaseStyledHighlight = {
   [LinkHighlight.Accent]: `
-    --color: ${cssVar('color-text-accent')};
-    --hover: ${cssVar('color-text-link-hover')};
+    --color: ${cssVar('link-colors-text-default')};
+    --hover: ${cssVar('link-colors-text-hover')};
   `,
   [LinkHighlight.Default]: `
-    --color: ${cssVar('color-text-default')};
-    --hover: ${cssVar('color-text-link-hover')};
+    --color: ${cssVar('link-colors-text-default')};
+    --hover: ${cssVar('link-colors-text-hover')};
   `,
   [LinkHighlight.Subtle]: `
-    --color: ${cssVar('color-text-subtle')};
-    --hover: ${cssVar('color-text-link-hover')};
+    --color: ${cssVar('link-colors-text-subtle')};
+    --hover: ${cssVar('link-colors-text-hover')};
   `,
   [LinkHighlight.CurrentColor]: `
     --color: 'currentColor';
-    --hover: ${cssVar('color-text-link-hover')};
+    --hover: ${cssVar('link-colors-text-hover')};
   `,
 };
 
@@ -73,7 +73,7 @@ export const LinkBaseStyled = styled(LinkBase)`
   }
 
   &:focus-visible {
-    outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+    outline: ${cssVar('link-colors-focus')} solid ${cssVar('focus-border-width-default')};
     outline-offset: ${cssVar('focus-border-offset-default')};
     border-radius: ${cssVar('border-radius-200')};
   }
diff --git a/src/components/links/LinkStandalone.tsx b/src/components/links/LinkStandalone.tsx
index e31bd36da..a92e9a97c 100644
--- a/src/components/links/LinkStandalone.tsx
+++ b/src/components/links/LinkStandalone.tsx
@@ -45,7 +45,8 @@ export const LinkStandalone = styled(LinkStandaloneBase)`
 
   text-decoration-line: ${cssVar('text-decoration-none')};
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     text-decoration-line: ${cssVar('text-decoration-underline')};
   }
 
diff --git a/src/components/links/__tests__/Link-test.tsx b/src/components/links/__tests__/Link-test.tsx
index 57a3565f4..cac873379 100644
--- a/src/components/links/__tests__/Link-test.tsx
+++ b/src/components/links/__tests__/Link-test.tsx
@@ -18,12 +18,24 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { matchers } from '@emotion/jest';
 import { screen } from '@testing-library/react';
 import { render, renderWithMemoryRouter } from '~common/helpers/test-utils';
 import { Link } from '..';
 import { Tooltip } from '../../tooltip';
+import { cssVar } from '~utils/design-tokens';
+
+expect.extend(matchers);
 
 describe('Link', () => {
+  it('uses a neutral component token and remains visibly underlined', () => {
+    setupStyledLink();
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveStyleRule('--color', cssVar('link-colors-text-default'));
+    expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'));
+  });
+
   it('should remove focus after link is clicked', async () => {
     const { user, container } = renderWithMemoryRouter(
       <Link enableBlurAfterClick to="/initial">
@@ -133,6 +145,10 @@ describe('Link', () => {
   });
 });
 
+function setupStyledLink() {
+  return renderWithMemoryRouter(<Link to="/path">Test</Link>);
+}
+
 describe('Link as button', () => {
   it('should render as a button when there is no "to" prop', async () => {
     const onClick = jest.fn();
diff --git a/src/components/links/__tests__/LinkStandalone-test.tsx b/src/components/links/__tests__/LinkStandalone-test.tsx
index 6f91a54f8..9d5a5a487 100644
--- a/src/components/links/__tests__/LinkStandalone-test.tsx
+++ b/src/components/links/__tests__/LinkStandalone-test.tsx
@@ -18,13 +18,29 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { matchers } from '@emotion/jest';
 import { screen } from '@testing-library/react';
 import { render, renderWithMemoryRouter } from '~common/helpers/test-utils';
 import { LinkStandalone } from '..';
 import { IconLink } from '../../icons';
 import { Tooltip } from '../../tooltip';
+import { cssVar } from '~utils/design-tokens';
+
+expect.extend(matchers);
 
 describe('LinkStandalone', () => {
+  it('adds an underline on hover and keyboard focus', () => {
+    setupStyledStandaloneLink();
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'), {
+      target: ':hover',
+    });
+    expect(link).toHaveStyleRule('text-decoration-line', cssVar('text-decoration-underline'), {
+      target: ':focus-visible',
+    });
+  });
+
   it('should display LinkStandalone properly', async () => {
     const { container } = renderWithMemoryRouter(
       <LinkStandalone to="/path">standalone link</LinkStandalone>,
@@ -56,6 +72,10 @@ describe('LinkStandalone', () => {
   });
 });
 
+function setupStyledStandaloneLink() {
+  return renderWithMemoryRouter(<LinkStandalone to="/path">standalone link</LinkStandalone>);
+}
+
 describe('LinkStandalone as button', () => {
   it('should render as a button when there is no "to" prop', async () => {
     const onClick = jest.fn();
diff --git a/src/components/select/SelectCommons.tsx b/src/components/select/SelectCommons.tsx
index b284efe24..902ef9612 100644
--- a/src/components/select/SelectCommons.tsx
+++ b/src/components/select/SelectCommons.tsx
@@ -265,12 +265,12 @@ export const SelectStyled = styled(MantineSelect)`
     padding-left: ${cssVar('dimension-space-150')};
 
     font: ${cssVar('typography-text-default-regular')};
-    color: ${cssVar('color-text-strong')};
+    color: ${cssVar('select-colors-input-text-default')};
     text-align: left;
     text-overflow: ellipsis;
 
-    background-color: ${cssVar('form-control-colors-background-default')};
-    border: ${cssVar('border-width-default')} solid ${cssVar('form-control-colors-border-default')};
+    background-color: ${cssVar('select-colors-input-background-default')};
+    border: ${cssVar('border-width-default')} solid ${cssVar('select-colors-input-border-default')};
     border-radius: ${cssVar('form-control-border-radius-default')};
 
     &[data-variant='unstyled'],
@@ -279,7 +279,7 @@ export const SelectStyled = styled(MantineSelect)`
     }
 
     &:hover {
-      background-color: ${cssVar('form-control-colors-background-hover')};
+      background-color: ${cssVar('select-colors-input-background-hover')};
     }
 
     &[data-error] {
@@ -288,31 +288,31 @@ export const SelectStyled = styled(MantineSelect)`
 
     &:focus,
     &:focus-visible {
-      border-color: ${cssVar('color-border-weak')};
-      outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+      border-color: ${cssVar('select-colors-input-border-focus')};
+      outline: ${cssVar('select-colors-input-focus')} solid ${cssVar('focus-border-width-default')};
     }
 
     &::placeholder {
-      color: ${cssVar('color-text-placeholder')};
+      color: ${cssVar('select-colors-input-text-placeholder')};
     }
 
     &[data-disabled],
     &[data-disabled]:hover {
-      color: ${cssVar('color-text-disabled')};
-      background-color: ${cssVar('color-surface-disabled')};
-      border-color: ${cssVar('color-border-disabled')};
+      color: ${cssVar('select-colors-input-text-disabled')};
+      background-color: ${cssVar('select-colors-input-background-disabled')};
+      border-color: ${cssVar('select-colors-input-border-disabled')};
       outline: none;
       cursor: not-allowed;
 
       &::placeholder {
-        color: ${cssVar('color-text-disabled')};
+        color: ${cssVar('select-colors-input-text-disabled')};
       }
     }
   }
 
   // Input left and right sections
   & .echoes-select-input-section {
-    color: ${cssVar('form-control-colors-icon-default')};
+    color: ${cssVar('select-colors-input-icon-default')};
 
     position: absolute;
     top: 0;
@@ -350,7 +350,7 @@ export const SelectStyled = styled(MantineSelect)`
 
         font: ${cssVar('typography-text-small-medium')};
         background-color: ${cssVar('color-background-utility-transparent')};
-        color: ${cssVar('form-control-colors-icon-default')};
+        color: ${cssVar('select-colors-input-icon-default')};
 
         border: none;
         border-radius: ${cssVar('border-radius-200')};
diff --git a/src/components/select/SelectItemCommons.tsx b/src/components/select/SelectItemCommons.tsx
index 007349b42..93239a969 100644
--- a/src/components/select/SelectItemCommons.tsx
+++ b/src/components/select/SelectItemCommons.tsx
@@ -75,8 +75,8 @@ const SelectItemWrapper = styled.div`
       ${cssVar('dimension-space-150')};
 
     font: ${cssVar('typography-text-small-medium')};
-    color: ${cssVar('color-text-default')};
-    background-color: ${cssVar('color-surface-default')};
+    color: ${cssVar('select-colors-option-text-default')};
+    background-color: ${cssVar('select-colors-option-background-default')};
 
     border: ${cssVar('focus-border-width-default')} solid transparent;
     border-radius: ${cssVar('border-radius-none')};
@@ -86,18 +86,19 @@ const SelectItemWrapper = styled.div`
 
   .echoes-select-option:not([data-combobox-disabled]):hover &,
   .echoes-select-option:not([data-combobox-disabled])[data-combobox-selected] & {
-    background-color: ${cssVar('color-surface-hover')};
+    background-color: ${cssVar('select-colors-option-background-hover')};
   }
   .echoes-select-option:not([data-combobox-disabled])[data-combobox-active] & {
-    background-color: ${cssVar('color-background-selected-weak-default')};
+    color: ${cssVar('select-colors-option-text-selected')};
+    background-color: ${cssVar('select-colors-option-background-selected')};
   }
   .echoes-select-option:not([data-combobox-disabled])[data-combobox-active]:hover &,
   .echoes-select-option:not([data-combobox-disabled])[data-combobox-active][data-combobox-selected]
     & {
-    background-color: ${cssVar('color-background-selected-weak-hover')};
+    background-color: ${cssVar('select-colors-option-background-selected-hover')};
   }
   .echoes-select-option[data-combobox-disabled] & {
-    color: ${cssVar('color-text-disabled')};
+    color: ${cssVar('select-colors-option-text-disabled')};
     cursor: default;
   }
 `;
@@ -148,10 +149,10 @@ const SelectItemStatusStyled = styled.div`
   min-width: ${cssVar('dimension-width-250')};
 
   font: ${cssVar('typography-text-small-medium')};
-  color: ${cssVar('color-icon-selected')};
+  color: ${cssVar('select-colors-option-icon-selected')};
 
   .echoes-select-option[data-combobox-disabled] & {
-    color: ${cssVar('color-icon-disabled')};
+    color: ${cssVar('select-colors-option-icon-disabled')};
   }
 `;
 SelectItemStatusStyled.displayName = 'SelectItemStatusStyled';
@@ -164,13 +165,14 @@ const SelectItemStatusRadio = styled.div`
   min-width: ${cssVar('dimension-width-200')};
   padding: 0;
 
-  background-color: ${cssVar('color-surface-default')};
-  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-bolder')};
+  background-color: ${cssVar('select-colors-indicator-background-default')};
+  border: ${cssVar('border-width-default')} solid
+    ${cssVar('select-colors-indicator-border-default')};
   border-radius: ${cssVar('border-radius-full')};
 
   &[data-selected] {
-    border-color: ${cssVar('color-border-accent-default')};
-    background-color: ${cssVar('color-background-accent-default')};
+    border-color: ${cssVar('select-colors-indicator-border-selected')};
+    background-color: ${cssVar('select-colors-indicator-background-selected')};
 
     &::after {
       content: '';
@@ -179,20 +181,20 @@ const SelectItemStatusRadio = styled.div`
       height: 100%;
       width: 100%;
 
-      background-color: ${cssVar('color-icon-on-color')};
-      border: 0.25rem solid ${cssVar('color-border-accent-default')};
+      background-color: ${cssVar('select-colors-indicator-foreground-selected')};
+      border: 0.25rem solid ${cssVar('select-colors-indicator-border-selected')};
       border-radius: ${cssVar('border-radius-full')};
     }
   }
 
   .echoes-select-option[data-combobox-disabled] & {
-    background-color: ${cssVar('color-surface-disabled')};
-    border-color: ${cssVar('color-border-disabled')};
+    background-color: ${cssVar('select-colors-indicator-background-disabled')};
+    border-color: ${cssVar('select-colors-indicator-border-disabled')};
     border-width: ${cssVar('border-width-default')};
 
     &[data-selected]::after {
-      background-color: ${cssVar('color-icon-disabled')};
-      border-color: ${cssVar('color-surface-disabled')};
+      background-color: ${cssVar('select-colors-indicator-foreground-disabled')};
+      border-color: ${cssVar('select-colors-indicator-background-disabled')};
     }
   }
 `;
diff --git a/src/components/selection-cards/SelectionCards.tsx b/src/components/selection-cards/SelectionCards.tsx
index ab45f6113..75a5f2036 100644
--- a/src/components/selection-cards/SelectionCards.tsx
+++ b/src/components/selection-cards/SelectionCards.tsx
@@ -220,7 +220,7 @@ const StyledSelectionCard = styled(RadioGroup.Item)`
   }
 
   &[data-state='checked'] {
-    border-color: ${cssVar('color-background-accent-default')};
+    border-color: ${cssVar('color-background-selected-bold-default')};
     border-width: ${cssVar('focus-border-width-default')};
     box-shadow: ${cssVar('box-shadow-small')};
 
diff --git a/src/components/table/TableStyles.tsx b/src/components/table/TableStyles.tsx
index 85eb1609b..c70ba296c 100644
--- a/src/components/table/TableStyles.tsx
+++ b/src/components/table/TableStyles.tsx
@@ -27,15 +27,15 @@ import { cssVar } from '~utils/design-tokens';
 const TABLE_VARIETY_STYLES = {
   [TableVariety.Surface]: {
     '--table-header-background-color': cssVar('table-colors-background-header-default'),
-    border: `${cssVar('border-width-default')} solid ${cssVar('color-border-bold')}`,
-    'border-collapse': 'separate',
+    border: `${cssVar('border-width-default')} solid ${cssVar('issue-row-colors-border')}`,
+    borderCollapse: 'separate',
   },
   [TableVariety.Ghost]: {
-    '--table-header-background-color': cssVar('color-roles-support-transparent'),
+    '--table-header-background-color': cssVar('color-background-utility-transparent'),
     border: 'none',
-    'border-collapse': 'collapse',
+    borderCollapse: 'collapse',
   },
-};
+} as const;
 
 export const StyledTable = styled.table<Required<Pick<TableProps, 'variety' | 'gridTemplate'>>>`
   display: grid;
@@ -87,7 +87,7 @@ export const cellBaseStyle = css`
   font: ${cssVar('typography-text-default-regular')};
 
   tbody & {
-    border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+    border-top: ${cssVar('border-width-default')} solid ${cssVar('issue-row-colors-border')};
   }
 
   .table-variety-surface thead tr:first-child &:first-child {
@@ -111,17 +111,18 @@ export const StyledTableCell = styled.td`
   ${cellBaseStyle}
 
   justify-content: center;
+  background-color: ${cssVar('issue-row-colors-background-default')};
 
   ${StyledTableRow}:hover:not(.selected) & {
-    background-color: ${cssVar('color-surface-hover')};
+    background-color: ${cssVar('issue-row-colors-background-hover')};
   }
 
   ${StyledTableRow}.selected & {
-    background-color: ${cssVar('color-background-selected-weak-default')};
+    background-color: ${cssVar('issue-row-colors-background-selected')};
   }
 
   ${StyledTableRow}:hover.selected & {
-    background-color: ${cssVar('color-background-selected-weak-hover')};
+    background-color: ${cssVar('issue-row-colors-background-selected-hover')};
   }
 `;
 StyledTableCell.displayName = 'StyledTableCell';
diff --git a/src/components/text-input/TextInputBase.tsx b/src/components/text-input/TextInputBase.tsx
index e92b68e52..1deec0b03 100644
--- a/src/components/text-input/TextInputBase.tsx
+++ b/src/components/text-input/TextInputBase.tsx
@@ -50,9 +50,9 @@ export interface InputProps extends ValidationProps, FormFieldPropsSubset {
 }
 
 export const InputStyled = styled.input`
-  color: ${cssVar('color-text-default')};
-  background-color: ${cssVar('form-control-colors-background-default')};
-  border: ${cssVar('border-width-default')} solid ${cssVar('form-control-colors-border-default')};
+  color: ${cssVar('input-colors-text-default')};
+  background-color: ${cssVar('input-colors-background-default')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('input-colors-border-default')};
   border-radius: ${cssVar('form-control-border-radius-default')};
 
   font: ${cssVar('typography-text-default-regular')};
@@ -64,10 +64,10 @@ export const InputStyled = styled.input`
   padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-150')};
 
   &::placeholder {
-    color: ${cssVar('color-text-placeholder')};
+    color: ${cssVar('input-colors-text-placeholder')};
   }
   &:hover {
-    background-color: ${cssVar('form-control-colors-background-hover')};
+    background-color: ${cssVar('input-colors-background-hover')};
   }
   &[data-valid] {
     border-color: ${cssVar('color-border-success-default')};
@@ -92,20 +92,20 @@ export const InputStyled = styled.input`
   &:focus,
   &:focus-within,
   &:focus-visible {
-    border-color: ${cssVar('form-control-colors-border-focus')};
-    outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+    border-color: ${cssVar('input-colors-border-focus')};
+    outline: ${cssVar('input-colors-focus')} solid ${cssVar('focus-border-width-default')};
   }
 
   &:disabled,
   &:disabled:hover {
-    color: ${cssVar('color-text-disabled')};
-    background-color: ${cssVar('color-surface-disabled')};
-    border-color: ${cssVar('color-border-disabled')};
+    color: ${cssVar('input-colors-text-disabled')};
+    background-color: ${cssVar('input-colors-background-disabled')};
+    border-color: ${cssVar('input-colors-border-disabled')};
     outline: none;
     cursor: not-allowed;
 
     &::placeholder {
-      color: ${cssVar('color-text-disabled')};
+      color: ${cssVar('input-colors-text-disabled')};
     }
   }
 `;
diff --git a/src/generated/design-tokens-base.css b/src/generated/design-tokens-base.css
index 413ac8d2e..ce67a0853 100644
--- a/src/generated/design-tokens-base.css
+++ b/src/generated/design-tokens-base.css
@@ -117,9 +117,6 @@
   --echoes-typography-display-default: 600 2.125rem/3.125rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --echoes-focus-border-width-default: 2px;
   --echoes-focus-border-offset-default: 1px;
-  --echoes-color-roles-support-black: #000000;
-  --echoes-color-roles-support-white: #ffffff;
-  --echoes-color-roles-support-transparent: #00000000;
   --echoes-banner-sizes-height: 2.75rem;
   --echoes-badge-sizes-height-small: 1.25rem;
   --echoes-badge-sizes-height-medium: 1.75rem;
diff --git a/src/generated/design-tokens-base.json b/src/generated/design-tokens-base.json
index 57559e157..9b3aae968 100644
--- a/src/generated/design-tokens-base.json
+++ b/src/generated/design-tokens-base.json
@@ -95,9 +95,6 @@
   "echoes-typography-display-default": "600 2.125rem/3.125rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
   "echoes-focus-border-width-default": "2px",
   "echoes-focus-border-offset-default": "1px",
-  "echoes-color-roles-support-black": "#000000",
-  "echoes-color-roles-support-white": "#ffffff",
-  "echoes-color-roles-support-transparent": "#00000000",
   "echoes-banner-sizes-height": "2.75rem",
   "echoes-badge-sizes-height-small": "1.25rem",
   "echoes-badge-sizes-height-medium": "1.75rem",
diff --git a/src/generated/design-tokens-dark.css b/src/generated/design-tokens-dark.css
index 9eb833d09..f6db54732 100644
--- a/src/generated/design-tokens-dark.css
+++ b/src/generated/design-tokens-dark.css
@@ -21,19 +21,169 @@
  */
 
 html[data-echoes-theme='dark'], [data-echoes-theme='dark'] {
+  --echoes-color-palette-ui-gray-1: #0c0d10;
+  --echoes-color-palette-ui-gray-2: #111417;
+  --echoes-color-palette-ui-gray-3: #181b1f;
+  --echoes-color-palette-ui-gray-4: #1e2227;
+  --echoes-color-palette-ui-gray-5: #262b31;
+  --echoes-color-palette-ui-gray-6: #333840;
+  --echoes-color-palette-ui-gray-7: #474e57;
+  --echoes-color-palette-ui-gray-8: #616a75;
+  --echoes-color-palette-ui-gray-9: #7f8791;
+  --echoes-color-palette-ui-gray-10: #999fa7;
+  --echoes-color-palette-ui-gray-11: #b7bbc0;
+  --echoes-color-palette-ui-gray-12: #f4f6f8;
+  --echoes-color-palette-ui-gray-alpha-1: #ffffff05;
+  --echoes-color-palette-ui-gray-alpha-2: #ffffff08;
+  --echoes-color-palette-ui-gray-alpha-3: #ffffff0d;
+  --echoes-color-palette-ui-gray-alpha-4: #ffffff14;
+  --echoes-color-palette-ui-gray-alpha-5: #ffffff1f;
+  --echoes-color-palette-ui-gray-alpha-6: #ffffff2e;
+  --echoes-color-palette-ui-gray-alpha-7: #ffffff3d;
+  --echoes-color-palette-ui-gray-alpha-8: #ffffff52;
+  --echoes-color-palette-ui-gray-alpha-9: #ffffff70;
+  --echoes-color-palette-ui-gray-alpha-10: #ffffff85;
+  --echoes-color-palette-ui-gray-alpha-11: #ffffffb8;
+  --echoes-color-palette-ui-gray-alpha-12: #ffffffeb;
+  --echoes-color-palette-ui-blue-1: #10161f;
+  --echoes-color-palette-ui-blue-2: #151d29;
+  --echoes-color-palette-ui-blue-3: #1a2533;
+  --echoes-color-palette-ui-blue-4: #202f42;
+  --echoes-color-palette-ui-blue-5: #253851;
+  --echoes-color-palette-ui-blue-6: #2e496b;
+  --echoes-color-palette-ui-blue-7: #375d8f;
+  --echoes-color-palette-ui-blue-8: #407bc7;
+  --echoes-color-palette-ui-blue-9: #73a7ec;
+  --echoes-color-palette-ui-blue-10: #92b7e8;
+  --echoes-color-palette-ui-blue-11: #bacce4;
+  --echoes-color-palette-ui-blue-12: #eef0f4;
+  --echoes-color-palette-ui-green-1: #111811;
+  --echoes-color-palette-ui-green-2: #162016;
+  --echoes-color-palette-ui-green-3: #1b281b;
+  --echoes-color-palette-ui-green-4: #223322;
+  --echoes-color-palette-ui-green-5: #273d27;
+  --echoes-color-palette-ui-green-6: #315132;
+  --echoes-color-palette-ui-green-7: #3b693d;
+  --echoes-color-palette-ui-green-8: #458d49;
+  --echoes-color-palette-ui-green-9: #4fc059;
+  --echoes-color-palette-ui-green-10: #68cf6f;
+  --echoes-color-palette-ui-green-11: #94e197;
+  --echoes-color-palette-ui-green-12: #e8f4e8;
+  --echoes-color-palette-ui-yellow-1: #181610;
+  --echoes-color-palette-ui-yellow-2: #201c15;
+  --echoes-color-palette-ui-yellow-3: #282319;
+  --echoes-color-palette-ui-yellow-4: #332d20;
+  --echoes-color-palette-ui-yellow-5: #3e3624;
+  --echoes-color-palette-ui-yellow-6: #52462e;
+  --echoes-color-palette-ui-yellow-7: #6b5a36;
+  --echoes-color-palette-ui-yellow-8: #90773f;
+  --echoes-color-palette-ui-yellow-9: #c69f47;
+  --echoes-color-palette-ui-yellow-10: #d4af5f;
+  --echoes-color-palette-ui-yellow-11: #e3c78c;
+  --echoes-color-palette-ui-yellow-12: #f4f0e7;
+  --echoes-color-palette-ui-red-1: #1f1211;
+  --echoes-color-palette-ui-red-2: #291716;
+  --echoes-color-palette-ui-red-3: #341d1a;
+  --echoes-color-palette-ui-red-4: #432421;
+  --echoes-color-palette-ui-red-5: #522926;
+  --echoes-color-palette-ui-red-6: #6d3431;
+  --echoes-color-palette-ui-red-7: #913f3a;
+  --echoes-color-palette-ui-red-8: #c74b46;
+  --echoes-color-palette-ui-red-9: #ee8078;
+  --echoes-color-palette-ui-red-10: #e99d96;
+  --echoes-color-palette-ui-red-11: #e5c1bd;
+  --echoes-color-palette-ui-red-12: #f4efee;
+  --echoes-color-palette-ui-teal-1: #111717;
+  --echoes-color-palette-ui-teal-2: #161f1e;
+  --echoes-color-palette-ui-teal-3: #1b2726;
+  --echoes-color-palette-ui-teal-4: #223130;
+  --echoes-color-palette-ui-teal-5: #273b3a;
+  --echoes-color-palette-ui-teal-6: #314e4c;
+  --echoes-color-palette-ui-teal-7: #3b6562;
+  --echoes-color-palette-ui-teal-8: #458783;
+  --echoes-color-palette-ui-teal-9: #4fb8b2;
+  --echoes-color-palette-ui-teal-10: #69c7c1;
+  --echoes-color-palette-ui-teal-11: #95dad4;
+  --echoes-color-palette-ui-teal-12: #e4f4f2;
+  --echoes-color-palette-ui-cyan-1: #111719;
+  --echoes-color-palette-ui-cyan-2: #161e21;
+  --echoes-color-palette-ui-cyan-3: #1b262a;
+  --echoes-color-palette-ui-cyan-4: #223135;
+  --echoes-color-palette-ui-cyan-5: #263a41;
+  --echoes-color-palette-ui-cyan-6: #314c55;
+  --echoes-color-palette-ui-cyan-7: #3a6370;
+  --echoes-color-palette-ui-cyan-8: #448498;
+  --echoes-color-palette-ui-cyan-9: #4eb3d1;
+  --echoes-color-palette-ui-cyan-10: #68c3de;
+  --echoes-color-palette-ui-cyan-11: #a2d4e4;
+  --echoes-color-palette-ui-cyan-12: #ebf1f4;
+  --echoes-color-palette-ui-purple-1: #181322;
+  --echoes-color-palette-ui-purple-2: #20182d;
+  --echoes-color-palette-ui-purple-3: #281e39;
+  --echoes-color-palette-ui-purple-4: #332649;
+  --echoes-color-palette-ui-purple-5: #3d2c5a;
+  --echoes-color-palette-ui-purple-6: #513878;
+  --echoes-color-palette-ui-purple-7: #6a43a1;
+  --echoes-color-palette-ui-purple-8: #8d58d6;
+  --echoes-color-palette-ui-purple-9: #b290ec;
+  --echoes-color-palette-ui-purple-10: #bda7e8;
+  --echoes-color-palette-ui-purple-11: #cfc4e4;
+  --echoes-color-palette-ui-purple-12: #f1eff4;
+  --echoes-color-palette-ui-magenta-1: #1e1219;
+  --echoes-color-palette-ui-magenta-2: #271722;
+  --echoes-color-palette-ui-magenta-3: #311c2a;
+  --echoes-color-palette-ui-magenta-4: #3f2336;
+  --echoes-color-palette-ui-magenta-5: #4d2841;
+  --echoes-color-palette-ui-magenta-6: #663356;
+  --echoes-color-palette-ui-magenta-7: #873d71;
+  --echoes-color-palette-ui-magenta-8: #b9499a;
+  --echoes-color-palette-ui-magenta-9: #ee6fc9;
+  --echoes-color-palette-ui-magenta-10: #ea93cd;
+  --echoes-color-palette-ui-magenta-11: #e5bdd6;
+  --echoes-color-palette-ui-magenta-12: #f4eef2;
+  --echoes-color-palette-ui-orange-1: #1b1410;
+  --echoes-color-palette-ui-orange-2: #241b15;
+  --echoes-color-palette-ui-orange-3: #2d2119;
+  --echoes-color-palette-ui-orange-4: #3a2a1f;
+  --echoes-color-palette-ui-orange-5: #463224;
+  --echoes-color-palette-ui-orange-6: #5d412d;
+  --echoes-color-palette-ui-orange-7: #7a5236;
+  --echoes-color-palette-ui-orange-8: #a76a3e;
+  --echoes-color-palette-ui-orange-9: #e68b46;
+  --echoes-color-palette-ui-orange-10: #e9a271;
+  --echoes-color-palette-ui-orange-11: #e5c3ad;
+  --echoes-color-palette-ui-orange-12: #f4efec;
+  --echoes-color-palette-ui-data-viz-categorical-1: #78a7e5;
+  --echoes-color-palette-ui-data-viz-categorical-2: #e986b7;
+  --echoes-color-palette-ui-data-viz-categorical-3: #5cb8a7;
+  --echoes-color-palette-ui-data-viz-categorical-4: #9f6beb;
+  --echoes-color-palette-ui-data-viz-categorical-5: #e89361;
+  --echoes-color-palette-ui-data-viz-categorical-6: #8ad8f1;
+  --echoes-color-palette-ui-data-viz-categorical-7: #f0a8e9;
+  --echoes-color-palette-ui-data-viz-categorical-8: #91dc63;
+  --echoes-color-palette-ui-data-viz-severity-blocker: #d53a2c;
+  --echoes-color-palette-ui-data-viz-severity-high: #e98475;
+  --echoes-color-palette-ui-data-viz-severity-medium: #e39757;
+  --echoes-color-palette-ui-data-viz-severity-low: #cdb761;
+  --echoes-color-palette-ui-data-viz-severity-info: #78a7e5;
+  --echoes-color-palette-ui-data-viz-placeholder-default: #828282;
   --echoes-color-background-neutral-subtle-default: #3e4357;
   --echoes-color-background-neutral-subtle-hover: #3e4357cc;
   --echoes-color-background-neutral-subtle-focus: #3e4357;
   --echoes-color-background-neutral-subtle-active: #3e4357b3;
   --echoes-color-background-neutral-bolder-default: #637192;
-  --echoes-color-background-accent-default: #9fa9ed;
-  --echoes-color-background-accent-hover: #bdc6ff;
-  --echoes-color-background-accent-focus: #9fa9ed;
-  --echoes-color-background-accent-active: #d1d7fe;
-  --echoes-color-background-accent-weak-default: #5d6cd033;
-  --echoes-color-background-accent-weak-hover: #5d6cd04d;
-  --echoes-color-background-accent-weak-focus: #5d6cd033;
-  --echoes-color-background-accent-weak-active: #5d6cd066;
+  --echoes-color-background-action-neutral-default: #f4f6f8; /** Highest-contrast neutral fill for primary and routine actions. */
+  --echoes-color-background-action-neutral-hover: #b7bbc0; /** Hover fill for primary and routine neutral actions. */
+  --echoes-color-background-action-neutral-focus: #f4f6f8; /** Focused fill for primary and routine neutral actions. */
+  --echoes-color-background-action-neutral-active: #999fa7; /** Active fill for primary and routine neutral actions. */
+  --echoes-color-background-accent-default: #f4f6f8; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-hover: #b7bbc0; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-focus: #f4f6f8; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-active: #999fa7; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-weak-default: #181b1f; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-accent-weak-hover: #1e2227; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-accent-weak-focus: #181b1f; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-accent-weak-active: #262b31; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
   --echoes-color-background-warning-default: #fadc79;
   --echoes-color-background-warning-hover: #fce9a3;
   --echoes-color-background-warning-focus: #fadc79;
@@ -67,79 +217,82 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] {
   --echoes-color-background-info-weak-focus: #8fcaea4d;
   --echoes-color-background-info-weak-active: #8fcaea1a;
   --echoes-color-background-utility-transparent: #00000000;
-  --echoes-color-background-selected-weak-default: #5d6cd033;
-  --echoes-color-background-selected-weak-hover: #5d6cd04d;
-  --echoes-color-background-selected-weak-pressed: #5d6cd066;
-  --echoes-color-background-selected-bold-default: #bdc6ff;
-  --echoes-color-background-selected-bold-hover: #d1d7fe;
-  --echoes-color-background-selected-bold-pressed: #e8ebff;
-  --echoes-color-background-ghost-accent-default: #00000000;
-  --echoes-color-background-ghost-accent-hover: #5d6cd033;
-  --echoes-color-background-ghost-accent-active: #5d6cd04d;
-  --echoes-color-background-ghost-accent-focus: #00000000;
-  --echoes-color-background-ghost-neutral-default: #00000000;
-  --echoes-color-background-ghost-neutral-hover: #1d212f;
-  --echoes-color-background-ghost-neutral-active: #12141d;
-  --echoes-color-background-ghost-neutral-focus: #00000000;
+  --echoes-color-background-selected-weak-default: #181b1f; /** Neutral selected background for rows, options, and navigation items. */
+  --echoes-color-background-selected-weak-hover: #1e2227; /** Hover state for a neutral selected background. */
+  --echoes-color-background-selected-weak-pressed: #262b31; /** Pressed state for a neutral selected background. */
+  --echoes-color-background-selected-bold-default: #f4f6f8; /** High-contrast neutral selected fill for checkboxes, radios, and compact indicators. */
+  --echoes-color-background-selected-bold-hover: #b7bbc0; /** Hover state for a high-contrast neutral selected fill. */
+  --echoes-color-background-selected-bold-pressed: #999fa7; /** Pressed state for a high-contrast neutral selected fill. */
+  --echoes-color-background-ghost-accent-default: #00000000; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-accent-hover: #ffffff0d; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-accent-active: #ffffff1f; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-accent-focus: #00000000; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-neutral-default: #00000000; /** Resting background for quiet neutral actions. */
+  --echoes-color-background-ghost-neutral-hover: #ffffff0d; /** Hover background for quiet neutral actions. */
+  --echoes-color-background-ghost-neutral-active: #ffffff1f; /** Active background for quiet neutral actions. */
+  --echoes-color-background-ghost-neutral-focus: #00000000; /** Focused background for quiet neutral actions; the focus ring supplies the visible cue. */
   --echoes-color-background-ghost-danger-default: #00000000;
   --echoes-color-background-ghost-danger-hover: #5d1d1333;
   --echoes-color-background-ghost-danger-active: #5d1d134d;
   --echoes-color-background-ghost-danger-focus: #00000000;
-  --echoes-color-background-emphasis-weak-default: #b790f74d;
-  --echoes-color-background-emphasis-weak-hover: #b790f733;
-  --echoes-color-background-emphasis-weak-focus: #b790f74d;
-  --echoes-color-background-emphasis-weak-active: #b790f71a;
-  --echoes-color-background-emphasis-default: #d9c5ff;
-  --echoes-color-background-emphasis-hover: #e5d5ff;
-  --echoes-color-background-emphasis-focus: #d9c5ff;
-  --echoes-color-background-emphasis-active: #ede2ff;
+  --echoes-color-background-emphasis-weak-default: #1a2533; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-weak-hover: #202f42; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-weak-focus: #1a2533; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-weak-active: #253851; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-default: #73a7ec; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-hover: #92b7e8; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-focus: #73a7ec; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-active: #92b7e8; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
   --echoes-color-background-favourite-default: #fadc79;
   --echoes-color-background-favourite-hover: #fce9a3;
-  --echoes-color-surface-default: #2a2f40;
-  --echoes-color-surface-hover: #1d212f;
-  --echoes-color-surface-active: #12141d;
-  --echoes-color-surface-canvas-default: #1d212f;
+  --echoes-color-surface-default: #111417;
+  --echoes-color-surface-hover: #ffffff0d;
+  --echoes-color-surface-active: #ffffff1f;
+  --echoes-color-surface-canvas-default: #0c0d10;
   --echoes-color-surface-inverse-default: #e1e6f3;
   --echoes-color-surface-inverse-hover: #eff2f9;
   --echoes-color-surface-inverse-focus: #e1e6f3;
   --echoes-color-surface-inverse-active: #f6f7fb;
-  --echoes-color-surface-disabled: #3e4357;
+  --echoes-color-surface-disabled: #181b1f;
   --echoes-color-overlays-back-drop-default: #08090c99;
   --echoes-color-overlays-disabled: #3e4357;
-  --echoes-color-text-strong: #fcfcfd;
-  --echoes-color-text-default: #e1e6f3;
-  --echoes-color-text-subtle: #c5cddf;
-  --echoes-color-text-disabled: #637192;
-  --echoes-color-text-on-color: #2a2f40;
+  --echoes-color-text-strong: #f4f6f8;
+  --echoes-color-text-default: #b7bbc0;
+  --echoes-color-text-subtle: #b7bbc0;
+  --echoes-color-text-disabled: #7f8791;
+  --echoes-color-text-on-color: #111417;
+  --echoes-color-text-on-action: #0c0d10; /** Inverse neutral foreground on high-contrast neutral actions. */
   --echoes-color-text-on-color-inverse: #2a2f40;
   --echoes-color-text-danger: #fda29b;
-  --echoes-color-text-placeholder: #c5cddf;
-  --echoes-color-text-accent: #9fa9ed;
+  --echoes-color-text-placeholder: #b7bbc0;
+  --echoes-color-text-accent: #f4f6f8; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
   --echoes-color-text-info: #8fcaea;
   --echoes-color-text-success: #c4ea9e;
   --echoes-color-text-warning: #fef5d0;
-  --echoes-color-text-emphasis: #ede2ff;
-  --echoes-color-text-link-hover: #bdc6ff;
-  --echoes-color-icon-bold: #fcfcfd;
-  --echoes-color-icon-default: #e1e6f3;
-  --echoes-color-icon-subtle: #c5cddf;
-  --echoes-color-icon-disabled: #637192;
-  --echoes-color-icon-placeholder: #c5cddf;
-  --echoes-color-icon-accent: #bdc6ff;
+  --echoes-color-text-emphasis: #bacce4; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-text-link-hover: #f4f6f8; /** Neutral hover and focus foreground for links; underline supplies the additional interaction cue. */
+  --echoes-color-text-link-default: #f4f6f8; /** Neutral foreground for links. Inline links remain persistently underlined. */
+  --echoes-color-icon-bold: #f4f6f8;
+  --echoes-color-icon-default: #b7bbc0;
+  --echoes-color-icon-subtle: #b7bbc0;
+  --echoes-color-icon-disabled: #7f8791;
+  --echoes-color-icon-placeholder: #b7bbc0;
+  --echoes-color-icon-accent: #f4f6f8; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
   --echoes-color-icon-danger: #fda29b;
   --echoes-color-icon-warning: #fce9a3;
   --echoes-color-icon-success: #d4f2b7;
   --echoes-color-icon-info: #b8def1;
-  --echoes-color-icon-on-color: #2a2f40;
+  --echoes-color-icon-on-color: #111417;
   --echoes-color-icon-on-color-inverse: #2a2f40;
-  --echoes-color-icon-selected: #bdc6ff;
-  --echoes-color-icon-emphasis: #ede2ff;
-  --echoes-color-border-bolder: #c5cddf;
-  --echoes-color-border-bold: #a6adc2;
-  --echoes-color-border-weak: #637192;
-  --echoes-color-border-weaker: #3e4357;
-  --echoes-color-border-disabled: #637192;
-  --echoes-color-border-accent-default: #bdc6ff;
+  --echoes-color-icon-selected: #f4f6f8; /** Neutral icon foreground for selected rows, options, and navigation items. */
+  --echoes-color-icon-emphasis: #bacce4; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-border-bolder: #999fa7;
+  --echoes-color-border-bold: #474e57;
+  --echoes-color-border-weak: #333840;
+  --echoes-color-border-weaker: #262b31;
+  --echoes-color-border-disabled: #474e57;
+  --echoes-color-border-accent-default: #f4f6f8; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-border-action-neutral: #f4f6f8; /** Boundary color for high-contrast neutral actions. */
   --echoes-color-border-danger-weak: #fda29b66;
   --echoes-color-border-danger-default: #fda29b;
   --echoes-color-border-none: #00000000;
@@ -147,7 +300,7 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] {
   --echoes-color-border-success-default: #b3dd86;
   --echoes-color-border-warning-weak: #fadc7966;
   --echoes-color-border-info-weak: #8fcaea66;
-  --echoes-color-border-emphasis-weak: #b790f766;
+  --echoes-color-border-emphasis-weak: #375d8f; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
   --echoes-color-code-background-default: #3e4357;
   --echoes-color-code-background-highlight: #2a2f40;
   --echoes-color-code-border-default: #00000000;
@@ -160,7 +313,7 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] {
   --echoes-color-code-text-string: #98c379;
   --echoes-color-code-text-keyword-subtle: #ababff;
   --echoes-color-code-text-preprocessing-directive: #78d779;
-  --echoes-color-focus-default: #bdc6ff;
+  --echoes-color-focus-default: #f4f6f8; /** Theme-neutral high-contrast keyboard focus indicator. */
   --echoes-color-charts-categorical-1: #3b82d4;
   --echoes-color-charts-categorical-2: #d74a78;
   --echoes-color-charts-categorical-3: #0f9383;
@@ -180,12 +333,60 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] {
   --echoes-box-shadow-medium: inset 0 2px 15px -2px #08090c0f, 0 4px 15px -2px #08090c80;
   --echoes-box-shadow-large: 0 4px 6px -2px #08090c0d, 0 12px 20px -4px #08090c80;
   --echoes-box-shadow-x-large: 0 8px 8px -4px #08090c0a, 0 20px 30px -4px #08090c80;
+  --echoes-button-colors-background-default: #f4f6f8;
+  --echoes-button-colors-background-hover: #b7bbc0;
+  --echoes-button-colors-background-active: #999fa7;
+  --echoes-button-colors-background-disabled: #181b1f;
+  --echoes-button-colors-border-default: #f4f6f8;
+  --echoes-button-colors-text-default: #0c0d10;
+  --echoes-button-colors-text-disabled: #7f8791;
+  --echoes-button-colors-focus: #f4f6f8;
+  --echoes-button-colors-outlined-background-default: #111417;
+  --echoes-button-colors-outlined-background-hover: #ffffff0d;
+  --echoes-button-colors-outlined-background-active: #ffffff1f;
+  --echoes-button-colors-outlined-background-focus: #111417;
+  --echoes-button-colors-outlined-background-disabled: #181b1f;
+  --echoes-button-colors-outlined-border-default: #999fa7;
+  --echoes-button-colors-outlined-text-default: #f4f6f8;
+  --echoes-button-colors-outlined-text-disabled: #7f8791;
+  --echoes-button-colors-ghost-background-default: #00000000;
+  --echoes-button-colors-ghost-background-hover: #ffffff0d;
+  --echoes-button-colors-ghost-background-active: #ffffff1f;
+  --echoes-button-colors-ghost-background-focus: #00000000;
+  --echoes-button-colors-ghost-background-disabled: #00000000;
+  --echoes-button-colors-ghost-text-default: #f4f6f8;
+  --echoes-button-colors-ghost-text-disabled: #7f8791;
+  --echoes-input-colors-background-default: #111417;
+  --echoes-input-colors-background-hover: #ffffff0d;
+  --echoes-input-colors-background-disabled: #181b1f;
+  --echoes-input-colors-border-default: #999fa7;
+  --echoes-input-colors-border-focus: #f4f6f8;
+  --echoes-input-colors-border-disabled: #474e57;
+  --echoes-input-colors-text-default: #f4f6f8;
+  --echoes-input-colors-text-placeholder: #b7bbc0;
+  --echoes-input-colors-text-disabled: #7f8791;
+  --echoes-input-colors-focus: #f4f6f8;
+  --echoes-input-colors-icon-default: #b7bbc0;
+  --echoes-navigation-item-colors-background-default: #111417;
+  --echoes-navigation-item-colors-background-hover: #ffffff0d;
+  --echoes-navigation-item-colors-background-selected: #181b1f;
+  --echoes-navigation-item-colors-background-selected-hover: #1e2227;
+  --echoes-navigation-item-colors-text-default: #f4f6f8;
+  --echoes-navigation-item-colors-text-selected: #f4f6f8;
+  --echoes-navigation-item-colors-icon-default: #b7bbc0;
+  --echoes-navigation-item-colors-icon-selected: #f4f6f8;
+  --echoes-navigation-item-colors-focus: #f4f6f8;
+  --echoes-issue-row-colors-background-default: #111417;
+  --echoes-issue-row-colors-background-hover: #ffffff0d;
+  --echoes-issue-row-colors-background-selected: #181b1f;
+  --echoes-issue-row-colors-background-selected-hover: #1e2227;
+  --echoes-issue-row-colors-border: #333840;
   --echoes-bottom-scroll-colors-shadow-gradient: #ffffff33;
-  --echoes-form-control-colors-background-default: #2a2f40;
-  --echoes-form-control-colors-background-hover: #1d212f;
-  --echoes-form-control-colors-border-default: #c5cddf;
-  --echoes-form-control-colors-border-focus: #637192;
-  --echoes-form-control-colors-icon-default: #c5cddf;
+  --echoes-form-control-colors-background-default: #111417;
+  --echoes-form-control-colors-background-hover: #ffffff0d;
+  --echoes-form-control-colors-border-default: #999fa7;
+  --echoes-form-control-colors-border-focus: #333840;
+  --echoes-form-control-colors-icon-default: #b7bbc0;
   --echoes-logos-colors-text: #ffffff;
   --echoes-logos-colors-brand: #ffffff;
   --echoes-logos-colors-sonar-whale: #d3121d;
@@ -253,4 +454,39 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] {
   --echoes-sidebar-navigation-item-colors-background-hover: #12141d;
   --echoes-sidebar-navigation-item-colors-background-active: #08090c;
   --echoes-table-colors-background-header-default: #3e4357;
+  --echoes-link-colors-text-default: #f4f6f8;
+  --echoes-link-colors-text-hover: #f4f6f8;
+  --echoes-link-colors-text-subtle: #b7bbc0;
+  --echoes-link-colors-focus: #f4f6f8;
+  --echoes-select-colors-input-background-default: #111417;
+  --echoes-select-colors-input-background-hover: #ffffff0d;
+  --echoes-select-colors-input-background-disabled: #181b1f;
+  --echoes-select-colors-input-border-default: #999fa7;
+  --echoes-select-colors-input-border-focus: #f4f6f8;
+  --echoes-select-colors-input-border-disabled: #474e57;
+  --echoes-select-colors-input-text-default: #f4f6f8;
+  --echoes-select-colors-input-text-placeholder: #b7bbc0;
+  --echoes-select-colors-input-text-disabled: #7f8791;
+  --echoes-select-colors-input-icon-default: #b7bbc0;
+  --echoes-select-colors-input-focus: #f4f6f8;
+  --echoes-select-colors-option-background-default: #111417;
+  --echoes-select-colors-option-background-hover: #ffffff0d;
+  --echoes-select-colors-option-background-selected: #181b1f;
+  --echoes-select-colors-option-background-selected-hover: #1e2227;
+  --echoes-select-colors-option-text-default: #f4f6f8;
+  --echoes-select-colors-option-text-selected: #f4f6f8;
+  --echoes-select-colors-option-text-disabled: #7f8791;
+  --echoes-select-colors-option-icon-default: #b7bbc0;
+  --echoes-select-colors-option-icon-selected: #f4f6f8;
+  --echoes-select-colors-option-icon-disabled: #7f8791;
+  --echoes-select-colors-indicator-background-default: #111417;
+  --echoes-select-colors-indicator-background-selected: #f4f6f8;
+  --echoes-select-colors-indicator-background-selected-hover: #b7bbc0;
+  --echoes-select-colors-indicator-background-disabled: #181b1f;
+  --echoes-select-colors-indicator-border-default: #999fa7;
+  --echoes-select-colors-indicator-border-selected: #f4f6f8;
+  --echoes-select-colors-indicator-border-selected-hover: #b7bbc0;
+  --echoes-select-colors-indicator-border-disabled: #474e57;
+  --echoes-select-colors-indicator-foreground-selected: #111417;
+  --echoes-select-colors-indicator-foreground-disabled: #7f8791;
 }
diff --git a/src/generated/design-tokens-light.css b/src/generated/design-tokens-light.css
index a20d52d56..a0a1d1922 100644
--- a/src/generated/design-tokens-light.css
+++ b/src/generated/design-tokens-light.css
@@ -21,19 +21,169 @@
  */
 
 :root, [data-echoes-theme='light'] {
+  --echoes-color-palette-ui-gray-1: #fafbfc;
+  --echoes-color-palette-ui-gray-2: #f4f6f8;
+  --echoes-color-palette-ui-gray-3: #eef1f4;
+  --echoes-color-palette-ui-gray-4: #e7eaee;
+  --echoes-color-palette-ui-gray-5: #dfe3e8;
+  --echoes-color-palette-ui-gray-6: #d6dbe1;
+  --echoes-color-palette-ui-gray-7: #c9ced6;
+  --echoes-color-palette-ui-gray-8: #aeb5be;
+  --echoes-color-palette-ui-gray-9: #4d5663;
+  --echoes-color-palette-ui-gray-10: #3b434e;
+  --echoes-color-palette-ui-gray-11: #2a313a;
+  --echoes-color-palette-ui-gray-12: #0a0a0a;
+  --echoes-color-palette-ui-gray-alpha-1: #00000003;
+  --echoes-color-palette-ui-gray-alpha-2: #00000005;
+  --echoes-color-palette-ui-gray-alpha-3: #00000008;
+  --echoes-color-palette-ui-gray-alpha-4: #0000000d;
+  --echoes-color-palette-ui-gray-alpha-5: #00000014;
+  --echoes-color-palette-ui-gray-alpha-6: #0000001f;
+  --echoes-color-palette-ui-gray-alpha-7: #0000002e;
+  --echoes-color-palette-ui-gray-alpha-8: #00000047;
+  --echoes-color-palette-ui-gray-alpha-9: #000000a6;
+  --echoes-color-palette-ui-gray-alpha-10: #000000b8;
+  --echoes-color-palette-ui-gray-alpha-11: #000000c7;
+  --echoes-color-palette-ui-gray-alpha-12: #000000e6;
+  --echoes-color-palette-ui-blue-1: #f9fafc;
+  --echoes-color-palette-ui-blue-2: #f4f6fa;
+  --echoes-color-palette-ui-blue-3: #ebf0f7;
+  --echoes-color-palette-ui-blue-4: #e1e9f3;
+  --echoes-color-palette-ui-blue-5: #d1deee;
+  --echoes-color-palette-ui-blue-6: #b7cbe5;
+  --echoes-color-palette-ui-blue-7: #8cafdd;
+  --echoes-color-palette-ui-blue-8: #508fe0;
+  --echoes-color-palette-ui-blue-9: #126ed3;
+  --echoes-color-palette-ui-blue-10: #2360ab;
+  --echoes-color-palette-ui-blue-11: #275085;
+  --echoes-color-palette-ui-blue-12: #1e2f44;
+  --echoes-color-palette-ui-green-1: #f7fcf7;
+  --echoes-color-palette-ui-green-2: #effaef;
+  --echoes-color-palette-ui-green-3: #e1f7e1;
+  --echoes-color-palette-ui-green-4: #cff3cf;
+  --echoes-color-palette-ui-green-5: #b1efb2;
+  --echoes-color-palette-ui-green-6: #8ee090;
+  --echoes-color-palette-ui-green-7: #71c375;
+  --echoes-color-palette-ui-green-8: #4ba452;
+  --echoes-color-palette-ui-green-9: #158829;
+  --echoes-color-palette-ui-green-10: #27722e;
+  --echoes-color-palette-ui-green-11: #2b5d2e;
+  --echoes-color-palette-ui-green-12: #203320;
+  --echoes-color-palette-ui-yellow-1: #fcfaf7;
+  --echoes-color-palette-ui-yellow-2: #faf6ee;
+  --echoes-color-palette-ui-yellow-3: #f7efe0;
+  --echoes-color-palette-ui-yellow-4: #f3e7cd;
+  --echoes-color-palette-ui-yellow-5: #eedab2;
+  --echoes-color-palette-ui-yellow-6: #e4c585;
+  --echoes-color-palette-ui-yellow-7: #c6a869;
+  --echoes-color-palette-ui-yellow-8: #a88944;
+  --echoes-color-palette-ui-yellow-9: #8d6b12;
+  --echoes-color-palette-ui-yellow-10: #765c22;
+  --echoes-color-palette-ui-yellow-11: #5f4d27;
+  --echoes-color-palette-ui-yellow-12: #342d1e;
+  --echoes-color-palette-ui-red-1: #fcfafa;
+  --echoes-color-palette-ui-red-2: #faf5f4;
+  --echoes-color-palette-ui-red-3: #f7edec;
+  --echoes-color-palette-ui-red-4: #f3e4e2;
+  --echoes-color-palette-ui-red-5: #eed6d3;
+  --echoes-color-palette-ui-red-6: #e6beb9;
+  --echoes-color-palette-ui-red-7: #e0968f;
+  --echoes-color-palette-ui-red-8: #e45a54;
+  --echoes-color-palette-ui-red-9: #cf1926;
+  --echoes-color-palette-ui-red-10: #a92b2c;
+  --echoes-color-palette-ui-red-11: #852f2c;
+  --echoes-color-palette-ui-red-12: #46221f;
+  --echoes-color-palette-ui-teal-1: #f6fcfb;
+  --echoes-color-palette-ui-teal-2: #ebfaf8;
+  --echoes-color-palette-ui-teal-3: #daf7f4;
+  --echoes-color-palette-ui-teal-4: #c2f3ef;
+  --echoes-color-palette-ui-teal-5: #9fede8;
+  --echoes-color-palette-ui-teal-6: #8ed9d4;
+  --echoes-color-palette-ui-teal-7: #72bcb7;
+  --echoes-color-palette-ui-teal-8: #4c9d98;
+  --echoes-color-palette-ui-teal-9: #15817c;
+  --echoes-color-palette-ui-teal-10: #276d69;
+  --echoes-color-palette-ui-teal-11: #2b5956;
+  --echoes-color-palette-ui-teal-12: #203230;
+  --echoes-color-palette-ui-cyan-1: #f8fbfc;
+  --echoes-color-palette-ui-cyan-2: #f1f7fa;
+  --echoes-color-palette-ui-cyan-3: #e6f2f7;
+  --echoes-color-palette-ui-cyan-4: #d7ecf3;
+  --echoes-color-palette-ui-cyan-5: #c2e3ee;
+  --echoes-color-palette-ui-cyan-6: #9bd3e5;
+  --echoes-color-palette-ui-cyan-7: #71b8cf;
+  --echoes-color-palette-ui-cyan-8: #4b9ab1;
+  --echoes-color-palette-ui-cyan-9: #157d96;
+  --echoes-color-palette-ui-cyan-10: #266a7d;
+  --echoes-color-palette-ui-cyan-11: #2b5764;
+  --echoes-color-palette-ui-cyan-12: #203136;
+  --echoes-color-palette-ui-purple-1: #fbfafc;
+  --echoes-color-palette-ui-purple-2: #f7f5fa;
+  --echoes-color-palette-ui-purple-3: #f1eef7;
+  --echoes-color-palette-ui-purple-4: #e9e5f3;
+  --echoes-color-palette-ui-purple-5: #dfd8ee;
+  --echoes-color-palette-ui-purple-6: #cec2e5;
+  --echoes-color-palette-ui-purple-7: #b5a0dd;
+  --echoes-color-palette-ui-purple-8: #9e73e0;
+  --echoes-color-palette-ui-purple-9: #8f1cf5;
+  --echoes-color-palette-ui-purple-10: #7630c4;
+  --echoes-color-palette-ui-purple-11: #5f3397;
+  --echoes-color-palette-ui-purple-12: #34244c;
+  --echoes-color-palette-ui-magenta-1: #fcfafb;
+  --echoes-color-palette-ui-magenta-2: #faf4f8;
+  --echoes-color-palette-ui-magenta-3: #f7ecf3;
+  --echoes-color-palette-ui-magenta-4: #f3e2ed;
+  --echoes-color-palette-ui-magenta-5: #eed3e4;
+  --echoes-color-palette-ui-magenta-6: #e7b9d6;
+  --echoes-color-palette-ui-magenta-7: #e08dc5;
+  --echoes-color-palette-ui-magenta-8: #d950b3;
+  --echoes-color-palette-ui-magenta-9: #bd1898;
+  --echoes-color-palette-ui-magenta-10: #9c2a7f;
+  --echoes-color-palette-ui-magenta-11: #7b2e65;
+  --echoes-color-palette-ui-magenta-12: #412137;
+  --echoes-color-palette-ui-orange-1: #fcfaf9;
+  --echoes-color-palette-ui-orange-2: #faf5f2;
+  --echoes-color-palette-ui-orange-3: #f7eee8;
+  --echoes-color-palette-ui-orange-4: #f3e5dc;
+  --echoes-color-palette-ui-orange-5: #eed7c9;
+  --echoes-color-palette-ui-orange-6: #e6c0a7;
+  --echoes-color-palette-ui-orange-7: #df9b6c;
+  --echoes-color-palette-ui-orange-8: #c37944;
+  --echoes-color-palette-ui-orange-9: #a85811;
+  --echoes-color-palette-ui-orange-10: #8b4f22;
+  --echoes-color-palette-ui-orange-11: #6e4426;
+  --echoes-color-palette-ui-orange-12: #3b291d;
+  --echoes-color-palette-ui-data-viz-categorical-1: #347bd0;
+  --echoes-color-palette-ui-data-viz-categorical-2: #d44194;
+  --echoes-color-palette-ui-data-viz-categorical-3: #388779;
+  --echoes-color-palette-ui-data-viz-categorical-4: #8838e0;
+  --echoes-color-palette-ui-data-viz-categorical-5: #c66f39;
+  --echoes-color-palette-ui-data-viz-categorical-6: #295a69;
+  --echoes-color-palette-ui-data-viz-categorical-7: #84307f;
+  --echoes-color-palette-ui-data-viz-categorical-8: #3d6127;
+  --echoes-color-palette-ui-data-viz-severity-blocker: #5e221a;
+  --echoes-color-palette-ui-data-viz-severity-high: #ae2e22;
+  --echoes-color-palette-ui-data-viz-severity-medium: #a2642a;
+  --echoes-color-palette-ui-data-viz-severity-low: #937f30;
+  --echoes-color-palette-ui-data-viz-severity-info: #2e6fbd;
+  --echoes-color-palette-ui-data-viz-placeholder-default: #737373;
   --echoes-color-background-neutral-subtle-default: #eff2f9; /** Use it in components with neutral sentiment */
   --echoes-color-background-neutral-subtle-focus: #eff2f9; /** Use it in components with neutral sentiment */
   --echoes-color-background-neutral-subtle-hover: #e1e6f3; /** Use it in components with neutral sentiment */
   --echoes-color-background-neutral-subtle-active: #c5cddf; /** Use it in components with neutral sentiment */
   --echoes-color-background-neutral-bolder-default: #e1e6f3; /** Use it in components with neutral sentiment that need a bolder highlight */
-  --echoes-color-background-accent-default: #5d6cd0; /** Used as the background color of components that reinforce our brand */
-  --echoes-color-background-accent-hover: #4b56bb; /** Hover state of components that reinforce our brand */
-  --echoes-color-background-accent-focus: #5d6cd0;
-  --echoes-color-background-accent-active: #47518f; /** Active state of components that reinforce our brand */
-  --echoes-color-background-accent-weak-default: #f4f6ff; /** Used as the background color of components that reinforce our brand with less visual highlight */
-  --echoes-color-background-accent-weak-hover: #e8ebff; /** Hover state of components that reinforce our brand with less visual highlight */
-  --echoes-color-background-accent-weak-active: #d1d7fe; /** Active state of components that reinforce our brand with less visual highlight */
-  --echoes-color-background-accent-weak-focus: #e8ebff; /** Focus state of components that reinforce our brand with less visual highlight */
+  --echoes-color-background-action-neutral-default: #0a0a0a; /** Highest-contrast neutral fill for primary and routine actions. */
+  --echoes-color-background-action-neutral-hover: #2a313a; /** Hover fill for primary and routine neutral actions. */
+  --echoes-color-background-action-neutral-focus: #0a0a0a; /** Focused fill for primary and routine neutral actions. */
+  --echoes-color-background-action-neutral-active: #3b434e; /** Active fill for primary and routine neutral actions. */
+  --echoes-color-background-accent-default: #0a0a0a; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-hover: #2a313a; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-focus: #0a0a0a; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-active: #3b434e; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-background-accent-weak-default: #eef1f4; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-accent-weak-hover: #e7eaee; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-accent-weak-active: #dfe3e8; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-accent-weak-focus: #eef1f4; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
   --echoes-color-background-warning-default: #f5b840; /** Use for backgrounds that communicate warning or caution */
   --echoes-color-background-warning-hover: #e7ae3d; /** Use for backgrounds that communicate warning or caution */
   --echoes-color-background-warning-focus: #f5b840; /** Use for backgrounds that communicate warning or caution */
@@ -67,79 +217,82 @@
   --echoes-color-background-info-weak-focus: #f5fbff; /** Use for backgrounds that communicate information to the user, with less visual highlight */
   --echoes-color-background-info-weak-active: #b8def1; /** Use for backgrounds that communicate information to the user, with less visual highlight */
   --echoes-color-background-utility-transparent: #00000000; /** Use it when you need transparency in the background */
-  --echoes-color-background-selected-weak-default: #f4f6ff; /** Use it in backgrounds of components that have a selected state that need less visual highlight, like dropdown or selects */
-  --echoes-color-background-selected-weak-hover: #e8ebff; /** Hover state of components that have a selected state that need less visual highlight, like dropdown or selects */
-  --echoes-color-background-selected-weak-pressed: #d1d7fe; /** Pressed state of components that have a selected state that need less visual highlight, like dropdown or selects */
-  --echoes-color-background-selected-bold-default: #5d6cd0; /** Use it in backgrounds of components that have a selected state, like checkboxes or radios */
-  --echoes-color-background-selected-bold-hover: #4b56bb; /** Hover state of components that have a selected state, like checkboxes or radios */
-  --echoes-color-background-selected-bold-pressed: #47518f; /** Pressed state of components that have a selected state, like checkboxes or radios */
-  --echoes-color-background-ghost-accent-default: #00000000;
-  --echoes-color-background-ghost-accent-hover: #e8ebff;
-  --echoes-color-background-ghost-accent-active: #d1d7fe;
-  --echoes-color-background-ghost-accent-focus: #00000000;
-  --echoes-color-background-ghost-neutral-default: #00000000;
-  --echoes-color-background-ghost-neutral-hover: #eff2f9;
-  --echoes-color-background-ghost-neutral-active: #e1e6f3;
-  --echoes-color-background-ghost-neutral-focus: #00000000;
+  --echoes-color-background-selected-weak-default: #eef1f4; /** Neutral selected background for rows, options, and navigation items. */
+  --echoes-color-background-selected-weak-hover: #e7eaee; /** Hover state for a neutral selected background. */
+  --echoes-color-background-selected-weak-pressed: #dfe3e8; /** Pressed state for a neutral selected background. */
+  --echoes-color-background-selected-bold-default: #0a0a0a; /** High-contrast neutral selected fill for checkboxes, radios, and compact indicators. */
+  --echoes-color-background-selected-bold-hover: #2a313a; /** Hover state for a high-contrast neutral selected fill. */
+  --echoes-color-background-selected-bold-pressed: #3b434e; /** Pressed state for a high-contrast neutral selected fill. */
+  --echoes-color-background-ghost-accent-default: #00000000; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-accent-hover: #00000008; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-accent-active: #00000014; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-accent-focus: #00000000; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
+  --echoes-color-background-ghost-neutral-default: #00000000; /** Resting background for quiet neutral actions. */
+  --echoes-color-background-ghost-neutral-hover: #00000008; /** Hover background for quiet neutral actions. */
+  --echoes-color-background-ghost-neutral-active: #00000014; /** Active background for quiet neutral actions. */
+  --echoes-color-background-ghost-neutral-focus: #00000000; /** Focused background for quiet neutral actions; the focus ring supplies the visible cue. */
   --echoes-color-background-ghost-danger-default: #00000000;
   --echoes-color-background-ghost-danger-hover: #fef3f2;
   --echoes-color-background-ghost-danger-active: #fee4e2;
   --echoes-color-background-ghost-danger-focus: #00000000;
-  --echoes-color-background-emphasis-weak-default: #f4eeff;
-  --echoes-color-background-emphasis-weak-hover: #ede2ff;
-  --echoes-color-background-emphasis-weak-focus: #f4eeff;
-  --echoes-color-background-emphasis-weak-active: #e5d5ff;
-  --echoes-color-background-emphasis-default: #883fdd;
-  --echoes-color-background-emphasis-hover: #7934c7;
-  --echoes-color-background-emphasis-focus: #883fdd;
-  --echoes-color-background-emphasis-active: #3f186b;
+  --echoes-color-background-emphasis-weak-default: #ebf0f7; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-weak-hover: #e1e9f3; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-weak-focus: #ebf0f7; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-weak-active: #d1deee; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-default: #126ed3; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-hover: #2360ab; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-focus: #126ed3; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-background-emphasis-active: #2360ab; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
   --echoes-color-background-favourite-default: #d19834;
   --echoes-color-background-favourite-hover: #ae7a29;
-  --echoes-color-surface-default: #ffffff; /** Go to color for surfaces.. eg: cards, modals, popovers, etc... */
-  --echoes-color-surface-hover: #f6f7fb; /** Hover color for bg-default */
-  --echoes-color-surface-active: #e1e6f3; /** Active color for bg-default */
-  --echoes-color-surface-canvas-default: #fcfcfd; /** Use it as page background */
+  --echoes-color-surface-default: #fafbfc; /** Go to color for surfaces.. eg: cards, modals, popovers, etc... */
+  --echoes-color-surface-hover: #00000008; /** Hover color for bg-default */
+  --echoes-color-surface-active: #00000014; /** Active color for bg-default */
+  --echoes-color-surface-canvas-default: #f4f6f8; /** Use it as page background */
   --echoes-color-surface-inverse-default: #2a2f40; /** Inverse color for bgs, creates high contrast against bg-default and bg-page */
   --echoes-color-surface-inverse-hover: #1d212f;
   --echoes-color-surface-inverse-focus: #2a2f40;
   --echoes-color-surface-inverse-active: #12141d;
-  --echoes-color-surface-disabled: #eff2f9; /** Use it as background for disabled components */
+  --echoes-color-surface-disabled: #eef1f4; /** Use it as background for disabled components */
   --echoes-color-overlays-back-drop-default: #08090c73;
   --echoes-color-overlays-disabled: #eff2f9; /** Use it as background for disabled components */
-  --echoes-color-text-strong: #1d212f;
-  --echoes-color-text-default: #3e4357;
-  --echoes-color-text-disabled: #a6adc2;
-  --echoes-color-text-placeholder: #637192;
-  --echoes-color-text-subtle: #637192;
-  --echoes-color-text-on-color: #ffffff;
+  --echoes-color-text-strong: #0a0a0a;
+  --echoes-color-text-default: #3b434e;
+  --echoes-color-text-disabled: #4d5663;
+  --echoes-color-text-placeholder: #3b434e;
+  --echoes-color-text-subtle: #3b434e;
+  --echoes-color-text-on-color: #fafbfc;
+  --echoes-color-text-on-action: #fafbfc; /** Inverse neutral foreground on high-contrast neutral actions. */
   --echoes-color-text-on-color-inverse: #3e4357;
-  --echoes-color-text-accent: #5d6cd0;
+  --echoes-color-text-accent: #0a0a0a; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
   --echoes-color-text-danger: #b42318;
   --echoes-color-text-warning: #8c5e1e;
   --echoes-color-text-success: #537c17;
   --echoes-color-text-info: #316c92;
-  --echoes-color-text-emphasis: #7934c7;
-  --echoes-color-text-link-hover: #4b56bb;
-  --echoes-color-icon-bold: #1d212f;
-  --echoes-color-icon-default: #3e4357;
-  --echoes-color-icon-subtle: #637192;
-  --echoes-color-icon-disabled: #a6adc2;
-  --echoes-color-icon-placeholder: #637192;
-  --echoes-color-icon-accent: #5d6cd0;
+  --echoes-color-text-emphasis: #275085; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-text-link-hover: #2a313a; /** Neutral hover and focus foreground for links; underline supplies the additional interaction cue. */
+  --echoes-color-text-link-default: #0a0a0a; /** Neutral foreground for links. Inline links remain persistently underlined. */
+  --echoes-color-icon-bold: #0a0a0a;
+  --echoes-color-icon-default: #3b434e;
+  --echoes-color-icon-subtle: #3b434e;
+  --echoes-color-icon-disabled: #4d5663;
+  --echoes-color-icon-placeholder: #3b434e;
+  --echoes-color-icon-accent: #0a0a0a; /** Deprecated compatibility alias. Resolves to a neutral interaction value; do not use it for feature emphasis. */
   --echoes-color-icon-danger: #d92d20;
   --echoes-color-icon-warning: #ae7a29;
   --echoes-color-icon-success: #82b73c;
   --echoes-color-icon-info: #4595cb;
-  --echoes-color-icon-on-color: #ffffff;
+  --echoes-color-icon-on-color: #fafbfc;
   --echoes-color-icon-on-color-inverse: #3e4357;
-  --echoes-color-icon-selected: #5d6cd0;
-  --echoes-color-icon-emphasis: #7934c7;
-  --echoes-color-border-bolder: #637192;
-  --echoes-color-border-bold: #c5cddf;
-  --echoes-color-border-weak: #e1e6f3;
-  --echoes-color-border-weaker: #eff2f9;
-  --echoes-color-border-disabled: #c5cddf;
-  --echoes-color-border-accent-default: #5d6cd0;
+  --echoes-color-icon-selected: #0a0a0a; /** Neutral icon foreground for selected rows, options, and navigation items. */
+  --echoes-color-icon-emphasis: #275085; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
+  --echoes-color-border-bolder: #4d5663;
+  --echoes-color-border-bold: #c9ced6;
+  --echoes-color-border-weak: #d6dbe1;
+  --echoes-color-border-weaker: #dfe3e8;
+  --echoes-color-border-disabled: #c9ced6;
+  --echoes-color-border-accent-default: #0a0a0a; /** Deprecated compatibility alias. Use the neutral action semantic role for routine interaction. */
+  --echoes-color-border-action-neutral: #0a0a0a; /** Boundary color for high-contrast neutral actions. */
   --echoes-color-border-danger-weak: #fee4e2;
   --echoes-color-border-danger-default: #d92d20;
   --echoes-color-border-none: #00000000;
@@ -147,7 +300,7 @@
   --echoes-color-border-success-default: #75a92c;
   --echoes-color-border-warning-weak: #fef5d0;
   --echoes-color-border-info-weak: #e9f4fb;
-  --echoes-color-border-emphasis-weak: #ede2ff;
+  --echoes-color-border-emphasis-weak: #8cafdd; /** Reserved for approved, explicitly labeled AI, upgrade, upsell, pricing-plan, and feature-emphasis patterns. */
   --echoes-color-code-background-default: #fcfcfd;
   --echoes-color-code-background-highlight: #c5cddf;
   --echoes-color-code-border-default: #e1e6f3;
@@ -160,7 +313,7 @@
   --echoes-color-code-text-string: #247523;
   --echoes-color-code-text-keyword-subtle: #1e1ead;
   --echoes-color-code-text-preprocessing-directive: #347235;
-  --echoes-color-focus-default: #4b56bb;
+  --echoes-color-focus-default: #0a0a0a; /** Theme-neutral high-contrast keyboard focus indicator. */
   --echoes-color-charts-categorical-1: #3b82d4;
   --echoes-color-charts-categorical-2: #d74a78;
   --echoes-color-charts-categorical-3: #0f9383;
@@ -180,12 +333,60 @@
   --echoes-box-shadow-medium: 0 2px 15px -2px #1d212f0f, 0 4px 8px -2px #1d212f1a;
   --echoes-box-shadow-large: 0 4px 6px -2px #1d212f0d, 0 12px 16px -4px #1d212f1a;
   --echoes-box-shadow-x-large: 0 8px 8px -4px #1d212f0a, 15px 20px 24px -4px #1d212f1a;
+  --echoes-button-colors-background-default: #0a0a0a;
+  --echoes-button-colors-background-hover: #2a313a;
+  --echoes-button-colors-background-active: #3b434e;
+  --echoes-button-colors-background-disabled: #eef1f4;
+  --echoes-button-colors-border-default: #0a0a0a;
+  --echoes-button-colors-text-default: #fafbfc;
+  --echoes-button-colors-text-disabled: #4d5663;
+  --echoes-button-colors-focus: #0a0a0a;
+  --echoes-button-colors-outlined-background-default: #fafbfc;
+  --echoes-button-colors-outlined-background-hover: #00000008;
+  --echoes-button-colors-outlined-background-active: #00000014;
+  --echoes-button-colors-outlined-background-focus: #fafbfc;
+  --echoes-button-colors-outlined-background-disabled: #eef1f4;
+  --echoes-button-colors-outlined-border-default: #4d5663;
+  --echoes-button-colors-outlined-text-default: #0a0a0a;
+  --echoes-button-colors-outlined-text-disabled: #4d5663;
+  --echoes-button-colors-ghost-background-default: #00000000;
+  --echoes-button-colors-ghost-background-hover: #00000008;
+  --echoes-button-colors-ghost-background-active: #00000014;
+  --echoes-button-colors-ghost-background-focus: #00000000;
+  --echoes-button-colors-ghost-background-disabled: #00000000;
+  --echoes-button-colors-ghost-text-default: #0a0a0a;
+  --echoes-button-colors-ghost-text-disabled: #4d5663;
+  --echoes-input-colors-background-default: #fafbfc;
+  --echoes-input-colors-background-hover: #00000008;
+  --echoes-input-colors-background-disabled: #eef1f4;
+  --echoes-input-colors-border-default: #4d5663;
+  --echoes-input-colors-border-focus: #0a0a0a;
+  --echoes-input-colors-border-disabled: #c9ced6;
+  --echoes-input-colors-text-default: #0a0a0a;
+  --echoes-input-colors-text-placeholder: #3b434e;
+  --echoes-input-colors-text-disabled: #4d5663;
+  --echoes-input-colors-focus: #0a0a0a;
+  --echoes-input-colors-icon-default: #3b434e;
+  --echoes-navigation-item-colors-background-default: #fafbfc;
+  --echoes-navigation-item-colors-background-hover: #00000008;
+  --echoes-navigation-item-colors-background-selected: #eef1f4;
+  --echoes-navigation-item-colors-background-selected-hover: #e7eaee;
+  --echoes-navigation-item-colors-text-default: #0a0a0a;
+  --echoes-navigation-item-colors-text-selected: #0a0a0a;
+  --echoes-navigation-item-colors-icon-default: #3b434e;
+  --echoes-navigation-item-colors-icon-selected: #0a0a0a;
+  --echoes-navigation-item-colors-focus: #0a0a0a;
+  --echoes-issue-row-colors-background-default: #fafbfc;
+  --echoes-issue-row-colors-background-hover: #00000008;
+  --echoes-issue-row-colors-background-selected: #eef1f4;
+  --echoes-issue-row-colors-background-selected-hover: #e7eaee;
+  --echoes-issue-row-colors-border: #d6dbe1;
   --echoes-bottom-scroll-colors-shadow-gradient: #00000033;
-  --echoes-form-control-colors-background-default: #ffffff;
-  --echoes-form-control-colors-background-hover: #f6f7fb;
-  --echoes-form-control-colors-border-default: #637192;
-  --echoes-form-control-colors-border-focus: #e1e6f3;
-  --echoes-form-control-colors-icon-default: #637192;
+  --echoes-form-control-colors-background-default: #fafbfc;
+  --echoes-form-control-colors-background-hover: #00000008;
+  --echoes-form-control-colors-border-default: #4d5663;
+  --echoes-form-control-colors-border-focus: #d6dbe1;
+  --echoes-form-control-colors-icon-default: #3b434e;
   --echoes-logos-colors-text: #290042;
   --echoes-logos-colors-brand: #126ed3;
   --echoes-logos-colors-sonar-whale: #d3121d;
@@ -253,4 +454,39 @@
   --echoes-sidebar-navigation-item-colors-background-hover: #f6f7fb;
   --echoes-sidebar-navigation-item-colors-background-active: #eff2f9;
   --echoes-table-colors-background-header-default: #eff2f9;
+  --echoes-link-colors-text-default: #0a0a0a;
+  --echoes-link-colors-text-hover: #2a313a;
+  --echoes-link-colors-text-subtle: #3b434e;
+  --echoes-link-colors-focus: #0a0a0a;
+  --echoes-select-colors-input-background-default: #fafbfc;
+  --echoes-select-colors-input-background-hover: #00000008;
+  --echoes-select-colors-input-background-disabled: #eef1f4;
+  --echoes-select-colors-input-border-default: #4d5663;
+  --echoes-select-colors-input-border-focus: #0a0a0a;
+  --echoes-select-colors-input-border-disabled: #c9ced6;
+  --echoes-select-colors-input-text-default: #0a0a0a;
+  --echoes-select-colors-input-text-placeholder: #3b434e;
+  --echoes-select-colors-input-text-disabled: #4d5663;
+  --echoes-select-colors-input-icon-default: #3b434e;
+  --echoes-select-colors-input-focus: #0a0a0a;
+  --echoes-select-colors-option-background-default: #fafbfc;
+  --echoes-select-colors-option-background-hover: #00000008;
+  --echoes-select-colors-option-background-selected: #eef1f4;
+  --echoes-select-colors-option-background-selected-hover: #e7eaee;
+  --echoes-select-colors-option-text-default: #0a0a0a;
+  --echoes-select-colors-option-text-selected: #0a0a0a;
+  --echoes-select-colors-option-text-disabled: #4d5663;
+  --echoes-select-colors-option-icon-default: #3b434e;
+  --echoes-select-colors-option-icon-selected: #0a0a0a;
+  --echoes-select-colors-option-icon-disabled: #4d5663;
+  --echoes-select-colors-indicator-background-default: #fafbfc;
+  --echoes-select-colors-indicator-background-selected: #0a0a0a;
+  --echoes-select-colors-indicator-background-selected-hover: #2a313a;
+  --echoes-select-colors-indicator-background-disabled: #eef1f4;
+  --echoes-select-colors-indicator-border-default: #4d5663;
+  --echoes-select-colors-indicator-border-selected: #0a0a0a;
+  --echoes-select-colors-indicator-border-selected-hover: #2a313a;
+  --echoes-select-colors-indicator-border-disabled: #c9ced6;
+  --echoes-select-colors-indicator-foreground-selected: #fafbfc;
+  --echoes-select-colors-indicator-foreground-disabled: #4d5663;
 }
diff --git a/src/generated/design-tokens-themed.json b/src/generated/design-tokens-themed.json
index eafe01885..82dc89115 100644
--- a/src/generated/design-tokens-themed.json
+++ b/src/generated/design-tokens-themed.json
@@ -1,17 +1,167 @@
 {
+  "echoes-color-palette-ui-gray-1": "#fafbfc",
+  "echoes-color-palette-ui-gray-2": "#f4f6f8",
+  "echoes-color-palette-ui-gray-3": "#eef1f4",
+  "echoes-color-palette-ui-gray-4": "#e7eaee",
+  "echoes-color-palette-ui-gray-5": "#dfe3e8",
+  "echoes-color-palette-ui-gray-6": "#d6dbe1",
+  "echoes-color-palette-ui-gray-7": "#c9ced6",
+  "echoes-color-palette-ui-gray-8": "#aeb5be",
+  "echoes-color-palette-ui-gray-9": "#4d5663",
+  "echoes-color-palette-ui-gray-10": "#3b434e",
+  "echoes-color-palette-ui-gray-11": "#2a313a",
+  "echoes-color-palette-ui-gray-12": "#0a0a0a",
+  "echoes-color-palette-ui-gray-alpha-1": "#00000003",
+  "echoes-color-palette-ui-gray-alpha-2": "#00000005",
+  "echoes-color-palette-ui-gray-alpha-3": "#00000008",
+  "echoes-color-palette-ui-gray-alpha-4": "#0000000d",
+  "echoes-color-palette-ui-gray-alpha-5": "#00000014",
+  "echoes-color-palette-ui-gray-alpha-6": "#0000001f",
+  "echoes-color-palette-ui-gray-alpha-7": "#0000002e",
+  "echoes-color-palette-ui-gray-alpha-8": "#00000047",
+  "echoes-color-palette-ui-gray-alpha-9": "#000000a6",
+  "echoes-color-palette-ui-gray-alpha-10": "#000000b8",
+  "echoes-color-palette-ui-gray-alpha-11": "#000000c7",
+  "echoes-color-palette-ui-gray-alpha-12": "#000000e6",
+  "echoes-color-palette-ui-blue-1": "#f9fafc",
+  "echoes-color-palette-ui-blue-2": "#f4f6fa",
+  "echoes-color-palette-ui-blue-3": "#ebf0f7",
+  "echoes-color-palette-ui-blue-4": "#e1e9f3",
+  "echoes-color-palette-ui-blue-5": "#d1deee",
+  "echoes-color-palette-ui-blue-6": "#b7cbe5",
+  "echoes-color-palette-ui-blue-7": "#8cafdd",
+  "echoes-color-palette-ui-blue-8": "#508fe0",
+  "echoes-color-palette-ui-blue-9": "#126ed3",
+  "echoes-color-palette-ui-blue-10": "#2360ab",
+  "echoes-color-palette-ui-blue-11": "#275085",
+  "echoes-color-palette-ui-blue-12": "#1e2f44",
+  "echoes-color-palette-ui-green-1": "#f7fcf7",
+  "echoes-color-palette-ui-green-2": "#effaef",
+  "echoes-color-palette-ui-green-3": "#e1f7e1",
+  "echoes-color-palette-ui-green-4": "#cff3cf",
+  "echoes-color-palette-ui-green-5": "#b1efb2",
+  "echoes-color-palette-ui-green-6": "#8ee090",
+  "echoes-color-palette-ui-green-7": "#71c375",
+  "echoes-color-palette-ui-green-8": "#4ba452",
+  "echoes-color-palette-ui-green-9": "#158829",
+  "echoes-color-palette-ui-green-10": "#27722e",
+  "echoes-color-palette-ui-green-11": "#2b5d2e",
+  "echoes-color-palette-ui-green-12": "#203320",
+  "echoes-color-palette-ui-yellow-1": "#fcfaf7",
+  "echoes-color-palette-ui-yellow-2": "#faf6ee",
+  "echoes-color-palette-ui-yellow-3": "#f7efe0",
+  "echoes-color-palette-ui-yellow-4": "#f3e7cd",
+  "echoes-color-palette-ui-yellow-5": "#eedab2",
+  "echoes-color-palette-ui-yellow-6": "#e4c585",
+  "echoes-color-palette-ui-yellow-7": "#c6a869",
+  "echoes-color-palette-ui-yellow-8": "#a88944",
+  "echoes-color-palette-ui-yellow-9": "#8d6b12",
+  "echoes-color-palette-ui-yellow-10": "#765c22",
+  "echoes-color-palette-ui-yellow-11": "#5f4d27",
+  "echoes-color-palette-ui-yellow-12": "#342d1e",
+  "echoes-color-palette-ui-red-1": "#fcfafa",
+  "echoes-color-palette-ui-red-2": "#faf5f4",
+  "echoes-color-palette-ui-red-3": "#f7edec",
+  "echoes-color-palette-ui-red-4": "#f3e4e2",
+  "echoes-color-palette-ui-red-5": "#eed6d3",
+  "echoes-color-palette-ui-red-6": "#e6beb9",
+  "echoes-color-palette-ui-red-7": "#e0968f",
+  "echoes-color-palette-ui-red-8": "#e45a54",
+  "echoes-color-palette-ui-red-9": "#cf1926",
+  "echoes-color-palette-ui-red-10": "#a92b2c",
+  "echoes-color-palette-ui-red-11": "#852f2c",
+  "echoes-color-palette-ui-red-12": "#46221f",
+  "echoes-color-palette-ui-teal-1": "#f6fcfb",
+  "echoes-color-palette-ui-teal-2": "#ebfaf8",
+  "echoes-color-palette-ui-teal-3": "#daf7f4",
+  "echoes-color-palette-ui-teal-4": "#c2f3ef",
+  "echoes-color-palette-ui-teal-5": "#9fede8",
+  "echoes-color-palette-ui-teal-6": "#8ed9d4",
+  "echoes-color-palette-ui-teal-7": "#72bcb7",
+  "echoes-color-palette-ui-teal-8": "#4c9d98",
+  "echoes-color-palette-ui-teal-9": "#15817c",
+  "echoes-color-palette-ui-teal-10": "#276d69",
+  "echoes-color-palette-ui-teal-11": "#2b5956",
+  "echoes-color-palette-ui-teal-12": "#203230",
+  "echoes-color-palette-ui-cyan-1": "#f8fbfc",
+  "echoes-color-palette-ui-cyan-2": "#f1f7fa",
+  "echoes-color-palette-ui-cyan-3": "#e6f2f7",
+  "echoes-color-palette-ui-cyan-4": "#d7ecf3",
+  "echoes-color-palette-ui-cyan-5": "#c2e3ee",
+  "echoes-color-palette-ui-cyan-6": "#9bd3e5",
+  "echoes-color-palette-ui-cyan-7": "#71b8cf",
+  "echoes-color-palette-ui-cyan-8": "#4b9ab1",
+  "echoes-color-palette-ui-cyan-9": "#157d96",
+  "echoes-color-palette-ui-cyan-10": "#266a7d",
+  "echoes-color-palette-ui-cyan-11": "#2b5764",
+  "echoes-color-palette-ui-cyan-12": "#203136",
+  "echoes-color-palette-ui-purple-1": "#fbfafc",
+  "echoes-color-palette-ui-purple-2": "#f7f5fa",
+  "echoes-color-palette-ui-purple-3": "#f1eef7",
+  "echoes-color-palette-ui-purple-4": "#e9e5f3",
+  "echoes-color-palette-ui-purple-5": "#dfd8ee",
+  "echoes-color-palette-ui-purple-6": "#cec2e5",
+  "echoes-color-palette-ui-purple-7": "#b5a0dd",
+  "echoes-color-palette-ui-purple-8": "#9e73e0",
+  "echoes-color-palette-ui-purple-9": "#8f1cf5",
+  "echoes-color-palette-ui-purple-10": "#7630c4",
+  "echoes-color-palette-ui-purple-11": "#5f3397",
+  "echoes-color-palette-ui-purple-12": "#34244c",
+  "echoes-color-palette-ui-magenta-1": "#fcfafb",
+  "echoes-color-palette-ui-magenta-2": "#faf4f8",
+  "echoes-color-palette-ui-magenta-3": "#f7ecf3",
+  "echoes-color-palette-ui-magenta-4": "#f3e2ed",
+  "echoes-color-palette-ui-magenta-5": "#eed3e4",
+  "echoes-color-palette-ui-magenta-6": "#e7b9d6",
+  "echoes-color-palette-ui-magenta-7": "#e08dc5",
+  "echoes-color-palette-ui-magenta-8": "#d950b3",
+  "echoes-color-palette-ui-magenta-9": "#bd1898",
+  "echoes-color-palette-ui-magenta-10": "#9c2a7f",
+  "echoes-color-palette-ui-magenta-11": "#7b2e65",
+  "echoes-color-palette-ui-magenta-12": "#412137",
+  "echoes-color-palette-ui-orange-1": "#fcfaf9",
+  "echoes-color-palette-ui-orange-2": "#faf5f2",
+  "echoes-color-palette-ui-orange-3": "#f7eee8",
+  "echoes-color-palette-ui-orange-4": "#f3e5dc",
+  "echoes-color-palette-ui-orange-5": "#eed7c9",
+  "echoes-color-palette-ui-orange-6": "#e6c0a7",
+  "echoes-color-palette-ui-orange-7": "#df9b6c",
+  "echoes-color-palette-ui-orange-8": "#c37944",
+  "echoes-color-palette-ui-orange-9": "#a85811",
+  "echoes-color-palette-ui-orange-10": "#8b4f22",
+  "echoes-color-palette-ui-orange-11": "#6e4426",
+  "echoes-color-palette-ui-orange-12": "#3b291d",
+  "echoes-color-palette-ui-data-viz-categorical-1": "#347bd0",
+  "echoes-color-palette-ui-data-viz-categorical-2": "#d44194",
+  "echoes-color-palette-ui-data-viz-categorical-3": "#388779",
+  "echoes-color-palette-ui-data-viz-categorical-4": "#8838e0",
+  "echoes-color-palette-ui-data-viz-categorical-5": "#c66f39",
+  "echoes-color-palette-ui-data-viz-categorical-6": "#295a69",
+  "echoes-color-palette-ui-data-viz-categorical-7": "#84307f",
+  "echoes-color-palette-ui-data-viz-categorical-8": "#3d6127",
+  "echoes-color-palette-ui-data-viz-severity-blocker": "#5e221a",
+  "echoes-color-palette-ui-data-viz-severity-high": "#ae2e22",
+  "echoes-color-palette-ui-data-viz-severity-medium": "#a2642a",
+  "echoes-color-palette-ui-data-viz-severity-low": "#937f30",
+  "echoes-color-palette-ui-data-viz-severity-info": "#2e6fbd",
+  "echoes-color-palette-ui-data-viz-placeholder-default": "#737373",
   "echoes-color-background-neutral-subtle-default": "#eff2f9",
   "echoes-color-background-neutral-subtle-focus": "#eff2f9",
   "echoes-color-background-neutral-subtle-hover": "#e1e6f3",
   "echoes-color-background-neutral-subtle-active": "#c5cddf",
   "echoes-color-background-neutral-bolder-default": "#e1e6f3",
-  "echoes-color-background-accent-default": "#5d6cd0",
-  "echoes-color-background-accent-hover": "#4b56bb",
-  "echoes-color-background-accent-focus": "#5d6cd0",
-  "echoes-color-background-accent-active": "#47518f",
-  "echoes-color-background-accent-weak-default": "#f4f6ff",
-  "echoes-color-background-accent-weak-hover": "#e8ebff",
-  "echoes-color-background-accent-weak-active": "#d1d7fe",
-  "echoes-color-background-accent-weak-focus": "#e8ebff",
+  "echoes-color-background-action-neutral-default": "#0a0a0a",
+  "echoes-color-background-action-neutral-hover": "#2a313a",
+  "echoes-color-background-action-neutral-focus": "#0a0a0a",
+  "echoes-color-background-action-neutral-active": "#3b434e",
+  "echoes-color-background-accent-default": "#0a0a0a",
+  "echoes-color-background-accent-hover": "#2a313a",
+  "echoes-color-background-accent-focus": "#0a0a0a",
+  "echoes-color-background-accent-active": "#3b434e",
+  "echoes-color-background-accent-weak-default": "#eef1f4",
+  "echoes-color-background-accent-weak-hover": "#e7eaee",
+  "echoes-color-background-accent-weak-active": "#dfe3e8",
+  "echoes-color-background-accent-weak-focus": "#eef1f4",
   "echoes-color-background-warning-default": "#f5b840",
   "echoes-color-background-warning-hover": "#e7ae3d",
   "echoes-color-background-warning-focus": "#f5b840",
@@ -45,79 +195,82 @@
   "echoes-color-background-info-weak-focus": "#f5fbff",
   "echoes-color-background-info-weak-active": "#b8def1",
   "echoes-color-background-utility-transparent": "#00000000",
-  "echoes-color-background-selected-weak-default": "#f4f6ff",
-  "echoes-color-background-selected-weak-hover": "#e8ebff",
-  "echoes-color-background-selected-weak-pressed": "#d1d7fe",
-  "echoes-color-background-selected-bold-default": "#5d6cd0",
-  "echoes-color-background-selected-bold-hover": "#4b56bb",
-  "echoes-color-background-selected-bold-pressed": "#47518f",
+  "echoes-color-background-selected-weak-default": "#eef1f4",
+  "echoes-color-background-selected-weak-hover": "#e7eaee",
+  "echoes-color-background-selected-weak-pressed": "#dfe3e8",
+  "echoes-color-background-selected-bold-default": "#0a0a0a",
+  "echoes-color-background-selected-bold-hover": "#2a313a",
+  "echoes-color-background-selected-bold-pressed": "#3b434e",
   "echoes-color-background-ghost-accent-default": "#00000000",
-  "echoes-color-background-ghost-accent-hover": "#e8ebff",
-  "echoes-color-background-ghost-accent-active": "#d1d7fe",
+  "echoes-color-background-ghost-accent-hover": "#00000008",
+  "echoes-color-background-ghost-accent-active": "#00000014",
   "echoes-color-background-ghost-accent-focus": "#00000000",
   "echoes-color-background-ghost-neutral-default": "#00000000",
-  "echoes-color-background-ghost-neutral-hover": "#eff2f9",
-  "echoes-color-background-ghost-neutral-active": "#e1e6f3",
+  "echoes-color-background-ghost-neutral-hover": "#00000008",
+  "echoes-color-background-ghost-neutral-active": "#00000014",
   "echoes-color-background-ghost-neutral-focus": "#00000000",
   "echoes-color-background-ghost-danger-default": "#00000000",
   "echoes-color-background-ghost-danger-hover": "#fef3f2",
   "echoes-color-background-ghost-danger-active": "#fee4e2",
   "echoes-color-background-ghost-danger-focus": "#00000000",
-  "echoes-color-background-emphasis-weak-default": "#f4eeff",
-  "echoes-color-background-emphasis-weak-hover": "#ede2ff",
-  "echoes-color-background-emphasis-weak-focus": "#f4eeff",
-  "echoes-color-background-emphasis-weak-active": "#e5d5ff",
-  "echoes-color-background-emphasis-default": "#883fdd",
-  "echoes-color-background-emphasis-hover": "#7934c7",
-  "echoes-color-background-emphasis-focus": "#883fdd",
-  "echoes-color-background-emphasis-active": "#3f186b",
+  "echoes-color-background-emphasis-weak-default": "#ebf0f7",
+  "echoes-color-background-emphasis-weak-hover": "#e1e9f3",
+  "echoes-color-background-emphasis-weak-focus": "#ebf0f7",
+  "echoes-color-background-emphasis-weak-active": "#d1deee",
+  "echoes-color-background-emphasis-default": "#126ed3",
+  "echoes-color-background-emphasis-hover": "#2360ab",
+  "echoes-color-background-emphasis-focus": "#126ed3",
+  "echoes-color-background-emphasis-active": "#2360ab",
   "echoes-color-background-favourite-default": "#d19834",
   "echoes-color-background-favourite-hover": "#ae7a29",
-  "echoes-color-surface-default": "#ffffff",
-  "echoes-color-surface-hover": "#f6f7fb",
-  "echoes-color-surface-active": "#e1e6f3",
-  "echoes-color-surface-canvas-default": "#fcfcfd",
+  "echoes-color-surface-default": "#fafbfc",
+  "echoes-color-surface-hover": "#00000008",
+  "echoes-color-surface-active": "#00000014",
+  "echoes-color-surface-canvas-default": "#f4f6f8",
   "echoes-color-surface-inverse-default": "#2a2f40",
   "echoes-color-surface-inverse-hover": "#1d212f",
   "echoes-color-surface-inverse-focus": "#2a2f40",
   "echoes-color-surface-inverse-active": "#12141d",
-  "echoes-color-surface-disabled": "#eff2f9",
+  "echoes-color-surface-disabled": "#eef1f4",
   "echoes-color-overlays-back-drop-default": "#08090c73",
   "echoes-color-overlays-disabled": "#eff2f9",
-  "echoes-color-text-strong": "#1d212f",
-  "echoes-color-text-default": "#3e4357",
-  "echoes-color-text-disabled": "#a6adc2",
-  "echoes-color-text-placeholder": "#637192",
-  "echoes-color-text-subtle": "#637192",
-  "echoes-color-text-on-color": "#ffffff",
+  "echoes-color-text-strong": "#0a0a0a",
+  "echoes-color-text-default": "#3b434e",
+  "echoes-color-text-disabled": "#4d5663",
+  "echoes-color-text-placeholder": "#3b434e",
+  "echoes-color-text-subtle": "#3b434e",
+  "echoes-color-text-on-color": "#fafbfc",
+  "echoes-color-text-on-action": "#fafbfc",
   "echoes-color-text-on-color-inverse": "#3e4357",
-  "echoes-color-text-accent": "#5d6cd0",
+  "echoes-color-text-accent": "#0a0a0a",
   "echoes-color-text-danger": "#b42318",
   "echoes-color-text-warning": "#8c5e1e",
   "echoes-color-text-success": "#537c17",
   "echoes-color-text-info": "#316c92",
-  "echoes-color-text-emphasis": "#7934c7",
-  "echoes-color-text-link-hover": "#4b56bb",
-  "echoes-color-icon-bold": "#1d212f",
-  "echoes-color-icon-default": "#3e4357",
-  "echoes-color-icon-subtle": "#637192",
-  "echoes-color-icon-disabled": "#a6adc2",
-  "echoes-color-icon-placeholder": "#637192",
-  "echoes-color-icon-accent": "#5d6cd0",
+  "echoes-color-text-emphasis": "#275085",
+  "echoes-color-text-link-hover": "#2a313a",
+  "echoes-color-text-link-default": "#0a0a0a",
+  "echoes-color-icon-bold": "#0a0a0a",
+  "echoes-color-icon-default": "#3b434e",
+  "echoes-color-icon-subtle": "#3b434e",
+  "echoes-color-icon-disabled": "#4d5663",
+  "echoes-color-icon-placeholder": "#3b434e",
+  "echoes-color-icon-accent": "#0a0a0a",
   "echoes-color-icon-danger": "#d92d20",
   "echoes-color-icon-warning": "#ae7a29",
   "echoes-color-icon-success": "#82b73c",
   "echoes-color-icon-info": "#4595cb",
-  "echoes-color-icon-on-color": "#ffffff",
+  "echoes-color-icon-on-color": "#fafbfc",
   "echoes-color-icon-on-color-inverse": "#3e4357",
-  "echoes-color-icon-selected": "#5d6cd0",
-  "echoes-color-icon-emphasis": "#7934c7",
-  "echoes-color-border-bolder": "#637192",
-  "echoes-color-border-bold": "#c5cddf",
-  "echoes-color-border-weak": "#e1e6f3",
-  "echoes-color-border-weaker": "#eff2f9",
-  "echoes-color-border-disabled": "#c5cddf",
-  "echoes-color-border-accent-default": "#5d6cd0",
+  "echoes-color-icon-selected": "#0a0a0a",
+  "echoes-color-icon-emphasis": "#275085",
+  "echoes-color-border-bolder": "#4d5663",
+  "echoes-color-border-bold": "#c9ced6",
+  "echoes-color-border-weak": "#d6dbe1",
+  "echoes-color-border-weaker": "#dfe3e8",
+  "echoes-color-border-disabled": "#c9ced6",
+  "echoes-color-border-accent-default": "#0a0a0a",
+  "echoes-color-border-action-neutral": "#0a0a0a",
   "echoes-color-border-danger-weak": "#fee4e2",
   "echoes-color-border-danger-default": "#d92d20",
   "echoes-color-border-none": "#00000000",
@@ -125,7 +278,7 @@
   "echoes-color-border-success-default": "#75a92c",
   "echoes-color-border-warning-weak": "#fef5d0",
   "echoes-color-border-info-weak": "#e9f4fb",
-  "echoes-color-border-emphasis-weak": "#ede2ff",
+  "echoes-color-border-emphasis-weak": "#8cafdd",
   "echoes-color-code-background-default": "#fcfcfd",
   "echoes-color-code-background-highlight": "#c5cddf",
   "echoes-color-code-border-default": "#e1e6f3",
@@ -138,7 +291,7 @@
   "echoes-color-code-text-string": "#247523",
   "echoes-color-code-text-keyword-subtle": "#1e1ead",
   "echoes-color-code-text-preprocessing-directive": "#347235",
-  "echoes-color-focus-default": "#4b56bb",
+  "echoes-color-focus-default": "#0a0a0a",
   "echoes-color-charts-categorical-1": "#3b82d4",
   "echoes-color-charts-categorical-2": "#d74a78",
   "echoes-color-charts-categorical-3": "#0f9383",
@@ -158,12 +311,60 @@
   "echoes-box-shadow-medium": "0 2px 15px -2px #1d212f0f, 0 4px 8px -2px #1d212f1a",
   "echoes-box-shadow-large": "0 4px 6px -2px #1d212f0d, 0 12px 16px -4px #1d212f1a",
   "echoes-box-shadow-x-large": "0 8px 8px -4px #1d212f0a, 15px 20px 24px -4px #1d212f1a",
+  "echoes-button-colors-background-default": "#0a0a0a",
+  "echoes-button-colors-background-hover": "#2a313a",
+  "echoes-button-colors-background-active": "#3b434e",
+  "echoes-button-colors-background-disabled": "#eef1f4",
+  "echoes-button-colors-border-default": "#0a0a0a",
+  "echoes-button-colors-text-default": "#fafbfc",
+  "echoes-button-colors-text-disabled": "#4d5663",
+  "echoes-button-colors-focus": "#0a0a0a",
+  "echoes-button-colors-outlined-background-default": "#fafbfc",
+  "echoes-button-colors-outlined-background-hover": "#00000008",
+  "echoes-button-colors-outlined-background-active": "#00000014",
+  "echoes-button-colors-outlined-background-focus": "#fafbfc",
+  "echoes-button-colors-outlined-background-disabled": "#eef1f4",
+  "echoes-button-colors-outlined-border-default": "#4d5663",
+  "echoes-button-colors-outlined-text-default": "#0a0a0a",
+  "echoes-button-colors-outlined-text-disabled": "#4d5663",
+  "echoes-button-colors-ghost-background-default": "#00000000",
+  "echoes-button-colors-ghost-background-hover": "#00000008",
+  "echoes-button-colors-ghost-background-active": "#00000014",
+  "echoes-button-colors-ghost-background-focus": "#00000000",
+  "echoes-button-colors-ghost-background-disabled": "#00000000",
+  "echoes-button-colors-ghost-text-default": "#0a0a0a",
+  "echoes-button-colors-ghost-text-disabled": "#4d5663",
+  "echoes-input-colors-background-default": "#fafbfc",
+  "echoes-input-colors-background-hover": "#00000008",
+  "echoes-input-colors-background-disabled": "#eef1f4",
+  "echoes-input-colors-border-default": "#4d5663",
+  "echoes-input-colors-border-focus": "#0a0a0a",
+  "echoes-input-colors-border-disabled": "#c9ced6",
+  "echoes-input-colors-text-default": "#0a0a0a",
+  "echoes-input-colors-text-placeholder": "#3b434e",
+  "echoes-input-colors-text-disabled": "#4d5663",
+  "echoes-input-colors-focus": "#0a0a0a",
+  "echoes-input-colors-icon-default": "#3b434e",
+  "echoes-navigation-item-colors-background-default": "#fafbfc",
+  "echoes-navigation-item-colors-background-hover": "#00000008",
+  "echoes-navigation-item-colors-background-selected": "#eef1f4",
+  "echoes-navigation-item-colors-background-selected-hover": "#e7eaee",
+  "echoes-navigation-item-colors-text-default": "#0a0a0a",
+  "echoes-navigation-item-colors-text-selected": "#0a0a0a",
+  "echoes-navigation-item-colors-icon-default": "#3b434e",
+  "echoes-navigation-item-colors-icon-selected": "#0a0a0a",
+  "echoes-navigation-item-colors-focus": "#0a0a0a",
+  "echoes-issue-row-colors-background-default": "#fafbfc",
+  "echoes-issue-row-colors-background-hover": "#00000008",
+  "echoes-issue-row-colors-background-selected": "#eef1f4",
+  "echoes-issue-row-colors-background-selected-hover": "#e7eaee",
+  "echoes-issue-row-colors-border": "#d6dbe1",
   "echoes-bottom-scroll-colors-shadow-gradient": "#00000033",
-  "echoes-form-control-colors-background-default": "#ffffff",
-  "echoes-form-control-colors-background-hover": "#f6f7fb",
-  "echoes-form-control-colors-border-default": "#637192",
-  "echoes-form-control-colors-border-focus": "#e1e6f3",
-  "echoes-form-control-colors-icon-default": "#637192",
+  "echoes-form-control-colors-background-default": "#fafbfc",
+  "echoes-form-control-colors-background-hover": "#00000008",
+  "echoes-form-control-colors-border-default": "#4d5663",
+  "echoes-form-control-colors-border-focus": "#d6dbe1",
+  "echoes-form-control-colors-icon-default": "#3b434e",
   "echoes-logos-colors-text": "#290042",
   "echoes-logos-colors-brand": "#126ed3",
   "echoes-logos-colors-sonar-whale": "#d3121d",
@@ -230,5 +431,40 @@
   "echoes-sidebar-navigation-item-colors-background-default": "#fcfcfd",
   "echoes-sidebar-navigation-item-colors-background-hover": "#f6f7fb",
   "echoes-sidebar-navigation-item-colors-background-active": "#eff2f9",
-  "echoes-table-colors-background-header-default": "#eff2f9"
+  "echoes-table-colors-background-header-default": "#eff2f9",
+  "echoes-link-colors-text-default": "#0a0a0a",
+  "echoes-link-colors-text-hover": "#2a313a",
+  "echoes-link-colors-text-subtle": "#3b434e",
+  "echoes-link-colors-focus": "#0a0a0a",
+  "echoes-select-colors-input-background-default": "#fafbfc",
+  "echoes-select-colors-input-background-hover": "#00000008",
+  "echoes-select-colors-input-background-disabled": "#eef1f4",
+  "echoes-select-colors-input-border-default": "#4d5663",
+  "echoes-select-colors-input-border-focus": "#0a0a0a",
+  "echoes-select-colors-input-border-disabled": "#c9ced6",
+  "echoes-select-colors-input-text-default": "#0a0a0a",
+  "echoes-select-colors-input-text-placeholder": "#3b434e",
+  "echoes-select-colors-input-text-disabled": "#4d5663",
+  "echoes-select-colors-input-icon-default": "#3b434e",
+  "echoes-select-colors-input-focus": "#0a0a0a",
+  "echoes-select-colors-option-background-default": "#fafbfc",
+  "echoes-select-colors-option-background-hover": "#00000008",
+  "echoes-select-colors-option-background-selected": "#eef1f4",
+  "echoes-select-colors-option-background-selected-hover": "#e7eaee",
+  "echoes-select-colors-option-text-default": "#0a0a0a",
+  "echoes-select-colors-option-text-selected": "#0a0a0a",
+  "echoes-select-colors-option-text-disabled": "#4d5663",
+  "echoes-select-colors-option-icon-default": "#3b434e",
+  "echoes-select-colors-option-icon-selected": "#0a0a0a",
+  "echoes-select-colors-option-icon-disabled": "#4d5663",
+  "echoes-select-colors-indicator-background-default": "#fafbfc",
+  "echoes-select-colors-indicator-background-selected": "#0a0a0a",
+  "echoes-select-colors-indicator-background-selected-hover": "#2a313a",
+  "echoes-select-colors-indicator-background-disabled": "#eef1f4",
+  "echoes-select-colors-indicator-border-default": "#4d5663",
+  "echoes-select-colors-indicator-border-selected": "#0a0a0a",
+  "echoes-select-colors-indicator-border-selected-hover": "#2a313a",
+  "echoes-select-colors-indicator-border-disabled": "#c9ced6",
+  "echoes-select-colors-indicator-foreground-selected": "#fafbfc",
+  "echoes-select-colors-indicator-foreground-disabled": "#4d5663"
 }
diff --git a/src/utils/__tests__/color-system-pilot-test.ts b/src/utils/__tests__/color-system-pilot-test.ts
new file mode 100644
index 000000000..7d63c2a72
--- /dev/null
+++ b/src/utils/__tests__/color-system-pilot-test.ts
@@ -0,0 +1,440 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { readFileSync } from 'node:fs';
+
+const lightTheme = readFileSync('src/generated/design-tokens-light.css', 'utf8');
+const darkTheme = readFileSync('src/generated/design-tokens-dark.css', 'utf8');
+const brandPalettePaths = [
+  'design-tokens/tokens/brand/brand-A/palettes/base.json',
+  'design-tokens/tokens/brand/brand-A/palettes/light.json',
+  'design-tokens/tokens/brand/brand-A/palettes/dark.json',
+  'design-tokens/tokens/brand/brand-B/palettes/base.json',
+  'design-tokens/tokens/brand/brand-B/palettes/light.json',
+  'design-tokens/tokens/brand/brand-B/palettes/dark.json',
+];
+const brandPalettes = brandPalettePaths.map((path) => readFileSync(path, 'utf8'));
+const lightMode = readFileSync('design-tokens/tokens/modes/light.json', 'utf8');
+const darkMode = readFileSync('design-tokens/tokens/modes/dark.json', 'utf8');
+const option2Export = JSON.parse(
+  readFileSync('design-tokens/references/echoes-color-palettes-option-2.json', 'utf8'),
+) as {
+  optionId: string;
+  palettes: Array<{ id: string; light: string[]; dark: string[] }>;
+};
+const componentTokenFiles = [
+  readFileSync('design-tokens/tokens/component/light.json', 'utf8'),
+  readFileSync('design-tokens/tokens/component/dark.json', 'utf8'),
+];
+
+const OPTION_2_UI_PALETTES = [
+  'gray',
+  'gray-alpha',
+  'blue',
+  'green',
+  'yellow',
+  'red',
+  'teal',
+  'cyan',
+  'purple',
+  'magenta',
+  'orange',
+] as const;
+
+function option2Palette(id: string) {
+  const palette = option2Export.palettes.find((candidate) => candidate.id === id);
+  if (!palette) {
+    throw new Error(`Missing Option 2 palette: ${id}`);
+  }
+  return palette;
+}
+
+function sourcePaletteValues(source: string, palette: string) {
+  const document = JSON.parse(source) as {
+    echoes: { color: { palette: { ui: Record<string, Record<string, { $value: string }>> } } };
+  };
+  return Object.values(document.echoes.color.palette.ui[palette]).map(({ $value }) => $value);
+}
+
+function sourceDataVizValues(source: string) {
+  const document = JSON.parse(source) as {
+    echoes: {
+      color: {
+        palette: {
+          ui: {
+            'data-viz': {
+              categorical: Record<string, { $value: string }>;
+              severity: Record<string, { $value: string }>;
+              placeholder: { default: { $value: string } };
+            };
+          };
+        };
+      };
+    };
+  };
+  const dataViz = document.echoes.color.palette.ui['data-viz'];
+  return {
+    categorical: Object.values(dataViz.categorical).map(({ $value }) => $value),
+    severity: [
+      ...Object.values(dataViz.severity).map(({ $value }) => $value),
+      dataViz.placeholder.default.$value,
+    ],
+  };
+}
+
+function channelToLinear(channel: number) {
+  const normalized = channel / 255;
+  return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance(hex: string) {
+  const channels = [1, 3, 5].map((index) =>
+    channelToLinear(Number.parseInt(hex.slice(index, index + 2), 16)),
+  );
+  return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+}
+
+function contrastRatio(foreground: string, background: string) {
+  const values = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+  return (values[0] + 0.05) / (values[1] + 0.05);
+}
+
+function hexToOklch(hex: string) {
+  const [red, green, blue] = [1, 3, 5].map((index) =>
+    channelToLinear(Number.parseInt(hex.slice(index, index + 2), 16)),
+  );
+  const l = Math.cbrt(0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue);
+  const m = Math.cbrt(0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue);
+  const s = Math.cbrt(0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue);
+  const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const b = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const hue = (Math.atan2(b, a) * 180) / Math.PI;
+
+  return {
+    chroma: Math.sqrt(a ** 2 + b ** 2),
+    hue: hue < 0 ? hue + 360 : hue,
+    lightness,
+  };
+}
+
+function oklabDistance(first: string, second: string) {
+  const toLab = (hex: string) => {
+    const { chroma, hue, lightness } = hexToOklch(hex);
+    const hueInRadians = (hue * Math.PI) / 180;
+    return [lightness, chroma * Math.cos(hueInRadians), chroma * Math.sin(hueInRadians)];
+  };
+  const firstLab = toLab(first);
+  const secondLab = toLab(second);
+
+  return Math.sqrt(
+    firstLab.reduce((sum, channel, index) => sum + (channel - secondLab[index]) ** 2, 0),
+  );
+}
+
+function token(css: string, name: string) {
+  const match = css.match(new RegExp(`--echoes-${name}: (#[0-9a-f]{6,8});`));
+  if (!match) {
+    throw new Error(`Missing generated token: ${name}`);
+  }
+  return match[1];
+}
+
+describe('brand palette architecture', () => {
+  it('keeps Brand A and Brand B free of role tokens', () => {
+    brandPalettes.forEach((palette) => expect(palette).not.toMatch(/"roles"\s*:/));
+  });
+
+  it('keeps mode files semantic-only and connected directly to palettes', () => {
+    expect(lightMode).not.toMatch(/"palette"\s*:/);
+    expect(darkMode).not.toMatch(/"palette"\s*:/);
+    expect(lightMode).not.toContain('{echoes.color.roles.');
+    expect(darkMode).not.toContain('{echoes.color.roles.');
+  });
+
+  it('restricts Blue to feature emphasis and keeps protected info semantics on the base palette', () => {
+    for (const mode of [lightMode, darkMode]) {
+      expect(mode).toContain('Reserved for approved, explicitly labeled AI');
+      expect(mode).not.toContain('{echoes.color.palette.ui.purple.');
+      expect(mode).toContain('{echoes.color.palette.blue.');
+    }
+  });
+
+  it('imports every Option 2 UI ramp exactly for both independently owned brands', () => {
+    expect(option2Export.optionId).toBe('option-2');
+
+    for (const brand of ['brand-A', 'brand-B']) {
+      for (const mode of ['light', 'dark'] as const) {
+        const source = readFileSync(
+          `design-tokens/tokens/brand/${brand}/palettes/${mode}.json`,
+          'utf8',
+        );
+
+        for (const palette of OPTION_2_UI_PALETTES) {
+          expect(sourcePaletteValues(source, palette)).toEqual(option2Palette(palette)[mode]);
+        }
+        expect(sourceDataVizValues(source).categorical).toEqual(
+          option2Palette('data-viz-categorical')[mode],
+        );
+        expect(sourceDataVizValues(source).severity).toEqual(
+          option2Palette('data-viz-severity')[mode],
+        );
+      }
+    }
+  });
+
+  it('uses plain palette names and keeps component tokens free of primitive bindings', () => {
+    brandPalettes.forEach((palette) =>
+      expect(palette).not.toMatch(/brand-blue|success-green|warning-yellow|danger-red/),
+    );
+    componentTokenFiles.forEach((tokens) => {
+      const components = JSON.parse(tokens) as { echoes: Record<string, unknown> };
+      const migratedComponents = [
+        'button',
+        'input',
+        'navigation-item',
+        'issue-row',
+        'link',
+        'select',
+      ].map((name) => components.echoes[name]);
+      expect(JSON.stringify(migratedComponents)).not.toContain('{echoes.color.palette.');
+    });
+  });
+});
+
+describe.each([
+  [
+    'light',
+    lightTheme,
+    {
+      actionActive: 'color-palette-ui-gray-10',
+      actionDefault: 'color-palette-ui-gray-12',
+      actionHover: 'color-palette-ui-gray-11',
+      actionText: 'color-palette-ui-gray-1',
+      buttonBorder: 'color-palette-ui-gray-12',
+    },
+  ],
+  [
+    'dark',
+    darkTheme,
+    {
+      actionActive: 'color-palette-ui-gray-10',
+      actionDefault: 'color-palette-ui-gray-12',
+      actionHover: 'color-palette-ui-gray-11',
+      actionText: 'color-palette-ui-gray-1',
+      buttonBorder: 'color-palette-ui-gray-12',
+    },
+  ],
+])('12-step color pilot: %s theme', (themeName, theme, expected) => {
+  it('preserves every Gray Alpha step as eight-digit hexadecimal', () => {
+    for (let step = 1; step <= 12; step += 1) {
+      expect(token(theme, `color-palette-ui-gray-alpha-${step}`)).toMatch(/^#[0-9a-f]{8}$/);
+    }
+  });
+
+  it('exports every exact Option 2 UI ramp value', () => {
+    const mode = themeName as 'light' | 'dark';
+    for (const palette of OPTION_2_UI_PALETTES) {
+      option2Palette(palette)[mode].forEach((value, index) => {
+        expect(token(theme, `color-palette-ui-${palette}-${index + 1}`)).toBe(value.toLowerCase());
+      });
+    }
+  });
+
+  it('keeps opaque scales monotonic in OKLCH lightness', () => {
+    for (const palette of OPTION_2_UI_PALETTES.filter((name) => name !== 'gray-alpha')) {
+      const lightness = Array.from(
+        { length: 12 },
+        (_, index) =>
+          hexToOklch(token(theme, `color-palette-ui-${palette}-${index + 1}`)).lightness,
+      );
+
+      const isMonotonic = lightness.every(
+        (value, index) =>
+          index === 0 ||
+          (themeName === 'light' ? value < lightness[index - 1] : value > lightness[index - 1]),
+      );
+
+      expect(isMonotonic).toBe(true);
+    }
+  });
+
+  it('keeps candidate sentiment solid colors visible as non-text signals', () => {
+    for (const palette of ['green', 'yellow', 'red']) {
+      expect(
+        contrastRatio(
+          token(theme, `color-palette-ui-${palette}-9`),
+          token(theme, 'color-surface-default'),
+        ),
+      ).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it('keeps data visualization colors visible and distinguishable', () => {
+    const categorical = Array.from({ length: 8 }, (_, index) =>
+      token(theme, `color-palette-ui-data-viz-categorical-${index + 1}`),
+    );
+    const severity = ['blocker', 'high', 'medium', 'low', 'info'].map((level) =>
+      token(theme, `color-palette-ui-data-viz-severity-${level}`),
+    );
+    const canvas = token(theme, 'color-surface-canvas-default');
+
+    for (const color of [
+      ...categorical,
+      ...severity,
+      token(theme, 'color-palette-ui-data-viz-placeholder-default'),
+    ]) {
+      expect(contrastRatio(color, canvas)).toBeGreaterThanOrEqual(3);
+    }
+
+    const pairDistances = categorical.flatMap((color, index) =>
+      categorical.slice(index + 1).map((otherColor) => oklabDistance(color, otherColor)),
+    );
+    expect(Math.min(...pairDistances)).toBeGreaterThanOrEqual(0.08);
+  });
+
+  it('meets WCAG 2.2 AA for component text pairs', () => {
+    expect(
+      contrastRatio(token(theme, 'color-text-strong'), token(theme, 'color-surface-default')),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrastRatio(token(theme, 'color-text-default'), token(theme, 'color-surface-default')),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrastRatio(
+        token(theme, 'button-colors-text-default'),
+        token(theme, 'button-colors-background-default'),
+      ),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrastRatio(
+        token(theme, 'navigation-item-colors-text-selected'),
+        token(theme, 'navigation-item-colors-background-selected'),
+      ),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrastRatio(
+        token(theme, 'link-colors-text-default'),
+        token(theme, 'color-surface-default'),
+      ),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrastRatio(
+        token(theme, 'color-text-emphasis'),
+        token(theme, 'color-background-emphasis-weak-default'),
+      ),
+    ).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('meets 3:1 non-text and focus-indicator contrast', () => {
+    expect(
+      contrastRatio(
+        token(theme, 'input-colors-border-default'),
+        token(theme, 'input-colors-background-default'),
+      ),
+    ).toBeGreaterThanOrEqual(3);
+    expect(
+      contrastRatio(
+        token(theme, 'button-colors-border-default'),
+        token(theme, 'color-surface-default'),
+      ),
+    ).toBeGreaterThanOrEqual(3);
+    expect(
+      contrastRatio(
+        token(theme, 'button-colors-focus'),
+        token(theme, 'color-surface-canvas-default'),
+      ),
+    ).toBeGreaterThanOrEqual(3);
+    expect(
+      contrastRatio(
+        token(theme, 'navigation-item-colors-focus'),
+        token(theme, 'navigation-item-colors-background-selected'),
+      ),
+    ).toBeGreaterThanOrEqual(3);
+    expect(
+      contrastRatio(
+        token(theme, 'select-colors-input-border-default'),
+        token(theme, 'select-colors-input-background-default'),
+      ),
+    ).toBeGreaterThanOrEqual(3);
+  });
+
+  it('resolves high-contrast neutral actions through semantic and component roles', () => {
+    expect(token(theme, 'color-background-action-neutral-default')).toBe(
+      token(theme, expected.actionDefault),
+    );
+    expect(token(theme, 'color-background-action-neutral-hover')).toBe(
+      token(theme, expected.actionHover),
+    );
+    expect(token(theme, 'color-background-action-neutral-active')).toBe(
+      token(theme, expected.actionActive),
+    );
+    expect(token(theme, 'color-text-on-action')).toBe(token(theme, expected.actionText));
+    expect(token(theme, 'color-border-action-neutral')).toBe(token(theme, expected.buttonBorder));
+
+    expect(token(theme, 'button-colors-background-default')).toBe(
+      token(theme, 'color-background-action-neutral-default'),
+    );
+    expect(token(theme, 'button-colors-text-default')).toBe(token(theme, 'color-text-on-action'));
+    expect(token(theme, 'button-colors-border-default')).toBe(
+      token(theme, 'color-border-action-neutral'),
+    );
+
+    expect(token(theme, 'color-background-accent-default')).toBe(
+      token(theme, 'color-background-action-neutral-default'),
+    );
+    expect(token(theme, 'button-colors-outlined-text-default')).toBe(
+      token(theme, 'color-text-link-default'),
+    );
+    expect(token(theme, 'button-colors-ghost-background-hover')).toBe(
+      token(theme, 'color-background-ghost-neutral-hover'),
+    );
+  });
+
+  it('keeps non-action accent roles neutral and reserves Blue for emphasis', () => {
+    expect(token(theme, 'color-text-accent')).toBe(token(theme, 'color-palette-ui-gray-12'));
+    expect(token(theme, 'color-icon-accent')).toBe(token(theme, 'color-palette-ui-gray-12'));
+    expect(token(theme, 'color-focus-default')).toBe(token(theme, 'color-palette-ui-gray-12'));
+
+    expect(token(theme, 'color-background-emphasis-default')).toBe(
+      token(theme, 'color-palette-ui-blue-9'),
+    );
+    expect(token(theme, 'color-text-emphasis')).toBe(token(theme, 'color-palette-ui-blue-11'));
+    expect(token(theme, 'color-icon-selected')).toBe(token(theme, 'color-icon-bold'));
+  });
+
+  it('keeps navigation, rows, links, and focus neutral', () => {
+    expect(token(theme, 'color-background-selected-weak-default')).toBe(
+      token(theme, 'color-palette-ui-gray-3'),
+    );
+    expect(token(theme, 'color-background-selected-bold-default')).toBe(
+      token(theme, 'color-palette-ui-gray-12'),
+    );
+    expect(token(theme, 'navigation-item-colors-text-selected')).toBe(
+      token(theme, 'color-text-strong'),
+    );
+    expect(token(theme, 'issue-row-colors-background-selected')).toBe(
+      token(theme, 'color-background-selected-weak-default'),
+    );
+    expect(token(theme, 'link-colors-text-default')).toBe(token(theme, 'color-palette-ui-gray-12'));
+    expect(token(theme, 'link-colors-focus')).toBe(token(theme, 'color-focus-default'));
+    expect(token(theme, 'color-focus-default')).toBe(token(theme, 'color-palette-ui-gray-12'));
+  });
+});
diff --git a/src/utils/design-tokens.ts b/src/utils/design-tokens.ts
index 604d19a69..e647f9c15 100644
--- a/src/utils/design-tokens.ts
+++ b/src/utils/design-tokens.ts
@@ -23,8 +23,9 @@ import designTokensBase from '~generated/design-tokens-base.json';
 import { DesignTokens, DesignTokensBase, WithoutEchoesPrefix } from '~types/design-tokens';
 
 export type EchoesDesignTokens = WithoutEchoesPrefix<DesignTokens>;
-export type EchoesCSSVarString = `var(--echoes-${EchoesDesignTokens})`;
-export type EchoesCSSVarStringWithFallback = `var(--echoes-${EchoesDesignTokens}, ${string})`;
+export type EchoesCSSVarString<T extends string = string> = `var(--echoes-${T})`;
+export type EchoesCSSVarStringWithFallback<T extends string = string> =
+  `var(--echoes-${T}, ${string})`;
 
 /**
  * Type-safe helper function to create CSS variable references for echoes design tokens.
@@ -54,12 +55,15 @@ export type EchoesCSSVarStringWithFallback = `var(--echoes-${EchoesDesignTokens}
  * });
  * ```
  */
-export function cssVar(token: EchoesDesignTokens): EchoesCSSVarString;
-export function cssVar(token: EchoesDesignTokens, fallback: string): EchoesCSSVarStringWithFallback;
-export function cssVar(
-  token: EchoesDesignTokens,
+export function cssVar<T extends EchoesDesignTokens>(token: T): EchoesCSSVarString<T>;
+export function cssVar<T extends EchoesDesignTokens>(
+  token: T,
+  fallback: string,
+): EchoesCSSVarStringWithFallback<T>;
+export function cssVar<T extends EchoesDesignTokens>(
+  token: T,
   fallback?: string,
-): EchoesCSSVarString | EchoesCSSVarStringWithFallback {
+): EchoesCSSVarString<T> | EchoesCSSVarStringWithFallback<T> {
   const variableName = `--echoes-${token}` as const;
   return isStringDefined(fallback) ? `var(${variableName}, ${fallback})` : `var(${variableName})`;
 }
diff --git a/stories/design-tokens/ColorSystemPilot-stories.tsx b/stories/design-tokens/ColorSystemPilot-stories.tsx
new file mode 100644
index 000000000..40ce80f5f
--- /dev/null
+++ b/stories/design-tokens/ColorSystemPilot-stories.tsx
@@ -0,0 +1,646 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import styled from '@emotion/styled';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button, ButtonVariety, TextInput, Theme, ThemeProvider, cssVar } from '../../src';
+
+const meta: Meta = {
+  title: 'Design Tokens/12-step color pilot',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const THEMES = [Theme.light, Theme.dark] as const;
+const STATES = ['Default', 'Hover', 'Active', 'Focus', 'Selected', 'Disabled'] as const;
+const ALPHA_BACKGROUNDS = [
+  ['White', 'color-surface-default', 'color-text-strong'],
+  ['Neutral', 'color-palette-ui-gray-5', 'color-text-strong'],
+  ['Tinted', 'color-palette-ui-blue-3', 'color-text-strong'],
+  ['Blue', 'color-palette-ui-blue-9', 'color-text-on-color'],
+] as const;
+const PALETTE_ROLE_GUIDANCE = [
+  {
+    palette: 'Chromatic',
+    step9: 'Solid accent',
+    step10: 'Hovered accent',
+    note: 'Use only after an approved semantic mapping. Blue is reserved for explicitly labeled feature emphasis.',
+  },
+  {
+    palette: 'Neutral',
+    step9: 'Mid-contrast fill',
+    step10: 'Hovered fill',
+    note: 'High-contrast neutral actions may use step 12 through semantic and component tokens.',
+  },
+  {
+    palette: 'Alpha',
+    step9: 'Strong overlay',
+    step10: 'Stronger overlay',
+    note: 'Alpha values remain overlays whose result depends on the underlying surface.',
+  },
+] as const;
+
+const UI_STEPS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+const CANDIDATE_PALETTES = [
+  { label: 'Green', name: 'green' },
+  { label: 'Yellow', name: 'yellow' },
+  { label: 'Red', name: 'red' },
+  { label: 'Teal', name: 'teal' },
+  { label: 'Cyan', name: 'cyan' },
+  { label: 'Purple', name: 'purple' },
+  { label: 'Magenta', name: 'magenta' },
+  { label: 'Orange', name: 'orange' },
+] as const;
+
+const DATA_VIZ_CATEGORICAL = [
+  'color-palette-ui-data-viz-categorical-1',
+  'color-palette-ui-data-viz-categorical-2',
+  'color-palette-ui-data-viz-categorical-3',
+  'color-palette-ui-data-viz-categorical-4',
+  'color-palette-ui-data-viz-categorical-5',
+  'color-palette-ui-data-viz-categorical-6',
+  'color-palette-ui-data-viz-categorical-7',
+  'color-palette-ui-data-viz-categorical-8',
+] as const;
+
+const DATA_VIZ_SEVERITY = [
+  ['Blocker', 'color-palette-ui-data-viz-severity-blocker'],
+  ['High', 'color-palette-ui-data-viz-severity-high'],
+  ['Medium', 'color-palette-ui-data-viz-severity-medium'],
+  ['Low', 'color-palette-ui-data-viz-severity-low'],
+  ['Info', 'color-palette-ui-data-viz-severity-info'],
+] as const;
+
+function Workflow({ theme }: Readonly<{ theme: `${Theme}` }>) {
+  return (
+    <ThemeProvider asChild theme={theme}>
+      <ThemePanel>
+        <ThemeHeading>{theme} theme</ThemeHeading>
+        <Workspace>
+          <Navigation aria-label={`${theme} project navigation`}>
+            <ProjectName>acme-frontend</ProjectName>
+            <NavigationItem href="#overview">Overview</NavigationItem>
+            <NavigationItem aria-current="page" href="#issues">
+              Issues
+            </NavigationItem>
+            <NavigationItem href="#measures">Measures</NavigationItem>
+          </Navigation>
+
+          <Main>
+            <Header>
+              <div>
+                <Title>New code issues</Title>
+                <SupportingText>Review issues introduced by pull request #482.</SupportingText>
+              </div>
+              <Button variety={ButtonVariety.Primary}>Review selected</Button>
+            </Header>
+
+            <TextInput ariaLabel="Search issues" placeholder="Rule, file, or message" />
+
+            <IssueTable aria-label={`${theme} issue workflow`}>
+              <thead>
+                <tr>
+                  <ColumnHeader>Issue</ColumnHeader>
+                  <ColumnHeader>File</ColumnHeader>
+                  <ColumnHeader>Status</ColumnHeader>
+                </tr>
+              </thead>
+              <tbody>
+                <IssueRow>
+                  <Cell>Avoid duplicated string literals</Cell>
+                  <Cell>src/api/client.ts</Cell>
+                  <Cell>Open</Cell>
+                </IssueRow>
+                <IssueRow data-selected="true">
+                  <Cell>Refactor this function to reduce complexity</Cell>
+                  <Cell>src/auth/session.ts</Cell>
+                  <Cell>Selected</Cell>
+                </IssueRow>
+                <IssueRow>
+                  <Cell>Remove this unused import</Cell>
+                  <Cell>src/App.tsx</Cell>
+                  <Cell>Open</Cell>
+                </IssueRow>
+              </tbody>
+            </IssueTable>
+          </Main>
+        </Workspace>
+
+        <SectionHeading>Step 9 and 10 guidance</SectionHeading>
+        <GuidanceText>
+          Palette steps are landmarks, not component contracts. Buttons resolve through neutral
+          action semantics instead of binding directly to a numbered palette value.
+        </GuidanceText>
+        <GuidanceGrid>
+          {PALETTE_ROLE_GUIDANCE.map(({ note, palette, step10, step9 }) => (
+            <GuidanceCard key={palette}>
+              <GuidanceTitle>{palette}</GuidanceTitle>
+              <GuidanceRole>9 · {step9}</GuidanceRole>
+              <GuidanceRole>10 · {step10}</GuidanceRole>
+              <GuidanceNote>{note}</GuidanceNote>
+            </GuidanceCard>
+          ))}
+        </GuidanceGrid>
+
+        <SectionHeading>Interaction states</SectionHeading>
+        <StateGrid>
+          {STATES.map((state) => (
+            <StateExample data-state={state.toLowerCase()} key={state}>
+              {state}
+            </StateExample>
+          ))}
+        </StateGrid>
+
+        <SectionHeading>Gray Alpha over representative surfaces</SectionHeading>
+        <AlphaGrid>
+          {ALPHA_BACKGROUNDS.map(([label, token, foreground]) => (
+            <AlphaSurface key={label} style={{ backgroundColor: cssVar(token) }}>
+              <AlphaOverlay style={{ color: cssVar(foreground) }}>{label}</AlphaOverlay>
+            </AlphaSurface>
+          ))}
+        </AlphaGrid>
+      </ThemePanel>
+    </ThemeProvider>
+  );
+}
+
+function SentimentAndDataVizProposal({ theme }: Readonly<{ theme: `${Theme}` }>) {
+  return (
+    <ThemeProvider asChild theme={theme}>
+      <ThemePanel>
+        <ThemeHeading>{theme} theme</ThemeHeading>
+        <GuidanceText>
+          Exact Option 2 candidate primitives. Existing sentiment, information, rating, severity,
+          and chart semantics remain unchanged until a dedicated migration is approved.
+        </GuidanceText>
+
+        <SectionHeading>Candidate chromatic scales</SectionHeading>
+        <PaletteCollection>
+          {CANDIDATE_PALETTES.map(({ label, name }) => (
+            <PaletteCard key={label}>
+              <GuidanceTitle>{label}</GuidanceTitle>
+              <PaletteScale aria-label={`${label}, ${theme} theme`}>
+                {UI_STEPS.map((step) => {
+                  const token = `color-palette-ui-${name}-${step}` as const;
+                  return (
+                    <PaletteStep key={token}>
+                      <PaletteSwatch
+                        aria-label={`${label} step ${step}`}
+                        style={{ backgroundColor: cssVar(token) }}
+                        title={token}
+                      />
+                      <PaletteStepLabel>{step}</PaletteStepLabel>
+                    </PaletteStep>
+                  );
+                })}
+              </PaletteScale>
+            </PaletteCard>
+          ))}
+        </PaletteCollection>
+
+        <SectionHeading>Categorical data visualization</SectionHeading>
+        <ChartCard>
+          <ChartBars aria-label={`Categorical chart colors, ${theme} theme`}>
+            {DATA_VIZ_CATEGORICAL.map((token, index) => (
+              <ChartBar
+                key={token}
+                style={{
+                  backgroundColor: cssVar(token),
+                  height: `${40 + ((index * 17) % 55)}%`,
+                }}
+                title={token}
+              />
+            ))}
+          </ChartBars>
+          <ChartLegend>
+            {DATA_VIZ_CATEGORICAL.map((token, index) => (
+              <ChartLegendItem key={token}>
+                <LegendSwatch style={{ backgroundColor: cssVar(token) }} />
+                Series {index + 1}
+              </ChartLegendItem>
+            ))}
+          </ChartLegend>
+        </ChartCard>
+
+        <SectionHeading>Severity data visualization</SectionHeading>
+        <SeverityGrid>
+          {DATA_VIZ_SEVERITY.map(([label, token]) => (
+            <SeverityItem key={token}>
+              <SeveritySwatch style={{ backgroundColor: cssVar(token) }} />
+              <span>{label}</span>
+            </SeverityItem>
+          ))}
+          <SeverityItem>
+            <SeveritySwatch
+              style={{
+                backgroundColor: cssVar('color-palette-ui-data-viz-placeholder-default'),
+              }}
+            />
+            <span>Placeholder</span>
+          </SeverityItem>
+        </SeverityGrid>
+      </ThemePanel>
+    </ThemeProvider>
+  );
+}
+
+export const WorkflowAndStates: Story = {
+  render: () => (
+    <Comparison>
+      {THEMES.map((theme) => (
+        <Workflow key={theme} theme={theme} />
+      ))}
+    </Comparison>
+  ),
+};
+
+export const SentimentAndDataVisualization: Story = {
+  render: () => (
+    <Comparison>
+      {THEMES.map((theme) => (
+        <SentimentAndDataVizProposal key={theme} theme={theme} />
+      ))}
+    </Comparison>
+  ),
+};
+
+const Comparison = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(${cssVar('dimension-width-5000')}, 1fr));
+  min-height: 100vh;
+`;
+Comparison.displayName = 'Comparison';
+
+const ThemePanel = styled.section`
+  padding: ${cssVar('dimension-space-400')};
+  color: ${cssVar('color-text-strong')};
+  background: ${cssVar('color-surface-canvas-default')};
+`;
+ThemePanel.displayName = 'ThemePanel';
+
+const ThemeHeading = styled.h2`
+  margin: 0 0 ${cssVar('dimension-space-200')};
+  font: ${cssVar('typography-heading-medium')};
+  text-transform: capitalize;
+`;
+ThemeHeading.displayName = 'ThemeHeading';
+
+const Workspace = styled.div`
+  display: grid;
+  grid-template-columns: ${cssVar('dimension-width-800')} 1fr;
+  overflow: hidden;
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-bold')};
+  border-radius: ${cssVar('border-radius-400')};
+  background: ${cssVar('color-surface-default')};
+`;
+Workspace.displayName = 'Workspace';
+
+const Navigation = styled.nav`
+  display: flex;
+  flex-direction: column;
+  gap: ${cssVar('dimension-space-50')};
+  padding: ${cssVar('dimension-space-150')};
+  border-right: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+`;
+Navigation.displayName = 'Navigation';
+
+const ProjectName = styled.strong`
+  margin-bottom: ${cssVar('dimension-space-100')};
+  font: ${cssVar('typography-text-default-semi-bold')};
+`;
+ProjectName.displayName = 'ProjectName';
+
+const NavigationItem = styled.a`
+  padding: ${cssVar('dimension-space-100')};
+  border-radius: ${cssVar('border-radius-400')};
+  color: ${cssVar('navigation-item-colors-text-default')};
+  font: ${cssVar('typography-text-default-regular')};
+  text-decoration: none;
+
+  &:hover {
+    background: ${cssVar('navigation-item-colors-background-hover')};
+  }
+
+  &[aria-current='page'] {
+    color: ${cssVar('navigation-item-colors-text-selected')};
+    background: ${cssVar('navigation-item-colors-background-selected')};
+    font: ${cssVar('typography-text-default-semi-bold')};
+  }
+
+  &:focus-visible {
+    outline: ${cssVar('focus-border-width-default')} solid ${cssVar('navigation-item-colors-focus')};
+    outline-offset: ${cssVar('focus-border-offset-default')};
+  }
+`;
+NavigationItem.displayName = 'NavigationItem';
+
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: ${cssVar('dimension-space-200')};
+  padding: ${cssVar('dimension-space-300')};
+`;
+Main.displayName = 'Main';
+
+const Header = styled.header`
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: ${cssVar('dimension-space-200')};
+`;
+Header.displayName = 'Header';
+
+const Title = styled.h3`
+  margin: 0;
+  font: ${cssVar('typography-heading-small')};
+`;
+Title.displayName = 'Title';
+
+const SupportingText = styled.p`
+  margin: ${cssVar('dimension-space-50')} 0 0;
+  color: ${cssVar('color-text-default')};
+  font: ${cssVar('typography-text-default-regular')};
+`;
+SupportingText.displayName = 'SupportingText';
+
+const IssueTable = styled.table`
+  border-collapse: collapse;
+  color: ${cssVar('color-text-strong')};
+  font: ${cssVar('typography-text-default-regular')};
+`;
+IssueTable.displayName = 'IssueTable';
+
+const ColumnHeader = styled.th`
+  padding: ${cssVar('dimension-space-100')};
+  border-bottom: ${cssVar('border-width-default')} solid ${cssVar('issue-row-colors-border')};
+  text-align: left;
+`;
+ColumnHeader.displayName = 'ColumnHeader';
+
+const IssueRow = styled.tr`
+  background: ${cssVar('issue-row-colors-background-default')};
+
+  &:hover {
+    background: ${cssVar('issue-row-colors-background-hover')};
+  }
+
+  &[data-selected='true'] {
+    background: ${cssVar('issue-row-colors-background-selected')};
+  }
+`;
+IssueRow.displayName = 'IssueRow';
+
+const Cell = styled.td`
+  padding: ${cssVar('dimension-space-100')};
+  border-bottom: ${cssVar('border-width-default')} solid ${cssVar('issue-row-colors-border')};
+`;
+Cell.displayName = 'Cell';
+
+const SectionHeading = styled.h3`
+  margin: ${cssVar('dimension-space-300')} 0 ${cssVar('dimension-space-100')};
+  font: ${cssVar('typography-heading-xsmall')};
+`;
+SectionHeading.displayName = 'SectionHeading';
+
+const GuidanceText = styled.p`
+  margin: 0 0 ${cssVar('dimension-space-150')};
+  color: ${cssVar('color-text-default')};
+  font: ${cssVar('typography-text-default-regular')};
+`;
+GuidanceText.displayName = 'GuidanceText';
+
+const GuidanceGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: ${cssVar('dimension-space-100')};
+`;
+GuidanceGrid.displayName = 'GuidanceGrid';
+
+const GuidanceCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${cssVar('dimension-space-50')};
+  padding: ${cssVar('dimension-space-150')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+  border-radius: ${cssVar('border-radius-400')};
+  background: ${cssVar('color-surface-default')};
+`;
+GuidanceCard.displayName = 'GuidanceCard';
+
+const GuidanceTitle = styled.strong`
+  font: ${cssVar('typography-text-default-semi-bold')};
+`;
+GuidanceTitle.displayName = 'GuidanceTitle';
+
+const GuidanceRole = styled.span`
+  color: ${cssVar('color-text-strong')};
+  font: ${cssVar('typography-text-small-semi-bold')};
+`;
+GuidanceRole.displayName = 'GuidanceRole';
+
+const GuidanceNote = styled.span`
+  color: ${cssVar('color-text-default')};
+  font: ${cssVar('typography-text-small-regular')};
+`;
+GuidanceNote.displayName = 'GuidanceNote';
+
+const StateGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: ${cssVar('dimension-space-100')};
+`;
+StateGrid.displayName = 'StateGrid';
+
+const StateExample = styled.button`
+  padding: ${cssVar('dimension-space-100')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('button-colors-border-default')};
+  border-radius: ${cssVar('border-radius-400')};
+  color: ${cssVar('button-colors-text-default')};
+  background: ${cssVar('button-colors-background-default')};
+  font: ${cssVar('typography-others-label')};
+
+  &[data-state='hover'] {
+    background: ${cssVar('button-colors-background-hover')};
+  }
+  &[data-state='active'] {
+    background: ${cssVar('button-colors-background-active')};
+  }
+  &[data-state='focus'] {
+    outline: ${cssVar('focus-border-width-default')} solid ${cssVar('button-colors-focus')};
+    outline-offset: ${cssVar('focus-border-offset-default')};
+  }
+  &[data-state='selected'] {
+    color: ${cssVar('navigation-item-colors-text-selected')};
+    background: ${cssVar('navigation-item-colors-background-selected')};
+  }
+  &[data-state='disabled'] {
+    color: ${cssVar('button-colors-text-disabled')};
+    background: ${cssVar('button-colors-background-disabled')};
+  }
+`;
+StateExample.displayName = 'StateExample';
+
+const AlphaGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: ${cssVar('dimension-space-100')};
+`;
+AlphaGrid.displayName = 'AlphaGrid';
+
+const AlphaSurface = styled.div`
+  min-height: ${cssVar('dimension-height-1000')};
+  padding: ${cssVar('dimension-space-100')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-bold')};
+  border-radius: ${cssVar('border-radius-400')};
+`;
+AlphaSurface.displayName = 'AlphaSurface';
+
+const AlphaOverlay = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background: ${cssVar('color-palette-ui-gray-alpha-6')};
+  font: ${cssVar('typography-text-default-semi-bold')};
+`;
+AlphaOverlay.displayName = 'AlphaOverlay';
+
+const PaletteCollection = styled.div`
+  display: grid;
+  gap: ${cssVar('dimension-space-150')};
+`;
+PaletteCollection.displayName = 'PaletteCollection';
+
+const PaletteCard = styled.div`
+  display: grid;
+  gap: ${cssVar('dimension-space-100')};
+  padding: ${cssVar('dimension-space-150')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+  border-radius: ${cssVar('border-radius-400')};
+  background: ${cssVar('color-surface-default')};
+`;
+PaletteCard.displayName = 'PaletteCard';
+
+const PaletteScale = styled.div`
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: ${cssVar('dimension-space-50')};
+`;
+PaletteScale.displayName = 'PaletteScale';
+
+const PaletteStep = styled.div`
+  display: grid;
+  gap: ${cssVar('dimension-space-50')};
+`;
+PaletteStep.displayName = 'PaletteStep';
+
+const PaletteSwatch = styled.div`
+  aspect-ratio: 1;
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+  border-radius: ${cssVar('border-radius-200')};
+`;
+PaletteSwatch.displayName = 'PaletteSwatch';
+
+const PaletteStepLabel = styled.span`
+  color: ${cssVar('color-text-default')};
+  font: ${cssVar('typography-text-small-regular')};
+  text-align: center;
+`;
+PaletteStepLabel.displayName = 'PaletteStepLabel';
+
+const ChartCard = styled.div`
+  display: grid;
+  gap: ${cssVar('dimension-space-200')};
+  padding: ${cssVar('dimension-space-200')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+  border-radius: ${cssVar('border-radius-400')};
+  background: ${cssVar('color-surface-default')};
+`;
+ChartCard.displayName = 'ChartCard';
+
+const ChartBars = styled.div`
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  align-items: end;
+  gap: ${cssVar('dimension-space-100')};
+  height: calc(${cssVar('dimension-height-1000')} * 4);
+  padding: ${cssVar('dimension-space-100')};
+  border-bottom: ${cssVar('border-width-default')} solid ${cssVar('color-border-bold')};
+`;
+ChartBars.displayName = 'ChartBars';
+
+const ChartBar = styled.div`
+  min-height: ${cssVar('dimension-height-200')};
+  border-radius: ${cssVar('border-radius-200')} ${cssVar('border-radius-200')} 0 0;
+`;
+ChartBar.displayName = 'ChartBar';
+
+const ChartLegend = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: ${cssVar('dimension-space-100')};
+`;
+ChartLegend.displayName = 'ChartLegend';
+
+const ChartLegendItem = styled.span`
+  display: flex;
+  align-items: center;
+  gap: ${cssVar('dimension-space-50')};
+  color: ${cssVar('color-text-default')};
+  font: ${cssVar('typography-text-small-regular')};
+`;
+ChartLegendItem.displayName = 'ChartLegendItem';
+
+const LegendSwatch = styled.span`
+  width: ${cssVar('dimension-width-100')};
+  height: ${cssVar('dimension-height-100')};
+  border-radius: ${cssVar('border-radius-full')};
+`;
+LegendSwatch.displayName = 'LegendSwatch';
+
+const SeverityGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: ${cssVar('dimension-space-100')};
+`;
+SeverityGrid.displayName = 'SeverityGrid';
+
+const SeverityItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${cssVar('dimension-space-100')};
+  padding: ${cssVar('dimension-space-150')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+  border-radius: ${cssVar('border-radius-400')};
+  color: ${cssVar('color-text-strong')};
+  background: ${cssVar('color-surface-default')};
+  font: ${cssVar('typography-text-default-semi-bold')};
+`;
+SeverityItem.displayName = 'SeverityItem';
+
+const SeveritySwatch = styled.span`
+  width: ${cssVar('dimension-width-300')};
+  aspect-ratio: 1;
+  border-radius: ${cssVar('border-radius-200')};
+`;
+SeveritySwatch.displayName = 'SeveritySwatch';
diff --git a/stories/playground/Issues-stories.tsx b/stories/playground/Issues-stories.tsx
new file mode 100644
index 000000000..e3e42d1ef
--- /dev/null
+++ b/stories/playground/Issues-stories.tsx
@@ -0,0 +1,145 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+import {
+  Button,
+  ButtonVariety,
+  IconIssues,
+  IconMoreVertical,
+  IconOverview,
+  Pagination,
+  Table,
+  TableVariety,
+  Text,
+  TextInput,
+} from '../../src';
+import { PlaygroundShell, PlaygroundStack, PlaygroundToolbar } from './PlaygroundShell';
+
+const meta: Meta = {
+  title: 'Playground/Issues',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const ISSUES = [
+  {
+    file: 'src/auth/session.ts',
+    message: 'Refactor this function to reduce its Cognitive Complexity',
+    rule: 'typescript:S3776',
+  },
+  {
+    file: 'src/api/client.ts',
+    message: 'Define a constant instead of duplicating this literal',
+    rule: 'typescript:S1192',
+  },
+  {
+    file: 'src/components/Login.tsx',
+    message: 'Add an explicit type to this button',
+    rule: 'typescript:S6848',
+  },
+  { file: 'src/App.tsx', message: 'Remove this unused import', rule: 'typescript:S1128' },
+] as const;
+
+export const Default: Story = { render: () => <IssuesPage /> };
+
+function IssuesPage() {
+  const [page, setPage] = useState(1);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<Record<string, boolean>>({});
+  const visibleIssues = useMemo(
+    () =>
+      ISSUES.filter((issue) =>
+        `${issue.message} ${issue.file}`.toLowerCase().includes(query.toLowerCase()),
+      ),
+    [query],
+  );
+
+  return (
+    <PlaygroundShell
+      actions={<Button>Refresh</Button>}
+      navigation={[
+        { Icon: IconOverview, label: 'Overview', to: '/' },
+        { Icon: IconIssues, label: 'Issues', to: '/issues' },
+      ]}
+      productName="acme-frontend"
+      title="Issues">
+      <PlaygroundStack>
+        <PlaygroundToolbar>
+          <TextInput
+            ariaLabel="Search issues"
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search by message or file"
+            type="search"
+            value={query}
+          />
+          <Text isSubtle>{visibleIssues.length} issues on new code</Text>
+        </PlaygroundToolbar>
+
+        <Table
+          ariaLabel="Issues on new code"
+          gridTemplate="max-content minmax(280px, 1fr) minmax(180px, 0.6fr) max-content max-content"
+          variety={TableVariety.Surface}>
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeaderCell aria-label="Select issue" />
+              <Table.ColumnHeaderCell label="Issue" />
+              <Table.ColumnHeaderCell label="File" />
+              <Table.ColumnHeaderCell label="Status" />
+              <Table.ColumnHeaderCell aria-label="Actions" />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {visibleIssues.map((issue) => (
+              <Table.Row key={issue.rule} selected={selected[issue.rule]}>
+                <Table.CellCheckbox
+                  ariaLabel={`Select ${issue.message}`}
+                  checked={Boolean(selected[issue.rule])}
+                  onCheck={() =>
+                    setSelected((value) => ({ ...value, [issue.rule]: !value[issue.rule] }))
+                  }
+                />
+                <Table.RowHeaderCell content={issue.message} description={issue.rule} />
+                <Table.CellText content={issue.file} />
+                <Table.CellBadge variety="neutral">Open</Table.CellBadge>
+                <Table.CellButtonIcon
+                  Icon={IconMoreVertical}
+                  ariaLabel={`Actions for ${issue.file}`}
+                />
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+
+        <PlaygroundToolbar>
+          <Button
+            isDisabled={Object.values(selected).every((value) => !value)}
+            variety={ButtonVariety.Primary}>
+            Assign selected
+          </Button>
+          <Pagination onChange={setPage} page={page} totalPages={4} />
+        </PlaygroundToolbar>
+      </PlaygroundStack>
+    </PlaygroundShell>
+  );
+}
diff --git a/stories/playground/PlaygroundShell.tsx b/stories/playground/PlaygroundShell.tsx
new file mode 100644
index 000000000..302732fc3
--- /dev/null
+++ b/stories/playground/PlaygroundShell.tsx
@@ -0,0 +1,166 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import styled from '@emotion/styled';
+import type { ComponentProps, ReactNode } from 'react';
+import {
+  DropdownMenu,
+  IconProject,
+  IconQuestionMark,
+  IconSearch,
+  Layout,
+  LogoSonarQubeServer,
+  cssVar,
+} from '../../src';
+
+interface NavigationItem {
+  Icon: NonNullable<ComponentProps<typeof Layout.SidebarNavigation.Item>['Icon']>;
+  label: string;
+  to: string;
+}
+
+interface PlaygroundShellProps {
+  actions?: ReactNode;
+  children: ReactNode;
+  navigation: NavigationItem[];
+  productName: string;
+  title: string;
+}
+
+export function PlaygroundShell({
+  actions,
+  children,
+  navigation,
+  productName,
+  title,
+}: Readonly<PlaygroundShellProps>) {
+  return (
+    <Layout isSidebarInitiallyDocked>
+      <PlaygroundGlobalNavigation />
+
+      <Layout.SidebarNavigation>
+        <Layout.SidebarNavigation.Header
+          avatar={
+            <ProjectAvatar>
+              <IconProject />
+            </ProjectAvatar>
+          }
+          name={productName}
+        />
+        <Layout.SidebarNavigation.Body>
+          {navigation.map(({ Icon, label, to }) => (
+            <Layout.SidebarNavigation.Item Icon={Icon} key={label} to={to}>
+              {label}
+            </Layout.SidebarNavigation.Item>
+          ))}
+        </Layout.SidebarNavigation.Body>
+      </Layout.SidebarNavigation>
+
+      <Layout.ContentGrid>
+        <Layout.PageGrid width="fluid">
+          <Layout.PageHeader
+            actions={
+              actions ? <Layout.PageHeader.Actions>{actions}</Layout.PageHeader.Actions> : undefined
+            }
+            title={<Layout.PageHeader.Title headingLevel="h1">{title}</Layout.PageHeader.Title>}
+          />
+          <Layout.PageContent>{children}</Layout.PageContent>
+        </Layout.PageGrid>
+      </Layout.ContentGrid>
+    </Layout>
+  );
+}
+
+PlaygroundShell.displayName = 'PlaygroundShell';
+
+function PlaygroundGlobalNavigation() {
+  return (
+    <Layout.GlobalNavigation>
+      <Layout.GlobalNavigation.Primary>
+        <Layout.GlobalNavigation.Home>
+          <LogoSonarQubeServer hasText />
+        </Layout.GlobalNavigation.Home>
+        <Layout.GlobalNavigation.ItemsContainer>
+          <Layout.GlobalNavigation.Item to="/">Projects</Layout.GlobalNavigation.Item>
+          <Layout.GlobalNavigation.Item to="/issues">Issues</Layout.GlobalNavigation.Item>
+          <Layout.GlobalNavigation.Item to="/rules">Rules</Layout.GlobalNavigation.Item>
+        </Layout.GlobalNavigation.ItemsContainer>
+      </Layout.GlobalNavigation.Primary>
+      <Layout.GlobalNavigation.Secondary>
+        <Layout.GlobalNavigation.Action Icon={IconSearch} ariaLabel="Search" />
+        <Layout.GlobalNavigation.Action Icon={IconQuestionMark} ariaLabel="Help" />
+        <Layout.GlobalNavigation.Account
+          avatar={<AccountAvatar>MM</AccountAvatar>}
+          items={<DropdownMenu.ItemLink to="/account">My account</DropdownMenu.ItemLink>}
+        />
+      </Layout.GlobalNavigation.Secondary>
+    </Layout.GlobalNavigation>
+  );
+}
+
+PlaygroundGlobalNavigation.displayName = 'PlaygroundGlobalNavigation';
+
+const ProjectAvatar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: ${cssVar('border-radius-400')};
+  color: ${cssVar('navigation-item-colors-icon-selected')};
+  background: ${cssVar('navigation-item-colors-background-selected')};
+`;
+ProjectAvatar.displayName = 'ProjectAvatar';
+
+const AccountAvatar = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: ${cssVar('border-radius-full')};
+  color: ${cssVar('button-colors-text-default')};
+  background: ${cssVar('button-colors-background-default')};
+  font: ${cssVar('typography-text-small-semi-bold')};
+`;
+AccountAvatar.displayName = 'AccountAvatar';
+
+export const PlaygroundStack = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${cssVar('dimension-space-200')};
+`;
+PlaygroundStack.displayName = 'PlaygroundStack';
+
+export const PlaygroundToolbar = styled.div`
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: ${cssVar('dimension-space-150')};
+  flex-wrap: wrap;
+`;
+PlaygroundToolbar.displayName = 'PlaygroundToolbar';
+
+export const PlaygroundCardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(${cssVar('dimension-width-5000')}, 1fr));
+  gap: ${cssVar('dimension-space-150')};
+`;
+PlaygroundCardGrid.displayName = 'PlaygroundCardGrid';
diff --git a/stories/playground/PortfolioOverview-stories.tsx b/stories/playground/PortfolioOverview-stories.tsx
new file mode 100644
index 000000000..dec63b669
--- /dev/null
+++ b/stories/playground/PortfolioOverview-stories.tsx
@@ -0,0 +1,132 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import styled from '@emotion/styled';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Button,
+  Card,
+  Heading,
+  IconOverview,
+  IconProject,
+  IconReports,
+  LinkStandalone,
+  Table,
+  TableVariety,
+  Text,
+  cssVar,
+} from '../../src';
+import { PlaygroundCardGrid, PlaygroundShell, PlaygroundStack } from './PlaygroundShell';
+
+const meta: Meta = { title: 'Playground/Portfolio Overview', parameters: { layout: 'fullscreen' } };
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { render: () => <PortfolioOverviewPage /> };
+
+const PROJECTS = [
+  { gate: 'Passed', name: 'acme-frontend', reliability: 'A', security: 'A' },
+  { gate: 'Failed', name: 'payments-service', reliability: 'B', security: 'C' },
+  { gate: 'Passed', name: 'identity-api', reliability: 'A', security: 'A' },
+] as const;
+
+function PortfolioOverviewPage() {
+  return (
+    <PlaygroundShell
+      actions={<Button>Add project</Button>}
+      navigation={[
+        { Icon: IconOverview, label: 'Overview', to: '/' },
+        { Icon: IconProject, label: 'Projects', to: '/projects' },
+        { Icon: IconReports, label: 'Reports', to: '/reports' },
+      ]}
+      productName="Business applications"
+      title="Commerce portfolio">
+      <PlaygroundStack>
+        <Text isSubtle>
+          Track release readiness across the services supporting the commerce experience.
+        </Text>
+        <PlaygroundCardGrid>
+          <SummaryCard label="Projects" value="12" />
+          <SummaryCard label="Quality Gate passed" value="10 of 12" />
+          <SummaryCard label="Security rating" value="A" />
+        </PlaygroundCardGrid>
+
+        <Card>
+          <Card.Header
+            hasDivider
+            rightContent={<LinkStandalone to="/projects">View all projects</LinkStandalone>}
+            title="Project health"
+          />
+          <Card.Body insetContent>
+            <Table
+              ariaLabel="Portfolio project health"
+              gridTemplate="minmax(240px, 1fr) repeat(3, minmax(100px, max-content))"
+              variety={TableVariety.Ghost}>
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeaderCell label="Project" />
+                  <Table.ColumnHeaderCell label="Quality Gate" />
+                  <Table.ColumnHeaderCell label="Reliability" />
+                  <Table.ColumnHeaderCell label="Security" />
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {PROJECTS.map((project) => (
+                  <Table.Row key={project.name}>
+                    <Table.RowHeaderCell content={project.name} description="Last analysis today" />
+                    <Table.CellBadge variety={project.gate === 'Passed' ? 'success' : 'danger'}>
+                      {project.gate}
+                    </Table.CellBadge>
+                    <Table.CellText content={project.reliability} />
+                    <Table.CellText content={project.security} />
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          </Card.Body>
+        </Card>
+      </PlaygroundStack>
+    </PlaygroundShell>
+  );
+}
+
+function SummaryCard({ label, value }: Readonly<{ label: string; value: string }>) {
+  return (
+    <Card>
+      <Card.Body>
+        <Metric>
+          <Text isSubtle>{label}</Text>
+          <Heading as="h2" size="medium">
+            {value}
+          </Heading>
+        </Metric>
+      </Card.Body>
+    </Card>
+  );
+}
+
+SummaryCard.displayName = 'SummaryCard';
+
+const Metric = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${cssVar('dimension-space-75')};
+`;
+Metric.displayName = 'Metric';
diff --git a/stories/playground/ProjectSettings-stories.tsx b/stories/playground/ProjectSettings-stories.tsx
new file mode 100644
index 000000000..7502ce12f
--- /dev/null
+++ b/stories/playground/ProjectSettings-stories.tsx
@@ -0,0 +1,136 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import {
+  Button,
+  ButtonVariety,
+  Form,
+  FormFieldValidation,
+  IconGear,
+  IconKey,
+  IconPeople,
+  IconWebhook,
+  Select,
+  TextArea,
+  TextInput,
+} from '../../src';
+import { PlaygroundShell } from './PlaygroundShell';
+
+const meta: Meta = { title: 'Playground/Project Settings', parameters: { layout: 'fullscreen' } };
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { render: () => <ProjectSettingsPage /> };
+
+function ProjectSettingsPage() {
+  const [branch, setBranch] = useState<string | null>('main');
+  const [description, setDescription] = useState(
+    'Customer-facing web application maintained by the Web Platform team.',
+  );
+  const [name, setName] = useState('acme-frontend');
+  const [savedDescription, setSavedDescription] = useState(description);
+  const [savedName, setSavedName] = useState(name);
+  const isNameInvalid = name.trim().length < 3;
+  const hasChanges = description !== savedDescription || name !== savedName;
+
+  return (
+    <PlaygroundShell
+      navigation={[
+        { Icon: IconGear, label: 'General settings', to: '/' },
+        { Icon: IconWebhook, label: 'Webhooks', to: '/webhooks' },
+        { Icon: IconPeople, label: 'Permissions', to: '/permissions' },
+        { Icon: IconKey, label: 'Authentication', to: '/authentication' },
+      ]}
+      productName="Project administration"
+      title="General settings">
+      <Form
+        onReset={() => {
+          setDescription(savedDescription);
+          setName(savedName);
+        }}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (!isNameInvalid) {
+            setSavedDescription(description);
+            setSavedName(name);
+          }
+        }}>
+        <Form.Header
+          description="Configure analysis defaults and project metadata."
+          title="Project information"
+        />
+        <Form.Section
+          description="These values identify the project throughout SonarQube."
+          title="Identity">
+          <TextInput
+            isRequired
+            label="Project display name"
+            messageInvalid="Enter at least three characters"
+            onChange={(event) => setName(event.target.value)}
+            validation={isNameInvalid ? FormFieldValidation.Invalid : FormFieldValidation.None}
+            value={name}
+          />
+          <TextInput
+            helpText="The project key cannot be changed after creation."
+            isDisabled
+            label="Project key"
+            value="com.acme:frontend"
+          />
+          <TextArea
+            label="Description"
+            onChange={(event) => setDescription(event.target.value)}
+            placeholder="Explain what this project contains"
+            value={description}
+          />
+        </Form.Section>
+        <Form.Section
+          description="Used when no branch is supplied by the scanner."
+          title="Analysis defaults">
+          <Select
+            data={[
+              { label: 'main', value: 'main' },
+              { label: 'develop', value: 'develop' },
+              { label: 'release', value: 'release' },
+            ]}
+            label="Main branch"
+            onChange={setBranch}
+            value={branch}
+          />
+          <TextInput
+            helpText="Comma-separated patterns are supported."
+            label="Source file exclusions"
+            placeholder="**/generated/**, **/*.spec.ts"
+          />
+        </Form.Section>
+        <Form.Footer side="right">
+          <Button type="reset">Cancel</Button>
+          <Button
+            isDisabled={!hasChanges || isNameInvalid}
+            type="submit"
+            variety={ButtonVariety.Primary}>
+            Save changes
+          </Button>
+        </Form.Footer>
+      </Form>
+    </PlaygroundShell>
+  );
+}