diff --git a/.vscode/settings.json b/.vscode/settings.json
index 33601dc77f..1788b18f10 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -26,5 +26,7 @@
   },
   "eslint.options": {
     "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
-  }
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
diff --git a/packages/fuselage-tokens/.prettierrc b/packages/fuselage-tokens/.prettierrc
index e93d7b8273..98824472ae 100644
--- a/packages/fuselage-tokens/.prettierrc
+++ b/packages/fuselage-tokens/.prettierrc
@@ -4,4 +4,4 @@
   "quoteProps": "consistent",
   "jsxSingleQuote": true,
   "printWidth": 80
-} 
+}
diff --git a/packages/fuselage-tokens/breakpoints.js b/packages/fuselage-tokens/breakpoints.js
index c66cefd4ad..d8cc20ec3c 100644
--- a/packages/fuselage-tokens/breakpoints.js
+++ b/packages/fuselage-tokens/breakpoints.js
@@ -1,27 +1,10 @@
-export default {
-  xs: {
-    minViewportWidth: null,
-    columns: 4,
-    gutterWidth: 16,
-  },
-  sm: {
-    minViewportWidth: 600,
-    columns: 8,
-    gutterWidth: 16,
-  },
-  md: {
-    minViewportWidth: 768,
-    columns: 8,
-    gutterWidth: 24,
-  },
-  lg: {
-    minViewportWidth: 1024,
-    columns: 12,
-    gutterWidth: 24,
-  },
-  xl: {
-    minViewportWidth: 1440,
-    columns: 12,
-    gutterWidth: 24,
-  },
+'use strict';
+module.exports = {
+  xs: { name: 'xs', minViewportWidth: null, columns: 4, gutterWidth: 16 },
+  sm: { name: 'sm', minViewportWidth: 600, columns: 8, gutterWidth: 16 },
+  md: { name: 'md', minViewportWidth: 768, columns: 8, gutterWidth: 24 },
+  lg: { name: 'lg', minViewportWidth: 1024, columns: 12, gutterWidth: 24 },
+  xl: { name: 'xl', minViewportWidth: 1280, columns: 12, gutterWidth: 24 },
+  xxl: { name: 'xxl', minViewportWidth: 1600, columns: 12, gutterWidth: 24 },
+  xxxl: { name: 'xxxl', minViewportWidth: 1920, columns: 12, gutterWidth: 24 },
 };
diff --git a/packages/fuselage-tokens/breakpoints.mjs b/packages/fuselage-tokens/breakpoints.mjs
new file mode 100644
index 0000000000..674792fd08
--- /dev/null
+++ b/packages/fuselage-tokens/breakpoints.mjs
@@ -0,0 +1,9 @@
+export default {
+  xs: { name: 'xs', minViewportWidth: null, columns: 4, gutterWidth: 16 },
+  sm: { name: 'sm', minViewportWidth: 600, columns: 8, gutterWidth: 16 },
+  md: { name: 'md', minViewportWidth: 768, columns: 8, gutterWidth: 24 },
+  lg: { name: 'lg', minViewportWidth: 1024, columns: 12, gutterWidth: 24 },
+  xl: { name: 'xl', minViewportWidth: 1280, columns: 12, gutterWidth: 24 },
+  xxl: { name: 'xxl', minViewportWidth: 1600, columns: 12, gutterWidth: 24 },
+  xxxl: { name: 'xxxl', minViewportWidth: 1920, columns: 12, gutterWidth: 24 },
+};
diff --git a/packages/fuselage-tokens/breakpoints.scss b/packages/fuselage-tokens/breakpoints.scss
index 1e7600366d..8f54bd53af 100644
--- a/packages/fuselage-tokens/breakpoints.scss
+++ b/packages/fuselage-tokens/breakpoints.scss
@@ -1,26 +1,43 @@
 $breakpoints: (
   xs: (
+    name: xs,
     min-viewport-width: null,
     columns: 4,
     gutter-width: 16,
   ),
   sm: (
+    name: sm,
     min-viewport-width: 600,
     columns: 8,
     gutter-width: 16,
   ),
   md: (
+    name: md,
     min-viewport-width: 768,
     columns: 8,
     gutter-width: 24,
   ),
   lg: (
+    name: lg,
     min-viewport-width: 1024,
     columns: 12,
     gutter-width: 24,
   ),
   xl: (
-    min-viewport-width: 1440,
+    name: xl,
+    min-viewport-width: 1280,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xxl: (
+    name: xxl,
+    min-viewport-width: 1600,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xxxl: (
+    name: xxxl,
+    min-viewport-width: 1920,
     columns: 12,
     gutter-width: 24,
   ),
diff --git a/packages/fuselage-tokens/colors.js b/packages/fuselage-tokens/colors.js
index f0dc3390d6..9fd60dbea5 100644
--- a/packages/fuselage-tokens/colors.js
+++ b/packages/fuselage-tokens/colors.js
@@ -1,5 +1,5 @@
-export default {
-  // Neutral
+'use strict';
+module.exports = {
   n100: '#f7f8fa',
   n200: '#f2f3f5',
   n300: '#eeeff1',
@@ -9,8 +9,6 @@ export default {
   n700: '#6c727a',
   n800: '#2f343d',
   n900: '#1f2329',
-
-  // Blues
   b100: '#e8f2ff',
   b200: '#d1ebfe',
   b300: '#76b7fc',
@@ -20,8 +18,6 @@ export default {
   b700: '#10529e',
   b800: '#01336b',
   b900: '#012247',
-
-  // Greens
   g100: '#e5fbf4',
   g200: '#c0f6e4',
   g300: '#96f0d2',
@@ -31,8 +27,6 @@ export default {
   g700: '#19ac7c',
   g800: '#158d65',
   g900: '#106d4f',
-
-  // Reds
   r100: '#fddade',
   r200: '#fbb5be',
   r300: '#f98f9d',
@@ -42,8 +36,6 @@ export default {
   r700: '#b30a20',
   r800: '#8b0719',
   r900: '#630512',
-
-  // Yellows
   y100: '#fff6d6',
   y200: '#ffecad',
   y300: '#ffe383',
@@ -53,8 +45,6 @@ export default {
   y700: '#dfac00',
   y800: '#b68d00',
   y900: '#8e6d00',
-
-  // Purples
   p100: '#f9effc',
   p200: '#edd0f7',
   p300: '#dca0ef',
@@ -64,8 +54,6 @@ export default {
   p700: '#5f1477',
   p800: '#4a105d',
   p900: '#350b42',
-
-  // Oranges
   o100: '#fde8d7',
   o200: '#fad1b0',
   o300: '#f7b27b',
@@ -75,6 +63,5 @@ export default {
   o700: '#bd5a0b',
   o800: '#974809',
   o900: '#713607',
-
   white: '#ffffff',
 };
diff --git a/packages/fuselage-tokens/colors.json b/packages/fuselage-tokens/colors.json
new file mode 100644
index 0000000000..e180d13608
--- /dev/null
+++ b/packages/fuselage-tokens/colors.json
@@ -0,0 +1,66 @@
+{
+  "n100": "#f7f8fa",
+  "n200": "#f2f3f5",
+  "n300": "#eeeff1",
+  "n400": "#e4e7ea",
+  "n500": "#cbced1",
+  "n600": "#9ea2a8",
+  "n700": "#6c727a",
+  "n800": "#2f343d",
+  "n900": "#1f2329",
+  "b100": "#e8f2ff",
+  "b200": "#d1ebfe",
+  "b300": "#76b7fc",
+  "b400": "#549df9",
+  "b500": "#1d74f5",
+  "b600": "#095ad2",
+  "b700": "#10529e",
+  "b800": "#01336b",
+  "b900": "#012247",
+  "g100": "#e5fbf4",
+  "g200": "#c0f6e4",
+  "g300": "#96f0d2",
+  "g400": "#6ce9c0",
+  "g500": "#2de0a5",
+  "g600": "#1ecb92",
+  "g700": "#19ac7c",
+  "g800": "#158d65",
+  "g900": "#106d4f",
+  "r100": "#fddade",
+  "r200": "#fbb5be",
+  "r300": "#f98f9d",
+  "r400": "#f76a7d",
+  "r500": "#f5455c",
+  "r600": "#db0c27",
+  "r700": "#b30a20",
+  "r800": "#8b0719",
+  "r900": "#630512",
+  "y100": "#fff6d6",
+  "y200": "#ffecad",
+  "y300": "#ffe383",
+  "y400": "#ffd95a",
+  "y500": "#ffd031",
+  "y600": "#f3be08",
+  "y700": "#dfac00",
+  "y800": "#b68d00",
+  "y900": "#8e6d00",
+  "p100": "#f9effc",
+  "p200": "#edd0f7",
+  "p300": "#dca0ef",
+  "p400": "#ca71e7",
+  "p500": "#9f22c7",
+  "p600": "#7f1b9f",
+  "p700": "#5f1477",
+  "p800": "#4a105d",
+  "p900": "#350b42",
+  "o100": "#fde8d7",
+  "o200": "#fad1b0",
+  "o300": "#f7b27b",
+  "o400": "#f59b53",
+  "o500": "#f38c39",
+  "o600": "#e26d0e",
+  "o700": "#bd5a0b",
+  "o800": "#974809",
+  "o900": "#713607",
+  "white": "#ffffff"
+}
diff --git a/packages/fuselage-tokens/colors.mjs b/packages/fuselage-tokens/colors.mjs
new file mode 100644
index 0000000000..07897f5f28
--- /dev/null
+++ b/packages/fuselage-tokens/colors.mjs
@@ -0,0 +1,66 @@
+export default {
+  n100: '#f7f8fa',
+  n200: '#f2f3f5',
+  n300: '#eeeff1',
+  n400: '#e4e7ea',
+  n500: '#cbced1',
+  n600: '#9ea2a8',
+  n700: '#6c727a',
+  n800: '#2f343d',
+  n900: '#1f2329',
+  b100: '#e8f2ff',
+  b200: '#d1ebfe',
+  b300: '#76b7fc',
+  b400: '#549df9',
+  b500: '#1d74f5',
+  b600: '#095ad2',
+  b700: '#10529e',
+  b800: '#01336b',
+  b900: '#012247',
+  g100: '#e5fbf4',
+  g200: '#c0f6e4',
+  g300: '#96f0d2',
+  g400: '#6ce9c0',
+  g500: '#2de0a5',
+  g600: '#1ecb92',
+  g700: '#19ac7c',
+  g800: '#158d65',
+  g900: '#106d4f',
+  r100: '#fddade',
+  r200: '#fbb5be',
+  r300: '#f98f9d',
+  r400: '#f76a7d',
+  r500: '#f5455c',
+  r600: '#db0c27',
+  r700: '#b30a20',
+  r800: '#8b0719',
+  r900: '#630512',
+  y100: '#fff6d6',
+  y200: '#ffecad',
+  y300: '#ffe383',
+  y400: '#ffd95a',
+  y500: '#ffd031',
+  y600: '#f3be08',
+  y700: '#dfac00',
+  y800: '#b68d00',
+  y900: '#8e6d00',
+  p100: '#f9effc',
+  p200: '#edd0f7',
+  p300: '#dca0ef',
+  p400: '#ca71e7',
+  p500: '#9f22c7',
+  p600: '#7f1b9f',
+  p700: '#5f1477',
+  p800: '#4a105d',
+  p900: '#350b42',
+  o100: '#fde8d7',
+  o200: '#fad1b0',
+  o300: '#f7b27b',
+  o400: '#f59b53',
+  o500: '#f38c39',
+  o600: '#e26d0e',
+  o700: '#bd5a0b',
+  o800: '#974809',
+  o900: '#713607',
+  white: '#ffffff',
+};
diff --git a/packages/fuselage-tokens/colors.scss b/packages/fuselage-tokens/colors.scss
index fed4f8cdc0..c8903b5674 100644
--- a/packages/fuselage-tokens/colors.scss
+++ b/packages/fuselage-tokens/colors.scss
@@ -1,5 +1,4 @@
 $colors: (
-  // Neutral
   n100: #f7f8fa,
   n200: #f2f3f5,
   n300: #eeeff1,
@@ -9,8 +8,6 @@ $colors: (
   n700: #6c727a,
   n800: #2f343d,
   n900: #1f2329,
-
-  // Blues
   b100: #e8f2ff,
   b200: #d1ebfe,
   b300: #76b7fc,
@@ -20,8 +17,6 @@ $colors: (
   b700: #10529e,
   b800: #01336b,
   b900: #012247,
-
-  // Greens
   g100: #e5fbf4,
   g200: #c0f6e4,
   g300: #96f0d2,
@@ -31,8 +26,6 @@ $colors: (
   g700: #19ac7c,
   g800: #158d65,
   g900: #106d4f,
-
-  // Reds
   r100: #fddade,
   r200: #fbb5be,
   r300: #f98f9d,
@@ -42,8 +35,6 @@ $colors: (
   r700: #b30a20,
   r800: #8b0719,
   r900: #630512,
-
-  // Yellows
   y100: #fff6d6,
   y200: #ffecad,
   y300: #ffe383,
@@ -53,8 +44,6 @@ $colors: (
   y700: #dfac00,
   y800: #b68d00,
   y900: #8e6d00,
-
-  // Purples
   p100: #f9effc,
   p200: #edd0f7,
   p300: #dca0ef,
@@ -64,8 +53,6 @@ $colors: (
   p700: #5f1477,
   p800: #4a105d,
   p900: #350b42,
-
-  // Oranges
   o100: #fde8d7,
   o200: #fad1b0,
   o300: #f7b27b,
@@ -75,6 +62,5 @@ $colors: (
   o700: #bd5a0b,
   o800: #974809,
   o900: #713607,
-
-  'white': #ffffff,
+  white: #ffffff,
 );
diff --git a/packages/fuselage-tokens/package.json b/packages/fuselage-tokens/package.json
index 578be1bc84..be343c6d76 100644
--- a/packages/fuselage-tokens/package.json
+++ b/packages/fuselage-tokens/package.json
@@ -7,7 +7,9 @@
     "name": "Rocket.Chat",
     "url": "https://rocket.chat/"
   },
+  "type": "module",
   "scripts": {
+    "build": "node --experimental-modules scripts/build.mjs",
     "prettier-format": "prettier --config .prettierrc '**/*.js' --write"
   },
   "license": "MIT",
diff --git a/packages/fuselage-tokens/scripts/build.mjs b/packages/fuselage-tokens/scripts/build.mjs
new file mode 100644
index 0000000000..4175179706
--- /dev/null
+++ b/packages/fuselage-tokens/scripts/build.mjs
@@ -0,0 +1,163 @@
+import { promises as fsPromises } from 'fs';
+import { basename, join } from 'path';
+import { fileURLToPath } from 'url';
+import { inspect } from 'util';
+import prettier from 'prettier';
+
+const rootDir = join(fileURLToPath(import.meta.url), '../..');
+
+let prettierOptions;
+const getPrettierOptions = async () => {
+  if (!prettierOptions) {
+    const prettierRCPath = join(rootDir, '.prettierrc');
+    prettierOptions = JSON.parse(
+      await fsPromises.readFile(prettierRCPath, { encoding: 'utf-8' })
+    );
+  }
+
+  return prettierOptions;
+};
+
+const toCommonJS = async (data) => {
+  return prettier.format(
+    `'use strict';module.exports = ${JSON.stringify(data)};`,
+    {
+      parser: 'babel',
+      ...(await getPrettierOptions()),
+    }
+  );
+};
+
+const toESModule = async (data) => {
+  return prettier.format(`export default ${JSON.stringify(data)};`, {
+    parser: 'babel',
+    ...(await getPrettierOptions()),
+  });
+};
+
+const toScssVariables = async (data) => {
+  const fromCamelToKebab = (string) =>
+    string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+
+  const toValue = (chunk) => {
+    if (typeof chunk === 'boolean' || typeof chunk === 'number') {
+      return chunk;
+    }
+
+    if (typeof chunk === 'string') {
+      return /\s/.test(chunk) ? JSON.stringify(chunk) : chunk;
+    }
+
+    if (chunk === undefined || chunk === null) {
+      return 'null';
+    }
+
+    if (Array.isArray(chunk)) {
+      return `(${chunk.map(toValue).join(',')})`;
+    }
+
+    return `(${Object.entries(chunk)
+      .map(([key, value]) => {
+        return fromCamelToKebab(key) + ':' + toValue(value);
+      })
+      .join(',')})`;
+  };
+
+  return prettier.format(
+    Object.entries(data)
+      .map(
+        ([varName, value]) =>
+          `\$${fromCamelToKebab(varName)}:${toValue(value)};`
+      )
+      .join(''),
+    {
+      parser: 'scss',
+      ...(await getPrettierOptions()),
+    }
+  );
+};
+
+const readSource = async (sourcePath) => {
+  console.log('📂', inspect(basename(sourcePath), { colors: true }));
+
+  return JSON.parse(
+    await fsPromises.readFile(sourcePath, { encoding: 'utf-8' })
+  );
+};
+
+const writeSource = async (targetPath, data) => {
+  console.log('💾', inspect(basename(targetPath), { colors: true }));
+  await fsPromises.writeFile(targetPath, data, { encoding: 'utf-8' });
+};
+
+const buildBreakpoints = async () => {
+  const sourcePath = join(rootDir, 'breakpoints.json');
+  const commonjsPath = join(rootDir, 'breakpoints.js');
+  const esmodulePath = join(rootDir, 'breakpoints.mjs');
+  const scssPath = join(rootDir, 'breakpoints.scss');
+
+  const entries = await readSource(sourcePath);
+
+  const indexedEntries = {};
+  for (const entry of entries) {
+    indexedEntries[entry.name] = entry;
+  }
+
+  const [commonjsSource, esmoduleSource, scssSource] = await Promise.all([
+    toCommonJS(indexedEntries),
+    toESModule(indexedEntries),
+    toScssVariables({ breakpoints: indexedEntries }),
+  ]);
+
+  await Promise.all([
+    writeSource(commonjsPath, commonjsSource),
+    writeSource(esmodulePath, esmoduleSource),
+    writeSource(scssPath, scssSource),
+  ]);
+};
+
+const buildColors = async () => {
+  const sourcePath = join(rootDir, 'colors.json');
+  const commonjsPath = join(rootDir, 'colors.js');
+  const esmodulePath = join(rootDir, 'colors.mjs');
+  const scssPath = join(rootDir, 'colors.scss');
+
+  const entries = await readSource(sourcePath);
+
+  const [commonjsSource, esmoduleSource, scssSource] = await Promise.all([
+    toCommonJS(entries),
+    toESModule(entries),
+    toScssVariables({ colors: entries }),
+  ]);
+
+  await Promise.all([
+    writeSource(commonjsPath, commonjsSource),
+    writeSource(esmodulePath, esmoduleSource),
+    writeSource(scssPath, scssSource),
+  ]);
+};
+
+const buildTypography = async () => {
+  const sourcePath = join(rootDir, 'typography.json');
+  const commonjsPath = join(rootDir, 'typography.js');
+  const esmodulePath = join(rootDir, 'typography.mjs');
+  const scssPath = join(rootDir, 'typography.scss');
+
+  const entries = await readSource(sourcePath);
+
+  const [commonjsSource, esmoduleSource, scssSource] = await Promise.all([
+    toCommonJS(entries),
+    toESModule(entries),
+    toScssVariables(entries),
+  ]);
+
+  await Promise.all([
+    writeSource(commonjsPath, commonjsSource),
+    writeSource(esmodulePath, esmoduleSource),
+    writeSource(scssPath, scssSource),
+  ]);
+};
+
+buildBreakpoints();
+buildColors();
+buildTypography();
diff --git a/packages/fuselage-tokens/typography.js b/packages/fuselage-tokens/typography.js
index 4269cbac9a..32156a7c62 100644
--- a/packages/fuselage-tokens/typography.js
+++ b/packages/fuselage-tokens/typography.js
@@ -1,78 +1,40 @@
-const fontSans = [
-  'Inter',
-  '-apple-system',
-  'BlinkMacSystemFont',
-  'Segoe UI',
-  'Roboto',
-  'Oxygen',
-  'Ubuntu',
-  'Cantarell',
-  'Helvetica Neue',
-  'Apple Color Emoji',
-  'Segoe UI Emoji',
-  'Segoe UI Symbol',
-  'Meiryo UI',
-  'Arial',
-  'sans-serif',
-];
-
-const fontMono = [
-  'Menlo',
-  'Monaco',
-  'Consolas',
-  'Liberation Mono',
-  'Courier New',
-  'monospace',
-];
-
-export default {
+'use strict';
+module.exports = {
   fontFamilies: {
-    sans: fontSans,
-    mono: fontMono,
+    sans: [
+      'Inter',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Oxygen',
+      'Ubuntu',
+      'Cantarell',
+      'Helvetica Neue',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Meiryo UI',
+      'Arial',
+      'sans-serif',
+    ],
+    mono: [
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      'Liberation Mono',
+      'Courier New',
+      'monospace',
+    ],
   },
   fontScales: {
-    h1: {
-      fontSize: 22,
-      fontWeight: 400,
-      letterSpacing: 0,
-      lineHeight: 32,
-    },
-    s1: {
-      fontSize: 16,
-      fontWeight: 400,
-      letterSpacing: 0,
-      lineHeight: 22,
-    },
-    s2: {
-      fontSize: 16,
-      fontWeight: 500,
-      letterSpacing: 0,
-      lineHeight: 22,
-    },
-    p1: {
-      fontSize: 14,
-      fontWeight: 400,
-      letterSpacing: 0,
-      lineHeight: 20,
-    },
-    p2: {
-      fontSize: 14,
-      fontWeight: 500,
-      letterSpacing: 0,
-      lineHeight: 20,
-    },
-    c1: {
-      fontSize: 12,
-      fontWeight: 400,
-      letterSpacing: 0,
-      lineHeight: 16,
-    },
-    c2: {
-      fontSize: 12,
-      fontWeight: 600,
-      letterSpacing: 0,
-      lineHeight: 16,
-    },
+    h1: { fontSize: 22, fontWeight: 400, letterSpacing: 0, lineHeight: 32 },
+    s1: { fontSize: 16, fontWeight: 400, letterSpacing: 0, lineHeight: 22 },
+    s2: { fontSize: 16, fontWeight: 500, letterSpacing: 0, lineHeight: 22 },
+    p1: { fontSize: 14, fontWeight: 400, letterSpacing: 0, lineHeight: 20 },
+    p2: { fontSize: 14, fontWeight: 500, letterSpacing: 0, lineHeight: 20 },
+    c1: { fontSize: 12, fontWeight: 400, letterSpacing: 0, lineHeight: 16 },
+    c2: { fontSize: 12, fontWeight: 600, letterSpacing: 0, lineHeight: 16 },
     micro: {
       fontSize: 10,
       fontWeight: 600,
diff --git a/packages/fuselage-tokens/typography.json b/packages/fuselage-tokens/typography.json
new file mode 100644
index 0000000000..9737ac51d0
--- /dev/null
+++ b/packages/fuselage-tokens/typography.json
@@ -0,0 +1,79 @@
+{
+  "fontFamilies": {
+    "sans": [
+      "Inter",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "Oxygen",
+      "Ubuntu",
+      "Cantarell",
+      "Helvetica Neue",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Meiryo UI",
+      "Arial",
+      "sans-serif"
+    ],
+    "mono": [
+      "Menlo",
+      "Monaco",
+      "Consolas",
+      "Liberation Mono",
+      "Courier New",
+      "monospace"
+    ]
+  },
+  "fontScales": {
+    "h1": {
+      "fontSize": 22,
+      "fontWeight": 400,
+      "letterSpacing": 0,
+      "lineHeight": 32
+    },
+    "s1": {
+      "fontSize": 16,
+      "fontWeight": 400,
+      "letterSpacing": 0,
+      "lineHeight": 22
+    },
+    "s2": {
+      "fontSize": 16,
+      "fontWeight": 500,
+      "letterSpacing": 0,
+      "lineHeight": 22
+    },
+    "p1": {
+      "fontSize": 14,
+      "fontWeight": 400,
+      "letterSpacing": 0,
+      "lineHeight": 20
+    },
+    "p2": {
+      "fontSize": 14,
+      "fontWeight": 500,
+      "letterSpacing": 0,
+      "lineHeight": 20
+    },
+    "c1": {
+      "fontSize": 12,
+      "fontWeight": 400,
+      "letterSpacing": 0,
+      "lineHeight": 16
+    },
+    "c2": {
+      "fontSize": 12,
+      "fontWeight": 600,
+      "letterSpacing": 0,
+      "lineHeight": 16
+    },
+    "micro": {
+      "fontSize": 10,
+      "fontWeight": 600,
+      "letterSpacing": 0.2,
+      "lineHeight": 12
+    }
+  }
+}
diff --git a/packages/fuselage-tokens/typography.mjs b/packages/fuselage-tokens/typography.mjs
new file mode 100644
index 0000000000..c5d212b7a8
--- /dev/null
+++ b/packages/fuselage-tokens/typography.mjs
@@ -0,0 +1,44 @@
+export default {
+  fontFamilies: {
+    sans: [
+      'Inter',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Oxygen',
+      'Ubuntu',
+      'Cantarell',
+      'Helvetica Neue',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Meiryo UI',
+      'Arial',
+      'sans-serif',
+    ],
+    mono: [
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      'Liberation Mono',
+      'Courier New',
+      'monospace',
+    ],
+  },
+  fontScales: {
+    h1: { fontSize: 22, fontWeight: 400, letterSpacing: 0, lineHeight: 32 },
+    s1: { fontSize: 16, fontWeight: 400, letterSpacing: 0, lineHeight: 22 },
+    s2: { fontSize: 16, fontWeight: 500, letterSpacing: 0, lineHeight: 22 },
+    p1: { fontSize: 14, fontWeight: 400, letterSpacing: 0, lineHeight: 20 },
+    p2: { fontSize: 14, fontWeight: 500, letterSpacing: 0, lineHeight: 20 },
+    c1: { fontSize: 12, fontWeight: 400, letterSpacing: 0, lineHeight: 16 },
+    c2: { fontSize: 12, fontWeight: 600, letterSpacing: 0, lineHeight: 16 },
+    micro: {
+      fontSize: 10,
+      fontWeight: 600,
+      letterSpacing: 0.2,
+      lineHeight: 12,
+    },
+  },
+};
diff --git a/packages/fuselage-tokens/typography.scss b/packages/fuselage-tokens/typography.scss
index 002f84f98e..6425f2635c 100644
--- a/packages/fuselage-tokens/typography.scss
+++ b/packages/fuselage-tokens/typography.scss
@@ -1,33 +1,30 @@
-$-font-sans:
-  Inter,
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  Oxygen,
-  Ubuntu,
-  Cantarell,
-  'Helvetica Neue',
-  'Apple Color Emoji',
-  'Segoe UI Emoji',
-  'Segoe UI Symbol',
-  'Meiryo UI',
-  Arial,
-  sans-serif;
-
-$-font-mono:
-  Menlo,
-  Monaco,
-  Consolas,
-  'Liberation Mono',
-  'Courier New',
-  monospace;
-
 $font-families: (
-  sans: $-font-sans,
-  mono: $-font-mono,
+  sans: (
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Helvetica Neue',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Meiryo UI',
+    Arial,
+    sans-serif,
+  ),
+  mono: (
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace,
+  ),
 );
-
 $font-scales: (
   h1: (
     font-size: 22,
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_xl_breakpoint.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_xl_breakpoint.png
index 273afdac78..8c942ec3f4 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_xl_breakpoint.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_xl_breakpoint.png differ