@neuravision/construct 2.0.3 → 2.1.2

package/tokens/tokens.ts

@@ -1,4 +1,19 @@
-/* Generated by design/scripts/build-tokens.mjs. Do not edit directly. */
+/* Generated by scripts/build-tokens.mjs. Do not edit directly. */
+
+export const tokenMetadata = {
+  "formatVersion": 1,
+  "layers": [
+    "primitives",
+    "semantic",
+    "components"
+  ],
+  "themes": [
+    "light",
+    "dark",
+    "high-contrast",
+    "high-contrast-dark"
+  ]
+} as const;
 
 export const primitives = {
   "color": {
@@ -127,28 +142,30 @@ export const primitives = {
       "extrabold": "800"
     },
     "size": {
-      "xs": "12px",
-      "sm": "14px",
-      "md": "16px",
-      "lg": "18px",
-      "xl": "20px",
-      "2xl": "24px",
-      "3xl": "28px",
-      "4xl": "32px",
-      "5xl": "40px",
-      "6xl": "48px"
+      "2xs": "0.625rem",
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "md": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.75rem",
+      "4xl": "2rem",
+      "5xl": "2.5rem",
+      "6xl": "3rem"
     },
     "lineHeight": {
-      "xs": "16px",
-      "sm": "20px",
-      "md": "24px",
-      "lg": "28px",
-      "xl": "32px",
-      "2xl": "36px",
-      "3xl": "40px",
-      "4xl": "44px",
-      "5xl": "52px",
-      "6xl": "60px"
+      "2xs": "0.875rem",
+      "xs": "1rem",
+      "sm": "1.25rem",
+      "md": "1.5rem",
+      "lg": "1.75rem",
+      "xl": "2rem",
+      "2xl": "2.25rem",
+      "3xl": "2.5rem",
+      "4xl": "2.75rem",
+      "5xl": "3.25rem",
+      "6xl": "3.75rem"
     },
     "letterSpacing": {
       "tight": "-0.3px",
@@ -274,8 +291,9 @@ export const semantic = {
       "primaryHover": "#353128",
       "primaryActive": "#211E18",
       "accent": "#F4581C",
-      "accentHover": "#DD4A0F",
-      "accentActive": "#B23C0C",
+      "accentHover": "#FB6E2E",
+      "accentActive": "#FF9462",
+      "accentStrong": "#DD4A0F",
       "onAccent": "#16130F"
     },
     "text": {
@@ -289,17 +307,19 @@ export const semantic = {
       "canvas": "#FAFAF8",
       "surface": "#F1F0EB",
       "elevated": "#FFFFFF",
-      "muted": "#E4E2DB"
+      "muted": "#E4E2DB",
+      "subtle": "#F1F0EB"
     },
     "border": {
       "subtle": "#E4E2DB",
-      "default": "#D3D0C7",
-      "strong": "#8E887A"
+      "default": "#8E887A",
+      "strong": "#66604E",
+      "muted": "#E4E2DB"
     },
     "state": {
       "info": "#1F5BA6",
-      "success": "#2EA070",
-      "warning": "#C8930A",
+      "success": "#1B6145",
+      "warning": "#694B00",
       "danger": "#BE1F3D",
       "onSolid": "#FFFFFF"
     },
@@ -369,64 +389,64 @@ export const semantic = {
   "typography": {
     "display": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "48px",
-      "lineHeight": "60px",
+      "fontSize": "3rem",
+      "lineHeight": "3.75rem",
       "fontWeight": "800",
       "letterSpacing": "-0.3px"
     },
     "h1": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "40px",
-      "lineHeight": "52px",
+      "fontSize": "2.5rem",
+      "lineHeight": "3.25rem",
       "fontWeight": "700",
       "letterSpacing": "-0.3px"
     },
     "h2": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "32px",
-      "lineHeight": "44px",
+      "fontSize": "2rem",
+      "lineHeight": "2.75rem",
       "fontWeight": "600",
       "letterSpacing": "0px"
     },
     "h3": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "28px",
-      "lineHeight": "40px",
+      "fontSize": "1.75rem",
+      "lineHeight": "2.5rem",
       "fontWeight": "600",
       "letterSpacing": "0px"
     },
     "h4": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "24px",
-      "lineHeight": "36px",
+      "fontSize": "1.5rem",
+      "lineHeight": "2.25rem",
       "fontWeight": "600",
       "letterSpacing": "0px"
     },
     "body": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "16px",
-      "lineHeight": "24px",
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
       "fontWeight": "400",
       "letterSpacing": "0px"
     },
     "bodySm": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "14px",
-      "lineHeight": "20px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
       "fontWeight": "400",
       "letterSpacing": "0px"
     },
     "label": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "14px",
-      "lineHeight": "20px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
       "fontWeight": "600",
       "letterSpacing": "0.3px"
     },
     "caption": {
       "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-      "fontSize": "12px",
-      "lineHeight": "16px",
+      "fontSize": "0.75rem",
+      "lineHeight": "1rem",
       "fontWeight": "400",
       "letterSpacing": "0px"
     }
@@ -444,6 +464,71 @@ export const semantic = {
   }
 } as const;
 
+export const components = {
+  "button": {
+    "background": "#16130F",
+    "backgroundHover": "#353128",
+    "backgroundActive": "#211E18",
+    "border": "#16130F",
+    "color": "#FFFFFF",
+    "height": "40px",
+    "paddingX": "16px",
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "600",
+    "radius": "8px",
+    "gap": "6px",
+    "loadingSpinnerSize": "20px"
+  },
+  "control": {
+    "background": "#FFFFFF",
+    "backgroundHover": "#F1F0EB",
+    "backgroundDisabled": "#E4E2DB",
+    "border": "#8E887A",
+    "borderHover": "#66604E",
+    "borderFocus": "#DD4A0F",
+    "text": "#16130F",
+    "placeholder": "#66604E",
+    "radius": "8px"
+  },
+  "card": {
+    "background": "#FFFFFF",
+    "border": "#E4E2DB",
+    "radius": "12px",
+    "padding": "16px",
+    "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+    "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+  },
+  "status": {
+    "gap": "4px",
+    "fontSize": "0.875rem",
+    "iconSize": "16px"
+  },
+  "metric": {
+    "background": "#FFFFFF",
+    "border": "#E4E2DB",
+    "radius": "12px",
+    "padding": "16px",
+    "valueFontSize": "1.5rem",
+    "labelFontSize": "0.875rem"
+  },
+  "meter": {
+    "height": "6px",
+    "radius": "999px",
+    "track": "#E4E2DB"
+  },
+  "datum": {
+    "edgeWidth": "3px",
+    "tickWidth": "24px",
+    "tickHeight": "3px",
+    "originLength": "48px",
+    "markSize": "18px",
+    "scaleHeight": "9px",
+    "scaleMinorStep": "12px",
+    "scaleMajorStep": "60px"
+  }
+} as const;
+
 export const semanticThemes = {
   "light": {
     "color": {
@@ -452,8 +537,9 @@ export const semanticThemes = {
         "primaryHover": "#353128",
         "primaryActive": "#211E18",
         "accent": "#F4581C",
-        "accentHover": "#DD4A0F",
-        "accentActive": "#B23C0C",
+        "accentHover": "#FB6E2E",
+        "accentActive": "#FF9462",
+        "accentStrong": "#DD4A0F",
         "onAccent": "#16130F"
       },
       "text": {
@@ -467,17 +553,19 @@ export const semanticThemes = {
         "canvas": "#FAFAF8",
         "surface": "#F1F0EB",
         "elevated": "#FFFFFF",
-        "muted": "#E4E2DB"
+        "muted": "#E4E2DB",
+        "subtle": "#F1F0EB"
       },
       "border": {
         "subtle": "#E4E2DB",
-        "default": "#D3D0C7",
-        "strong": "#8E887A"
+        "default": "#8E887A",
+        "strong": "#66604E",
+        "muted": "#E4E2DB"
       },
       "state": {
         "info": "#1F5BA6",
-        "success": "#2EA070",
-        "warning": "#C8930A",
+        "success": "#1B6145",
+        "warning": "#694B00",
         "danger": "#BE1F3D",
         "onSolid": "#FFFFFF"
       },
@@ -547,64 +635,64 @@ export const semanticThemes = {
     "typography": {
       "display": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "48px",
-        "lineHeight": "60px",
+        "fontSize": "3rem",
+        "lineHeight": "3.75rem",
         "fontWeight": "800",
         "letterSpacing": "-0.3px"
       },
       "h1": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "40px",
-        "lineHeight": "52px",
+        "fontSize": "2.5rem",
+        "lineHeight": "3.25rem",
         "fontWeight": "700",
         "letterSpacing": "-0.3px"
       },
       "h2": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "32px",
-        "lineHeight": "44px",
+        "fontSize": "2rem",
+        "lineHeight": "2.75rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "h3": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "28px",
-        "lineHeight": "40px",
+        "fontSize": "1.75rem",
+        "lineHeight": "2.5rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "h4": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "24px",
-        "lineHeight": "36px",
+        "fontSize": "1.5rem",
+        "lineHeight": "2.25rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "body": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "16px",
-        "lineHeight": "24px",
+        "fontSize": "1rem",
+        "lineHeight": "1.5rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       },
       "bodySm": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "14px",
-        "lineHeight": "20px",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       },
       "label": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "14px",
-        "lineHeight": "20px",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
         "fontWeight": "600",
         "letterSpacing": "0.3px"
       },
       "caption": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "12px",
-        "lineHeight": "16px",
+        "fontSize": "0.75rem",
+        "lineHeight": "1rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       }
@@ -630,12 +718,13 @@ export const semanticThemes = {
         "accent": "#FB6E2E",
         "accentHover": "#FF9462",
         "accentActive": "#F4581C",
+        "accentStrong": "#FB6E2E",
         "onAccent": "#16130F"
       },
       "text": {
         "primary": "#FFFFFF",
         "secondary": "#E4E2DB",
-        "muted": "#B4AFA1",
+        "muted": "#D3D0C7",
         "inverse": "#FFFFFF",
         "onPrimary": "#16130F"
       },
@@ -643,12 +732,14 @@ export const semanticThemes = {
         "canvas": "#16130F",
         "surface": "#353128",
         "elevated": "#4B473E",
-        "muted": "#211E18"
+        "muted": "#211E18",
+        "subtle": "#353128"
       },
       "border": {
-        "subtle": "#4B473E",
-        "default": "#66604E",
-        "strong": "#8E887A"
+        "subtle": "#66604E",
+        "default": "#B4AFA1",
+        "strong": "#D3D0C7",
+        "muted": "#66604E"
       },
       "state": {
         "info": "#76A6DC",
@@ -673,7 +764,7 @@ export const semanticThemes = {
         "info": "#A6C6EA",
         "success": "#9EDCC0",
         "warning": "#EDC85F",
-        "danger": "#EF98A8"
+        "danger": "#F7C6CF"
       },
       "overlay": {
         "scrim": "rgba(8, 6, 4, 0.72)"
@@ -723,64 +814,64 @@ export const semanticThemes = {
     "typography": {
       "display": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "48px",
-        "lineHeight": "60px",
+        "fontSize": "3rem",
+        "lineHeight": "3.75rem",
         "fontWeight": "800",
         "letterSpacing": "-0.3px"
       },
       "h1": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "40px",
-        "lineHeight": "52px",
+        "fontSize": "2.5rem",
+        "lineHeight": "3.25rem",
         "fontWeight": "700",
         "letterSpacing": "-0.3px"
       },
       "h2": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "32px",
-        "lineHeight": "44px",
+        "fontSize": "2rem",
+        "lineHeight": "2.75rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "h3": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "28px",
-        "lineHeight": "40px",
+        "fontSize": "1.75rem",
+        "lineHeight": "2.5rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "h4": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "24px",
-        "lineHeight": "36px",
+        "fontSize": "1.5rem",
+        "lineHeight": "2.25rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "body": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "16px",
-        "lineHeight": "24px",
+        "fontSize": "1rem",
+        "lineHeight": "1.5rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       },
       "bodySm": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "14px",
-        "lineHeight": "20px",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       },
       "label": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "14px",
-        "lineHeight": "20px",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
         "fontWeight": "600",
         "letterSpacing": "0.3px"
       },
       "caption": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "12px",
-        "lineHeight": "16px",
+        "fontSize": "0.75rem",
+        "lineHeight": "1rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       }
@@ -805,7 +896,8 @@ export const semanticThemes = {
         "primaryActive": "#353128",
         "accent": "#B23C0C",
         "accentHover": "#882D09",
-        "accentActive": "#DD4A0F",
+        "accentActive": "#5C1E06",
+        "accentStrong": "#882D09",
         "onAccent": "#FFFFFF"
       },
       "text": {
@@ -819,12 +911,14 @@ export const semanticThemes = {
         "canvas": "#FFFFFF",
         "surface": "#FFFFFF",
         "elevated": "#FFFFFF",
-        "muted": "#FAFAF8"
+        "muted": "#E4E2DB",
+        "subtle": "#FFFFFF"
       },
       "border": {
-        "subtle": "#B4AFA1",
+        "subtle": "#8E887A",
         "default": "#4B473E",
-        "strong": "#16130F"
+        "strong": "#16130F",
+        "muted": "#8E887A"
       },
       "state": {
         "info": "#123356",
@@ -899,64 +993,243 @@ export const semanticThemes = {
     "typography": {
       "display": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "48px",
-        "lineHeight": "60px",
+        "fontSize": "3rem",
+        "lineHeight": "3.75rem",
+        "fontWeight": "800",
+        "letterSpacing": "-0.3px"
+      },
+      "h1": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "2.5rem",
+        "lineHeight": "3.25rem",
+        "fontWeight": "700",
+        "letterSpacing": "-0.3px"
+      },
+      "h2": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "2rem",
+        "lineHeight": "2.75rem",
+        "fontWeight": "600",
+        "letterSpacing": "0px"
+      },
+      "h3": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "1.75rem",
+        "lineHeight": "2.5rem",
+        "fontWeight": "600",
+        "letterSpacing": "0px"
+      },
+      "h4": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "1.5rem",
+        "lineHeight": "2.25rem",
+        "fontWeight": "600",
+        "letterSpacing": "0px"
+      },
+      "body": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "1rem",
+        "lineHeight": "1.5rem",
+        "fontWeight": "400",
+        "letterSpacing": "0px"
+      },
+      "bodySm": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
+        "fontWeight": "400",
+        "letterSpacing": "0px"
+      },
+      "label": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
+        "fontWeight": "600",
+        "letterSpacing": "0.3px"
+      },
+      "caption": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "0.75rem",
+        "lineHeight": "1rem",
+        "fontWeight": "400",
+        "letterSpacing": "0px"
+      }
+    },
+    "radius": {
+      "control": "8px",
+      "card": "12px",
+      "modal": "16px",
+      "pill": "999px"
+    },
+    "shadow": {
+      "card": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "dropdown": "0 8px 20px rgba(28, 20, 10, 0.11)",
+      "modal": "0 16px 36px rgba(28, 20, 10, 0.13)"
+    }
+  },
+  "highContrastDark": {
+    "color": {
+      "brand": {
+        "primary": "#FFFFFF",
+        "primaryHover": "#F1F0EB",
+        "primaryActive": "#E4E2DB",
+        "accent": "#FF9462",
+        "accentHover": "#FFBE9C",
+        "accentActive": "#FB6E2E",
+        "accentStrong": "#FF9462",
+        "onAccent": "#16130F"
+      },
+      "text": {
+        "primary": "#FFFFFF",
+        "secondary": "#F1F0EB",
+        "muted": "#E4E2DB",
+        "inverse": "#16130F",
+        "onPrimary": "#16130F"
+      },
+      "background": {
+        "canvas": "#16130F",
+        "surface": "#16130F",
+        "elevated": "#211E18",
+        "muted": "#353128",
+        "subtle": "#16130F"
+      },
+      "border": {
+        "subtle": "#8E887A",
+        "default": "#D3D0C7",
+        "strong": "#FFFFFF",
+        "muted": "#8E887A"
+      },
+      "state": {
+        "info": "#A6C6EA",
+        "success": "#9EDCC0",
+        "warning": "#EDC85F",
+        "danger": "#EF98A8",
+        "onSolid": "#16130F"
+      },
+      "stateSurface": {
+        "info": "#0C2238",
+        "success": "#0C2E22",
+        "warning": "#2F2100",
+        "danger": "#330610"
+      },
+      "stateBorder": {
+        "info": "#76A6DC",
+        "success": "#70CBA3",
+        "warning": "#DFAB1F",
+        "danger": "#E4647C"
+      },
+      "stateText": {
+        "info": "#CFE0F4",
+        "success": "#C7EAD9",
+        "warning": "#F6E3A6",
+        "danger": "#F7C6CF"
+      },
+      "overlay": {
+        "scrim": "rgba(0, 0, 0, 0.82)"
+      },
+      "focus": {
+        "ring": "#FF9462"
+      },
+      "avatarSeed": {
+        "1Bg": "#0C2238",
+        "1Fg": "#CFE0F4",
+        "2Bg": "#0A3533",
+        "2Fg": "#C5ECEA",
+        "3Bg": "#2F2100",
+        "3Fg": "#F6E3A6",
+        "4Bg": "#330610",
+        "4Fg": "#F7C6CF",
+        "5Bg": "#0C2E22",
+        "5Fg": "#C7EAD9",
+        "6Bg": "#1A0F2C",
+        "6Fg": "#E5D7F4",
+        "7Bg": "#29080F",
+        "7Fg": "#F5CDDC",
+        "8Bg": "#353128",
+        "8Fg": "#F1F0EB"
+      },
+      "chartSeries": {
+        "1": "#A6C6EA",
+        "2": "#EDC85F",
+        "3": "#9EDCC0",
+        "4": "#C9B0E6",
+        "5": "#EA9CB7",
+        "6": "#93DAD6",
+        "7": "#EF98A8",
+        "8": "#E4E2DB"
+      }
+    },
+    "theme": {
+      "colorScheme": "dark"
+    },
+    "font": {
+      "family": {
+        "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
+      }
+    },
+    "typography": {
+      "display": {
+        "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+        "fontSize": "3rem",
+        "lineHeight": "3.75rem",
         "fontWeight": "800",
         "letterSpacing": "-0.3px"
       },
       "h1": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "40px",
-        "lineHeight": "52px",
+        "fontSize": "2.5rem",
+        "lineHeight": "3.25rem",
         "fontWeight": "700",
         "letterSpacing": "-0.3px"
       },
       "h2": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "32px",
-        "lineHeight": "44px",
+        "fontSize": "2rem",
+        "lineHeight": "2.75rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "h3": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "28px",
-        "lineHeight": "40px",
+        "fontSize": "1.75rem",
+        "lineHeight": "2.5rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "h4": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "24px",
-        "lineHeight": "36px",
+        "fontSize": "1.5rem",
+        "lineHeight": "2.25rem",
         "fontWeight": "600",
         "letterSpacing": "0px"
       },
       "body": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "16px",
-        "lineHeight": "24px",
+        "fontSize": "1rem",
+        "lineHeight": "1.5rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       },
       "bodySm": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "14px",
-        "lineHeight": "20px",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       },
       "label": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "14px",
-        "lineHeight": "20px",
+        "fontSize": "0.875rem",
+        "lineHeight": "1.25rem",
         "fontWeight": "600",
         "letterSpacing": "0.3px"
       },
       "caption": {
         "fontFamily": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
-        "fontSize": "12px",
-        "lineHeight": "16px",
+        "fontSize": "0.75rem",
+        "lineHeight": "1rem",
         "fontWeight": "400",
         "letterSpacing": "0px"
       }
@@ -975,6 +1248,265 @@ export const semanticThemes = {
   }
 } as const;
 
+export const componentThemes = {
+  "light": {
+    "button": {
+      "background": "#16130F",
+      "backgroundHover": "#353128",
+      "backgroundActive": "#211E18",
+      "border": "#16130F",
+      "color": "#FFFFFF",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#FFFFFF",
+      "backgroundHover": "#F1F0EB",
+      "backgroundDisabled": "#E4E2DB",
+      "border": "#8E887A",
+      "borderHover": "#66604E",
+      "borderFocus": "#DD4A0F",
+      "text": "#16130F",
+      "placeholder": "#66604E",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "0.875rem",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "1.5rem",
+      "labelFontSize": "0.875rem"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#E4E2DB"
+    },
+    "datum": {
+      "edgeWidth": "3px",
+      "tickWidth": "24px",
+      "tickHeight": "3px",
+      "originLength": "48px",
+      "markSize": "18px",
+      "scaleHeight": "9px",
+      "scaleMinorStep": "12px",
+      "scaleMajorStep": "60px"
+    }
+  },
+  "dark": {
+    "button": {
+      "background": "#F1F0EB",
+      "backgroundHover": "#FFFFFF",
+      "backgroundActive": "#E4E2DB",
+      "border": "#F1F0EB",
+      "color": "#16130F",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#4B473E",
+      "backgroundHover": "#353128",
+      "backgroundDisabled": "#211E18",
+      "border": "#B4AFA1",
+      "borderHover": "#D3D0C7",
+      "borderFocus": "#FB6E2E",
+      "text": "#FFFFFF",
+      "placeholder": "#D3D0C7",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#4B473E",
+      "border": "#66604E",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "0.875rem",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#4B473E",
+      "border": "#66604E",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "1.5rem",
+      "labelFontSize": "0.875rem"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#211E18"
+    },
+    "datum": {
+      "edgeWidth": "3px",
+      "tickWidth": "24px",
+      "tickHeight": "3px",
+      "originLength": "48px",
+      "markSize": "18px",
+      "scaleHeight": "9px",
+      "scaleMinorStep": "12px",
+      "scaleMajorStep": "60px"
+    }
+  },
+  "highContrast": {
+    "button": {
+      "background": "#16130F",
+      "backgroundHover": "#211E18",
+      "backgroundActive": "#353128",
+      "border": "#16130F",
+      "color": "#FFFFFF",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#FFFFFF",
+      "backgroundHover": "#FFFFFF",
+      "backgroundDisabled": "#E4E2DB",
+      "border": "#4B473E",
+      "borderHover": "#16130F",
+      "borderFocus": "#B23C0C",
+      "text": "#16130F",
+      "placeholder": "#4B473E",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#FFFFFF",
+      "border": "#8E887A",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "0.875rem",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#FFFFFF",
+      "border": "#8E887A",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "1.5rem",
+      "labelFontSize": "0.875rem"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#E4E2DB"
+    },
+    "datum": {
+      "edgeWidth": "3px",
+      "tickWidth": "24px",
+      "tickHeight": "3px",
+      "originLength": "48px",
+      "markSize": "18px",
+      "scaleHeight": "9px",
+      "scaleMinorStep": "12px",
+      "scaleMajorStep": "60px"
+    }
+  },
+  "highContrastDark": {
+    "button": {
+      "background": "#FFFFFF",
+      "backgroundHover": "#F1F0EB",
+      "backgroundActive": "#E4E2DB",
+      "border": "#FFFFFF",
+      "color": "#16130F",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#211E18",
+      "backgroundHover": "#16130F",
+      "backgroundDisabled": "#353128",
+      "border": "#D3D0C7",
+      "borderHover": "#FFFFFF",
+      "borderFocus": "#FF9462",
+      "text": "#FFFFFF",
+      "placeholder": "#E4E2DB",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#211E18",
+      "border": "#8E887A",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "0.875rem",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#211E18",
+      "border": "#8E887A",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "1.5rem",
+      "labelFontSize": "0.875rem"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#353128"
+    },
+    "datum": {
+      "edgeWidth": "3px",
+      "tickWidth": "24px",
+      "tickHeight": "3px",
+      "originLength": "48px",
+      "markSize": "18px",
+      "scaleHeight": "9px",
+      "scaleMinorStep": "12px",
+      "scaleMajorStep": "60px"
+    }
+  }
+} as const;
+
 export const cssVars = {
   "primitives": {
     "color": {
@@ -1103,6 +1635,7 @@ export const cssVars = {
         "extrabold": "var(--font-weight-extrabold)"
       },
       "size": {
+        "2xs": "var(--font-size-2xs)",
         "xs": "var(--font-size-xs)",
         "sm": "var(--font-size-sm)",
         "md": "var(--font-size-md)",
@@ -1115,6 +1648,7 @@ export const cssVars = {
         "6xl": "var(--font-size-6xl)"
       },
       "lineHeight": {
+        "2xs": "var(--line-height-2xs)",
         "xs": "var(--line-height-xs)",
         "sm": "var(--line-height-sm)",
         "md": "var(--line-height-md)",
@@ -1251,6 +1785,7 @@ export const cssVars = {
         "accent": "var(--color-brand-accent)",
         "accentHover": "var(--color-brand-accent-hover)",
         "accentActive": "var(--color-brand-accent-active)",
+        "accentStrong": "var(--color-brand-accent-strong)",
         "onAccent": "var(--color-brand-on-accent)"
       },
       "text": {
@@ -1264,12 +1799,14 @@ export const cssVars = {
         "canvas": "var(--color-bg-canvas)",
         "surface": "var(--color-bg-surface)",
         "elevated": "var(--color-bg-elevated)",
-        "muted": "var(--color-bg-muted)"
+        "muted": "var(--color-bg-muted)",
+        "subtle": "var(--color-bg-subtle)"
       },
       "border": {
         "subtle": "var(--color-border-subtle)",
         "default": "var(--color-border-default)",
-        "strong": "var(--color-border-strong)"
+        "strong": "var(--color-border-strong)",
+        "muted": "var(--color-border-muted)"
       },
       "state": {
         "info": "var(--color-state-info)",
@@ -1417,7 +1954,79 @@ export const cssVars = {
       "dropdown": "var(--shadow-dropdown)",
       "modal": "var(--shadow-modal)"
     }
+  },
+  "components": {
+    "button": {
+      "background": "var(--component-button-background)",
+      "backgroundHover": "var(--component-button-background-hover)",
+      "backgroundActive": "var(--component-button-background-active)",
+      "border": "var(--component-button-border)",
+      "color": "var(--component-button-color)",
+      "height": "var(--component-button-height)",
+      "paddingX": "var(--component-button-padding-x)",
+      "fontSize": "var(--component-button-font-size)",
+      "lineHeight": "var(--component-button-line-height)",
+      "fontWeight": "var(--component-button-font-weight)",
+      "radius": "var(--component-button-radius)",
+      "gap": "var(--component-button-gap)",
+      "loadingSpinnerSize": "var(--component-button-loading-spinner-size)"
+    },
+    "control": {
+      "background": "var(--component-control-background)",
+      "backgroundHover": "var(--component-control-background-hover)",
+      "backgroundDisabled": "var(--component-control-background-disabled)",
+      "border": "var(--component-control-border)",
+      "borderHover": "var(--component-control-border-hover)",
+      "borderFocus": "var(--component-control-border-focus)",
+      "text": "var(--component-control-text)",
+      "placeholder": "var(--component-control-placeholder)",
+      "radius": "var(--component-control-radius)"
+    },
+    "card": {
+      "background": "var(--component-card-background)",
+      "border": "var(--component-card-border)",
+      "radius": "var(--component-card-radius)",
+      "padding": "var(--component-card-padding)",
+      "shadow": "var(--component-card-shadow)",
+      "shadowHover": "var(--component-card-shadow-hover)"
+    },
+    "status": {
+      "gap": "var(--component-status-gap)",
+      "fontSize": "var(--component-status-font-size)",
+      "iconSize": "var(--component-status-icon-size)"
+    },
+    "metric": {
+      "background": "var(--component-metric-background)",
+      "border": "var(--component-metric-border)",
+      "radius": "var(--component-metric-radius)",
+      "padding": "var(--component-metric-padding)",
+      "valueFontSize": "var(--component-metric-value-font-size)",
+      "labelFontSize": "var(--component-metric-label-font-size)"
+    },
+    "meter": {
+      "height": "var(--component-meter-height)",
+      "radius": "var(--component-meter-radius)",
+      "track": "var(--component-meter-track)"
+    },
+    "datum": {
+      "edgeWidth": "var(--component-datum-edge-width)",
+      "tickWidth": "var(--component-datum-tick-width)",
+      "tickHeight": "var(--component-datum-tick-height)",
+      "originLength": "var(--component-datum-origin-length)",
+      "markSize": "var(--component-datum-mark-size)",
+      "scaleHeight": "var(--component-datum-scale-height)",
+      "scaleMinorStep": "var(--component-datum-scale-minor-step)",
+      "scaleMajorStep": "var(--component-datum-scale-major-step)"
+    }
   }
 } as const;
 
-export const tokens = { primitives, semantic, semanticThemes, cssVars } as const;
+export const tokens = {
+  metadata: tokenMetadata,
+  primitives,
+  semantic,
+  components,
+  semanticThemes,
+  componentThemes,
+  cssVars,
+} as const;