diff --git a/.gitignore b/.gitignore
index 3d322f19..47005cb4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 .DS_Store
 node_modules/
-dist/
 .nuxt/
 npm-debug.log*
 .eslintcache
diff --git a/@kiva/kv-tokens/README.md b/@kiva/kv-tokens/README.md
index a722f1c4..9206a06c 100644
--- a/@kiva/kv-tokens/README.md
+++ b/@kiva/kv-tokens/README.md
@@ -11,10 +11,40 @@ The package contains
 
 ## Using the Design Definitions
 
+### With JavaScript
+
 ```js
 const designTokens = require("@kiva/kv-tokens/primitives.json");
 
-const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary;
+const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary.value;
+```
+
+### With SCSS
+
+```scss
+@import "./node_modules/@kiva/kv-tokens/dist/scss/_variables";
+
+body {
+	background-color: $colors-theme-default-background-primary;
+	color: $colors-theme-default-text-primary;
+	font-size: #{$font-sizes-base-lg}px;
+}
+```
+
+### With CSS Custom Properties
+
+```html
+<link
+	rel="stylesheet"
+	href="./node_modules/@kiva/kv-tokens/dist/css/variables.css"
+/>
+<style>
+	body {
+		background-color: var(--colors-theme-default-background-primary);
+		color: var(--colors-theme-default-text-primary);
+		font-size: calc(var(--font-sizes-base-lg) * 1px);
+	}
+</style>
 ```
 
 ## Using the Tailwind Preset
diff --git a/@kiva/kv-tokens/configs/kivaColors.js b/@kiva/kv-tokens/configs/kivaColors.js
index e77b32aa..d31292bc 100644
--- a/@kiva/kv-tokens/configs/kivaColors.js
+++ b/@kiva/kv-tokens/configs/kivaColors.js
@@ -24,7 +24,7 @@ const buildCSSVarsFromTokens = (theme) => {
 
 		const properties = Object.keys(theme[category]);
 		properties.forEach((property) => {
-			customProperties[`--${twPrefix}-${property}`] = hexToRGB(theme[category][property]);
+			customProperties[`--${twPrefix}-${property}`] = hexToRGB(theme[category][property].value);
 		});
 	});
 	return customProperties;
@@ -78,8 +78,42 @@ const buildColorChoices = (themeProperty) => {
 	return property;
 };
 
+/**
+ * Reshapes an object from
+ * {
+ *   brand: {
+ *     100: {
+ *       value: "somehex"
+ *     },
+ *     200: {
+ *       value: "somehex"
+ *     }
+ *     ...
+ *   }
+ * }
+ *
+ * to
+ *
+ * {
+ *   brand: {
+ *     100: "somehex",
+ *     200: "somehex"
+ *     ...
+ *   }
+ * }
+*/
+
+const buildTailwindColorObjectFromTokens = (tokenGroup) => {
+	const ret = {};
+	Object.keys(tokenGroup).forEach((group) => {
+		ret[group] = tokenGroup[group].value;
+	});
+	return ret;
+};
+
 module.exports = {
 	buildColorChoices,
+	buildTailwindColorObjectFromTokens,
 	defaultTheme,
 	darkTheme,
 	darkGreenTheme,
diff --git a/@kiva/kv-tokens/configs/kivaTypography.js b/@kiva/kv-tokens/configs/kivaTypography.js
index 65f27333..e808cf94 100644
--- a/@kiva/kv-tokens/configs/kivaTypography.js
+++ b/@kiva/kv-tokens/configs/kivaTypography.js
@@ -60,106 +60,106 @@ const textBaseColor = 'rgb(var(--text-primary))';
 */
 const textStyles = (() => {
 	const textJumbo = {
-		fontWeight: fontWeights.medium,
-		fontSize: rem(fontSizes.jumbo.sm),
-		letterSpacing: letterSpacings['-2'],
-		lineHeight: lineHeights.tight,
+		fontWeight: fontWeights.medium.value,
+		fontSize: rem(fontSizes.jumbo.sm.value),
+		letterSpacing: letterSpacings['-2'].value,
+		lineHeight: lineHeights.tight.value,
 		'@screen md': {
-			fontSize: rem(fontSizes.jumbo.md),
+			fontSize: rem(fontSizes.jumbo.md.value),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.jumbo.lg),
+			fontSize: rem(fontSizes.jumbo.lg.value),
 		},
 	};
 
 	const textH1 = {
-		fontSize: rem(fontSizes.h1.sm),
-		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-0.3'], fontSizes.h1.sm),
-		lineHeight: lineHeights.tight,
+		fontSize: rem(fontSizes.h1.sm.value),
+		fontWeight: fontWeights.medium.value,
+		letterSpacing: em(letterSpacings['-0.3'].value, fontSizes.h1.sm.value),
+		lineHeight: lineHeights.tight.value,
 		'@screen md': {
-			fontSize: rem(fontSizes.h1.md),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h1.md),
+			fontSize: rem(fontSizes.h1.md.value),
+			letterSpacing: em(letterSpacings['-1'].value, fontSizes.h1.md.value),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h1.lg),
-			letterSpacing: em(letterSpacings['-2'], fontSizes.h1.lg),
+			fontSize: rem(fontSizes.h1.lg.value),
+			letterSpacing: em(letterSpacings['-2'].value, fontSizes.h1.lg.value),
 		},
 	};
 
 	const textH2 = {
-		fontSize: rem(fontSizes.h2.sm),
-		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-1'], fontSizes.h2.sm),
-		lineHeight: lineHeights.tight,
+		fontSize: rem(fontSizes.h2.sm.value),
+		fontWeight: fontWeights.medium.value,
+		letterSpacing: em(letterSpacings['-1'].value, fontSizes.h2.sm.value),
+		lineHeight: lineHeights.tight.value,
 		'@screen md': {
-			fontSize: rem(fontSizes.h2.md),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h2.md),
+			fontSize: rem(fontSizes.h2.md.value),
+			letterSpacing: em(letterSpacings['-1'].value, fontSizes.h2.md).value,
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h2.lg),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h2.lg),
-			lineHeight: lineHeights.normal,
+			fontSize: rem(fontSizes.h2.lg.value),
+			letterSpacing: em(letterSpacings['-1'].value, fontSizes.h2.lg.value),
+			lineHeight: lineHeights.normal.value,
 		},
 	};
 
 	const textH3 = {
-		fontSize: rem(fontSizes.h3.sm),
-		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-1'], fontSizes.h3.sm),
-		lineHeight: lineHeights.tight,
+		fontSize: rem(fontSizes.h3.sm.value),
+		fontWeight: fontWeights.medium.value,
+		letterSpacing: em(letterSpacings['-1'].value, fontSizes.h3.sm).value,
+		lineHeight: lineHeights.tight.value,
 		'@screen md': {
-			fontSize: rem(fontSizes.h3.md),
-			letterSpacing: em(letterSpacings['-0.3'], fontSizes.h3.md),
+			fontSize: rem(fontSizes.h3.md.value),
+			letterSpacing: em(letterSpacings['-0.3'].value, fontSizes.h3.md.value),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h3.lg),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h3.lg),
+			fontSize: rem(fontSizes.h3.lg.value),
+			letterSpacing: em(letterSpacings['-1'].value, fontSizes.h3.lg.value),
 		},
 	};
 
 	const textH4 = {
-		fontSize: rem(fontSizes.h4.sm),
-		fontWeight: fontWeights.medium,
-		lineHeight: lineHeights.normal,
+		fontSize: rem(fontSizes.h4.sm.value),
+		fontWeight: fontWeights.medium.value,
+		lineHeight: lineHeights.normal.value,
 		textTransform: 'uppercase',
 		'@screen md': {
-			fontSize: rem(fontSizes.h4.md),
+			fontSize: rem(fontSizes.h4.md.value),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h4.lg),
+			fontSize: rem(fontSizes.h4.lg.value),
 		},
 	};
 
 	const textSubhead = {
-		fontSize: rem(fontSizes.subhead.sm),
-		fontWeight: fontWeights.book,
-		letterSpacing: em(letterSpacings['-0.5'], fontSizes.subhead.sm),
-		lineHeight: lineHeights.normal,
+		fontSize: rem(fontSizes.subhead.sm.value),
+		fontWeight: fontWeights.book.value,
+		letterSpacing: em(letterSpacings['-0.5'].value, fontSizes.subhead.sm.value),
+		lineHeight: lineHeights.normal.value,
 		'@screen md': {
-			fontSize: rem(fontSizes.subhead.md),
-			letterSpacing: em(letterSpacings['-0.5'], fontSizes.subhead.md),
+			fontSize: rem(fontSizes.subhead.md.value),
+			letterSpacing: em(letterSpacings['-0.5'].value, fontSizes.subhead.md.value),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.subhead.lg),
-			letterSpacing: em(letterSpacings['-0.5'], fontSizes.subhead.lg),
+			fontSize: rem(fontSizes.subhead.lg.value),
+			letterSpacing: em(letterSpacings['-0.5'].value, fontSizes.subhead.lg.value),
 		},
 	};
 
 	const textBase = {
-		fontWeight: fontWeights.book,
-		fontSize: rem(fontSizes.base.sm),
-		lineHeight: lineHeights.normal,
+		fontWeight: fontWeights.book.value,
+		fontSize: rem(fontSizes.base.sm.value),
+		lineHeight: lineHeights.normal.value,
 		'@screen lg': {
-			fontSize: rem(fontSizes.base.lg),
+			fontSize: rem(fontSizes.base.lg.value),
 		},
 	};
 
 	const textSmall = {
-		fontSize: rem(fontSizes.small.sm),
-		lineHeight: lineHeights.normal,
+		fontSize: rem(fontSizes.small.sm.value),
+		lineHeight: lineHeights.normal.value,
 		'@screen lg': {
-			fontSize: rem(fontSizes.small.lg),
+			fontSize: rem(fontSizes.small.lg.value),
 		},
 	};
 
@@ -175,7 +175,7 @@ const textStyles = (() => {
 	const textPlaceholder = {
 		color: 'rgb(var(--text-tertiary))',
 		opacity: 1,
-		fontWeight: fontWeights.book,
+		fontWeight: fontWeights.book.value,
 	};
 
 	return {
@@ -255,42 +255,42 @@ const proseOverrides = () => ({
 			fontSize: false,
 			lineHeight: false,
 			p: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
 			},
 			blockquote: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
-				padding: `0 0 0 ${rem(space['6'])}`,
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
+				padding: `0 0 0 ${rem(space[6].value)}`,
 			},
 			h1: {
 				fontSize: false,
 				marginTop: '0',
-				marginBottom: rem(space[4]),
+				marginBottom: rem(space[4].value),
 				color: textBaseColor,
 			},
 			h2: {
 				fontSize: false,
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
 				color: textBaseColor,
 			},
 			h3: {
 				fontSize: false,
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[2]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[2].value),
 				color: textBaseColor,
 			},
 			h4: {
 				marginTop: false,
-				marginBottom: rem(space[4]),
+				marginBottom: rem(space[4].value),
 				color: textBaseColor,
 			},
 			img: false,
 			video: false,
 			figure: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
 			},
 			'figure > *': {
 				marginTop: '0',
@@ -299,7 +299,7 @@ const proseOverrides = () => ({
 			'figure figcaption': {
 				fontSize: false,
 				lineHeight: false,
-				marginTop: rem(space[4]),
+				marginTop: rem(space[4].value),
 			},
 			code: false,
 			'code::before': false,
@@ -309,27 +309,27 @@ const proseOverrides = () => ({
 			pre: {
 				color: 'rgb(var(--text-primary-inverse))',
 				backgroundColor: 'rgb(var(--bg-primary-inverse))',
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
-				borderRadius: rem(radii.sm),
-				paddingTop: rem(space[2]),
-				paddingRight: rem(space[3]),
-				paddingBottom: rem(space[2]),
-				paddingLeft: rem(space[3]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
+				borderRadius: rem(radii.sm.value),
+				paddingTop: rem(space[2].value),
+				paddingRight: rem(space[3].value),
+				paddingBottom: rem(space[2].value),
+				paddingLeft: rem(space[3].value),
 				overflowY: 'auto',
 			},
 			'pre code': false,
 			ol: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
 			},
 			ul: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[4].value),
+				marginBottom: rem(space[4].value),
 			},
 			li: {
-				marginTop: rem(space[2]),
-				marginBottom: rem(space[2]),
+				marginTop: rem(space[2].value),
+				marginBottom: rem(space[2].value),
 			},
 			'ul > li::before': {
 				width: em(6, 16),
@@ -342,24 +342,24 @@ const proseOverrides = () => ({
 				marginBottom: em(12, 16),
 			},
 			'> ul > li > *:first-child': {
-				marginTop: rem(space[2]),
+				marginTop: rem(space[2].value),
 			},
 			'> ul > li > *:last-child': {
-				marginBottom: rem(space[2]),
+				marginBottom: rem(space[2].value),
 			},
 			'> ol > li > *:first-child': {
-				marginTop: rem(space[2]),
+				marginTop: rem(space[2].value),
 			},
 			'> ol > li > *:last-child': {
-				marginBottom: rem(space[2]),
+				marginBottom: rem(space[2].value),
 			},
 			'ul ul, ul ol, ol ul, ol ol': {
 				marginTop: 0,
 				marginBottom: 0,
 			},
 			hr: {
-				marginTop: rem(space['6']),
-				marginBottom: rem(space['6']),
+				marginTop: rem(space[6].value),
+				marginBottom: rem(space[6]).value,
 			},
 			'hr + *': {
 				marginTop: '0',
diff --git a/@kiva/kv-tokens/configs/style-dictionary-config.js b/@kiva/kv-tokens/configs/style-dictionary-config.js
new file mode 100644
index 00000000..cdf49d80
--- /dev/null
+++ b/@kiva/kv-tokens/configs/style-dictionary-config.js
@@ -0,0 +1,25 @@
+module.exports = {
+	source: ['./primitives.json'],
+	platforms: {
+		scss: {
+			transformGroup: 'scss',
+			buildPath: 'dist/scss/',
+			files: [
+				{
+					format: 'scss/variables',
+					destination: '_variables.scss',
+				},
+			],
+		},
+		css: {
+			transformGroup: 'css',
+			buildPath: 'dist/css/',
+			files: [
+				{
+					format: 'css/variables',
+					destination: 'variables.css',
+				},
+			],
+		},
+	},
+};
diff --git a/@kiva/kv-tokens/configs/tailwind.config.js b/@kiva/kv-tokens/configs/tailwind.config.js
index 4f564d7a..9ae04165 100644
--- a/@kiva/kv-tokens/configs/tailwind.config.js
+++ b/@kiva/kv-tokens/configs/tailwind.config.js
@@ -1,7 +1,7 @@
 const plugin = require('tailwindcss/plugin');
 const typographyPlugin = require('@tailwindcss/typography');
 const kivaTypography = require('./kivaTypography');
-const { defaultTheme, buildColorChoices } = require('./kivaColors');
+const { defaultTheme, buildColorChoices, buildTailwindColorObjectFromTokens } = require('./kivaColors');
 const designtokens = require('../primitives.json');
 const { rem } = require('./util');
 
@@ -30,53 +30,53 @@ module.exports = {
 	},
 	theme: {
 		screens: {
-			md: rem(breakpoints.md),
-			lg: rem(breakpoints.lg),
-			xl: rem(breakpoints.xl),
+			md: rem(breakpoints.md.value),
+			lg: rem(breakpoints.lg.value),
+			xl: rem(breakpoints.xl.value),
 			print: { raw: 'print' }, // https://tailwindcss.com/docs/breakpoints#styling-for-print
 		},
 		colors: {
 			// static colors
 			transparent: 'transparent',
 			current: 'currentColor',
-			black: colors.black,
-			white: colors.white,
-			brand: colors.brand,
+			black: colors.black.value,
+			white: colors.white.value,
+			brand: buildTailwindColorObjectFromTokens(colors.brand),
 			// themable colors are defined in the 'extend' section as custom properties
 		},
 		spacing: {
 			0: '0',
-			0.5: rem(space['0.5']),
-			1: rem(space['1']),
-			1.5: rem(space['1.5']),
-			2: rem(space['2']),
-			2.5: rem(space['2.5']),
-			3: rem(space['3']),
-			3.5: rem(space['3.5']),
-			4: rem(space['4']),
-			4.5: rem(space['4.5']),
-			5: rem(space['5']),
-			6: rem(space['6']),
-			7: rem(space['7']),
-			8: rem(space['8']),
-			9: rem(space['9']),
-			10: rem(space['10']),
-			11: rem(space['11']),
-			12: rem(space['12']),
-			13: rem(space['13']),
-			14: rem(space['14']),
-			15: rem(space['15']),
-			16: rem(space['16']),
+			0.5: rem(space['0.5'].value),
+			1: rem(space['1'].value),
+			1.5: rem(space['1.5'].value),
+			2: rem(space['2'].value),
+			2.5: rem(space['2.5'].value),
+			3: rem(space['3'].value),
+			3.5: rem(space['3.5'].value),
+			4: rem(space['4'].value),
+			4.5: rem(space['4.5'].value),
+			5: rem(space['5'].value),
+			6: rem(space['6'].value),
+			7: rem(space['7'].value),
+			8: rem(space['8'].value),
+			9: rem(space['9'].value),
+			10: rem(space['10'].value),
+			11: rem(space['11'].value),
+			12: rem(space['12'].value),
+			13: rem(space['13'].value),
+			14: rem(space['14'].value),
+			15: rem(space['15'].value),
+			16: rem(space['16'].value),
 		},
 		fontFamily: {
-			sans: [`${fonts.sans}, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif`],
+			sans: [`${fonts.sans.value}, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif`],
 		},
 		fontWeight: {
-			book: `${fontWeights.book}`,
-			medium: `${fontWeights.medium}`,
+			book: `${fontWeights.book.value}`,
+			medium: `${fontWeights.medium.value}`,
 		},
 		borderWidth: {
-			DEFAULT: rem(borderWidths.default),
+			DEFAULT: rem(borderWidths.default.value),
 			0: '0px',
 			2: '2px',
 			// 4: '4px',
@@ -84,10 +84,10 @@ module.exports = {
 		},
 		borderRadius: {
 			none: '0px',
-			sm: rem(radii.sm),
-			DEFAULT: rem(radii.default),
+			sm: rem(radii.sm.value),
+			DEFAULT: rem(radii.default.value),
 			// md: '0.375rem',
-			lg: rem(radii.lg),
+			lg: rem(radii.lg.value),
 			// xl: '0.75rem',
 			// '2xl': '1rem',
 			// '3xl': '1.5rem',
@@ -95,30 +95,30 @@ module.exports = {
 		},
 		opacity: {
 			0: '0',
-			low: `${opacity.low}`,
+			low: `${opacity.low.value}`,
 			full: '1',
 		},
 		zIndex: {
-			hide: zIndices.hide,
+			hide: zIndices.hide.value,
 			auto: 'auto',
-			base: zIndices.base,
-			1: zIndices['1'],
-			2: zIndices['2'],
-			3: zIndices['3'],
-			4: zIndices['4'],
-			5: zIndices['5'],
-			docked: zIndices.docked,
-			dropdown: zIndices.dropdown,
-			sticky: zIndices.sticky,
-			banner: zIndices.banner,
-			overlay: zIndices.overlay,
-			modal: zIndices.modal,
-			popover: zIndices.popover,
-			skipLink: zIndices.skipLink,
-			toast: zIndices.toast,
-			tooltip: zIndices.tooltip,
-			troposphere: zIndices.troposphere,
-			stratosphere: zIndices.stratosphere,
+			base: zIndices.base.value,
+			1: zIndices['1'].value,
+			2: zIndices['2'].value,
+			3: zIndices['3'].value,
+			4: zIndices['4'].value,
+			5: zIndices['5'].value,
+			docked: zIndices.docked.value,
+			dropdown: zIndices.dropdown.value,
+			sticky: zIndices.sticky.value,
+			banner: zIndices.banner.value,
+			overlay: zIndices.overlay.value,
+			modal: zIndices.modal.value,
+			popover: zIndices.popover.value,
+			skipLink: zIndices.skipLink.value,
+			toast: zIndices.toast.value,
+			tooltip: zIndices.tooltip.value,
+			troposphere: zIndices.troposphere.value,
+			stratosphere: zIndices.stratosphere.value,
 		},
 		extend: {
 			typography: kivaTypography.proseOverrides, // prose plugin overrides
@@ -171,7 +171,7 @@ module.exports = {
 					...textStyles.textBase,
 					color: textBaseColor,
 				},
-				button: { fontWeight: fontWeights.book },
+				button: { fontWeight: fontWeights.book.value },
 				h1: textStyles.textH1,
 				h2: textStyles.textH2,
 				h3: textStyles.textH3,
@@ -185,11 +185,11 @@ module.exports = {
 				},
 				a: textStyles.textLink,
 				'strong, b': {
-					fontWeight: fontWeights.medium,
+					fontWeight: fontWeights.medium.value,
 				},
 				hr: {
-					borderColor: colors.gray['500'],
-					borderTopWidth: borderWidths.default,
+					borderColor: colors.gray['500'].value,
+					borderTopWidth: borderWidths.default.value,
 				},
 				'input::-webkit-input-placeholder, textarea::-webkit-input-placeholder': textStyles.textPlaceholder,
 				'input::-moz-placeholder, textarea::-moz-placeholder': textStyles.textPlaceholder,
diff --git a/@kiva/kv-tokens/dist/css/variables.css b/@kiva/kv-tokens/dist/css/variables.css
new file mode 100644
index 00000000..6e329e8b
--- /dev/null
+++ b/@kiva/kv-tokens/dist/css/variables.css
@@ -0,0 +1,175 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 24 Nov 2021 21:41:33 GMT
+ */
+
+:root {
+  --colors-white: #FFFFFF;
+  --colors-black: #000000;
+  --colors-gray-50: #fafafa;
+  --colors-gray-100: #F5F5F5;
+  --colors-gray-200: #E0E0E0;
+  --colors-gray-300: #C4C4C4;
+  --colors-gray-400: #9E9E9E;
+  --colors-gray-500: #757575;
+  --colors-gray-600: #505050;
+  --colors-gray-700: #454545;
+  --colors-gray-800: #212121;
+  --colors-brand-50: #F4FBF7;
+  --colors-brand-100: #EAF6F0;
+  --colors-brand-200: #BFE5D1;
+  --colors-brand-300: #95D4B3;
+  --colors-brand-400: #6AC395;
+  --colors-brand-500: #4AB67E;
+  --colors-brand-550: #35AD6F;
+  --colors-brand-650: #28A062;
+  --colors-brand-700: #26985D;
+  --colors-brand-800: #228752;
+  --colors-brand-900: #1D7748;
+  --colors-brand-950: #1B6E43;
+  --colors-brand-1000: #19653E;
+  --colors-brand-default: #2AA967;
+  --colors-theme-default-text-primary: #212121;
+  --colors-theme-default-text-primary-inverse: #F5F5F5;
+  --colors-theme-default-text-secondary: #757575;
+  --colors-theme-default-text-tertiary: #9E9E9E;
+  --colors-theme-default-text-action: #2B7C5F;
+  --colors-theme-default-text-action-highlight: #277056;
+  --colors-theme-default-text-danger: #E42A2A;
+  --colors-theme-default-text-danger-highlight: #CE2626;
+  --colors-theme-default-background-primary: #FFFFFF;
+  --colors-theme-default-background-primary-inverse: #000000;
+  --colors-theme-default-background-secondary: #F5F5F5;
+  --colors-theme-default-background-tertiary: #E0E0E0;
+  --colors-theme-default-background-action: #2B7C5F;
+  --colors-theme-default-background-action-highlight: #277056;
+  --colors-theme-default-background-danger: #E42A2A;
+  --colors-theme-default-background-danger-highlight: #CE2626;
+  --colors-theme-default-background-caution: #FEE16E;
+  --colors-theme-default-border-primary: #212121;
+  --colors-theme-default-border-primary-inverse: #FFFFFF;
+  --colors-theme-default-border-secondary: #757575;
+  --colors-theme-default-border-tertiary: #C4C4C4;
+  --colors-theme-default-border-action: #2B7C5F;
+  --colors-theme-default-border-action-highlight: #277056;
+  --colors-theme-default-border-danger: #E42A2A;
+  --colors-theme-default-border-danger-highlight: #CE2626;
+  --colors-theme-dark-text-primary: #F5F5F5;
+  --colors-theme-dark-text-primary-inverse: #212121;
+  --colors-theme-dark-text-secondary: #9E9E9E;
+  --colors-theme-dark-text-tertiary: #757575;
+  --colors-theme-dark-text-action: #4AB67E;
+  --colors-theme-dark-text-action-highlight: #6AC395;
+  --colors-theme-dark-text-danger: #E42A2A;
+  --colors-theme-dark-text-danger-highlight: #CE2626;
+  --colors-theme-dark-background-primary: #000000;
+  --colors-theme-dark-background-primary-inverse: #F5F5F5;
+  --colors-theme-dark-background-secondary: #212121;
+  --colors-theme-dark-background-tertiary: #454545;
+  --colors-theme-dark-background-action: #4AB67E;
+  --colors-theme-dark-background-action-highlight: #6AC395;
+  --colors-theme-dark-background-danger: #E42A2A;
+  --colors-theme-dark-background-danger-highlight: #CE2626;
+  --colors-theme-dark-background-caution: #FEE16E;
+  --colors-theme-dark-border-primary: #F5F5F5;
+  --colors-theme-dark-border-primary-inverse: #212121;
+  --colors-theme-dark-border-secondary: #9E9E9E;
+  --colors-theme-dark-border-tertiary: #757575;
+  --colors-theme-dark-border-action: #4AB67E;
+  --colors-theme-dark-border-action-highlight: #6AC395;
+  --colors-theme-dark-border-danger: #E42A2A;
+  --colors-theme-dark-border-danger-highlight: #CE2626;
+  --colors-theme-mint-text-secondary: #228752;
+  --colors-theme-mint-text-tertiary: #28A062;
+  --colors-theme-mint-background-primary: #95D4B3;
+  --colors-theme-mint-border-tertiary: #4AB67E;
+  --colors-theme-dark-green-text-primary: #F5F5F5;
+  --colors-theme-dark-green-text-primary-inverse: #212121;
+  --colors-theme-dark-green-text-secondary: #9E9E9E;
+  --colors-theme-dark-green-background-primary: #2AA967;
+  --colors-theme-dark-green-background-primary-inverse: #F5F5F5;
+  --colors-theme-dark-green-background-secondary: #228752;
+  --space-1: 8;
+  --space-2: 16;
+  --space-3: 24;
+  --space-4: 32;
+  --space-5: 40;
+  --space-6: 48;
+  --space-7: 56;
+  --space-8: 64;
+  --space-9: 72;
+  --space-10: 80;
+  --space-11: 88;
+  --space-12: 96;
+  --space-13: 104;
+  --space-14: 112;
+  --space-15: 120;
+  --space-16: 128;
+  --space-0-5: 4;
+  --space-1-5: 12;
+  --space-2-5: 20;
+  --space-3-5: 28;
+  --space-4-5: 36;
+  --fonts-sans: PostGrotesk;
+  --font-sizes-base-sm: 16;
+  --font-sizes-base-md: 16;
+  --font-sizes-base-lg: 17;
+  --font-sizes-jumbo-sm: 64;
+  --font-sizes-jumbo-md: 96;
+  --font-sizes-jumbo-lg: 112;
+  --font-sizes-small-sm: 12;
+  --font-sizes-small-md: 12;
+  --font-sizes-small-lg: 13;
+  --font-sizes-h1-sm: 40;
+  --font-sizes-h1-md: 50;
+  --font-sizes-h1-lg: 54;
+  --font-sizes-h2-sm: 24;
+  --font-sizes-h2-md: 28;
+  --font-sizes-h2-lg: 32;
+  --font-sizes-h3-sm: 20;
+  --font-sizes-h3-md: 22;
+  --font-sizes-h3-lg: 24;
+  --font-sizes-h4-sm: 12;
+  --font-sizes-h4-md: 14;
+  --font-sizes-h4-lg: 14;
+  --font-sizes-subhead-sm: 20;
+  --font-sizes-subhead-md: 22;
+  --font-sizes-subhead-lg: 24;
+  --font-weights-book: 300;
+  --font-weights-medium: 400;
+  --line-heights-tight: 1.25;
+  --line-heights-normal: 1.5;
+  --letter-spacings-normal: 0;
+  --letter-spacings-0-3: -0.3;
+  --letter-spacings-0-5: -0.5;
+  --letter-spacings-1: -1;
+  --letter-spacings-2: -2;
+  --breakpoints-md: 734;
+  --breakpoints-lg: 1024;
+  --breakpoints-xl: 1440;
+  --border-widths-default: 1;
+  --z-indices-1: 1;
+  --z-indices-2: 2;
+  --z-indices-3: 3;
+  --z-indices-4: 4;
+  --z-indices-5: 5;
+  --z-indices-hide: -1;
+  --z-indices-base: 0;
+  --z-indices-docked: 10;
+  --z-indices-dropdown: 1000;
+  --z-indices-sticky: 1100;
+  --z-indices-banner: 1200;
+  --z-indices-overlay: 1300;
+  --z-indices-modal: 1400;
+  --z-indices-popover: 1500;
+  --z-indices-skip-link: 1600;
+  --z-indices-toast: 1700;
+  --z-indices-tooltip: 1800;
+  --z-indices-troposphere: 2000;
+  --z-indices-stratosphere: 3000;
+  --radii-sm: 4;
+  --radii-default: 14;
+  --radii-lg: 40;
+  --opacity-default: 1;
+  --opacity-low: 0.3;
+}
diff --git a/@kiva/kv-tokens/dist/scss/_variables.scss b/@kiva/kv-tokens/dist/scss/_variables.scss
new file mode 100644
index 00000000..324c2dc1
--- /dev/null
+++ b/@kiva/kv-tokens/dist/scss/_variables.scss
@@ -0,0 +1,172 @@
+
+// Do not edit directly
+// Generated on Wed, 24 Nov 2021 21:41:33 GMT
+
+$colors-white: #FFFFFF;
+$colors-black: #000000;
+$colors-gray-50: #fafafa;
+$colors-gray-100: #F5F5F5;
+$colors-gray-200: #E0E0E0;
+$colors-gray-300: #C4C4C4;
+$colors-gray-400: #9E9E9E;
+$colors-gray-500: #757575;
+$colors-gray-600: #505050;
+$colors-gray-700: #454545;
+$colors-gray-800: #212121;
+$colors-brand-50: #F4FBF7;
+$colors-brand-100: #EAF6F0;
+$colors-brand-200: #BFE5D1;
+$colors-brand-300: #95D4B3;
+$colors-brand-400: #6AC395;
+$colors-brand-500: #4AB67E;
+$colors-brand-550: #35AD6F;
+$colors-brand-650: #28A062;
+$colors-brand-700: #26985D;
+$colors-brand-800: #228752;
+$colors-brand-900: #1D7748;
+$colors-brand-950: #1B6E43;
+$colors-brand-1000: #19653E;
+$colors-brand-default: #2AA967;
+$colors-theme-default-text-primary: #212121;
+$colors-theme-default-text-primary-inverse: #F5F5F5;
+$colors-theme-default-text-secondary: #757575;
+$colors-theme-default-text-tertiary: #9E9E9E;
+$colors-theme-default-text-action: #2B7C5F;
+$colors-theme-default-text-action-highlight: #277056;
+$colors-theme-default-text-danger: #E42A2A;
+$colors-theme-default-text-danger-highlight: #CE2626;
+$colors-theme-default-background-primary: #FFFFFF;
+$colors-theme-default-background-primary-inverse: #000000;
+$colors-theme-default-background-secondary: #F5F5F5;
+$colors-theme-default-background-tertiary: #E0E0E0;
+$colors-theme-default-background-action: #2B7C5F;
+$colors-theme-default-background-action-highlight: #277056;
+$colors-theme-default-background-danger: #E42A2A;
+$colors-theme-default-background-danger-highlight: #CE2626;
+$colors-theme-default-background-caution: #FEE16E;
+$colors-theme-default-border-primary: #212121;
+$colors-theme-default-border-primary-inverse: #FFFFFF;
+$colors-theme-default-border-secondary: #757575;
+$colors-theme-default-border-tertiary: #C4C4C4;
+$colors-theme-default-border-action: #2B7C5F;
+$colors-theme-default-border-action-highlight: #277056;
+$colors-theme-default-border-danger: #E42A2A;
+$colors-theme-default-border-danger-highlight: #CE2626;
+$colors-theme-dark-text-primary: #F5F5F5;
+$colors-theme-dark-text-primary-inverse: #212121;
+$colors-theme-dark-text-secondary: #9E9E9E;
+$colors-theme-dark-text-tertiary: #757575;
+$colors-theme-dark-text-action: #4AB67E;
+$colors-theme-dark-text-action-highlight: #6AC395;
+$colors-theme-dark-text-danger: #E42A2A;
+$colors-theme-dark-text-danger-highlight: #CE2626;
+$colors-theme-dark-background-primary: #000000;
+$colors-theme-dark-background-primary-inverse: #F5F5F5;
+$colors-theme-dark-background-secondary: #212121;
+$colors-theme-dark-background-tertiary: #454545;
+$colors-theme-dark-background-action: #4AB67E;
+$colors-theme-dark-background-action-highlight: #6AC395;
+$colors-theme-dark-background-danger: #E42A2A;
+$colors-theme-dark-background-danger-highlight: #CE2626;
+$colors-theme-dark-background-caution: #FEE16E;
+$colors-theme-dark-border-primary: #F5F5F5;
+$colors-theme-dark-border-primary-inverse: #212121;
+$colors-theme-dark-border-secondary: #9E9E9E;
+$colors-theme-dark-border-tertiary: #757575;
+$colors-theme-dark-border-action: #4AB67E;
+$colors-theme-dark-border-action-highlight: #6AC395;
+$colors-theme-dark-border-danger: #E42A2A;
+$colors-theme-dark-border-danger-highlight: #CE2626;
+$colors-theme-mint-text-secondary: #228752;
+$colors-theme-mint-text-tertiary: #28A062;
+$colors-theme-mint-background-primary: #95D4B3;
+$colors-theme-mint-border-tertiary: #4AB67E;
+$colors-theme-dark-green-text-primary: #F5F5F5;
+$colors-theme-dark-green-text-primary-inverse: #212121;
+$colors-theme-dark-green-text-secondary: #9E9E9E;
+$colors-theme-dark-green-background-primary: #2AA967;
+$colors-theme-dark-green-background-primary-inverse: #F5F5F5;
+$colors-theme-dark-green-background-secondary: #228752;
+$space-1: 8;
+$space-2: 16;
+$space-3: 24;
+$space-4: 32;
+$space-5: 40;
+$space-6: 48;
+$space-7: 56;
+$space-8: 64;
+$space-9: 72;
+$space-10: 80;
+$space-11: 88;
+$space-12: 96;
+$space-13: 104;
+$space-14: 112;
+$space-15: 120;
+$space-16: 128;
+$space-0-5: 4;
+$space-1-5: 12;
+$space-2-5: 20;
+$space-3-5: 28;
+$space-4-5: 36;
+$fonts-sans: PostGrotesk;
+$font-sizes-base-sm: 16;
+$font-sizes-base-md: 16;
+$font-sizes-base-lg: 17;
+$font-sizes-jumbo-sm: 64;
+$font-sizes-jumbo-md: 96;
+$font-sizes-jumbo-lg: 112;
+$font-sizes-small-sm: 12;
+$font-sizes-small-md: 12;
+$font-sizes-small-lg: 13;
+$font-sizes-h1-sm: 40;
+$font-sizes-h1-md: 50;
+$font-sizes-h1-lg: 54;
+$font-sizes-h2-sm: 24;
+$font-sizes-h2-md: 28;
+$font-sizes-h2-lg: 32;
+$font-sizes-h3-sm: 20;
+$font-sizes-h3-md: 22;
+$font-sizes-h3-lg: 24;
+$font-sizes-h4-sm: 12;
+$font-sizes-h4-md: 14;
+$font-sizes-h4-lg: 14;
+$font-sizes-subhead-sm: 20;
+$font-sizes-subhead-md: 22;
+$font-sizes-subhead-lg: 24;
+$font-weights-book: 300;
+$font-weights-medium: 400;
+$line-heights-tight: 1.25;
+$line-heights-normal: 1.5;
+$letter-spacings-normal: 0;
+$letter-spacings-0-3: -0.3;
+$letter-spacings-0-5: -0.5;
+$letter-spacings-1: -1;
+$letter-spacings-2: -2;
+$breakpoints-md: 734;
+$breakpoints-lg: 1024;
+$breakpoints-xl: 1440;
+$border-widths-default: 1;
+$z-indices-1: 1;
+$z-indices-2: 2;
+$z-indices-3: 3;
+$z-indices-4: 4;
+$z-indices-5: 5;
+$z-indices-hide: -1;
+$z-indices-base: 0;
+$z-indices-docked: 10;
+$z-indices-dropdown: 1000;
+$z-indices-sticky: 1100;
+$z-indices-banner: 1200;
+$z-indices-overlay: 1300;
+$z-indices-modal: 1400;
+$z-indices-popover: 1500;
+$z-indices-skip-link: 1600;
+$z-indices-toast: 1700;
+$z-indices-tooltip: 1800;
+$z-indices-troposphere: 2000;
+$z-indices-stratosphere: 3000;
+$radii-sm: 4;
+$radii-default: 14;
+$radii-lg: 40;
+$opacity-default: 1;
+$opacity-low: 0.3;
\ No newline at end of file
diff --git a/@kiva/kv-tokens/package.json b/@kiva/kv-tokens/package.json
index e8c100b4..6ea3c73e 100644
--- a/@kiva/kv-tokens/package.json
+++ b/@kiva/kv-tokens/package.json
@@ -8,5 +8,13 @@
     "dependencies": {
         "@tailwindcss/typography": "^0.4.0",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"
+    },
+    "devDependencies": {
+        "rimraf": "^3.0.2",
+        "style-dictionary": "^3.0.3"
+    },
+    "scripts": {
+        "clean": "rimraf dist",
+        "style-dictionary-build": "npm run clean && style-dictionary build --config ./configs/style-dictionary-config.js"
     }
 }
diff --git a/@kiva/kv-tokens/primitives.json b/@kiva/kv-tokens/primitives.json
index 5ef97bc5..f52e6487 100644
--- a/@kiva/kv-tokens/primitives.json
+++ b/@kiva/kv-tokens/primitives.json
@@ -1,247 +1,584 @@
 {
 	"colors": {
-		"white": "#FFFFFF",
-		"black": "#000000",
+		"white": {
+			"value": "#FFFFFF"
+		},
+		"black": {
+			"value": "#000000"
+		},
 		"gray": {
-			"800": "#212121",
-			"700": "#454545",
-			"600": "#505050",
-			"500": "#757575",
-			"400": "#9E9E9E",
-			"300": "#C4C4C4",
-			"200": "#E0E0E0",
-			"100": "#F5F5F5",
-			"50": "#fafafa"
+			"800": {
+				"value": "#212121"
+			},
+			"700": {
+				"value": "#454545"
+			},
+			"600": {
+				"value": "#505050"
+			},
+			"500": {
+				"value": "#757575"
+			},
+			"400": {
+				"value": "#9E9E9E"
+			},
+			"300": {
+				"value": "#C4C4C4"
+			},
+			"200": {
+				"value": "#E0E0E0"
+			},
+			"100": {
+				"value": "#F5F5F5"
+			},
+			"50": {
+				"value": "#fafafa"
+			}
 		},
 		"brand": {
-			"1000": "#19653E",
-			"950": "#1B6E43",
-			"900": "#1D7748",
-			"800": "#228752",
-			"700": "#26985D",
-			"650": "#28A062",
-			"DEFAULT": "#2AA967",
-			"550": "#35AD6F",
-			"500": "#4AB67E",
-			"400": "#6AC395",
-			"300": "#95D4B3",
-			"200": "#BFE5D1",
-			"100": "#EAF6F0",
-			"50": "#F4FBF7"
+			"1000": {
+				"value": "#19653E"
+			},
+			"950": {
+				"value": "#1B6E43"
+			},
+			"900": {
+				"value": "#1D7748"
+			},
+			"800": {
+				"value": "#228752"
+			},
+			"700": {
+				"value": "#26985D"
+			},
+			"650": {
+				"value": "#28A062"
+			},
+			"DEFAULT": {
+				"value": "#2AA967",
+				"description": "Kiva's primary brand color"
+			},
+			"550": {
+				"value": "#35AD6F"
+			},
+			"500": {
+				"value": "#4AB67E"
+			},
+			"400": {
+				"value": "#6AC395"
+			},
+			"300": {
+				"value": "#95D4B3"
+			},
+			"200": {
+				"value": "#BFE5D1"
+			},
+			"100": {
+				"value": "#EAF6F0"
+			},
+			"50": {
+				"value": "#F4FBF7"
+			}
 		},
 		"theme": {
 			"DEFAULT": {
 				"text": {
-					"primary": "#212121",
-					"primary-inverse": "#F5F5F5",
-					"secondary": "#757575",
-					"tertiary": "#9E9E9E",
-					"action": "#2B7C5F",
-					"action-highlight": "#277056",
-					"danger": "#E42A2A",
-					"danger-highlight": "#CE2626"
+					"primary": {
+						"value": "#212121"
+					},
+					"primary-inverse": {
+						"value": "#F5F5F5"
+					},
+					"secondary": {
+						"value": "#757575"
+					},
+					"tertiary": {
+						"value": "#9E9E9E"
+					},
+					"action": {
+						"value": "#2B7C5F"
+					},
+					"action-highlight": {
+						"value": "#277056"
+					},
+					"danger": {
+						"value": "#E42A2A"
+					},
+					"danger-highlight": {
+						"value": "#CE2626"
+					}
 				},
 				"background": {
-					"primary": "#FFFFFF",
-					"primary-inverse": "#000000",
-					"secondary": "#F5F5F5",
-					"tertiary": "#E0E0E0",
-					"action": "#2B7C5F",
-					"action-highlight": "#277056",
-					"danger": "#E42A2A",
-					"danger-highlight": "#CE2626",
-					"caution": "#FEE16E"
+					"primary": {
+						"value": "#FFFFFF"
+					},
+					"primary-inverse": {
+						"value": "#000000"
+					},
+					"secondary": {
+						"value": "#F5F5F5"
+					},
+					"tertiary": {
+						"value": "#E0E0E0"
+					},
+					"action": {
+						"value": "#2B7C5F"
+					},
+					"action-highlight": {
+						"value": "#277056"
+					},
+					"danger": {
+						"value": "#E42A2A"
+					},
+					"danger-highlight": {
+						"value": "#CE2626"
+					},
+					"caution": {
+						"value": "#FEE16E"
+					}
 				},
 				"border": {
-					"primary": "#212121",
-					"primary-inverse": "#FFFFFF",
-					"secondary": "#757575",
-					"tertiary": "#C4C4C4",
-					"action": "#2B7C5F",
-					"action-highlight": "#277056",
-					"danger": "#E42A2A",
-					"danger-highlight": "#CE2626"
+					"primary": {
+						"value": "#212121"
+					},
+					"primary-inverse": {
+						"value": "#FFFFFF"
+					},
+					"secondary": {
+						"value": "#757575"
+					},
+					"tertiary": {
+						"value": "#C4C4C4"
+					},
+					"action": {
+						"value": "#2B7C5F"
+					},
+					"action-highlight": {
+						"value": "#277056"
+					},
+					"danger": {
+						"value": "#E42A2A"
+					},
+					"danger-highlight": {
+						"value": "#CE2626"
+					}
 				}
 			},
 			"dark": {
 				"text": {
-					"primary": "#F5F5F5",
-					"primary-inverse": "#212121",
-					"secondary": "#9E9E9E",
-					"tertiary": "#757575",
-					"action": "#4AB67E",
-					"action-highlight": "#6AC395",
-					"danger": "#E42A2A",
-					"danger-highlight": "#CE2626"
+					"primary": {
+						"value": "#F5F5F5"
+					},
+					"primary-inverse": {
+						"value": "#212121"
+					},
+					"secondary": {
+						"value": "#9E9E9E"
+					},
+					"tertiary": {
+						"value": "#757575"
+					},
+					"action": {
+						"value": "#4AB67E"
+					},
+					"action-highlight": {
+						"value": "#6AC395"
+					},
+					"danger": {
+						"value": "#E42A2A"
+					},
+					"danger-highlight": {
+						"value": "#CE2626"
+					}
 				},
 				"background": {
-					"primary": "#000000",
-					"primary-inverse": "#F5F5F5",
-					"secondary": "#212121",
-					"tertiary": "#454545",
-					"action": "#4AB67E",
-					"action-highlight": "#6AC395",
-					"danger": "#E42A2A",
-					"danger-highlight": "#CE2626",
-					"caution": "#FEE16E"
+					"primary": {
+						"value": "#000000"
+					},
+					"primary-inverse": {
+						"value": "#F5F5F5"
+					},
+					"secondary": {
+						"value": "#212121"
+					},
+					"tertiary": {
+						"value": "#454545"
+					},
+					"action": {
+						"value": "#4AB67E"
+					},
+					"action-highlight": {
+						"value": "#6AC395"
+					},
+					"danger": {
+						"value": "#E42A2A"
+					},
+					"danger-highlight": {
+						"value": "#CE2626"
+					},
+					"caution": {
+						"value": "#FEE16E"
+					}
 				},
 				"border": {
-					"primary": "#F5F5F5",
-					"primary-inverse": "#212121",
-					"secondary": "#9E9E9E",
-					"tertiary": "#757575",
-					"action": "#4AB67E",
-					"action-highlight": "#6AC395",
-					"danger": "#E42A2A",
-					"danger-highlight": "#CE2626"
+					"primary": {
+						"value": "#F5F5F5"
+					},
+					"primary-inverse": {
+						"value": "#212121"
+					},
+					"secondary": {
+						"value": "#9E9E9E"
+					},
+					"tertiary": {
+						"value": "#757575"
+					},
+					"action": {
+						"value": "#4AB67E"
+					},
+					"action-highlight": {
+						"value": "#6AC395"
+					},
+					"danger": {
+						"value": "#E42A2A"
+					},
+					"danger-highlight": {
+						"value": "#CE2626"
+					}
 				}
 			},
 			"mint": {
 				"text": {
-					"secondary": "#228752",
-					"tertiary": "#28A062"
+					"secondary": {
+						"value": "#228752"
+					},
+					"tertiary": {
+						"value": "#28A062"
+					}
 				},
 				"background": {
-					"primary": "#95D4B3"
+					"primary": {
+						"value": "#95D4B3"
+					}
 				},
 				"border": {
-					"tertiary": "#4AB67E"
+					"tertiary": {
+						"value": "#4AB67E"
+					}
 				}
 			},
 			"dark-green": {
 				"text": {
-					"primary": "#F5F5F5",
-					"primary-inverse": "#212121",
-					"secondary": "#9E9E9E"
+					"primary": {
+						"value": "#F5F5F5"
+					},
+					"primary-inverse": {
+						"value": "#212121"
+					},
+					"secondary": {
+						"value": "#9E9E9E"
+					}
 				},
 				"background": {
-					"primary": "#2AA967",
-					"primary-inverse": "#F5F5F5",
-					"secondary": "#228752"
+					"primary": {
+						"value": "#2AA967"
+					},
+					"primary-inverse": {
+						"value": "#F5F5F5"
+					},
+					"secondary": {
+						"value": "#228752"
+					}
 				}
 			}
 		}
 	},
 	"space": {
-		"0.5": 4,
-		"1": 8,
-		"1.5": 12,
-		"2": 16,
-		"2.5": 20,
-		"3": 24,
-		"3.5": 28,
-		"4": 32,
-		"4.5": 36,
-		"5": 40,
-		"6": 48,
-		"7": 56,
-		"8": 64,
-		"9": 72,
-		"10": 80,
-		"11": 88,
-		"12": 96,
-		"13": 104,
-		"14": 112,
-		"15": 120,
-		"16": 128
+		"0.5": {
+			"value": 4
+		},
+		"1": {
+			"value": 8
+		},
+		"1.5": {
+			"value": 12
+		},
+		"2": {
+			"value": 16
+		},
+		"2.5": {
+			"value": 20
+		},
+		"3": {
+			"value": 24
+		},
+		"3.5": {
+			"value": 28
+		},
+		"4": {
+			"value": 32
+		},
+		"4.5": {
+			"value": 36
+		},
+		"5": {
+			"value": 40
+		},
+		"6": {
+			"value": 48
+		},
+		"7": {
+			"value": 56
+		},
+		"8": {
+			"value": 64
+		},
+		"9": {
+			"value": 72
+		},
+		"10": {
+			"value": 80
+		},
+		"11": {
+			"value": 88
+		},
+		"12": {
+			"value": 96
+		},
+		"13": {
+			"value": 104
+		},
+		"14": {
+			"value": 112
+		},
+		"15": {
+			"value": 120
+		},
+		"16": {
+			"value": 128
+		}
 	},
 	"fonts": {
-		"sans": "PostGrotesk"
+		"sans": {
+			"value": "PostGrotesk"
+		}
 	},
 	"fontSizes": {
 		"base": {
-			"sm": 16,
-			"md": 16,
-			"lg": 17
+			"sm": {
+				"value": 16
+			},
+			"md": {
+				"value": 16
+			},
+			"lg": {
+				"value": 17
+			}
 		},
 		"jumbo": {
-			"sm": 64,
-			"md": 96,
-			"lg": 112
+			"sm": {
+				"value": 64
+			},
+			"md": {
+				"value": 96
+			},
+			"lg": {
+				"value": 112
+			}
 		},
 		"small": {
-			"sm": 13,
-			"md": 13,
-			"lg": 14
+			"sm": {
+				"value": 13
+			},
+			"md": {
+				"value": 13
+			},
+			"lg": {
+				"value": 14
+			}
 		},
 		"h1": {
-			"sm": 40,
-			"md": 50,
-			"lg": 54
+			"sm": {
+				"value": 40
+			},
+			"md": {
+				"value": 50
+			},
+			"lg": {
+				"value": 54
+			}
 		},
 		"h2": {
-			"sm": 24,
-			"md": 28,
-			"lg": 32
+			"sm": {
+				"value": 24
+			},
+			"md": {
+				"value": 28
+			},
+			"lg": {
+				"value": 32
+			}
 		},
 		"h3": {
-			"sm": 20,
-			"md": 22,
-			"lg": 24
+			"sm": {
+				"value": 20
+			},
+			"md": {
+				"value": 22
+			},
+			"lg": {
+				"value": 24
+			}
 		},
 		"h4": {
-			"sm": 12,
-			"md": 14,
-			"lg": 14
+			"sm": {
+				"value": 12
+			},
+			"md": {
+				"value": 14
+			},
+			"lg": {
+				"value": 14
+			}
 		},
 		"subhead": {
-			"sm": 20,
-			"md": 22,
-			"lg": 24
+			"sm": {
+				"value": 20
+			},
+			"md": {
+				"value": 22
+			},
+			"lg": {
+				"value": 24
+			}
 		}
 	},
 	"fontWeights": {
-		"book": 300,
-		"medium": 400
+		"book": {
+			"value": 300
+		},
+		"medium": {
+			"value": 400
+		}
 	},
 	"lineHeights": {
-		"tight": 1.25,
-		"normal": 1.5
+		"tight": {
+			"value": 1.25
+		},
+		"normal": {
+			"value": 1.5
+		}
 	},
 	"letterSpacings": {
-		"normal": 0,
-		"-0.3": -0.3,
-		"-0.5": -0.5,
-		"-1": -1,
-		"-2": -2
+		"normal": {
+			"value": 0
+		},
+		"-0.3": {
+			"value": -0.3
+		},
+		"-0.5": {
+			"value": -0.5
+		},
+		"-1": {
+			"value": -1
+		},
+		"-2": {
+			"value": -2
+		}
 	},
 	"breakpoints": {
-		"md": 734,
-		"lg": 1024,
-		"xl": 1440
+		"md": {
+			"value": 734
+		},
+		"lg": {
+			"value": 1024
+		},
+		"xl": {
+			"value": 1440
+		}
 	},
 	"borderWidths": {
-		"default": 1
+		"default": {
+			"value": 1
+		}
 	},
 	"zIndices": {
-		"hide": -1,
-		"base": 0,
-		"1": 1,
-		"2": 2,
-		"3": 3,
-		"4": 4,
-		"5": 5,
-		"docked": 10,
-		"dropdown": 1000,
-		"sticky": 1100,
-		"banner": 1200,
-		"overlay": 1300,
-		"modal": 1400,
-		"popover": 1500,
-		"skipLink": 1600,
-		"toast": 1700,
-		"tooltip": 1800,
-		"troposphere": 2000,
-		"stratosphere": 3000
+		"hide": {
+			"value": -1
+		},
+		"base": {
+			"value": 0
+		},
+		"1": {
+			"value": 1
+		},
+		"2": {
+			"value": 2
+		},
+		"3": {
+			"value": 3
+		},
+		"4": {
+			"value": 4
+		},
+		"5": {
+			"value": 5
+		},
+		"docked": {
+			"value": 10
+		},
+		"dropdown": {
+			"value": 1000
+		},
+		"sticky": {
+			"value": 1100
+		},
+		"banner": {
+			"value": 1200
+		},
+		"overlay": {
+			"value": 1300
+		},
+		"modal": {
+			"value": 1400
+		},
+		"popover": {
+			"value": 1500
+		},
+		"skipLink": {
+			"value": 1600
+		},
+		"toast": {
+			"value": 1700
+		},
+		"tooltip": {
+			"value": 1800
+		},
+		"troposphere": {
+			"value": 2000
+		},
+		"stratosphere": {
+			"value": 3000
+		}
 	},
 	"shadows": {},
 	"radii": {
-		"sm": 4,
-		"default": 14,
-		"lg": 40
+		"sm": {
+			"value": 4
+		},
+		"default": {
+			"value": 14
+		},
+		"lg": {
+			"value": 40
+		}
 	},
 	"opacity": {
-		"default": 1,
-		"low": 0.3
+		"default": {
+			"value": 1
+		},
+		"low": {
+			"value": 0.3
+		}
 	}
 }