From 0bb75ef88ec6aaf4d51e50447df570473b36cd97 Mon Sep 17 00:00:00 2001
From: Jonathan Berger <drskullster@pm.me>
Date: Fri, 1 Mar 2024 16:07:09 +0100
Subject: [PATCH] Add typography tokens

Change-type: minor
---
 config.json5                      |   20 +-
 scripts/transform.ts              |   43 +-
 tokens/design-tokens.json         | 2270 +++++++++++++++++++----------
 tokens/typography-shorthands.json |   60 +
 4 files changed, 1644 insertions(+), 749 deletions(-)
 create mode 100644 tokens/typography-shorthands.json

diff --git a/config.json5 b/config.json5
index 8653b79..cb05ea2 100644
--- a/config.json5
+++ b/config.json5
@@ -2,8 +2,12 @@
 	source: ['tokens/**/*.json'],
 	platforms: {
 		css: {
-			transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
-			transformGroup: 'css',
+			transforms: [
+				'attribute/cti',
+				'name/cti/kebab',
+				'color/css',
+				'custom/pxToRem',
+			],
 			buildPath: 'build/css/',
 			options: {
 				outputReferences: true,
@@ -11,20 +15,29 @@
 			files: [
 				{
 					destination: 'tokens.css',
+					filter: 'remove-useless-tokens',
 					format: 'css/variables',
 				},
 			],
 		},
 		js: {
-			transforms: ['attribute/cti', 'name/cti/pascal', 'size/rem', 'color/css'],
+			transforms: [
+				'attribute/cti',
+				'name/cti/pascal',
+				'size/rem',
+				'color/css',
+				'custom/pxToRem',
+			],
 			buildPath: 'build/js/',
 			files: [
 				{
 					destination: 'tokens.js',
+					filter: 'remove-useless-tokens',
 					format: 'javascript/esm',
 				},
 				{
 					destination: 'tokens.d.ts',
+					filter: 'remove-useless-tokens',
 					format: 'typescript/esm-declarations',
 				},
 			],
@@ -35,6 +48,7 @@
 			files: [
 				{
 					destination: 'tokens.json',
+					filter: 'remove-useless-tokens',
 					format: 'json/flat-with-references',
 				},
 			],
diff --git a/scripts/transform.ts b/scripts/transform.ts
index efdbcfe..02de110 100644
--- a/scripts/transform.ts
+++ b/scripts/transform.ts
@@ -11,6 +11,18 @@ import {
 } from 'style-dictionary';
 const { fileHeader, getTypeScriptType } = StyleDictionary.formatHelpers;
 
+const USELESS_TOKENS = [
+	'textDecoration',
+	'fontFamily',
+	'fontStyle',
+	'fontStretch',
+	'letterSpacing',
+	'paragraphIndent',
+	'paragraphSpacing',
+];
+
+const BASE_FONT_SIZE = 14;
+
 StyleDictionary.registerFormat({
 	name: 'javascript/esm',
 	formatter: ({ dictionary, file }: { dictionary: Dictionary; file: File }) => {
@@ -56,12 +68,35 @@ StyleDictionary.registerFormat({
 });
 
 StyleDictionary.registerFormat({
-	name: `json/flat-with-references`,
+	name: 'json/flat-with-references',
 	formatter: function ({ dictionary }) {
 		return JSON.stringify(dictionary.allTokens, null, 2);
 	},
 });
 
+StyleDictionary.registerFilter({
+	name: 'remove-useless-tokens',
+	matcher: (token: TransformedToken) => {
+		if (token.attributes.category !== 'typography') {
+			return true;
+		}
+
+		const lastItem = token.path.slice(-1)[0];
+		return !USELESS_TOKENS.includes(lastItem);
+	},
+});
+
+StyleDictionary.registerTransform({
+	name: 'custom/pxToRem',
+	type: 'value',
+	matcher: (token: TransformedToken) =>
+		token.path.slice(-1)[0] === 'fontSize' ||
+		token.path.slice(-1)[0] === 'lineHeight',
+	transformer: (token: TransformedToken) => {
+		return `${pxToBaseSize(token.value)}rem`;
+	},
+});
+
 /**
  * Remove the 'default' path from the tokens and strip the
  * tokens from everything except `value`
@@ -103,4 +138,10 @@ function addTokenToObject(
 	return obj;
 }
 
+function pxToBaseSize(value: number, decimals = 3) {
+	return (value / BASE_FONT_SIZE).toLocaleString(undefined, {
+		maximumFractionDigits: decimals,
+	});
+}
+
 StyleDictionary.buildAllPlatforms();
diff --git a/tokens/design-tokens.json b/tokens/design-tokens.json
index aabd561..fad351e 100644
--- a/tokens/design-tokens.json
+++ b/tokens/design-tokens.json
@@ -1,612 +1,616 @@
 {
-	"color": {
-		"palette": {
-			"neutral": {
-				"50": {
-					"type": "color",
-					"value": "#f9fafbff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#e3ebf1ff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#ccdbe7ff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#b5ccdeff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#9cbcd6ff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#82aed0ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#6d9ec4ff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#507ea2ff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#376080ff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#23445eff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#182e40ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#0a1924ff",
-					"blendMode": "normal"
-				}
-			},
-			"green": {
-				"50": {
-					"type": "color",
-					"value": "#e7f8e7ff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#d4f2d4ff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#c7ecc5ff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#a1e0a0ff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#77d577ff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#54cb56ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#2ac134ff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#26b12bff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#219f1eff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#1c8e0dff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#146e00ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#0e4d00ff",
-					"blendMode": "normal"
-				}
-			},
-			"red": {
-				"50": {
-					"type": "color",
-					"value": "#feebefff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#fddde4ff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#fdced4ff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#f19b9eff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#e87478ff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#f45357ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#fa423eff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#eb373eff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#d82d36ff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#cb262fff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#bc1723ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#8d111aff",
-					"blendMode": "normal"
-				}
-			},
-			"orange": {
-				"50": {
-					"type": "color",
-					"value": "#fff3dfff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#ffeac7ff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#fedfb1ff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#fdca7eff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#fcb54aff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#fca322ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#fc9500ff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#f88900ff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#f27901ff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#ec6902ff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#e34e00ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#b23d00ff",
-					"blendMode": "normal"
-				}
-			},
-			"yellow": {
-				"50": {
-					"type": "color",
-					"value": "#fffde6ff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#fffbd1ff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#fff9c4ff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#fff59dff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#fff176ff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#feee58ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#feeb3bff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#fdd835ff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#fbc02cff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#f9a825ff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#f57f16ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#cd6509ff",
-					"blendMode": "normal"
-				}
-			},
-			"purple": {
-				"50": {
-					"type": "color",
-					"value": "#f2edffff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#e9e0ffff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#ddd3fcff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#c6b6faff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#ae97f7ff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#9a7ef2ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#8767eeff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#7c61e6ff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#6d59dcff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#6151d3ff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#4d45c4ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#38319bff",
-					"blendMode": "normal"
-				}
-			},
-			"blue": {
-				"50": {
-					"type": "color",
-					"value": "#e1f4feff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#c9ebfdff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#b3e3fbff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#81d1f9ff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#50bff5ff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#2db1f3ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#21a4f0ff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#1496e1ff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#1883cdff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#1472b9ff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#0e5196ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#0b3f75ff",
-					"blendMode": "normal"
-				}
-			},
-			"teal": {
-				"50": {
-					"type": "color",
-					"value": "#dbf9f6ff",
-					"blendMode": "normal"
-				},
-				"75": {
-					"type": "color",
-					"value": "#c6f6f1ff",
-					"blendMode": "normal"
-				},
-				"100": {
-					"type": "color",
-					"value": "#adeee8ff",
-					"blendMode": "normal"
-				},
-				"200": {
-					"type": "color",
-					"value": "#7ce1daff",
-					"blendMode": "normal"
-				},
-				"300": {
-					"type": "color",
-					"value": "#49d4ceff",
-					"blendMode": "normal"
-				},
-				"400": {
-					"type": "color",
-					"value": "#2ccac7ff",
-					"blendMode": "normal"
-				},
-				"500": {
-					"type": "color",
-					"value": "#29c1c2ff",
-					"blendMode": "normal"
-				},
-				"600": {
-					"type": "color",
-					"value": "#25b0b0ff",
-					"blendMode": "normal"
-				},
-				"700": {
-					"type": "color",
-					"value": "#1f9b98ff",
-					"blendMode": "normal"
-				},
-				"800": {
-					"type": "color",
-					"value": "#1a8680ff",
-					"blendMode": "normal"
-				},
-				"900": {
-					"type": "color",
-					"value": "#106359ff",
-					"blendMode": "normal"
-				},
-				"1000": {
-					"type": "color",
-					"value": "#0b423bff",
-					"blendMode": "normal"
-				}
-			}
-		},
-		"text": {
-			"_": {
-				"type": "color",
-				"value": "{color.palette.neutral.800}"
-			},
-			"subtle": {
-				"type": "color",
-				"value": "{color.palette.neutral.600}"
-			},
-			"subtlest": {
-				"type": "color",
-				"value": "{color.palette.neutral.100}"
-			},
-			"inverse": {
-				"type": "color",
-				"value": "#ffffffff",
-				"blendMode": "normal"
-			},
-			"accent": {
-				"type": "color",
-				"value": "{color.palette.blue.600}"
-			},
-			"info": {
-				"type": "color",
-				"value": "{color.palette.blue.1000}"
-			},
-			"success": {
-				"type": "color",
-				"value": "{color.palette.green.1000}"
-			},
-			"warning": {
-				"type": "color",
-				"value": "{color.palette.orange.1000}"
-			},
-			"danger": {
-				"type": "color",
-				"value": "{color.palette.red.1000}"
-			}
-		},
-		"bg": {
-			"_": {
-				"type": "color",
-				"value": "{color.palette.neutral.50}"
-			},
-			"subtle": {
-				"type": "color",
-				"value": "{color.palette.neutral.75}"
-			},
-			"subtlest": {
-				"type": "color",
-				"value": "#ffffffff",
-				"blendMode": "normal"
-			},
-			"strong": {
-				"type": "color",
-				"value": "{color.palette.neutral.800}"
-			},
-			"strongest": {
-				"type": "color",
-				"value": "{color.palette.neutral.900}"
-			},
-			"accent": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.blue.50}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.blue.600}"
-				}
-			},
-			"info": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.blue.50}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.blue.800}"
-				}
-			},
-			"success": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.green.50}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.green.800}"
-				}
-			},
-			"warning": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.orange.50}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.orange.900}"
-				}
-			},
-			"danger": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.red.50}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.red.800}"
+  "color": {
+    "palette": {
+      "neutral": {
+        "50": {
+          "type": "color",
+          "value": "#f9fafbff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#e3ebf1ff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#ccdbe7ff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#b5ccdeff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#9cbcd6ff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#82aed0ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#6d9ec4ff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#507ea2ff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#376080ff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#23445eff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#182e40ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#0a1924ff",
+          "blendMode": "normal"
+        }
+      },
+      "green": {
+        "50": {
+          "type": "color",
+          "value": "#e7f8e7ff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#d4f2d4ff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#c7ecc5ff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#a1e0a0ff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#77d577ff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#54cb56ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#2ac134ff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#26b12bff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#219f1eff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#1c8e0dff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#146e00ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#0e4d00ff",
+          "blendMode": "normal"
+        }
+      },
+      "red": {
+        "50": {
+          "type": "color",
+          "value": "#feebefff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#fddde4ff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#fdced4ff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#f19b9eff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#e87478ff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#f45357ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#fa423eff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#eb373eff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#d82d36ff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#cb262fff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#bc1723ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#8d111aff",
+          "blendMode": "normal"
+        }
+      },
+      "orange": {
+        "50": {
+          "type": "color",
+          "value": "#fff3dfff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#ffeac7ff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#fedfb1ff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#fdca7eff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#fcb54aff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#fca322ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#fc9500ff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#f88900ff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#f27901ff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#ec6902ff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#e34e00ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#b23d00ff",
+          "blendMode": "normal"
+        }
+      },
+      "yellow": {
+        "50": {
+          "type": "color",
+          "value": "#fffde6ff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#fffbd1ff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#fff9c4ff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#fff59dff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#fff176ff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#feee58ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#feeb3bff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#fdd835ff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#fbc02cff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#f9a825ff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#f57f16ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#cd6509ff",
+          "blendMode": "normal"
+        }
+      },
+      "purple": {
+        "50": {
+          "type": "color",
+          "value": "#f2edffff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#e9e0ffff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#ddd3fcff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#c6b6faff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#ae97f7ff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#9a7ef2ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#8767eeff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#7c61e6ff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#6d59dcff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#6151d3ff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#4d45c4ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#38319bff",
+          "blendMode": "normal"
+        }
+      },
+      "blue": {
+        "50": {
+          "type": "color",
+          "value": "#e1f4feff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#c9ebfdff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#b3e3fbff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#81d1f9ff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#50bff5ff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#2db1f3ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#21a4f0ff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#1496e1ff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#1883cdff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#1472b9ff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#0e5196ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#0b3f75ff",
+          "blendMode": "normal"
+        }
+      },
+      "teal": {
+        "50": {
+          "type": "color",
+          "value": "#dbf9f6ff",
+          "blendMode": "normal"
+        },
+        "75": {
+          "type": "color",
+          "value": "#c6f6f1ff",
+          "blendMode": "normal"
+        },
+        "100": {
+          "type": "color",
+          "value": "#adeee8ff",
+          "blendMode": "normal"
+        },
+        "200": {
+          "type": "color",
+          "value": "#7ce1daff",
+          "blendMode": "normal"
+        },
+        "300": {
+          "type": "color",
+          "value": "#49d4ceff",
+          "blendMode": "normal"
+        },
+        "400": {
+          "type": "color",
+          "value": "#2ccac7ff",
+          "blendMode": "normal"
+        },
+        "500": {
+          "type": "color",
+          "value": "#29c1c2ff",
+          "blendMode": "normal"
+        },
+        "600": {
+          "type": "color",
+          "value": "#25b0b0ff",
+          "blendMode": "normal"
+        },
+        "700": {
+          "type": "color",
+          "value": "#1f9b98ff",
+          "blendMode": "normal"
+        },
+        "800": {
+          "type": "color",
+          "value": "#1a8680ff",
+          "blendMode": "normal"
+        },
+        "900": {
+          "type": "color",
+          "value": "#106359ff",
+          "blendMode": "normal"
+        },
+        "1000": {
+          "type": "color",
+          "value": "#0b423bff",
+          "blendMode": "normal"
+        }
+      }
+    },
+    "text": {
+      "_": {
+        "type": "color",
+        "value": "{color.palette.neutral.800}"
+      },
+      "subtle": {
+        "type": "color",
+        "value": "{color.palette.neutral.600}"
+      },
+      "subtlest": {
+        "type": "color",
+        "value": "{color.palette.neutral.100}"
+      },
+      "inverse": {
+        "type": "color",
+        "value": "#ffffffff",
+        "blendMode": "normal"
+      },
+      "accent": {
+        "type": "color",
+        "value": "{color.palette.blue.600}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.palette.blue.1000}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.palette.green.1000}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.palette.orange.1000}"
+      },
+      "danger": {
+        "type": "color",
+        "value": "{color.palette.red.1000}"
+      },
+      "code": {
+        "type": "color",
+        "value": "{color.palette.red.1000}"
+      }
+    },
+    "bg": {
+      "_": {
+        "type": "color",
+        "value": "{color.palette.neutral.50}"
+      },
+      "subtle": {
+        "type": "color",
+        "value": "{color.palette.neutral.75}"
+      },
+      "subtlest": {
+        "type": "color",
+        "value": "#ffffffff",
+        "blendMode": "normal"
+      },
+      "strong": {
+        "type": "color",
+        "value": "{color.palette.neutral.800}"
+      },
+      "strongest": {
+        "type": "color",
+        "value": "{color.palette.neutral.900}"
+      },
+      "accent": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.blue.50}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.blue.600}"
+        }
+      },
+      "info": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.blue.50}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.blue.800}"
+        }
+      },
+      "success": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.green.50}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.green.800}"
+        }
+      },
+      "warning": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.orange.50}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.orange.900}"
+        }
+      },
+      "danger": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.red.50}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.red.800}"
 				}
 			},
 			"overlay": {
@@ -619,141 +623,917 @@
 					"type": "color",
 					"value": "#0a1924cc",
 					"blendMode": "normal"
-				}
-			}
-		},
-		"border": {
-			"_": {
-				"type": "color",
-				"value": "{color.palette.neutral.200}"
-			},
-			"subtle": {
-				"type": "color",
-				"value": "{color.palette.neutral.75}"
-			},
-			"strong": {
-				"type": "color",
-				"value": "{color.palette.neutral.600}"
-			},
-			"accent": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.blue.300}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.blue.600}"
-				}
-			},
-			"info": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.blue.200}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.blue.600}"
-				}
-			},
-			"success": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.green.200}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.green.600}"
-				}
-			},
-			"warning": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.orange.200}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.orange.600}"
-				}
-			},
-			"danger": {
-				"_": {
-					"type": "color",
-					"value": "{color.palette.red.200}"
-				},
-				"strong": {
-					"type": "color",
-					"value": "{color.palette.red.600}"
-				}
-			}
-		},
-		"icon": {
-			"_": {
-				"type": "color",
-				"value": "{color.palette.neutral.700}"
-			},
-			"subtle": {
-				"type": "color",
-				"value": "{color.palette.neutral.500}"
-			},
-			"subtlest": {
-				"type": "color",
-				"value": "{color.palette.neutral.300}"
-			},
-			"inverse": {
-				"type": "color",
-				"value": "#ffffffff",
-				"blendMode": "normal"
-			},
-			"accent": {
-				"type": "color",
-				"value": "{color.palette.blue.700}"
-			},
-			"info": {
-				"type": "color",
-				"value": "{color.palette.blue.700}"
-			},
-			"success": {
-				"type": "color",
-				"value": "{color.palette.green.700}"
-			},
-			"warning": {
-				"type": "color",
-				"value": "{color.palette.orange.700}"
-			},
-			"danger": {
-				"type": "color",
-				"value": "{color.palette.red.700}"
-			}
-		},
-		"status": {
-			"success": {
-				"type": "color",
-				"value": "{color.palette.green.500}"
-			},
-			"info": {
-				"type": "color",
-				"value": "{color.palette.blue.500}"
-			},
-			"warning": {
-				"type": "color",
-				"value": "{color.palette.orange.500}"
-			},
-			"danger": {
-				"type": "color",
-				"value": "{color.palette.red.500}"
-			},
-			"purple": {
-				"type": "color",
-				"value": "{color.palette.purple.500}"
-			},
-			"teal": {
-				"type": "color",
-				"value": "{color.palette.teal.500}"
-			},
-			"inactive": {
-				"type": "color",
-				"value": "{color.palette.neutral.75}"
-			}
-		}
-	}
+        }
+      },
+      "code": {
+        "type": "color",
+        "value": "{color.palette.red.50}"
+      }
+    },
+    "border": {
+      "_": {
+        "type": "color",
+        "value": "{color.palette.neutral.200}"
+      },
+      "subtle": {
+        "type": "color",
+        "value": "{color.palette.neutral.75}"
+      },
+      "strong": {
+        "type": "color",
+        "value": "{color.palette.neutral.600}"
+      },
+      "accent": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.blue.300}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.blue.600}"
+        }
+      },
+      "info": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.blue.200}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.blue.600}"
+        }
+      },
+      "success": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.green.200}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.green.600}"
+        }
+      },
+      "warning": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.orange.200}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.orange.600}"
+        }
+      },
+      "danger": {
+        "_": {
+          "type": "color",
+          "value": "{color.palette.red.200}"
+        },
+        "strong": {
+          "type": "color",
+          "value": "{color.palette.red.600}"
+        }
+      }
+    },
+    "icon": {
+      "_": {
+        "type": "color",
+        "value": "{color.palette.neutral.700}"
+      },
+      "subtle": {
+        "type": "color",
+        "value": "{color.palette.neutral.500}"
+      },
+      "subtlest": {
+        "type": "color",
+        "value": "{color.palette.neutral.300}"
+      },
+      "inverse": {
+        "type": "color",
+        "value": "#ffffffff",
+        "blendMode": "normal"
+      },
+      "accent": {
+        "type": "color",
+        "value": "{color.palette.blue.700}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.palette.blue.700}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.palette.green.700}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.palette.orange.700}"
+      },
+      "danger": {
+        "type": "color",
+        "value": "{color.palette.red.700}"
+      }
+    },
+    "status": {
+      "success": {
+        "type": "color",
+        "value": "{color.palette.green.500}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.palette.blue.500}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.palette.orange.500}"
+      },
+      "danger": {
+        "type": "color",
+        "value": "{color.palette.red.500}"
+      },
+      "purple": {
+        "type": "color",
+        "value": "{color.palette.purple.500}"
+      },
+      "teal": {
+        "type": "color",
+        "value": "{color.palette.teal.500}"
+      },
+      "inactive": {
+        "type": "color",
+        "value": "{color.palette.neutral.75}"
+      }
+    }
+  },
+  "typography": {
+    "weight": {
+      "_": {
+        "type": "dimension",
+        "value": 400
+      },
+      "strong": {
+        "type": "dimension",
+        "value": 500
+      }
+    },
+    "fontfamily": {
+      "body": {
+        "type": "string",
+        "value": "\"Source Sans Pro\",Helvetica,sans-serif"
+      },
+      "code": {
+        "type": "string",
+        "value": "\"Ubuntu Mono\", \"Courier New\", monospace"
+      }
+    },
+    "display": {
+      "fontSize": {
+        "type": "dimension",
+        "value": 40
+      },
+      "textDecoration": {
+        "type": "string",
+        "value": "none"
+      },
+      "fontFamily": {
+        "type": "string",
+        "value": "Source Sans 3"
+      },
+      "fontWeight": {
+        "type": "number",
+        "value": 400
+      },
+      "fontStyle": {
+        "type": "string",
+        "value": "normal"
+      },
+      "fontStretch": {
+        "type": "string",
+        "value": "normal"
+      },
+      "letterSpacing": {
+        "type": "dimension",
+        "value": 0
+      },
+      "lineHeight": {
+        "type": "dimension",
+        "value": 48
+      },
+      "paragraphIndent": {
+        "type": "dimension",
+        "value": 0
+      },
+      "paragraphSpacing": {
+        "type": "dimension",
+        "value": 0
+      },
+      "textCase": {
+        "type": "string",
+        "value": "none"
+      }
+    },
+    "overline": {
+      "fontSize": {
+        "type": "dimension",
+        "value": 11
+      },
+      "textDecoration": {
+        "type": "string",
+        "value": "none"
+      },
+      "fontFamily": {
+        "type": "string",
+        "value": "Source Sans 3"
+      },
+      "fontWeight": {
+        "type": "number",
+        "value": 600
+      },
+      "fontStyle": {
+        "type": "string",
+        "value": "normal"
+      },
+      "fontStretch": {
+        "type": "string",
+        "value": "normal"
+      },
+      "letterSpacing": {
+        "type": "dimension",
+        "value": 0
+      },
+      "lineHeight": {
+        "type": "dimension",
+        "value": 16.5
+      },
+      "paragraphIndent": {
+        "type": "dimension",
+        "value": 0
+      },
+      "paragraphSpacing": {
+        "type": "dimension",
+        "value": 0
+      },
+      "textCase": {
+        "type": "string",
+        "value": "uppercase"
+      }
+    },
+    "title": {
+      "md": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 24
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Source Sans 3"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 31.2
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      },
+      "lg": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 34
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Source Sans 3"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 44.2
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      },
+      "sm": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 18
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Source Sans 3"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 25.2
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      }
+    },
+    "body": {
+      "lg": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 16
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Source Sans 3"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 24
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      },
+      "md": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 14
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Source Sans 3"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 21
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      },
+      "sm": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 12
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Source Sans 3"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 18
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      }
+    },
+    "code": {
+      "lg": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 16
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Ubuntu Mono"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 16
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 8
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      },
+      "md": {
+        "fontSize": {
+          "type": "dimension",
+          "value": 14
+        },
+        "textDecoration": {
+          "type": "string",
+          "value": "none"
+        },
+        "fontFamily": {
+          "type": "string",
+          "value": "Ubuntu Mono"
+        },
+        "fontWeight": {
+          "type": "number",
+          "value": 400
+        },
+        "fontStyle": {
+          "type": "string",
+          "value": "normal"
+        },
+        "fontStretch": {
+          "type": "string",
+          "value": "normal"
+        },
+        "letterSpacing": {
+          "type": "dimension",
+          "value": 0
+        },
+        "lineHeight": {
+          "type": "dimension",
+          "value": 14
+        },
+        "paragraphIndent": {
+          "type": "dimension",
+          "value": 0
+        },
+        "paragraphSpacing": {
+          "type": "dimension",
+          "value": 8
+        },
+        "textCase": {
+          "type": "string",
+          "value": "none"
+        }
+      }
+    },
+    "icon": {
+      "lg": {
+        "regular": {
+          "fontSize": {
+            "type": "dimension",
+            "value": 14
+          },
+          "textDecoration": {
+            "type": "string",
+            "value": "none"
+          },
+          "fontFamily": {
+            "type": "string",
+            "value": "Font Awesome 6 Pro"
+          },
+          "fontWeight": {
+            "type": "number",
+            "value": 400
+          },
+          "fontStyle": {
+            "type": "string",
+            "value": "normal"
+          },
+          "fontStretch": {
+            "type": "string",
+            "value": "normal"
+          },
+          "letterSpacing": {
+            "type": "dimension",
+            "value": 0
+          },
+          "lineHeight": {
+            "type": "dimension",
+            "value": 24
+          },
+          "paragraphIndent": {
+            "type": "dimension",
+            "value": 0
+          },
+          "paragraphSpacing": {
+            "type": "dimension",
+            "value": 8
+          },
+          "textCase": {
+            "type": "string",
+            "value": "none"
+          }
+        },
+        "solid": {
+          "fontSize": {
+            "type": "dimension",
+            "value": 14
+          },
+          "textDecoration": {
+            "type": "string",
+            "value": "none"
+          },
+          "fontFamily": {
+            "type": "string",
+            "value": "Font Awesome 6 Pro"
+          },
+          "fontWeight": {
+            "type": "number",
+            "value": 400
+          },
+          "fontStyle": {
+            "type": "string",
+            "value": "normal"
+          },
+          "fontStretch": {
+            "type": "string",
+            "value": "normal"
+          },
+          "letterSpacing": {
+            "type": "dimension",
+            "value": 0
+          },
+          "lineHeight": {
+            "type": "dimension",
+            "value": 24
+          },
+          "paragraphIndent": {
+            "type": "dimension",
+            "value": 0
+          },
+          "paragraphSpacing": {
+            "type": "dimension",
+            "value": 8
+          },
+          "textCase": {
+            "type": "string",
+            "value": "none"
+          }
+        }
+      },
+      "md": {
+        "regular": {
+          "fontSize": {
+            "type": "dimension",
+            "value": 12
+          },
+          "textDecoration": {
+            "type": "string",
+            "value": "none"
+          },
+          "fontFamily": {
+            "type": "string",
+            "value": "Font Awesome 6 Pro"
+          },
+          "fontWeight": {
+            "type": "number",
+            "value": 400
+          },
+          "fontStyle": {
+            "type": "string",
+            "value": "normal"
+          },
+          "fontStretch": {
+            "type": "string",
+            "value": "normal"
+          },
+          "letterSpacing": {
+            "type": "dimension",
+            "value": 0
+          },
+          "lineHeight": {
+            "type": "dimension",
+            "value": 21
+          },
+          "paragraphIndent": {
+            "type": "dimension",
+            "value": 0
+          },
+          "paragraphSpacing": {
+            "type": "dimension",
+            "value": 8
+          },
+          "textCase": {
+            "type": "string",
+            "value": "none"
+          }
+        },
+        "solid": {
+          "fontSize": {
+            "type": "dimension",
+            "value": 12
+          },
+          "textDecoration": {
+            "type": "string",
+            "value": "none"
+          },
+          "fontFamily": {
+            "type": "string",
+            "value": "Font Awesome 6 Pro"
+          },
+          "fontWeight": {
+            "type": "number",
+            "value": 400
+          },
+          "fontStyle": {
+            "type": "string",
+            "value": "normal"
+          },
+          "fontStretch": {
+            "type": "string",
+            "value": "normal"
+          },
+          "letterSpacing": {
+            "type": "dimension",
+            "value": 0
+          },
+          "lineHeight": {
+            "type": "dimension",
+            "value": 21
+          },
+          "paragraphIndent": {
+            "type": "dimension",
+            "value": 0
+          },
+          "paragraphSpacing": {
+            "type": "dimension",
+            "value": 8
+          },
+          "textCase": {
+            "type": "string",
+            "value": "none"
+          }
+        }
+      },
+      "sm": {
+        "regular": {
+          "fontSize": {
+            "type": "dimension",
+            "value": 10
+          },
+          "textDecoration": {
+            "type": "string",
+            "value": "none"
+          },
+          "fontFamily": {
+            "type": "string",
+            "value": "Font Awesome 6 Pro"
+          },
+          "fontWeight": {
+            "type": "number",
+            "value": 400
+          },
+          "fontStyle": {
+            "type": "string",
+            "value": "normal"
+          },
+          "fontStretch": {
+            "type": "string",
+            "value": "normal"
+          },
+          "letterSpacing": {
+            "type": "dimension",
+            "value": 0
+          },
+          "lineHeight": {
+            "type": "dimension",
+            "value": 18
+          },
+          "paragraphIndent": {
+            "type": "dimension",
+            "value": 0
+          },
+          "paragraphSpacing": {
+            "type": "dimension",
+            "value": 8
+          },
+          "textCase": {
+            "type": "string",
+            "value": "none"
+          }
+        },
+        "solid": {
+          "fontSize": {
+            "type": "dimension",
+            "value": 10
+          },
+          "textDecoration": {
+            "type": "string",
+            "value": "none"
+          },
+          "fontFamily": {
+            "type": "string",
+            "value": "Font Awesome 6 Pro"
+          },
+          "fontWeight": {
+            "type": "number",
+            "value": 400
+          },
+          "fontStyle": {
+            "type": "string",
+            "value": "normal"
+          },
+          "fontStretch": {
+            "type": "string",
+            "value": "normal"
+          },
+          "letterSpacing": {
+            "type": "dimension",
+            "value": 0
+          },
+          "lineHeight": {
+            "type": "dimension",
+            "value": 18
+          },
+          "paragraphIndent": {
+            "type": "dimension",
+            "value": 0
+          },
+          "paragraphSpacing": {
+            "type": "dimension",
+            "value": 8
+          },
+          "textCase": {
+            "type": "string",
+            "value": "none"
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/tokens/typography-shorthands.json b/tokens/typography-shorthands.json
new file mode 100644
index 0000000..2a63f79
--- /dev/null
+++ b/tokens/typography-shorthands.json
@@ -0,0 +1,60 @@
+{
+	"typography": {
+		"display": {
+			"shorthand": {
+				"value": "{typography.display.fontWeight} {typography.display.fontSize}/{typography.display.lineHeight} {typography.fontfamily.body}"
+			}
+		},
+		"title": {
+			"lg": {
+				"shorthand": {
+					"value": "{typography.title.lg.fontWeight} {typography.title.lg.fontSize}/{typography.title.lg.lineHeight} {typography.fontfamily.body}"
+				}
+			},
+			"md": {
+				"shorthand": {
+					"value": "{typography.title.md.fontWeight} {typography.title.md.fontSize}/{typography.title.md.lineHeight} {typography.fontfamily.body}"
+				}
+			},
+			"sm": {
+				"shorthand": {
+					"value": "{typography.title.sm.fontWeight} {typography.title.sm.fontSize}/{typography.title.sm.lineHeight} {typography.fontfamily.body}"
+				}
+			}
+		},
+		"body": {
+			"lg": {
+				"shorthand": {
+					"value": "{typography.body.lg.fontWeight} {typography.body.lg.fontSize}/{typography.body.lg.lineHeight} {typography.fontfamily.body}"
+				}
+			},
+			"md": {
+				"shorthand": {
+					"value": "{typography.body.md.fontWeight} {typography.body.md.fontSize}/{typography.body.md.lineHeight} {typography.fontfamily.body}"
+				}
+			},
+			"sm": {
+				"shorthand": {
+					"value": "{typography.body.sm.fontWeight} {typography.body.sm.fontSize}/{typography.body.sm.lineHeight} {typography.fontfamily.body}"
+				}
+			}
+		},
+		"overline": {
+			"shorthand": {
+				"value": "{typography.overline.fontWeight} {typography.overline.fontSize}/{typography.overline.lineHeight} {typography.fontfamily.body}"
+			}
+		},
+		"code": {
+			"lg": {
+				"shorthand": {
+					"value": "{typography.code.lg.fontWeight} {typography.code.lg.fontSize}/{typography.code.lg.lineHeight} {typography.fontfamily.code}"
+				}
+			},
+			"md": {
+				"shorthand": {
+					"value": "{typography.code.md.fontWeight} {typography.code.md.fontSize}/{typography.code.md.lineHeight} {typography.fontfamily.code}"
+				}
+			}
+		}
+	}
+}