@tempoxyz/ds 0.2.6 → 0.3.1

package/dist/web/vars.d.ts

@@ -1,11 +1,12 @@
 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
@@ -28,8 +29,10 @@ export declare const variables: Vars.Definition<{
         readonly '64': "64px";
     };
     readonly borderWidth: {
-        readonly '1': "1px";
-        readonly '2': "2px";
+        readonly none: Vars.Reference<"spacing", "0rem">;
+        readonly regular: Vars.Reference<"spacing", "1px">;
+        readonly thick: Vars.Reference<"spacing", "0.125rem">;
+        readonly thin: Vars.Reference<"spacing", "0.5px">;
     };
     readonly breakpoint: {
         readonly '640': "40rem";
@@ -39,389 +42,477 @@ export declare const variables: Vars.Definition<{
         readonly '1536': "96rem";
     };
     readonly color: {
-        readonly amber: {
-            readonly '100': {
-                readonly dark: "#2d1504";
-                readonly light: "#fff5ef";
-            };
-            readonly '200': {
-                readonly dark: "#351904";
-                readonly light: "#fff1ea";
+        readonly accent: {
+            readonly alpha: {
+                readonly regular: {
+                    readonly blue: {
+                        readonly '100': "rgb(68 113 237 / 0.08)";
+                        readonly '200': "rgb(116 152 251 / 0.16)";
+                    };
+                    readonly green: {
+                        readonly '100': "rgb(19 169 99 / 0.08)";
+                        readonly '200': "rgb(89 229 164 / 0.16)";
+                    };
+                    readonly orange: {
+                        readonly '100': "rgb(224 111 18 / 0.08)";
+                        readonly '200': "rgb(250 142 54 / 0.16)";
+                    };
+                    readonly red: {
+                        readonly '100': "rgb(235 52 23 / 0.08)";
+                        readonly '200': "rgb(245 92 69 / 0.16)";
+                    };
+                };
+                readonly strong: {
+                    readonly blue: {
+                        readonly '100': "rgb(68 113 237 / 0.16)";
+                        readonly '200': "rgb(116 152 251 / 0.32)";
+                    };
+                    readonly green: {
+                        readonly '100': "rgb(19 169 99 / 0.16)";
+                        readonly '200': "rgb(89 229 164 / 0.32)";
+                    };
+                    readonly orange: {
+                        readonly '100': "rgb(224 111 18 / 0.16)";
+                        readonly '200': "rgb(250 142 54 / 0.32)";
+                    };
+                    readonly red: {
+                        readonly '100': "rgb(235 52 23 / 0.16)";
+                        readonly '200': "rgb(245 92 69 / 0.32)";
+                    };
+                };
             };
-            readonly '300': {
-                readonly dark: "#4f2807";
-                readonly light: "#ffede2";
+            readonly blue: {
+                readonly background: {
+                    readonly dark: "#7498fb";
+                    readonly light: "#4471ed";
+                };
+                readonly foreground: {
+                    readonly dark: "#7498fb";
+                    readonly light: "#3059d3";
+                };
             };
-            readonly '400': {
-                readonly dark: "#5b300c";
-                readonly light: "#ffd8c1";
+            readonly cyan: {
+                readonly background: {
+                    readonly dark: "#48cce6";
+                    readonly light: "#00aacb";
+                };
+                readonly foreground: {
+                    readonly dark: "#48cce6";
+                    readonly light: "#056e85";
+                };
             };
-            readonly '500': {
-                readonly dark: "#703d15";
-                readonly light: "#ffc4a2";
+            readonly green: {
+                readonly background: {
+                    readonly dark: "#59e5a4";
+                    readonly light: "#13a963";
+                };
+                readonly foreground: {
+                    readonly dark: "#59e5a4";
+                    readonly light: "#007441";
+                };
             };
-            readonly '600': {
-                readonly dark: "#f79141";
-                readonly light: "#ffa772";
+            readonly magenta: {
+                readonly background: {
+                    readonly dark: "#e54088";
+                    readonly light: "#cc055b";
+                };
+                readonly foreground: {
+                    readonly dark: "#e54088";
+                    readonly light: "#ba0352";
+                };
             };
-            readonly '700': "#e06f12";
-            readonly '800': "#ff9654";
-            readonly '900': {
-                readonly dark: "#fa8e36";
-                readonly light: "#a55008";
+            readonly olive: {
+                readonly background: {
+                    readonly dark: "#c4dc65";
+                    readonly light: "#95b226";
+                };
+                readonly foreground: {
+                    readonly dark: "#c4dc65";
+                    readonly light: "#596d01";
+                };
             };
-            readonly '1000': {
-                readonly dark: "#fff1e8";
-                readonly light: "#4d2101";
+            readonly orange: {
+                readonly background: {
+                    readonly dark: "#fa8e36";
+                    readonly light: "#e06f12";
+                };
+                readonly foreground: {
+                    readonly dark: "#fa8e36";
+                    readonly light: "#a14d04";
+                };
             };
-        };
-        readonly background: {
-            readonly chip: {
-                readonly dark: "#ffffff12";
-                readonly light: "#0000000d";
+            readonly purple: {
+                readonly background: {
+                    readonly dark: "#cf79ef";
+                    readonly light: "#ba59dd";
+                };
+                readonly foreground: {
+                    readonly dark: "#cf79ef";
+                    readonly light: "#9835ba";
+                };
             };
-            readonly indicator: {
-                readonly dark: "rgb(255 255 255 / 0.16)";
-                readonly light: "#fff";
+            readonly red: {
+                readonly background: {
+                    readonly dark: "#f55c45";
+                    readonly light: "#eb3417";
+                };
+                readonly foreground: {
+                    readonly dark: "#f55c45";
+                    readonly light: "#bf1d00";
+                };
             };
-            readonly info: {
-                readonly dark: "#161b29";
-                readonly light: "#e6eefe";
+            readonly violet: {
+                readonly background: {
+                    readonly dark: "#9877f1";
+                    readonly light: "#7e59e4";
+                };
+                readonly foreground: {
+                    readonly dark: "#9877f1";
+                    readonly light: "#6f47d1";
+                };
             };
-            readonly negative: {
-                readonly dark: "#2a1410";
-                readonly light: "#ffe6e0";
+        };
+        readonly action: {
+            readonly danger: {
+                readonly fill: {
+                    readonly hover: "#eb3417";
+                    readonly rest: "#eb3417";
+                };
+                readonly label: {
+                    rest: Vars.Reference<"color", "#fff">;
+                };
             };
-            readonly positive: {
-                readonly dark: "#052315";
-                readonly light: "#d3f8df";
+            readonly focusRing: {
+                dark: Vars.Reference<"color", "#ffffff8f">;
+                light: Vars.Reference<"color", "#0000008f">;
             };
             readonly primary: {
-                readonly dark: "#100f0f";
-                readonly light: "#f5f5f5";
-            };
-            readonly raised: {
-                readonly dark: "#1f1e1e";
-                readonly light: "#fff";
-            };
-            readonly surface: {
-                readonly dark: "#1a1919";
-                readonly light: "#fff";
+                fill: {
+                    hover: {
+                        dark: Vars.Reference<"color", "#ffffffcc">;
+                        light: Vars.Reference<"color", "#000000cc">;
+                    };
+                    pressed: {
+                        dark: Vars.Reference<"color", "#ffffffa3">;
+                        light: Vars.Reference<"color", "#00000099">;
+                    };
+                };
             };
-            readonly warning: {
-                readonly dark: "#2d1504";
-                readonly light: "#ffede2";
+            readonly secondary: {
+                fill: {
+                    hover: {
+                        dark: Vars.Reference<"color", "#ffffff0f">;
+                        light: Vars.Reference<"color", "#0000000f">;
+                    };
+                    pressed: {
+                        dark: Vars.Reference<"color", "#ffffff3d">;
+                        light: Vars.Reference<"color", "#00000029">;
+                    };
+                };
             };
-        };
-        readonly black: "#000";
-        readonly blue: {
-            readonly '100': {
-                readonly dark: "#161b29";
-                readonly light: "#f2f6fe";
-            };
-            readonly '200': {
-                readonly dark: "#1a2236";
-                readonly light: "#eff4ff";
-            };
-            readonly '300': {
-                readonly dark: "#222e4c";
-                readonly light: "#e6eefe";
-            };
-            readonly '400': {
-                readonly dark: "#29365b";
-                readonly light: "#d6e3fe";
-            };
-            readonly '500': {
-                readonly dark: "#304170";
-                readonly light: "#afc8fd";
-            };
-            readonly '600': {
-                readonly dark: "#6b8be2";
-                readonly light: "#80a5fb";
-            };
-            readonly '700': "#4471ed";
-            readonly '800': "#395fc8";
-            readonly '900': {
-                readonly dark: "#7498fb";
-                readonly light: "#3d64cd";
-            };
-            readonly '1000': {
-                readonly dark: "#f1f4fd";
-                readonly light: "#13234a";
+            readonly tertiary: {
+                fill: {
+                    hover: {
+                        dark: Vars.Reference<"color", "#ffffff0a">;
+                        light: Vars.Reference<"color", "#0000000a">;
+                    };
+                    pressed: {
+                        dark: Vars.Reference<"color", "#ffffff0f">;
+                        light: Vars.Reference<"color", "#0000000f">;
+                    };
+                };
             };
         };
-        readonly foreground: {
-            readonly dark: "#fff";
-            readonly light: "#171717";
-        };
-        readonly gray: {
-            readonly '100': {
-                readonly dark: "#1f1e1e";
-                readonly light: "#f2f2f2";
-            };
-            readonly '200': {
-                readonly dark: "#252424";
-                readonly light: "#ebebeb";
-            };
-            readonly '300': {
-                readonly dark: "#2a2828";
-                readonly light: "#e6e6e6";
-            };
-            readonly '400': {
-                readonly dark: "#2e2d2d";
-                readonly light: "#ebebeb";
-            };
-            readonly '500': {
-                readonly dark: "#484747";
-                readonly light: "#c9c9c9";
-            };
-            readonly '600': {
-                readonly dark: "#868585";
-                readonly light: "#a8a8a8";
-            };
-            readonly '700': {
-                readonly dark: "#8f8e8e";
-                readonly light: "#8f8f8f";
+        readonly background: {
+            readonly elevated: {
+                dark: Vars.Reference<"color", "#141414">;
+                light: Vars.Reference<"color", "#fff">;
             };
-            readonly '800': {
-                readonly dark: "#7d7c7c";
-                readonly light: "#7d7d7d";
+            readonly primary: {
+                dark: Vars.Reference<"color", "#000">;
+                light: Vars.Reference<"color", "#f5f5f5">;
             };
-            readonly '900': {
-                readonly dark: "#bcbbbb";
-                readonly light: "#4d4d4d";
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#141414">;
+                light: Vars.Reference<"color", "#fff">;
             };
-            readonly '1000': {
-                readonly dark: "#fff";
-                readonly light: "#171717";
+            readonly sidebar: {
+                readonly dark: Vars.Reference<"color", "#0a0a0a">;
+                readonly light: "#fafafa";
             };
         };
-        readonly grayAlpha: {
-            readonly '100': {
-                readonly dark: "#ffffff12";
-                readonly light: "#0000000d";
-            };
-            readonly '200': {
-                readonly dark: "#ffffff1a";
-                readonly light: "#00000014";
-            };
-            readonly '300': {
-                readonly dark: "#ffffff21";
-                readonly light: "#0000001a";
-            };
-            readonly '400': {
-                readonly dark: "#ffffff24";
-                readonly light: "#00000014";
-            };
-            readonly '500': {
-                readonly dark: "#ffffff3d";
-                readonly light: "#00000036";
-            };
-            readonly '600': {
-                readonly dark: "#ffffff82";
-                readonly light: "#00000057";
-            };
-            readonly '700': {
-                readonly dark: "#ffffff8a";
-                readonly light: "#00000070";
+        readonly border: {
+            readonly focus: {
+                dark: Vars.Reference<"color", "#ffffff85">;
+                light: Vars.Reference<"color", "#00000066">;
             };
-            readonly '800': {
-                readonly dark: "#ffffff78";
-                readonly light: "#00000082";
+            readonly negative: {
+                dark: Vars.Reference<"color", "rgb(245 92 69 / 0.32)">;
+                light: Vars.Reference<"color", "rgb(235 52 23 / 0.16)">;
             };
-            readonly '900': {
-                readonly dark: "#ffffff9c";
-                readonly light: "#000000b3";
+            readonly positive: {
+                dark: Vars.Reference<"color", "rgb(89 229 164 / 0.32)">;
+                light: Vars.Reference<"color", "rgb(19 169 99 / 0.16)">;
             };
-            readonly '1000': {
-                readonly dark: "#ffffffeb";
-                readonly light: "#000000e8";
+            readonly warning: {
+                dark: Vars.Reference<"color", "rgb(250 142 54 / 0.32)">;
+                light: Vars.Reference<"color", "rgb(224 111 18 / 0.16)">;
             };
         };
-        readonly green: {
-            readonly '100': {
-                readonly dark: "#052315";
-                readonly light: "#ecfcf1";
-            };
-            readonly '200': {
-                readonly dark: "#032f1c";
-                readonly light: "#e8fbed";
-            };
-            readonly '300': {
-                readonly dark: "#013721";
-                readonly light: "#d3f8df";
-            };
-            readonly '400': {
-                readonly dark: "#01452b";
-                readonly light: "#bbf3ce";
-            };
-            readonly '500': {
-                readonly dark: "#046340";
-                readonly light: "#82eaaa";
-            };
-            readonly '600': {
-                readonly dark: "#00925f";
-                readonly light: "#32df88";
+        readonly component: {
+            readonly button: {
+                primary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#fff">;
+                        light: Vars.Reference<"color", "#000">;
+                    };
+                };
+                secondary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff29">;
+                        light: Vars.Reference<"color", "#00000014">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff1f">;
+                        light: Vars.Reference<"color", "#0000000a">;
+                    };
+                };
+                tertiary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                };
             };
-            readonly '700': "#13a963";
-            readonly '800': "#0a9154";
-            readonly '900': {
-                readonly dark: "#59e5a4";
-                readonly light: "#037c46";
+            readonly input: {
+                overlay: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff3d">;
+                        light: Vars.Reference<"color", "#00000033">;
+                    };
+                };
+                primary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff1f">;
+                        light: Vars.Reference<"color", "#0000000a">;
+                    };
+                };
+                secondary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff3d">;
+                        light: Vars.Reference<"color", "#00000029">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                };
             };
-            readonly '1000': {
-                readonly dark: "#e2fcec";
-                readonly light: "#153220";
+            readonly pullTab: {
+                dark: Vars.Reference<"color", "#ffffff3d">;
+                light: Vars.Reference<"color", "#0000001f">;
             };
         };
-        readonly pink: {
-            readonly '100': {
-                readonly dark: "#28151c";
-                readonly light: "#ffecef";
-            };
-            readonly '200': {
-                readonly dark: "#3a1724";
-                readonly light: "#ffecef";
-            };
-            readonly '300': {
-                readonly dark: "#4f1d30";
-                readonly light: "#fee3e7";
+        readonly container: {
+            readonly accent: Vars.Reference<"color", "rgb(68 113 237 / 0.08)">;
+            readonly negative: {
+                dark: Vars.Reference<"color", "rgb(245 92 69 / 0.16)">;
+                light: Vars.Reference<"color", "rgb(235 52 23 / 0.08)">;
             };
-            readonly '400': {
-                readonly dark: "#551c32";
-                readonly light: "#fbd7dd";
+            readonly positive: {
+                dark: Vars.Reference<"color", "rgb(89 229 164 / 0.16)">;
+                light: Vars.Reference<"color", "rgb(19 169 99 / 0.08)">;
             };
-            readonly '500': {
-                readonly dark: "#6b1f3f";
-                readonly light: "#f8b8c4";
+            readonly regular: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#0000000a">;
             };
-            readonly '600': {
-                readonly dark: "#af1f63";
-                readonly light: "#f1869e";
+            readonly strong: {
+                dark: Vars.Reference<"color", "#ffffff29">;
+                light: Vars.Reference<"color", "#00000014">;
             };
-            readonly '700': "#cc055b";
-            readonly '800': "#e12269";
-            readonly '900': {
-                readonly dark: "#e54088";
-                readonly light: "#c0255b";
+            readonly subtle: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#00000008">;
             };
-            readonly '1000': {
-                readonly dark: "#ffecf1";
-                readonly light: "#45091d";
+            readonly warning: {
+                dark: Vars.Reference<"color", "rgb(250 142 54 / 0.16)">;
+                light: Vars.Reference<"color", "rgb(224 111 18 / 0.08)">;
             };
         };
-        readonly purple: {
-            readonly '100': {
-                readonly dark: "#231528";
-                readonly light: "#faf0ff";
-            };
-            readonly '200': {
-                readonly dark: "#2f1937";
-                readonly light: "#faf0ff";
-            };
-            readonly '300': {
-                readonly dark: "#452052";
-                readonly light: "#f6e7fd";
-            };
-            readonly '400': {
-                readonly dark: "#532564";
-                readonly light: "#f1dafa";
-            };
-            readonly '500': {
-                readonly dark: "#68297d";
-                readonly light: "#deacf1";
+        readonly content: {
+            readonly accent: "#4471ed";
+            readonly negative: Vars.Reference<"color", "#eb3417" | "#f55c45">;
+            readonly positive: Vars.Reference<"color", "#13a963" | "#59e5a4">;
+            readonly primary: {
+                dark: Vars.Reference<"color", "#fff">;
+                light: Vars.Reference<"color", "#000">;
             };
-            readonly '600': {
-                readonly dark: "#9c47ba";
-                readonly light: "#cd80eb";
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#ffffff8f">;
+                light: Vars.Reference<"color", "#0000008f">;
             };
-            readonly '700': "#ba59dd";
-            readonly '800': "#872ea5";
-            readonly '900': {
-                readonly dark: "#cf79ef";
-                readonly light: "#8a03ae";
+            readonly subtle: {
+                dark: Vars.Reference<"color", "#ffffff33">;
+                light: Vars.Reference<"color", "#00000033">;
             };
-            readonly '1000': {
-                readonly dark: "#f8edfc";
-                readonly light: "#340043";
+            readonly tertiary: {
+                dark: Vars.Reference<"color", "#ffffff66">;
+                light: Vars.Reference<"color", "#00000066">;
             };
+            readonly warning: Vars.Reference<"color", "#e06f12" | "#fa8e36">;
         };
-        readonly red: {
-            readonly '100': {
-                readonly dark: "#2a1410";
-                readonly light: "#fff0ed";
-            };
-            readonly '200': {
-                readonly dark: "#3c1711";
-                readonly light: "#feece8";
-            };
-            readonly '300': {
-                readonly dark: "#561c13";
-                readonly light: "#ffe6e0";
-            };
-            readonly '400': {
-                readonly dark: "#672016";
-                readonly light: "#ffd8d0";
+        readonly inverse: {
+            readonly background: {
+                primary: {
+                    dark: Vars.Reference<"color", "#f5f5f5">;
+                    light: Vars.Reference<"color", "#000">;
+                };
+                secondary: {
+                    dark: Vars.Reference<"color", "#fff">;
+                    light: Vars.Reference<"color", "#141414">;
+                };
             };
-            readonly '500': {
-                readonly dark: "#832416";
-                readonly light: "#feb8aa";
+            readonly container: {
+                regular: {
+                    dark: Vars.Reference<"color", "#0000000a">;
+                    light: Vars.Reference<"color", "#ffffff1f">;
+                };
             };
-            readonly '600': {
-                readonly dark: "#e44c36";
-                readonly light: "#ff6f56";
+            readonly content: {
+                primary: {
+                    dark: Vars.Reference<"color", "#000">;
+                    light: Vars.Reference<"color", "#fff">;
+                };
             };
-            readonly '700': "#eb3417";
-            readonly '800': {
-                readonly dark: "#d8351f";
-                readonly light: "#e02401";
+        };
+        readonly line: {
+            readonly primary: {
+                dark: Vars.Reference<"color", "#ffffff3d">;
+                light: Vars.Reference<"color", "#00000029">;
             };
-            readonly '900': {
-                readonly dark: "#f55c45";
-                readonly light: "#cf2203";
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#00000014">;
             };
-            readonly '1000': {
-                readonly dark: "#feede9";
-                readonly light: "#3c120b";
+            readonly tertiary: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#0000000a">;
             };
         };
-        readonly teal: {
-            readonly '100': {
-                readonly dark: "#021f25";
-                readonly light: "#eefbff";
+        readonly material: {
+            readonly regular: {
+                dark: Vars.Reference<"color", "#ffffff7a">;
+                light: Vars.Reference<"color", "#00000066">;
             };
-            readonly '200': {
-                readonly dark: "#02272e";
-                readonly light: "#e5f9ff";
+            readonly thick: {
+                dark: Vars.Reference<"color", "#ffffffa3">;
+                light: Vars.Reference<"color", "#00000099">;
             };
-            readonly '300': {
-                readonly dark: "#023842";
-                readonly light: "#d4f5ff";
+            readonly thin: {
+                dark: Vars.Reference<"color", "#ffffff3d">;
+                light: Vars.Reference<"color", "#00000033">;
             };
-            readonly '400': {
-                readonly dark: "#023b45";
-                readonly light: "#c1f0ff";
+            readonly ultrathick: {
+                dark: Vars.Reference<"color", "#ffffffcc">;
+                light: Vars.Reference<"color", "#000000cc">;
             };
-            readonly '500': {
-                readonly dark: "#055b69";
-                readonly light: "#87e4ff";
+            readonly ultrathin: {
+                dark: Vars.Reference<"color", "#ffffff29">;
+                light: Vars.Reference<"color", "#00000014">;
             };
-            readonly '600': {
-                readonly dark: "#0092a8";
-                readonly light: "#23d8ff";
+        };
+        readonly neutral: {
+            readonly '000': "#fff";
+            readonly '003': "#f7f7f7";
+            readonly '004': "#f5f5f5";
+            readonly '006': "#f0f0f0";
+            readonly '008': "#ebebeb";
+            readonly '012': "#e0e0e0";
+            readonly '016': "#d6d6d6";
+            readonly '020': "#ccc";
+            readonly '024': "#c2c2c2";
+            readonly '028': "#b8b8b8";
+            readonly '032': "#adadad";
+            readonly '036': "#a3a3a3";
+            readonly '040': "#999";
+            readonly '044': "#8f8f8f";
+            readonly '048': "#858585";
+            readonly '052': "#7a7a7a";
+            readonly '056': "#707070";
+            readonly '060': "#666";
+            readonly '064': "#5c5c5c";
+            readonly '068': "#525252";
+            readonly '072': "#474747";
+            readonly '076': "#3d3d3d";
+            readonly '080': "#333";
+            readonly '084': "#292929";
+            readonly '088': "#1f1f1f";
+            readonly '092': "#141414";
+            readonly '096': "#0a0a0a";
+            readonly '100': "#000";
+            readonly shade: {
+                readonly '000': "#00000000";
+                readonly '003': "#00000008";
+                readonly '004': "#0000000a";
+                readonly '006': "#0000000f";
+                readonly '008': "#00000014";
+                readonly '012': "#0000001f";
+                readonly '016': "#00000029";
+                readonly '020': "#00000033";
+                readonly '032': "#00000052";
+                readonly '040': "#00000066";
+                readonly '056': "#0000008f";
+                readonly '060': "#00000099";
+                readonly '080': "#000000cc";
+            };
+            readonly tint: {
+                readonly '000': "#ffffff00";
+                readonly '004': "#ffffff0a";
+                readonly '006': "#ffffff0f";
+                readonly '008': "#ffffff14";
+                readonly '012': "#ffffff1f";
+                readonly '016': "#ffffff29";
+                readonly '020': "#ffffff33";
+                readonly '024': "#ffffff3d";
+                readonly '040': "#ffffff66";
+                readonly '048': "#ffffff7a";
+                readonly '052': "#ffffff85";
+                readonly '056': "#ffffff8f";
+                readonly '064': "#ffffffa3";
+                readonly '080': "#ffffffcc";
             };
-            readonly '700': "#00aacb";
-            readonly '800': "#0387a1";
-            readonly '900': {
-                readonly dark: "#48cce6";
-                readonly light: "#04758d";
+        };
+        readonly scrim: {
+            readonly regular: Vars.Reference<"color", "#00000029">;
+            readonly strong: Vars.Reference<"color", "#00000052">;
+        };
+        readonly shadow: {
+            readonly primary: {
+                dark: Vars.Reference<"color", "#00000052">;
+                light: Vars.Reference<"color", "#00000014">;
             };
-            readonly '1000': {
-                readonly dark: "#def9ff";
-                readonly light: "#023a46";
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#00000029">;
+                light: Vars.Reference<"color", "#0000000a">;
             };
         };
-        readonly white: "#fff";
     };
     readonly container: {
         readonly '256': "16rem";
@@ -455,9 +546,10 @@ export declare const variables: Vars.Definition<{
         readonly spring: "cubic-bezier(0.32, 0.72, 0, 1)";
     };
     readonly fontFamily: {
-        readonly mono: "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
-        readonly 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\"";
-        readonly serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif";
+        readonly 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\"";
+        readonly display: "\"HB Set v0.96\", Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+        readonly heading: "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+        readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
     };
     readonly fontSize: {
         readonly '12': "0.75rem";
@@ -500,84 +592,85 @@ export declare const variables: Vars.Definition<{
         readonly '1200': "1200px";
     };
     readonly radius: {
-        readonly '0': "0rem";
-        readonly '2': "0.125rem";
-        readonly '4': "0.25rem";
-        readonly '6': "0.375rem";
-        readonly '8': "0.5rem";
-        readonly '10': "0.625rem";
-        readonly '12': "0.75rem";
-        readonly '16': "1rem";
-        readonly full: "9999px";
+        readonly '2xl': "calc(4rem * var(--tds-corner-scale, 1))";
+        readonly '2xs': "calc(0.5rem * var(--tds-corner-scale, 1))";
+        readonly '3xs': "calc(0.25rem * var(--tds-corner-scale, 1))";
+        readonly full: Vars.Reference<"spacing", "62.4375rem">;
+        readonly lg: "calc(2rem * var(--tds-corner-scale, 1))";
+        readonly md: "calc(1.5rem * var(--tds-corner-scale, 1))";
+        readonly none: Vars.Reference<"spacing", "0rem">;
+        readonly sm: "calc(1rem * var(--tds-corner-scale, 1))";
+        readonly xl: "calc(2.5rem * var(--tds-corner-scale, 1))";
+        readonly xs: "calc(0.75rem * var(--tds-corner-scale, 1))";
     };
     readonly scale: {
         readonly enter: 0.96;
         readonly press: 0.98;
     };
     readonly shadow: {
-        readonly '0': "0 1px rgb(0 0 0 / 0.05)";
-        readonly '2': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-        readonly '3': "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-        readonly '6': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-        readonly '15': "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-        readonly '25': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-        readonly '50': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
-        readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
-        readonly modal: "0 32px 64px -16px rgb(0 0 0 / 0.28)";
-        readonly 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)";
-        readonly raised: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)";
-        readonly 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)";
+        readonly large: "0 24px 64px #00000014, 0 8px 48px #00000014, 0 2px 8px #0000000a";
+        readonly regular: "0 8px 48px #0000000a, 0 4px 16px #0000000a, 0 2px 8px #0000000a";
+        readonly small: "0 4px 12px #0000000a, 0 2px 8px #0000000a, 0 0 2px #0000000a";
     };
     readonly spacing: {
-        readonly '-24': "-1.5rem";
-        readonly '-20': "-1.25rem";
-        readonly '-16': "-1rem";
-        readonly '-14': "-0.875rem";
-        readonly '-12': "-0.75rem";
-        readonly '-10': "-0.625rem";
-        readonly '-8': "-0.5rem";
-        readonly '-6': "-0.375rem";
-        readonly '-4': "-0.25rem";
-        readonly '0': "0rem";
-        readonly '1': "1px";
-        readonly '2': "0.125rem";
-        readonly '4': "0.25rem";
-        readonly '6': "0.375rem";
-        readonly '8': "0.5rem";
-        readonly '10': "0.625rem";
-        readonly '12': "0.75rem";
-        readonly '14': "0.875rem";
-        readonly '16': "1rem";
-        readonly '18': "1.125rem";
-        readonly '20': "1.25rem";
-        readonly '22': "1.375rem";
-        readonly '24': "1.5rem";
-        readonly '28': "1.75rem";
-        readonly '30': "1.875rem";
-        readonly '32': "2rem";
-        readonly '36': "2.25rem";
-        readonly '38': "2.375rem";
-        readonly '40': "2.5rem";
-        readonly '44': "2.75rem";
-        readonly '48': "3rem";
-        readonly '56': "3.5rem";
-        readonly '64': "4rem";
-        readonly '68': "4.25rem";
-        readonly '80': "5rem";
-        readonly '96': "6rem";
-        readonly '112': "7rem";
-        readonly '128': "8rem";
-        readonly '144': "9rem";
-        readonly '160': "10rem";
-        readonly '176': "11rem";
-        readonly '192': "12rem";
-        readonly '208': "13rem";
-        readonly '224': "14rem";
-        readonly '240': "15rem";
-        readonly '256': "16rem";
-        readonly '288': "18rem";
-        readonly '320': "20rem";
-        readonly '384': "24rem";
+        readonly [-10]: "-0.625rem";
+        readonly [-12]: "-0.75rem";
+        readonly [-16]: "-1rem";
+        readonly [-20]: "-1.25rem";
+        readonly [-24]: "-1.5rem";
+        readonly [-4]: "-0.25rem";
+        readonly [-6]: "-0.375rem";
+        readonly [-8]: "-0.5rem";
+        readonly 0: "0rem";
+        readonly "0-5": "0.5px";
+        readonly 1: "1px";
+        readonly "1-5": "1.5px";
+        readonly 10: "0.625rem";
+        readonly 100: "6.25rem";
+        readonly 12: "0.75rem";
+        readonly 120: "7.5rem";
+        readonly 140: "8.75rem";
+        readonly 16: "1rem";
+        readonly 160: "10rem";
+        readonly 180: "11.25rem";
+        readonly 2: "0.125rem";
+        readonly 20: "1.25rem";
+        readonly 200: "12.5rem";
+        readonly 24: "1.5rem";
+        readonly 240: "15rem";
+        readonly 28: "1.75rem";
+        readonly 280: "17.5rem";
+        readonly 3: "0.1875rem";
+        readonly 32: "2rem";
+        readonly 320: "20rem";
+        readonly 36: "2.25rem";
+        readonly 360: "22.5rem";
+        readonly 4: "0.25rem";
+        readonly 40: "2.5rem";
+        readonly 44: "2.75rem";
+        readonly 48: "3rem";
+        readonly 52: "3.25rem";
+        readonly 56: "3.5rem";
+        readonly 6: "0.375rem";
+        readonly 60: "3.75rem";
+        readonly 64: "4rem";
+        readonly 72: "4.5rem";
+        readonly 8: "0.5rem";
+        readonly 80: "5rem";
+        readonly 999: "62.4375rem";
+        readonly none: Vars.Reference<"spacing", "0rem">;
+        readonly page: {
+            readonly gutter: Vars.Reference<"spacing", "0.75rem">;
+            readonly margin: Vars.Reference<"spacing", "1.5rem">;
+        };
+        readonly section: {
+            readonly lg: Vars.Reference<"spacing", "7.5rem">;
+            readonly md: Vars.Reference<"spacing", "5rem">;
+            readonly none: Vars.Reference<"spacing", "0rem">;
+            readonly sm: Vars.Reference<"spacing", "2.5rem">;
+            readonly xl: Vars.Reference<"spacing", "11.25rem">;
+            readonly xs: Vars.Reference<"spacing", "1.5rem">;
+        };
     };
     readonly textShadow: {
         readonly '0': "0px 1px 0px rgb(0 0 0 / 0.15)";
@@ -601,327 +694,142 @@ export declare const variables: Vars.Definition<{
         readonly '320': "320ms";
     };
     readonly typography: {
-        readonly button: {
-            readonly '12': {
-                readonly 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\"";
-                readonly fontSize: "12px";
-                readonly fontWeight: 500;
-                readonly letterSpacing: ".01px";
-                readonly lineHeight: "16px";
-            };
-            readonly '14': {
-                readonly 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\"";
-                readonly fontSize: "14px";
-                readonly fontWeight: 500;
-                readonly letterSpacing: "-.09px";
-                readonly lineHeight: "20px";
+        readonly body: {
+            readonly b1: {
+                readonly fontFamily: Vars.Reference<"string", "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\"">;
+                readonly fontSize: "16px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".12px";
+                readonly lineHeight: "22px";
             };
-            readonly '16': {
-                readonly 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\"";
+            readonly b1Strong: {
+                readonly fontFamily: Vars.Reference<"string", "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\"">;
                 readonly fontSize: "16px";
                 readonly fontWeight: 500;
-                readonly letterSpacing: "-.18px";
-                readonly lineHeight: "20px";
-            };
-        };
-        readonly copy: {
-            readonly '13': {
-                readonly 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\"";
-                readonly fontSize: "13px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.04px";
-                readonly lineHeight: "18px";
-                readonly mono: {
-                    readonly fontFamily: "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
-                    readonly fontSize: "13px";
-                    readonly fontWeight: 400;
-                    readonly letterSpacing: "0px";
-                    readonly lineHeight: "18px";
-                    readonly strong: {
-                        readonly fontFamily: "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
-                        readonly fontSize: "13px";
-                        readonly fontWeight: 500;
-                        readonly letterSpacing: "0px";
-                        readonly lineHeight: "18px";
-                    };
-                };
+                readonly letterSpacing: ".12px";
+                readonly lineHeight: "22px";
             };
-            readonly '14': {
-                readonly 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\"";
+            readonly b2: {
+                readonly fontFamily: Vars.Reference<"string", "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\"">;
                 readonly fontSize: "14px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.09px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".14px";
                 readonly lineHeight: "20px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "14px";
-                    readonly fontWeight: 550;
-                    readonly letterSpacing: "-.09px";
-                    readonly lineHeight: "20px";
-                };
-            };
-            readonly '15': {
-                readonly 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\"";
-                readonly fontSize: "15px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.13px";
-                readonly lineHeight: "24px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "15px";
-                    readonly fontWeight: 550;
-                    readonly letterSpacing: "-.13px";
-                    readonly lineHeight: "24px";
-                };
             };
-            readonly '16': {
-                readonly 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\"";
-                readonly fontSize: "16px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.18px";
-                readonly lineHeight: "24px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "16px";
-                    readonly fontWeight: 550;
-                    readonly letterSpacing: "-.18px";
-                    readonly lineHeight: "24px";
-                };
+            readonly b2Strong: {
+                readonly fontFamily: Vars.Reference<"string", "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\"">;
+                readonly fontSize: "14px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: ".14px";
+                readonly lineHeight: "20px";
             };
-            readonly '18': {
-                readonly 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\"";
-                readonly fontSize: "18px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.26px";
-                readonly lineHeight: "28px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "18px";
-                    readonly fontWeight: 550;
-                    readonly letterSpacing: "-.26px";
-                    readonly lineHeight: "28px";
-                };
+            readonly b3: {
+                readonly fontFamily: Vars.Reference<"string", "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\"">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".15px";
+                readonly lineHeight: "16px";
             };
-            readonly '20': {
-                readonly 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\"";
-                readonly fontSize: "20px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.33px";
-                readonly lineHeight: "28px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "20px";
-                    readonly fontWeight: 550;
-                    readonly letterSpacing: "-.33px";
-                    readonly lineHeight: "28px";
-                };
+            readonly b3Strong: {
+                readonly fontFamily: Vars.Reference<"string", "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\"">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: ".15px";
+                readonly lineHeight: "16px";
             };
-            readonly '24': {
-                readonly 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\"";
-                readonly fontSize: "24px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.47px";
-                readonly lineHeight: "36px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "24px";
-                    readonly fontWeight: 550;
-                    readonly letterSpacing: "-.47px";
-                    readonly lineHeight: "36px";
-                };
+        };
+        readonly display: {
+            readonly d1: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "44px";
+                readonly fontWeight: 300;
+                readonly letterSpacing: "-1.76px";
+                readonly lineHeight: "41.8px";
+            };
+            readonly d2: {
+                readonly fontFamily: Vars.Reference<"string", "\"HB Set v0.96\", Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "36px";
+                readonly fontWeight: 300;
+                readonly letterSpacing: "-1.44px";
+                readonly lineHeight: "34.2px";
             };
         };
         readonly heading: {
-            readonly '14': {
-                readonly 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\"";
-                readonly fontSize: "14px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-.09px";
-                readonly lineHeight: "20px";
+            readonly h1: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "32px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.48px";
+                readonly lineHeight: "36.8px";
             };
-            readonly '16': {
-                readonly 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\"";
-                readonly fontSize: "16px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-.18px";
-                readonly lineHeight: "24px";
-                readonly subtle: {
-                    readonly 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\"";
-                    readonly fontSize: "16px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.18px";
-                    readonly lineHeight: "24px";
-                };
-            };
-            readonly '20': {
-                readonly 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\"";
-                readonly fontSize: "20px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-.33px";
-                readonly lineHeight: "26px";
-                readonly subtle: {
-                    readonly 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\"";
-                    readonly fontSize: "20px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.33px";
-                    readonly lineHeight: "26px";
-                };
-            };
-            readonly '24': {
-                readonly 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\"";
+            readonly h2: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
                 readonly fontSize: "24px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-.47px";
-                readonly lineHeight: "32px";
-                readonly subtle: {
-                    readonly 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\"";
-                    readonly fontSize: "24px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.47px";
-                    readonly lineHeight: "32px";
-                };
-            };
-            readonly '32': {
-                readonly 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\"";
-                readonly fontSize: "32px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-.69px";
-                readonly lineHeight: "40px";
-                readonly subtle: {
-                    readonly 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\"";
-                    readonly fontSize: "32px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.69px";
-                    readonly lineHeight: "40px";
-                };
-            };
-            readonly '40': {
-                readonly 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\"";
-                readonly fontSize: "40px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-.89px";
-                readonly lineHeight: "48px";
-            };
-            readonly '48': {
-                readonly 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\"";
-                readonly fontSize: "48px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-1.07px";
-                readonly lineHeight: "56px";
-            };
-            readonly '56': {
-                readonly 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\"";
-                readonly fontSize: "56px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-1.25px";
-                readonly lineHeight: "56px";
-            };
-            readonly '64': {
-                readonly 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\"";
-                readonly fontSize: "64px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-1.43px";
-                readonly lineHeight: "64px";
-            };
-            readonly '72': {
-                readonly 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\"";
-                readonly fontSize: "72px";
-                readonly fontWeight: 600;
-                readonly letterSpacing: "-1.61px";
-                readonly lineHeight: "72px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.36px";
+                readonly lineHeight: "27.6px";
+            };
+            readonly h3: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "20px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.3px";
+                readonly lineHeight: "23px";
+            };
+            readonly h4: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "18px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.27px";
+                readonly lineHeight: "20.7px";
             };
         };
-        readonly label: {
-            readonly '12': {
-                readonly 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\"";
+        readonly mono: {
+            readonly m1: {
+                readonly fontFamily: Vars.Reference<"string", "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace">;
                 readonly fontSize: "12px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: ".01px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "0px";
                 readonly lineHeight: "16px";
-                readonly mono: {
-                    readonly fontFamily: "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
-                    readonly fontSize: "12px";
-                    readonly fontWeight: 400;
-                    readonly letterSpacing: "0px";
-                    readonly lineHeight: "16px";
-                };
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "12px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: ".01px";
-                    readonly lineHeight: "16px";
-                };
-            };
-            readonly '13': {
-                readonly 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\"";
-                readonly fontSize: "13px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.04px";
-                readonly lineHeight: "16px";
-                readonly mono: {
-                    readonly fontFamily: "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
-                    readonly fontSize: "13px";
-                    readonly fontWeight: 400;
-                    readonly letterSpacing: "0px";
-                    readonly lineHeight: "20px";
-                };
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "13px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.04px";
-                    readonly lineHeight: "16px";
-                };
-            };
-            readonly '14': {
-                readonly 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\"";
-                readonly fontSize: "14px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.09px";
-                readonly lineHeight: "20px";
-                readonly mono: {
-                    readonly fontFamily: "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
-                    readonly fontSize: "14px";
-                    readonly fontWeight: 400;
-                    readonly letterSpacing: "0px";
-                    readonly lineHeight: "20px";
-                };
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "14px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.09px";
-                    readonly lineHeight: "20px";
-                };
             };
-            readonly '16': {
-                readonly 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\"";
-                readonly fontSize: "16px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.18px";
-                readonly lineHeight: "20px";
-                readonly strong: {
-                    readonly 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\"";
-                    readonly fontSize: "16px";
-                    readonly fontWeight: 500;
-                    readonly letterSpacing: "-.18px";
-                    readonly lineHeight: "20px";
-                };
+        };
+        readonly utility: {
+            readonly m1: {
+                readonly fontFamily: Vars.Reference<"string", "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".72px";
+                readonly lineHeight: "16px";
             };
-            readonly '18': {
-                readonly 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\"";
-                readonly fontSize: "18px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.26px";
-                readonly lineHeight: "20px";
+            readonly m2: {
+                readonly fontFamily: Vars.Reference<"string", "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace">;
+                readonly fontSize: "10px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".6px";
+                readonly lineHeight: "12px";
             };
-            readonly '20': {
-                readonly 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\"";
-                readonly fontSize: "20px";
-                readonly fontWeight: 450;
-                readonly letterSpacing: "-.33px";
-                readonly lineHeight: "32px";
+        };
+        readonly value: {
+            readonly v1: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "80px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-2.4px";
+                readonly lineHeight: "normal";
+            };
+            readonly v2: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "52px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-1.56px";
+                readonly lineHeight: "normal";
+            };
+            readonly v3: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "40px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-1.2px";
+                readonly lineHeight: "normal";
             };
         };
     };