diff --git a/package-lock.json b/package-lock.json
index 131d1ca31..a94c3074c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "@db-ui/base",
       "version": "0.0.0",
       "license": "Apache-2.0",
+      "dependencies": {
+        "hex-a11y": "^1.0.2"
+      },
       "devDependencies": {
         "@commitlint/cli": "16.2.1",
         "@commitlint/config-conventional": "16.2.1",
@@ -2775,6 +2778,11 @@
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
+    "node_modules/hex-a11y": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hex-a11y/-/hex-a11y-1.0.2.tgz",
+      "integrity": "sha512-M5ez7G+ebutJXr6aYoEzjM5RKbWJJmpxjgvw34Tai9k3robs9B1BfIJBPrAzzPD9eb2bGJ5qNSUcAyVs1T6XzQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -9786,6 +9794,11 @@
         }
       }
     },
+    "hex-a11y": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hex-a11y/-/hex-a11y-1.0.2.tgz",
+      "integrity": "sha512-M5ez7G+ebutJXr6aYoEzjM5RKbWJJmpxjgvw34Tai9k3robs9B1BfIJBPrAzzPD9eb2bGJ5qNSUcAyVs1T6XzQ=="
+    },
     "hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
diff --git a/package.json b/package.json
index 0c3590ab7..04ab56dc2 100644
--- a/package.json
+++ b/package.json
@@ -59,5 +59,8 @@
     "pl:serve": "patternlab serve --config ./patternlab-config.json",
     "pl:version": "patternlab --version"
   },
-  "homepage": "https://db-ui.github.io/base/"
+  "homepage": "https://db-ui.github.io/base/",
+  "dependencies": {
+    "hex-a11y": "^1.0.2"
+  }
 }
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index d1fc8b74d..38e4e90fc 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -1,5 +1,5 @@
 {
-	"source": ["tokens/**/*.json", "tokens/**/*.jsonc"],
+	"source": ["tokens/**/*.js"],
 	"platforms": {
 		"css": {
 			"transformGroup": "css",
@@ -23,6 +23,32 @@
 				}
 			]
 		},
+		"sketch": {
+			"transforms": [
+				"attribute/cti",
+				"color/sketchTransform",
+				"name/cti/kebab"
+			],
+			"buildPath": "build/sketch/",
+			"prefix": "db",
+			"files": [
+				{
+					"destination": "sketch-palette.sketchpalette",
+					"format": "sketch/sketchpalette"
+				}
+			]
+		},
+		"json": {
+			"transformGroup": "js",
+			"buildPath": "build/json/",
+			"prefix": "db",
+			"files": [
+				{
+					"destination": "colors.json",
+					"format": "json"
+				}
+			]
+		},
 		"js": {
 			"transformGroup": "js",
 			"buildPath": "build/js/",
diff --git a/style-dictionary.js b/style-dictionary.js
index b3fa78b62..62ec574b5 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -2,6 +2,8 @@ const StyleDictionary = require('style-dictionary').extend(
 	'style-dictionary.config.json'
 );
 
+const TinyColor2 = require('tinycolor2');
+
 const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary');
 
 const flattenColors = (dictionary) => {
@@ -18,9 +20,11 @@ const flattenColors = (dictionary) => {
 				Object.keys(colors[colorKey]).forEach((subColorKey) => {
 					// TODO: We should be able to removed this with Amazon Style Dictionary 4, as this might allow parallel "nesting" of a value and subentries
 					if (subColorKey === '_') {
-						flatColors[`${colorKey}`] = colors[colorKey][subColorKey];
+						flatColors[`${colorKey}`] =
+							colors[colorKey][subColorKey];
 					} else if (subColorKey.includes('small')) {
-						flatColors[`${colorKey}-sm`] = colors[colorKey][subColorKey];
+						flatColors[`${colorKey}-sm`] =
+							colors[colorKey][subColorKey];
 					} else {
 						flatColors[`${colorKey}-${subColorKey}`] =
 							colors[colorKey][subColorKey];
@@ -32,6 +36,9 @@ const flattenColors = (dictionary) => {
 	dictionary['color'] = flatColors;
 };
 
+/**
+ * Custom Tailwind Formatter
+ */
 StyleDictionary.registerFormat({
 	name: 'tailwind',
 	formatter: function ({ dictionary, platform, options, file }) {
@@ -41,4 +48,49 @@ StyleDictionary.registerFormat({
 	}
 });
 
+/**
+ * Custom Sketch Palette Transform
+ */
+StyleDictionary.registerTransform({
+	type: 'value',
+	transitive: true,
+	name: 'color/sketchTransform',
+	// matcher: (prop) => prop.attributes.category === 'color',
+	transformer: (prop) => {
+		let color = TinyColor2(prop.original.value).toRgb();
+		console.log('--- transformer current token: ', color);
+		return {
+			red: color.r / 255, // .toFixed(2)
+			green: color.g / 255,
+			blue: color.b / 255,
+			alpha: color.a
+		};
+	}
+});
+
+/**
+ * Custom Sketch Palette Formatter
+ */
+StyleDictionary.registerFormat({
+	name: 'sketch/sketchpalette',
+	formatter: ({ dictionary, platform, options, file }) => {
+		//console.log('sketch formatter ', dictionary);
+
+		var to_ret = {
+			compatibleVersion: '2.0',
+			pluginVersion: '2.22',
+			colors: dictionary.allProperties.map(function (prop) {
+				// Merging the token's value, which should be an object with r,g,b,a channels
+				return Object.assign(
+					{
+						name: prop.name
+					},
+					prop.value
+				);
+			})
+		};
+		return JSON.stringify(to_ret, null, 2);
+	}
+});
+
 StyleDictionary.buildAllPlatforms();
diff --git a/tokens/color.json b/tokens/color.json
deleted file mode 100644
index 6c237dbec..000000000
--- a/tokens/color.json
+++ /dev/null
@@ -1,450 +0,0 @@
-{
-	"color": {
-		"yellow": {
-			"100": {
-				"value": "#ffffdc",
-				"attributes": { "color": "yellow" }
-			},
-			"200": {
-				"value": "#ffffaf",
-				"attributes": { "color": "yellow" }
-			},
-			"300": {
-				"value": "#fff876",
-				"attributes": { "color": "yellow" }
-			},
-			"400": {
-				"value": "#fff000",
-				"attributes": { "color": "yellow" }
-			},
-			"500": {
-				"value": "#ffd800",
-				"attributes": { "color": "yellow" }
-			},
-			"600": {
-				"value": "#ffbb00",
-				"attributes": { "color": "yellow" }
-			},
-			"700": {
-				"value": "#ff9b00",
-				"attributes": { "color": "yellow" }
-			},
-			"800": {
-				"value": "#ff7a00",
-				"attributes": { "color": "yellow" }
-			},
-			"900": {
-				"value": "#f05000",
-				"attributes": { "color": "yellow" }
-			}
-		},
-		"orange": {
-			"100": {
-				"value": "#fff4d8",
-				"attributes": { "color": "orange" }
-			},
-			"200": {
-				"value": "#fce3b4",
-				"attributes": { "color": "orange" }
-			},
-			"300": {
-				"value": "#faca7f",
-				"attributes": { "color": "orange" }
-			},
-			"400": {
-				"value": "#f8ab37",
-				"attributes": { "color": "orange" }
-			},
-			"500": {
-				"value": "#f39200",
-				"attributes": { "color": "orange" }
-			},
-			"600": {
-				"value": "#d77b00",
-				"attributes": { "color": "orange" }
-			},
-			"700": {
-				"value": "#c05e00",
-				"attributes": { "color": "orange" }
-			},
-			"800": {
-				"value": "#a24800",
-				"attributes": { "color": "orange" }
-			}
-		},
-		"red": {
-			"100": {
-				"value": "#fee6e6",
-				"attributes": { "color": "red" }
-			},
-			"200": {
-				"value": "#fcc8c3",
-				"attributes": { "color": "red" }
-			},
-			"300": {
-				"value": "#fa9090",
-				"attributes": { "color": "red" }
-			},
-			"400": {
-				"value": "#f75056",
-				"attributes": { "color": "red" }
-			},
-			"500": {
-				"value": "#ec0016",
-				"attributes": { "color": "red" }
-			},
-			"600": {
-				"value": "#c50014",
-				"attributes": { "color": "red" }
-			},
-			"700": {
-				"value": "#9b000e",
-				"attributes": { "color": "red" }
-			},
-			"800": {
-				"value": "#740009",
-				"attributes": { "color": "red" }
-			}
-		},
-		"burgundy": {
-			"100": {
-				"value": "#f4e8ed",
-				"attributes": { "color": "burgundy" }
-			},
-			"200": {
-				"value": "#edcbd6",
-				"attributes": { "color": "burgundy" }
-			},
-			"300": {
-				"value": "#da9aa8",
-				"attributes": { "color": "burgundy" }
-			},
-			"400": {
-				"value": "#c0687b",
-				"attributes": { "color": "burgundy" }
-			},
-			"500": {
-				"value": "#a9455d",
-				"attributes": { "color": "burgundy" }
-			},
-			"600": {
-				"value": "#8c2e46",
-				"attributes": { "color": "burgundy" }
-			},
-			"700": {
-				"value": "#641e32",
-				"attributes": { "color": "burgundy" }
-			},
-			"800": {
-				"value": "#4d0820",
-				"attributes": { "color": "burgundy" }
-			}
-		},
-		"pink": {
-			"100": {
-				"value": "#fdeef8",
-				"attributes": { "color": "pink" }
-			},
-			"200": {
-				"value": "#f9d2e5",
-				"attributes": { "color": "pink" }
-			},
-			"300": {
-				"value": "#f4aece",
-				"attributes": { "color": "pink" }
-			},
-			"400": {
-				"value": "#ee7bae",
-				"attributes": { "color": "pink" }
-			},
-			"500": {
-				"value": "#e93e8f",
-				"attributes": { "color": "pink" }
-			},
-			"600": {
-				"value": "#db0078",
-				"attributes": { "color": "pink" }
-			},
-			"700": {
-				"value": "#b80065",
-				"attributes": { "color": "pink" }
-			},
-			"800": {
-				"value": "#970052",
-				"attributes": { "color": "pink" }
-			}
-		},
-		"violett": {
-			"100": {
-				"value": "#f4eefa",
-				"attributes": { "color": "violett" }
-			},
-			"200": {
-				"value": "#e0cde4",
-				"attributes": { "color": "violett" }
-			},
-			"300": {
-				"value": "#c2a1c7",
-				"attributes": { "color": "violett" }
-			},
-			"400": {
-				"value": "#9a6ca6",
-				"attributes": { "color": "violett" }
-			},
-			"500": {
-				"value": "#814997",
-				"attributes": { "color": "violett" }
-			},
-			"600": {
-				"value": "#6e368c",
-				"attributes": { "color": "violett" }
-			},
-			"700": {
-				"value": "#581d70",
-				"attributes": { "color": "violett" }
-			},
-			"800": {
-				"value": "#421857",
-				"attributes": { "color": "violett" }
-			}
-		},
-		"blue": {
-			"100": {
-				"value": "#e0effb",
-				"attributes": { "color": "blue" }
-			},
-			"200": {
-				"value": "#b4d5f6",
-				"attributes": { "color": "blue" }
-			},
-			"300": {
-				"value": "#73aef4",
-				"attributes": { "color": "blue" }
-			},
-			"400": {
-				"value": "#347de0",
-				"attributes": { "color": "blue" }
-			},
-			"500": {
-				"value": "#1455c0",
-				"attributes": { "color": "blue" }
-			},
-			"600": {
-				"value": "#0c3992",
-				"attributes": { "color": "blue" }
-			},
-			"700": {
-				"value": "#0a1e6e",
-				"attributes": { "color": "blue" }
-			},
-			"800": {
-				"value": "#061350",
-				"attributes": { "color": "blue" }
-			}
-		},
-		"cyan": {
-			"100": {
-				"value": "#e5faff",
-				"attributes": { "color": "cyan" }
-			},
-			"200": {
-				"value": "#bbe6f8",
-				"attributes": { "color": "cyan" }
-			},
-			"300": {
-				"value": "#84cfef",
-				"attributes": { "color": "cyan" }
-			},
-			"400": {
-				"value": "#55b9e6",
-				"attributes": { "color": "cyan" }
-			},
-			"500": {
-				"value": "#309fd1",
-				"attributes": { "color": "cyan" }
-			},
-			"600": {
-				"value": "#0087b9",
-				"attributes": { "color": "cyan" }
-			},
-			"700": {
-				"value": "#006a96",
-				"attributes": { "color": "cyan" }
-			},
-			"800": {
-				"value": "#004b6d",
-				"attributes": { "color": "cyan" }
-			}
-		},
-		"turquoise": {
-			"100": {
-				"value": "#e3f5f4",
-				"attributes": { "color": "turquoise" }
-			},
-			"200": {
-				"value": "#bee2e5",
-				"attributes": { "color": "turquoise" }
-			},
-			"300": {
-				"value": "#83caca",
-				"attributes": { "color": "turquoise" }
-			},
-			"400": {
-				"value": "#3cb5ae",
-				"attributes": { "color": "turquoise" }
-			},
-			"500": {
-				"value": "#00a099",
-				"attributes": { "color": "turquoise" }
-			},
-			"600": {
-				"value": "#008984",
-				"attributes": { "color": "turquoise" }
-			},
-			"700": {
-				"value": "#006e6b",
-				"attributes": { "color": "turquoise" }
-			},
-			"800": {
-				"value": "#005752",
-				"attributes": { "color": "turquoise" }
-			}
-		},
-		"green": {
-			"100": {
-				"value": "#e2f3e5",
-				"attributes": { "color": "green" }
-			},
-			"200": {
-				"value": "#bddbb9",
-				"attributes": { "color": "green" }
-			},
-			"300": {
-				"value": "#8cbc80",
-				"attributes": { "color": "green" }
-			},
-			"400": {
-				"value": "#66a558",
-				"attributes": { "color": "green" }
-			},
-			"500": {
-				"value": "#408335",
-				"attributes": { "color": "green" }
-			},
-			"600": {
-				"value": "#2a7230",
-				"attributes": { "color": "green" }
-			},
-			"700": {
-				"value": "#165c27",
-				"attributes": { "color": "green" }
-			},
-			"800": {
-				"value": "#154a26",
-				"attributes": { "color": "green" }
-			}
-		},
-		"light-green": {
-			"100": {
-				"value": "#ebf7dd",
-				"attributes": { "color": "light-green" }
-			},
-			"200": {
-				"value": "#c9eb9e",
-				"attributes": { "color": "light-green" }
-			},
-			"300": {
-				"value": "#9fd45f",
-				"attributes": { "color": "light-green" }
-			},
-			"400": {
-				"value": "#78be14",
-				"attributes": { "color": "light-green" }
-			},
-			"500": {
-				"value": "#63a615",
-				"attributes": { "color": "light-green" }
-			},
-			"600": {
-				"value": "#508b1b",
-				"attributes": { "color": "light-green" }
-			},
-			"700": {
-				"value": "#44741a",
-				"attributes": { "color": "light-green" }
-			},
-			"800": {
-				"value": "#375f15",
-				"attributes": { "color": "light-green" }
-			}
-		},
-		"warm-gray": {
-			"100": {
-				"value": "#f5f4f1",
-				"attributes": { "color": "warm-gray" }
-			},
-			"200": {
-				"value": "#ddded6",
-				"attributes": { "color": "warm-gray" }
-			},
-			"300": {
-				"value": "#bcbbb2",
-				"attributes": { "color": "warm-gray" }
-			},
-			"400": {
-				"value": "#9c9a8e",
-				"attributes": { "color": "warm-gray" }
-			},
-			"500": {
-				"value": "#858379",
-				"attributes": { "color": "warm-gray" }
-			},
-			"600": {
-				"value": "#747067",
-				"attributes": { "color": "warm-gray" }
-			},
-			"700": {
-				"value": "#4f4b41",
-				"attributes": { "color": "warm-gray" }
-			},
-			"800": {
-				"value": "#38342f",
-				"attributes": { "color": "warm-gray" }
-			}
-		},
-		"cool-gray": {
-			"100": {
-				"value": "#f0f3f5",
-				"attributes": { "color": "cool-gray" }
-			},
-			"200": {
-				"value": "#d7dce1",
-				"attributes": { "color": "cool-gray" }
-			},
-			"300": {
-				"value": "#afb4bb",
-				"attributes": { "color": "cool-gray" }
-			},
-			"400": {
-				"value": "#878c96",
-				"attributes": { "color": "cool-gray" }
-			},
-			"500": {
-				"value": "#646973",
-				"attributes": { "color": "cool-gray" }
-			},
-			"600": {
-				"value": "#3c414b",
-				"attributes": { "color": "cool-gray" }
-			},
-			"700": {
-				"value": "#282d37",
-				"attributes": { "color": "cool-gray" }
-			},
-			"800": {
-				"value": "#131821",
-				"attributes": { "color": "cool-gray" }
-			}
-		}
-	}
-}
diff --git a/tokens/colors.js b/tokens/colors.js
new file mode 100644
index 000000000..c775492bf
--- /dev/null
+++ b/tokens/colors.js
@@ -0,0 +1,67 @@
+/**
+ * Generate color values for each baseColor according to state enabled, hover or pressed.
+ *
+ * Depending on color luminance (threshold 0.1), hover and pressed values are generated by lighten or darken baseColor value.
+ *
+ * TODO:
+ * - generate on colors for all values according to sketch definitions
+ * - StyleDictionary export to JSON file to import in sketch (with indexed naming, e.g. 01--neutral)
+ * - write sketch plugin for import generated colors in sketch
+ */
+
+const Color = require('tinycolor2');
+
+const LUMINANCE_THRESHOLD = 0.1;
+
+const baseColors = {
+	neutral: { r: 255, g: 255, b: 255 },
+	neutralBackground01: { r: 248, g: 249, b: 249 },
+	neutralBackground02: { r: 242, g: 243, b: 244 },
+	neutralBackground03: { r: 236, g: 236, b: 237 },
+	neutralBackground04: { r: 230, g: 230, b: 232 },
+	neutralBackground05: { r: 224, g: 225, b: 227 },
+	neutralBackground06: { r: 217, g: 219, b: 221 },
+	primary: { r: 236, g: 0, b: 22 },
+	primaryBackground: { r: 250, g: 191, b: 196 },
+	secondary: { r: 40, g: 45, b: 55 },
+	secondaryBackground: { r: 195, g: 196, b: 199 },
+	success: { r: 67, g: 122, b: 18 },
+	successBackground: { r: 206, g: 222, b: 191 },
+	information: { r: 0, g: 135, b: 185 },
+	informationBackground: { r: 184, g: 221, b: 235 },
+	warning: { r: 240, g: 80, b: 0 },
+	warningBackground: { r: 250, g: 206, b: 184 },
+	critical: { r: 236, g: 0, b: 22 },
+	criticalBackground: { r: 249, g: 184, b: 190 }
+};
+
+// Use a reduce function to take the array of keys in baseColor
+// and map them to an object with the same keys.
+module.exports = {
+	color: Object.keys(baseColors).reduce((ret, color) => {
+		return Object.assign({}, ret, {
+			[color]: {
+				// generate the shades/tints for each color
+				enabled: {
+					value: Color(baseColors[color]).toHexString()
+				},
+				hover: {
+					value:
+						Color(baseColors[color]).getLuminance() <
+						LUMINANCE_THRESHOLD
+							? Color(baseColors[color]).brighten(8).toHexString()
+							: Color(baseColors[color]).darken(5.7).toHexString()
+				},
+				pressed: {
+					value:
+						Color(baseColors[color]).getLuminance() <
+						LUMINANCE_THRESHOLD
+							? Color(baseColors[color])
+									.brighten(20)
+									.toHexString()
+							: Color(baseColors[color]).darken(11).toHexString()
+				}
+			}
+		});
+	}, {})
+};
diff --git a/tokens/colors.json b/tokens/colors.json
new file mode 100644
index 000000000..c7a995018
--- /dev/null
+++ b/tokens/colors.json
@@ -0,0 +1,434 @@
+{
+	"color": {
+		"01--Neutral": {
+			"01--Enabled": {
+				"value": "rgba(255, 255, 255, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(235, 235, 235, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(214, 214, 214, 1)"
+			},
+			"BackgroundOnly": {
+				"1": {
+					"01--Enabled": {
+						"value": "rgba(248, 249, 249, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(228, 229, 229, 1)"
+					},
+					"03--Pressed": {
+						"value": "rgba(208, 208, 208, 1)"
+					}
+				},
+				"2": {
+					"01--Enabled": {
+						"value": "rgba(242, 243, 244, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(223, 223, 224, 1)"
+					},
+					"03--Pressed": {
+						"value": "rgba(203, 203, 204, 1)"
+					}
+				},
+				"3": {
+					"01--Enabled": {
+						"value": "rgba(236, 236, 237, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(217, 217, 218, 1)"
+					},
+					"03--Pressed": {
+						"value": "rgba(198, 198, 198, 1)"
+					}
+				},
+				"4": {
+					"01--Enabled": {
+						"value": "rgba(230, 230, 232, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(211, 211, 213, 1)"
+					},
+					"03--Pressed": {
+						"value": "rgba(193, 193, 194, 1)"
+					}
+				},
+				"5": {
+					"01--Enabled": {
+						"value": "rgba(224, 225, 227, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(206, 207, 209, 1)"
+					},
+					"03--Pressed": {
+						"value": "rgba(187, 188, 190, 1)"
+					}
+				},
+				"6": {
+					"01--Enabled": {
+						"value": "rgba(217, 219, 221, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(199, 201, 203, 1)"
+					},
+					"03--Pressed": {
+						"value": "rgba(182, 183, 185, 1)"
+					}
+				}
+			}
+		},
+		"02--Primary": {
+			"01--Enabled": {
+				"value": "rgba(236, 0, 22, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(217, 0, 20, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(199, 0, 18, 1)"
+			},
+			"BackgroundOnly": {
+				"01--Enabled": {
+					"value": "rgba(250, 191, 196, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(246, 161, 169, 1)"
+				},
+				"03--Pressed": {
+					"value": "rgba(246, 139, 149, 1)"
+				}
+			}
+		},
+		"03--Secondary": {
+			"01--Enabled": {
+				"value": "rgba(40, 45, 55, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(66, 70, 79, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(91, 95, 102, 1)"
+			},
+			"BackgroundOnly": {
+				"01--Enabled": {
+					"value": "rgba(195, 196, 199, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(176, 177, 181, 1)"
+				},
+				"03--Pressed": {
+					"value": "rgba(158, 160, 164, 1)"
+				}
+			}
+		},
+		"04--Success": {
+			"01--Enabled": {
+				"value": "rgba(67, 122, 18, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(61, 113, 16, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(57, 104, 15, 1)"
+			},
+			"BackgroundOnly": {
+				"01--Enabled": {
+					"value": "rgba(206, 222, 191, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(190, 212, 170, 1)"
+				},
+				"03--Pressed": {
+					"value": "rgba(175, 201, 151, 1)"
+				}
+			}
+		},
+		"05--Information": {
+			"01--Enabled": {
+				"value": "rgba(0, 135, 185, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(0, 124, 170, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(0, 113, 155, 1)"
+			},
+			"BackgroundOnly": {
+				"01--Enabled": {
+					"value": "rgba(184, 221, 235, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(161, 210, 228, 1)"
+				},
+				"03--Pressed": {
+					"value": "rgba(139, 200, 222, 1)"
+				}
+			}
+		},
+		"06--Warning": {
+			"01--Enabled": {
+				"value": "rgba(240, 80, 0, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(221, 73, 0, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(201, 67, 0, 1)"
+			},
+			"BackgroundOnly": {
+				"01--Enabled": {
+					"value": "rgba(250, 206, 184, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(248, 190, 161, 1)"
+				},
+				"03--Pressed": {
+					"value": "rgba(248, 175, 139, 1)"
+				}
+			}
+		},
+		"07--Critical": {
+			"01--Enabled": {
+				"value": "rgba(236, 0, 22, 1)"
+			},
+			"02--Hover": {
+				"value": "rgba(217, 0, 20, 1)"
+			},
+			"03--Pressed": {
+				"value": "rgba(198, 0, 18, 1)"
+			},
+			"BackgroundOnly": {
+				"01--Enabled": {
+					"value": "rgba(249, 184, 190, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(247, 167, 175, 1)"
+				},
+				"03--Pressed": {
+					"value": "rgba(246, 139, 149, 1)"
+				}
+			}
+		},
+		"On": {
+			"01--Neutral": {
+				"01--Enabled": {
+					"value": "rgba(40, 45, 55, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(40, 45, 55, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(40, 45, 55, 0.5)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(40, 45, 55, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(40, 45, 55, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(40, 45, 55, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(40, 45, 55, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(40, 45, 55, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(40, 45, 55, 0.25)"
+					}
+				}
+			},
+			"02--Primary": {
+				"01--Enabled": {
+					"value": "rgba(255, 255, 255, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(85, 0, 7, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(85, 0, 7, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(85, 0, 7, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(85, 0, 7, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(85, 0, 7, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(85, 0, 7, 0.25)"
+					}
+				}
+			},
+			"03--Secondary": {
+				"01--Enabled": {
+					"value": "rgba(255, 255, 255, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(255, 255, 255, 0.25)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(14, 16, 19, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(14, 16, 19, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(14, 16, 19, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(14, 16, 19, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(14, 16, 19, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(14, 16, 19, 0.25)"
+					}
+				}
+			},
+			"04--Success": {
+				"01--Enabled": {
+					"value": "rgba(255, 255, 255, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(28, 50, 9, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(28, 50, 9, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(28, 50, 9, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(28, 50, 9, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(28, 50, 9, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(28, 50, 9, 0.25)"
+					}
+				}
+			},
+			"05--Information": {
+				"01--Enabled": {
+					"value": "rgba(255, 255, 255, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(0, 48, 66, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(0, 48, 66, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(0, 48, 66, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(0, 48, 66, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(0, 48, 66, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(0, 48, 66, 0.25)"
+					}
+				}
+			},
+			"06--Warning": {
+				"01--Enabled": {
+					"value": "rgba(255, 255, 255, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(86, 28, 0, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(86, 28, 0, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(86, 28, 0, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(86, 28, 0, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(86, 28, 0, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(86, 28, 0, 0.25)"
+					}
+				}
+			},
+			"07--Critical": {
+				"01--Enabled": {
+					"value": "rgba(255, 255, 255, 1)"
+				},
+				"02--Hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"03--Pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"BackgroundOnly": {
+					"01--Enabled": {
+						"value": "rgba(85, 0, 7, 1)"
+					},
+					"02--Hover": {
+						"value": "rgba(85, 0, 7, 0.75)"
+					},
+					"03--Pressed": {
+						"value": "rgba(85, 0, 7, 0.5)"
+					},
+					"Weak--01--Enabled": {
+						"value": "rgba(85, 0, 7, 0.75)"
+					},
+					"Weak--02--Hover": {
+						"value": "rgba(85, 0, 7, 0.5)"
+					},
+					"Weak--03--Pressed": {
+						"value": "rgba(85, 0, 7, 0.25)"
+					}
+				}
+			}
+		}
+	}
+}