@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/vars.ts

@@ -1,12 +1,13 @@
 import { Vars } from 'zyzz'
 
 /**
- * The Web variable set: a copy of Zyzz's default variables and typography sets, with Inter as the
- * sans face, re-hued color ramps, the `ease.*` motion curves, and the TDS shadows. Sans tracking
- * follows Inter's dynamic metrics, `-0.0223 + 0.185 * e^(-0.1745 * size)` em, rounded to 0.01px.
- * Size scales use px keys without a unit, such as spacing `'16'` for `1rem` and perspective
- * `'500'` for `500px`. Shadow keys name their largest blur radius. Type weight, tracking, and
- * leading come only from the `typography` sets. Extend it to add app tokens while keeping the
+ * The Web variable set. The first argument holds the TDS 1.0 Core primitives: the `Tempo` neutral
+ * and accent colors, and the `Values` numbers as the `spacing` scale. The second derives the
+ * TPDS 1.0 Platform tokens from those primitives, such as `content.primary`, `container.regular`,
+ * `radius.xs`, and `borderWidth.thin`, and sets the `typography` sets from the Platform text styles
+ * at their Mobile sizes. `shadow` follows the Platform effect styles. Categories without a Figma
+ * source, such as `ease` and `zIndex`, keep the library's values. Size scales use px keys without
+ * a unit, such as spacing `'16'` for `1rem`. Extend it to add app tokens while keeping the
  * library's values.
  *
  * @example
@@ -29,10 +30,6 @@ export const variables = Vars.define(
       '40': '40px',
       '64': '64px',
     },
-    borderWidth: {
-      '1': '1px',
-      '2': '2px',
-    },
     breakpoint: {
       '640': '40rem',
       '768': '48rem',
@@ -40,139 +37,127 @@ export const variables = Vars.define(
       '1280': '80rem',
       '1536': '96rem',
     },
-    // Color ramps keep Zyzz's lightness steps, re-hued to the earlier Tempo accents. Step 700 is the
-    // accent itself, and dark-mode text (900) is its dark variant. Light grays stay Zyzz's. Dark
-    // grays, surfaces, and text use the warm neutral scale of pro.aave.com.
+    // TDS 1.0 Core `Tempo` colors. Each accent `background` pairs Core's light-mode and dark-mode
+    // steps, and its `foreground` pairs Core's text step with the dark-mode step, so accent text
+    // keeps 4.5:1 on the page in both schemes. Solid neutral steps name a percentage of black, and `shade` and `tint` steps are black
+    // and white at that opacity. Core no longer publishes `shade`, `tint`, or the accent alphas, but
+    // Platform tokens still alias them, so they keep the values Platform resolves.
     color: {
-      amber: {
-        '100': { dark: '#2d1504', light: '#fff5ef' },
-        '200': { dark: '#351904', light: '#fff1ea' },
-        '300': { dark: '#4f2807', light: '#ffede2' },
-        '400': { dark: '#5b300c', light: '#ffd8c1' },
-        '500': { dark: '#703d15', light: '#ffc4a2' },
-        '600': { dark: '#f79141', light: '#ffa772' },
-        '700': '#e06f12',
-        '800': '#ff9654',
-        '900': { dark: '#fa8e36', light: '#a55008' },
-        '1000': { dark: '#fff1e8', light: '#4d2101' },
-      },
-      // Lifts surfaces off the near-black page in dark mode, so cards and popups stay distinct.
-      // `raised` fills popups and dialogs above surfaces. `indicator` fills the selected segment of a
-      // segmented control. `chip` matches grayAlpha 100, so it stays dim on gray fills. The status
-      // fills tint callouts with step 300 in light mode and step 100 in dark mode.
-      background: {
-        chip: { dark: '#ffffff12', light: '#0000000d' },
-        indicator: { dark: 'rgb(255 255 255 / 0.16)', light: '#fff' },
-        info: { dark: '#161b29', light: '#e6eefe' },
-        negative: { dark: '#2a1410', light: '#ffe6e0' },
-        positive: { dark: '#052315', light: '#d3f8df' },
-        primary: { dark: '#100f0f', light: '#f5f5f5' },
-        raised: { dark: '#1f1e1e', light: '#fff' },
-        surface: { dark: '#1a1919', light: '#fff' },
-        warning: { dark: '#2d1504', light: '#ffede2' },
-      },
-      black: '#000',
-      blue: {
-        '100': { dark: '#161b29', light: '#f2f6fe' },
-        '200': { dark: '#1a2236', light: '#eff4ff' },
-        '300': { dark: '#222e4c', light: '#e6eefe' },
-        '400': { dark: '#29365b', light: '#d6e3fe' },
-        '500': { dark: '#304170', light: '#afc8fd' },
-        '600': { dark: '#6b8be2', light: '#80a5fb' },
-        '700': '#4471ed',
-        '800': '#395fc8',
-        '900': { dark: '#7498fb', light: '#3d64cd' },
-        '1000': { dark: '#f1f4fd', light: '#13234a' },
-      },
-      foreground: { dark: '#fff', light: '#171717' },
-      // Dark gray.100 sits one step above background.surface, so surface hovers stay visible.
-      gray: {
-        '100': { dark: '#1f1e1e', light: '#f2f2f2' },
-        '200': { dark: '#252424', light: '#ebebeb' },
-        '300': { dark: '#2a2828', light: '#e6e6e6' },
-        '400': { dark: '#2e2d2d', light: '#ebebeb' },
-        '500': { dark: '#484747', light: '#c9c9c9' },
-        '600': { dark: '#868585', light: '#a8a8a8' },
-        '700': { dark: '#8f8e8e', light: '#8f8f8f' },
-        '800': { dark: '#7d7c7c', light: '#7d7d7d' },
-        '900': { dark: '#bcbbbb', light: '#4d4d4d' },
-        '1000': { dark: '#fff', light: '#171717' },
-      },
-      // Secondary fills composite to #2a2929 on a surface and #212020 on the page in dark mode, close
-      // to the #2a2828 and #1f1e1e fills of pro.aave.com.
-      grayAlpha: {
-        '100': { dark: '#ffffff12', light: '#0000000d' },
-        '200': { dark: '#ffffff1a', light: '#00000014' },
-        '300': { dark: '#ffffff21', light: '#0000001a' },
-        '400': { dark: '#ffffff24', light: '#00000014' },
-        '500': { dark: '#ffffff3d', light: '#00000036' },
-        '600': { dark: '#ffffff82', light: '#00000057' },
-        '700': { dark: '#ffffff8a', light: '#00000070' },
-        '800': { dark: '#ffffff78', light: '#00000082' },
-        '900': { dark: '#ffffff9c', light: '#000000b3' },
-        '1000': { dark: '#ffffffeb', light: '#000000e8' },
-      },
-      green: {
-        '100': { dark: '#052315', light: '#ecfcf1' },
-        '200': { dark: '#032f1c', light: '#e8fbed' },
-        '300': { dark: '#013721', light: '#d3f8df' },
-        '400': { dark: '#01452b', light: '#bbf3ce' },
-        '500': { dark: '#046340', light: '#82eaaa' },
-        '600': { dark: '#00925f', light: '#32df88' },
-        '700': '#13a963',
-        '800': '#0a9154',
-        '900': { dark: '#59e5a4', light: '#037c46' },
-        '1000': { dark: '#e2fcec', light: '#153220' },
-      },
-      pink: {
-        '100': { dark: '#28151c', light: '#ffecef' },
-        '200': { dark: '#3a1724', light: '#ffecef' },
-        '300': { dark: '#4f1d30', light: '#fee3e7' },
-        '400': { dark: '#551c32', light: '#fbd7dd' },
-        '500': { dark: '#6b1f3f', light: '#f8b8c4' },
-        '600': { dark: '#af1f63', light: '#f1869e' },
-        '700': '#cc055b',
-        '800': '#e12269',
-        '900': { dark: '#e54088', light: '#c0255b' },
-        '1000': { dark: '#ffecf1', light: '#45091d' },
-      },
-      purple: {
-        '100': { dark: '#231528', light: '#faf0ff' },
-        '200': { dark: '#2f1937', light: '#faf0ff' },
-        '300': { dark: '#452052', light: '#f6e7fd' },
-        '400': { dark: '#532564', light: '#f1dafa' },
-        '500': { dark: '#68297d', light: '#deacf1' },
-        '600': { dark: '#9c47ba', light: '#cd80eb' },
-        '700': '#ba59dd',
-        '800': '#872ea5',
-        '900': { dark: '#cf79ef', light: '#8a03ae' },
-        '1000': { dark: '#f8edfc', light: '#340043' },
-      },
-      red: {
-        '100': { dark: '#2a1410', light: '#fff0ed' },
-        '200': { dark: '#3c1711', light: '#feece8' },
-        '300': { dark: '#561c13', light: '#ffe6e0' },
-        '400': { dark: '#672016', light: '#ffd8d0' },
-        '500': { dark: '#832416', light: '#feb8aa' },
-        '600': { dark: '#e44c36', light: '#ff6f56' },
-        '700': '#eb3417',
-        '800': { dark: '#d8351f', light: '#e02401' },
-        '900': { dark: '#f55c45', light: '#cf2203' },
-        '1000': { dark: '#feede9', light: '#3c120b' },
+      accent: {
+        // `regular` is the light accent at 8% (100) and the dark accent at 16% (200). `strong`
+        // doubles both.
+        alpha: {
+          regular: {
+            blue: { '100': 'rgb(68 113 237 / 0.08)', '200': 'rgb(116 152 251 / 0.16)' },
+            green: { '100': 'rgb(19 169 99 / 0.08)', '200': 'rgb(89 229 164 / 0.16)' },
+            orange: { '100': 'rgb(224 111 18 / 0.08)', '200': 'rgb(250 142 54 / 0.16)' },
+            red: { '100': 'rgb(235 52 23 / 0.08)', '200': 'rgb(245 92 69 / 0.16)' },
+          },
+          strong: {
+            blue: { '100': 'rgb(68 113 237 / 0.16)', '200': 'rgb(116 152 251 / 0.32)' },
+            green: { '100': 'rgb(19 169 99 / 0.16)', '200': 'rgb(89 229 164 / 0.32)' },
+            orange: { '100': 'rgb(224 111 18 / 0.16)', '200': 'rgb(250 142 54 / 0.32)' },
+            red: { '100': 'rgb(235 52 23 / 0.16)', '200': 'rgb(245 92 69 / 0.32)' },
+          },
+        },
+        blue: {
+          background: { dark: '#7498fb', light: '#4471ed' },
+          foreground: { dark: '#7498fb', light: '#3059d3' },
+        },
+        cyan: {
+          background: { dark: '#48cce6', light: '#00aacb' },
+          foreground: { dark: '#48cce6', light: '#056e85' },
+        },
+        green: {
+          background: { dark: '#59e5a4', light: '#13a963' },
+          foreground: { dark: '#59e5a4', light: '#007441' },
+        },
+        magenta: {
+          background: { dark: '#e54088', light: '#cc055b' },
+          foreground: { dark: '#e54088', light: '#ba0352' },
+        },
+        olive: {
+          background: { dark: '#c4dc65', light: '#95b226' },
+          foreground: { dark: '#c4dc65', light: '#596d01' },
+        },
+        orange: {
+          background: { dark: '#fa8e36', light: '#e06f12' },
+          foreground: { dark: '#fa8e36', light: '#a14d04' },
+        },
+        purple: {
+          background: { dark: '#cf79ef', light: '#ba59dd' },
+          foreground: { dark: '#cf79ef', light: '#9835ba' },
+        },
+        red: {
+          background: { dark: '#f55c45', light: '#eb3417' },
+          foreground: { dark: '#f55c45', light: '#bf1d00' },
+        },
+        violet: {
+          background: { dark: '#9877f1', light: '#7e59e4' },
+          foreground: { dark: '#9877f1', light: '#6f47d1' },
+        },
       },
-      teal: {
-        '100': { dark: '#021f25', light: '#eefbff' },
-        '200': { dark: '#02272e', light: '#e5f9ff' },
-        '300': { dark: '#023842', light: '#d4f5ff' },
-        '400': { dark: '#023b45', light: '#c1f0ff' },
-        '500': { dark: '#055b69', light: '#87e4ff' },
-        '600': { dark: '#0092a8', light: '#23d8ff' },
-        '700': '#00aacb',
-        '800': '#0387a1',
-        '900': { dark: '#48cce6', light: '#04758d' },
-        '1000': { dark: '#def9ff', light: '#023a46' },
+      neutral: {
+        '000': '#fff',
+        '003': '#f7f7f7',
+        '004': '#f5f5f5',
+        '006': '#f0f0f0',
+        '008': '#ebebeb',
+        '012': '#e0e0e0',
+        '016': '#d6d6d6',
+        '020': '#ccc',
+        '024': '#c2c2c2',
+        '028': '#b8b8b8',
+        '032': '#adadad',
+        '036': '#a3a3a3',
+        '040': '#999',
+        '044': '#8f8f8f',
+        '048': '#858585',
+        '052': '#7a7a7a',
+        '056': '#707070',
+        '060': '#666',
+        '064': '#5c5c5c',
+        '068': '#525252',
+        '072': '#474747',
+        '076': '#3d3d3d',
+        '080': '#333',
+        '084': '#292929',
+        '088': '#1f1f1f',
+        '092': '#141414',
+        '096': '#0a0a0a',
+        '100': '#000',
+        shade: {
+          '000': '#00000000',
+          '003': '#00000008',
+          '004': '#0000000a',
+          '006': '#0000000f',
+          '008': '#00000014',
+          '012': '#0000001f',
+          '016': '#00000029',
+          '020': '#00000033',
+          '032': '#00000052',
+          '040': '#00000066',
+          '056': '#0000008f',
+          '060': '#00000099',
+          '080': '#000000cc',
+        },
+        tint: {
+          '000': '#ffffff00',
+          '004': '#ffffff0a',
+          '006': '#ffffff0f',
+          '008': '#ffffff14',
+          '012': '#ffffff1f',
+          '016': '#ffffff29',
+          '020': '#ffffff33',
+          '024': '#ffffff3d',
+          '040': '#ffffff66',
+          '048': '#ffffff7a',
+          '052': '#ffffff85',
+          '056': '#ffffff8f',
+          '064': '#ffffffa3',
+          '080': '#ffffffcc',
+        },
       },
-      white: '#fff',
     },
     container: {
       '256': '16rem',
@@ -207,10 +192,16 @@ export const variables = Vars.define(
       snappy: 'cubic-bezier(0.23, 1, 0.32, 1)',
       spring: 'cubic-bezier(0.32, 0.72, 0, 1)',
     },
+    // The Platform text styles set copy in Inter, titles and values in Pilat, the second display
+    // size in HB Set, and code in JetBrains Mono. The Web contracts ship Inter, Pilat, and JetBrains
+    // Mono, so only HB Set falls back, to Pilat.
     fontFamily: {
-      mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-      serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      body: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      display:
+        '"HB Set v0.96", Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+      heading:
+        'Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+      mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     },
     fontSize: {
       '12': '0.75rem',
@@ -253,93 +244,66 @@ export const variables = Vars.define(
       '800': '800px',
       '1200': '1200px',
     },
-    // Corners top out at 16px. `full` rounds pills and circles.
-    radius: {
-      '0': '0rem',
-      '2': '0.125rem',
-      '4': '0.25rem',
-      '6': '0.375rem',
-      '8': '0.5rem',
-      '10': '0.625rem',
-      '12': '0.75rem',
-      '16': '1rem',
-      full: '9999px',
-    },
-    // Shadow keys name the largest blur radius in px. `inner`, `modal`, `popover`, `raised`, and
-    // `thumb` keep their role names.
     // `enter` is the start scale of a popup transition, and `press` shrinks a pressed control.
     scale: {
       enter: 0.96,
       press: 0.98,
     },
+    // The Platform `Shadow` effect styles.
     shadow: {
-      '0': '0 1px rgb(0 0 0 / 0.05)',
-      '2': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-      '3': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-      '6': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-      '15': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-      '25': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-      '50': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-      modal: '0 32px 64px -16px rgb(0 0 0 / 0.28)',
-      popover:
-        '0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)',
-      raised: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)',
-      thumb:
-        '0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)',
+      large: '0 24px 64px #00000014, 0 8px 48px #00000014, 0 2px 8px #0000000a',
+      regular: '0 8px 48px #0000000a, 0 4px 16px #0000000a, 0 2px 8px #0000000a',
+      small: '0 4px 12px #0000000a, 0 2px 8px #0000000a, 0 0 2px #0000000a',
     },
-    // Keys are px at the default 16px root. Values stay in rem, so the scale follows the root size.
-    // Negative keys pull an element into its container's padding.
+    // TDS 1.0 Core `Values`, keyed by px at the default 16px root. Values stay in rem, so the scale
+    // follows the root size, except the sub-2px hairlines. Negative keys pull an element into its
+    // container's padding.
     spacing: {
       '-24': '-1.5rem',
       '-20': '-1.25rem',
       '-16': '-1rem',
-      '-14': '-0.875rem',
       '-12': '-0.75rem',
       '-10': '-0.625rem',
       '-8': '-0.5rem',
       '-6': '-0.375rem',
       '-4': '-0.25rem',
       '0': '0rem',
+      '0-5': '0.5px',
       '1': '1px',
+      '1-5': '1.5px',
       '2': '0.125rem',
+      '3': '0.1875rem',
       '4': '0.25rem',
       '6': '0.375rem',
       '8': '0.5rem',
       '10': '0.625rem',
       '12': '0.75rem',
-      '14': '0.875rem',
       '16': '1rem',
-      '18': '1.125rem',
       '20': '1.25rem',
-      '22': '1.375rem',
       '24': '1.5rem',
       '28': '1.75rem',
-      '30': '1.875rem',
       '32': '2rem',
       '36': '2.25rem',
-      '38': '2.375rem',
       '40': '2.5rem',
       '44': '2.75rem',
       '48': '3rem',
+      '52': '3.25rem',
       '56': '3.5rem',
+      '60': '3.75rem',
       '64': '4rem',
-      '68': '4.25rem',
+      '72': '4.5rem',
       '80': '5rem',
-      '96': '6rem',
-      '112': '7rem',
-      '128': '8rem',
-      '144': '9rem',
+      '100': '6.25rem',
+      '120': '7.5rem',
+      '140': '8.75rem',
       '160': '10rem',
-      '176': '11rem',
-      '192': '12rem',
-      '208': '13rem',
-      '224': '14rem',
+      '180': '11.25rem',
+      '200': '12.5rem',
       '240': '15rem',
-      '256': '16rem',
-      '288': '18rem',
+      '280': '17.5rem',
       '320': '20rem',
-      '384': '24rem',
+      '360': '22.5rem',
+      '999': '62.4375rem',
     },
     textShadow: {
       '0': '0px 1px 0px rgb(0 0 0 / 0.15)',
@@ -363,384 +327,379 @@ export const variables = Vars.define(
       '280': '280ms',
       '320': '320ms',
     },
-    typography: {
-      button: {
-        '12': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '12px',
-          fontWeight: 500,
-          letterSpacing: '.01px',
-          lineHeight: '16px',
-        },
-        '14': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '14px',
-          fontWeight: 500,
-          letterSpacing: '-.09px',
-          lineHeight: '20px',
-        },
-        '16': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '16px',
-          fontWeight: 500,
-          letterSpacing: '-.18px',
-          lineHeight: '20px',
+    // Layers from the app shell overlay up to toasts.
+    zIndex: {
+      modal: 60,
+      overlay: 40,
+      popover: 50,
+      toast: 1000,
+    },
+  },
+  // TPDS 1.0 Platform `Base`, `Attributes`, and text styles, and the pressed action colors of
+  // `Working / Platform / Semantic` that the Platform Button paints. Base tokens that
+  // alias other Base tokens, such as `component.button.secondary.fill`, point at the same
+  // primitives instead.
+  (vars) => ({
+    borderWidth: {
+      none: vars.spacing['0'],
+      regular: vars.spacing['1'],
+      thick: vars.spacing['2'],
+      thin: vars.spacing['0-5'],
+    },
+    color: {
+      action: {
+        danger: {
+          fill: {
+            hover: '#eb3417',
+            rest: '#eb3417',
+          },
+          label: { rest: vars.color.neutral['000'] },
         },
-      },
-      copy: {
-        '13': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '13px',
-          fontWeight: 450,
-          letterSpacing: '-.04px',
-          lineHeight: '18px',
-          mono: {
-            fontFamily:
-              '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            fontSize: '13px',
-            fontWeight: 400,
-            letterSpacing: '0px',
-            lineHeight: '18px',
-            // Matches the 500 weight of `label.*.strong` row text, for a Hex value in a row.
-            strong: {
-              fontFamily:
-                '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-              fontSize: '13px',
-              fontWeight: 500,
-              letterSpacing: '0px',
-              lineHeight: '18px',
+        focusRing: { dark: vars.color.neutral.tint['056'], light: vars.color.neutral.shade['056'] },
+        primary: {
+          fill: {
+            hover: { dark: vars.color.neutral.tint['080'], light: vars.color.neutral.shade['080'] },
+            pressed: {
+              dark: vars.color.neutral.tint['064'],
+              light: vars.color.neutral.shade['060'],
             },
           },
         },
-        '14': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '14px',
-          fontWeight: 450,
-          letterSpacing: '-.09px',
-          lineHeight: '20px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '14px',
-            fontWeight: 550,
-            letterSpacing: '-.09px',
-            lineHeight: '20px',
+        secondary: {
+          fill: {
+            hover: { dark: vars.color.neutral.tint['006'], light: vars.color.neutral.shade['006'] },
+            pressed: {
+              dark: vars.color.neutral.tint['024'],
+              light: vars.color.neutral.shade['016'],
+            },
           },
         },
-        '15': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '15px',
-          fontWeight: 450,
-          letterSpacing: '-.13px',
-          lineHeight: '24px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '15px',
-            fontWeight: 550,
-            letterSpacing: '-.13px',
-            lineHeight: '24px',
+        tertiary: {
+          fill: {
+            hover: { dark: vars.color.neutral.tint['004'], light: vars.color.neutral.shade['004'] },
+            pressed: {
+              dark: vars.color.neutral.tint['006'],
+              light: vars.color.neutral.shade['006'],
+            },
           },
         },
-        '16': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '16px',
-          fontWeight: 450,
-          letterSpacing: '-.18px',
-          lineHeight: '24px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '16px',
-            fontWeight: 550,
-            letterSpacing: '-.18px',
-            lineHeight: '24px',
-          },
+      },
+      background: {
+        elevated: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
+        primary: { dark: vars.color.neutral['100'], light: vars.color.neutral['004'] },
+        secondary: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
+        // The layouts fill the sidebar and the page header a step lighter than the page.
+        sidebar: { dark: vars.color.neutral['096'], light: '#fafafa' },
+      },
+      border: {
+        focus: { dark: vars.color.neutral.tint['052'], light: vars.color.neutral.shade['040'] },
+        negative: {
+          dark: vars.color.accent.alpha.strong.red['200'],
+          light: vars.color.accent.alpha.strong.red['100'],
         },
-        '18': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '18px',
-          fontWeight: 450,
-          letterSpacing: '-.26px',
-          lineHeight: '28px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '18px',
-            fontWeight: 550,
-            letterSpacing: '-.26px',
-            lineHeight: '28px',
-          },
+        positive: {
+          dark: vars.color.accent.alpha.strong.green['200'],
+          light: vars.color.accent.alpha.strong.green['100'],
         },
-        '20': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '20px',
-          fontWeight: 450,
-          letterSpacing: '-.33px',
-          lineHeight: '28px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '20px',
-            fontWeight: 550,
-            letterSpacing: '-.33px',
-            lineHeight: '28px',
+        warning: {
+          dark: vars.color.accent.alpha.strong.orange['200'],
+          light: vars.color.accent.alpha.strong.orange['100'],
+        },
+      },
+      component: {
+        button: {
+          primary: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral['000'], light: vars.color.neutral['100'] },
+          },
+          secondary: {
+            border: {
+              dark: vars.color.neutral.tint['016'],
+              light: vars.color.neutral.shade['008'],
+            },
+            fill: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral.shade['004'] },
+          },
+          tertiary: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral.tint['000'], light: vars.color.neutral.shade['000'] },
           },
         },
-        '24': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '24px',
-          fontWeight: 450,
-          letterSpacing: '-.47px',
-          lineHeight: '36px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '24px',
-            fontWeight: 550,
-            letterSpacing: '-.47px',
-            lineHeight: '36px',
+        input: {
+          overlay: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['020'] },
+          },
+          primary: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral.shade['004'] },
+          },
+          secondary: {
+            border: {
+              dark: vars.color.neutral.tint['024'],
+              light: vars.color.neutral.shade['016'],
+            },
+            fill: { dark: vars.color.neutral.tint['000'], light: vars.color.neutral.shade['000'] },
           },
         },
+        pullTab: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['012'] },
       },
-      heading: {
-        '14': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      container: {
+        accent: vars.color.accent.alpha.regular.blue['100'],
+        negative: {
+          dark: vars.color.accent.alpha.regular.red['200'],
+          light: vars.color.accent.alpha.regular.red['100'],
+        },
+        positive: {
+          dark: vars.color.accent.alpha.regular.green['200'],
+          light: vars.color.accent.alpha.regular.green['100'],
+        },
+        // Dark mode fills the regular container at 8% white, dimmer than Figma's 12%, so badges and
+        // other soft fills recede on the dark page.
+        regular: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
+        strong: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
+        subtle: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['003'] },
+        warning: {
+          dark: vars.color.accent.alpha.regular.orange['200'],
+          light: vars.color.accent.alpha.regular.orange['100'],
+        },
+      },
+      content: {
+        accent: '#4471ed',
+        negative: vars.color.accent.red.background,
+        positive: vars.color.accent.green.background,
+        primary: { dark: vars.color.neutral['000'], light: vars.color.neutral['100'] },
+        secondary: { dark: vars.color.neutral.tint['056'], light: vars.color.neutral.shade['056'] },
+        subtle: { dark: vars.color.neutral.tint['020'], light: vars.color.neutral.shade['020'] },
+        tertiary: { dark: vars.color.neutral.tint['040'], light: vars.color.neutral.shade['040'] },
+        warning: vars.color.accent.orange.background,
+      },
+      inverse: {
+        background: {
+          primary: { dark: vars.color.neutral['004'], light: vars.color.neutral['100'] },
+          secondary: { dark: vars.color.neutral['000'], light: vars.color.neutral['092'] },
+        },
+        container: {
+          regular: { dark: vars.color.neutral.shade['004'], light: vars.color.neutral.tint['012'] },
+        },
+        content: {
+          primary: { dark: vars.color.neutral['100'], light: vars.color.neutral['000'] },
+        },
+      },
+      line: {
+        primary: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['016'] },
+        // Dark mode draws the secondary line at 8% white, dimmer than Figma's 16%, so the borders
+        // and dividers recede on the dark fills.
+        secondary: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['008'] },
+        tertiary: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
+      },
+      material: {
+        regular: { dark: vars.color.neutral.tint['048'], light: vars.color.neutral.shade['040'] },
+        thick: { dark: vars.color.neutral.tint['064'], light: vars.color.neutral.shade['060'] },
+        thin: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['020'] },
+        ultrathick: {
+          dark: vars.color.neutral.tint['080'],
+          light: vars.color.neutral.shade['080'],
+        },
+        ultrathin: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
+      },
+      scrim: {
+        regular: vars.color.neutral.shade['016'],
+        strong: vars.color.neutral.shade['032'],
+      },
+      shadow: {
+        primary: { dark: vars.color.neutral.shade['032'], light: vars.color.neutral.shade['008'] },
+        secondary: {
+          dark: vars.color.neutral.shade['016'],
+          light: vars.color.neutral.shade['004'],
+        },
+      },
+    },
+    // The Platform corner radii at their Figma values: 4, 8, 12, 16, 24, 32, 40, and 64px. The
+    // designs smooth each corner fully, which stretches its curve past the radius. A squircle at 1.84
+    // times the radius traces that curve, so the global `corner-shape` rule raises
+    // `--tds-corner-scale` where browsers draw squircles, and other browsers keep the round radius.
+    // `full` stays round, so circles and pills keep their shape.
+    radius: {
+      '2xl': 'calc(4rem * var(--tds-corner-scale, 1))',
+      '2xs': 'calc(0.5rem * var(--tds-corner-scale, 1))',
+      '3xs': 'calc(0.25rem * var(--tds-corner-scale, 1))',
+      full: vars.spacing['999'],
+      lg: 'calc(2rem * var(--tds-corner-scale, 1))',
+      md: 'calc(1.5rem * var(--tds-corner-scale, 1))',
+      none: vars.spacing['0'],
+      sm: 'calc(1rem * var(--tds-corner-scale, 1))',
+      xl: 'calc(2.5rem * var(--tds-corner-scale, 1))',
+      xs: 'calc(0.75rem * var(--tds-corner-scale, 1))',
+    },
+    // Section and page steps use the Mobile mode of the responsive Platform attributes.
+    spacing: {
+      none: vars.spacing['0'],
+      page: { gutter: vars.spacing['12'], margin: vars.spacing['24'] },
+      section: {
+        lg: vars.spacing['120'],
+        md: vars.spacing['80'],
+        none: vars.spacing['0'],
+        sm: vars.spacing['40'],
+        xl: vars.spacing['180'],
+        xs: vars.spacing['24'],
+      },
+    },
+    // Figma's percentage tracking is converted to px. The `utility` styles are uppercase in Figma,
+    // which a component applies with `textTransform`.
+    typography: {
+      body: {
+        b1: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '16px',
+          fontWeight: 400,
+          letterSpacing: '.12px',
+          lineHeight: '22px',
+        },
+        b1Strong: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '16px',
+          fontWeight: 500,
+          letterSpacing: '.12px',
+          lineHeight: '22px',
+        },
+        b2: {
+          fontFamily: vars.fontFamily.body,
           fontSize: '14px',
-          fontWeight: 600,
-          letterSpacing: '-.09px',
+          fontWeight: 400,
+          letterSpacing: '.14px',
           lineHeight: '20px',
         },
-        '16': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '16px',
-          fontWeight: 600,
-          letterSpacing: '-.18px',
-          lineHeight: '24px',
-          subtle: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '16px',
-            fontWeight: 500,
-            letterSpacing: '-.18px',
-            lineHeight: '24px',
-          },
+        b2Strong: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '14px',
+          fontWeight: 500,
+          letterSpacing: '.14px',
+          lineHeight: '20px',
         },
-        '20': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '20px',
-          fontWeight: 600,
-          letterSpacing: '-.33px',
-          lineHeight: '26px',
-          subtle: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '20px',
-            fontWeight: 500,
-            letterSpacing: '-.33px',
-            lineHeight: '26px',
-          },
+        b3: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '12px',
+          fontWeight: 400,
+          letterSpacing: '.15px',
+          lineHeight: '16px',
         },
-        '24': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '24px',
-          fontWeight: 600,
-          letterSpacing: '-.47px',
-          lineHeight: '32px',
-          subtle: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '24px',
-            fontWeight: 500,
-            letterSpacing: '-.47px',
-            lineHeight: '32px',
-          },
+        b3Strong: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '12px',
+          fontWeight: 500,
+          letterSpacing: '.15px',
+          lineHeight: '16px',
+        },
+      },
+      // Pilat Light and HB Set Light are weight 300.
+      display: {
+        d1: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '44px',
+          fontWeight: 300,
+          letterSpacing: '-1.76px',
+          lineHeight: '41.8px',
+        },
+        d2: {
+          fontFamily: vars.fontFamily.display,
+          fontSize: '36px',
+          fontWeight: 300,
+          letterSpacing: '-1.44px',
+          lineHeight: '34.2px',
         },
-        '32': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      },
+      // Pilat Book is weight 500.
+      heading: {
+        h1: {
+          fontFamily: vars.fontFamily.heading,
           fontSize: '32px',
-          fontWeight: 600,
-          letterSpacing: '-.69px',
-          lineHeight: '40px',
-          subtle: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '32px',
-            fontWeight: 500,
-            letterSpacing: '-.69px',
-            lineHeight: '40px',
-          },
+          fontWeight: 500,
+          letterSpacing: '-.48px',
+          lineHeight: '36.8px',
         },
-        '40': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '40px',
-          fontWeight: 600,
-          letterSpacing: '-.89px',
-          lineHeight: '48px',
-        },
-        '48': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '48px',
-          fontWeight: 600,
-          letterSpacing: '-1.07px',
-          lineHeight: '56px',
-        },
-        '56': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '56px',
-          fontWeight: 600,
-          letterSpacing: '-1.25px',
-          lineHeight: '56px',
-        },
-        '64': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '64px',
-          fontWeight: 600,
-          letterSpacing: '-1.43px',
-          lineHeight: '64px',
-        },
-        '72': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '72px',
-          fontWeight: 600,
-          letterSpacing: '-1.61px',
-          lineHeight: '72px',
+        h2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '24px',
+          fontWeight: 500,
+          letterSpacing: '-.36px',
+          lineHeight: '27.6px',
+        },
+        h3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '20px',
+          fontWeight: 500,
+          letterSpacing: '-.3px',
+          lineHeight: '23px',
+        },
+        h4: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '18px',
+          fontWeight: 500,
+          letterSpacing: '-.27px',
+          lineHeight: '20.7px',
         },
       },
-      label: {
-        '12': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      mono: {
+        m1: {
+          fontFamily: vars.fontFamily.mono,
           fontSize: '12px',
-          fontWeight: 450,
-          letterSpacing: '.01px',
+          fontWeight: 400,
+          letterSpacing: '0px',
           lineHeight: '16px',
-          mono: {
-            fontFamily:
-              '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            fontSize: '12px',
-            fontWeight: 400,
-            letterSpacing: '0px',
-            lineHeight: '16px',
-          },
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '12px',
-            fontWeight: 500,
-            letterSpacing: '.01px',
-            lineHeight: '16px',
-          },
         },
-        '13': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '13px',
-          fontWeight: 450,
-          letterSpacing: '-.04px',
+      },
+      utility: {
+        m1: {
+          fontFamily: vars.fontFamily.mono,
+          fontSize: '12px',
+          fontWeight: 400,
+          letterSpacing: '.72px',
           lineHeight: '16px',
-          mono: {
-            fontFamily:
-              '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            fontSize: '13px',
-            fontWeight: 400,
-            letterSpacing: '0px',
-            lineHeight: '20px',
-          },
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '13px',
-            fontWeight: 500,
-            letterSpacing: '-.04px',
-            lineHeight: '16px',
-          },
         },
-        '14': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '14px',
-          fontWeight: 450,
-          letterSpacing: '-.09px',
-          lineHeight: '20px',
-          mono: {
-            fontFamily:
-              '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            fontSize: '14px',
-            fontWeight: 400,
-            letterSpacing: '0px',
-            lineHeight: '20px',
-          },
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '14px',
-            fontWeight: 500,
-            letterSpacing: '-.09px',
-            lineHeight: '20px',
-          },
+        m2: {
+          fontFamily: vars.fontFamily.mono,
+          fontSize: '10px',
+          fontWeight: 400,
+          letterSpacing: '.6px',
+          lineHeight: '12px',
         },
-        '16': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '16px',
-          fontWeight: 450,
-          letterSpacing: '-.18px',
-          lineHeight: '20px',
-          strong: {
-            fontFamily:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-            fontSize: '16px',
-            fontWeight: 500,
-            letterSpacing: '-.18px',
-            lineHeight: '20px',
-          },
+      },
+      value: {
+        v1: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '80px',
+          fontWeight: 400,
+          letterSpacing: '-2.4px',
+          lineHeight: 'normal',
         },
-        '18': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '18px',
-          fontWeight: 450,
-          letterSpacing: '-.26px',
-          lineHeight: '20px',
+        v2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '52px',
+          fontWeight: 400,
+          letterSpacing: '-1.56px',
+          lineHeight: 'normal',
         },
-        '20': {
-          fontFamily:
-            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-          fontSize: '20px',
-          fontWeight: 450,
-          letterSpacing: '-.33px',
-          lineHeight: '32px',
+        v3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '40px',
+          fontWeight: 400,
+          letterSpacing: '-1.2px',
+          lineHeight: 'normal',
         },
       },
     },
-    // Layers from the app shell overlay up to toasts.
-    zIndex: {
-      modal: 60,
-      overlay: 40,
-      popover: 50,
-      toast: 1000,
-    },
-  },
+  }),
   { id: 'tds/web/variables' },
 )