diff --git a/design-tokens/README.md b/design-tokens/README.md
new file mode 100644
index 000000000..f6a8ff7c2
--- /dev/null
+++ b/design-tokens/README.md
@@ -0,0 +1,154 @@
+# Design Tokens
+
+This package defines and builds the design tokens for Echoes. It supports multiple brands and multiple color modes (light/dark) through a three-layer token architecture.
+
+## Architecture
+
+Tokens are organized in three layers, each building on the one below it:
+
+```
+brand/          ← Layer 1: Primitives (raw values, brand-specific)
+mode/           ← Layer 2: Semantic (maps primitives to roles and intent)
+component/      ← Layer 3: Component (maps semantic tokens to component slots)
+```
+
+### Layer 1 — Brand (`tokens/brand/`)
+
+Contains raw, brand-specific values. Each brand lives in its own folder:
+
+```
+brand/
+  brandA/
+    base.json     # Dimensions, spacing, typography, border radius
+    colors.json   # Color palette + color roles
+  brandB/
+    base.json
+    colors.json
+```
+
+Each `colors.json` has two subgroups:
+
+**`palette`** — the raw color scales for this brand. These are private to the brand layer and should not be referenced directly from mode or component tokens.
+
+```jsonc
+"palette": {
+  "grey":       { "50": "#...", "100": "#...", ... "900": "#..." },
+  "indigo":     { ... },  // brand primary color family
+  "tangerine":  { ... },  // brand secondary color family
+  "green":      { ... },  // shared sentiment colors
+  "yellow":     { ... },
+  "orange":     { ... },
+  "red":        { ... },
+  "blue":       { ... },
+  "purple":     { ... }
+}
+```
+
+**`roles`** — semantic color roles that map palette shades to named steps. These are the tokens that higher layers consume.
+
+```jsonc
+"roles": {
+  "support":   { "black", "white", "transparent" },
+  "neutral":   { "lightest", "light", "medium", "strong", "bold", "dark" },
+  "primary":   { "lightest", "light", "medium", "strong", "bold", "dark" },
+  "secondary": { "lightest", "light", "medium", "strong", "bold", "dark" },
+  "info":      { ... },
+  "success":   { ... },
+  "warning":   { ... },
+  "danger":    { ... },
+  "highlight": { ... }
+}
+```
+
+The step names go from lightest to darkest and map to the underlying palette like this:
+
+| Step       | Approx. palette shade |
+|------------|----------------------|
+| `lightest` | 50                   |
+| `light`    | 100                  |
+| `medium`   | 300                  |
+| `strong`   | 500                  |
+| `bold`     | 700                  |
+| `dark`     | 900                  |
+
+`primary` and `secondary` reference the brand-specific palette families (`indigo` and `tangerine`). All other roles reference shared palette families and are identical across brands.
+
+### Layer 2 — Mode (`tokens/mode/`)
+
+Contains semantic color tokens that describe intent, not appearance. These tokens reference **role tokens** from the brand layer, never palette tokens directly.
+
+```
+mode/
+  light.json   # Semantic tokens for light mode
+  dark.json    # Semantic tokens for dark mode
+```
+
+Example:
+```jsonc
+"background": {
+  "accent": {
+    "default": { "$value": "{echoes.color.roles.primary.strong}" }
+  }
+}
+```
+
+Because mode tokens reference roles (not palette shades), swapping a brand automatically changes the resolved color — no edits to mode files required.
+
+### Layer 3 — Component (`tokens/component/`)
+
+Maps semantic mode tokens to component-specific slots. These tokens are the ones consumed by component CSS.
+
+```
+component/
+  base.json    # Non-color component tokens (shared across modes)
+  light.json   # Light mode component token overrides
+  dark.json    # Dark mode component token overrides
+```
+
+---
+
+## Theme Configuration (`$themes.json`)
+
+Tokens Studio themes define which token sets are active for each combination of brand and mode. There are three groups:
+
+| Group   | Themes          | Purpose                                     |
+|---------|-----------------|---------------------------------------------|
+| `Brand` | brandA, BrandB  | Selects the active brand primitives          |
+| `Modes` | light, dark     | Selects the active mode, using brandA colors |
+| `Sonar` | base            | Non-color base tokens, used at all times     |
+
+Each `Modes` theme includes the brand primitive sets as `"source"` so that role references resolve correctly at build time.
+
+---
+
+## Adding a New Brand
+
+1. Copy `tokens/brand/brandA/` to `tokens/brand/brandC/`
+2. Update `colors.json`:
+   - Replace `palette.indigo.*` values with the new brand's primary color scale
+   - Replace `palette.tangerine.*` values with the new brand's secondary color scale
+   - The `roles` section requires no changes — it references palette by name
+3. Add `brand/brandC/base` and `brand/brandC/colors` entries to `$metadata.json`
+4. Add a new `Brand` group entry to `$themes.json` for the new brand
+5. No changes to `mode/` or `component/` files are needed
+
+---
+
+## Build
+
+```sh
+node build.js
+```
+
+Output is written to `src/generated/`:
+
+| File                            | Contents                                      |
+|---------------------------------|-----------------------------------------------|
+| `design-tokens-base.css`        | Non-color CSS custom properties (`:root`)     |
+| `design-tokens-light.css`       | Light mode color CSS custom properties        |
+| `design-tokens-dark.css`        | Dark mode color CSS custom properties         |
+| `design-tokens.css`             | Root file importing all of the above          |
+| `design-tokens-base.json`       | Non-color tokens as flat JSON                 |
+| `design-tokens-themed.json`     | Light mode color tokens as flat JSON          |
+| `themes.ts`                     | `Theme` enum with all available theme names   |
+| `tailwindConfig.js`             | Spacing, width and height tokens as a Tailwind preset |
diff --git a/design-tokens/build.js b/design-tokens/build.js
index 89b278819..c01a45e7e 100644
--- a/design-tokens/build.js
+++ b/design-tokens/build.js
@@ -49,7 +49,7 @@ const baseDesignTokenGroup = designTokenGroups.find(
   ({ group, name }) => group === 'Sonar' && name === 'base',
 );
 
-const themedDesignTokenGroups = designTokenGroups.filter(({ group }) => group === 'Themes');
+const themedDesignTokenGroups = designTokenGroups.filter(({ group }) => group === 'Modes');
 
 const sd = initStyleDictionary(licenseHeader);
 await buildBaseTokens(baseDesignTokenGroup, sd);
diff --git a/design-tokens/decisions/001-multi-brand-token-architecture.md b/design-tokens/decisions/001-multi-brand-token-architecture.md
new file mode 100644
index 000000000..da6ef5ed4
--- /dev/null
+++ b/design-tokens/decisions/001-multi-brand-token-architecture.md
@@ -0,0 +1,82 @@
+# ADR 001 — Multi-Brand Design Token Architecture
+
+**Date:** 2026-04-16
+**Status:** Accepted
+**Branch:** `marcio/revamp-tokens`
+
+---
+
+## Context
+
+The original token architecture was designed for a single brand and a flat structure. Token sets were named `layer1`, `layer2`, `layer3` and were organized around the build pipeline rather than semantic meaning. As the need to support multiple brands (brandA, brandB) emerged, this structure created several problems:
+
+- No clear separation between brand-specific values and shared semantic values
+- Color palette tokens were referenced directly from semantic and component tokens, making brand swapping impossible without editing every downstream file
+- The flat naming gave no guidance to contributors about where to add new tokens or what each layer was responsible for
+- The `$themes.json` group name (`Themes`) was mismatched with the `build.js` filter (`group === 'Themes'`), which silently produced no themed output
+
+---
+
+## Decision
+
+Rename and restructure the token layers around semantic responsibility rather than build order:
+
+```
+layer1/ → brand/        (primitives, brand-owned)
+layer2/ → mode/         (semantic, shared)
+layer3/ → component/    (component slots, shared)
+```
+
+Introduce a **palette / roles split** inside each brand's `colors.json`:
+
+- **`palette`** holds raw color scales (50–900). It is private to the brand layer.
+- **`roles`** holds named semantic steps (`lightest → light → medium → strong → bold → dark`) that map palette shades to intent. These are the values all upstream layers consume.
+
+Mode files (`mode/light.json`, `mode/dark.json`) reference `roles.*` tokens, never `palette.*` tokens directly.
+
+---
+
+## Color Role Inventory
+
+Each brand defines the following roles:
+
+| Role        | Brand-specific? | Source palette    |
+|-------------|-----------------|-------------------|
+| `support`   | No              | Hardcoded black/white/transparent |
+| `neutral`   | No              | `grey`            |
+| `primary`   | **Yes**         | `indigo`          |
+| `secondary` | **Yes**         | `tangerine`       |
+| `info`      | No              | `blue`            |
+| `success`   | No              | `green`           |
+| `warning`   | No              | `yellow`          |
+| `danger`    | No              | `red`             |
+| `highlight` | No              | `purple`          |
+
+Only `primary` and `secondary` differ between brands. All other roles resolve to the same hex values regardless of which brand is active.
+
+---
+
+## Consequences
+
+**Positive:**
+
+- Adding a new brand requires changes only in `brand/brandX/colors.json`. No mode or component tokens need to be updated.
+- The step names (`lightest → dark`) communicate relative luminance without tying tokens to a specific palette shade, making them stable as palettes evolve.
+- The `build.js` group mismatch (`Themes` vs `Modes`) was caught and fixed as part of this work, restoring correct themed CSS output.
+- The architecture is self-documenting: a contributor looking at a mode token immediately knows it references a role, and a contributor looking at a role immediately knows which palette family backs it.
+
+**Negative / Trade-offs:**
+
+- Adding an additional indirection layer (palette → roles → semantic) means resolving a final CSS value requires following two hops instead of one.
+- The palette shades used in the mode files before this change were granular (50, 100, 200, 300 ...). The roles layer collapses these to 6 steps. Some precision is intentionally lost — hover/active state distinctions that were previously encoded as adjacent palette shades now both resolve to the same role step. These interactions may need to be revisited if visual fidelity requires more granularity.
+- The `mode/` files still hardcode `brandA` as the source in `$themes.json`. Multi-brand mode switching (e.g., brandB + dark mode) requires a follow-up theme configuration entry.
+
+---
+
+## Alternatives Considered
+
+**Keep palette references in mode files, swap palettes per brand**
+Rejected. Requires maintaining a full copy of every mode file per brand, or complex conditional logic in the build script.
+
+**Single shared palette with CSS overrides at the brand level**
+Rejected. Conflates the brand color system with CSS specificity concerns and doesn't model cleanly in Tokens Studio.
diff --git a/design-tokens/tokens/$metadata.json b/design-tokens/tokens/$metadata.json
index c77679810..3f1f9ee79 100644
--- a/design-tokens/tokens/$metadata.json
+++ b/design-tokens/tokens/$metadata.json
@@ -1,12 +1,13 @@
 {
   "tokenSetOrder": [
-    "layer1/base",
-    "layer1/colors",
-    "layer2/base",
-    "layer2/light",
-    "layer2/dark",
-    "layer3/base",
-    "layer3/light",
-    "layer3/dark"
+    "brand/brandA/base",
+    "brand/brandA/colors",
+    "brand/brandB/base",
+    "brand/brandB/colors",
+    "mode/light",
+    "mode/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 bca4185e1..bb24a6380 100644
--- a/design-tokens/tokens/$themes.json
+++ b/design-tokens/tokens/$themes.json
@@ -1,389 +1,779 @@
 [
+  {
+    "id": "1fdbcfcbe1f38f1b78dfb8965f19047a759a08a3",
+    "name": "brandA",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "brand/brandA/base": "enabled",
+      "brand/brandA/colors": "enabled"
+    },
+    "$figmaCollectionId": "VariableCollectionId:2:1075",
+    "$figmaModeId": "2:12",
+    "$figmaVariableReferences": {
+      "echoes.dimension.space.0": "099b364780a758d1a727607fc1e64f5db2ed4e9d",
+      "echoes.dimension.space.25": "cf9f8126d01e8c90e0ed209dcd9f90c830dc1723",
+      "echoes.dimension.space.50": "325e14a73b169eb8d166acfce7a5eb9777c81dc3",
+      "echoes.dimension.space.75": "42698f0e7e1395519de999b8e7ca6dcaf81d7e7c",
+      "echoes.dimension.space.100": "3584679ffd1a198a534a2cd39013c3aed2117ca9",
+      "echoes.dimension.space.150": "9d4f06f20f49f6dd11155117e19469879f1c1dfc",
+      "echoes.dimension.space.200": "f834fd00c6c483e24cb05f552fb014de55d571e5",
+      "echoes.dimension.space.250": "b13d816c9270e73a26c66344c1e9e7fd57dcc148",
+      "echoes.dimension.space.300": "59a63698d5b913f21a3ed7fee98941dd73729308",
+      "echoes.dimension.space.400": "3017ad5cd3f4cff4f58857a81d8588c7726823c3",
+      "echoes.dimension.space.500": "ae2d806688bc08a11d069e7a80fab7ab1c3017f2",
+      "echoes.dimension.space.600": "69c0810f453c28637023480ca325a1371020c8df",
+      "echoes.dimension.space.800": "1065ffa3516caf97413109237b94e1dca5d223a4",
+      "echoes.dimension.width.0": "f28c5fdc6843672f6cadd7cff03ec52d622f4a7b",
+      "echoes.dimension.width.25": "a384cca55cfa33079754e15899ed7c4cdbef3696",
+      "echoes.dimension.width.50": "ae05016f05ebcf62fd5587ba88281d2d13dd40fe",
+      "echoes.dimension.width.75": "6b1bcee818bb6b9a64f950297e78b443f1552894",
+      "echoes.dimension.width.100": "b530b3c339f82a449e61d367dc44bd3ab44973d5",
+      "echoes.dimension.width.150": "83db37a2db3f6ec608664e0de595c28715f315cb",
+      "echoes.dimension.width.200": "f67633055ffe0b933276853e0392f2010ec9d61a",
+      "echoes.dimension.width.250": "af15a56164d327c277de1efd373d7af3e2fd8a0d",
+      "echoes.dimension.width.300": "0037f0caa80bdc423cb9b6b4838724b192c273b3",
+      "echoes.dimension.width.400": "48fb9d63dd06b07642e5ce1b756716164805757d",
+      "echoes.dimension.width.450": "a285098e2d3edc284d2beb00cbf9a57c4430d5ae",
+      "echoes.dimension.width.500": "d739ad6b921d8c93a07e6e3a5a31ea75839f4eee",
+      "echoes.dimension.width.600": "b092913fde4829ba56daf43c498b7da0601ecc0c",
+      "echoes.dimension.width.700": "654b00d01d2938ba74df29474117f209e454c820",
+      "echoes.dimension.width.800": "8e1c50ad7271e0cce5d4de6daeb5e2b31834c449",
+      "echoes.dimension.width.5000": "1156ca439b7b5f51b827beb6a59f2339d57d0d35",
+      "echoes.dimension.height.100": "99d58f3b2c444308b78c40ad811fc5da89ac3a39",
+      "echoes.dimension.height.150": "338b8eaa600d2c156af67d43040f9d78ec294221",
+      "echoes.dimension.height.200": "0b5424838433dda9103b6a751adf2dca9b08901a",
+      "echoes.dimension.height.400": "883e7713244955658758b1eba6cb3c7aa4904fdb",
+      "echoes.dimension.height.500": "a76e63b6c5d857cab2bc2e0a07554d521592d80b",
+      "echoes.dimension.height.600": "4c6b667e397f734641c19e4175af7f8f3c5c2a8f",
+      "echoes.dimension.height.800": "c17a7054dd55f816821243c0275001998b7df0d7",
+      "echoes.dimension.height.900": "4292dd9203e6f1c392558599610c35c9fc618131",
+      "echoes.dimension.height.1000": "b554f1d66dc5b1865370ea8dcf554fc71fc470bb",
+      "echoes.dimension.negative.spacing.100": "be332e7259907bf63fb3c54f7363336029825440",
+      "echoes.dimension.negative.spacing.600": "1d35a1d2aeb5dba0f7ee53b6bbeecb4bde7767db",
+      "echoes.dimension.negative.spacing.800": "b6be45a93cf11b14a50aad2dba1f27041ce66e1e",
+      "echoes.borderRadius.100": "3dbfde7529dd8c45c9ed59f6999c030d733e0edb",
+      "echoes.borderRadius.200": "93720c323e99ffdf11dbb80778e50007ad12eb11",
+      "echoes.borderRadius.400": "18397bf7539ccc2444d677eb227ee2363fb4c6c8",
+      "echoes.borderRadius.none": "49abf5dd0f8a6de060e36fc2d252a4b6000c5694",
+      "echoes.borderRadius.full": "7c54275f0f33a05e7292e0fe2bf989cc86945559",
+      "echoes.fontFamily.mono": "67971ce432967acd1b5ec685aa79536eef03eadd",
+      "echoes.fontFamily.sans": "090137c369faa8530ad34323a40d6f04f63b969c",
+      "echoes.lineHeight.10": "ae108da45a5852a2ac04a82f91e3f4cc8076bd02",
+      "echoes.lineHeight.20": "3c94c53d62b6e60e748757b61d38f78b3e63b1f0",
+      "echoes.lineHeight.30": "f9cb5a567bf34217127e1654680dc8e312a8fe9d",
+      "echoes.lineHeight.40": "761c8d14489928f99b2e18b5493201c7a63d263c",
+      "echoes.lineHeight.50": "90b569698b6f6920657e4c0b4b378c48c651bf4d",
+      "echoes.lineHeight.60": "413bc76b1576f5d17291a8c815eeeff38e78de6d",
+      "echoes.letterSpacing.default": "f6ac403d913dd3a6a1743103549dfb463a240b7b",
+      "echoes.fontWeight.bold": "8ed67f70de1c6b9e4e9eaaec3f426ff1abaf4ecd",
+      "echoes.fontWeight.semi-bold": "ef76fb0dab2b93fddad7de2dc51ce58fe6b9513b",
+      "echoes.fontWeight.regular": "7a45d30d50ab89398a4572e6c89e804a44148693",
+      "echoes.fontWeight.italic": "74b81f2a6a28cae9905c46e9de85940e6d6e28b2",
+      "echoes.fontWeight.medium": "2ebc928cefb4f2e31b9b0e28f0147614f90736cc",
+      "echoes.fontSize.10": "c3d19e9b1303ab2e0251fbbdd447612b176ea803",
+      "echoes.fontSize.20": "fcda38563c9f52108e075800cbc0721954de9709",
+      "echoes.fontSize.30": "9a96c9a2126d7dcd155c9f7e321148421bcc398a",
+      "echoes.fontSize.40": "8dd29d8856376ffa3bea7fc3a974dda27cb1e0f5",
+      "echoes.fontSize.50": "7daacc9d2ae4876a44f501767a951308fbf0e881",
+      "echoes.fontSize.60": "712b5911675b583787d39e06c1a93c5867f911c4",
+      "echoes.borderWidth.default": "66c67848dd7990fa493d8697908911a232a02d7f",
+      "echoes.color.palette.grey.25": "d4dd29f6a01951073437d443ba3329d886c021b0",
+      "echoes.color.palette.grey.40": "6b1cbe17b99b27d68fc95839794c5e2f2985893e",
+      "echoes.color.palette.grey.50": "392070da135c1e13ed760845e26dcfde80564779",
+      "echoes.color.palette.grey.100": "d070dd803927db942434bfd5ffc2fcb8e5b2009c",
+      "echoes.color.palette.grey.200": "d58337f18bc27d90a928af8c48c120369916a878",
+      "echoes.color.palette.grey.300": "22893dbb01ac2319ad31182bd06c8fc94df67761",
+      "echoes.color.palette.grey.400": "24ad69644f6e373a5bf1d0f4d173edbdcbbdf598",
+      "echoes.color.palette.grey.500": "644f64c52877ddd7449517bde4e965ca159834e7",
+      "echoes.color.palette.grey.600": "d02e59d9b7b97b0c8108748eff3047418fea08cb",
+      "echoes.color.palette.grey.700": "a0fac423dfab2fb9bcc911ca5741274ad4540a71",
+      "echoes.color.palette.grey.800": "32574b7da7dc734a43894d7683a7622dc14c3c53",
+      "echoes.color.palette.grey.900": "1d952f270f3af71ecd6f610d8bea07ae767329b4",
+      "echoes.color.palette.indigo.25": "ae63593cdf8670fb800b3600382d072cb3cf9fea",
+      "echoes.color.palette.indigo.50": "0a1d82d41cadaad0d912c2aae4c9996682f0585f",
+      "echoes.color.palette.indigo.100": "b0879fae918464f49dc99e19e31f8abc9cbef1f1",
+      "echoes.color.palette.indigo.200": "0568488bcae9fd32655c855704ce77e56db74794",
+      "echoes.color.palette.indigo.300": "a7312b08f37107a59b838e18e121502206ad94c3",
+      "echoes.color.palette.indigo.400": "7f416eb39c395c70cd6fbfd1402114eb96468938",
+      "echoes.color.palette.indigo.500": "52c7948331df63484ea8dfb7060580492e2ccb06",
+      "echoes.color.palette.indigo.600": "f4e1c9a243dc014472769d2d8f0dfe08461d604d",
+      "echoes.color.palette.indigo.700": "42e308e9f3fbc32d0870cad9efb69d9151d1c224",
+      "echoes.color.palette.indigo.800": "ff63e9fe1a68060362987bdbb52c53571402eac6",
+      "echoes.color.palette.indigo.900": "a396bd770307913b2feb2659945276c42fa3de9c",
+      "echoes.color.roles.support.black": "482d6603420c5247347a6e3dfa7131bddc49d863",
+      "echoes.color.roles.support.white": "ff35fd455e7632c2fee1fd9cfb5d7b9015fb8a74",
+      "echoes.color.roles.support.transparent": "392d6b5320e61efb3265ef94c8f215ac4fe4764d",
+      "echoes.color.palette.tangerine.25": "52f302ea4ba6f26b5b038b3137086497eb921262",
+      "echoes.color.palette.tangerine.50": "f6998ceb981c581387cc36896def3a50a7b44d11",
+      "echoes.color.palette.tangerine.100": "11abc12ed79fdd2f5da17583c7c41ef9b89b51eb",
+      "echoes.color.palette.tangerine.200": "9c79419f37449eddffa0bbb4daff975832cbf7cf",
+      "echoes.color.palette.tangerine.300": "daa64381ee27a37e630c64814b31f26740daf980",
+      "echoes.color.palette.tangerine.400": "2cb96fdb1302afffd73c84a5f3adbc4a2e9711a8",
+      "echoes.color.palette.tangerine.500": "6465707889a67af4b0fee4e6577625d8798363ee",
+      "echoes.color.palette.tangerine.600": "8dd37e2d4c90728c551c101999faf59eb98a2c1b",
+      "echoes.color.palette.tangerine.700": "5bd2d7456a5f043972142656b7aab5c5af5d55bf",
+      "echoes.color.palette.tangerine.800": "c823779489d7081d502b58626c6527021adaaddd",
+      "echoes.color.palette.tangerine.900": "1c5196821cbeb5b9dbaf6b9739443cc98e45233e",
+      "echoes.color.palette.green.50": "b2c18522167cb46ddea6968d22e23be3e449dcab",
+      "echoes.color.palette.green.100": "7bff2364d5c9a6d4b4b723c9b07e3f5ecd445b52",
+      "echoes.color.palette.green.200": "0b22707f99597d52a6f9ea88581dfc2412010d9a",
+      "echoes.color.palette.green.300": "3eecbff57ae48470edb3f62a8fc4fceba674bb68",
+      "echoes.color.palette.green.400": "3ae5c3d3b1804d437c2bb405fa80e11e2fcf116e",
+      "echoes.color.palette.green.500": "a8a93dc217c56ac526a1636666fc861f43ebd670",
+      "echoes.color.palette.green.600": "b8e4701ef5c68a666252852dd38fd2fdc795d8b0",
+      "echoes.color.palette.green.700": "6c48d25505a4d3ba660255bfea8d5a90237c40c9",
+      "echoes.color.palette.green.800": "d0c3794b4301c72fd1531a03af42608e5831098b",
+      "echoes.color.palette.green.900": "d5b8c358cb38c76a01e04af320193228d15981c3",
+      "echoes.color.palette.yellow.50": "68b9aa8a97842081e7364039a85db6d72c1f1578",
+      "echoes.color.palette.yellow.100": "4710668a8a01ce5529e6196929cbf9c725566b64",
+      "echoes.color.palette.yellow.200": "178337d849f754be51ac85e9edabd0a90431d5d8",
+      "echoes.color.palette.yellow.300": "97e85e9ff71650051b9cd47b93f971f8dc41dced",
+      "echoes.color.palette.yellow.400": "977ae0802cace2fb61dae26edda1609f9716e404",
+      "echoes.color.palette.yellow.500": "6f86fe6515bf80e10df81f9da41561b336b42cfe",
+      "echoes.color.palette.yellow.600": "f83f488f409024d94a77cee0fa0a2c9b0c4e2049",
+      "echoes.color.palette.yellow.700": "d24e55c0136ed882e06452139809c394f3bd75f6",
+      "echoes.color.palette.yellow.800": "1ee34a9a75388be724fe6f82991548c7b2b35b4b",
+      "echoes.color.palette.yellow.900": "d0b83cd775331883c0adde2d90516fa21623d396",
+      "echoes.color.palette.orange.50": "856f943dda637e38cd41106ab3d819c3088e0dd0",
+      "echoes.color.palette.orange.75": "64c1d4795b4bc4c497f4e236bf6c36fce8c2eccb",
+      "echoes.color.palette.orange.100": "8f0079da313b219cae1bfea83cd34c1ff4319486",
+      "echoes.color.palette.orange.200": "8b3be251ddc448ca2a3e70182e1cf146d8aba031",
+      "echoes.color.palette.orange.300": "ffc0e0c38200497e3ce2fa69822d314e7c21cf34",
+      "echoes.color.palette.orange.400": "4e9cf8a7bfa25dcfcb9330e382d5ebec65da57c1",
+      "echoes.color.palette.orange.500": "9a8e1f7baf107a5ae9fe3b380d01bfc416a5d1e7",
+      "echoes.color.palette.orange.600": "c921088372075de9008b4b4deb2c142880ee97de",
+      "echoes.color.palette.orange.700": "a148dee537fb44bbcb31654d1c848427911480f9",
+      "echoes.color.palette.orange.800": "3589fa59f38b937de55e2d141d0698f9329d4c96",
+      "echoes.color.palette.orange.900": "50f0fa446cb98ded41572f8a3e4a1e05f3d20897",
+      "echoes.color.palette.red.50": "98e39fd140e74639bed0705b60aba0328e1db3da",
+      "echoes.color.palette.red.100": "040fae97cb506b33409ae194139909967bcfac4a",
+      "echoes.color.palette.red.200": "9591a732107e7f8173fdede29fbbc3a896d95653",
+      "echoes.color.palette.red.300": "6399aa75a2dc9c6a05adb09c31767457dc362527",
+      "echoes.color.palette.red.400": "d664a55a86db605bc561c2c93ad05884a9b71054",
+      "echoes.color.palette.red.500": "7eebdb0f6e49930b730d8b0a29b22ab491bf05c1",
+      "echoes.color.palette.red.600": "e05e7b91a0932af1868bb85c12f9402dd0efe580",
+      "echoes.color.palette.red.700": "eec2f92d2709c61802e19ee938c41108285ec00b",
+      "echoes.color.palette.red.800": "19845dd7b36280f84da00db51bfcf33e29b80d8b",
+      "echoes.color.palette.red.900": "40d589836fae34588f50efc019d83b9b42073159",
+      "echoes.color.palette.blue.50": "6f9fa87d567d8b897c440e337edb215fb0436769",
+      "echoes.color.palette.blue.100": "f4cc1be3fc4d741e54fa0c7d96fcfc54bde3d4d0",
+      "echoes.color.palette.blue.200": "5b8670a1077a6b06f1325375a459a8b9e293c0b9",
+      "echoes.color.palette.blue.300": "57ba8deebbce18d51ecbef61c9c6cde7c982e7c9",
+      "echoes.color.palette.blue.400": "e172313d356bec1bdd8855019c1fdba5fe9f584c",
+      "echoes.color.palette.blue.500": "4ea5898b7005dcb39fb54427a706e4c2bd93b3d4",
+      "echoes.color.palette.blue.600": "ec018465f7133294a064823001548890f00245f5",
+      "echoes.color.palette.blue.700": "8ad35cfa5fe0ff81e243398d0df65f23d6b3b983",
+      "echoes.color.palette.blue.800": "66621d2d51adba200eaf7df176a7278b7d54ce65",
+      "echoes.color.palette.blue.900": "95fac081d70b75c366501e534b28505b42231f55",
+      "echoes.color.palette.purple.25": "da48be2c99c890ccca4fa56d0e1c782156497568",
+      "echoes.color.palette.purple.50": "906360162a50b420681c167c850befc365371c39",
+      "echoes.color.palette.purple.100": "8b69dc426e7f5129335a43af1b4e522b28a48eb0",
+      "echoes.color.palette.purple.200": "da9a812b23dfab164faf25cc9a62ed3e0f7a0cb6",
+      "echoes.color.palette.purple.300": "db9ef01ead6e3a6bc58c3ca1d4ca43ba5f717533",
+      "echoes.color.palette.purple.400": "cce83b96c487368bbe94ba8b2bc1e733dbe5abcc",
+      "echoes.color.palette.purple.500": "831b99baa6a4b8c081d8cd866ceffb7ea84e54fa",
+      "echoes.color.palette.purple.600": "18f47c42af821ca5ebaa0ee9e994574b7364461d",
+      "echoes.color.palette.purple.700": "e32a0e9e6282740ca06112915e7ffe5d73f2f40f",
+      "echoes.color.palette.purple.800": "ac19002e9cd2ba428bc2f2d62b9397a7ffaaab18",
+      "echoes.color.palette.purple.900": "b2e21bb20b47a91dfc617a004eb376b6d3ceea7c"
+    },
+    "group": "Brand"
+  },
+  {
+    "id": "5daf8fb72e0ae49779c90632f27512296837eef9",
+    "name": "BrandB",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "brand/brandB/base": "enabled",
+      "brand/brandB/colors": "enabled"
+    },
+    "$figmaCollectionId": "VariableCollectionId:2:1075",
+    "$figmaModeId": "2:13",
+    "$figmaVariableReferences": {
+      "echoes.dimension.space.0": "099b364780a758d1a727607fc1e64f5db2ed4e9d",
+      "echoes.dimension.space.25": "cf9f8126d01e8c90e0ed209dcd9f90c830dc1723",
+      "echoes.dimension.space.50": "325e14a73b169eb8d166acfce7a5eb9777c81dc3",
+      "echoes.dimension.space.75": "42698f0e7e1395519de999b8e7ca6dcaf81d7e7c",
+      "echoes.dimension.space.100": "3584679ffd1a198a534a2cd39013c3aed2117ca9",
+      "echoes.dimension.space.150": "9d4f06f20f49f6dd11155117e19469879f1c1dfc",
+      "echoes.dimension.space.200": "f834fd00c6c483e24cb05f552fb014de55d571e5",
+      "echoes.dimension.space.250": "b13d816c9270e73a26c66344c1e9e7fd57dcc148",
+      "echoes.dimension.space.300": "59a63698d5b913f21a3ed7fee98941dd73729308",
+      "echoes.dimension.space.400": "3017ad5cd3f4cff4f58857a81d8588c7726823c3",
+      "echoes.dimension.space.500": "ae2d806688bc08a11d069e7a80fab7ab1c3017f2",
+      "echoes.dimension.space.600": "69c0810f453c28637023480ca325a1371020c8df",
+      "echoes.dimension.space.800": "1065ffa3516caf97413109237b94e1dca5d223a4",
+      "echoes.dimension.width.0": "f28c5fdc6843672f6cadd7cff03ec52d622f4a7b",
+      "echoes.dimension.width.25": "a384cca55cfa33079754e15899ed7c4cdbef3696",
+      "echoes.dimension.width.50": "ae05016f05ebcf62fd5587ba88281d2d13dd40fe",
+      "echoes.dimension.width.75": "6b1bcee818bb6b9a64f950297e78b443f1552894",
+      "echoes.dimension.width.100": "b530b3c339f82a449e61d367dc44bd3ab44973d5",
+      "echoes.dimension.width.150": "83db37a2db3f6ec608664e0de595c28715f315cb",
+      "echoes.dimension.width.200": "f67633055ffe0b933276853e0392f2010ec9d61a",
+      "echoes.dimension.width.250": "af15a56164d327c277de1efd373d7af3e2fd8a0d",
+      "echoes.dimension.width.300": "0037f0caa80bdc423cb9b6b4838724b192c273b3",
+      "echoes.dimension.width.400": "48fb9d63dd06b07642e5ce1b756716164805757d",
+      "echoes.dimension.width.450": "a285098e2d3edc284d2beb00cbf9a57c4430d5ae",
+      "echoes.dimension.width.500": "d739ad6b921d8c93a07e6e3a5a31ea75839f4eee",
+      "echoes.dimension.width.600": "b092913fde4829ba56daf43c498b7da0601ecc0c",
+      "echoes.dimension.width.700": "654b00d01d2938ba74df29474117f209e454c820",
+      "echoes.dimension.width.800": "8e1c50ad7271e0cce5d4de6daeb5e2b31834c449",
+      "echoes.dimension.width.5000": "1156ca439b7b5f51b827beb6a59f2339d57d0d35",
+      "echoes.dimension.height.100": "99d58f3b2c444308b78c40ad811fc5da89ac3a39",
+      "echoes.dimension.height.150": "338b8eaa600d2c156af67d43040f9d78ec294221",
+      "echoes.dimension.height.200": "0b5424838433dda9103b6a751adf2dca9b08901a",
+      "echoes.dimension.height.400": "883e7713244955658758b1eba6cb3c7aa4904fdb",
+      "echoes.dimension.height.500": "a76e63b6c5d857cab2bc2e0a07554d521592d80b",
+      "echoes.dimension.height.600": "4c6b667e397f734641c19e4175af7f8f3c5c2a8f",
+      "echoes.dimension.height.800": "c17a7054dd55f816821243c0275001998b7df0d7",
+      "echoes.dimension.height.900": "4292dd9203e6f1c392558599610c35c9fc618131",
+      "echoes.dimension.height.1000": "b554f1d66dc5b1865370ea8dcf554fc71fc470bb",
+      "echoes.dimension.negative.spacing.100": "be332e7259907bf63fb3c54f7363336029825440",
+      "echoes.dimension.negative.spacing.600": "1d35a1d2aeb5dba0f7ee53b6bbeecb4bde7767db",
+      "echoes.dimension.negative.spacing.800": "b6be45a93cf11b14a50aad2dba1f27041ce66e1e",
+      "echoes.borderRadius.100": "3dbfde7529dd8c45c9ed59f6999c030d733e0edb",
+      "echoes.borderRadius.200": "93720c323e99ffdf11dbb80778e50007ad12eb11",
+      "echoes.borderRadius.400": "18397bf7539ccc2444d677eb227ee2363fb4c6c8",
+      "echoes.borderRadius.none": "49abf5dd0f8a6de060e36fc2d252a4b6000c5694",
+      "echoes.borderRadius.full": "7c54275f0f33a05e7292e0fe2bf989cc86945559",
+      "echoes.fontFamily.mono": "67971ce432967acd1b5ec685aa79536eef03eadd",
+      "echoes.fontFamily.sans": "090137c369faa8530ad34323a40d6f04f63b969c",
+      "echoes.lineHeight.10": "ae108da45a5852a2ac04a82f91e3f4cc8076bd02",
+      "echoes.lineHeight.20": "3c94c53d62b6e60e748757b61d38f78b3e63b1f0",
+      "echoes.lineHeight.30": "f9cb5a567bf34217127e1654680dc8e312a8fe9d",
+      "echoes.lineHeight.40": "761c8d14489928f99b2e18b5493201c7a63d263c",
+      "echoes.lineHeight.50": "90b569698b6f6920657e4c0b4b378c48c651bf4d",
+      "echoes.lineHeight.60": "413bc76b1576f5d17291a8c815eeeff38e78de6d",
+      "echoes.letterSpacing.default": "f6ac403d913dd3a6a1743103549dfb463a240b7b",
+      "echoes.fontWeight.bold": "8ed67f70de1c6b9e4e9eaaec3f426ff1abaf4ecd",
+      "echoes.fontWeight.semi-bold": "ef76fb0dab2b93fddad7de2dc51ce58fe6b9513b",
+      "echoes.fontWeight.regular": "7a45d30d50ab89398a4572e6c89e804a44148693",
+      "echoes.fontWeight.italic": "74b81f2a6a28cae9905c46e9de85940e6d6e28b2",
+      "echoes.fontWeight.medium": "2ebc928cefb4f2e31b9b0e28f0147614f90736cc",
+      "echoes.fontSize.10": "c3d19e9b1303ab2e0251fbbdd447612b176ea803",
+      "echoes.fontSize.20": "fcda38563c9f52108e075800cbc0721954de9709",
+      "echoes.fontSize.30": "9a96c9a2126d7dcd155c9f7e321148421bcc398a",
+      "echoes.fontSize.40": "8dd29d8856376ffa3bea7fc3a974dda27cb1e0f5",
+      "echoes.fontSize.50": "7daacc9d2ae4876a44f501767a951308fbf0e881",
+      "echoes.fontSize.60": "712b5911675b583787d39e06c1a93c5867f911c4",
+      "echoes.borderWidth.default": "66c67848dd7990fa493d8697908911a232a02d7f",
+      "echoes.color.palette.grey.25": "d4dd29f6a01951073437d443ba3329d886c021b0",
+      "echoes.color.palette.grey.40": "6b1cbe17b99b27d68fc95839794c5e2f2985893e",
+      "echoes.color.palette.grey.50": "392070da135c1e13ed760845e26dcfde80564779",
+      "echoes.color.palette.grey.100": "d070dd803927db942434bfd5ffc2fcb8e5b2009c",
+      "echoes.color.palette.grey.200": "d58337f18bc27d90a928af8c48c120369916a878",
+      "echoes.color.palette.grey.300": "22893dbb01ac2319ad31182bd06c8fc94df67761",
+      "echoes.color.palette.grey.400": "24ad69644f6e373a5bf1d0f4d173edbdcbbdf598",
+      "echoes.color.palette.grey.500": "644f64c52877ddd7449517bde4e965ca159834e7",
+      "echoes.color.palette.grey.600": "d02e59d9b7b97b0c8108748eff3047418fea08cb",
+      "echoes.color.palette.grey.700": "a0fac423dfab2fb9bcc911ca5741274ad4540a71",
+      "echoes.color.palette.grey.800": "32574b7da7dc734a43894d7683a7622dc14c3c53",
+      "echoes.color.palette.grey.900": "1d952f270f3af71ecd6f610d8bea07ae767329b4",
+      "echoes.color.palette.indigo.25": "ae63593cdf8670fb800b3600382d072cb3cf9fea",
+      "echoes.color.palette.indigo.50": "0a1d82d41cadaad0d912c2aae4c9996682f0585f",
+      "echoes.color.palette.indigo.100": "b0879fae918464f49dc99e19e31f8abc9cbef1f1",
+      "echoes.color.palette.indigo.200": "0568488bcae9fd32655c855704ce77e56db74794",
+      "echoes.color.palette.indigo.300": "a7312b08f37107a59b838e18e121502206ad94c3",
+      "echoes.color.palette.indigo.400": "7f416eb39c395c70cd6fbfd1402114eb96468938",
+      "echoes.color.palette.indigo.500": "52c7948331df63484ea8dfb7060580492e2ccb06",
+      "echoes.color.palette.indigo.600": "f4e1c9a243dc014472769d2d8f0dfe08461d604d",
+      "echoes.color.palette.indigo.700": "42e308e9f3fbc32d0870cad9efb69d9151d1c224",
+      "echoes.color.palette.indigo.800": "ff63e9fe1a68060362987bdbb52c53571402eac6",
+      "echoes.color.palette.indigo.900": "a396bd770307913b2feb2659945276c42fa3de9c",
+      "echoes.color.roles.support.black": "482d6603420c5247347a6e3dfa7131bddc49d863",
+      "echoes.color.roles.support.white": "ff35fd455e7632c2fee1fd9cfb5d7b9015fb8a74",
+      "echoes.color.roles.support.transparent": "392d6b5320e61efb3265ef94c8f215ac4fe4764d",
+      "echoes.color.palette.tangerine.25": "52f302ea4ba6f26b5b038b3137086497eb921262",
+      "echoes.color.palette.tangerine.50": "f6998ceb981c581387cc36896def3a50a7b44d11",
+      "echoes.color.palette.tangerine.100": "11abc12ed79fdd2f5da17583c7c41ef9b89b51eb",
+      "echoes.color.palette.tangerine.200": "9c79419f37449eddffa0bbb4daff975832cbf7cf",
+      "echoes.color.palette.tangerine.300": "daa64381ee27a37e630c64814b31f26740daf980",
+      "echoes.color.palette.tangerine.400": "2cb96fdb1302afffd73c84a5f3adbc4a2e9711a8",
+      "echoes.color.palette.tangerine.500": "6465707889a67af4b0fee4e6577625d8798363ee",
+      "echoes.color.palette.tangerine.600": "8dd37e2d4c90728c551c101999faf59eb98a2c1b",
+      "echoes.color.palette.tangerine.700": "5bd2d7456a5f043972142656b7aab5c5af5d55bf",
+      "echoes.color.palette.tangerine.800": "c823779489d7081d502b58626c6527021adaaddd",
+      "echoes.color.palette.tangerine.900": "1c5196821cbeb5b9dbaf6b9739443cc98e45233e",
+      "echoes.color.palette.green.50": "b2c18522167cb46ddea6968d22e23be3e449dcab",
+      "echoes.color.palette.green.100": "7bff2364d5c9a6d4b4b723c9b07e3f5ecd445b52",
+      "echoes.color.palette.green.200": "0b22707f99597d52a6f9ea88581dfc2412010d9a",
+      "echoes.color.palette.green.300": "3eecbff57ae48470edb3f62a8fc4fceba674bb68",
+      "echoes.color.palette.green.400": "3ae5c3d3b1804d437c2bb405fa80e11e2fcf116e",
+      "echoes.color.palette.green.500": "a8a93dc217c56ac526a1636666fc861f43ebd670",
+      "echoes.color.palette.green.600": "b8e4701ef5c68a666252852dd38fd2fdc795d8b0",
+      "echoes.color.palette.green.700": "6c48d25505a4d3ba660255bfea8d5a90237c40c9",
+      "echoes.color.palette.green.800": "d0c3794b4301c72fd1531a03af42608e5831098b",
+      "echoes.color.palette.green.900": "d5b8c358cb38c76a01e04af320193228d15981c3",
+      "echoes.color.palette.yellow.50": "68b9aa8a97842081e7364039a85db6d72c1f1578",
+      "echoes.color.palette.yellow.100": "4710668a8a01ce5529e6196929cbf9c725566b64",
+      "echoes.color.palette.yellow.200": "178337d849f754be51ac85e9edabd0a90431d5d8",
+      "echoes.color.palette.yellow.300": "97e85e9ff71650051b9cd47b93f971f8dc41dced",
+      "echoes.color.palette.yellow.400": "977ae0802cace2fb61dae26edda1609f9716e404",
+      "echoes.color.palette.yellow.500": "6f86fe6515bf80e10df81f9da41561b336b42cfe",
+      "echoes.color.palette.yellow.600": "f83f488f409024d94a77cee0fa0a2c9b0c4e2049",
+      "echoes.color.palette.yellow.700": "d24e55c0136ed882e06452139809c394f3bd75f6",
+      "echoes.color.palette.yellow.800": "1ee34a9a75388be724fe6f82991548c7b2b35b4b",
+      "echoes.color.palette.yellow.900": "d0b83cd775331883c0adde2d90516fa21623d396",
+      "echoes.color.palette.orange.50": "856f943dda637e38cd41106ab3d819c3088e0dd0",
+      "echoes.color.palette.orange.75": "64c1d4795b4bc4c497f4e236bf6c36fce8c2eccb",
+      "echoes.color.palette.orange.100": "8f0079da313b219cae1bfea83cd34c1ff4319486",
+      "echoes.color.palette.orange.200": "8b3be251ddc448ca2a3e70182e1cf146d8aba031",
+      "echoes.color.palette.orange.300": "ffc0e0c38200497e3ce2fa69822d314e7c21cf34",
+      "echoes.color.palette.orange.400": "4e9cf8a7bfa25dcfcb9330e382d5ebec65da57c1",
+      "echoes.color.palette.orange.500": "9a8e1f7baf107a5ae9fe3b380d01bfc416a5d1e7",
+      "echoes.color.palette.orange.600": "c921088372075de9008b4b4deb2c142880ee97de",
+      "echoes.color.palette.orange.700": "a148dee537fb44bbcb31654d1c848427911480f9",
+      "echoes.color.palette.orange.800": "3589fa59f38b937de55e2d141d0698f9329d4c96",
+      "echoes.color.palette.orange.900": "50f0fa446cb98ded41572f8a3e4a1e05f3d20897",
+      "echoes.color.palette.red.50": "98e39fd140e74639bed0705b60aba0328e1db3da",
+      "echoes.color.palette.red.100": "040fae97cb506b33409ae194139909967bcfac4a",
+      "echoes.color.palette.red.200": "9591a732107e7f8173fdede29fbbc3a896d95653",
+      "echoes.color.palette.red.300": "6399aa75a2dc9c6a05adb09c31767457dc362527",
+      "echoes.color.palette.red.400": "d664a55a86db605bc561c2c93ad05884a9b71054",
+      "echoes.color.palette.red.500": "7eebdb0f6e49930b730d8b0a29b22ab491bf05c1",
+      "echoes.color.palette.red.600": "e05e7b91a0932af1868bb85c12f9402dd0efe580",
+      "echoes.color.palette.red.700": "eec2f92d2709c61802e19ee938c41108285ec00b",
+      "echoes.color.palette.red.800": "19845dd7b36280f84da00db51bfcf33e29b80d8b",
+      "echoes.color.palette.red.900": "40d589836fae34588f50efc019d83b9b42073159",
+      "echoes.color.palette.blue.50": "6f9fa87d567d8b897c440e337edb215fb0436769",
+      "echoes.color.palette.blue.100": "f4cc1be3fc4d741e54fa0c7d96fcfc54bde3d4d0",
+      "echoes.color.palette.blue.200": "5b8670a1077a6b06f1325375a459a8b9e293c0b9",
+      "echoes.color.palette.blue.300": "57ba8deebbce18d51ecbef61c9c6cde7c982e7c9",
+      "echoes.color.palette.blue.400": "e172313d356bec1bdd8855019c1fdba5fe9f584c",
+      "echoes.color.palette.blue.500": "4ea5898b7005dcb39fb54427a706e4c2bd93b3d4",
+      "echoes.color.palette.blue.600": "ec018465f7133294a064823001548890f00245f5",
+      "echoes.color.palette.blue.700": "8ad35cfa5fe0ff81e243398d0df65f23d6b3b983",
+      "echoes.color.palette.blue.800": "66621d2d51adba200eaf7df176a7278b7d54ce65",
+      "echoes.color.palette.blue.900": "95fac081d70b75c366501e534b28505b42231f55",
+      "echoes.color.palette.purple.25": "da48be2c99c890ccca4fa56d0e1c782156497568",
+      "echoes.color.palette.purple.50": "906360162a50b420681c167c850befc365371c39",
+      "echoes.color.palette.purple.100": "8b69dc426e7f5129335a43af1b4e522b28a48eb0",
+      "echoes.color.palette.purple.200": "da9a812b23dfab164faf25cc9a62ed3e0f7a0cb6",
+      "echoes.color.palette.purple.300": "db9ef01ead6e3a6bc58c3ca1d4ca43ba5f717533",
+      "echoes.color.palette.purple.400": "cce83b96c487368bbe94ba8b2bc1e733dbe5abcc",
+      "echoes.color.palette.purple.500": "831b99baa6a4b8c081d8cd866ceffb7ea84e54fa",
+      "echoes.color.palette.purple.600": "18f47c42af821ca5ebaa0ee9e994574b7364461d",
+      "echoes.color.palette.purple.700": "e32a0e9e6282740ca06112915e7ffe5d73f2f40f",
+      "echoes.color.palette.purple.800": "ac19002e9cd2ba428bc2f2d62b9397a7ffaaab18",
+      "echoes.color.palette.purple.900": "b2e21bb20b47a91dfc617a004eb376b6d3ceea7c"
+    },
+    "group": "Brand"
+  },
   {
     "id": "facb569404341346562e3291080d3ebf2ec68957",
     "name": "light",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "layer1/colors": "source",
-      "layer2/light": "enabled",
-      "layer3/light": "enabled",
-      "layer1/base": "source"
+      "brand/brandA/colors": "source",
+      "brand/brandA/base": "source",
+      "mode/light": "enabled",
+      "component/light": "enabled"
     },
-    "$figmaCollectionId": "VariableCollectionId:210:28",
-    "$figmaModeId": "210:0",
+    "$figmaCollectionId": "VariableCollectionId:2:1073",
+    "$figmaModeId": "2:9",
     "$figmaVariableReferences": {
-      "echoes.color.background.neutral.subtle.default": "99ef247f30d09f29edd3b55734d289e54890bf5c",
-      "echoes.color.background.neutral.subtle.hover": "b7e2d9350ec651ee02517ad8b7edf0f54b0d904c",
-      "echoes.color.background.neutral.subtle.focus": "7b4c4f477fb4b9efdd2db16b60864d5f416c3665",
-      "echoes.color.background.neutral.subtle.active": "e6a98dfd12bb18d211d8773488eda25a9ff7fdcc",
-      "echoes.color.background.neutral.bolder.default": "feab1848d5c7c80bd00b7539471e830230a2d909",
-      "echoes.color.surface.default": "cf8aef0f2ff46b230993a6124844df16d712fec3",
-      "echoes.color.surface.hover": "faadccb935188afbc377a1633ce958f3bab65b26",
-      "echoes.color.surface.active": "699d37bfc540218c517c09f1b4cdf17be6027e58",
-      "echoes.color.surface.canvas.default": "66bea89bc3bf52991c2843d6044cb37255426d28",
-      "echoes.color.surface.inverse.default": "f70ef87f0e0bab08757875a103b70ec35159358f",
-      "echoes.color.surface.disabled": "5bc4fb50d5f8a7deff0eda47e8c0a77aea2ebe9d",
-      "echoes.color.background.accent.default": "1d3c07c608d84278588a1fb96e48323b61fea3fe",
-      "echoes.color.background.accent.hover": "8aae3ff710414aaa369e4ccf5b578aed0e88b975",
-      "echoes.color.background.accent.focus": "02927eed38e478efb1333105c83e1cc5774d5711",
-      "echoes.color.background.accent.active": "6067a6ffe69c41c2174803b4b402dc8314a749a9",
-      "echoes.color.background.accent.weak.default": "2b8a9ee81cf8a5468208c4c401820f90d5135530",
-      "echoes.color.background.accent.weak.hover": "99c215cfbf5606a09253a74e3fa1564197944428",
-      "echoes.color.background.accent.weak.focus": "d6f26e5dbcab9d26d5792c7f7c3528daed3a39e1",
-      "echoes.color.background.accent.weak.active": "a2ff2132bc081e53f53d05d2c836c5d20621266d",
-      "echoes.color.background.warning.default": "98b86f264e978c0b6558e6f2a3ba510b019fc7a0",
-      "echoes.color.background.warning.hover": "308537aec7e97bd86ec4f3035b23cd040ecd5311",
-      "echoes.color.background.warning.focus": "bd94faeaee90ef53870486249f6eb6359abd82db",
-      "echoes.color.background.warning.active": "e38689d5afd91eac5c60f1a4702e38dac39a0759",
-      "echoes.color.background.warning.weak.default": "71e7dfb2beb17d14fe181fb7e67a830758d039c1",
-      "echoes.color.background.warning.weak.hover": "60361748d6607bbe8b441dcf6c471412ab418b7b",
-      "echoes.color.background.warning.weak.focus": "cc0d7f0522cd5580c810158b00d559d7cbbb1663",
-      "echoes.color.background.warning.weak.active": "3a32085b6e9fe00212feb778f896dba7493b6c57",
-      "echoes.color.background.success.default": "56514d179a2f307b4030e0494f6f6c481344a451",
-      "echoes.color.background.success.hover": "8d99222f81daf1e63a3f70b45a4e0abc1d7e46ba",
-      "echoes.color.background.success.focus": "ba455391d5711cc36058d275de03420508d06aa5",
-      "echoes.color.background.success.active": "dfef9021b652d99e21ae9d91139133f6d17afdf1",
-      "echoes.color.background.success.weak.default": "19728fa4f832e2996c980da17015fb03ccfc892c",
-      "echoes.color.background.success.weak.hover": "b426b3e6464dcbcd08598917a9ef5db068a1ed71",
-      "echoes.color.background.success.weak.focus": "3123acec9ed6d43592cc433cf4555401b98c3e60",
-      "echoes.color.background.success.weak.active": "5006d4037f7d2874626f87245e5b7bc34fb837e9",
-      "echoes.color.background.danger.default": "87617f046b4cf4dbb841aae348a62ce8a31b6790",
-      "echoes.color.background.danger.hover": "88ee9213f8966103451bae71d93ee35779c0c087",
-      "echoes.color.background.danger.focus": "95e91a6e8ad9e66508c868644100651c0687aa50",
-      "echoes.color.background.danger.active": "2622f9b97c75c066c875bf2549f7e24d1809205b",
-      "echoes.color.background.danger.weak.default": "6c7fedcedb34c0a953a5270a021c86c11f5e349c",
-      "echoes.color.background.danger.weak.hover": "86d996b7ed3640dbc3935e4676464c150c263ac5",
-      "echoes.color.background.danger.weak.focus": "0aa86f94a88b1759a35f54efd1630a653ed72bfe",
-      "echoes.color.background.danger.weak.active": "2f50774c13e95211d6a2b1536d0f91b4b40f8299",
-      "echoes.color.background.info.default": "c333538175a8bf373bd599ed3050ef64f41847eb",
-      "echoes.color.background.info.hover": "918bbfcc53f116473c2657fb5ba302b040372cc6",
-      "echoes.color.background.info.focus": "4224513e9f2438439627d2d1b2e37f428ab75651",
-      "echoes.color.background.info.active": "b5f1001da4d7b8a68f5476ba014bd8252804ef88",
-      "echoes.color.background.info.weak.default": "20fbc1a12dd152947bd62840925b649652e58bde",
-      "echoes.color.background.info.weak.hover": "41ffe90e1c8bdc22da5111df17fbadef6bd75504",
-      "echoes.color.background.info.weak.focus": "c4e2add9c7348965910e39dcd9eb59c36798ba95",
-      "echoes.color.background.info.weak.active": "6b7f15de80d8f9be21b950c5e9479784b50999a5",
-      "echoes.color.background.utility.transparent": "ab45b3a59377393559ba58eb504c055f5a1b7ef8",
-      "echoes.color.background.selected.weak.default": "27cd0ed93856ed9c2ee542bdfaed53dab7efddb5",
-      "echoes.color.background.selected.weak.hover": "9fe8e41538270bae4a0b6d866b77f582c661a0f3",
-      "echoes.color.background.selected.weak.pressed": "9aa6162a86d11c13c01b041767298dd82f881fca",
-      "echoes.color.background.selected.bold.default": "e4a2cde59d2ce0bd901b64f6e0f41a94aed4a86e",
-      "echoes.color.background.selected.bold.hover": "be556874f593263c33d2f2c3c68fff99ecd2a1ef",
-      "echoes.color.background.selected.bold.pressed": "696a01be8464ba51530ba88df1236084dff91580",
-      "echoes.color.background.ghost.accent.default": "155356bc187d42d6e87901af4b512fa0feb49797",
-      "echoes.color.background.ghost.accent.hover": "4020f0633369d655715483f6040d1aea9629d60d",
-      "echoes.color.background.ghost.accent.active": "48bb11b9415f8634d8fd1ae6d7e32264856dabad",
-      "echoes.color.background.ghost.accent.focus": "2be362f15740db36b5d79616e8b244b957e8ccff",
-      "echoes.color.background.ghost.neutral.default": "7722c055268e2b2054288b08c01b5e0e1e5a09c5",
-      "echoes.color.background.ghost.neutral.hover": "de4605cb5e43d6c39f4f6c1a5de93abfaa6b1449",
-      "echoes.color.background.ghost.neutral.active": "28521d1c901c417a9e3c0698dc6d34b7d2080288",
-      "echoes.color.background.ghost.neutral.focus": "a79fcbcdf96dd872b4c70b3a41fd31bec9af8cd0",
-      "echoes.color.background.ghost.danger.default": "d5dbf23ccf9db27201b04737c8b8bd45ba6e9674",
-      "echoes.color.background.ghost.danger.hover": "f97c701dc784ee626fd0bb272fe0d57cb9b43ed7",
-      "echoes.color.background.ghost.danger.active": "73068b407a3e6c2142591078e6690aa64ec4a79f",
-      "echoes.color.background.ghost.danger.focus": "c1e1781c949bbf608852aacfae7427a857ec7029",
-      "echoes.color.overlays.backDrop.default": "6e0160033bc9084c862370fa20b5f8c5646627b2",
-      "echoes.color.background.emphasis.weak.default": "d1d7eb2fdf6aa816cfda88b0359a6e3c1517119b",
-      "echoes.color.background.emphasis.weak.hover": "e74504a71799588b86ac707ad4cf7e2f5cb51762",
-      "echoes.color.background.emphasis.weak.focus": "eb46731747c598e7129bca06a4136ad44bd9b2e7",
-      "echoes.color.background.emphasis.weak.active": "09727f8ba0315720063cbe4799bcd32be31e105f",
-      "echoes.color.background.emphasis.default": "eb5eb3aafab9ae2265a7ab01795d58607188bb76",
-      "echoes.color.background.emphasis.hover": "f3cce6b9d56df15e4a07e8f77228df0fba0b1c93",
-      "echoes.color.background.emphasis.focus": "30aadae8839b164e28eab19d4b62a626c60b9fc1",
-      "echoes.color.background.emphasis.active": "11982ac742255314c3566d89ab56f8de62954e09",
-      "echoes.color.text.strong": "64a250f556f7e9e672373950814ccb3fc4dd0fd7",
-      "echoes.color.text.default": "433ad741ec9d5c3f3281ee6740354fecf814ea06",
-      "echoes.color.text.subtle": "eced94d663cc27c76b73a47b7e2528ed32be8c48",
-      "echoes.color.text.disabled": "9d518f6edf3b09f27f0d56a1d4cb201bd02ab1ab",
-      "echoes.color.text.onColor": "85a7a0e1cdf13e915534bdf9284eb56ed0481f1e",
-      "echoes.color.text.onColor-Inverse": "1ca8eaef134881bbc7b89cf310212bd8fc004322",
-      "echoes.color.text.danger": "61a27415b4b5386036e38c6a1db7f27eecba1f8d",
-      "echoes.color.text.placeholder": "7254c1dbd8649b6d3467b1c3480743cf79bc5db6",
-      "echoes.color.text.accent": "ebe8f3b29adbac83e1049b7ba7f3fcfa93597e41",
-      "echoes.color.text.info": "6d4f31ae7427ae0a98a47bcb63e88c612b7a0141",
-      "echoes.color.text.success": "7b0ba75d59976f0f318dd4cee2a68274cfbb97cc",
-      "echoes.color.text.warning": "4b9c5ee639e7e4a5f9909cdd2a8d30ec42921a97",
-      "echoes.color.text.emphasis": "87931b5eff678a101011e59706021bea0bd2ae9a",
-      "echoes.color.text.link.hover": "99b4dc18e184f065a806038e78d88ecb38ade602",
-      "echoes.color.icon.bold": "619d19cfcc1a4e73b8921352aab88de6c88816ab",
-      "echoes.color.icon.default": "4a7870c8ecda9c5a73ce003126dbdfe8971c3e6f",
-      "echoes.color.icon.subtle": "8cf9ba2e6842bb38b3cb4f0491d65c11bb41c6a6",
-      "echoes.color.icon.disabled": "520c2fe5b7268005727af7440c48a83fd6afe766",
-      "echoes.color.icon.placeholder": "1ea44079805c15896460035648e4382aad4b6d41",
-      "echoes.color.icon.accent": "7d6d213b486733ddf37b6650fad0f2c7535b281f",
-      "echoes.color.icon.danger": "a7c74a2ca656e0a95d13df601dd1b382d0d08553",
-      "echoes.color.icon.warning": "c1c4cf5cbeb2aaf6483cc35559f588aba95504f1",
-      "echoes.color.icon.success": "0a669ac9f23449e277e6ac04640f689ffd839b53",
-      "echoes.color.icon.info": "bab21daa8d3b4fcf27ca749a744a002db28ed30b",
-      "echoes.color.icon.onColor": "83d33dc4e196c50933e3c5d0e7e91b8693444e4f",
-      "echoes.color.icon.onColor-Inverse": "c2d29bbe4282e600dede2dd469cf1315c2dca8ea",
-      "echoes.color.icon.selected": "eb63012023d2a9af12d300f200baaf207ea36a78",
-      "echoes.color.icon.emphasis": "b0934fde461546c17f9699f4ce864a9943dc39ab",
-      "echoes.color.border.bolder": "69006ca7ea25910087c07cdd35b7fda86a41e202",
-      "echoes.color.border.bold": "f18519b02417eb7b973af9fd1154b6ef430270b9",
-      "echoes.color.border.weak": "02969c32e293b950116e608f9fcc5a4d2cfa70ee",
-      "echoes.color.border.weaker": "c683152315f9127e0574babbd8d7f148c88ec9de",
-      "echoes.color.border.disabled": "32b9c4e1b735cadd18b7c75160a1e3d3438ce932",
-      "echoes.color.border.accent.default": "cb575e94c592889c3cc939a89678aa965f15ea03",
-      "echoes.color.border.danger.weak": "e777d70720bc150386225dc4646be68457ab8438",
-      "echoes.color.border.danger.default": "9a4f27031a9452e8e62908650ff677ef09a60b21",
-      "echoes.color.border.none": "526b590ca1b356af29175b2e672fc15ac5e10080",
-      "echoes.color.border.success.weak": "420b9a491b1edad32970da07c6764fb1e9473e83",
-      "echoes.color.border.success.default": "1970ccba9673f746cf2c7fd482482ba3ab120a9a",
-      "echoes.color.border.warning.weak": "f1ca8acc11fe0540516282e414fd635835143ca2",
-      "echoes.color.border.info.weak": "231c48e1aabd21a214abf554a9844d130bc068c0",
-      "echoes.color.border.emphasis.weak": "f7e5f542142dab1801b650879c278c1fafe78d51",
-      "echoes.color.focus.default": "a5d79c72e6395c98eb1fcf18075446f2aa65e0fc",
-      "echoes.form-control.colors.background.default": "49ac88c88086d5428ec5d03fc994d22ce0531943",
-      "echoes.form-control.colors.background.hover": "51412df3a2b433f2c3ee9e273a008a461344c3e8",
-      "echoes.form-control.colors.border.default": "6f36d508667f357a8d0e4199ac0e119878f6457b",
-      "echoes.form-control.colors.border.focus": "96e7920c5ae1a52f096c52e6237ee8779b96b1a2",
-      "echoes.form-control.colors.icon.default": "5ed1f3d37e675d57e676e9cf0a6e8a81b1f9c187",
-      "echoes.logos.colors.text": "45739a7b4a9e51ab8b70ab424d9cc904cc3235d4",
-      "echoes.logos.colors.brand": "50d00de4c3b5874f7f8723abf6e0e5aaa5610f8e",
-      "echoes.logos.colors.sonar-whale": "818e8c112ac7298f5f5d8632f4d4758e28c9f420",
-      "echoes.modal.colors.shadow.gradient": "ec7e53aaa31e3c7305cb57d63ecfbf7c51054f5a",
-      "echoes.ratings.colors.background.ratingA.default": "3a63ce3246058e8e4e93dcefbc4873c5ad6e98b6",
-      "echoes.ratings.colors.background.ratingB.default": "b41b145f53cfcec4b1dd99c9728e2c6eb8a5e83b",
-      "echoes.ratings.colors.background.ratingC.default": "51dd2f0406f9a4e3a4a5ae86abad4f85421d4dbf",
-      "echoes.ratings.colors.background.ratingD.default": "081a74ab0611a5be399c7e3b8c7d848fa0470796",
-      "echoes.ratings.colors.background.ratingE.default": "187e7d8ed7c2395a933275e16d1ab39742e7f9ab",
-      "echoes.ratings.colors.text.ratingA.default": "eed78fb24d72ab38fcecefdeeeb9a1b44538a7c2",
-      "echoes.ratings.colors.text.ratingB.default": "abcbbf435af38f7dae02ba7ae9e36cc695633798",
-      "echoes.ratings.colors.text.ratingC.default": "918c3c63566b1870d2e50d9a972d101f656d0f53",
-      "echoes.ratings.colors.text.ratingD.default": "ee9bebc5a2c4a8fbf7db49bff25e55ab21eb2338",
-      "echoes.ratings.colors.text.ratingE.default": "62d0bc4dbf356b9c3551dda9a36eb3d44cf7c025",
-      "echoes.ratings.colors.border.ratingA.hover": "5e0f11b9c220a153480e43cc7be5be228cafc3bd",
-      "echoes.ratings.colors.border.ratingB.hover": "fa3168a54bf477a01728f946fbb383442533fa96",
-      "echoes.ratings.colors.border.ratingC.hover": "ec6646a978b11a257a082cd2d5a5e1419ea08330",
-      "echoes.ratings.colors.border.ratingD.hover": "4149274ec24d2d9b9c8b4c3a63dda2b1cd9a3bc7",
-      "echoes.ratings.colors.border.ratingE.hover": "06659f756b21dde499e1c0f57056c645e178cd53",
-      "echoes.severityBadge.colors.background.severity.blocker.prefix.default": "66cdeeaa8cd88cb1d01fa251f2f3cecb62ab32f5",
-      "echoes.severityBadge.colors.background.severity.blocker.suffix.default": "ed88df404d1b352ceae3f899e966efb9511d3693",
-      "echoes.severityBadge.colors.background.severity.blocker.suffix.hover": "3562de60cd115ebea8fa1b33556b360d2f45f6c2",
-      "echoes.severityBadge.colors.background.severity.high.prefix.default": "58c0d9b99d8ed24271dc6c75cf688cfb4792a4b7",
-      "echoes.severityBadge.colors.background.severity.high.suffix.default": "efb139cebcb01e48e46c7cf053d9f154dd238a03",
-      "echoes.severityBadge.colors.background.severity.high.suffix.hover": "447151e99c216f139c4588216caceae80e4156b1",
-      "echoes.severityBadge.colors.background.severity.medium.prefix.default": "f0ef8b1059decdcad35d94a271c1f2aa52f9857f",
-      "echoes.severityBadge.colors.background.severity.medium.suffix.default": "0c7ec9593354237ec6806432b9bbea73a079cec2",
-      "echoes.severityBadge.colors.background.severity.medium.suffix.hover": "f55756360dac6c91cadef2b6e766bb611a0649df",
-      "echoes.severityBadge.colors.background.severity.low.prefix.default": "ff451a683204d638a4cbce00ae3a919c6e856d87",
-      "echoes.severityBadge.colors.background.severity.low.suffix.default": "de59ae2e01445a991c77a6d9c90cb8c09f8d3b54",
-      "echoes.severityBadge.colors.background.severity.low.suffix.hover": "7ee00ecc7b12fd9efcbaf9405c286c5f32d208e1",
-      "echoes.severityBadge.colors.background.severity.info.prefix.default": "6e4b4f16bd574a8ff4db8311c0acfd5a4e59501d",
-      "echoes.severityBadge.colors.background.severity.info.suffix.default": "07da906d905025e0a04762c2bedfd9cdf756e0e1",
-      "echoes.severityBadge.colors.background.severity.info.suffix.hover": "3da52f50348fc3fcee280cd481b5a0a367804e2d",
-      "echoes.severityBadge.colors.foreground.blocker.icon.default": "bfcdf128fb7acaa7746a23409df7265b60cb4a69",
-      "echoes.severityBadge.colors.foreground.blocker.text.default": "1773d48e2d43078dfe8b1386ed31c43162c2d5ae",
-      "echoes.severityBadge.colors.foreground.high.text.default": "8c8a2bafa1d79cc54f297e77018536acd727d410",
-      "echoes.severityBadge.colors.foreground.high.icon.default": "71e64527268d8d8a4217ea42363daa98cac082ea",
-      "echoes.severityBadge.colors.foreground.medium.text.default": "dae1bd0248537cb03bc7f8c11a40cff987c5dc3a",
-      "echoes.severityBadge.colors.foreground.medium.icon.default": "28019705491f96d2075fa307df6bc424d58058c6",
-      "echoes.severityBadge.colors.foreground.low.text.default": "0447606046ad2e9f4d69aee927d3d91a1484dfd6",
-      "echoes.severityBadge.colors.foreground.low.icon.default": "5fb5d4cd16e77eb98cb173d4ad320b26276ac08e",
-      "echoes.severityBadge.colors.foreground.info.text.default": "4c3ac20d8a58f092b8a2de59eb9e58f2e0828ed6",
-      "echoes.severityBadge.colors.foreground.info.icon.default": "c1f5833b1b2c95cc3bd468b87b9d3f32750a4829",
-      "echoes.severityBadge.colors.borders.blocker.default": "5fca0c9bdf1f3536e5cadac3592fda568d0fc841",
-      "echoes.severityBadge.colors.borders.high.default": "e86ad9415293ee42cf5eb5188deadc02f9171f68",
-      "echoes.severityBadge.colors.borders.medium.default": "8661f82e7865e7d184d30c6412824b42e65fd65b",
-      "echoes.severityBadge.colors.borders.low.default": "88eb712a5667afbb22809b7b1655cf876482f0e1",
-      "echoes.severityBadge.colors.borders.info.default": "251e43ebc8197db02aeff43ecc7a0073e16ea5fa",
-      "echoes.table.colors.background.header.default": "da4b4f781fcf7c59154952111a828772c268cccc"
+      "echoes.color.background.neutral.subtle.default": "56419af82cebc38be77b717fab4fda867826a4b5",
+      "echoes.color.background.neutral.subtle.hover": "a15a4f6a00832d6a519593cccb06c059cd697e94",
+      "echoes.color.background.neutral.subtle.focus": "991def36746fd9e38593fb12029355c365fa9cb5",
+      "echoes.color.background.neutral.subtle.active": "6ff3a37e37a9f038e3e15171d4d41fc4b91917d3",
+      "echoes.color.background.neutral.bolder.default": "3881a631ce6d5a29eacd9c3b5b1a18e68188dc9b",
+      "echoes.color.background.accent.default": "3092218c3fbe286ead46859bdba61e1e6364e1ee",
+      "echoes.color.background.accent.hover": "b89181725ca048a3bd591580f3567bf01b56cccf",
+      "echoes.color.background.accent.focus": "d41e9c9ab1a035fa9a49748612f58f0ba91312d9",
+      "echoes.color.background.accent.active": "9014cc6d0d3d5f50daa0a9f8bf4e98ede404dae3",
+      "echoes.color.background.accent.weak.default": "cced52ad7fd547eefa641e60a1956cb3bff05c33",
+      "echoes.color.background.accent.weak.hover": "c7774f3aeaf081aa15a748af67a87fe551332cbe",
+      "echoes.color.background.accent.weak.focus": "d3f414fe0efae7c96221f8c15bb3f5f9223153d0",
+      "echoes.color.background.accent.weak.active": "964b10dac569057e29c59b32ed3b6c0374b9593a",
+      "echoes.color.background.warning.default": "984517b7575e75531a734c48d027fe22c2f23eaf",
+      "echoes.color.background.warning.hover": "91dfbf934553045c29139605f04c59e1dbb92f7e",
+      "echoes.color.background.warning.focus": "27917bb152d2359e38a09c8cc884a66782c58275",
+      "echoes.color.background.warning.active": "827fe44cf279a51fc1c7542ba97f953533918992",
+      "echoes.color.background.warning.weak.default": "3f8a72e14de8f204d1748e99eba8b8df53f0860b",
+      "echoes.color.background.warning.weak.hover": "c0133580221b382c68c6eb55c1f5b5495553d70e",
+      "echoes.color.background.warning.weak.focus": "59b6af729c94a91d59c50fc00eb028cf3cb06667",
+      "echoes.color.background.warning.weak.active": "5c76902df93497eaa4d81e84d3c22aa4c9416656",
+      "echoes.color.background.success.default": "e23ba5782d0158766308473caca47a35bc0569c6",
+      "echoes.color.background.success.hover": "25a7ccf2e2c371743f65a10b9d00ef065572ec6b",
+      "echoes.color.background.success.focus": "b73e73b26c5e65d9950d35db264fea32e5cef735",
+      "echoes.color.background.success.active": "feead31da334e917aa0baf243ad87605008857ad",
+      "echoes.color.background.success.weak.default": "0ce0eb49555b04f8a01c7e69370f5c669f724c22",
+      "echoes.color.background.success.weak.hover": "491ab68d521d8d41b4864343e1fb342e104a5330",
+      "echoes.color.background.success.weak.focus": "ace91cedcb95a7f4e8d9bab81127fa7bd9642040",
+      "echoes.color.background.success.weak.active": "ae1ebc721bcc7328b35eb837f5f71759c1b01145",
+      "echoes.color.background.danger.default": "69134dddc221cc6dbebfebcae0b7cdff2b5f8e73",
+      "echoes.color.background.danger.hover": "8917cd745eeef1f2faa579fac1d92e5c099a6f9f",
+      "echoes.color.background.danger.focus": "c109ee01fab1822d8354caabe0b15406f7489e6d",
+      "echoes.color.background.danger.active": "d38b3753a894df02315bc28417b7638426777fae",
+      "echoes.color.background.danger.weak.default": "796fbf44622c0737fe095131326c0dfeb35133f4",
+      "echoes.color.background.danger.weak.hover": "3f23d8d836fb00cebdd85eee6a7d3317045fc9a4",
+      "echoes.color.background.danger.weak.focus": "b59d07f43dabd81e13900e0865866f7a702eb3da",
+      "echoes.color.background.danger.weak.active": "00959726d6037c15cd445a8abb593173e8d7942a",
+      "echoes.color.background.info.default": "a0e0cc58c173afe0ff93000f1113894ba1f9d89b",
+      "echoes.color.background.info.hover": "d0cefcc1f36245d9439b4123c34edd09255d7fb0",
+      "echoes.color.background.info.focus": "5c113fcb92680b37ab8b905dc291996dd25e2fb7",
+      "echoes.color.background.info.active": "a87eb25e8e98f743a1ef70cd32cdd6d1b53d3033",
+      "echoes.color.background.info.weak.default": "431e986bd463d91c5796301605963d498e1806ed",
+      "echoes.color.background.info.weak.hover": "2751e00e58ba5f46253b9e981785d5c1def3faf4",
+      "echoes.color.background.info.weak.focus": "311f525b9700f617c1068fb9492e1c8ceb5e2dfa",
+      "echoes.color.background.info.weak.active": "f2c087faec815783fda608556e2585c9b17e177a",
+      "echoes.color.background.selected.weak.default": "b36c5f7f165049a0ceee1bc5a6f0cfffa5af995e",
+      "echoes.color.background.selected.weak.hover": "c39e2a75d2c0142df04c25c843d04e7c7460bbff",
+      "echoes.color.background.selected.weak.pressed": "95fb03b683a07e6bce7e9749c782de24e8520e41",
+      "echoes.color.background.selected.bold.default": "2bc5f89bb09a7cecc1ce17019b80303f0e1b65da",
+      "echoes.color.background.selected.bold.hover": "6f644ac3906f6d0149182efdc128e43299478691",
+      "echoes.color.background.selected.bold.pressed": "c233d990b0005662c2ae2c97f80f052db85c7402",
+      "echoes.color.background.ghost.accent.default": "d087009274633495d763e99e28dcf8624abd34ec",
+      "echoes.color.background.ghost.accent.hover": "89d844f88ae6d19ae28abd312af572e1f28e632d",
+      "echoes.color.background.ghost.accent.active": "5647ab61fa6a02bca7be3cc46882f54d8044e630",
+      "echoes.color.background.ghost.accent.focus": "82f22006479e37245e74f2d0e30409600e5a515b",
+      "echoes.color.background.ghost.neutral.default": "9255dad5841264fa1d58b2a75b54986603d2932b",
+      "echoes.color.background.ghost.neutral.hover": "50c0b282d46a3e465f0a12d10fe1625fe3c1b947",
+      "echoes.color.background.ghost.neutral.active": "ef25a640186fb045e58d4004c9c9fa78add829f0",
+      "echoes.color.background.ghost.neutral.focus": "913728063cee35f3bbba4debfe1504416c200d17",
+      "echoes.color.background.ghost.danger.default": "2b5b266ac276d5c34fb8f77b44bc9ec84a847326",
+      "echoes.color.background.ghost.danger.hover": "9929072489845f6353d1c762e4ff307580bcadda",
+      "echoes.color.background.ghost.danger.active": "4b9da229e8f66993025ad45a5f64e203912cbc3e",
+      "echoes.color.background.ghost.danger.focus": "9aa82b72e93254d57e10ea57ad3880090c369516",
+      "echoes.color.background.emphasis.weak.default": "eb02bcb94a0250bcadca67e41aa1f8b56e0c5ebc",
+      "echoes.color.background.emphasis.weak.hover": "b2228865d504219683de5f953b1f6d49f67a983b",
+      "echoes.color.background.emphasis.weak.focus": "280efd4dc5213216df7d09aef05ce6d3677fa1ef",
+      "echoes.color.background.emphasis.weak.active": "905eddaca4188dc2585c777135d37f8d6e26a37e",
+      "echoes.color.background.emphasis.default": "02a0f9d856a13b4f1f386e0e0094d83b3c40671d",
+      "echoes.color.background.emphasis.hover": "0bde9490c58b85adf2b0fc6c7debd35211df2d6a",
+      "echoes.color.background.emphasis.focus": "40d18f69234c56059048a5619aeff537c3005f8c",
+      "echoes.color.background.emphasis.active": "ead6b93e3585a3f998cba0baeca5f7ccece7f520",
+      "echoes.color.background.favourite.default": "f27dc5f3e079795d7fdc8a63a9e07d07e851820f",
+      "echoes.color.background.favourite.hover": "bffcfd479d16f937b3f10fa281743fc96593a951",
+      "echoes.color.surface.default": "42b64c71ff11bc87edd48e82b4716a4efc585b0d",
+      "echoes.color.surface.hover": "b2a4d385609067fd36f40176da7bfcdc7b891af6",
+      "echoes.color.surface.active": "5fb62b997a44d173c567cc7a9180b957ca36ef7f",
+      "echoes.color.surface.canvas.default": "c8c3427717e64b0c0ac2cea5bea75297052c4d07",
+      "echoes.color.surface.inverse.default": "36be3813e7cf2209fdf82ee63b27a67bbe6aab6b",
+      "echoes.color.surface.inverse.hover": "1ed550c0cc665b94eb881ca6cc249bad01b4df18",
+      "echoes.color.surface.inverse.focus": "89495dfd6e583868faf51cf7f80aa5c83d9f5e1b",
+      "echoes.color.surface.inverse.active": "01b8490646a6b072b782374f711de1f54850ad15",
+      "echoes.color.surface.disabled": "b773c32be67d280fcee8b53792a20d0277a45576",
+      "echoes.color.overlays.backDrop.default": "224af1d943e948a877ec722fb7a12d878cefe265",
+      "echoes.color.overlays.disabled": "936d7d75a557b92b3541b327f02b1f92fb9a8af3",
+      "echoes.color.text.strong": "926d6cfb4b650031e813b42aced21349122d454c",
+      "echoes.color.text.default": "02a4e2b8ea4f8891f23042231dead1001b45cb35",
+      "echoes.color.text.subtle": "4bf558403e4b1a2ac14a2570900ad26554abffe1",
+      "echoes.color.text.disabled": "6f12ba53e440ed719c00cb22bb1a3b9d52956a1d",
+      "echoes.color.text.onColor-Inverse": "dd121aed759cecd1dd044af450f5814f8f4553df",
+      "echoes.color.text.danger": "55eda2f5401e13353f5ba0d42f0d9ec306051e1e",
+      "echoes.color.text.placeholder": "d83d998c2cb6ae22518edf81df9426e4e8d73072",
+      "echoes.color.text.info": "5720c93cd62d0c106fc1e46be57c24e322b0c2af",
+      "echoes.color.text.success": "6a377514b7187548a9ac1151b5b0f261a9c47e1f",
+      "echoes.color.text.warning": "b9e612412628009c83ee6e4992f90d2e24af5a4b",
+      "echoes.color.text.emphasis": "639da7752ffe5ae23b6dd2548bcebc8de8ad9f98",
+      "echoes.color.text.link.hover": "49bb2c3498fc444bdf0693f92af344148f53c395",
+      "echoes.color.icon.bold": "1e8fee8e8e35f6637e396e874fd0446a4e89b8a4",
+      "echoes.color.icon.default": "a35cd3bff2854fdbc2c83830e14b5e66789a0d87",
+      "echoes.color.icon.subtle": "116cc7225e5b9f94ccc415db6ce42326abc9ebc2",
+      "echoes.color.icon.disabled": "6fd03abf78d58789eee3a64812f3a08829cbbbfa",
+      "echoes.color.icon.placeholder": "e1e3f4ccf61edb790a61432cdbe5dafb7a41b77f",
+      "echoes.color.icon.accent": "9b3877edbef1a2003dd8c9b4a6f7498993011b92",
+      "echoes.color.icon.danger": "f1c5e51892c80a47eb41fd9a5431e96666813be7",
+      "echoes.color.icon.warning": "a0531c8969d9b3f4bb199da2d1100f098a8ba223",
+      "echoes.color.icon.success": "ae01b72999c5f09652038e13976b744e6681aa7b",
+      "echoes.color.icon.info": "a01a6939bdac8cfc92b57856f98d248da051d255",
+      "echoes.color.icon.onColor": "f12a6060c31710609f8de8917d8e28c56dda61cd",
+      "echoes.color.icon.onColor-Inverse": "5d0f8d8d8c54badf67b3b235f4942062600bf47c",
+      "echoes.color.icon.selected": "5d80c23587b39878826d7ad6e625c5c34dfecb4c",
+      "echoes.color.icon.emphasis": "955f556023161c3a140fa68a79b0c40f444c0ff0",
+      "echoes.color.border.bolder": "fd7c7bf84b984ce7c3bcd87f0a535f740897d27c",
+      "echoes.color.border.bold": "155ca8f7f8728277496d01b2fb11dd36583c51eb",
+      "echoes.color.border.weak": "0ababc7b4ae825c66d925ac6aa00327574494e05",
+      "echoes.color.border.weaker": "7dd4267cc09c4a0f49581bcb6a28d560e7638ac0",
+      "echoes.color.border.disabled": "b1b92c569ce6cc61c306ff742f80079571614185",
+      "echoes.color.border.accent.default": "c234cdfad51ce5781e6f80ef4fde3d17dbcf2c0d",
+      "echoes.color.border.danger.weak": "3c63fed5c44690b6fd439790474844e7ad8db28a",
+      "echoes.color.border.danger.default": "d0027412a09cd4537f848abb1554d7776c331313",
+      "echoes.color.border.none": "b63431272af6be964fc1ff2265f81e599208a9be",
+      "echoes.color.border.success.weak": "e5a659a780f6b3b169f2db140d4d368228712a14",
+      "echoes.color.border.success.default": "d3f870d5789941999904b64d7bac9b968de0e539",
+      "echoes.color.border.warning.weak": "dcc059722e0ed58cdd02125b6cec4f64f2fbddeb",
+      "echoes.color.border.info.weak": "fc5e64249f53a595d96ec8c4c38ddbaaa8587954",
+      "echoes.color.border.emphasis.weak": "8e582ed78c78f99bbfd82847456af298fed706fc",
+      "echoes.color.focus.default": "7f97b0e47e1d318166fd3bba3acb4bdfc84351a8",
+      "echoes.form-control.colors.background.default": "718ad1dfb13440ea5caaa6241b73453d80a4987d",
+      "echoes.form-control.colors.background.hover": "4fc75e1109111ac62635fe1db5c9fd27bf3ad776",
+      "echoes.form-control.colors.border.default": "26c0096ef454b754739da06ce03ae722a2c032a5",
+      "echoes.form-control.colors.border.focus": "17971acc78511c227c40e1ae8783eda7266fb241",
+      "echoes.form-control.colors.icon.default": "24cad5515afed9562557e9121a41559361c077e1",
+      "echoes.logos.colors.text": "ebccc8741e2083427653926d79b20652e6fa821f",
+      "echoes.logos.colors.brand": "d5d90f80db8a0635728f4f57904e425aedd33589",
+      "echoes.logos.colors.sonar-whale": "11f99b3441b3cc59d211962d8d894fbb748368d3",
+      "echoes.bottom-scroll.colors.shadow.gradient": "360bec3ad82fb138e7020a387c2f24ee2fb3985a",
+      "echoes.ratings.colors.background.ratingA.default": "15ce92013a5795f1e9538f87b98193ee8fb40838",
+      "echoes.ratings.colors.background.ratingB.default": "40263a5df3584966c7279fac3128dfa5742b3664",
+      "echoes.ratings.colors.background.ratingC.default": "1b383ec5d98472c542cb57bfedfdfe0e03fc72ce",
+      "echoes.ratings.colors.background.ratingD.default": "335248eac2c35d785dc5c18f52b1e9318fe07dc4",
+      "echoes.ratings.colors.background.ratingE.default": "47a1d343853cc35b9c7b9e1cd0d681d893b503e6",
+      "echoes.ratings.colors.text.ratingA.default": "67f33e8cfb330549ced0435b23c3f2fabe257b53",
+      "echoes.ratings.colors.text.ratingB.default": "68fa266ac70038d34b6de45199bfef8b735321ed",
+      "echoes.ratings.colors.text.ratingC.default": "4478004856c0f32e34d00d42fd3c41dce0e97c15",
+      "echoes.ratings.colors.text.ratingD.default": "f474f045b0d10b0c0b3315633f695c5661ae183f",
+      "echoes.ratings.colors.text.ratingE.default": "234b86448a605b0d31d030d34926a797fca3d0f5",
+      "echoes.ratings.colors.border.ratingA.default": "c71e6bea2e37619fe5191c90dca73f6febb686f2",
+      "echoes.ratings.colors.border.ratingA.hover": "596f6841d34338a5689fed56a02039474c3d9362",
+      "echoes.ratings.colors.border.ratingB.default": "7758f53082008ba38e8e86044a637e69c57bdfe8",
+      "echoes.ratings.colors.border.ratingB.hover": "e9b60c8152870dbef145b36d906dfddb1bf32249",
+      "echoes.ratings.colors.border.ratingC.default": "103f7d9720bf99e0168b14a84b4adbc4b9d0edee",
+      "echoes.ratings.colors.border.ratingC.hover": "e0bf60bf1ae510f7b84ec1f4e7c2e178acb12cc9",
+      "echoes.ratings.colors.border.ratingD.default": "35d7eaa8f7d6b9aea0975125561db6d0071b2991",
+      "echoes.ratings.colors.border.ratingD.hover": "9d499d1bd1a1350e00a79c3e305ef173911c205d",
+      "echoes.ratings.colors.border.ratingE.default": "4d02ec6372304dbe743316ce2a63b531144263bb",
+      "echoes.ratings.colors.border.ratingE.hover": "6b4fc53bfb0db06155b1e4eaa1dd8c5895f9edb9",
+      "echoes.severityBadge.colors.background.severity.blocker.prefix.default": "8d1c785d2d22406d156649e4be9dab1ab3296e7e",
+      "echoes.severityBadge.colors.background.severity.blocker.suffix.default": "a8d16d8e1063a93ce1c62cd87509037e3fa09a36",
+      "echoes.severityBadge.colors.background.severity.blocker.suffix.hover": "a7c8c4cc86d58b64a4d68b6bd6769477cfc81f6e",
+      "echoes.severityBadge.colors.background.severity.high.prefix.default": "fbec7d159f83bfe1181408cfda6a13614a86a205",
+      "echoes.severityBadge.colors.background.severity.high.suffix.default": "b586b20469fce2573adfcc68be418df95df021a5",
+      "echoes.severityBadge.colors.background.severity.high.suffix.hover": "f22dccbf722609bb5c588778db9763b404988b55",
+      "echoes.severityBadge.colors.background.severity.medium.prefix.default": "6f009671a6b27e571dc72ef39cfbc0897dcf51c0",
+      "echoes.severityBadge.colors.background.severity.medium.suffix.default": "69b9d5c988b9ead528951ec6840b8f944d83345c",
+      "echoes.severityBadge.colors.background.severity.medium.suffix.hover": "68c2c49c4f6ea96675c720b0c4a132450e73c356",
+      "echoes.severityBadge.colors.background.severity.low.prefix.default": "0d100396c09677583e06aa39dc87aa8c1f243f40",
+      "echoes.severityBadge.colors.background.severity.low.suffix.default": "f3f1cd42ca0afff618aa3b7ed5f29b0f19b73b2d",
+      "echoes.severityBadge.colors.background.severity.low.suffix.hover": "7f8a8c0bf25af16ec847bfe7b399547b091fc45f",
+      "echoes.severityBadge.colors.background.severity.info.prefix.default": "8a68ec2b0e29a53dfdd08f2c22b8137ce2b879b0",
+      "echoes.severityBadge.colors.background.severity.info.suffix.default": "672a8a1b4a0f89573b57353ee29e96f63c4577b3",
+      "echoes.severityBadge.colors.background.severity.info.suffix.hover": "13bc74b3bf4590ee42742d3f664052a77e95c94b",
+      "echoes.severityBadge.colors.foreground.blocker.icon.default": "503010ba75d646048c1179d73fa440aff1601e31",
+      "echoes.severityBadge.colors.foreground.blocker.text.default": "bf871c62c9ebc08366f21b201a844e93f8083ce7",
+      "echoes.severityBadge.colors.foreground.high.text.default": "4f4328d56e08b820a11f4ace1e6297a09bfcedf8",
+      "echoes.severityBadge.colors.foreground.high.icon.default": "29fa680256a40184707dbf5381cbabe1ee8bd96c",
+      "echoes.severityBadge.colors.foreground.medium.text.default": "c3eb4ee69bb12c269ec57aa8437237844af2a7e0",
+      "echoes.severityBadge.colors.foreground.medium.icon.default": "991ed8a6c8b81eb26069f89228e2948abbd5b1a5",
+      "echoes.severityBadge.colors.foreground.low.text.default": "055ab821c31c9292dff8922b2e7a0b3724de884c",
+      "echoes.severityBadge.colors.foreground.low.icon.default": "a88c2433896fdb81f3df389d0d729321c3b0332a",
+      "echoes.severityBadge.colors.foreground.info.text.default": "6577bd8f856e9f336e7c4e1cc800c6d4065628a0",
+      "echoes.severityBadge.colors.foreground.info.icon.default": "8d3338f2da4cbd279d5af01f3e7af4a7cb9ce125",
+      "echoes.severityBadge.colors.borders.blocker.default": "f7438fea117ed004fff28844bd0a4dd93ac8f8e6",
+      "echoes.severityBadge.colors.borders.high.default": "597305d78ce53b836d61223d512356ae6bf00892",
+      "echoes.severityBadge.colors.borders.medium.default": "4bfaf8e4fa12d01276956818d656eb7876123acf",
+      "echoes.severityBadge.colors.borders.low.default": "4cb84e0f840c0ebae565d0bf0fe803b6b1bdc440",
+      "echoes.severityBadge.colors.borders.info.default": "321d33f50f2d408a1e3e85ef1a8c37b73c0d434a",
+      "echoes.sidebar-navigation.colors.background.default": "f91d0179d2863ea657f13100d95dc97692aed879",
+      "echoes.sidebar-navigation-item.colors.background.default": "afde2b77f3ce92e777e5e0aa7343099e7fc4cbd5",
+      "echoes.sidebar-navigation-item.colors.background.hover": "44f88ec67128390c3a73cef37f9d1e5de4d4a6a1",
+      "echoes.sidebar-navigation-item.colors.background.active": "deb51d830d9fe1cab789fd758f0afaf5a2bb3728",
+      "echoes.table.colors.background.header.default": "45a90245aad271b5a3e0ac918c2a784232888321",
+      "echoes.color.background.onInteraction": "0db613423f0e21fb17afc3e864ae7922ec650129",
+      "echoes.color.primary.onInteractionWeak": "da904856f2cc7e1cb78cfc92dd42d62f6232c5ea",
+      "echoes.color.utility.transparent": "9dab5acff2709b58b50b066159d9675eb3c2677e"
     },
-    "group": "Themes"
+    "group": "Modes"
   },
   {
     "id": "2c04c267b0954974cd2c068cbffdb86a6fadefa4",
     "name": "dark",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "layer1/colors": "source",
-      "layer2/dark": "enabled",
-      "layer3/dark": "enabled",
-      "layer1/base": "source"
+      "brand/brandA/colors": "source",
+      "brand/brandA/base": "source",
+      "mode/dark": "enabled",
+      "component/dark": "enabled"
     },
-    "$figmaCollectionId": "VariableCollectionId:210:28",
-    "$figmaModeId": "210:1",
+    "$figmaCollectionId": "VariableCollectionId:2:1073",
+    "$figmaModeId": "2:10",
     "$figmaVariableReferences": {
-      "echoes.color.background.neutral.subtle.default": "99ef247f30d09f29edd3b55734d289e54890bf5c",
-      "echoes.color.background.neutral.subtle.focus": "7b4c4f477fb4b9efdd2db16b60864d5f416c3665",
-      "echoes.color.background.neutral.subtle.hover": "b7e2d9350ec651ee02517ad8b7edf0f54b0d904c",
-      "echoes.color.background.neutral.subtle.active": "e6a98dfd12bb18d211d8773488eda25a9ff7fdcc",
-      "echoes.color.background.neutral.bolder.default": "feab1848d5c7c80bd00b7539471e830230a2d909",
-      "echoes.color.surface.default": "cf8aef0f2ff46b230993a6124844df16d712fec3",
-      "echoes.color.surface.hover": "faadccb935188afbc377a1633ce958f3bab65b26",
-      "echoes.color.surface.active": "699d37bfc540218c517c09f1b4cdf17be6027e58",
-      "echoes.color.surface.canvas.default": "66bea89bc3bf52991c2843d6044cb37255426d28",
-      "echoes.color.surface.inverse.default": "f70ef87f0e0bab08757875a103b70ec35159358f",
-      "echoes.color.surface.disabled": "5bc4fb50d5f8a7deff0eda47e8c0a77aea2ebe9d",
-      "echoes.color.background.accent.default": "1d3c07c608d84278588a1fb96e48323b61fea3fe",
-      "echoes.color.background.accent.hover": "8aae3ff710414aaa369e4ccf5b578aed0e88b975",
-      "echoes.color.background.accent.focus": "02927eed38e478efb1333105c83e1cc5774d5711",
-      "echoes.color.background.accent.active": "6067a6ffe69c41c2174803b4b402dc8314a749a9",
-      "echoes.color.background.accent.weak.default": "2b8a9ee81cf8a5468208c4c401820f90d5135530",
-      "echoes.color.background.accent.weak.hover": "99c215cfbf5606a09253a74e3fa1564197944428",
-      "echoes.color.background.accent.weak.active": "a2ff2132bc081e53f53d05d2c836c5d20621266d",
-      "echoes.color.background.accent.weak.focus": "d6f26e5dbcab9d26d5792c7f7c3528daed3a39e1",
-      "echoes.color.background.warning.default": "98b86f264e978c0b6558e6f2a3ba510b019fc7a0",
-      "echoes.color.background.warning.hover": "308537aec7e97bd86ec4f3035b23cd040ecd5311",
-      "echoes.color.background.warning.focus": "bd94faeaee90ef53870486249f6eb6359abd82db",
-      "echoes.color.background.warning.active": "e38689d5afd91eac5c60f1a4702e38dac39a0759",
-      "echoes.color.background.warning.weak.default": "71e7dfb2beb17d14fe181fb7e67a830758d039c1",
-      "echoes.color.background.warning.weak.hover": "60361748d6607bbe8b441dcf6c471412ab418b7b",
-      "echoes.color.background.warning.weak.focus": "cc0d7f0522cd5580c810158b00d559d7cbbb1663",
-      "echoes.color.background.warning.weak.active": "3a32085b6e9fe00212feb778f896dba7493b6c57",
-      "echoes.color.background.success.default": "56514d179a2f307b4030e0494f6f6c481344a451",
-      "echoes.color.background.success.hover": "8d99222f81daf1e63a3f70b45a4e0abc1d7e46ba",
-      "echoes.color.background.success.focus": "ba455391d5711cc36058d275de03420508d06aa5",
-      "echoes.color.background.success.active": "dfef9021b652d99e21ae9d91139133f6d17afdf1",
-      "echoes.color.background.success.weak.default": "19728fa4f832e2996c980da17015fb03ccfc892c",
-      "echoes.color.background.success.weak.hover": "b426b3e6464dcbcd08598917a9ef5db068a1ed71",
-      "echoes.color.background.success.weak.active": "5006d4037f7d2874626f87245e5b7bc34fb837e9",
-      "echoes.color.background.success.weak.focus": "3123acec9ed6d43592cc433cf4555401b98c3e60",
-      "echoes.color.background.danger.default": "87617f046b4cf4dbb841aae348a62ce8a31b6790",
-      "echoes.color.background.danger.hover": "88ee9213f8966103451bae71d93ee35779c0c087",
-      "echoes.color.background.danger.focus": "95e91a6e8ad9e66508c868644100651c0687aa50",
-      "echoes.color.background.danger.active": "2622f9b97c75c066c875bf2549f7e24d1809205b",
-      "echoes.color.background.danger.weak.default": "6c7fedcedb34c0a953a5270a021c86c11f5e349c",
-      "echoes.color.background.danger.weak.hover": "86d996b7ed3640dbc3935e4676464c150c263ac5",
-      "echoes.color.background.danger.weak.active": "2f50774c13e95211d6a2b1536d0f91b4b40f8299",
-      "echoes.color.background.danger.weak.focus": "0aa86f94a88b1759a35f54efd1630a653ed72bfe",
-      "echoes.color.background.info.default": "c333538175a8bf373bd599ed3050ef64f41847eb",
-      "echoes.color.background.info.hover": "918bbfcc53f116473c2657fb5ba302b040372cc6",
-      "echoes.color.background.info.focus": "4224513e9f2438439627d2d1b2e37f428ab75651",
-      "echoes.color.background.info.active": "b5f1001da4d7b8a68f5476ba014bd8252804ef88",
-      "echoes.color.background.info.weak.default": "20fbc1a12dd152947bd62840925b649652e58bde",
-      "echoes.color.background.info.weak.hover": "41ffe90e1c8bdc22da5111df17fbadef6bd75504",
-      "echoes.color.background.info.weak.focus": "c4e2add9c7348965910e39dcd9eb59c36798ba95",
-      "echoes.color.background.info.weak.active": "6b7f15de80d8f9be21b950c5e9479784b50999a5",
-      "echoes.color.background.utility.transparent": "ab45b3a59377393559ba58eb504c055f5a1b7ef8",
-      "echoes.color.background.selected.weak.default": "27cd0ed93856ed9c2ee542bdfaed53dab7efddb5",
-      "echoes.color.background.selected.weak.hover": "9fe8e41538270bae4a0b6d866b77f582c661a0f3",
-      "echoes.color.background.selected.weak.pressed": "9aa6162a86d11c13c01b041767298dd82f881fca",
-      "echoes.color.background.selected.bold.default": "e4a2cde59d2ce0bd901b64f6e0f41a94aed4a86e",
-      "echoes.color.background.selected.bold.hover": "be556874f593263c33d2f2c3c68fff99ecd2a1ef",
-      "echoes.color.background.selected.bold.pressed": "696a01be8464ba51530ba88df1236084dff91580",
-      "echoes.color.background.ghost.accent.default": "155356bc187d42d6e87901af4b512fa0feb49797",
-      "echoes.color.background.ghost.accent.hover": "4020f0633369d655715483f6040d1aea9629d60d",
-      "echoes.color.background.ghost.accent.active": "48bb11b9415f8634d8fd1ae6d7e32264856dabad",
-      "echoes.color.background.ghost.accent.focus": "2be362f15740db36b5d79616e8b244b957e8ccff",
-      "echoes.color.background.ghost.neutral.default": "7722c055268e2b2054288b08c01b5e0e1e5a09c5",
-      "echoes.color.background.ghost.neutral.hover": "de4605cb5e43d6c39f4f6c1a5de93abfaa6b1449",
-      "echoes.color.background.ghost.neutral.active": "28521d1c901c417a9e3c0698dc6d34b7d2080288",
-      "echoes.color.background.ghost.neutral.focus": "a79fcbcdf96dd872b4c70b3a41fd31bec9af8cd0",
-      "echoes.color.background.ghost.danger.default": "d5dbf23ccf9db27201b04737c8b8bd45ba6e9674",
-      "echoes.color.background.ghost.danger.hover": "f97c701dc784ee626fd0bb272fe0d57cb9b43ed7",
-      "echoes.color.background.ghost.danger.active": "73068b407a3e6c2142591078e6690aa64ec4a79f",
-      "echoes.color.background.ghost.danger.focus": "c1e1781c949bbf608852aacfae7427a857ec7029",
-      "echoes.color.overlays.backDrop.default": "6e0160033bc9084c862370fa20b5f8c5646627b2",
-      "echoes.color.background.emphasis.weak.default": "d1d7eb2fdf6aa816cfda88b0359a6e3c1517119b",
-      "echoes.color.background.emphasis.weak.hover": "e74504a71799588b86ac707ad4cf7e2f5cb51762",
-      "echoes.color.background.emphasis.weak.focus": "eb46731747c598e7129bca06a4136ad44bd9b2e7",
-      "echoes.color.background.emphasis.weak.active": "09727f8ba0315720063cbe4799bcd32be31e105f",
-      "echoes.color.background.emphasis.default": "eb5eb3aafab9ae2265a7ab01795d58607188bb76",
-      "echoes.color.background.emphasis.hover": "f3cce6b9d56df15e4a07e8f77228df0fba0b1c93",
-      "echoes.color.background.emphasis.focus": "30aadae8839b164e28eab19d4b62a626c60b9fc1",
-      "echoes.color.background.emphasis.active": "11982ac742255314c3566d89ab56f8de62954e09",
-      "echoes.color.text.strong": "64a250f556f7e9e672373950814ccb3fc4dd0fd7",
-      "echoes.color.text.default": "433ad741ec9d5c3f3281ee6740354fecf814ea06",
-      "echoes.color.text.disabled": "9d518f6edf3b09f27f0d56a1d4cb201bd02ab1ab",
-      "echoes.color.text.placeholder": "7254c1dbd8649b6d3467b1c3480743cf79bc5db6",
-      "echoes.color.text.subtle": "eced94d663cc27c76b73a47b7e2528ed32be8c48",
-      "echoes.color.text.onColor": "85a7a0e1cdf13e915534bdf9284eb56ed0481f1e",
-      "echoes.color.text.onColor-Inverse": "1ca8eaef134881bbc7b89cf310212bd8fc004322",
-      "echoes.color.text.accent": "ebe8f3b29adbac83e1049b7ba7f3fcfa93597e41",
-      "echoes.color.text.danger": "61a27415b4b5386036e38c6a1db7f27eecba1f8d",
-      "echoes.color.text.warning": "4b9c5ee639e7e4a5f9909cdd2a8d30ec42921a97",
-      "echoes.color.text.success": "7b0ba75d59976f0f318dd4cee2a68274cfbb97cc",
-      "echoes.color.text.info": "6d4f31ae7427ae0a98a47bcb63e88c612b7a0141",
-      "echoes.color.text.emphasis": "87931b5eff678a101011e59706021bea0bd2ae9a",
-      "echoes.color.text.link.hover": "99b4dc18e184f065a806038e78d88ecb38ade602",
-      "echoes.color.icon.bold": "619d19cfcc1a4e73b8921352aab88de6c88816ab",
-      "echoes.color.icon.default": "4a7870c8ecda9c5a73ce003126dbdfe8971c3e6f",
-      "echoes.color.icon.subtle": "8cf9ba2e6842bb38b3cb4f0491d65c11bb41c6a6",
-      "echoes.color.icon.disabled": "520c2fe5b7268005727af7440c48a83fd6afe766",
-      "echoes.color.icon.placeholder": "1ea44079805c15896460035648e4382aad4b6d41",
-      "echoes.color.icon.accent": "7d6d213b486733ddf37b6650fad0f2c7535b281f",
-      "echoes.color.icon.danger": "a7c74a2ca656e0a95d13df601dd1b382d0d08553",
-      "echoes.color.icon.warning": "c1c4cf5cbeb2aaf6483cc35559f588aba95504f1",
-      "echoes.color.icon.success": "0a669ac9f23449e277e6ac04640f689ffd839b53",
-      "echoes.color.icon.info": "bab21daa8d3b4fcf27ca749a744a002db28ed30b",
-      "echoes.color.icon.onColor": "83d33dc4e196c50933e3c5d0e7e91b8693444e4f",
-      "echoes.color.icon.onColor-Inverse": "c2d29bbe4282e600dede2dd469cf1315c2dca8ea",
-      "echoes.color.icon.selected": "eb63012023d2a9af12d300f200baaf207ea36a78",
-      "echoes.color.icon.emphasis": "b0934fde461546c17f9699f4ce864a9943dc39ab",
-      "echoes.color.border.bolder": "69006ca7ea25910087c07cdd35b7fda86a41e202",
-      "echoes.color.border.bold": "f18519b02417eb7b973af9fd1154b6ef430270b9",
-      "echoes.color.border.weak": "02969c32e293b950116e608f9fcc5a4d2cfa70ee",
-      "echoes.color.border.weaker": "c683152315f9127e0574babbd8d7f148c88ec9de",
-      "echoes.color.border.disabled": "32b9c4e1b735cadd18b7c75160a1e3d3438ce932",
-      "echoes.color.border.accent.default": "cb575e94c592889c3cc939a89678aa965f15ea03",
-      "echoes.color.border.danger.weak": "e777d70720bc150386225dc4646be68457ab8438",
-      "echoes.color.border.danger.default": "9a4f27031a9452e8e62908650ff677ef09a60b21",
-      "echoes.color.border.none": "526b590ca1b356af29175b2e672fc15ac5e10080",
-      "echoes.color.border.success.weak": "420b9a491b1edad32970da07c6764fb1e9473e83",
-      "echoes.color.border.success.default": "1970ccba9673f746cf2c7fd482482ba3ab120a9a",
-      "echoes.color.border.warning.weak": "f1ca8acc11fe0540516282e414fd635835143ca2",
-      "echoes.color.border.info.weak": "231c48e1aabd21a214abf554a9844d130bc068c0",
-      "echoes.color.border.emphasis.weak": "f7e5f542142dab1801b650879c278c1fafe78d51",
-      "echoes.color.focus.default": "a5d79c72e6395c98eb1fcf18075446f2aa65e0fc",
-      "echoes.form-control.colors.background.default": "49ac88c88086d5428ec5d03fc994d22ce0531943",
-      "echoes.form-control.colors.background.hover": "51412df3a2b433f2c3ee9e273a008a461344c3e8",
-      "echoes.form-control.colors.border.default": "6f36d508667f357a8d0e4199ac0e119878f6457b",
-      "echoes.form-control.colors.border.focus": "96e7920c5ae1a52f096c52e6237ee8779b96b1a2",
-      "echoes.form-control.colors.icon.default": "5ed1f3d37e675d57e676e9cf0a6e8a81b1f9c187",
-      "echoes.logos.colors.text": "45739a7b4a9e51ab8b70ab424d9cc904cc3235d4",
-      "echoes.logos.colors.brand": "50d00de4c3b5874f7f8723abf6e0e5aaa5610f8e",
-      "echoes.logos.colors.sonar-whale": "818e8c112ac7298f5f5d8632f4d4758e28c9f420",
-      "echoes.modal.colors.shadow.gradient": "ec7e53aaa31e3c7305cb57d63ecfbf7c51054f5a",
-      "echoes.ratings.colors.background.ratingA.default": "3a63ce3246058e8e4e93dcefbc4873c5ad6e98b6",
-      "echoes.ratings.colors.background.ratingB.default": "b41b145f53cfcec4b1dd99c9728e2c6eb8a5e83b",
-      "echoes.ratings.colors.background.ratingC.default": "51dd2f0406f9a4e3a4a5ae86abad4f85421d4dbf",
-      "echoes.ratings.colors.background.ratingD.default": "081a74ab0611a5be399c7e3b8c7d848fa0470796",
-      "echoes.ratings.colors.background.ratingE.default": "187e7d8ed7c2395a933275e16d1ab39742e7f9ab",
-      "echoes.ratings.colors.text.ratingA.default": "eed78fb24d72ab38fcecefdeeeb9a1b44538a7c2",
-      "echoes.ratings.colors.text.ratingB.default": "abcbbf435af38f7dae02ba7ae9e36cc695633798",
-      "echoes.ratings.colors.text.ratingC.default": "918c3c63566b1870d2e50d9a972d101f656d0f53",
-      "echoes.ratings.colors.text.ratingD.default": "ee9bebc5a2c4a8fbf7db49bff25e55ab21eb2338",
-      "echoes.ratings.colors.text.ratingE.default": "62d0bc4dbf356b9c3551dda9a36eb3d44cf7c025",
-      "echoes.ratings.colors.border.ratingA.hover": "5e0f11b9c220a153480e43cc7be5be228cafc3bd",
-      "echoes.ratings.colors.border.ratingB.hover": "fa3168a54bf477a01728f946fbb383442533fa96",
-      "echoes.ratings.colors.border.ratingC.hover": "ec6646a978b11a257a082cd2d5a5e1419ea08330",
-      "echoes.ratings.colors.border.ratingD.hover": "4149274ec24d2d9b9c8b4c3a63dda2b1cd9a3bc7",
-      "echoes.ratings.colors.border.ratingE.hover": "06659f756b21dde499e1c0f57056c645e178cd53",
-      "echoes.severityBadge.colors.background.severity.blocker.prefix.default": "66cdeeaa8cd88cb1d01fa251f2f3cecb62ab32f5",
-      "echoes.severityBadge.colors.background.severity.blocker.suffix.default": "ed88df404d1b352ceae3f899e966efb9511d3693",
-      "echoes.severityBadge.colors.background.severity.blocker.suffix.hover": "3562de60cd115ebea8fa1b33556b360d2f45f6c2",
-      "echoes.severityBadge.colors.background.severity.high.prefix.default": "58c0d9b99d8ed24271dc6c75cf688cfb4792a4b7",
-      "echoes.severityBadge.colors.background.severity.high.suffix.default": "efb139cebcb01e48e46c7cf053d9f154dd238a03",
-      "echoes.severityBadge.colors.background.severity.high.suffix.hover": "447151e99c216f139c4588216caceae80e4156b1",
-      "echoes.severityBadge.colors.background.severity.medium.prefix.default": "f0ef8b1059decdcad35d94a271c1f2aa52f9857f",
-      "echoes.severityBadge.colors.background.severity.medium.suffix.default": "0c7ec9593354237ec6806432b9bbea73a079cec2",
-      "echoes.severityBadge.colors.background.severity.medium.suffix.hover": "f55756360dac6c91cadef2b6e766bb611a0649df",
-      "echoes.severityBadge.colors.background.severity.low.prefix.default": "ff451a683204d638a4cbce00ae3a919c6e856d87",
-      "echoes.severityBadge.colors.background.severity.low.suffix.default": "de59ae2e01445a991c77a6d9c90cb8c09f8d3b54",
-      "echoes.severityBadge.colors.background.severity.low.suffix.hover": "7ee00ecc7b12fd9efcbaf9405c286c5f32d208e1",
-      "echoes.severityBadge.colors.background.severity.info.prefix.default": "6e4b4f16bd574a8ff4db8311c0acfd5a4e59501d",
-      "echoes.severityBadge.colors.background.severity.info.suffix.default": "07da906d905025e0a04762c2bedfd9cdf756e0e1",
-      "echoes.severityBadge.colors.background.severity.info.suffix.hover": "3da52f50348fc3fcee280cd481b5a0a367804e2d",
-      "echoes.severityBadge.colors.foreground.blocker.icon.default": "bfcdf128fb7acaa7746a23409df7265b60cb4a69",
-      "echoes.severityBadge.colors.foreground.blocker.text.default": "1773d48e2d43078dfe8b1386ed31c43162c2d5ae",
-      "echoes.severityBadge.colors.foreground.high.text.default": "8c8a2bafa1d79cc54f297e77018536acd727d410",
-      "echoes.severityBadge.colors.foreground.high.icon.default": "71e64527268d8d8a4217ea42363daa98cac082ea",
-      "echoes.severityBadge.colors.foreground.medium.text.default": "dae1bd0248537cb03bc7f8c11a40cff987c5dc3a",
-      "echoes.severityBadge.colors.foreground.medium.icon.default": "28019705491f96d2075fa307df6bc424d58058c6",
-      "echoes.severityBadge.colors.foreground.low.text.default": "0447606046ad2e9f4d69aee927d3d91a1484dfd6",
-      "echoes.severityBadge.colors.foreground.low.icon.default": "5fb5d4cd16e77eb98cb173d4ad320b26276ac08e",
-      "echoes.severityBadge.colors.foreground.info.text.default": "4c3ac20d8a58f092b8a2de59eb9e58f2e0828ed6",
-      "echoes.severityBadge.colors.foreground.info.icon.default": "c1f5833b1b2c95cc3bd468b87b9d3f32750a4829",
-      "echoes.severityBadge.colors.borders.blocker.default": "5fca0c9bdf1f3536e5cadac3592fda568d0fc841",
-      "echoes.severityBadge.colors.borders.high.default": "e86ad9415293ee42cf5eb5188deadc02f9171f68",
-      "echoes.severityBadge.colors.borders.medium.default": "8661f82e7865e7d184d30c6412824b42e65fd65b",
-      "echoes.severityBadge.colors.borders.low.default": "88eb712a5667afbb22809b7b1655cf876482f0e1",
-      "echoes.severityBadge.colors.borders.info.default": "251e43ebc8197db02aeff43ecc7a0073e16ea5fa",
-      "echoes.table.colors.background.header.default": "da4b4f781fcf7c59154952111a828772c268cccc"
+      "echoes.color.background.neutral.subtle.default": "56419af82cebc38be77b717fab4fda867826a4b5",
+      "echoes.color.background.neutral.subtle.focus": "991def36746fd9e38593fb12029355c365fa9cb5",
+      "echoes.color.background.neutral.subtle.hover": "a15a4f6a00832d6a519593cccb06c059cd697e94",
+      "echoes.color.background.neutral.subtle.active": "6ff3a37e37a9f038e3e15171d4d41fc4b91917d3",
+      "echoes.color.background.neutral.bolder.default": "3881a631ce6d5a29eacd9c3b5b1a18e68188dc9b",
+      "echoes.color.background.accent.default": "3092218c3fbe286ead46859bdba61e1e6364e1ee",
+      "echoes.color.background.accent.hover": "b89181725ca048a3bd591580f3567bf01b56cccf",
+      "echoes.color.background.accent.focus": "d41e9c9ab1a035fa9a49748612f58f0ba91312d9",
+      "echoes.color.background.accent.active": "9014cc6d0d3d5f50daa0a9f8bf4e98ede404dae3",
+      "echoes.color.background.accent.weak.default": "cced52ad7fd547eefa641e60a1956cb3bff05c33",
+      "echoes.color.background.accent.weak.hover": "c7774f3aeaf081aa15a748af67a87fe551332cbe",
+      "echoes.color.background.accent.weak.active": "964b10dac569057e29c59b32ed3b6c0374b9593a",
+      "echoes.color.background.accent.weak.focus": "d3f414fe0efae7c96221f8c15bb3f5f9223153d0",
+      "echoes.color.background.warning.default": "984517b7575e75531a734c48d027fe22c2f23eaf",
+      "echoes.color.background.warning.hover": "91dfbf934553045c29139605f04c59e1dbb92f7e",
+      "echoes.color.background.warning.focus": "27917bb152d2359e38a09c8cc884a66782c58275",
+      "echoes.color.background.warning.active": "827fe44cf279a51fc1c7542ba97f953533918992",
+      "echoes.color.background.warning.weak.default": "3f8a72e14de8f204d1748e99eba8b8df53f0860b",
+      "echoes.color.background.warning.weak.hover": "c0133580221b382c68c6eb55c1f5b5495553d70e",
+      "echoes.color.background.warning.weak.focus": "59b6af729c94a91d59c50fc00eb028cf3cb06667",
+      "echoes.color.background.warning.weak.active": "5c76902df93497eaa4d81e84d3c22aa4c9416656",
+      "echoes.color.background.success.default": "e23ba5782d0158766308473caca47a35bc0569c6",
+      "echoes.color.background.success.hover": "25a7ccf2e2c371743f65a10b9d00ef065572ec6b",
+      "echoes.color.background.success.focus": "b73e73b26c5e65d9950d35db264fea32e5cef735",
+      "echoes.color.background.success.active": "feead31da334e917aa0baf243ad87605008857ad",
+      "echoes.color.background.success.weak.default": "0ce0eb49555b04f8a01c7e69370f5c669f724c22",
+      "echoes.color.background.success.weak.hover": "491ab68d521d8d41b4864343e1fb342e104a5330",
+      "echoes.color.background.success.weak.active": "ae1ebc721bcc7328b35eb837f5f71759c1b01145",
+      "echoes.color.background.success.weak.focus": "ace91cedcb95a7f4e8d9bab81127fa7bd9642040",
+      "echoes.color.background.danger.default": "69134dddc221cc6dbebfebcae0b7cdff2b5f8e73",
+      "echoes.color.background.danger.hover": "8917cd745eeef1f2faa579fac1d92e5c099a6f9f",
+      "echoes.color.background.danger.focus": "c109ee01fab1822d8354caabe0b15406f7489e6d",
+      "echoes.color.background.danger.active": "d38b3753a894df02315bc28417b7638426777fae",
+      "echoes.color.background.danger.weak.default": "796fbf44622c0737fe095131326c0dfeb35133f4",
+      "echoes.color.background.danger.weak.hover": "3f23d8d836fb00cebdd85eee6a7d3317045fc9a4",
+      "echoes.color.background.danger.weak.active": "00959726d6037c15cd445a8abb593173e8d7942a",
+      "echoes.color.background.danger.weak.focus": "b59d07f43dabd81e13900e0865866f7a702eb3da",
+      "echoes.color.background.info.default": "a0e0cc58c173afe0ff93000f1113894ba1f9d89b",
+      "echoes.color.background.info.hover": "d0cefcc1f36245d9439b4123c34edd09255d7fb0",
+      "echoes.color.background.info.focus": "5c113fcb92680b37ab8b905dc291996dd25e2fb7",
+      "echoes.color.background.info.active": "a87eb25e8e98f743a1ef70cd32cdd6d1b53d3033",
+      "echoes.color.background.info.weak.default": "431e986bd463d91c5796301605963d498e1806ed",
+      "echoes.color.background.info.weak.hover": "2751e00e58ba5f46253b9e981785d5c1def3faf4",
+      "echoes.color.background.info.weak.focus": "311f525b9700f617c1068fb9492e1c8ceb5e2dfa",
+      "echoes.color.background.info.weak.active": "f2c087faec815783fda608556e2585c9b17e177a",
+      "echoes.color.background.selected.weak.default": "b36c5f7f165049a0ceee1bc5a6f0cfffa5af995e",
+      "echoes.color.background.selected.weak.hover": "c39e2a75d2c0142df04c25c843d04e7c7460bbff",
+      "echoes.color.background.selected.weak.pressed": "95fb03b683a07e6bce7e9749c782de24e8520e41",
+      "echoes.color.background.selected.bold.default": "2bc5f89bb09a7cecc1ce17019b80303f0e1b65da",
+      "echoes.color.background.selected.bold.hover": "6f644ac3906f6d0149182efdc128e43299478691",
+      "echoes.color.background.selected.bold.pressed": "c233d990b0005662c2ae2c97f80f052db85c7402",
+      "echoes.color.background.ghost.accent.default": "d087009274633495d763e99e28dcf8624abd34ec",
+      "echoes.color.background.ghost.accent.hover": "89d844f88ae6d19ae28abd312af572e1f28e632d",
+      "echoes.color.background.ghost.accent.active": "5647ab61fa6a02bca7be3cc46882f54d8044e630",
+      "echoes.color.background.ghost.accent.focus": "82f22006479e37245e74f2d0e30409600e5a515b",
+      "echoes.color.background.ghost.neutral.default": "9255dad5841264fa1d58b2a75b54986603d2932b",
+      "echoes.color.background.ghost.neutral.hover": "50c0b282d46a3e465f0a12d10fe1625fe3c1b947",
+      "echoes.color.background.ghost.neutral.active": "ef25a640186fb045e58d4004c9c9fa78add829f0",
+      "echoes.color.background.ghost.neutral.focus": "913728063cee35f3bbba4debfe1504416c200d17",
+      "echoes.color.background.ghost.danger.default": "2b5b266ac276d5c34fb8f77b44bc9ec84a847326",
+      "echoes.color.background.ghost.danger.hover": "9929072489845f6353d1c762e4ff307580bcadda",
+      "echoes.color.background.ghost.danger.active": "4b9da229e8f66993025ad45a5f64e203912cbc3e",
+      "echoes.color.background.ghost.danger.focus": "9aa82b72e93254d57e10ea57ad3880090c369516",
+      "echoes.color.background.emphasis.weak.default": "eb02bcb94a0250bcadca67e41aa1f8b56e0c5ebc",
+      "echoes.color.background.emphasis.weak.hover": "b2228865d504219683de5f953b1f6d49f67a983b",
+      "echoes.color.background.emphasis.weak.focus": "280efd4dc5213216df7d09aef05ce6d3677fa1ef",
+      "echoes.color.background.emphasis.weak.active": "905eddaca4188dc2585c777135d37f8d6e26a37e",
+      "echoes.color.background.emphasis.default": "02a0f9d856a13b4f1f386e0e0094d83b3c40671d",
+      "echoes.color.background.emphasis.hover": "0bde9490c58b85adf2b0fc6c7debd35211df2d6a",
+      "echoes.color.background.emphasis.focus": "40d18f69234c56059048a5619aeff537c3005f8c",
+      "echoes.color.background.emphasis.active": "ead6b93e3585a3f998cba0baeca5f7ccece7f520",
+      "echoes.color.background.favourite.default": "f27dc5f3e079795d7fdc8a63a9e07d07e851820f",
+      "echoes.color.background.favourite.hover": "bffcfd479d16f937b3f10fa281743fc96593a951",
+      "echoes.color.surface.default": "42b64c71ff11bc87edd48e82b4716a4efc585b0d",
+      "echoes.color.surface.hover": "b2a4d385609067fd36f40176da7bfcdc7b891af6",
+      "echoes.color.surface.active": "5fb62b997a44d173c567cc7a9180b957ca36ef7f",
+      "echoes.color.surface.canvas.default": "c8c3427717e64b0c0ac2cea5bea75297052c4d07",
+      "echoes.color.surface.inverse.default": "36be3813e7cf2209fdf82ee63b27a67bbe6aab6b",
+      "echoes.color.surface.inverse.hover": "1ed550c0cc665b94eb881ca6cc249bad01b4df18",
+      "echoes.color.surface.inverse.focus": "89495dfd6e583868faf51cf7f80aa5c83d9f5e1b",
+      "echoes.color.surface.inverse.active": "01b8490646a6b072b782374f711de1f54850ad15",
+      "echoes.color.surface.disabled": "b773c32be67d280fcee8b53792a20d0277a45576",
+      "echoes.color.overlays.backDrop.default": "224af1d943e948a877ec722fb7a12d878cefe265",
+      "echoes.color.overlays.disabled": "936d7d75a557b92b3541b327f02b1f92fb9a8af3",
+      "echoes.color.text.strong": "926d6cfb4b650031e813b42aced21349122d454c",
+      "echoes.color.text.default": "02a4e2b8ea4f8891f23042231dead1001b45cb35",
+      "echoes.color.text.disabled": "6f12ba53e440ed719c00cb22bb1a3b9d52956a1d",
+      "echoes.color.text.placeholder": "d83d998c2cb6ae22518edf81df9426e4e8d73072",
+      "echoes.color.text.subtle": "4bf558403e4b1a2ac14a2570900ad26554abffe1",
+      "echoes.color.text.onColor-Inverse": "dd121aed759cecd1dd044af450f5814f8f4553df",
+      "echoes.color.text.danger": "55eda2f5401e13353f5ba0d42f0d9ec306051e1e",
+      "echoes.color.text.warning": "b9e612412628009c83ee6e4992f90d2e24af5a4b",
+      "echoes.color.text.success": "6a377514b7187548a9ac1151b5b0f261a9c47e1f",
+      "echoes.color.text.info": "5720c93cd62d0c106fc1e46be57c24e322b0c2af",
+      "echoes.color.text.emphasis": "639da7752ffe5ae23b6dd2548bcebc8de8ad9f98",
+      "echoes.color.text.link.hover": "49bb2c3498fc444bdf0693f92af344148f53c395",
+      "echoes.color.icon.bold": "1e8fee8e8e35f6637e396e874fd0446a4e89b8a4",
+      "echoes.color.icon.default": "a35cd3bff2854fdbc2c83830e14b5e66789a0d87",
+      "echoes.color.icon.subtle": "116cc7225e5b9f94ccc415db6ce42326abc9ebc2",
+      "echoes.color.icon.disabled": "6fd03abf78d58789eee3a64812f3a08829cbbbfa",
+      "echoes.color.icon.placeholder": "e1e3f4ccf61edb790a61432cdbe5dafb7a41b77f",
+      "echoes.color.icon.accent": "9b3877edbef1a2003dd8c9b4a6f7498993011b92",
+      "echoes.color.icon.danger": "f1c5e51892c80a47eb41fd9a5431e96666813be7",
+      "echoes.color.icon.warning": "a0531c8969d9b3f4bb199da2d1100f098a8ba223",
+      "echoes.color.icon.success": "ae01b72999c5f09652038e13976b744e6681aa7b",
+      "echoes.color.icon.info": "a01a6939bdac8cfc92b57856f98d248da051d255",
+      "echoes.color.icon.onColor": "f12a6060c31710609f8de8917d8e28c56dda61cd",
+      "echoes.color.icon.onColor-Inverse": "5d0f8d8d8c54badf67b3b235f4942062600bf47c",
+      "echoes.color.icon.selected": "5d80c23587b39878826d7ad6e625c5c34dfecb4c",
+      "echoes.color.icon.emphasis": "955f556023161c3a140fa68a79b0c40f444c0ff0",
+      "echoes.color.border.bolder": "fd7c7bf84b984ce7c3bcd87f0a535f740897d27c",
+      "echoes.color.border.bold": "155ca8f7f8728277496d01b2fb11dd36583c51eb",
+      "echoes.color.border.weak": "0ababc7b4ae825c66d925ac6aa00327574494e05",
+      "echoes.color.border.weaker": "7dd4267cc09c4a0f49581bcb6a28d560e7638ac0",
+      "echoes.color.border.disabled": "b1b92c569ce6cc61c306ff742f80079571614185",
+      "echoes.color.border.accent.default": "c234cdfad51ce5781e6f80ef4fde3d17dbcf2c0d",
+      "echoes.color.border.danger.weak": "3c63fed5c44690b6fd439790474844e7ad8db28a",
+      "echoes.color.border.danger.default": "d0027412a09cd4537f848abb1554d7776c331313",
+      "echoes.color.border.none": "b63431272af6be964fc1ff2265f81e599208a9be",
+      "echoes.color.border.success.weak": "e5a659a780f6b3b169f2db140d4d368228712a14",
+      "echoes.color.border.success.default": "d3f870d5789941999904b64d7bac9b968de0e539",
+      "echoes.color.border.warning.weak": "dcc059722e0ed58cdd02125b6cec4f64f2fbddeb",
+      "echoes.color.border.info.weak": "fc5e64249f53a595d96ec8c4c38ddbaaa8587954",
+      "echoes.color.border.emphasis.weak": "8e582ed78c78f99bbfd82847456af298fed706fc",
+      "echoes.color.focus.default": "7f97b0e47e1d318166fd3bba3acb4bdfc84351a8",
+      "echoes.form-control.colors.background.default": "718ad1dfb13440ea5caaa6241b73453d80a4987d",
+      "echoes.form-control.colors.background.hover": "4fc75e1109111ac62635fe1db5c9fd27bf3ad776",
+      "echoes.form-control.colors.border.default": "26c0096ef454b754739da06ce03ae722a2c032a5",
+      "echoes.form-control.colors.border.focus": "17971acc78511c227c40e1ae8783eda7266fb241",
+      "echoes.form-control.colors.icon.default": "24cad5515afed9562557e9121a41559361c077e1",
+      "echoes.logos.colors.text": "ebccc8741e2083427653926d79b20652e6fa821f",
+      "echoes.logos.colors.brand": "d5d90f80db8a0635728f4f57904e425aedd33589",
+      "echoes.logos.colors.sonar-whale": "11f99b3441b3cc59d211962d8d894fbb748368d3",
+      "echoes.bottom-scroll.colors.shadow.gradient": "360bec3ad82fb138e7020a387c2f24ee2fb3985a",
+      "echoes.ratings.colors.background.ratingA.default": "15ce92013a5795f1e9538f87b98193ee8fb40838",
+      "echoes.ratings.colors.background.ratingB.default": "40263a5df3584966c7279fac3128dfa5742b3664",
+      "echoes.ratings.colors.background.ratingC.default": "1b383ec5d98472c542cb57bfedfdfe0e03fc72ce",
+      "echoes.ratings.colors.background.ratingD.default": "335248eac2c35d785dc5c18f52b1e9318fe07dc4",
+      "echoes.ratings.colors.background.ratingE.default": "47a1d343853cc35b9c7b9e1cd0d681d893b503e6",
+      "echoes.ratings.colors.text.ratingA.default": "67f33e8cfb330549ced0435b23c3f2fabe257b53",
+      "echoes.ratings.colors.text.ratingB.default": "68fa266ac70038d34b6de45199bfef8b735321ed",
+      "echoes.ratings.colors.text.ratingC.default": "4478004856c0f32e34d00d42fd3c41dce0e97c15",
+      "echoes.ratings.colors.text.ratingD.default": "f474f045b0d10b0c0b3315633f695c5661ae183f",
+      "echoes.ratings.colors.text.ratingE.default": "234b86448a605b0d31d030d34926a797fca3d0f5",
+      "echoes.ratings.colors.border.ratingA.default": "c71e6bea2e37619fe5191c90dca73f6febb686f2",
+      "echoes.ratings.colors.border.ratingA.hover": "596f6841d34338a5689fed56a02039474c3d9362",
+      "echoes.ratings.colors.border.ratingB.default": "7758f53082008ba38e8e86044a637e69c57bdfe8",
+      "echoes.ratings.colors.border.ratingB.hover": "e9b60c8152870dbef145b36d906dfddb1bf32249",
+      "echoes.ratings.colors.border.ratingC.default": "103f7d9720bf99e0168b14a84b4adbc4b9d0edee",
+      "echoes.ratings.colors.border.ratingC.hover": "e0bf60bf1ae510f7b84ec1f4e7c2e178acb12cc9",
+      "echoes.ratings.colors.border.ratingD.default": "35d7eaa8f7d6b9aea0975125561db6d0071b2991",
+      "echoes.ratings.colors.border.ratingD.hover": "9d499d1bd1a1350e00a79c3e305ef173911c205d",
+      "echoes.ratings.colors.border.ratingE.default": "4d02ec6372304dbe743316ce2a63b531144263bb",
+      "echoes.ratings.colors.border.ratingE.hover": "6b4fc53bfb0db06155b1e4eaa1dd8c5895f9edb9",
+      "echoes.severityBadge.colors.background.severity.blocker.prefix.default": "8d1c785d2d22406d156649e4be9dab1ab3296e7e",
+      "echoes.severityBadge.colors.background.severity.blocker.suffix.default": "a8d16d8e1063a93ce1c62cd87509037e3fa09a36",
+      "echoes.severityBadge.colors.background.severity.blocker.suffix.hover": "a7c8c4cc86d58b64a4d68b6bd6769477cfc81f6e",
+      "echoes.severityBadge.colors.background.severity.high.prefix.default": "fbec7d159f83bfe1181408cfda6a13614a86a205",
+      "echoes.severityBadge.colors.background.severity.high.suffix.default": "b586b20469fce2573adfcc68be418df95df021a5",
+      "echoes.severityBadge.colors.background.severity.high.suffix.hover": "f22dccbf722609bb5c588778db9763b404988b55",
+      "echoes.severityBadge.colors.background.severity.medium.prefix.default": "6f009671a6b27e571dc72ef39cfbc0897dcf51c0",
+      "echoes.severityBadge.colors.background.severity.medium.suffix.default": "69b9d5c988b9ead528951ec6840b8f944d83345c",
+      "echoes.severityBadge.colors.background.severity.medium.suffix.hover": "68c2c49c4f6ea96675c720b0c4a132450e73c356",
+      "echoes.severityBadge.colors.background.severity.low.prefix.default": "0d100396c09677583e06aa39dc87aa8c1f243f40",
+      "echoes.severityBadge.colors.background.severity.low.suffix.default": "f3f1cd42ca0afff618aa3b7ed5f29b0f19b73b2d",
+      "echoes.severityBadge.colors.background.severity.low.suffix.hover": "7f8a8c0bf25af16ec847bfe7b399547b091fc45f",
+      "echoes.severityBadge.colors.background.severity.info.prefix.default": "8a68ec2b0e29a53dfdd08f2c22b8137ce2b879b0",
+      "echoes.severityBadge.colors.background.severity.info.suffix.default": "672a8a1b4a0f89573b57353ee29e96f63c4577b3",
+      "echoes.severityBadge.colors.background.severity.info.suffix.hover": "13bc74b3bf4590ee42742d3f664052a77e95c94b",
+      "echoes.severityBadge.colors.foreground.blocker.icon.default": "503010ba75d646048c1179d73fa440aff1601e31",
+      "echoes.severityBadge.colors.foreground.blocker.text.default": "bf871c62c9ebc08366f21b201a844e93f8083ce7",
+      "echoes.severityBadge.colors.foreground.high.text.default": "4f4328d56e08b820a11f4ace1e6297a09bfcedf8",
+      "echoes.severityBadge.colors.foreground.high.icon.default": "29fa680256a40184707dbf5381cbabe1ee8bd96c",
+      "echoes.severityBadge.colors.foreground.medium.text.default": "c3eb4ee69bb12c269ec57aa8437237844af2a7e0",
+      "echoes.severityBadge.colors.foreground.medium.icon.default": "991ed8a6c8b81eb26069f89228e2948abbd5b1a5",
+      "echoes.severityBadge.colors.foreground.low.text.default": "055ab821c31c9292dff8922b2e7a0b3724de884c",
+      "echoes.severityBadge.colors.foreground.low.icon.default": "a88c2433896fdb81f3df389d0d729321c3b0332a",
+      "echoes.severityBadge.colors.foreground.info.text.default": "6577bd8f856e9f336e7c4e1cc800c6d4065628a0",
+      "echoes.severityBadge.colors.foreground.info.icon.default": "8d3338f2da4cbd279d5af01f3e7af4a7cb9ce125",
+      "echoes.severityBadge.colors.borders.blocker.default": "f7438fea117ed004fff28844bd0a4dd93ac8f8e6",
+      "echoes.severityBadge.colors.borders.high.default": "597305d78ce53b836d61223d512356ae6bf00892",
+      "echoes.severityBadge.colors.borders.medium.default": "4bfaf8e4fa12d01276956818d656eb7876123acf",
+      "echoes.severityBadge.colors.borders.low.default": "4cb84e0f840c0ebae565d0bf0fe803b6b1bdc440",
+      "echoes.severityBadge.colors.borders.info.default": "321d33f50f2d408a1e3e85ef1a8c37b73c0d434a",
+      "echoes.sidebar-navigation.colors.background.default": "f91d0179d2863ea657f13100d95dc97692aed879",
+      "echoes.sidebar-navigation-item.colors.background.default": "afde2b77f3ce92e777e5e0aa7343099e7fc4cbd5",
+      "echoes.sidebar-navigation-item.colors.background.hover": "44f88ec67128390c3a73cef37f9d1e5de4d4a6a1",
+      "echoes.sidebar-navigation-item.colors.background.active": "deb51d830d9fe1cab789fd758f0afaf5a2bb3728",
+      "echoes.table.colors.background.header.default": "45a90245aad271b5a3e0ac918c2a784232888321",
+      "echoes.color.background.onInteraction": "0db613423f0e21fb17afc3e864ae7922ec650129",
+      "echoes.color.primary.onInteractionWeak": "da904856f2cc7e1cb78cfc92dd42d62f6232c5ea",
+      "echoes.color.utility.transparent": "9dab5acff2709b58b50b066159d9675eb3c2677e"
     },
-    "group": "Themes"
+    "group": "Modes"
   },
   {
     "id": "a6dfdac750c6c5bad68ee3f0d90c7f865a47dd3c",
@@ -409,210 +799,224 @@
       "echoes.typography.display.default": "S:a3191c4414e01738df6b3348c57ffa4f1406341a,"
     },
     "selectedTokenSets": {
-      "layer1/base": "enabled",
-      "layer1/colors": "enabled",
-      "layer3/base": "enabled"
+      "component/base": "enabled",
+      "brand/brandA/base": "enabled",
+      "brand/brandA/colors": "enabled"
     },
-    "$figmaCollectionId": "VariableCollectionId:210:98",
-    "$figmaModeId": "331:0",
+    "$figmaCollectionId": "VariableCollectionId:2:1074",
+    "$figmaModeId": "2:11",
     "$figmaVariableReferences": {
-      "echoes.dimension.space.0": "eaef1ec0c56ab8e364139e82908b360eea800329",
-      "echoes.dimension.space.25": "a56a1d8d0ab2fd66fa41ec2aa4177d6b123f3a50",
-      "echoes.dimension.space.50": "ff4361a36a286a39a2c34aa4387a50999c181cf0",
-      "echoes.dimension.space.75": "39cb7c080f6a34b06b7a93c4dc808cd322b32bc2",
-      "echoes.dimension.space.100": "f88952b83858ac41813cb4d8c00eb452544bd459",
-      "echoes.dimension.space.150": "13a442889e8e66b97bd5cdb4db8933908c0e5580",
-      "echoes.dimension.space.200": "861b43fe88effc288140f846dca6dea680aa894e",
-      "echoes.dimension.space.250": "a13f20570463f9b66ce0f600493d3f64c6d4c135",
-      "echoes.dimension.space.300": "3b993c205923c1b8228690c07e6e4a9f131a4ed7",
-      "echoes.dimension.space.400": "168b459f182dc797ecde988c77386537f3f6cd88",
-      "echoes.dimension.space.500": "06a6424936c6499b37b3ec1f3d56293150b8136c",
-      "echoes.dimension.space.600": "20b6effd6862bbfa548240ae15e18cf93017449d",
-      "echoes.dimension.space.800": "8047e49bf2889efa7be08a9cca49c5ef1aa14dd7",
-      "echoes.dimension.width.0": "c368e1f496e2624df2caa24a1cc6bd0b73e236fa",
-      "echoes.dimension.width.25": "d51f52f746dbdcb894f0450e9cb61be7b0d30195",
-      "echoes.dimension.width.50": "19e8ce5f7225e2b08fb5c56f05d2177b99ac0e26",
-      "echoes.dimension.width.75": "0d2976bfa60364be60d45110f936ced356d5f52e",
-      "echoes.dimension.width.100": "e0fc9da468b2e3577ee09f2aef4145b2ac83ca36",
-      "echoes.dimension.width.150": "bfe1a264f247960fce09826e6c2154d747b5d13a",
-      "echoes.dimension.width.200": "f3666353db32a8a253e6206e6a2821970b8ee2e3",
-      "echoes.dimension.width.250": "6e9428f17aa387cbb1ec9babe6689f6c551b82d8",
-      "echoes.dimension.width.300": "036cf93b2174da7a006b31931b2151bd75ec90ee",
-      "echoes.dimension.width.400": "f853483148d90b6c7f7ae839a52b7b941b548e32",
-      "echoes.dimension.width.450": "c67eed0e09ae53697af8c6a3e3eefdb66328013f",
-      "echoes.dimension.width.500": "bd02a39633e70f134a9885e620277623237b2713",
-      "echoes.dimension.width.600": "39ef1977221b2c9514ec278735de9f22aebb23d9",
-      "echoes.dimension.width.700": "be8bb8b49f025dd0423e5658bd699fe8a8097255",
-      "echoes.dimension.width.800": "97f6ccdda2bcc8cd3281ea5767f3e2bec177dd7c",
-      "echoes.dimension.width.5000": "fd765cedfb5e22d3b49e198e55062fb5c64132e2",
-      "echoes.dimension.height.100": "12b777535b017a216c0a21c610122514193c4bc2",
-      "echoes.dimension.height.150": "fd15221687277860bfe7ca5aa2bc45e795fd8ca3",
-      "echoes.dimension.height.200": "81191abb6242a067399719a3f45c1d984f30ef34",
-      "echoes.dimension.height.400": "410e63a648a5d4d7694c471399e176a39ae44efb",
-      "echoes.dimension.height.500": "ff418729c7c153ab2e906349b2eb547e5860a7c1",
-      "echoes.dimension.height.600": "cbe89ba4d38a2b384a3ef855b1d4b23d4c24c71d",
-      "echoes.dimension.height.800": "92f2294663fb6af3fa20407f05fabf3c9babd0cf",
-      "echoes.dimension.height.900": "cc0bd3b51e239f1389630fe99616d6992a54ed51",
-      "echoes.dimension.height.1000": "0233ccee3db5a5b3c400088a53d7f1511e20c9a9",
-      "echoes.dimension.negative.spacing.100": "980001347353abcff8bc14e25171a7c65ca98890",
-      "echoes.dimension.negative.spacing.600": "20085adca33137a67a698b46ece599365f8580c0",
-      "echoes.dimension.negative.spacing.800": "6fd049bfce7ef525c1077390c8f2102b47872c54",
-      "echoes.borderRadius.100": "ce9709978eeea4d99a9bb13a5e5cecb4b8f6b6bd",
-      "echoes.borderRadius.200": "95a683fbcecbd4be2f6eb8cbb25a2669823e60a5",
-      "echoes.borderRadius.400": "f622ca35f84d161e9eebe9b2b9a75d02ff5ced21",
-      "echoes.borderRadius.none": "124ef79f389fe3c629175e9a185d6799c577b381",
-      "echoes.borderRadius.full": "859601b12f20251b877a0175ec81e63e0ba1f3cd",
-      "echoes.fontFamily.mono": "20e0fe307e313775871cd157fd03ea278828d65e",
-      "echoes.fontFamily.sans": "b11fd1fd505b44444534792d0d5a038ee5023071",
-      "echoes.lineHeight.10": "d99328e389d2fc613f86d192f219e779cb4f0683",
-      "echoes.lineHeight.20": "2c4c5553a881907c1628659f09bf1220b7ace9fe",
-      "echoes.lineHeight.30": "99aae259251c6ba948c46882b318578d10647401",
-      "echoes.lineHeight.40": "a18ec1995bce492ee45d6492ce428ef5b91cb2b5",
-      "echoes.lineHeight.50": "efd397739e818f8e27207e5a1d8d4deebb581936",
-      "echoes.lineHeight.60": "8beaa930239c29143138d75b3da83003079a3059",
-      "echoes.letterSpacing.default": "983f6115e374e5c4175cc355530defe42e95f2c6",
-      "echoes.paragraphSpacing.small": "28332ec899a881c90617c5d28a626ad74e682330",
-      "echoes.paragraphSpacing.medium": "3ba88489ef9979809cac00de77f2daad86b815c7",
-      "echoes.paragraphSpacing.large": "b1bb2e472b2b39255a2a7f9ae131ff032fa14d06",
-      "echoes.fontWeight.bold": "2025bbf3c5cc14f1cba39c753acabbabe8d1bfd0",
-      "echoes.fontWeight.semi-bold": "4ff7642795bc902fc4a59e061ab7ee39257ca750",
-      "echoes.fontWeight.regular": "b7dee24295c644a381f162116598aa5c9fd6cf06",
-      "echoes.fontWeight.italic": "940c2866780cc6c21c17b2822ba801f4a2955bd0",
-      "echoes.fontWeight.medium": "95899bce3d72cc5df97ecd235fd5ccc44a90a00c",
-      "echoes.fontSize.10": "e222b8d40eb7a3eaade96c134eeef19affabe8a6",
-      "echoes.fontSize.20": "ea626fff0289ec9a1b5f9c51876a4407539d5073",
-      "echoes.fontSize.30": "8ceb14bb6bc1c4275df6d8fa85cb5e59bf82f8b1",
-      "echoes.fontSize.40": "91aa2bb7ba9ff4c9f15da238e693058203823824",
-      "echoes.fontSize.50": "f87bc54e265ef9622c51c8678b6576b16826fbd1",
-      "echoes.fontSize.60": "ce46d752c257155e8bcf4c3a45cb8bd706d511d8",
-      "echoes.borderWidth.default": "14a6e497c8e74a52e550fe5e59bccf04b9831719",
-      "echoes.color.support.black": "3be314db8940477cfc1d356f1c4def30e13c37db",
-      "echoes.color.support.white": "a85a694466abb4a88c579d58b5a17ae173410abb",
-      "echoes.color.support.transparent": "d3569826baddafd10070902d501b36d21649260c",
-      "echoes.color.grey.25": "a9440ec2cca81ab9405ac09a500654ff7beac4a0",
-      "echoes.color.grey.40": "b2a7d9a65bdf5a23e265066ad04fb5de877f0a54",
-      "echoes.color.grey.50": "f241a3739ccc185ce946239078d6b4ddc11f1114",
-      "echoes.color.grey.100": "d31e3052c013b62f7e6764a286463e10f29fe306",
-      "echoes.color.grey.200": "803f7b3e29f1073e6811e25076bbfe23650000c1",
-      "echoes.color.grey.300": "4c99cb934a1557268882d4993ccaf912824d8ac2",
-      "echoes.color.grey.400": "d6d62ce40fff676f4899ec25dc7c48c88ba49a03",
-      "echoes.color.grey.500": "cc4610e0cdea33afd30e01b184de684fa4d85b57",
-      "echoes.color.grey.600": "10b00362a0721ab3ae871ca1a18e560887478731",
-      "echoes.color.grey.700": "84d16d0c51d23ea4a56ff6d7999f16dd3ca3fb94",
-      "echoes.color.grey.800": "9386061fe430ca0302824885806c5ee4af18d0f1",
-      "echoes.color.grey.900": "52f3c0b65a5b9d238ba3e0e00e5be152b515b1a2",
-      "echoes.color.indigo.25": "352b77c0244d049bcd02fd76a7978b9dadd729e7",
-      "echoes.color.indigo.50": "e9488dc1edfd31ac20efdb8fca8fb2db2edecbcd",
-      "echoes.color.indigo.100": "e330d153760bea09085a4acde0b1be2a8118e631",
-      "echoes.color.indigo.200": "9ab61e0d6d4e01cbddcb47c1f0cc327fcd438ad7",
-      "echoes.color.indigo.300": "90cadcb280c7b8612c35622418d24bdec12f105e",
-      "echoes.color.indigo.400": "52b6fe5e86be1f30d52d100e7bf06673988e4516",
-      "echoes.color.indigo.500": "0469f0851ab474b257ea330cd89e4bcf4d75c6b7",
-      "echoes.color.indigo.600": "05a3565d79900be9f330a07a280ade371267ad2c",
-      "echoes.color.indigo.700": "8d09d6ba75b8898d0cc6c5eb8fbb4723a950e4b0",
-      "echoes.color.indigo.800": "d3f6c48c39ce2302ed8d5cf86e7988d9c520f262",
-      "echoes.color.indigo.900": "bc0fc7929fedc1f234d33d3943a4518723c86df8",
-      "echoes.color.tangerine.25": "33e3f232adba2d8780dd74443ada0541b396fc1c",
-      "echoes.color.tangerine.50": "58c1c9bbf338cb4755b71c858d3c3905ac721be6",
-      "echoes.color.tangerine.100": "143e63cb97bdd98e3aafac154eb1e5d837facf8c",
-      "echoes.color.tangerine.200": "2d9fc796e05b157da1e38a182de9961bb974d615",
-      "echoes.color.tangerine.300": "93c4f0f91f208403e7f5dd11d48c75f877797009",
-      "echoes.color.tangerine.400": "df15faade9773012509cbe57fe0e950b778fd01c",
-      "echoes.color.tangerine.500": "624cb7141fd57574dab2a7aa9583ff5313ef09d5",
-      "echoes.color.tangerine.600": "6935939cd18f6d048f2c8186bd3b9fbf78e9c3fe",
-      "echoes.color.tangerine.700": "8073faea032472ce0714face8e57ca813b01eea5",
-      "echoes.color.tangerine.800": "d9e3d903f7ca3d93a07991e0567bd33b77247ce7",
-      "echoes.color.tangerine.900": "c2d0d38e2c53bb2869fd53ebb06b118e57489e48",
-      "echoes.color.yellow.50": "420e448eaf0f1c4a258cff0c8cd6b16ddd94752a",
-      "echoes.color.yellow.100": "86b351e577de0854432beb9ee459281b856174d3",
-      "echoes.color.yellow.200": "84b51ed311c6a6581fcc07423cc3d64ff782736b",
-      "echoes.color.yellow.300": "2390204894c23cb610f6ca7a831b14962c77a981",
-      "echoes.color.yellow.400": "de1e36c76d0e303f1eeb7462db53e68a47de4e9b",
-      "echoes.color.yellow.500": "1322744264a57fca339398f0f643253f233f7bdc",
-      "echoes.color.yellow.600": "2b4550680dace180948af6f6f253376d0764878a",
-      "echoes.color.yellow.700": "0dc5ae5e7c6c88cac7175523c32b940ff9e19dcb",
-      "echoes.color.yellow.800": "15a7b1cd24a4dcf6f3dbce8ca561dc4db63f0220",
-      "echoes.color.yellow.900": "d55f55f0ca5a35c200ad8fcfc19d2860e3b8536e",
-      "echoes.color.orange.50": "f3ae572900def498e169d79fb678ac8fab0b3759",
-      "echoes.color.orange.75": "c4a6a214bd4da5d0b5df136c9c87ad974afa7810",
-      "echoes.color.orange.100": "04bca2a5892614c8ac030574352fb991bc9d6193",
-      "echoes.color.orange.200": "3b0d7746244c16450d6e96865ae3cbc926625467",
-      "echoes.color.orange.300": "a76ac5dd6da26b78e1ac7bfd2325c1c4c6e05fdb",
-      "echoes.color.orange.400": "78a7ab8ef9d21ec9bf4af6360c0ffdda687012c6",
-      "echoes.color.orange.500": "5207083dc9a400c42522924e8e872a6e7969dae2",
-      "echoes.color.orange.600": "aba8ced1be0bc6a912bbe33b8f6c86ca274294fe",
-      "echoes.color.orange.700": "a2b7f2157f7efa496679a905799c446966c31f87",
-      "echoes.color.orange.800": "761b9f9f0569dd4b346e3d826eaf1699e5d4e2d2",
-      "echoes.color.orange.900": "ba73eb8791e6533737b18edea8fb2b6ddf90fa96",
-      "echoes.color.red.50": "44cba44aa35deff4a1a1bbb6642a3727df71d862",
-      "echoes.color.red.100": "e4cd26197615af7362f8a5faef02799703128c90",
-      "echoes.color.red.200": "4078c040aa700ca590060ac03abcae37fc4dec0b",
-      "echoes.color.red.300": "bd03bc4f3b43ceda5e02af377ed94d1b2727da90",
-      "echoes.color.red.400": "519049f55146aaf04730482062e95c28efbbddb6",
-      "echoes.color.red.500": "3356d0f00f3b21531ba95002c17a76e3690da105",
-      "echoes.color.red.600": "7a9bdf118f6afccb1d825ca08d41e80e3f0def3d",
-      "echoes.color.red.700": "eecee4baf7db63f3103114671c46a4e31f3daa26",
-      "echoes.color.red.800": "4fabeaa5dde0301d378256e0b0124557a42e3d6a",
-      "echoes.color.red.900": "daa06b737ba19fa341f292a9bbe28e2667558d7a",
-      "echoes.color.blue.50": "b6359d624f95130471362e88548dc0315550eaa9",
-      "echoes.color.blue.100": "360ebff6bf5a0aa490c732a5934e7dd96b50eaa5",
-      "echoes.color.blue.200": "34c62db69cc4f882c5a043ffe975a51bfd677961",
-      "echoes.color.blue.300": "ebe0480904c5de8cacf19acb54bc3cce7f9a694a",
-      "echoes.color.blue.400": "79d8adc26d3e8f6213a6e66ab3d2b45dc0513ffb",
-      "echoes.color.blue.500": "ee4b23169e71740b8317d5c28cb5922efc98d847",
-      "echoes.color.blue.600": "4e96f1bd9d8f9b22950405e882b9762730cef879",
-      "echoes.color.blue.700": "d3e898b1b59f243b811bd6d7008020b8db166bbe",
-      "echoes.color.blue.800": "9b59031b6ac79d86f1c916be5fc23f349582d454",
-      "echoes.color.blue.900": "4a99c74b60b2ca3e295457c126faf1138c5686cf",
-      "echoes.color.purple.25": "6692412ee4c8cb2905d76c23fd45224c41cdfff3",
-      "echoes.color.purple.50": "98849b04e24ec4d7842aa18add5b601c53ffc834",
-      "echoes.color.purple.100": "7033e910bd214640ec3e10076308c7bd813f49ad",
-      "echoes.color.purple.200": "b6a7798af7645126a0cb0bb72586103b6c4b069d",
-      "echoes.color.purple.300": "bf99e59ba5ce6d1397f170e2b9bb1933ef82198a",
-      "echoes.color.purple.400": "9560249fbe88cb7ac0f2f829b3ad0846de3dc902",
-      "echoes.color.purple.500": "4d8429df1cc1b9b287b2525e8a5802d89773c631",
-      "echoes.color.purple.600": "f47ceaf6aebb73809cb5a5d44ce1a4f814a3ae3e",
-      "echoes.color.purple.700": "4aee117b257a368b5754e17e17b0ac026d5ef4ad",
-      "echoes.color.purple.800": "646a7a82003966be6af923fcfd17c30070c771c2",
-      "echoes.color.purple.900": "84a4f86103f4e4964983fc9454a3baffbe04257e",
-      "echoes.banner.sizes.height": "806e508c7730f776f4db1361d4eca4b8e50884ce",
-      "echoes.form-control.borderRadius.default": "9b8e615c0117ca406db1a42f3253bfc1faf9aea3",
-      "echoes.form-control.sizes.height.default": "336d3f082a3ce64627975a4198457a4e12bdc9fc",
-      "echoes.layout.sizes.max.width.default": "bbf6bd6f43b125716722d3c90424fe73da7a7144",
-      "echoes.layout.sizes.max.width.large": "18022f20b390a2dc423e7be4ef98b0d73f7c3f91",
-      "echoes.layout.sizes.min.width.default": "84d64f23821c333d0c36baa0b45e44fc9de18e4f",
-      "echoes.sizes.overlays.maxWidth.default": "d5758e3700b744a6ba77bd7d16aad6998fe3cce0",
-      "echoes.sizes.overlays.minWidth.default": "1b3d874db55ed8e1c7aa5d7abb6d1d2e8428192c",
-      "echoes.sizes.overlays.width.small": "a2ae54019f4590c9d1a5015a58f0628ed6823fb4",
-      "echoes.sizes.overlays.width.default": "cc7db20523a1862a1696209825581aae4dac4566",
-      "echoes.sizes.overlays.width.wide": "92b7c6387a4975283f64df7b84338595eea97d75",
-      "echoes.sizes.overlays.maxHeight.default": "107015598a6fd6f234715cb16f915a7a8f430bf5",
-      "echoes.sizes.form-field.small": "c4ca82424cbf2c7e938fdee3fae05abaf1c8137c",
-      "echoes.sizes.form-field.medium": "cab70ab35722f36c73aa318833e477c6cd71258c",
-      "echoes.sizes.form-field.large": "5abd5eb663ccb062d53eb9fcd048ec89af73e644",
-      "echoes.sizes.buttons.medium": "b505d32430042f0ec5d5ed46c73240eeadfe05e4",
-      "echoes.sizes.buttons.large": "2fdf73ea3036b807d1ac57beb18c2069f9abab18",
-      "echoes.sizes.toggletips.height": "cf72bf230aff15d1fdd690ffae019adb53fb4dbe",
-      "echoes.sizes.toggletips.width": "679d595f4e4bf7695461fb58b8b39698a4c3f3ce",
-      "echoes.sizes.typography.maxWidth.default": "b1887d8f457f08b370906943e77644be9afc481b",
-      "echoes.sizes.logo.height.small": "e30ba8cd41a17854a460080cb0ff489aa01d7898",
-      "echoes.sizes.logo.height.medium": "b7db71683694a9025eedabd9cfd235515489db27",
-      "echoes.sizes.logo.height.large": "9303724348d8c8de6a13eec7fca365bf98ab3ff4",
-      "echoes.sizes.breadcrumbs.maxWidth.default": "10b5f7f89f0388c768fcdebbe21f0efe8fc0f87a",
-      "echoes.offset.dropdown.submenu.panel.vertical": "55ae99c05ca0b4de39c7bf9e3232586b7c809bf4",
-      "echoes.offset.dropdown.submenu.panel.horizontal": "059aedad27ec5a93035078d307d5805f9554fa77",
-      "echoes.table.sizes.row.minWidth.default": "88f02c5c2e46e4b0d9a41cf62ca6d300b8c9e9a8",
-      "echoes.color.green.50": "a8fe7a90c2b2a6cab20e9e65813545e9d0df72f8",
-      "echoes.color.green.100": "4adc50aa943b0709d56a0d03943f38c3797a6946",
-      "echoes.color.green.200": "45ec67822d8afc55550e3ba882ad80683af5c097",
-      "echoes.color.green.300": "0ebb340f00bc7fd11e7e4e97d4ac951e8889aac4",
-      "echoes.color.green.400": "07ed1f00c209b9f7bee8187871d85906291add82",
-      "echoes.color.green.500": "30f634310804eef9beba8904872d8c609daf73bb",
-      "echoes.color.green.600": "c86a4402b9e0b80e624a0add27766e374b27b921",
-      "echoes.color.green.700": "c03369495f3a30c3c09dc5c525e04f8b7c4fa869",
-      "echoes.color.green.800": "e0871560936738dbcf1636dcf7860e6a0f91b1a1",
-      "echoes.color.green.900": "287978d28f52cab25fd50cf7df92591b0a828d39"
+      "echoes.dimension.space.0": "a97c3c16031443044679c659f5e44880428f9d17",
+      "echoes.dimension.space.25": "98ee7116a1c0ddc692dcacfc45858ecbddb52347",
+      "echoes.dimension.space.50": "67f243ff41024d514bc741c7ab23e323bb1b3013",
+      "echoes.dimension.space.75": "19860d6f9b60739d2badf3de18fb0d29234137d7",
+      "echoes.dimension.space.100": "19f0f954375024391dae87342c559d522258ee1e",
+      "echoes.dimension.space.150": "ae77d873b0699648726cbf74c612bf9fcd30a7e2",
+      "echoes.dimension.space.200": "b56bcbd355a19b03fa3c70904051bc80e6eaf6ef",
+      "echoes.dimension.space.250": "4783133ac6b42c80731b7967fccfea055445db93",
+      "echoes.dimension.space.300": "d1efbe1bef1c9b44db126b5112ccbf874ada013a",
+      "echoes.dimension.space.400": "23e65700029f266a49f1fafcb472e968c663eaf7",
+      "echoes.dimension.space.500": "7d44c06bf1d563fb17844c170f4fafca1da4d174",
+      "echoes.dimension.space.600": "c67fc57269ff66ea5bea3625a49d81fbea779649",
+      "echoes.dimension.space.800": "ee9222e3150c6d1952fdec2d6edb896ed7972384",
+      "echoes.dimension.width.0": "aa10cd7e9293de8eab69073fc3237dbcd34ba0af",
+      "echoes.dimension.width.25": "6773272e3c9c3dd1ade592067d23e61f81c65dd4",
+      "echoes.dimension.width.50": "f6e70bad19418e03c4e8382a47f4a87bae0c08ec",
+      "echoes.dimension.width.75": "3c870f5a456c41b7f13281637b932cb255e90a32",
+      "echoes.dimension.width.100": "34dff005c5e2bae4249cfbb23d92bd88691ab779",
+      "echoes.dimension.width.150": "a61f039e57894f5bbf3512f225a8a0283d21b234",
+      "echoes.dimension.width.200": "e06b66c55cca78028460f5485979966830918fdd",
+      "echoes.dimension.width.250": "296ec044afc3e7deb090317c8c6f2934d15161f1",
+      "echoes.dimension.width.300": "f4f5517d998551903d9637758dc2d5577672ea47",
+      "echoes.dimension.width.400": "61f8d7e34d6148174a97bd7000ff1f03bef6c7df",
+      "echoes.dimension.width.450": "9368fa7ee86409eea97b2e33bb763dbb7f30b92f",
+      "echoes.dimension.width.500": "4fed148231a9c5f5b8e7e2f455b8cbf52534e9dc",
+      "echoes.dimension.width.600": "27062e0530e03841a8f8a9c7bc73ccf960928a8d",
+      "echoes.dimension.width.700": "f938ee3981b417b6f75be238cc902cdc93e9f4c1",
+      "echoes.dimension.width.800": "2e28260c4ba34786509c3ad54801b4b0a3557291",
+      "echoes.dimension.width.5000": "9273177989dd0dc07e6070c1e2ab2bad3462a722",
+      "echoes.dimension.height.100": "c725a6550a205945154da1b8b6a1bc7418e9a903",
+      "echoes.dimension.height.150": "0c060dbb37d4e34cc301fbdb468c6a45b6b5f6bb",
+      "echoes.dimension.height.200": "37e6e95b87820ce52736674583102e8f4f7acb82",
+      "echoes.dimension.height.400": "b05591c536c6b238c090520549fd9d44ad0b4b48",
+      "echoes.dimension.height.500": "51583b5c37fddcddab74a68c61d51d7d6743a64a",
+      "echoes.dimension.height.600": "06a7aaf28c0db128fde49eb643ca3d077fbabec2",
+      "echoes.dimension.height.800": "3b7a24d4fc031a8d1b4aaeb21943f863c23a70c3",
+      "echoes.dimension.height.900": "2e8d20fd2e66ae133ad95030eec213932b3ce69c",
+      "echoes.dimension.height.1000": "b1269220541c58f4b7f3390cf0deec7b602b8110",
+      "echoes.dimension.negative.spacing.100": "ef310997fdb369223f0c67ade8b099cd28b4f4dc",
+      "echoes.dimension.negative.spacing.600": "2efc1093e095699ffbf686d9082eb167a22f1aa5",
+      "echoes.dimension.negative.spacing.800": "6edd1657cd41d7558889369097406a2d205b01b2",
+      "echoes.borderRadius.100": "147d4a28ddd10d18e0ac134f6fcdcf11ee3fd4db",
+      "echoes.borderRadius.200": "706d56b187f0b44b055e740ef3d25e5260e8b0e5",
+      "echoes.borderRadius.400": "5db88bbbff7d502000d4faa300137ba0593441f4",
+      "echoes.borderRadius.none": "0b93ccef0b1731c63ee4c9e72897e6766132b8a8",
+      "echoes.borderRadius.full": "378fa127f50848b5725ceb685a4c6520421084ae",
+      "echoes.fontFamily.mono": "90e3aaad80bf2fa23e5b71bd03db98727061e8b7",
+      "echoes.fontFamily.sans": "0f3281a4ebaa81dbc202b48bac4bc80d0620db3b",
+      "echoes.lineHeight.10": "e77540eb6737f9bd26e0d7aad66b4bfffc2a7796",
+      "echoes.lineHeight.20": "fa9411929662244305997ca5181d036199b1e205",
+      "echoes.lineHeight.30": "ce38333617ccb58cb893249777663a4238a18f5c",
+      "echoes.lineHeight.40": "bb92847c5a8c43a727eb239a12cc5c61cb49ca8c",
+      "echoes.lineHeight.50": "a729908a2721fecb0630ab36f3439003e176d21a",
+      "echoes.lineHeight.60": "d4d85c1b4b17538342dae90b1e4fe2a7cda52bb2",
+      "echoes.letterSpacing.default": "51b9e65ff63209fe1b94c79ab3b5bbe47045b6a0",
+      "echoes.fontWeight.bold": "2bbf3d41473c61d4c74502a68c420d79fe1d3c17",
+      "echoes.fontWeight.semi-bold": "1cc8b5229e776e8f7179675effbe5aca84907fc0",
+      "echoes.fontWeight.regular": "41f8329d2f8d34f09966c4a0b56780d3b4c307ba",
+      "echoes.fontWeight.italic": "23a5c42bf7075d5156c58270bbb941fef535f486",
+      "echoes.fontWeight.medium": "3d9054a416b2a9618e81e4773e4587ad79d13450",
+      "echoes.fontSize.10": "abae55cee29cffb589576419fe31bcfa8d2a2aa4",
+      "echoes.fontSize.20": "782103e1bfdd689c2ec7ff2dfa0b8fe048e3fdfa",
+      "echoes.fontSize.30": "e92ef4e985ee244ac8a03887a7e339003262dad6",
+      "echoes.fontSize.40": "94962cea4a7ef0eef38a89a841d168a5431dd3b7",
+      "echoes.fontSize.50": "dd79909b9618b51e06acaf2273cf8f132a14d0d6",
+      "echoes.fontSize.60": "a4347b10f48bd38e9134baed35b8e8cc8b330894",
+      "echoes.borderWidth.default": "806191092a7ca4179cc1d7bcb8900e0dece18ceb",
+      "echoes.banner.sizes.height": "e33bdcb7017ac3219e4f076767d4bbfbb17cc972",
+      "echoes.badge.sizes.height.small": "bb227911496f6606f0568c9592ec629262a6bee9",
+      "echoes.badge.sizes.height.medium": "4c2acbe982d9219ebf9d6015cd49d11c14cca546",
+      "echoes.form-control.borderRadius.default": "1290a01c9f3785ddbc298a97adc7376566fd1a83",
+      "echoes.form-control.sizes.height.default": "3b34744f3cdb72f595353244b0eaaa349bcd58c9",
+      "echoes.indicator.sizes.width.xsmall": "666b804d1bc546fa66aee2dc9c5fc1e3abe79c33",
+      "echoes.indicator.sizes.width.small": "c06790151af66245684aa285126970c860386e95",
+      "echoes.indicator.sizes.width.medium": "06b2789b64b94002d3926826c7ba6a79be462181",
+      "echoes.indicator.sizes.height.xsmall": "bfa42ab5d2c65921392f5476f6aa590fd1676315",
+      "echoes.indicator.sizes.height.small": "f66fcb175ae56a592b8051b04ca25f83360fb62c",
+      "echoes.indicator.sizes.height.medium": "a07343d0dea0c1aeca4bf648e64df80884a036d5",
+      "echoes.layout.aside.width.small": "9749924779a16b1a79d1a6b5d57a481d25c63970",
+      "echoes.layout.aside.width.medium": "6a30f987a36c37dd90306b1bf6de32e234e132b8",
+      "echoes.layout.aside.width.large": "360ceb9807120cfbfe6d91ad2cb2b2e963199fb7",
+      "echoes.layout.global-navigation.sizes.height.default": "965edeb4ff140434a56d71134df5f0654285e124",
+      "echoes.layout.page-header.sizes.height.collapsed": "874a374fe48442c80a13495a83e32e0a158e0032",
+      "echoes.layout.page-header-actions.offset.collapsed": "2ce284648222a0adc7aa306c6de891660e255f12",
+      "echoes.layout.sidebar-navigation.sizes.breakpoint.dockable": "57f3667af641d76ddd6fdf9d6ef4e0e152b27c23",
+      "echoes.layout.sidebar-navigation.sizes.width.closed": "0c8687b216984e49b4c2a3675ccdb3cbd2f02e6e",
+      "echoes.layout.sidebar-navigation.sizes.width.open": "f72bc5638297757bb0c99190e6e6cfa4901f02a8",
+      "echoes.layout.sizes.max.width.default": "ac7493dff395d3d295123c38f3cfecb5633ac24f",
+      "echoes.layout.sizes.min.width.default": "d0fd85832be9e4177cd800c059965739cdb04f4e",
+      "echoes.sizes.overlays.maxWidth.default": "caca2587807c4182c3fe9958b5fc2d441f67a05f",
+      "echoes.sizes.overlays.minWidth.default": "d58aeeb8fc3ec7333da5c4c837c15e29656b6584",
+      "echoes.sizes.overlays.width.small": "b42618a476c6c35289c04fe31aaf10e1f7d5e606",
+      "echoes.sizes.overlays.width.default": "6b034f33b6c7550284d791a83f208b3a287b4176",
+      "echoes.sizes.overlays.width.wide": "c0e4f8fab7033567744642f89b65b051dad1bfeb",
+      "echoes.sizes.overlays.maxHeight.default": "b7c328a14dd80f543f949a0807551de7d541b85f",
+      "echoes.sizes.form-field.small": "5ba6868599f6364298c5a50faffc4ca7f80e26f9",
+      "echoes.sizes.form-field.medium": "03abd7e1b378f3da552e46f43443f2a98629ed91",
+      "echoes.sizes.form-field.large": "6addbbff1b4519a5a6f8158e711f89df67fa807b",
+      "echoes.sizes.buttons.medium": "ad937cd0cddc30d1d3d449a12665c47cce06ff59",
+      "echoes.sizes.buttons.large": "ba7de06d2b864d4f6a8f15e076a6e8d829067023",
+      "echoes.sizes.toggletips.height": "3a6f83c6b70685ae1f150bfd0a451448d2ba90fc",
+      "echoes.sizes.toggletips.width": "43a3484c166548481ee8375cd2687f4caa8cb107",
+      "echoes.sizes.typography.maxWidth.default": "99824a84db089b64e9c901181ed4758853e5f7dd",
+      "echoes.sizes.logo.height.small": "2162f34760585859579e3718ced7b5b62d2582d7",
+      "echoes.sizes.logo.height.medium": "d0f89332f02e3ae1bd6701f676207a5d7c24855f",
+      "echoes.sizes.logo.height.large": "56cedf17f60f609ffc056f4b00d7fecd34f710f9",
+      "echoes.sizes.breadcrumbs.maxWidth.default": "6304010728bd06f8dabf0f4326d4e59da0e74281",
+      "echoes.offset.dropdown.submenu.panel.vertical": "7625132bef8c17b60c2d98e5df8303f9a98ea483",
+      "echoes.offset.dropdown.submenu.panel.horizontal": "911a89b9daf4e3164ee71af3ac4559f4f41df6ee",
+      "echoes.table.sizes.row.minWidth.default": "385c6a42d77b41e1fd8e9ae9af9c1145ec9857a6",
+      "echoes.toast.sizes.width": "b06edb0a4c5a4c711dfa5301c9ae841c6c14ff95",
+      "echoes.color.palette.grey.25": "222c0c0ca23920f136041f618d31cf543623960f",
+      "echoes.color.palette.grey.40": "09a4b716c51a9f37138488ec2b3d41b95888c835",
+      "echoes.color.palette.grey.50": "94d8c40e56f0b330ea99e313265431bee4d69ba1",
+      "echoes.color.palette.grey.100": "b28664604d0fb9c48949640b4e0249aeedee6d0b",
+      "echoes.color.palette.grey.200": "b021175fb0ad8810a9ea85bc966fdc11193cc2ec",
+      "echoes.color.palette.grey.300": "e5531b2856182c9677d64b21d9fd43b3b4271fc6",
+      "echoes.color.palette.grey.400": "16962c803a8b1d1cccc8c1c382bf7c747911ad3a",
+      "echoes.color.palette.grey.500": "17da4c027c4bec7b1e316fac82c667b9b5ba7b43",
+      "echoes.color.palette.grey.600": "be9a26ae41b3e26ade642e0b10a6f55888e0cadc",
+      "echoes.color.palette.grey.700": "03647fa14688d04d5c587585b8c42cbb8589caed",
+      "echoes.color.palette.grey.800": "c0a10c25a5559018a3d12fefd7e92a18da3ea936",
+      "echoes.color.palette.grey.900": "fc3df9cc7d60c33609db616e6a89d00a3fb6c680",
+      "echoes.color.palette.indigo.25": "39f61a457e18fd846ab853dc2e634f47269c95e6",
+      "echoes.color.palette.indigo.50": "b6424fa70ead28c1a10c6cf0fdd7d63da14bc959",
+      "echoes.color.palette.indigo.100": "a6a8c51a52f7de261b79bf0a9aba1a3e386fe0ef",
+      "echoes.color.palette.indigo.200": "4aa83ae7f1e7d7842ea4450c3b4a6ea141ffb0e0",
+      "echoes.color.palette.indigo.300": "3813b3b27357822808bdba8ae7848d41c78eb9b0",
+      "echoes.color.palette.indigo.400": "c44a79841b10fdec91c892ea33a248d7ad3bb4fc",
+      "echoes.color.palette.indigo.500": "7c824c8e1e93d514102566b7c5522375864ec44d",
+      "echoes.color.palette.indigo.600": "8df016c9809bc3a9b9e17b8240762acb5df24d89",
+      "echoes.color.palette.indigo.700": "3d6514f9d84b94021fc13a02790b4c2a4b64c0ff",
+      "echoes.color.palette.indigo.800": "c58a6e3663689e8cb895480ea95f4b2dfc221c89",
+      "echoes.color.palette.indigo.900": "edfc9c14440841bb2a88695c855aaf9bbebb383a",
+      "echoes.color.roles.support.black": "e70e261d26ad96e2453b49e7238b895c4523046f",
+      "echoes.color.roles.support.white": "5030be677ac94a00560d928c14946df23a118290",
+      "echoes.color.roles.support.transparent": "1488bebd95ef25fac2d07147298fc9c249bec28b",
+      "echoes.color.palette.tangerine.25": "06382065705a2869210a057c8640e7a55a1fc1e0",
+      "echoes.color.palette.tangerine.50": "342fee13fffc6ede7ffc59420a6ecb304237d3c5",
+      "echoes.color.palette.tangerine.100": "e85b9d2f09d33999fd628ea5de742b1a74fc199b",
+      "echoes.color.palette.tangerine.200": "7377ad069b8209fc697379288aabb8641e6cfbdf",
+      "echoes.color.palette.tangerine.300": "7e7090a96202f627db733e9f2dafb8101303f15d",
+      "echoes.color.palette.tangerine.400": "f8f2e733e43684d35f7733d690861204e6aaab8d",
+      "echoes.color.palette.tangerine.500": "e3092e030bbb523c34dc40d3181c97154c51b459",
+      "echoes.color.palette.tangerine.600": "5b6eb2b7be4af57203393814e41f56ff9631112d",
+      "echoes.color.palette.tangerine.700": "a9a05c305c828896188f6baf8128ca921e7fc9a2",
+      "echoes.color.palette.tangerine.800": "9b9ddbca388b97f88053c24c278622a0e9176260",
+      "echoes.color.palette.tangerine.900": "78d72b0c720fbe4a8f1669e483b9957f5ba7aabc",
+      "echoes.color.palette.green.50": "3529944d04384b665bdb053576794504700a8551",
+      "echoes.color.palette.green.100": "903a856558c765a136fc65a6742b74c2ef685b0b",
+      "echoes.color.palette.green.200": "09c39669667ca425b462a0df7a6315fb211f3fb8",
+      "echoes.color.palette.green.300": "aa8d81af42636757e66ec106c69954a60b2b8e1a",
+      "echoes.color.palette.green.400": "8bd44734a189f77ec261c681a866ce2f21fd7a09",
+      "echoes.color.palette.green.500": "9fb33466ca72482063cf859a07e8e73b4fd35cea",
+      "echoes.color.palette.green.600": "c9bffae8298fcc6a9e4f9c971768be03194f7d63",
+      "echoes.color.palette.green.700": "282291a9797ad62aa318039ae5ecf4c84c016d46",
+      "echoes.color.palette.green.800": "d4449d6ace5f04152bb7fbddf0b6d1b4e58e564b",
+      "echoes.color.palette.green.900": "67ae383e56106a27c2884d3116b0e2db6b7bce81",
+      "echoes.color.palette.yellow.50": "fa966572488926f650c37996215da265c1348888",
+      "echoes.color.palette.yellow.100": "cbc43ac11194d0892892db7b4e49f9fa34b8eb6c",
+      "echoes.color.palette.yellow.200": "0d81f5cd44f32fd2c1d431309994326dac976a96",
+      "echoes.color.palette.yellow.300": "d6bc5938a84ddefb6f83fc5aeb06efe02240c058",
+      "echoes.color.palette.yellow.400": "51ba9bc77cd103f33ea9dccd54c42f6a358e4948",
+      "echoes.color.palette.yellow.500": "2958edea9487021c46acb0833a6bcb2ed02dad5e",
+      "echoes.color.palette.yellow.600": "d03f6bc0184c6d7d0967dcdbece9ee5d7e924d0e",
+      "echoes.color.palette.yellow.700": "ee4754f32a2bc63d7626a35250f0287dec8dc594",
+      "echoes.color.palette.yellow.800": "51f93f590ad68f9e27c6ba2dd75c6e87fe420072",
+      "echoes.color.palette.yellow.900": "92ef08470be202effda4077beee8075b9634a456",
+      "echoes.color.palette.orange.50": "14b1fc0518df677a1e2369299d5a60eb0f05bd5f",
+      "echoes.color.palette.orange.75": "c201b3c99de3fbedbe73d36e411f6572150bf3e8",
+      "echoes.color.palette.orange.100": "7231c38eed78e63331a8d52a8eb0ccd11cc847ac",
+      "echoes.color.palette.orange.200": "19370d5d2a0d640f246332569353b91501dc699c",
+      "echoes.color.palette.orange.300": "0507d46066e01efb04ac16f723fdd714e769c8f1",
+      "echoes.color.palette.orange.400": "05d14248c663b45c96b5506ea99900de611612eb",
+      "echoes.color.palette.orange.500": "ff74a77be87f00a27d795c0ba2e0c4a1a29ab552",
+      "echoes.color.palette.orange.600": "578da484b54f5ae791f815748c2d506c1370bc99",
+      "echoes.color.palette.orange.700": "9be3d677a5d6d24345e38562a2cc6c86d1c0fbc8",
+      "echoes.color.palette.orange.800": "02c70f5b5b0f6300cb60685acf6e84007e85bee1",
+      "echoes.color.palette.orange.900": "2c12eb4e031906929f27dbef77e75d56fc0d4e33",
+      "echoes.color.palette.red.50": "60733f71b3477bfddc0b6040315d73150826c76a",
+      "echoes.color.palette.red.100": "7c0db55a6169e1a449c697e44a8876f4dbf092fb",
+      "echoes.color.palette.red.200": "179852f9e6a9a1b920e0d8b798c62f856aa6478a",
+      "echoes.color.palette.red.300": "9cd492dcb56b45dc7fc9b6447685ac83dc697b83",
+      "echoes.color.palette.red.400": "70ef9ccef27f1e34b5d63dc5f3e69e677964a6da",
+      "echoes.color.palette.red.500": "89b1df243fdafdb70ea00d55c4fe6d277b46c7a5",
+      "echoes.color.palette.red.600": "e07d3e9202f3d21c5409688429ad6d3b47d49632",
+      "echoes.color.palette.red.700": "71aaf54dad76e15e8e018a6f663d17dac3b03677",
+      "echoes.color.palette.red.800": "ec17562e5ddd6af2002cc57552a51a233120826f",
+      "echoes.color.palette.red.900": "e5ff216f58d8d5b27a7552ade2879a70dd4b3675",
+      "echoes.color.palette.blue.50": "3687f814e645e73e42644b703289d133f7ea5127",
+      "echoes.color.palette.blue.100": "71baa1d0adc8a36480e352c6b930fe25871bea47",
+      "echoes.color.palette.blue.200": "f03fd7204ed6640a51fc85913d6b3e690f8d1ea3",
+      "echoes.color.palette.blue.300": "a5a2fe9d6a80ffaf5ede1569ec8263eb686d1f56",
+      "echoes.color.palette.blue.400": "061a060d853df075a502d191670a17b38e37a5b7",
+      "echoes.color.palette.blue.500": "964aed081b1c06a03c1a3e9f1728c82dd6052675",
+      "echoes.color.palette.blue.600": "9770c83682cc99e0205b7eeea98fbf061f815caa",
+      "echoes.color.palette.blue.700": "ec78280bde16e640f96c118a52329192f29b316b",
+      "echoes.color.palette.blue.800": "a5f83c4a42adcd106be832012810d4fec5e33d36",
+      "echoes.color.palette.blue.900": "29da30ecaa7462cb7395c03bef6e274686e4237d",
+      "echoes.color.palette.purple.25": "893f5f42436c5835d180f8377fc83309349f1bc0",
+      "echoes.color.palette.purple.50": "270cc09ba5ffaba54ce4126232da491ece33f83e",
+      "echoes.color.palette.purple.100": "75433a0b6f3f0a3f522fe83d903d53a00ec1ac78",
+      "echoes.color.palette.purple.200": "ed30ea9e75dd536f3911ca5e2b30232a73f5c7b2",
+      "echoes.color.palette.purple.300": "7d4c3aa86824a3e928de2a17804f5ef7de66d4fe",
+      "echoes.color.palette.purple.400": "db7391984424bc8ff0c58725fb2f8a5dbdfd9b63",
+      "echoes.color.palette.purple.500": "2ba53becdf3f723697aec0c794710696c6c775ca",
+      "echoes.color.palette.purple.600": "d6314fbf2d4c17a8015aefc0a79ea405e5b4c9e0",
+      "echoes.color.palette.purple.700": "8a9bcf72a0e26df80c2ea085f4759b5653f41ae1",
+      "echoes.color.palette.purple.800": "3fe182da3e29293d35ae23f349b7b9caa5f8db85",
+      "echoes.color.palette.purple.900": "f1456c1a2ffd673dd5ab73d07363ae51043d320b"
     },
     "group": "Sonar"
   }
-]
+]
\ No newline at end of file
diff --git a/design-tokens/tokens/layer1/base.json b/design-tokens/tokens/brand/brandA/base.json
similarity index 100%
rename from design-tokens/tokens/layer1/base.json
rename to design-tokens/tokens/brand/brandA/base.json
diff --git a/design-tokens/tokens/brand/brandA/colors.json b/design-tokens/tokens/brand/brandA/colors.json
new file mode 100644
index 000000000..eab67da2d
--- /dev/null
+++ b/design-tokens/tokens/brand/brandA/colors.json
@@ -0,0 +1,610 @@
+{
+  "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": {
+        "grey": {
+          "50": {
+            "$type": "color",
+            "$value": "#eff2f9"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#e1e6f3"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#c5cddf"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#a6adc2"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#637192"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#3e4357"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#2a2f40"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#1d212f"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#12141d"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#08090c"
+          }
+        },
+        "indigo": {
+          "50": {
+            "$type": "color",
+            "$value": "#e8ebff"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#d1d7fe"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#bdc6ff"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#9fa9ed"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#7b87d9"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#5D6CD0"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#4b56bb"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#47518f"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#2b3368"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#1b2250"
+          }
+        },
+        "tangerine": {
+          "50": {
+            "$type": "color",
+            "$value": "#fae6dc"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#f6cebb"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#f3b99d"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#f0a682"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#ed946a"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#eb8352"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#e9743f"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#e76631"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#b54419"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#822b0a"
+          }
+        },
+        "green": {
+          "50": {
+            "$type": "color",
+            "$value": "#F3F8EF"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#E4F7D1"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#D4F2B7"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#C4EA9E"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#B3DD86"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#9DCB6B"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#82B73C"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#75A92C"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#537C17"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#054F16"
+          }
+        },
+        "yellow": {
+          "50": {
+            "$type": "color",
+            "$value": "#fcf5e4"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#fef5d0"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#fce9a3"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#fadc79"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#f8cd5c"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#f5b840"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#d19834"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#ae7a29"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#8c5e1e"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#66400f"
+          }
+        },
+        "orange": {
+          "50": {
+            "$type": "color",
+            "$value": "#fff0eb"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#fedbc7"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#ffd6af"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#fe964b"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#fd7122"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#f75f09"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#dc5e03"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#b54708"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#93370d"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#7a2e0e"
+          }
+        },
+        "red": {
+          "50": {
+            "$type": "color",
+            "$value": "#fef3f2"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#fee4e2"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#fecdca"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#fda29b"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#f97066"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#f04438"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#d92d20"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#b42318"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#801b14"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#5d1d13"
+          }
+        },
+        "blue": {
+          "50": {
+            "$type": "color",
+            "$value": "#f5fbff"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#e9f4fb"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#b8def1"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#8fcaea"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#6eb9e4"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#55aadf"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#4595cb"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#3a7fad"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#316c92"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#174361"
+          }
+        },
+        "purple": {
+          "50": {
+            "$type": "color",
+            "$value": "#faf8ff"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#f4eeff"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#ede2ff"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#e5d5ff"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#d9c5ff"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#caaefc"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#b790f7"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#883fdd"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#7934c7"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#3f186b"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/design-tokens/tokens/brand/brandB/base.json b/design-tokens/tokens/brand/brandB/base.json
new file mode 100644
index 000000000..ee4b35cb3
--- /dev/null
+++ b/design-tokens/tokens/brand/brandB/base.json
@@ -0,0 +1,540 @@
+{
+  "echoes": {
+    "dimension": {
+      "space": {
+        "0": {
+          "$type": "dimension",
+          "$value": "0px"
+        },
+        "25": {
+          "$type": "dimension",
+          "$value": "0.125rem"
+        },
+        "50": {
+          "$type": "dimension",
+          "$value": "0.25rem"
+        },
+        "75": {
+          "$type": "dimension",
+          "$value": "0.375rem"
+        },
+        "100": {
+          "$type": "dimension",
+          "$value": "0.5rem"
+        },
+        "150": {
+          "$type": "dimension",
+          "$value": "0.75rem"
+        },
+        "200": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "250": {
+          "$type": "dimension",
+          "$value": "1.25rem"
+        },
+        "300": {
+          "$type": "dimension",
+          "$value": "1.5rem"
+        },
+        "400": {
+          "$type": "dimension",
+          "$value": "2rem"
+        },
+        "500": {
+          "$type": "dimension",
+          "$value": "2.5rem"
+        },
+        "600": {
+          "$type": "dimension",
+          "$value": "3rem"
+        },
+        "800": {
+          "$type": "dimension",
+          "$value": "4rem"
+        }
+      },
+      "width": {
+        "0": {
+          "$type": "dimension",
+          "$value": "0px"
+        },
+        "25": {
+          "$type": "dimension",
+          "$value": "0.125rem"
+        },
+        "50": {
+          "$type": "dimension",
+          "$value": "0.25rem"
+        },
+        "75": {
+          "$type": "dimension",
+          "$value": "0.375rem"
+        },
+        "100": {
+          "$type": "dimension",
+          "$value": "0.5rem"
+        },
+        "150": {
+          "$type": "dimension",
+          "$value": "0.75rem"
+        },
+        "200": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "250": {
+          "$type": "dimension",
+          "$value": "1.25rem"
+        },
+        "300": {
+          "$type": "dimension",
+          "$value": "1.5rem"
+        },
+        "400": {
+          "$type": "dimension",
+          "$value": "2rem"
+        },
+        "450": {
+          "$type": "dimension",
+          "$value": "2.25rem"
+        },
+        "500": {
+          "$type": "dimension",
+          "$value": "2.5rem"
+        },
+        "600": {
+          "$type": "dimension",
+          "$value": "3rem"
+        },
+        "700": {
+          "$type": "dimension",
+          "$value": "3.5rem"
+        },
+        "800": {
+          "$type": "dimension",
+          "$value": "4rem"
+        },
+        "5000": {
+          "$type": "dimension",
+          "$value": "25rem"
+        }
+      },
+      "height": {
+        "100": {
+          "$type": "dimension",
+          "$value": "0.25rem"
+        },
+        "150": {
+          "$type": "dimension",
+          "$value": "0.375rem"
+        },
+        "200": {
+          "$type": "dimension",
+          "$value": "0.5rem"
+        },
+        "400": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "500": {
+          "$type": "dimension",
+          "$value": "1.25rem"
+        },
+        "600": {
+          "$type": "dimension",
+          "$value": "1.5rem"
+        },
+        "800": {
+          "$type": "dimension",
+          "$value": "2rem"
+        },
+        "900": {
+          "$type": "dimension",
+          "$value": "2.25rem"
+        },
+        "1000": {
+          "$type": "dimension",
+          "$value": "2.5rem"
+        }
+      },
+      "negative": {
+        "spacing": {
+          "100": {
+            "$type": "dimension",
+            "$value": "-1px"
+          },
+          "600": {
+            "$type": "dimension",
+            "$value": "-6px"
+          },
+          "800": {
+            "$type": "dimension",
+            "$value": "-8px"
+          }
+        }
+      }
+    },
+    "borderRadius": {
+      "100": {
+        "$type": "borderRadius",
+        "$value": "2px"
+      },
+      "200": {
+        "$type": "borderRadius",
+        "$value": "4px"
+      },
+      "400": {
+        "$type": "borderRadius",
+        "$value": "8px"
+      },
+      "none": {
+        "$type": "borderRadius",
+        "$value": "0px"
+      },
+      "full": {
+        "$type": "borderRadius",
+        "$value": "700px"
+      }
+    },
+    "fontFamily": {
+      "mono": {
+        "$type": "fontFamilies",
+        "$value": "Ubuntu Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+      },
+      "sans": {
+        "$type": "fontFamilies",
+        "$value": "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"
+      }
+    },
+    "lineHeight": {
+      "10": {
+        "$type": "lineHeights",
+        "$value": "1rem"
+      },
+      "20": {
+        "$type": "lineHeights",
+        "$value": "1.25rem"
+      },
+      "30": {
+        "$type": "lineHeights",
+        "$value": "1.5rem"
+      },
+      "40": {
+        "$type": "lineHeights",
+        "$value": "1.875rem"
+      },
+      "50": {
+        "$type": "lineHeights",
+        "$value": "2.25rem"
+      },
+      "60": {
+        "$type": "lineHeights",
+        "$value": "3.125rem"
+      }
+    },
+    "letterSpacing": {
+      "default": {
+        "$type": "letterSpacing",
+        "$value": "0"
+      },
+      "increased": {
+        "$type": "letterSpacing",
+        "$value": "2%"
+      },
+      "decreased": {
+        "$type": "letterSpacing",
+        "$value": "-2%"
+      }
+    },
+    "fontWeight": {
+      "bold": {
+        "$type": "fontWeights",
+        "$value": "700"
+      },
+      "semi-bold": {
+        "$type": "fontWeights",
+        "$value": "600"
+      },
+      "regular": {
+        "$type": "fontWeights",
+        "$value": "400"
+      },
+      "italic": {
+        "$type": "fontWeights",
+        "$value": "Italic"
+      },
+      "medium": {
+        "$type": "fontWeights",
+        "$value": "500"
+      }
+    },
+    "fontSize": {
+      "10": {
+        "$type": "fontSizes",
+        "$value": "0.75rem"
+      },
+      "20": {
+        "$type": "fontSizes",
+        "$value": "0.875rem"
+      },
+      "30": {
+        "$type": "fontSizes",
+        "$value": "1rem"
+      },
+      "40": {
+        "$type": "fontSizes",
+        "$value": "1.25rem"
+      },
+      "50": {
+        "$type": "fontSizes",
+        "$value": "1.5rem"
+      },
+      "60": {
+        "$type": "fontSizes",
+        "$value": "2.125rem"
+      }
+    },
+    "borderWidth": {
+      "default": {
+        "$type": "borderWidth",
+        "$value": "1px"
+      }
+    },
+    "textCase": {
+      "uppercase": {
+        "$type": "textCase",
+        "$value": "uppercase"
+      },
+      "none": {
+        "$type": "textCase",
+        "$value": "none"
+      }
+    },
+    "textDecoration": {
+      "none": {
+        "$type": "textDecoration",
+        "$value": "none"
+      },
+      "underline": {
+        "$type": "textDecoration",
+        "$value": "underline"
+      }
+    },
+    "typography": {
+      "text": {
+        "default": {
+          "regular": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.regular}",
+              "lineHeight": "{echoes.lineHeight.20}",
+              "fontSize": "{echoes.fontSize.20}"
+            }
+          },
+          "semi-bold": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.semi-bold}",
+              "lineHeight": "{echoes.lineHeight.20}",
+              "fontSize": "{echoes.fontSize.20}"
+            }
+          },
+          "bold": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.bold}",
+              "lineHeight": "{echoes.lineHeight.20}",
+              "fontSize": "{echoes.fontSize.20}"
+            }
+          }
+        },
+        "small": {
+          "regular": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.regular}",
+              "lineHeight": "{echoes.lineHeight.10}",
+              "fontSize": "{echoes.fontSize.10}"
+            }
+          },
+          "medium": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.medium}",
+              "lineHeight": "{echoes.lineHeight.10}",
+              "fontSize": "{echoes.fontSize.10}"
+            }
+          },
+          "semi-bold": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.semi-bold}",
+              "lineHeight": "{echoes.lineHeight.10}",
+              "fontSize": "{echoes.fontSize.10}"
+            }
+          }
+        },
+        "large": {
+          "regular": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.regular}",
+              "lineHeight": "{echoes.lineHeight.30}",
+              "fontSize": "{echoes.fontSize.30}"
+            }
+          },
+          "semi-bold": {
+            "$type": "typography",
+            "$value": {
+              "fontFamily": "{echoes.fontFamily.sans}",
+              "fontWeight": "{echoes.fontWeight.semi-bold}",
+              "lineHeight": "{echoes.lineHeight.30}",
+              "fontSize": "{echoes.fontSize.30}"
+            }
+          }
+        }
+      },
+      "heading": {
+        "xsmall": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.bold}",
+            "fontSize": "{echoes.fontSize.10}",
+            "lineHeight": "{echoes.lineHeight.10}"
+          }
+        },
+        "small": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.bold}",
+            "fontSize": "{echoes.fontSize.20}",
+            "lineHeight": "{echoes.lineHeight.20}"
+          }
+        },
+        "medium": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.semi-bold}",
+            "lineHeight": "{echoes.lineHeight.30}",
+            "fontSize": "{echoes.fontSize.30}"
+          }
+        },
+        "large": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.semi-bold}",
+            "lineHeight": "{echoes.lineHeight.40}",
+            "fontSize": "{echoes.fontSize.40}"
+          }
+        },
+        "xlarge": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.semi-bold}",
+            "lineHeight": "{echoes.lineHeight.50}",
+            "fontSize": "{echoes.fontSize.50}"
+          }
+        }
+      },
+      "code": {
+        "default": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.mono}",
+            "fontWeight": "{echoes.fontWeight.regular}",
+            "lineHeight": "{echoes.lineHeight.20}",
+            "fontSize": "{echoes.fontSize.20}"
+          }
+        },
+        "highlight": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.mono}",
+            "fontWeight": "{echoes.fontWeight.bold}",
+            "lineHeight": "{echoes.lineHeight.20}",
+            "fontSize": "{echoes.fontSize.20}"
+          }
+        },
+        "comment": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.mono}",
+            "fontWeight": "{echoes.fontWeight.italic}",
+            "lineHeight": "{echoes.lineHeight.20}",
+            "fontSize": "{echoes.fontSize.20}"
+          }
+        }
+      },
+      "others": {
+        "label": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.semi-bold}",
+            "lineHeight": "{echoes.lineHeight.20}",
+            "fontSize": "{echoes.fontSize.20}"
+          }
+        },
+        "label-medium": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.medium}",
+            "lineHeight": "{echoes.lineHeight.20}",
+            "fontSize": "{echoes.fontSize.20}"
+          }
+        },
+        "helper-text": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.regular}",
+            "fontSize": "{echoes.fontSize.10}",
+            "lineHeight": "{echoes.lineHeight.10}"
+          }
+        }
+      },
+      "display": {
+        "default": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{echoes.fontFamily.sans}",
+            "fontWeight": "{echoes.fontWeight.semi-bold}",
+            "fontSize": "{echoes.fontSize.60}",
+            "lineHeight": "{echoes.lineHeight.60}"
+          }
+        }
+      }
+    },
+    "focus": {
+      "border": {
+        "width": {
+          "default": {
+            "$type": "other",
+            "$value": "2px"
+          }
+        },
+        "offset": {
+          "default": {
+            "$type": "other",
+            "$value": "1px"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/design-tokens/tokens/brand/brandB/colors.json b/design-tokens/tokens/brand/brandB/colors.json
new file mode 100644
index 000000000..f2057dff7
--- /dev/null
+++ b/design-tokens/tokens/brand/brandB/colors.json
@@ -0,0 +1,466 @@
+{
+  "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": {
+        "grey": {
+          "50": {
+            "$type": "color",
+            "$value": "#f0f0f3"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#e8e8ec"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#e0e1e6"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#d9d9e0"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#cdced6"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#b9bbc6"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#8b8d98"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#80838d"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#60646c"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#1c2024"
+          }
+        },
+        "indigo": {
+          "50": {
+            "$type": "color",
+            "$value": "#e6f4fe"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#d5efff"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#c2e5ff"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#acd8fc"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#8ec8f6"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#5eb1ef"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#0090ff"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#0588f0"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#0d74ce"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#113264"
+          }
+        },
+        "tangerine": {
+          "50": {
+            "$type": "color",
+            "$value": "#f7edfe"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#f2e2fc"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#ead5f9"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#e0c4f4"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#d1afec"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#be93e4"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#8e4ec6"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#8347b9"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#8145b5"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#402060"
+          }
+        },
+        "green": {
+          "50": {
+            "$type": "color",
+            "$value": "#e6f6eb"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#d6f1df"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#c4e8d1"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#adddc0"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#8eceaa"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#5bb98b"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#30a46c"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#2b9a66"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#218358"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#193b2d"
+          }
+        },
+        "yellow": {
+          "50": {
+            "$type": "color",
+            "$value": "#fff7c2"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#ffee9c"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#fbe577"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#f3d673"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#e9c162"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#e2a336"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#ffc53d"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#ffba18"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#ab6400"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#4f3422"
+          }
+        },
+        "orange": {
+          "50": {
+            "$type": "color",
+            "$value": "#fff0eb"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#fedbc7"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#ffd6af"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#fe964b"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#fd7122"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#f75f09"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#dc5e03"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#b54708"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#93370d"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#7a2e0e"
+          }
+        },
+        "red": {
+          "50": {
+            "$type": "color",
+            "$value": "#feebec"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#ffdbdc"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#ffcdce"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#fdbdbe"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#f4a9aa"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#eb8e90"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#e5484d"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#dc3e42"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#ce2c31"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#641723"
+          }
+        },
+        "blue": {
+          "50": {
+            "$type": "color",
+            "$value": "#def7f9"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#caf1f6"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#b5e9f0"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#9ddde7"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#7dcedc"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#3db9cf"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#00a2c7"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#0797b9"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#107d98"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#0d3c48"
+          }
+        },
+        "purple": {
+          "50": {
+            "$type": "color",
+            "$value": "#f4f0fe"
+          },
+          "100": {
+            "$type": "color",
+            "$value": "#ebe4ff"
+          },
+          "200": {
+            "$type": "color",
+            "$value": "#e1d9ff"
+          },
+          "300": {
+            "$type": "color",
+            "$value": "#d4cafe"
+          },
+          "400": {
+            "$type": "color",
+            "$value": "#c2b5f5"
+          },
+          "500": {
+            "$type": "color",
+            "$value": "#aa99ec"
+          },
+          "600": {
+            "$type": "color",
+            "$value": "#6e56cf"
+          },
+          "700": {
+            "$type": "color",
+            "$value": "#654dc4"
+          },
+          "800": {
+            "$type": "color",
+            "$value": "#6550b9"
+          },
+          "900": {
+            "$type": "color",
+            "$value": "#2f265f"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/design-tokens/tokens/layer3/base.json b/design-tokens/tokens/component/base.json
similarity index 99%
rename from design-tokens/tokens/layer3/base.json
rename to design-tokens/tokens/component/base.json
index ddb4e12b9..37440d8c2 100644
--- a/design-tokens/tokens/layer3/base.json
+++ b/design-tokens/tokens/component/base.json
@@ -105,7 +105,7 @@
               "$value": "56px"
             }
           }
-        }  
+        }
       },
       "page-header-actions": {
         "offset": {
@@ -303,4 +303,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/design-tokens/tokens/layer3/dark.json b/design-tokens/tokens/component/dark.json
similarity index 83%
rename from design-tokens/tokens/layer3/dark.json
rename to design-tokens/tokens/component/dark.json
index fc04e03ef..805b6b3e7 100644
--- a/design-tokens/tokens/layer3/dark.json
+++ b/design-tokens/tokens/component/dark.json
@@ -83,25 +83,25 @@
           "ratingB": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.green.700}"
+              "$value": "{echoes.color.palette.green.700}"
             }
           },
           "ratingC": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.700}"
+              "$value": "{echoes.color.palette.yellow.700}"
             }
           },
           "ratingD": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.700}"
+              "$value": "{echoes.color.palette.orange.700}"
             }
           },
           "ratingE": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.700}"
+              "$value": "{echoes.color.palette.red.700}"
             }
           }
         },
@@ -115,25 +115,25 @@
           "ratingB": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.green.50}"
+              "$value": "{echoes.color.palette.green.50}"
             }
           },
           "ratingC": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.50}"
+              "$value": "{echoes.color.palette.yellow.50}"
             }
           },
           "ratingD": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.50}"
+              "$value": "{echoes.color.palette.orange.50}"
             }
           },
           "ratingE": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.50}"
+              "$value": "{echoes.color.palette.red.50}"
             }
           }
         },
@@ -160,7 +160,7 @@
           "ratingB": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.green.400}"
+              "$value": "{echoes.color.palette.green.400}"
             },
             "hover": {
               "$extensions": {
@@ -173,13 +173,13 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.green.400}"
+              "$value": "{echoes.color.palette.green.400}"
             }
           },
           "ratingC": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
+              "$value": "{echoes.color.palette.yellow.300}"
             },
             "hover": {
               "$extensions": {
@@ -192,13 +192,13 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
+              "$value": "{echoes.color.palette.yellow.300}"
             }
           },
           "ratingD": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.500}"
+              "$value": "{echoes.color.palette.orange.500}"
             },
             "hover": {
               "$extensions": {
@@ -211,13 +211,13 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.orange.500}"
+              "$value": "{echoes.color.palette.orange.500}"
             }
           },
           "ratingE": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.300}"
+              "$value": "{echoes.color.palette.red.300}"
             },
             "hover": {
               "$extensions": {
@@ -230,7 +230,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.red.300}"
+              "$value": "{echoes.color.palette.red.300}"
             }
           }
         }
@@ -253,7 +253,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.600}"
+                  "$value": "{echoes.color.palette.red.600}"
                 }
               },
               "suffix": {
@@ -268,7 +268,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.600}"
+                  "$value": "{echoes.color.palette.red.600}"
                 },
                 "hover": {
                   "$extensions": {
@@ -281,7 +281,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.600}"
+                  "$value": "{echoes.color.palette.red.600}"
                 }
               }
             },
@@ -298,7 +298,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.400}"
+                  "$value": "{echoes.color.palette.red.400}"
                 }
               },
               "suffix": {
@@ -313,7 +313,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.400}"
+                  "$value": "{echoes.color.palette.red.400}"
                 },
                 "hover": {
                   "$extensions": {
@@ -326,7 +326,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.400}"
+                  "$value": "{echoes.color.palette.red.400}"
                 }
               }
             },
@@ -343,7 +343,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.orange.400}"
+                  "$value": "{echoes.color.palette.orange.400}"
                 }
               },
               "suffix": {
@@ -358,7 +358,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.orange.400}"
+                  "$value": "{echoes.color.palette.orange.400}"
                 },
                 "hover": {
                   "$extensions": {
@@ -371,7 +371,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.orange.400}"
+                  "$value": "{echoes.color.palette.orange.400}"
                 }
               }
             },
@@ -388,7 +388,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.yellow.300}"
+                  "$value": "{echoes.color.palette.yellow.300}"
                 }
               },
               "suffix": {
@@ -403,7 +403,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.yellow.300}"
+                  "$value": "{echoes.color.palette.yellow.300}"
                 },
                 "hover": {
                   "$extensions": {
@@ -416,7 +416,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.yellow.300}"
+                  "$value": "{echoes.color.palette.yellow.300}"
                 }
               }
             },
@@ -433,7 +433,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.blue.300}"
+                  "$value": "{echoes.color.palette.blue.300}"
                 }
               },
               "suffix": {
@@ -448,7 +448,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.blue.300}"
+                  "$value": "{echoes.color.palette.blue.300}"
                 },
                 "hover": {
                   "$extensions": {
@@ -461,7 +461,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.blue.300}"
+                  "$value": "{echoes.color.palette.blue.300}"
                 }
               }
             }
@@ -472,13 +472,13 @@
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.100}"
+                "$value": "{echoes.color.palette.red.100}"
               }
             },
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.200}"
+                "$value": "{echoes.color.palette.red.200}"
               }
             }
           },
@@ -486,13 +486,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.100}"
+                "$value": "{echoes.color.palette.red.100}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.200}"
+                "$value": "{echoes.color.palette.red.200}"
               }
             }
           },
@@ -500,13 +500,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.orange.75}"
+                "$value": "{echoes.color.palette.orange.75}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.orange.100}"
+                "$value": "{echoes.color.palette.orange.100}"
               }
             }
           },
@@ -514,13 +514,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.yellow.100}"
+                "$value": "{echoes.color.palette.yellow.100}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.yellow.200}"
+                "$value": "{echoes.color.palette.yellow.200}"
               }
             }
           },
@@ -528,13 +528,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.blue.400}"
+                "$value": "{echoes.color.palette.blue.400}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.blue.300}"
+                "$value": "{echoes.color.palette.blue.300}"
               }
             }
           }
@@ -552,7 +552,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.red.600}"
+              "$value": "{echoes.color.palette.red.600}"
             }
           },
           "high": {
@@ -567,7 +567,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.red.400}"
+              "$value": "{echoes.color.palette.red.400}"
             }
           },
           "medium": {
@@ -582,7 +582,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.orange.400}"
+              "$value": "{echoes.color.palette.orange.400}"
             }
           },
           "low": {
@@ -597,7 +597,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
+              "$value": "{echoes.color.palette.yellow.300}"
             }
           },
           "info": {
@@ -612,7 +612,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.blue.300}"
+              "$value": "{echoes.color.palette.blue.300}"
             }
           }
         }
@@ -623,7 +623,7 @@
         "background": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.grey.700}"
+            "$value": "{echoes.color.palette.grey.700}"
           }
         }
       }
@@ -633,15 +633,15 @@
         "background": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.grey.700}"
+            "$value": "{echoes.color.palette.grey.700}"
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.grey.800}"
+            "$value": "{echoes.color.palette.grey.800}"
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.grey.900}"
+            "$value": "{echoes.color.palette.grey.900}"
           }
         }
       }
@@ -652,11 +652,11 @@
           "header": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.grey.500}"
+              "$value": "{echoes.color.palette.grey.500}"
             }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/design-tokens/tokens/layer3/light.json b/design-tokens/tokens/component/light.json
similarity index 78%
rename from design-tokens/tokens/layer3/light.json
rename to design-tokens/tokens/component/light.json
index e35af4474..d25fd852d 100644
--- a/design-tokens/tokens/layer3/light.json
+++ b/design-tokens/tokens/component/light.json
@@ -83,25 +83,25 @@
           "ratingB": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.green.200}"
+              "$value": "{echoes.color.palette.green.200}"
             }
           },
           "ratingC": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.200}"
+              "$value": "{echoes.color.palette.yellow.200}"
             }
           },
           "ratingD": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.200}"
+              "$value": "{echoes.color.palette.orange.200}"
             }
           },
           "ratingE": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.200}"
+              "$value": "{echoes.color.palette.red.200}"
             }
           }
         },
@@ -115,25 +115,25 @@
           "ratingB": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.green.900}"
+              "$value": "{echoes.color.palette.green.900}"
             }
           },
           "ratingC": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.900}"
+              "$value": "{echoes.color.palette.yellow.900}"
             }
           },
           "ratingD": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.900}"
+              "$value": "{echoes.color.palette.orange.900}"
             }
           },
           "ratingE": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.900}"
+              "$value": "{echoes.color.palette.red.900}"
             }
           }
         },
@@ -160,7 +160,7 @@
           "ratingB": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.green.500}"
+              "$value": "{echoes.color.palette.green.500}"
             },
             "hover": {
               "$extensions": {
@@ -173,13 +173,13 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.green.500}"
+              "$value": "{echoes.color.palette.green.500}"
             }
           },
           "ratingC": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.500}"
+              "$value": "{echoes.color.palette.yellow.500}"
             },
             "hover": {
               "$extensions": {
@@ -192,13 +192,13 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.yellow.500}"
+              "$value": "{echoes.color.palette.yellow.500}"
             }
           },
           "ratingD": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.400}"
+              "$value": "{echoes.color.palette.orange.400}"
             },
             "hover": {
               "$extensions": {
@@ -211,13 +211,13 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.orange.400}"
+              "$value": "{echoes.color.palette.orange.400}"
             }
           },
           "ratingE": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.500}"
+              "$value": "{echoes.color.palette.red.500}"
             },
             "hover": {
               "$extensions": {
@@ -230,7 +230,7 @@
                 }
               },
               "$type": "color",
-              "$value": "{echoes.color.red.500}"
+              "$value": "{echoes.color.palette.red.500}"
             }
           }
         }
@@ -244,13 +244,13 @@
               "prefix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.red.100}"
+                  "$value": "{echoes.color.palette.red.100}"
                 }
               },
               "suffix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.red.200}"
+                  "$value": "{echoes.color.palette.red.200}"
                 },
                 "hover": {
                   "$extensions": {
@@ -263,7 +263,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.200}"
+                  "$value": "{echoes.color.palette.red.200}"
                 }
               }
             },
@@ -271,13 +271,13 @@
               "prefix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.red.50}"
+                  "$value": "{echoes.color.palette.red.50}"
                 }
               },
               "suffix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.red.100}"
+                  "$value": "{echoes.color.palette.red.100}"
                 },
                 "hover": {
                   "$extensions": {
@@ -290,7 +290,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.red.100}"
+                  "$value": "{echoes.color.palette.red.100}"
                 }
               }
             },
@@ -298,13 +298,13 @@
               "prefix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.orange.50}"
+                  "$value": "{echoes.color.palette.orange.50}"
                 }
               },
               "suffix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.orange.75}"
+                  "$value": "{echoes.color.palette.orange.75}"
                 },
                 "hover": {
                   "$extensions": {
@@ -317,7 +317,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.orange.100}"
+                  "$value": "{echoes.color.palette.orange.100}"
                 }
               }
             },
@@ -325,13 +325,13 @@
               "prefix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.yellow.50}"
+                  "$value": "{echoes.color.palette.yellow.50}"
                 }
               },
               "suffix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.yellow.100}"
+                  "$value": "{echoes.color.palette.yellow.100}"
                 },
                 "hover": {
                   "$extensions": {
@@ -344,7 +344,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.yellow.100}"
+                  "$value": "{echoes.color.palette.yellow.100}"
                 }
               }
             },
@@ -352,13 +352,13 @@
               "prefix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.blue.50}"
+                  "$value": "{echoes.color.palette.blue.50}"
                 }
               },
               "suffix": {
                 "default": {
                   "$type": "color",
-                  "$value": "{echoes.color.blue.100}"
+                  "$value": "{echoes.color.palette.blue.100}"
                 },
                 "hover": {
                   "$extensions": {
@@ -371,7 +371,7 @@
                     }
                   },
                   "$type": "color",
-                  "$value": "{echoes.color.blue.100}"
+                  "$value": "{echoes.color.palette.blue.100}"
                 }
               }
             }
@@ -382,13 +382,13 @@
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.700}"
+                "$value": "{echoes.color.palette.red.700}"
               }
             },
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.800}"
+                "$value": "{echoes.color.palette.red.800}"
               }
             }
           },
@@ -396,13 +396,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.700}"
+                "$value": "{echoes.color.palette.red.700}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.red.600}"
+                "$value": "{echoes.color.palette.red.600}"
               }
             }
           },
@@ -410,13 +410,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.orange.800}"
+                "$value": "{echoes.color.palette.orange.800}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.orange.600}"
+                "$value": "{echoes.color.palette.orange.600}"
               }
             }
           },
@@ -424,13 +424,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.yellow.800}"
+                "$value": "{echoes.color.palette.yellow.800}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.yellow.700}"
+                "$value": "{echoes.color.palette.yellow.700}"
               }
             }
           },
@@ -438,13 +438,13 @@
             "text": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.blue.800}"
+                "$value": "{echoes.color.palette.blue.800}"
               }
             },
             "icon": {
               "default": {
                 "$type": "color",
-                "$value": "{echoes.color.blue.700}"
+                "$value": "{echoes.color.palette.blue.700}"
               }
             }
           }
@@ -453,31 +453,31 @@
           "blocker": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.200}"
+              "$value": "{echoes.color.palette.red.200}"
             }
           },
           "high": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.red.100}"
+              "$value": "{echoes.color.palette.red.100}"
             }
           },
           "medium": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.orange.75}"
+              "$value": "{echoes.color.palette.orange.75}"
             }
           },
           "low": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.yellow.100}"
+              "$value": "{echoes.color.palette.yellow.100}"
             }
           },
           "info": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.blue.100}"
+              "$value": "{echoes.color.palette.blue.100}"
             }
           }
         }
@@ -488,7 +488,7 @@
         "background": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.grey.25}"
+            "$value": "{echoes.color.palette.grey.25}"
           }
         }
       }
@@ -498,15 +498,15 @@
         "background": {
           "default": {
             "$type": "color",
-            "$value": "{echoes.color.grey.25}"
+            "$value": "{echoes.color.palette.grey.25}"
           },
           "hover": {
             "$type": "color",
-            "$value": "{echoes.color.grey.40}"
+            "$value": "{echoes.color.palette.grey.40}"
           },
           "active": {
             "$type": "color",
-            "$value": "{echoes.color.grey.50}"
+            "$value": "{echoes.color.palette.grey.50}"
           }
         }
       }
@@ -517,11 +517,11 @@
           "header": {
             "default": {
               "$type": "color",
-              "$value": "{echoes.color.grey.50}"
+              "$value": "{echoes.color.palette.grey.50}"
             }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/design-tokens/tokens/layer1/colors.json b/design-tokens/tokens/layer1/colors.json
deleted file mode 100644
index 4305ea44e..000000000
--- a/design-tokens/tokens/layer1/colors.json
+++ /dev/null
@@ -1,422 +0,0 @@
-{
-  "echoes": {
-    "color": {
-      "support": {
-        "black": {
-          "$type": "color",
-          "$value": "#000000"
-        },
-        "white": {
-          "$type": "color",
-          "$value": "#ffffff"
-        },
-        "transparent": {
-          "$type": "color",
-          "$value": "#00000000"
-        }
-      },
-      "grey": {
-        "25": {
-          "$type": "color",
-          "$value": "#fcfcfd"
-        },
-        "40": {
-          "$type": "color",
-          "$value": "#f6f7fb"
-        },
-        "50": {
-          "$type": "color",
-          "$value": "#eff2f9"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#e1e6f3"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#c5cddf"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#a6adc2"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#637192"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#3e4357"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#2a2f40"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#1d212f"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#12141d"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#08090c"
-        }
-      },
-      "indigo": {
-        "25": {
-          "$type": "color",
-          "$value": "#f4f6ff"
-        },
-        "50": {
-          "$type": "color",
-          "$value": "#e8ebff"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#d1d7fe"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#bdc6ff"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#9fa9ed"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#7b87d9"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#5d6cd0"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#4b56bb"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#47518f"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#2b3368"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#1b2250"
-        }
-      },
-      "tangerine": {
-        "25": {
-          "$type": "color",
-          "$value": "#fff8f4"
-        },
-        "50": {
-          "$type": "color",
-          "$value": "#fae6dc"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#f6cebb"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#f3b99d"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#f0a682"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#ed946a"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#eb8352"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#e9743f"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#e76631"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#b54419"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#822b0a"
-        }
-      },
-      "green": {
-        "50": {
-          "$type": "color",
-          "$value": "#F3F8EF"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#E4F7D1"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#D4F2B7"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#C4EA9E"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#B3DD86"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#9DCB6B"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#82B73C"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#75A92C"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#537C17"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#054F16"
-        }
-      },
-      "yellow": {
-        "50": {
-          "$type": "color",
-          "$value": "#fcf5e4"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#fef5d0"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#fce9a3"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#fadc79"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#f8cd5c"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#f5b840"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#d19834"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#ae7a29"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#8c5e1e"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#66400f"
-        }
-      },
-      "orange": {
-        "50": {
-          "$type": "color",
-          "$value": "#fff0eb"
-        },
-        "75": {
-          "$type": "color",
-          "$value": "#ffe8da"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#fedbc7"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#ffd6af"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#fe964b"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#fd7122"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#f75f09"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#dc5e03"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#b54708"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#93370d"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#7a2e0e"
-        }
-      },
-      "red": {
-        "50": {
-          "$type": "color",
-          "$value": "#fef3f2"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#fee4e2"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#fecdca"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#fda29b"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#f97066"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#f04438"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#d92d20"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#b42318"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#801b14"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#5d1d13"
-        }
-      },
-      "blue": {
-        "50": {
-          "$type": "color",
-          "$value": "#f5fbff"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#e9f4fb"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#b8def1"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#8fcaea"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#6eb9e4"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#55aadf"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#4595cb"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#3a7fad"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#316c92"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#174361"
-        }
-      },
-      "purple": {
-        "25": {
-          "$type": "color",
-          "$value": "#fdfcff"
-        },
-        "50": {
-          "$type": "color",
-          "$value": "#faf8ff"
-        },
-        "100": {
-          "$type": "color",
-          "$value": "#f4eeff"
-        },
-        "200": {
-          "$type": "color",
-          "$value": "#ede2ff"
-        },
-        "300": {
-          "$type": "color",
-          "$value": "#e5d5ff"
-        },
-        "400": {
-          "$type": "color",
-          "$value": "#d9c5ff"
-        },
-        "500": {
-          "$type": "color",
-          "$value": "#caaefc"
-        },
-        "600": {
-          "$type": "color",
-          "$value": "#b790f7"
-        },
-        "700": {
-          "$type": "color",
-          "$value": "#883fdd"
-        },
-        "800": {
-          "$type": "color",
-          "$value": "#7934c7"
-        },
-        "900": {
-          "$type": "color",
-          "$value": "#3f186b"
-        }
-      }
-    }
-  }
-}
diff --git a/design-tokens/tokens/layer2/dark.json b/design-tokens/tokens/layer2/dark.json
deleted file mode 100644
index 67002c65d..000000000
--- a/design-tokens/tokens/layer2/dark.json
+++ /dev/null
@@ -1,1021 +0,0 @@
-{
-  "echoes": {
-    "color": {
-      "background": {
-        "neutral": {
-          "subtle": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.500}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.8",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.grey.500}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.500}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.7",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.grey.500}"
-            }
-          },
-          "bolder": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.400}"
-            }
-          }
-        },
-        "accent": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.300}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.300}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.100}"
-          },
-          "weak": {
-            "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}"
-            },
-            "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.4",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}"
-            }
-          }
-        },
-        "warning": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.300}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.300}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.100}"
-          },
-          "weak": {
-            "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
-            },
-            "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.1",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.yellow.300}"
-            }
-          }
-        },
-        "success": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.green.300}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.green.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.green.300}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.green.100}"
-          },
-          "weak": {
-            "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.green.300}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.green.300}"
-            },
-            "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.green.300}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.1",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.green.300}"
-            }
-          }
-        },
-        "danger": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.red.300}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.red.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.red.300}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.red.100}"
-          },
-          "weak": {
-            "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.red.300}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.red.300}"
-            },
-            "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.red.300}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.1",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.red.300}"
-            }
-          }
-        },
-        "info": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.300}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.200}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.300}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.100}"
-          },
-          "weak": {
-            "default": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.blue.300}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.blue.300}"
-            },
-            "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.blue.300}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.1",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.blue.300}"
-            }
-          }
-        },
-        "utility": {
-          "transparent": {
-            "$type": "color",
-            "$value": "{echoes.color.support.transparent}"
-          }
-        },
-        "selected": {
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "#5d6cd033"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "#5d6cd04d"
-            },
-            "pressed": {
-              "$type": "color",
-              "$value": "#5d6cd04d"
-            }
-          },
-          "bold": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.200}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.100}"
-            },
-            "pressed": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.50}"
-            }
-          }
-        },
-        "ghost": {
-          "accent": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
-          },
-          "neutral": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.700}"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.800}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
-          },
-          "danger": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.red.900}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "hsl"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.red.900}"
-            },
-            "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.purple.600}"
-            },
-            "hover": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.2",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.purple.600}"
-            },
-            "focus": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.3",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.purple.600}"
-            },
-            "active": {
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.1",
-                    "space": "lch"
-                  }
-                }
-              },
-              "$type": "color",
-              "$value": "{echoes.color.purple.600}"
-            }
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.400}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.300}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.400}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.200}"
-          }
-        },
-        "favourite": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.300}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.200}"
-          }
-        }
-      },
-      "surface": {
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.600}"
-        },
-        "hover": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.700}"
-        },
-        "active": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.800}"
-        },
-        "canvas": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.700}"
-          }
-        },
-        "inverse": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.100}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.50}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.100}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.40}"
-          }
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        }
-      },
-      "overlays": {
-        "backDrop": {
-          "default": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.6",
-                  "space": "hsl"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.grey.900}"
-          }
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        }
-      },
-      "text": {
-        "strong": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.25}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.100}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.600}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.600}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.red.300}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "accent": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.300}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.blue.300}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.green.300}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.yellow.100}"
-        },
-        "emphasis": {
-          "$type": "color",
-          "$value": "{echoes.color.purple.200}"
-        },
-        "link": {
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.200}"
-          }
-        }
-      },
-      "icon": {
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.25}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.100}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "accent": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.200}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.red.300}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.yellow.200}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.green.200}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.blue.200}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.600}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.600}"
-        },
-        "selected": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.200}"
-        },
-        "emphasis": {
-          "$type": "color",
-          "$value": "{echoes.color.purple.200}"
-        }
-      },
-      "border": {
-        "bolder": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.300}"
-        },
-        "weak": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "weaker": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "accent": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.200}"
-          }
-        },
-        "danger": {
-          "weak": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.red.300}"
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.red.300}"
-          }
-        },
-        "none": {
-          "$type": "color",
-          "$value": "{echoes.color.support.transparent}"
-        },
-        "success": {
-          "weak": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.green.300}"
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.green.400}"
-          }
-        },
-        "warning": {
-          "weak": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.yellow.300}"
-          }
-        },
-        "info": {
-          "weak": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.blue.300}"
-          }
-        },
-        "emphasis": {
-          "weak": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.purple.600}"
-          }
-        }
-      },
-      "focus": {
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.200}"
-        }
-      }
-    },
-    "boxShadow": {
-      "xsmall": {
-        "$type": "boxShadow",
-        "$value": {
-          "x": "0",
-          "y": "1",
-          "blur": "4",
-          "spread": "0",
-          "color": "#08090c66",
-          "type": "dropShadow"
-        }
-      },
-      "small": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "1",
-            "blur": "10",
-            "spread": "0",
-            "color": "#08090c66",
-            "type": "dropShadow"
-          },
-          {
-            "x": "0",
-            "y": "1",
-            "blur": "3",
-            "spread": "0",
-            "color": "#08090c66",
-            "type": "dropShadow"
-          }
-        ]
-      },
-      "medium": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "2",
-            "blur": "15",
-            "spread": "-2",
-            "color": "#08090c0f",
-            "type": "innerShadow"
-          },
-          {
-            "x": "0",
-            "y": "4",
-            "blur": "15",
-            "spread": "-2",
-            "color": "#08090c80",
-            "type": "dropShadow"
-          }
-        ]
-      },
-      "large": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "4",
-            "blur": "6",
-            "spread": "-2",
-            "color": "#08090c0d",
-            "type": "dropShadow"
-          },
-          {
-            "x": "0",
-            "y": "12",
-            "blur": "20",
-            "spread": "-4",
-            "color": "#08090c80",
-            "type": "dropShadow"
-          }
-        ]
-      },
-      "xLarge": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "8",
-            "blur": "8",
-            "spread": "-4",
-            "color": "#08090c0a",
-            "type": "dropShadow"
-          },
-          {
-            "x": "0",
-            "y": "20",
-            "blur": "30",
-            "spread": "-4",
-            "color": "#08090c80",
-            "type": "dropShadow"
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/design-tokens/tokens/layer2/light.json b/design-tokens/tokens/layer2/light.json
deleted file mode 100644
index 4fafc45f2..000000000
--- a/design-tokens/tokens/layer2/light.json
+++ /dev/null
@@ -1,781 +0,0 @@
-{
-  "echoes": {
-    "color": {
-      "background": {
-        "neutral": {
-          "subtle": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.50}",
-              "$description": "Use it in components with neutral sentiment"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.50}",
-              "$description": "Use it in components with neutral sentiment"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.100}",
-              "$description": "Use it in components with neutral sentiment"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.200}",
-              "$description": "Use it in components with neutral sentiment"
-            }
-          },
-          "bolder": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.100}",
-              "$description": "Use it in components with neutral sentiment that need a bolder highlight"
-            }
-          }
-        },
-        "accent": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.500}",
-            "$description": "Used as the background color of components that reinforce our brand"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.600}",
-            "$description": "Hover state of components that reinforce our brand"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.500}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.700}",
-            "$description": "Active state of components that reinforce our brand"
-          },
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.25}",
-              "$description": "Used as the background color of components that reinforce our brand with less visual highlight"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.50}",
-              "$description": "Hover state of components that reinforce our brand with less visual highlight"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.100}",
-              "$description": "Active state of components that reinforce our brand with less visual highlight"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.50}",
-              "$description": "Focus state of components that reinforce our brand with less visual highlight"
-            }
-          }
-        },
-        "warning": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.500}",
-            "$description": "Use for backgrounds that communicate warning or caution"
-          },
-          "hover": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "darken",
-                  "value": "0.05",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.yellow.500}",
-            "$description": "Use for backgrounds that communicate warning or caution"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.500}",
-            "$description": "Use for backgrounds that communicate warning or caution"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.700}",
-            "$description": "Use for backgrounds that communicate warning or caution"
-          },
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.yellow.50}",
-              "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.yellow.100}",
-              "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.yellow.50}",
-              "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.yellow.200}",
-              "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
-            }
-          }
-        },
-        "success": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.green.700}",
-            "$description": "Use for backgrounds that communicate positive or success messages"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.green.800}",
-            "$description": "Use for backgrounds that communicate positive or success messages"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.green.700}",
-            "$description": "Use for backgrounds that communicate positive or success messages"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.green.900}",
-            "$description": "Use for backgrounds that communicate positive or success messages"
-          },
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.green.50}",
-              "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.green.100}",
-              "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.green.200}",
-              "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.green.50}",
-              "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
-            }
-          }
-        },
-        "danger": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.red.600}",
-            "$description": "Use for backgrounds that communicate danger or destructive messages"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.red.700}",
-            "$description": "Hover state for backgrounds that communicate danger or destructive messages"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.red.600}",
-            "$description": "Focused state for backgrounds that communicate danger or destructive messages"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.red.800}",
-            "$description": "Active state for backgrounds that communicate danger or destructive messages"
-          },
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.red.50}",
-              "$description": "Use it for backgrounds that communicate danger or destructive messages, with less visual highlight"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.red.100}",
-              "$description": "Hover state for backgrounds that communicate danger or destructive messages, with less visual highlight"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.red.200}",
-              "$description": "Active state for backgrounds that communicate danger or destructive messages, with less visual highlight"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.red.50}"
-            }
-          }
-        },
-        "info": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.800}",
-            "$description": "Use for backgrounds that communicate information to the user"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.900}",
-            "$description": "Use for backgrounds that communicate information to the user"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.800}",
-            "$description": "Use for backgrounds that communicate information to the user"
-          },
-          "active": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "darken",
-                  "value": "0.2",
-                  "space": "lch"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.blue.900}",
-            "$description": "Use for backgrounds that communicate information to the user"
-          },
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.blue.50}",
-              "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.blue.100}",
-              "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.blue.50}",
-              "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.blue.200}",
-              "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
-            }
-          }
-        },
-        "utility": {
-          "transparent": {
-            "$type": "color",
-            "$value": "{echoes.color.support.transparent}",
-            "$description": "Use it when you need transparency in the background"
-          }
-        },
-        "selected": {
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.25}",
-              "$description": "Use it in backgrounds of components that have a selected state that need less visual highlight, like dropdown or selects"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.50}",
-              "$description": "Hover state of components that have a selected state that need less visual highlight, like dropdown or selects"
-            },
-            "pressed": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.100}",
-              "$description": "Pressed state of components that have a selected state that need less visual highlight, like dropdown or selects"
-            }
-          },
-          "bold": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.500}",
-              "$description": "Use it in backgrounds of components that have a selected state, like checkboxes or radios"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.600}",
-              "$description": "Hover state of components that have a selected state, like checkboxes or radios"
-            },
-            "pressed": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.700}",
-              "$description": "Pressed state of components that have a selected state, like checkboxes or radios"
-            }
-          }
-        },
-        "ghost": {
-          "accent": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.50}"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.indigo.100}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
-          },
-          "neutral": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.50}"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.grey.100}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
-          },
-          "danger": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.red.50}"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.red.100}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.background.utility.transparent}"
-            }
-          }
-        },
-        "emphasis": {
-          "weak": {
-            "default": {
-              "$type": "color",
-              "$value": "{echoes.color.purple.100}"
-            },
-            "hover": {
-              "$type": "color",
-              "$value": "{echoes.color.purple.200}"
-            },
-            "focus": {
-              "$type": "color",
-              "$value": "{echoes.color.purple.100}"
-            },
-            "active": {
-              "$type": "color",
-              "$value": "{echoes.color.purple.300}"
-            }
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.700}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.800}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.700}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.900}"
-          }
-        },
-        "favourite": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.600}"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.700}"
-          }
-        }
-      },
-      "surface": {
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.support.white}",
-          "$description": "Go to color for surfaces.. eg: cards, modals, popovers, etc..."
-        },
-        "hover": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.40}",
-          "$description": "Hover color for bg-default"
-        },
-        "active": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.100}",
-          "$description": "Active color for bg-default"
-        },
-        "canvas": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.25}",
-            "$description": "Use it as page background"
-          }
-        },
-        "inverse": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.600}",
-            "$description": "Inverse color for bgs, creates high contrast against bg-default and bg-page"
-          },
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.700}"
-          },
-          "focus": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.600}"
-          },
-          "active": {
-            "$type": "color",
-            "$value": "{echoes.color.grey.800}"
-          }
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.50}",
-          "$description": "Use it as background for disabled components"
-        }
-      },
-      "overlays": {
-        "backDrop": {
-          "default": {
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.45",
-                  "space": "hsl"
-                }
-              }
-            },
-            "$type": "color",
-            "$value": "{echoes.color.grey.900}"
-          }
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.50}",
-          "$description": "Use it as background for disabled components"
-        }
-      },
-      "text": {
-        "strong": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.700}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.300}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.support.white}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        },
-        "accent": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.500}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.red.700}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.yellow.800}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.green.800}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.blue.800}"
-        },
-        "emphasis": {
-          "$type": "color",
-          "$value": "{echoes.color.purple.800}"
-        },
-        "link": {
-          "hover": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.600}"
-          }
-        }
-      },
-      "icon": {
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.700}"
-        },
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.300}"
-        },
-        "placeholder": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "accent": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.500}"
-        },
-        "danger": {
-          "$type": "color",
-          "$value": "{echoes.color.red.600}"
-        },
-        "warning": {
-          "$type": "color",
-          "$value": "{echoes.color.yellow.700}"
-        },
-        "success": {
-          "$type": "color",
-          "$value": "{echoes.color.green.600}"
-        },
-        "info": {
-          "$type": "color",
-          "$value": "{echoes.color.blue.600}"
-        },
-        "onColor": {
-          "$type": "color",
-          "$value": "{echoes.color.support.white}"
-        },
-        "onColor-Inverse": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.500}"
-        },
-        "selected": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.500}"
-        },
-        "emphasis": {
-          "$type": "color",
-          "$value": "{echoes.color.purple.800}"
-        }
-      },
-      "border": {
-        "bolder": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.400}"
-        },
-        "bold": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "weak": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.100}"
-        },
-        "weaker": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.50}"
-        },
-        "disabled": {
-          "$type": "color",
-          "$value": "{echoes.color.grey.200}"
-        },
-        "accent": {
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.indigo.500}"
-          }
-        },
-        "danger": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.red.100}"
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.red.600}"
-          }
-        },
-        "none": {
-          "$type": "color",
-          "$value": "{echoes.color.support.transparent}"
-        },
-        "success": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.green.100}"
-          },
-          "default": {
-            "$type": "color",
-            "$value": "{echoes.color.green.700}"
-          }
-        },
-        "warning": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.yellow.100}"
-          }
-        },
-        "info": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.blue.100}"
-          }
-        },
-        "emphasis": {
-          "weak": {
-            "$type": "color",
-            "$value": "{echoes.color.purple.200}"
-          }
-        }
-      },
-      "focus": {
-        "default": {
-          "$type": "color",
-          "$value": "{echoes.color.indigo.600}"
-        }
-      }
-    },
-    "boxShadow": {
-      "xsmall": {
-        "$type": "boxShadow",
-        "$value": {
-          "x": "0",
-          "y": "1",
-          "blur": "02",
-          "spread": "0",
-          "color": "#0000000d",
-          "type": "dropShadow"
-        }
-      },
-      "small": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "1",
-            "blur": "25",
-            "spread": "0",
-            "color": "#1d212f0d",
-            "type": "dropShadow"
-          },
-          {
-            "x": "0",
-            "y": "1",
-            "blur": "3",
-            "spread": "0",
-            "color": "#1d212f0d",
-            "type": "dropShadow"
-          }
-        ]
-      },
-      "medium": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "2",
-            "blur": "15",
-            "spread": "-2",
-            "color": "#1d212f0f",
-            "type": "dropShadow"
-          },
-          {
-            "x": "0",
-            "y": "4",
-            "blur": "8",
-            "spread": "-2",
-            "color": "#1d212f1a",
-            "type": "dropShadow"
-          }
-        ]
-      },
-      "large": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "4",
-            "blur": "6",
-            "spread": "-2",
-            "color": "#1d212f0d",
-            "type": "dropShadow"
-          },
-          {
-            "x": "0",
-            "y": "12",
-            "blur": "16",
-            "spread": "-4",
-            "color": "#1d212f1a",
-            "type": "dropShadow"
-          }
-        ]
-      },
-      "xLarge": {
-        "$type": "boxShadow",
-        "$value": [
-          {
-            "x": "0",
-            "y": "8",
-            "blur": "8",
-            "spread": "-4",
-            "color": "#1d212f0a",
-            "type": "dropShadow"
-          },
-          {
-            "x": "15",
-            "y": "20",
-            "blur": "24",
-            "spread": "-4",
-            "color": "#1d212f1a",
-            "type": "dropShadow"
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/design-tokens/tokens/mode/dark.json b/design-tokens/tokens/mode/dark.json
new file mode 100644
index 000000000..ec3e08d0c
--- /dev/null
+++ b/design-tokens/tokens/mode/dark.json
@@ -0,0 +1,539 @@
+{
+  "echoes": {
+    "color": {
+      "background": {
+        "neutral": {
+          "subtle": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.strong}"
+          },
+          "bolder": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.strong}"
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.bold}"
+          },
+          "canvas": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.bold}"
+          },
+          "inverse": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.light}"
+          },
+          "disabled": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.strong}"
+          }
+        },
+        "utility": {
+          "transparent": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.support.transparent}"
+          }
+        },
+        "ghost": {
+          "accent": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.utility.transparent}"
+            }
+          },
+          "neutral": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.utility.transparent}"
+            }
+          },
+          "danger": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.utility.transparent}"
+            }
+          }
+        },
+        "favourite": {
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.warning.medium}"
+          }
+        }
+      },
+      "primary": {
+        "default": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.medium}"
+        },
+        "interactionWeak": {
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.2",
+                "space": "hsl"
+              }
+            }
+          },
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.strong}"
+        }
+      },
+      "intent": {
+        "warning": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.medium}"
+        },
+        "warningWeak": {
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.3",
+                "space": "lch"
+              }
+            }
+          },
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.medium}"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.medium}"
+        },
+        "successWeak": {
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.3",
+                "space": "lch"
+              }
+            }
+          },
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.medium}"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.medium}"
+        },
+        "dangerWeak": {
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.3",
+                "space": "lch"
+              }
+            }
+          },
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.medium}"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.medium}"
+        },
+        "infoWeak": {
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.3",
+                "space": "lch"
+              }
+            }
+          },
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.medium}"
+        },
+        "emphasis": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.strong}"
+        },
+        "emphasisWeak": {
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.3",
+                "space": "lch"
+              }
+            }
+          },
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.bold}"
+        }
+      },
+      "states": {
+        "disable": {
+          "$type": "color",
+          "$value": ""
+        },
+        "onDisable": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "hover": {
+          "$type": "color",
+          "$value": ""
+        },
+        "press": {
+          "$type": "color",
+          "$value": ""
+        },
+        "select": {
+          "$type": "color",
+          "$value": "#5d6cd033"
+        },
+        "onSelect": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.bold}"
+        }
+      },
+      "overlays": {
+        "backDrop": {
+          "default": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.6",
+                  "space": "hsl"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.dark}"
+          }
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        }
+      },
+      "text": {
+        "strong": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.lightest}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.light}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "onColor": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.bold}"
+        },
+        "onColor-Inverse": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.bold}"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.medium}"
+        },
+        "placeholder": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "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}"
+        },
+        "emphasis": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.medium}"
+        }
+      },
+      "icon": {
+        "bold": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.lightest}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.light}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "placeholder": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.medium}"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.medium}"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.medium}"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.medium}"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.medium}"
+        },
+        "onColor": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.bold}"
+        },
+        "onColor-Inverse": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.bold}"
+        },
+        "selected": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.medium}"
+        },
+        "emphasis": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.medium}"
+        }
+      },
+      "border": {
+        "bolder": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "bold": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "weak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "weaker": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "accent": {
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.primary.medium}"
+          }
+        },
+        "danger": {
+          "weak": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.danger.medium}"
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.danger.medium}"
+          }
+        },
+        "none": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.support.transparent}"
+        },
+        "success": {
+          "weak": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.success.medium}"
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.success.strong}"
+          }
+        },
+        "warning": {
+          "weak": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.warning.medium}"
+          }
+        },
+        "info": {
+          "weak": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.info.medium}"
+          }
+        },
+        "emphasis": {
+          "weak": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.highlight.bold}"
+          }
+        }
+      }
+    },
+    "boxShadow": {
+      "xsmall": {
+        "$type": "boxShadow",
+        "$value": {
+          "x": "0",
+          "y": "1",
+          "blur": "4",
+          "spread": "0",
+          "color": "#08090c66",
+          "type": "dropShadow"
+        }
+      },
+      "small": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "1",
+            "blur": "10",
+            "spread": "0",
+            "color": "#08090c66",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "1",
+            "blur": "3",
+            "spread": "0",
+            "color": "#08090c66",
+            "type": "dropShadow"
+          }
+        ]
+      },
+      "medium": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "2",
+            "blur": "15",
+            "spread": "-2",
+            "color": "#08090c0f",
+            "type": "innerShadow"
+          },
+          {
+            "x": "0",
+            "y": "4",
+            "blur": "15",
+            "spread": "-2",
+            "color": "#08090c80",
+            "type": "dropShadow"
+          }
+        ]
+      },
+      "large": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "4",
+            "blur": "6",
+            "spread": "-2",
+            "color": "#08090c0d",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "12",
+            "blur": "20",
+            "spread": "-4",
+            "color": "#08090c80",
+            "type": "dropShadow"
+          }
+        ]
+      },
+      "xLarge": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "8",
+            "blur": "8",
+            "spread": "-4",
+            "color": "#08090c0a",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "20",
+            "blur": "30",
+            "spread": "-4",
+            "color": "#08090c80",
+            "type": "dropShadow"
+          }
+        ]
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/design-tokens/tokens/mode/light.json b/design-tokens/tokens/mode/light.json
new file mode 100644
index 000000000..dd15c7436
--- /dev/null
+++ b/design-tokens/tokens/mode/light.json
@@ -0,0 +1,459 @@
+{
+  "echoes": {
+    "color": {
+      "background": {
+        "neutral": {
+          "subtle": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.lightest}",
+            "$description": "Use it in components with neutral sentiment"
+          },
+          "bolder": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.light}",
+            "$description": "Use it in components with neutral sentiment that need a bolder highlight"
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.support.white}",
+            "$description": "Go to color for surfaces.. eg: cards, modals, popovers, etc..."
+          },
+          "canvas": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.lightest}",
+            "$description": "Use it as page background"
+          },
+          "inverse": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.bold}",
+            "$description": "Inverse color for bgs, creates high contrast against bg-default and bg-page"
+          },
+          "disabled": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.lightest}",
+            "$description": "Use it as background for disabled components"
+          }
+        },
+        "ghost": {
+          "accent": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.utility.transparent}"
+            }
+          },
+          "neutral": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.utility.transparent}"
+            }
+          },
+          "danger": {
+            "default": {
+              "$type": "color",
+              "$value": "{echoes.color.utility.transparent}"
+            }
+          }
+        },
+        "favourite": {
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.warning.bold}"
+          }
+        },
+        "onInteraction": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.support.white}"
+        }
+      },
+      "primary": {
+        "interaction": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.strong}",
+          "$description": "Used as the background color of components that reinforce our brand"
+        },
+        "interactionWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.lightest}",
+          "$description": "Used as the background color of components that reinforce our brand with less visual highlight"
+        },
+        "onInteractionWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.strong}"
+        }
+      },
+      "intent": {
+        "warning": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.strong}",
+          "$description": "Use for backgrounds that communicate warning or caution"
+        },
+        "warningWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.lightest}",
+          "$description": "Use for backgrounds that communicate warning or caution, with less visual highlight"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.bold}",
+          "$description": "Use for backgrounds that communicate positive or success messages"
+        },
+        "successWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.lightest}",
+          "$description": "Use for backgrounds that communicate positive or success messages, with less visual highlight"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.bold}",
+          "$description": "Use for backgrounds that communicate danger or destructive messages"
+        },
+        "dangerWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.lightest}",
+          "$description": "Use it for backgrounds that communicate danger or destructive messages, with less visual highlight"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.dark}",
+          "$description": "Use for backgrounds that communicate information to the user"
+        },
+        "infoWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.lightest}",
+          "$description": "Use for backgrounds that communicate information to the user, with less visual highlight"
+        },
+        "emphasis": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.bold}"
+        },
+        "emphasisWeak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.light}"
+        }
+      },
+      "states": {
+        "disable": {
+          "$type": "color",
+          "$value": ""
+        },
+        "onDisable": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "hover": {
+          "$type": "color",
+          "$value": ""
+        },
+        "press": {
+          "$type": "color",
+          "$value": ""
+        },
+        "select": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.lightest}",
+          "$description": "Use it in backgrounds of components that have a selected state that need less visual highlight, like dropdown or selects"
+        },
+        "onSelect": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.bold}"
+        }
+      },
+      "utility": {
+        "transparent": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.support.transparent}",
+          "$description": "Use it when you need transparency in the background"
+        }
+      },
+      "overlays": {
+        "backDrop": {
+          "default": {
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.45",
+                  "space": "hsl"
+                }
+              }
+            },
+            "$type": "color",
+            "$value": "{echoes.color.roles.neutral.dark}"
+          }
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.lightest}",
+          "$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}"
+        },
+        "placeholder": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "onColor-Inverse": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.bold}"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.dark}"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.dark}"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.dark}"
+        },
+        "emphasis": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.dark}"
+        }
+      },
+      "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.roles.neutral.strong}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "placeholder": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.strong}"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.danger.bold}"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.warning.bold}"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.success.bold}"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.info.bold}"
+        },
+        "onColor": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.support.white}"
+        },
+        "onColor-Inverse": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "selected": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.primary.strong}"
+        },
+        "emphasis": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.highlight.dark}"
+        }
+      },
+      "border": {
+        "bolder": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.strong}"
+        },
+        "bold": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "weak": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.light}"
+        },
+        "weaker": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.lightest}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.neutral.medium}"
+        },
+        "accent": {
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.primary.strong}"
+          }
+        },
+        "danger": {
+          "weak": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.danger.light}"
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.danger.bold}"
+          }
+        },
+        "none": {
+          "$type": "color",
+          "$value": "{echoes.color.roles.support.transparent}"
+        },
+        "success": {
+          "weak": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.success.light}"
+          },
+          "default": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.success.bold}"
+          }
+        },
+        "warning": {
+          "weak": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.warning.light}"
+          }
+        },
+        "info": {
+          "weak": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.info.light}"
+          }
+        },
+        "emphasis": {
+          "weak": {
+            "$type": "color",
+            "$value": "{echoes.color.roles.highlight.medium}"
+          }
+        }
+      }
+    },
+    "boxShadow": {
+      "xsmall": {
+        "$type": "boxShadow",
+        "$value": {
+          "x": "0",
+          "y": "1",
+          "blur": "02",
+          "spread": "0",
+          "color": "#0000000d",
+          "type": "dropShadow"
+        }
+      },
+      "small": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "1",
+            "blur": "25",
+            "spread": "0",
+            "color": "#1d212f0d",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "1",
+            "blur": "3",
+            "spread": "0",
+            "color": "#1d212f0d",
+            "type": "dropShadow"
+          }
+        ]
+      },
+      "medium": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "2",
+            "blur": "15",
+            "spread": "-2",
+            "color": "#1d212f0f",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "4",
+            "blur": "8",
+            "spread": "-2",
+            "color": "#1d212f1a",
+            "type": "dropShadow"
+          }
+        ]
+      },
+      "large": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "4",
+            "blur": "6",
+            "spread": "-2",
+            "color": "#1d212f0d",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "12",
+            "blur": "16",
+            "spread": "-4",
+            "color": "#1d212f1a",
+            "type": "dropShadow"
+          }
+        ]
+      },
+      "xLarge": {
+        "$type": "boxShadow",
+        "$value": [
+          {
+            "x": "0",
+            "y": "8",
+            "blur": "8",
+            "spread": "-4",
+            "color": "#1d212f0a",
+            "type": "dropShadow"
+          },
+          {
+            "x": "15",
+            "y": "20",
+            "blur": "24",
+            "spread": "-4",
+            "color": "#1d212f1a",
+            "type": "dropShadow"
+          }
+        ]
+      }
+    }
+  }
+}
\ No newline at end of file