diff --git a/.gitignore b/.gitignore
index c6e316bfa..ed563551f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,9 @@ node_modules
 .env.local
 .env.*.local
 
+/src/system/tokens/generated
+/src/system/icons/generated
+
 # Log files
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/system/tokens/generated/tokens.json b/src/system/tokens/generated/tokens.json
deleted file mode 100644
index 6fc8819a8..000000000
--- a/src/system/tokens/generated/tokens.json
+++ /dev/null
@@ -1,187 +0,0 @@
-{
-  "color-neutral-0": "rgb(25, 23, 28)",
-  "color-neutral-10": "rgb(40, 37, 45)",
-  "color-neutral-20": "rgb(75, 69, 84)",
-  "color-neutral-30": "rgb(100, 92, 112)",
-  "color-neutral-40": "rgb(112, 103, 126)",
-  "color-neutral-50": "rgb(151, 143, 163)",
-  "color-neutral-60": "rgb(177, 171, 186)",
-  "color-neutral-70": "rgb(203, 199, 209)",
-  "color-neutral-80": "rgb(229, 227, 232)",
-  "color-neutral-85": "rgb(239, 238, 241)",
-  "color-neutral-90": "rgb(245, 244, 246)",
-  "color-neutral-95": "rgb(250, 249, 250)",
-  "color-neutral-100": "rgb(255, 255, 255)",
-  "color-primary": "rgb(23, 181, 63)",
-  "color-primary-active": "rgb(25, 194, 67)",
-  "color-primary-inverse": "rgb(241, 253, 244)",
-  "color-secondary": "rgb(0, 142, 230)",
-  "color-secondary-active": "rgb(10, 161, 255)",
-  "color-secondary-inverse": "rgb(240, 249, 255)",
-  "color-success": "rgb(23, 181, 63)",
-  "color-success-active": "rgb(26, 203, 71)",
-  "color-success-inverse": "rgb(241, 253, 244)",
-  "color-danger": "rgb(219, 57, 36)",
-  "color-danger-active": "rgb(224, 81, 62)",
-  "color-danger-inverse": "rgb(253, 243, 242)",
-  "color-warning": "rgb(230, 121, 25)",
-  "color-warning-active": "rgb(233, 137, 53)",
-  "color-warning-inverse": "rgb(253, 247, 241)",
-  "color-yellow": "rgb(245, 196, 0)",
-  "color-yellow-active": "rgb(255, 206, 10)",
-  "color-yellow-inverse": "rgb(255, 252, 240)",
-  "text-color-base": "rgb(75, 69, 84)",
-  "text-color-soft": "rgb(112, 103, 126)",
-  "text-color-softer": "rgb(177, 171, 186)",
-  "text-color-disabled": "rgb(177, 171, 186)",
-  "text-color-inverse": "rgb(250, 249, 250)",
-  "text-color-link": "rgb(23, 181, 63)",
-  "text-color-link-active": "rgb(25, 194, 67)",
-  "text-color-primary": "rgb(23, 181, 63)",
-  "text-color-primary-inverse": "rgb(241, 253, 244)",
-  "text-color-secondary": "rgb(0, 142, 230)",
-  "text-color-secondary-inverse": "rgb(240, 249, 255)",
-  "text-color-success": "rgb(23, 181, 63)",
-  "text-color-success-inverse": "rgb(241, 253, 244)",
-  "text-color-warning": "rgb(230, 121, 25)",
-  "text-color-warning-inverse": "rgb(253, 247, 241)",
-  "text-color-danger": "rgb(219, 57, 36)",
-  "text-color-danger-inverse": "rgb(253, 243, 242)",
-  "background-color-base": "rgb(255, 255, 255)",
-  "background-color-soft": "rgb(250, 249, 250)",
-  "background-color-softer": "rgb(245, 244, 246)",
-  "background-color-softer-active": "rgb(250, 249, 250)",
-  "background-color-softest": "rgb(239, 238, 241)",
-  "background-color-softest-active": "rgb(245, 244, 246)",
-  "background-color-inverse": "rgb(25, 23, 28)",
-  "background-color-inverse-soft": "rgb(40, 37, 45)",
-  "background-color-inverse-softer": "rgb(75, 69, 84)",
-  "background-color-inverse-softer-active": "rgb(100, 92, 112)",
-  "background-color-disabled": "rgb(245, 244, 246)",
-  "background-color-primary": "rgb(23, 181, 63)",
-  "background-color-primary-active": "rgb(25, 194, 67)",
-  "background-color-primary-inverse": "rgb(241, 253, 244)",
-  "background-color-secondary": "rgb(0, 142, 230)",
-  "background-color-secondary-active": "rgb(10, 161, 255)",
-  "background-color-secondary-inverse": "rgb(240, 249, 255)",
-  "background-color-success": "rgb(23, 181, 63)",
-  "background-color-success-active": "rgb(26, 203, 71)",
-  "background-color-success-inverse": "rgb(241, 253, 244)",
-  "background-color-warning": "rgb(230, 121, 25)",
-  "background-color-warning-active": "rgb(233, 137, 53)",
-  "background-color-warning-inverse": "rgb(253, 247, 241)",
-  "background-color-danger": "rgb(219, 57, 36)",
-  "background-color-danger-active": "rgb(224, 81, 62)",
-  "background-color-danger-inverse": "rgb(253, 243, 242)",
-  "border-color-base": "rgb(177, 171, 186)",
-  "border-color-soft": "rgb(203, 199, 209)",
-  "border-color-softer": "rgb(229, 227, 232)",
-  "border-color-softest": "rgb(245, 244, 246)",
-  "border-color-active": "rgb(23, 181, 63)",
-  "border-color-primary": "rgb(23, 181, 63)",
-  "border-color-success": "rgb(23, 181, 63)",
-  "border-color-warning": "rgb(230, 121, 25)",
-  "border-color-danger": "rgb(219, 57, 36)",
-  "border-size-base": "1px",
-  "border-size-large": "3px",
-  "border-size-x-large": "6px",
-  "border-radius-x-large": "5px",
-  "border-radius-large": "4px",
-  "border-radius-base": "4px",
-  "border-radius-rounded": "2em",
-  "border-radius-circle": "50%",
-  "font-size-xxxx-large": "3rem",
-  "font-size-xxx-large": "2.5rem",
-  "font-size-xx-large": "2rem",
-  "font-size-x-large": "1.5rem",
-  "font-size-large": "1.25rem",
-  "font-size-base": "1rem",
-  "font-size-body": "15px",
-  "font-size-small": "0.8rem",
-  "font-size-x-small": "0.7rem",
-  "font-size-xx-small": "0.6rem",
-  "font-space-xxxx-large": "2em",
-  "font-space-xxx-large": "1.5em",
-  "font-space-xx-large": "1.2em",
-  "font-space-x-large": "1em",
-  "font-space-large": "0.6em",
-  "font-space-base": "0.5em",
-  "font-space-small": "0.4em",
-  "font-space-x-small": "0.3em",
-  "font-space-xx-small": "0.2em",
-  "font-space-xxx-small": "0.1em",
-  "font-family-heading": "'LatoWeb', sans-serif",
-  "font-family-text": "'LatoWeb', sans-serif",
-  "font-family-serif": "'Gentium Basic', serif",
-  "font-family-code": "inconsolata, monospace",
-  "font-weight-regular": "normal",
-  "font-weight-bold": "600",
-  "line-height-large": "1.5",
-  "line-height-base": "1.3",
-  "line-height-small": "1.1",
-  "line-height-smaller": "1.0",
-  "letter-spacing-x-large": "0.1em",
-  "letter-spacing-large": "0.05em",
-  "letter-spacing-base": "0",
-  "letter-spacing-small": "-0.01em",
-  "letter-spacing-x-small": "-0.015em",
-  "opacity-soft": "0.65",
-  "opacity-disabled": "0.5",
-  "xxx-large": 128,
-  "xx-large": 64,
-  "x-large": 48,
-  "large": 32,
-  "base": 24,
-  "small": 16,
-  "x-small": 8,
-  "xx-small": 4,
-  "xxx-small": 2,
-  "space-xxx-large": "128px",
-  "space-xx-large": "64px",
-  "space-x-large": "48px",
-  "space-large": "32px",
-  "space-base": "24px",
-  "space-small": "16px",
-  "space-x-small": "8px",
-  "space-xx-small": "4px",
-  "space-xxx-small": "2px",
-  "size-height-base": "42px",
-  "size-height-large": "50px",
-  "size-height-xlarge": "60px",
-  "size-tappable-square": "44px",
-  "size-height-footer": "64px",
-  "box-shadow-x-large": "0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08)",
-  "box-shadow-large": "0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08)",
-  "box-shadow-base": "0px 12px 26px -4px rgba(0, 0, 0, .1)",
-  "box-shadow-small": "0px 8px 18px -2px rgba(0, 0, 0, .1)",
-  "box-shadow-x-small": "0px 0px 3px 0px rgba(0, 0, 0, .1)",
-  "box-shadow-active": "0 0 6px 1px rgba(20, 100, 160, 0.5)",
-  "box-shadow-inset": "inset 0 0 20px 1px rgba(0,0,0,.15)",
-  "box-shadow-small-inset": "inset 0 0 0 1px rgba(0,0,0,.05)",
-  "duration-short": "0.08s",
-  "duration-base": "0.5s",
-  "duration-long": "0.75s",
-  "duration-x-long": "1s",
-  "duration-xx-long": "2s",
-  "ease-out": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-  "ease-out-sharp": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "ease-out-bounce": "cubic-bezier(.87,-.41,.19,1.44)",
-  "ease-in": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-  "ease-in-sharp": "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
-  "z-index-modal": "9999",
-  "z-index-dropdown": "8888",
-  "z-index-page-submenu": "2500",
-  "z-index-page-header": "2000",
-  "z-index-page-sidebar": "1500",
-  "z-index-sticky": "100",
-  "xs": 480,
-  "sm": 600,
-  "md": 768,
-  "lg": 1024,
-  "xl": 1200,
-  "media-query-x-small": "(min-width: 480px)",
-  "media-query-small": "(min-width: 600px)",
-  "media-query-medium": "(min-width: 768px)",
-  "media-query-large": "(min-width: 1024px)",
-  "media-query-x-large": "(min-width: 1200px)"
-}
\ No newline at end of file
diff --git a/src/system/tokens/generated/tokens.map.scss b/src/system/tokens/generated/tokens.map.scss
deleted file mode 100644
index f8174e1e1..000000000
--- a/src/system/tokens/generated/tokens.map.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-
-$tokens-map: (
-  'color-neutral-0': (rgb(25, 23, 28)),
-  'color-neutral-10': (rgb(40, 37, 45)),
-  'color-neutral-20': (rgb(75, 69, 84)),
-  'color-neutral-30': (rgb(100, 92, 112)),
-  'color-neutral-40': (rgb(112, 103, 126)),
-  'color-neutral-50': (rgb(151, 143, 163)),
-  'color-neutral-60': (rgb(177, 171, 186)),
-  'color-neutral-70': (rgb(203, 199, 209)),
-  'color-neutral-80': (rgb(229, 227, 232)),
-  'color-neutral-85': (rgb(239, 238, 241)),
-  'color-neutral-90': (rgb(245, 244, 246)),
-  'color-neutral-95': (rgb(250, 249, 250)),
-  'color-neutral-100': (rgb(255, 255, 255)),
-  'color-primary': (rgb(23, 181, 63)),
-  'color-primary-active': (rgb(25, 194, 67)),
-  'color-primary-inverse': (rgb(241, 253, 244)),
-  'color-secondary': (rgb(0, 142, 230)),
-  'color-secondary-active': (rgb(10, 161, 255)),
-  'color-secondary-inverse': (rgb(240, 249, 255)),
-  'color-success': (rgb(23, 181, 63)),
-  'color-success-active': (rgb(26, 203, 71)),
-  'color-success-inverse': (rgb(241, 253, 244)),
-  'color-danger': (rgb(219, 57, 36)),
-  'color-danger-active': (rgb(224, 81, 62)),
-  'color-danger-inverse': (rgb(253, 243, 242)),
-  'color-warning': (rgb(230, 121, 25)),
-  'color-warning-active': (rgb(233, 137, 53)),
-  'color-warning-inverse': (rgb(253, 247, 241)),
-  'color-yellow': (rgb(245, 196, 0)),
-  'color-yellow-active': (rgb(255, 206, 10)),
-  'color-yellow-inverse': (rgb(255, 252, 240)),
-  'text-color-base': (rgb(75, 69, 84)),
-  'text-color-soft': (rgb(112, 103, 126)),
-  'text-color-softer': (rgb(177, 171, 186)),
-  'text-color-disabled': (rgb(177, 171, 186)),
-  'text-color-inverse': (rgb(250, 249, 250)),
-  'text-color-link': (rgb(23, 181, 63)),
-  'text-color-link-active': (rgb(25, 194, 67)),
-  'text-color-primary': (rgb(23, 181, 63)),
-  'text-color-primary-inverse': (rgb(241, 253, 244)),
-  'text-color-secondary': (rgb(0, 142, 230)),
-  'text-color-secondary-inverse': (rgb(240, 249, 255)),
-  'text-color-success': (rgb(23, 181, 63)),
-  'text-color-success-inverse': (rgb(241, 253, 244)),
-  'text-color-warning': (rgb(230, 121, 25)),
-  'text-color-warning-inverse': (rgb(253, 247, 241)),
-  'text-color-danger': (rgb(219, 57, 36)),
-  'text-color-danger-inverse': (rgb(253, 243, 242)),
-  'background-color-base': (rgb(255, 255, 255)),
-  'background-color-soft': (rgb(250, 249, 250)),
-  'background-color-softer': (rgb(245, 244, 246)),
-  'background-color-softer-active': (rgb(250, 249, 250)),
-  'background-color-softest': (rgb(239, 238, 241)),
-  'background-color-softest-active': (rgb(245, 244, 246)),
-  'background-color-inverse': (rgb(25, 23, 28)),
-  'background-color-inverse-soft': (rgb(40, 37, 45)),
-  'background-color-inverse-softer': (rgb(75, 69, 84)),
-  'background-color-inverse-softer-active': (rgb(100, 92, 112)),
-  'background-color-disabled': (rgb(245, 244, 246)),
-  'background-color-primary': (rgb(23, 181, 63)),
-  'background-color-primary-active': (rgb(25, 194, 67)),
-  'background-color-primary-inverse': (rgb(241, 253, 244)),
-  'background-color-secondary': (rgb(0, 142, 230)),
-  'background-color-secondary-active': (rgb(10, 161, 255)),
-  'background-color-secondary-inverse': (rgb(240, 249, 255)),
-  'background-color-success': (rgb(23, 181, 63)),
-  'background-color-success-active': (rgb(26, 203, 71)),
-  'background-color-success-inverse': (rgb(241, 253, 244)),
-  'background-color-warning': (rgb(230, 121, 25)),
-  'background-color-warning-active': (rgb(233, 137, 53)),
-  'background-color-warning-inverse': (rgb(253, 247, 241)),
-  'background-color-danger': (rgb(219, 57, 36)),
-  'background-color-danger-active': (rgb(224, 81, 62)),
-  'background-color-danger-inverse': (rgb(253, 243, 242)),
-  'border-color-base': (rgb(177, 171, 186)),
-  'border-color-soft': (rgb(203, 199, 209)),
-  'border-color-softer': (rgb(229, 227, 232)),
-  'border-color-softest': (rgb(245, 244, 246)),
-  'border-color-active': (rgb(23, 181, 63)),
-  'border-color-primary': (rgb(23, 181, 63)),
-  'border-color-success': (rgb(23, 181, 63)),
-  'border-color-warning': (rgb(230, 121, 25)),
-  'border-color-danger': (rgb(219, 57, 36)),
-  'border-size-base': (1px),
-  'border-size-large': (3px),
-  'border-size-x-large': (6px),
-  'border-radius-x-large': (5px),
-  'border-radius-large': (4px),
-  'border-radius-base': (4px),
-  'border-radius-rounded': (2em),
-  'border-radius-circle': (50%),
-  'font-size-xxxx-large': (3rem),
-  'font-size-xxx-large': (2.5rem),
-  'font-size-xx-large': (2rem),
-  'font-size-x-large': (1.5rem),
-  'font-size-large': (1.25rem),
-  'font-size-base': (1rem),
-  'font-size-body': (15px),
-  'font-size-small': (0.8rem),
-  'font-size-x-small': (0.7rem),
-  'font-size-xx-small': (0.6rem),
-  'font-space-xxxx-large': (2em),
-  'font-space-xxx-large': (1.5em),
-  'font-space-xx-large': (1.2em),
-  'font-space-x-large': (1em),
-  'font-space-large': (0.6em),
-  'font-space-base': (0.5em),
-  'font-space-small': (0.4em),
-  'font-space-x-small': (0.3em),
-  'font-space-xx-small': (0.2em),
-  'font-space-xxx-small': (0.1em),
-  'font-family-heading': ('LatoWeb', sans-serif),
-  'font-family-text': ('LatoWeb', sans-serif),
-  'font-family-serif': ('Gentium Basic', serif),
-  'font-family-code': (inconsolata, monospace),
-  'font-weight-regular': (normal),
-  'font-weight-bold': (600),
-  'line-height-large': (1.5),
-  'line-height-base': (1.3),
-  'line-height-small': (1.1),
-  'line-height-smaller': (1.0),
-  'letter-spacing-x-large': (0.1em),
-  'letter-spacing-large': (0.05em),
-  'letter-spacing-base': (0),
-  'letter-spacing-small': (-0.01em),
-  'letter-spacing-x-small': (-0.015em),
-  'opacity-soft': (0.65),
-  'opacity-disabled': (0.5),
-  'xxx-large': (128),
-  'xx-large': (64),
-  'x-large': (48),
-  'large': (32),
-  'base': (24),
-  'small': (16),
-  'x-small': (8),
-  'xx-small': (4),
-  'xxx-small': (2),
-  'space-xxx-large': (128px),
-  'space-xx-large': (64px),
-  'space-x-large': (48px),
-  'space-large': (32px),
-  'space-base': (24px),
-  'space-small': (16px),
-  'space-x-small': (8px),
-  'space-xx-small': (4px),
-  'space-xxx-small': (2px),
-  'size-height-base': (42px),
-  'size-height-large': (50px),
-  'size-height-xlarge': (60px),
-  'size-tappable-square': (44px),
-  'size-height-footer': (64px),
-  'box-shadow-x-large': (0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08)),
-  'box-shadow-large': (0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08)),
-  'box-shadow-base': (0px 12px 26px -4px rgba(0, 0, 0, .1)),
-  'box-shadow-small': (0px 8px 18px -2px rgba(0, 0, 0, .1)),
-  'box-shadow-x-small': (0px 0px 3px 0px rgba(0, 0, 0, .1)),
-  'box-shadow-active': (0 0 6px 1px rgba(20, 100, 160, 0.5)),
-  'box-shadow-inset': (inset 0 0 20px 1px rgba(0,0,0,.15)),
-  'box-shadow-small-inset': (inset 0 0 0 1px rgba(0,0,0,.05)),
-  'duration-short': (0.08s),
-  'duration-base': (0.5s),
-  'duration-long': (0.75s),
-  'duration-x-long': (1s),
-  'duration-xx-long': (2s),
-  'ease-out': (cubic-bezier(0.25, 0.46, 0.45, 0.94)),
-  'ease-out-sharp': (cubic-bezier(0.165, 0.84, 0.44, 1)),
-  'ease-out-bounce': (cubic-bezier(.87,-.41,.19,1.44)),
-  'ease-in': (cubic-bezier(0.55, 0.085, 0.68, 0.53)),
-  'ease-in-sharp': (cubic-bezier(0.895, 0.03, 0.685, 0.22)),
-  'z-index-modal': (9999),
-  'z-index-dropdown': (8888),
-  'z-index-page-submenu': (2500),
-  'z-index-page-header': (2000),
-  'z-index-page-sidebar': (1500),
-  'z-index-sticky': (100),
-  'xs': (480),
-  'sm': (600),
-  'md': (768),
-  'lg': (1024),
-  'xl': (1200),
-  'media-query-x-small': ((min-width: 480px)),
-  'media-query-small': ((min-width: 600px)),
-  'media-query-medium': ((min-width: 768px)),
-  'media-query-large': ((min-width: 1024px)),
-  'media-query-x-large': ((min-width: 1200px)),
-);
diff --git a/src/system/tokens/generated/tokens.raw.json b/src/system/tokens/generated/tokens.raw.json
deleted file mode 100644
index fd7c2fd33..000000000
--- a/src/system/tokens/generated/tokens.raw.json
+++ /dev/null
@@ -1,1370 +0,0 @@
-{
-  "aliases": {
-    "green": {
-      "value": "135, 77%"
-    },
-    "neutral": {
-      "value": "264, 10%"
-    },
-    "orange": {
-      "value": "28, 80%"
-    },
-    "red": {
-      "value": "7, 72%"
-    },
-    "yellow": {
-      "value": "48, 100%"
-    },
-    "pink": {
-      "value": "330, 86%"
-    },
-    "blue": {
-      "value": "203, 100%"
-    },
-    "teal": {
-      "value": "174, 80%"
-    },
-    "purple": {
-      "value": "264, 88%"
-    },
-    "x-large": {
-      "value": 48
-    },
-    "xxx-large": {
-      "value": 128
-    },
-    "small": {
-      "value": 16
-    },
-    "xx-large": {
-      "value": 64
-    },
-    "base": {
-      "value": 24
-    },
-    "xxx-small": {
-      "value": 2
-    },
-    "x-small": {
-      "value": 8
-    },
-    "xx-small": {
-      "value": 4
-    },
-    "large": {
-      "value": 32
-    },
-    "xs": {
-      "value": 480
-    },
-    "sm": {
-      "value": 600
-    },
-    "md": {
-      "value": 768
-    },
-    "lg": {
-      "value": 1024
-    },
-    "xl": {
-      "value": 1200
-    }
-  },
-  "props": {
-    "color-neutral-0": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-0",
-      "value": "rgb(25, 23, 28)",
-      "originalValue": "hsla({!neutral}, 10%, 1)"
-    },
-    "color-neutral-10": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-10",
-      "value": "rgb(40, 37, 45)",
-      "originalValue": "hsla({!neutral}, 16%, 1)"
-    },
-    "color-neutral-20": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-20",
-      "value": "rgb(75, 69, 84)",
-      "originalValue": "hsla({!neutral}, 30%, 1)"
-    },
-    "color-neutral-30": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-30",
-      "value": "rgb(100, 92, 112)",
-      "originalValue": "hsla({!neutral}, 40%, 1)"
-    },
-    "color-neutral-40": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-40",
-      "value": "rgb(112, 103, 126)",
-      "originalValue": "hsla({!neutral}, 45%, 1)"
-    },
-    "color-neutral-50": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-50",
-      "value": "rgb(151, 143, 163)",
-      "originalValue": "hsla({!neutral}, 60%, 1)"
-    },
-    "color-neutral-60": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-60",
-      "value": "rgb(177, 171, 186)",
-      "originalValue": "hsla({!neutral}, 70%, 1)"
-    },
-    "color-neutral-70": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-70",
-      "value": "rgb(203, 199, 209)",
-      "originalValue": "hsla({!neutral}, 80%, 1)"
-    },
-    "color-neutral-80": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-80",
-      "value": "rgb(229, 227, 232)",
-      "originalValue": "hsla({!neutral}, 90%, 1)"
-    },
-    "color-neutral-85": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-85",
-      "value": "rgb(239, 238, 241)",
-      "originalValue": "hsla({!neutral}, 94%, 1)"
-    },
-    "color-neutral-90": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-90",
-      "value": "rgb(245, 244, 246)",
-      "originalValue": "hsla({!neutral}, 96%, 1)"
-    },
-    "color-neutral-95": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-95",
-      "value": "rgb(250, 249, 250)",
-      "originalValue": "hsla({!neutral}, 98%, 1)"
-    },
-    "color-neutral-100": {
-      "type": "color",
-      "category": "color",
-      "name": "color-neutral-100",
-      "value": "rgb(255, 255, 255)",
-      "originalValue": "hsla({!neutral}, 100%, 1)"
-    },
-    "color-primary": {
-      "type": "color",
-      "category": "color",
-      "name": "color-primary",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "color-primary-active": {
-      "type": "color",
-      "category": "color",
-      "name": "color-primary-active",
-      "value": "rgb(25, 194, 67)",
-      "originalValue": "hsla({!green}, 43%, 1)"
-    },
-    "color-primary-inverse": {
-      "type": "color",
-      "category": "color",
-      "name": "color-primary-inverse",
-      "value": "rgb(241, 253, 244)",
-      "originalValue": "hsla({!green}, 97%, 1)"
-    },
-    "color-secondary": {
-      "type": "color",
-      "category": "color",
-      "name": "color-secondary",
-      "value": "rgb(0, 142, 230)",
-      "originalValue": "hsla({!blue}, 45%, 1)"
-    },
-    "color-secondary-active": {
-      "type": "color",
-      "category": "color",
-      "name": "color-secondary-active",
-      "value": "rgb(10, 161, 255)",
-      "originalValue": "hsla({!blue}, 52%, 1)"
-    },
-    "color-secondary-inverse": {
-      "type": "color",
-      "category": "color",
-      "name": "color-secondary-inverse",
-      "value": "rgb(240, 249, 255)",
-      "originalValue": "hsla({!blue}, 97%, 1)"
-    },
-    "color-success": {
-      "type": "color",
-      "category": "color",
-      "name": "color-success",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "color-success-active": {
-      "type": "color",
-      "category": "color",
-      "name": "color-success-active",
-      "value": "rgb(26, 203, 71)",
-      "originalValue": "hsla({!green}, 45%, 1)"
-    },
-    "color-success-inverse": {
-      "type": "color",
-      "category": "color",
-      "name": "color-success-inverse",
-      "value": "rgb(241, 253, 244)",
-      "originalValue": "hsla({!green}, 97%, 1)"
-    },
-    "color-danger": {
-      "type": "color",
-      "category": "color",
-      "name": "color-danger",
-      "value": "rgb(219, 57, 36)",
-      "originalValue": "hsla({!red}, 50%, 1)"
-    },
-    "color-danger-active": {
-      "type": "color",
-      "category": "color",
-      "name": "color-danger-active",
-      "value": "rgb(224, 81, 62)",
-      "originalValue": "hsla({!red}, 56%, 1)"
-    },
-    "color-danger-inverse": {
-      "type": "color",
-      "category": "color",
-      "name": "color-danger-inverse",
-      "value": "rgb(253, 243, 242)",
-      "originalValue": "hsla({!red}, 97%, 1)"
-    },
-    "color-warning": {
-      "type": "color",
-      "category": "color",
-      "name": "color-warning",
-      "value": "rgb(230, 121, 25)",
-      "originalValue": "hsla({!orange}, 50%, 1)"
-    },
-    "color-warning-active": {
-      "type": "color",
-      "category": "color",
-      "name": "color-warning-active",
-      "value": "rgb(233, 137, 53)",
-      "originalValue": "hsla({!orange}, 56%, 1)"
-    },
-    "color-warning-inverse": {
-      "type": "color",
-      "category": "color",
-      "name": "color-warning-inverse",
-      "value": "rgb(253, 247, 241)",
-      "originalValue": "hsla({!orange}, 97%, 1)"
-    },
-    "color-yellow": {
-      "type": "color",
-      "category": "color",
-      "name": "color-yellow",
-      "value": "rgb(245, 196, 0)",
-      "originalValue": "hsla({!yellow}, 48%, 1)"
-    },
-    "color-yellow-active": {
-      "type": "color",
-      "category": "color",
-      "name": "color-yellow-active",
-      "value": "rgb(255, 206, 10)",
-      "originalValue": "hsla({!yellow}, 52%, 1)"
-    },
-    "color-yellow-inverse": {
-      "type": "color",
-      "category": "color",
-      "name": "color-yellow-inverse",
-      "value": "rgb(255, 252, 240)",
-      "originalValue": "hsla({!yellow}, 97%, 1)"
-    },
-    "text-color-base": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-base",
-      "value": "rgb(75, 69, 84)",
-      "originalValue": "hsla({!neutral}, 30%, 1)"
-    },
-    "text-color-soft": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-soft",
-      "value": "rgb(112, 103, 126)",
-      "originalValue": "hsla({!neutral}, 45%, 1)"
-    },
-    "text-color-softer": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-softer",
-      "value": "rgb(177, 171, 186)",
-      "originalValue": "hsla({!neutral}, 70%, 1)"
-    },
-    "text-color-disabled": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-disabled",
-      "value": "rgb(177, 171, 186)",
-      "originalValue": "hsla({!neutral}, 70%, 1)"
-    },
-    "text-color-inverse": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-inverse",
-      "value": "rgb(250, 249, 250)",
-      "originalValue": "hsla({!neutral}, 98%, 1)"
-    },
-    "text-color-link": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-link",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "text-color-link-active": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-link-active",
-      "value": "rgb(25, 194, 67)",
-      "originalValue": "hsla({!green}, 43%, 1)"
-    },
-    "text-color-primary": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-primary",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "text-color-primary-inverse": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-primary-inverse",
-      "value": "rgb(241, 253, 244)",
-      "originalValue": "hsla({!green}, 97%, 1)"
-    },
-    "text-color-secondary": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-secondary",
-      "value": "rgb(0, 142, 230)",
-      "originalValue": "hsla({!blue}, 45%, 1)"
-    },
-    "text-color-secondary-inverse": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-secondary-inverse",
-      "value": "rgb(240, 249, 255)",
-      "originalValue": "hsla({!blue}, 97%, 1)"
-    },
-    "text-color-success": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-success",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "text-color-success-inverse": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-success-inverse",
-      "value": "rgb(241, 253, 244)",
-      "originalValue": "hsla({!green}, 97%, 1)"
-    },
-    "text-color-warning": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-warning",
-      "value": "rgb(230, 121, 25)",
-      "originalValue": "hsla({!orange}, 50%, 1)"
-    },
-    "text-color-warning-inverse": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-warning-inverse",
-      "value": "rgb(253, 247, 241)",
-      "originalValue": "hsla({!orange}, 97%, 1)"
-    },
-    "text-color-danger": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-danger",
-      "value": "rgb(219, 57, 36)",
-      "originalValue": "hsla({!red}, 50%, 1)"
-    },
-    "text-color-danger-inverse": {
-      "type": "color",
-      "category": "text-color",
-      "name": "text-color-danger-inverse",
-      "value": "rgb(253, 243, 242)",
-      "originalValue": "hsla({!red}, 97%, 1)"
-    },
-    "background-color-base": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-base",
-      "value": "rgb(255, 255, 255)",
-      "originalValue": "hsla({!neutral}, 100%, 1)"
-    },
-    "background-color-soft": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-soft",
-      "value": "rgb(250, 249, 250)",
-      "originalValue": "hsla({!neutral}, 98%, 1)"
-    },
-    "background-color-softer": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-softer",
-      "value": "rgb(245, 244, 246)",
-      "originalValue": "hsla({!neutral}, 96%, 1)"
-    },
-    "background-color-softer-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-softer-active",
-      "value": "rgb(250, 249, 250)",
-      "originalValue": "hsla({!neutral}, 98%, 1)"
-    },
-    "background-color-softest": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-softest",
-      "value": "rgb(239, 238, 241)",
-      "originalValue": "hsla({!neutral}, 94%, 1)"
-    },
-    "background-color-softest-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-softest-active",
-      "value": "rgb(245, 244, 246)",
-      "originalValue": "hsla({!neutral}, 96%, 1)"
-    },
-    "background-color-inverse": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-inverse",
-      "value": "rgb(25, 23, 28)",
-      "originalValue": "hsla({!neutral}, 10%, 1)"
-    },
-    "background-color-inverse-soft": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-inverse-soft",
-      "value": "rgb(40, 37, 45)",
-      "originalValue": "hsla({!neutral}, 16%, 1)"
-    },
-    "background-color-inverse-softer": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-inverse-softer",
-      "value": "rgb(75, 69, 84)",
-      "originalValue": "hsla({!neutral}, 30%, 1)"
-    },
-    "background-color-inverse-softer-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-inverse-softer-active",
-      "value": "rgb(100, 92, 112)",
-      "originalValue": "hsla({!neutral}, 40%, 1)"
-    },
-    "background-color-disabled": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-disabled",
-      "value": "rgb(245, 244, 246)",
-      "originalValue": "hsla({!neutral}, 96%, 1)"
-    },
-    "background-color-primary": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-primary",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "background-color-primary-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-primary-active",
-      "value": "rgb(25, 194, 67)",
-      "originalValue": "hsla({!green}, 43%, 1)"
-    },
-    "background-color-primary-inverse": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-primary-inverse",
-      "value": "rgb(241, 253, 244)",
-      "originalValue": "hsla({!green}, 97%, 1)"
-    },
-    "background-color-secondary": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-secondary",
-      "value": "rgb(0, 142, 230)",
-      "originalValue": "hsla({!blue}, 45%, 1)"
-    },
-    "background-color-secondary-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-secondary-active",
-      "value": "rgb(10, 161, 255)",
-      "originalValue": "hsla({!blue}, 52%, 1)"
-    },
-    "background-color-secondary-inverse": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-secondary-inverse",
-      "value": "rgb(240, 249, 255)",
-      "originalValue": "hsla({!blue}, 97%, 1)"
-    },
-    "background-color-success": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-success",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "background-color-success-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-success-active",
-      "value": "rgb(26, 203, 71)",
-      "originalValue": "hsla({!green}, 45%, 1)"
-    },
-    "background-color-success-inverse": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-success-inverse",
-      "value": "rgb(241, 253, 244)",
-      "originalValue": "hsla({!green}, 97%, 1)"
-    },
-    "background-color-warning": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-warning",
-      "value": "rgb(230, 121, 25)",
-      "originalValue": "hsla({!orange}, 50%, 1)"
-    },
-    "background-color-warning-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-warning-active",
-      "value": "rgb(233, 137, 53)",
-      "originalValue": "hsla({!orange}, 56%, 1)"
-    },
-    "background-color-warning-inverse": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-warning-inverse",
-      "value": "rgb(253, 247, 241)",
-      "originalValue": "hsla({!orange}, 97%, 1)"
-    },
-    "background-color-danger": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-danger",
-      "value": "rgb(219, 57, 36)",
-      "originalValue": "hsla({!red}, 50%, 1)"
-    },
-    "background-color-danger-active": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-danger-active",
-      "value": "rgb(224, 81, 62)",
-      "originalValue": "hsla({!red}, 56%, 1)"
-    },
-    "background-color-danger-inverse": {
-      "type": "color",
-      "category": "background-color",
-      "name": "background-color-danger-inverse",
-      "value": "rgb(253, 243, 242)",
-      "originalValue": "hsla({!red}, 97%, 1)"
-    },
-    "border-color-base": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-base",
-      "value": "rgb(177, 171, 186)",
-      "originalValue": "hsla({!neutral}, 70%, 1)"
-    },
-    "border-color-soft": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-soft",
-      "value": "rgb(203, 199, 209)",
-      "originalValue": "hsla({!neutral}, 80%, 1)"
-    },
-    "border-color-softer": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-softer",
-      "value": "rgb(229, 227, 232)",
-      "originalValue": "hsla({!neutral}, 90%, 1)"
-    },
-    "border-color-softest": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-softest",
-      "value": "rgb(245, 244, 246)",
-      "originalValue": "hsla({!neutral}, 96%, 1)"
-    },
-    "border-color-active": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-active",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "border-color-primary": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-primary",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "border-color-success": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-success",
-      "value": "rgb(23, 181, 63)",
-      "originalValue": "hsla({!green}, 40%, 1)"
-    },
-    "border-color-warning": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-warning",
-      "value": "rgb(230, 121, 25)",
-      "originalValue": "hsla({!orange}, 50%, 1)"
-    },
-    "border-color-danger": {
-      "type": "color",
-      "category": "border-color",
-      "name": "border-color-danger",
-      "value": "rgb(219, 57, 36)",
-      "originalValue": "hsla({!red}, 50%, 1)"
-    },
-    "border-size-base": {
-      "type": "number",
-      "category": "border-size",
-      "name": "border-size-base",
-      "value": "1px",
-      "originalValue": "1px"
-    },
-    "border-size-large": {
-      "type": "number",
-      "category": "border-size",
-      "name": "border-size-large",
-      "value": "3px",
-      "originalValue": "3px"
-    },
-    "border-size-x-large": {
-      "type": "number",
-      "category": "border-size",
-      "name": "border-size-x-large",
-      "value": "6px",
-      "originalValue": "6px"
-    },
-    "border-radius-x-large": {
-      "type": "number",
-      "category": "border-radius",
-      "name": "border-radius-x-large",
-      "value": "5px",
-      "originalValue": "5px"
-    },
-    "border-radius-large": {
-      "type": "number",
-      "category": "border-radius",
-      "name": "border-radius-large",
-      "value": "4px",
-      "originalValue": "4px"
-    },
-    "border-radius-base": {
-      "type": "number",
-      "category": "border-radius",
-      "name": "border-radius-base",
-      "value": "4px",
-      "originalValue": "4px"
-    },
-    "border-radius-rounded": {
-      "type": "number",
-      "category": "border-radius",
-      "name": "border-radius-rounded",
-      "value": "2em",
-      "originalValue": "2em"
-    },
-    "border-radius-circle": {
-      "type": "number",
-      "category": "border-radius",
-      "name": "border-radius-circle",
-      "value": "50%",
-      "originalValue": "50%"
-    },
-    "font-size-xxxx-large": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-xxxx-large",
-      "value": "3rem",
-      "originalValue": "3rem"
-    },
-    "font-size-xxx-large": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-xxx-large",
-      "value": "2.5rem",
-      "originalValue": "2.5rem"
-    },
-    "font-size-xx-large": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-xx-large",
-      "value": "2rem",
-      "originalValue": "2rem"
-    },
-    "font-size-x-large": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-x-large",
-      "value": "1.5rem",
-      "originalValue": "1.5rem"
-    },
-    "font-size-large": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-large",
-      "value": "1.25rem",
-      "originalValue": "1.25rem"
-    },
-    "font-size-base": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-base",
-      "value": "1rem",
-      "originalValue": "1rem"
-    },
-    "font-size-body": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-body",
-      "value": "15px",
-      "originalValue": "15px"
-    },
-    "font-size-small": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-small",
-      "value": "0.8rem",
-      "originalValue": "0.8rem"
-    },
-    "font-size-x-small": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-x-small",
-      "value": "0.7rem",
-      "originalValue": "0.7rem"
-    },
-    "font-size-xx-small": {
-      "type": "number",
-      "category": "font-size",
-      "name": "font-size-xx-small",
-      "value": "0.6rem",
-      "originalValue": "0.6rem"
-    },
-    "font-space-xxxx-large": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-xxxx-large",
-      "value": "2em",
-      "originalValue": "2em"
-    },
-    "font-space-xxx-large": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-xxx-large",
-      "value": "1.5em",
-      "originalValue": "1.5em"
-    },
-    "font-space-xx-large": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-xx-large",
-      "value": "1.2em",
-      "originalValue": "1.2em"
-    },
-    "font-space-x-large": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-x-large",
-      "value": "1em",
-      "originalValue": "1em"
-    },
-    "font-space-large": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-large",
-      "value": "0.6em",
-      "originalValue": "0.6em"
-    },
-    "font-space-base": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-base",
-      "value": "0.5em",
-      "originalValue": "0.5em"
-    },
-    "font-space-small": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-small",
-      "value": "0.4em",
-      "originalValue": "0.4em"
-    },
-    "font-space-x-small": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-x-small",
-      "value": "0.3em",
-      "originalValue": "0.3em"
-    },
-    "font-space-xx-small": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-xx-small",
-      "value": "0.2em",
-      "originalValue": "0.2em"
-    },
-    "font-space-xxx-small": {
-      "type": "number",
-      "category": "font-spacing",
-      "name": "font-space-xxx-small",
-      "value": "0.1em",
-      "originalValue": "0.1em"
-    },
-    "font-family-heading": {
-      "type": "...",
-      "category": "font-family",
-      "name": "font-family-heading",
-      "value": "'LatoWeb', sans-serif",
-      "originalValue": "'LatoWeb', sans-serif"
-    },
-    "font-family-text": {
-      "type": "...",
-      "category": "font-family",
-      "name": "font-family-text",
-      "value": "'LatoWeb', sans-serif",
-      "originalValue": "'LatoWeb', sans-serif"
-    },
-    "font-family-serif": {
-      "type": "...",
-      "category": "font-family",
-      "name": "font-family-serif",
-      "value": "'Gentium Basic', serif",
-      "originalValue": "'Gentium Basic', serif"
-    },
-    "font-family-code": {
-      "type": "...",
-      "category": "font-family",
-      "name": "font-family-code",
-      "value": "inconsolata, monospace",
-      "originalValue": "inconsolata, monospace"
-    },
-    "font-weight-regular": {
-      "type": "...",
-      "category": "font-weight",
-      "name": "font-weight-regular",
-      "value": "normal",
-      "originalValue": "normal"
-    },
-    "font-weight-bold": {
-      "type": "...",
-      "category": "font-weight",
-      "name": "font-weight-bold",
-      "value": "600",
-      "originalValue": "600"
-    },
-    "line-height-large": {
-      "type": "number",
-      "category": "line-height",
-      "name": "line-height-large",
-      "value": "1.5",
-      "originalValue": "1.5"
-    },
-    "line-height-base": {
-      "type": "number",
-      "category": "line-height",
-      "name": "line-height-base",
-      "value": "1.3",
-      "originalValue": "1.3"
-    },
-    "line-height-small": {
-      "type": "number",
-      "category": "line-height",
-      "name": "line-height-small",
-      "value": "1.1",
-      "originalValue": "1.1"
-    },
-    "line-height-smaller": {
-      "type": "number",
-      "category": "line-height",
-      "name": "line-height-smaller",
-      "value": "1.0",
-      "originalValue": "1.0"
-    },
-    "letter-spacing-x-large": {
-      "type": "number",
-      "category": "letter-spacing",
-      "name": "letter-spacing-x-large",
-      "value": "0.1em",
-      "originalValue": "0.1em"
-    },
-    "letter-spacing-large": {
-      "type": "number",
-      "category": "letter-spacing",
-      "name": "letter-spacing-large",
-      "value": "0.05em",
-      "originalValue": "0.05em"
-    },
-    "letter-spacing-base": {
-      "type": "number",
-      "category": "letter-spacing",
-      "name": "letter-spacing-base",
-      "value": "0",
-      "originalValue": "0"
-    },
-    "letter-spacing-small": {
-      "type": "number",
-      "category": "letter-spacing",
-      "name": "letter-spacing-small",
-      "value": "-0.01em",
-      "originalValue": "-0.01em"
-    },
-    "letter-spacing-x-small": {
-      "type": "number",
-      "category": "letter-spacing",
-      "name": "letter-spacing-x-small",
-      "value": "-0.015em",
-      "originalValue": "-0.015em"
-    },
-    "opacity-soft": {
-      "type": "number",
-      "category": "opacity",
-      "name": "opacity-soft",
-      "value": "0.65",
-      "originalValue": "0.65"
-    },
-    "opacity-disabled": {
-      "type": "number",
-      "category": "opacity",
-      "name": "opacity-disabled",
-      "value": "0.5",
-      "originalValue": "0.5"
-    },
-    "xxx-large": {
-      "type": "number",
-      "category": "space-size",
-      "name": "xxx-large",
-      "value": 128,
-      "originalValue": 128
-    },
-    "xx-large": {
-      "type": "number",
-      "category": "space-size",
-      "name": "xx-large",
-      "value": 64,
-      "originalValue": 64
-    },
-    "x-large": {
-      "type": "number",
-      "category": "space-size",
-      "name": "x-large",
-      "value": 48,
-      "originalValue": 48
-    },
-    "large": {
-      "type": "number",
-      "category": "space-size",
-      "name": "large",
-      "value": 32,
-      "originalValue": 32
-    },
-    "base": {
-      "type": "number",
-      "category": "space-size",
-      "name": "base",
-      "value": 24,
-      "originalValue": 24
-    },
-    "small": {
-      "type": "number",
-      "category": "space-size",
-      "name": "small",
-      "value": 16,
-      "originalValue": 16
-    },
-    "x-small": {
-      "type": "number",
-      "category": "space-size",
-      "name": "x-small",
-      "value": 8,
-      "originalValue": 8
-    },
-    "xx-small": {
-      "type": "number",
-      "category": "space-size",
-      "name": "xx-small",
-      "value": 4,
-      "originalValue": 4
-    },
-    "xxx-small": {
-      "type": "number",
-      "category": "space-size",
-      "name": "xxx-small",
-      "value": 2,
-      "originalValue": 2
-    },
-    "space-xxx-large": {
-      "type": "number",
-      "category": "space",
-      "name": "space-xxx-large",
-      "value": "128px",
-      "originalValue": "{!xxx-large}px"
-    },
-    "space-xx-large": {
-      "type": "number",
-      "category": "space",
-      "name": "space-xx-large",
-      "value": "64px",
-      "originalValue": "{!xx-large}px"
-    },
-    "space-x-large": {
-      "type": "number",
-      "category": "space",
-      "name": "space-x-large",
-      "value": "48px",
-      "originalValue": "{!x-large}px"
-    },
-    "space-large": {
-      "type": "number",
-      "category": "space",
-      "name": "space-large",
-      "value": "32px",
-      "originalValue": "{!large}px"
-    },
-    "space-base": {
-      "type": "number",
-      "category": "space",
-      "name": "space-base",
-      "value": "24px",
-      "originalValue": "{!base}px"
-    },
-    "space-small": {
-      "type": "number",
-      "category": "space",
-      "name": "space-small",
-      "value": "16px",
-      "originalValue": "{!small}px"
-    },
-    "space-x-small": {
-      "type": "number",
-      "category": "space",
-      "name": "space-x-small",
-      "value": "8px",
-      "originalValue": "{!x-small}px"
-    },
-    "space-xx-small": {
-      "type": "number",
-      "category": "space",
-      "name": "space-xx-small",
-      "value": "4px",
-      "originalValue": "{!xx-small}px"
-    },
-    "space-xxx-small": {
-      "type": "number",
-      "category": "space",
-      "name": "space-xxx-small",
-      "value": "2px",
-      "originalValue": "{!xxx-small}px"
-    },
-    "size-height-base": {
-      "type": "number",
-      "category": "size",
-      "name": "size-height-base",
-      "value": "42px",
-      "originalValue": "42px"
-    },
-    "size-height-large": {
-      "type": "number",
-      "category": "size",
-      "name": "size-height-large",
-      "value": "50px",
-      "originalValue": "50px"
-    },
-    "size-height-xlarge": {
-      "type": "number",
-      "category": "size",
-      "name": "size-height-xlarge",
-      "value": "60px",
-      "originalValue": "60px"
-    },
-    "size-tappable-square": {
-      "type": "number",
-      "category": "size",
-      "name": "size-tappable-square",
-      "value": "44px",
-      "originalValue": "44px"
-    },
-    "size-height-footer": {
-      "type": "number",
-      "category": "size",
-      "name": "size-height-footer",
-      "value": "64px",
-      "originalValue": "64px"
-    },
-    "box-shadow-x-large": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-x-large",
-      "value": "0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08)",
-      "originalValue": "0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08)"
-    },
-    "box-shadow-large": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-large",
-      "value": "0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08)",
-      "originalValue": "0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08)"
-    },
-    "box-shadow-base": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-base",
-      "value": "0px 12px 26px -4px rgba(0, 0, 0, .1)",
-      "originalValue": "0px 12px 26px -4px rgba(0, 0, 0, .1)"
-    },
-    "box-shadow-small": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-small",
-      "value": "0px 8px 18px -2px rgba(0, 0, 0, .1)",
-      "originalValue": "0px 8px 18px -2px rgba(0, 0, 0, .1)"
-    },
-    "box-shadow-x-small": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-x-small",
-      "value": "0px 0px 3px 0px rgba(0, 0, 0, .1)",
-      "originalValue": "0px 0px 3px 0px rgba(0, 0, 0, .1)"
-    },
-    "box-shadow-active": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-active",
-      "value": "0 0 6px 1px rgba(20, 100, 160, 0.5)",
-      "originalValue": "0 0 6px 1px rgba(20, 100, 160, 0.5)"
-    },
-    "box-shadow-inset": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-inset",
-      "value": "inset 0 0 20px 1px rgba(0,0,0,.15)",
-      "originalValue": "inset 0 0 20px 1px rgba(0,0,0,.15)"
-    },
-    "box-shadow-small-inset": {
-      "type": "...",
-      "category": "box-shadow",
-      "name": "box-shadow-small-inset",
-      "value": "inset 0 0 0 1px rgba(0,0,0,.05)",
-      "originalValue": "inset 0 0 0 1px rgba(0,0,0,.05)"
-    },
-    "duration-short": {
-      "type": "number",
-      "category": "time",
-      "name": "duration-short",
-      "value": "0.08s",
-      "originalValue": "0.08s"
-    },
-    "duration-base": {
-      "type": "number",
-      "category": "time",
-      "name": "duration-base",
-      "value": "0.5s",
-      "originalValue": "0.5s"
-    },
-    "duration-long": {
-      "type": "number",
-      "category": "time",
-      "name": "duration-long",
-      "value": "0.75s",
-      "originalValue": "0.75s"
-    },
-    "duration-x-long": {
-      "type": "number",
-      "category": "time",
-      "name": "duration-x-long",
-      "value": "1s",
-      "originalValue": "1s"
-    },
-    "duration-xx-long": {
-      "type": "number",
-      "category": "time",
-      "name": "duration-xx-long",
-      "value": "2s",
-      "originalValue": "2s"
-    },
-    "ease-out": {
-      "type": "number",
-      "category": "ease",
-      "name": "ease-out",
-      "value": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-      "originalValue": "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
-    },
-    "ease-out-sharp": {
-      "type": "number",
-      "category": "ease",
-      "name": "ease-out-sharp",
-      "value": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-      "originalValue": "cubic-bezier(0.165, 0.84, 0.44, 1)"
-    },
-    "ease-out-bounce": {
-      "type": "number",
-      "category": "ease",
-      "name": "ease-out-bounce",
-      "value": "cubic-bezier(.87,-.41,.19,1.44)",
-      "originalValue": "cubic-bezier(.87,-.41,.19,1.44)"
-    },
-    "ease-in": {
-      "type": "number",
-      "category": "ease",
-      "name": "ease-in",
-      "value": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-      "originalValue": "cubic-bezier(0.55, 0.085, 0.68, 0.53)"
-    },
-    "ease-in-sharp": {
-      "type": "number",
-      "category": "ease",
-      "name": "ease-in-sharp",
-      "value": "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
-      "originalValue": "cubic-bezier(0.895, 0.03, 0.685, 0.22)"
-    },
-    "z-index-modal": {
-      "type": "number",
-      "category": "z-index",
-      "name": "z-index-modal",
-      "value": "9999",
-      "originalValue": "9999"
-    },
-    "z-index-dropdown": {
-      "type": "number",
-      "category": "z-index",
-      "name": "z-index-dropdown",
-      "value": "8888",
-      "originalValue": "8888"
-    },
-    "z-index-page-submenu": {
-      "type": "number",
-      "category": "z-index",
-      "name": "z-index-page-submenu",
-      "value": "2500",
-      "originalValue": "2500"
-    },
-    "z-index-page-header": {
-      "type": "number",
-      "category": "z-index",
-      "name": "z-index-page-header",
-      "value": "2000",
-      "originalValue": "2000"
-    },
-    "z-index-page-sidebar": {
-      "type": "number",
-      "category": "z-index",
-      "name": "z-index-page-sidebar",
-      "value": "1500",
-      "originalValue": "1500"
-    },
-    "z-index-sticky": {
-      "type": "number",
-      "category": "z-index",
-      "name": "z-index-sticky",
-      "value": "100",
-      "originalValue": "100"
-    },
-    "xs": {
-      "type": "...",
-      "category": "media-size",
-      "name": "xs",
-      "value": 480,
-      "originalValue": 480
-    },
-    "sm": {
-      "type": "...",
-      "category": "media-size",
-      "name": "sm",
-      "value": 600,
-      "originalValue": 600
-    },
-    "md": {
-      "type": "...",
-      "category": "media-size",
-      "name": "md",
-      "value": 768,
-      "originalValue": 768
-    },
-    "lg": {
-      "type": "...",
-      "category": "media-size",
-      "name": "lg",
-      "value": 1024,
-      "originalValue": 1024
-    },
-    "xl": {
-      "type": "...",
-      "category": "media-size",
-      "name": "xl",
-      "value": 1200,
-      "originalValue": 1200
-    },
-    "media-query-x-small": {
-      "type": "...",
-      "category": "media-query",
-      "name": "media-query-x-small",
-      "value": "(min-width: 480px)",
-      "originalValue": "(min-width: {!xs}px)"
-    },
-    "media-query-small": {
-      "type": "...",
-      "category": "media-query",
-      "name": "media-query-small",
-      "value": "(min-width: 600px)",
-      "originalValue": "(min-width: {!sm}px)"
-    },
-    "media-query-medium": {
-      "type": "...",
-      "category": "media-query",
-      "name": "media-query-medium",
-      "value": "(min-width: 768px)",
-      "originalValue": "(min-width: {!md}px)"
-    },
-    "media-query-large": {
-      "type": "...",
-      "category": "media-query",
-      "name": "media-query-large",
-      "value": "(min-width: 1024px)",
-      "originalValue": "(min-width: {!lg}px)"
-    },
-    "media-query-x-large": {
-      "type": "...",
-      "category": "media-query",
-      "name": "media-query-x-large",
-      "value": "(min-width: 1200px)",
-      "originalValue": "(min-width: {!xl}px)"
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/system/tokens/generated/tokens.scss b/src/system/tokens/generated/tokens.scss
deleted file mode 100644
index e2e53f7c5..000000000
--- a/src/system/tokens/generated/tokens.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-
-$color-neutral-0: rgb(25, 23, 28);
-$color-neutral-10: rgb(40, 37, 45);
-$color-neutral-20: rgb(75, 69, 84);
-$color-neutral-30: rgb(100, 92, 112);
-$color-neutral-40: rgb(112, 103, 126);
-$color-neutral-50: rgb(151, 143, 163);
-$color-neutral-60: rgb(177, 171, 186);
-$color-neutral-70: rgb(203, 199, 209);
-$color-neutral-80: rgb(229, 227, 232);
-$color-neutral-85: rgb(239, 238, 241);
-$color-neutral-90: rgb(245, 244, 246);
-$color-neutral-95: rgb(250, 249, 250);
-$color-neutral-100: rgb(255, 255, 255);
-$color-primary: rgb(23, 181, 63);
-$color-primary-active: rgb(25, 194, 67);
-$color-primary-inverse: rgb(241, 253, 244);
-$color-secondary: rgb(0, 142, 230);
-$color-secondary-active: rgb(10, 161, 255);
-$color-secondary-inverse: rgb(240, 249, 255);
-$color-success: rgb(23, 181, 63);
-$color-success-active: rgb(26, 203, 71);
-$color-success-inverse: rgb(241, 253, 244);
-$color-danger: rgb(219, 57, 36);
-$color-danger-active: rgb(224, 81, 62);
-$color-danger-inverse: rgb(253, 243, 242);
-$color-warning: rgb(230, 121, 25);
-$color-warning-active: rgb(233, 137, 53);
-$color-warning-inverse: rgb(253, 247, 241);
-$color-yellow: rgb(245, 196, 0);
-$color-yellow-active: rgb(255, 206, 10);
-$color-yellow-inverse: rgb(255, 252, 240);
-$text-color-base: rgb(75, 69, 84);
-$text-color-soft: rgb(112, 103, 126);
-$text-color-softer: rgb(177, 171, 186);
-$text-color-disabled: rgb(177, 171, 186);
-$text-color-inverse: rgb(250, 249, 250);
-$text-color-link: rgb(23, 181, 63);
-$text-color-link-active: rgb(25, 194, 67);
-$text-color-primary: rgb(23, 181, 63);
-$text-color-primary-inverse: rgb(241, 253, 244);
-$text-color-secondary: rgb(0, 142, 230);
-$text-color-secondary-inverse: rgb(240, 249, 255);
-$text-color-success: rgb(23, 181, 63);
-$text-color-success-inverse: rgb(241, 253, 244);
-$text-color-warning: rgb(230, 121, 25);
-$text-color-warning-inverse: rgb(253, 247, 241);
-$text-color-danger: rgb(219, 57, 36);
-$text-color-danger-inverse: rgb(253, 243, 242);
-$background-color-base: rgb(255, 255, 255);
-$background-color-soft: rgb(250, 249, 250);
-$background-color-softer: rgb(245, 244, 246);
-$background-color-softer-active: rgb(250, 249, 250);
-$background-color-softest: rgb(239, 238, 241);
-$background-color-softest-active: rgb(245, 244, 246);
-$background-color-inverse: rgb(25, 23, 28);
-$background-color-inverse-soft: rgb(40, 37, 45);
-$background-color-inverse-softer: rgb(75, 69, 84);
-$background-color-inverse-softer-active: rgb(100, 92, 112);
-$background-color-disabled: rgb(245, 244, 246);
-$background-color-primary: rgb(23, 181, 63);
-$background-color-primary-active: rgb(25, 194, 67);
-$background-color-primary-inverse: rgb(241, 253, 244);
-$background-color-secondary: rgb(0, 142, 230);
-$background-color-secondary-active: rgb(10, 161, 255);
-$background-color-secondary-inverse: rgb(240, 249, 255);
-$background-color-success: rgb(23, 181, 63);
-$background-color-success-active: rgb(26, 203, 71);
-$background-color-success-inverse: rgb(241, 253, 244);
-$background-color-warning: rgb(230, 121, 25);
-$background-color-warning-active: rgb(233, 137, 53);
-$background-color-warning-inverse: rgb(253, 247, 241);
-$background-color-danger: rgb(219, 57, 36);
-$background-color-danger-active: rgb(224, 81, 62);
-$background-color-danger-inverse: rgb(253, 243, 242);
-$border-color-base: rgb(177, 171, 186);
-$border-color-soft: rgb(203, 199, 209);
-$border-color-softer: rgb(229, 227, 232);
-$border-color-softest: rgb(245, 244, 246);
-$border-color-active: rgb(23, 181, 63);
-$border-color-primary: rgb(23, 181, 63);
-$border-color-success: rgb(23, 181, 63);
-$border-color-warning: rgb(230, 121, 25);
-$border-color-danger: rgb(219, 57, 36);
-$border-size-base: 1px;
-$border-size-large: 3px;
-$border-size-x-large: 6px;
-$border-radius-x-large: 5px;
-$border-radius-large: 4px;
-$border-radius-base: 4px;
-$border-radius-rounded: 2em;
-$border-radius-circle: 50%;
-$font-size-xxxx-large: 3rem;
-$font-size-xxx-large: 2.5rem;
-$font-size-xx-large: 2rem;
-$font-size-x-large: 1.5rem;
-$font-size-large: 1.25rem;
-$font-size-base: 1rem;
-$font-size-body: 15px;
-$font-size-small: 0.8rem;
-$font-size-x-small: 0.7rem;
-$font-size-xx-small: 0.6rem;
-$font-space-xxxx-large: 2em;
-$font-space-xxx-large: 1.5em;
-$font-space-xx-large: 1.2em;
-$font-space-x-large: 1em;
-$font-space-large: 0.6em;
-$font-space-base: 0.5em;
-$font-space-small: 0.4em;
-$font-space-x-small: 0.3em;
-$font-space-xx-small: 0.2em;
-$font-space-xxx-small: 0.1em;
-$font-family-heading: 'LatoWeb', sans-serif;
-$font-family-text: 'LatoWeb', sans-serif;
-$font-family-serif: 'Gentium Basic', serif;
-$font-family-code: inconsolata, monospace;
-$font-weight-regular: normal;
-$font-weight-bold: 600;
-$line-height-large: 1.5;
-$line-height-base: 1.3;
-$line-height-small: 1.1;
-$line-height-smaller: 1.0;
-$letter-spacing-x-large: 0.1em;
-$letter-spacing-large: 0.05em;
-$letter-spacing-base: 0;
-$letter-spacing-small: -0.01em;
-$letter-spacing-x-small: -0.015em;
-$opacity-soft: 0.65;
-$opacity-disabled: 0.5;
-$xxx-large: 128;
-$xx-large: 64;
-$x-large: 48;
-$large: 32;
-$base: 24;
-$small: 16;
-$x-small: 8;
-$xx-small: 4;
-$xxx-small: 2;
-$space-xxx-large: 128px;
-$space-xx-large: 64px;
-$space-x-large: 48px;
-$space-large: 32px;
-$space-base: 24px;
-$space-small: 16px;
-$space-x-small: 8px;
-$space-xx-small: 4px;
-$space-xxx-small: 2px;
-$size-height-base: 42px;
-$size-height-large: 50px;
-$size-height-xlarge: 60px;
-$size-tappable-square: 44px;
-$size-height-footer: 64px;
-$box-shadow-x-large: 0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08);
-$box-shadow-large: 0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08);
-$box-shadow-base: 0px 12px 26px -4px rgba(0, 0, 0, .1);
-$box-shadow-small: 0px 8px 18px -2px rgba(0, 0, 0, .1);
-$box-shadow-x-small: 0px 0px 3px 0px rgba(0, 0, 0, .1);
-$box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5);
-$box-shadow-inset: inset 0 0 20px 1px rgba(0,0,0,.15);
-$box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05);
-$duration-short: 0.08s;
-$duration-base: 0.5s;
-$duration-long: 0.75s;
-$duration-x-long: 1s;
-$duration-xx-long: 2s;
-$ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-$ease-out-sharp: cubic-bezier(0.165, 0.84, 0.44, 1);
-$ease-out-bounce: cubic-bezier(.87,-.41,.19,1.44);
-$ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-$ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-$z-index-modal: 9999;
-$z-index-dropdown: 8888;
-$z-index-page-submenu: 2500;
-$z-index-page-header: 2000;
-$z-index-page-sidebar: 1500;
-$z-index-sticky: 100;
-$xs: 480;
-$sm: 600;
-$md: 768;
-$lg: 1024;
-$xl: 1200;
-$media-query-x-small: (min-width: 480px);
-$media-query-small: (min-width: 600px);
-$media-query-medium: (min-width: 768px);
-$media-query-large: (min-width: 1024px);
-$media-query-x-large: (min-width: 1200px);