@neuravision/construct 2.1.1 → 2.1.3

package/tokens/tokens.ts

@@ -10,7 +10,8 @@ export const tokenMetadata = {
   "themes": [
     "light",
     "dark",
-    "high-contrast"
+    "high-contrast",
+    "high-contrast-dark"
   ]
 } as const;
 
@@ -141,30 +142,30 @@ export const primitives = {
       "extrabold": "800"
     },
     "size": {
-      "2xs": "10px",
-      "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": {
-      "2xs": "14px",
-      "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",
@@ -292,6 +293,7 @@ export const semantic = {
       "accent": "#F4581C",
       "accentHover": "#FB6E2E",
       "accentActive": "#FF9462",
+      "accentStrong": "#DD4A0F",
       "onAccent": "#16130F"
     },
     "text": {
@@ -311,7 +313,7 @@ export const semantic = {
     "border": {
       "subtle": "#E4E2DB",
       "default": "#8E887A",
-      "strong": "#8E887A",
+      "strong": "#66604E",
       "muted": "#E4E2DB"
     },
     "state": {
@@ -387,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"
     }
@@ -471,8 +473,8 @@ export const components = {
     "color": "#FFFFFF",
     "height": "40px",
     "paddingX": "16px",
-    "fontSize": "14px",
-    "lineHeight": "20px",
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem",
     "fontWeight": "600",
     "radius": "8px",
     "gap": "6px",
@@ -483,7 +485,7 @@ export const components = {
     "backgroundHover": "#F1F0EB",
     "backgroundDisabled": "#E4E2DB",
     "border": "#8E887A",
-    "borderHover": "#8E887A",
+    "borderHover": "#66604E",
     "borderFocus": "#DD4A0F",
     "text": "#16130F",
     "placeholder": "#66604E",
@@ -499,7 +501,7 @@ export const components = {
   },
   "status": {
     "gap": "4px",
-    "fontSize": "14px",
+    "fontSize": "0.875rem",
     "iconSize": "16px"
   },
   "metric": {
@@ -507,13 +509,23 @@ export const components = {
     "border": "#E4E2DB",
     "radius": "12px",
     "padding": "16px",
-    "valueFontSize": "24px",
-    "labelFontSize": "14px"
+    "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;
 
@@ -527,6 +539,7 @@ export const semanticThemes = {
         "accent": "#F4581C",
         "accentHover": "#FB6E2E",
         "accentActive": "#FF9462",
+        "accentStrong": "#DD4A0F",
         "onAccent": "#16130F"
       },
       "text": {
@@ -546,7 +559,7 @@ export const semanticThemes = {
       "border": {
         "subtle": "#E4E2DB",
         "default": "#8E887A",
-        "strong": "#8E887A",
+        "strong": "#66604E",
         "muted": "#E4E2DB"
       },
       "state": {
@@ -622,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"
       }
@@ -705,6 +718,7 @@ export const semanticThemes = {
         "accent": "#FB6E2E",
         "accentHover": "#FF9462",
         "accentActive": "#F4581C",
+        "accentStrong": "#FB6E2E",
         "onAccent": "#16130F"
       },
       "text": {
@@ -722,10 +736,10 @@ export const semanticThemes = {
         "subtle": "#353128"
       },
       "border": {
-        "subtle": "#4B473E",
+        "subtle": "#66604E",
         "default": "#B4AFA1",
-        "strong": "#8E887A",
-        "muted": "#4B473E"
+        "strong": "#D3D0C7",
+        "muted": "#66604E"
       },
       "state": {
         "info": "#76A6DC",
@@ -750,7 +764,7 @@ export const semanticThemes = {
         "info": "#A6C6EA",
         "success": "#9EDCC0",
         "warning": "#EDC85F",
-        "danger": "#EF98A8"
+        "danger": "#F7C6CF"
       },
       "overlay": {
         "scrim": "rgba(8, 6, 4, 0.72)"
@@ -800,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"
       }
@@ -883,6 +897,7 @@ export const semanticThemes = {
         "accent": "#B23C0C",
         "accentHover": "#882D09",
         "accentActive": "#5C1E06",
+        "accentStrong": "#882D09",
         "onAccent": "#FFFFFF"
       },
       "text": {
@@ -896,14 +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",
-        "muted": "#B4AFA1"
+        "muted": "#8E887A"
       },
       "state": {
         "info": "#123356",
@@ -978,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": "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"
+      }
+    },
+    "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": "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"
       }
@@ -1064,8 +1258,8 @@ export const componentThemes = {
       "color": "#FFFFFF",
       "height": "40px",
       "paddingX": "16px",
-      "fontSize": "14px",
-      "lineHeight": "20px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
       "fontWeight": "600",
       "radius": "8px",
       "gap": "6px",
@@ -1076,7 +1270,7 @@ export const componentThemes = {
       "backgroundHover": "#F1F0EB",
       "backgroundDisabled": "#E4E2DB",
       "border": "#8E887A",
-      "borderHover": "#8E887A",
+      "borderHover": "#66604E",
       "borderFocus": "#DD4A0F",
       "text": "#16130F",
       "placeholder": "#66604E",
@@ -1092,7 +1286,7 @@ export const componentThemes = {
     },
     "status": {
       "gap": "4px",
-      "fontSize": "14px",
+      "fontSize": "0.875rem",
       "iconSize": "16px"
     },
     "metric": {
@@ -1100,13 +1294,23 @@ export const componentThemes = {
       "border": "#E4E2DB",
       "radius": "12px",
       "padding": "16px",
-      "valueFontSize": "24px",
-      "labelFontSize": "14px"
+      "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": {
@@ -1118,8 +1322,8 @@ export const componentThemes = {
       "color": "#16130F",
       "height": "40px",
       "paddingX": "16px",
-      "fontSize": "14px",
-      "lineHeight": "20px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
       "fontWeight": "600",
       "radius": "8px",
       "gap": "6px",
@@ -1130,7 +1334,7 @@ export const componentThemes = {
       "backgroundHover": "#353128",
       "backgroundDisabled": "#211E18",
       "border": "#B4AFA1",
-      "borderHover": "#8E887A",
+      "borderHover": "#D3D0C7",
       "borderFocus": "#FB6E2E",
       "text": "#FFFFFF",
       "placeholder": "#D3D0C7",
@@ -1138,7 +1342,7 @@ export const componentThemes = {
     },
     "card": {
       "background": "#4B473E",
-      "border": "#4B473E",
+      "border": "#66604E",
       "radius": "12px",
       "padding": "16px",
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
@@ -1146,21 +1350,31 @@ export const componentThemes = {
     },
     "status": {
       "gap": "4px",
-      "fontSize": "14px",
+      "fontSize": "0.875rem",
       "iconSize": "16px"
     },
     "metric": {
       "background": "#4B473E",
-      "border": "#4B473E",
+      "border": "#66604E",
       "radius": "12px",
       "padding": "16px",
-      "valueFontSize": "24px",
-      "labelFontSize": "14px"
+      "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": {
@@ -1172,8 +1386,8 @@ export const componentThemes = {
       "color": "#FFFFFF",
       "height": "40px",
       "paddingX": "16px",
-      "fontSize": "14px",
-      "lineHeight": "20px",
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
       "fontWeight": "600",
       "radius": "8px",
       "gap": "6px",
@@ -1182,7 +1396,7 @@ export const componentThemes = {
     "control": {
       "background": "#FFFFFF",
       "backgroundHover": "#FFFFFF",
-      "backgroundDisabled": "#FAFAF8",
+      "backgroundDisabled": "#E4E2DB",
       "border": "#4B473E",
       "borderHover": "#16130F",
       "borderFocus": "#B23C0C",
@@ -1192,7 +1406,7 @@ export const componentThemes = {
     },
     "card": {
       "background": "#FFFFFF",
-      "border": "#B4AFA1",
+      "border": "#8E887A",
       "radius": "12px",
       "padding": "16px",
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
@@ -1200,21 +1414,95 @@ export const componentThemes = {
     },
     "status": {
       "gap": "4px",
-      "fontSize": "14px",
+      "fontSize": "0.875rem",
       "iconSize": "16px"
     },
     "metric": {
       "background": "#FFFFFF",
-      "border": "#B4AFA1",
+      "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",
-      "valueFontSize": "24px",
-      "labelFontSize": "14px"
+      "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": "#FAFAF8"
+      "track": "#353128"
+    },
+    "datum": {
+      "edgeWidth": "3px",
+      "tickWidth": "24px",
+      "tickHeight": "3px",
+      "originLength": "48px",
+      "markSize": "18px",
+      "scaleHeight": "9px",
+      "scaleMinorStep": "12px",
+      "scaleMajorStep": "60px"
     }
   }
 } as const;
@@ -1497,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": {
@@ -1718,6 +2007,16 @@ export const cssVars = {
       "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;