@orange-halo/tokens 2.1.0 → 2.2.0

package/dist/brands/orange-halo.json

@@ -1,5 +1,9 @@
 {
   "$description": "Component Design Tokens — Orange Halo Visual DNA applied. Each component has personality knobs.",
+  "grid": {
+    "$description": "The brand's layout grid. Spacing is multiples of half a unit; type sizes and line heights sit on it (see style-dictionary.config.js)",
+    "unit": "8px"
+  },
   "color": {
     "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
@@ -194,16 +198,16 @@
       "mono": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
     },
     "size": {
-      "$description": "Slightly expressive type scale",
+      "$description": "Type scale on the brand's grid (grid.unit): every size is a multiple of half a unit. Strict: no size between xs and base",
       "xs": "0.75rem",
-      "sm": "0.875rem",
+      "sm": "0.75rem",
       "base": "1rem",
-      "lg": "1.125rem",
-      "xl": "1.25rem",
-      "2xl": "1.625rem",
+      "lg": "1.25rem",
+      "xl": "1.5rem",
+      "2xl": "1.75rem",
       "3xl": "2rem",
-      "4xl": "2.625rem",
-      "5xl": "3.25rem"
+      "4xl": "2.5rem",
+      "5xl": "3rem"
     },
     "weight": {
       "$description": "Font weights for hierarchy",
@@ -368,7 +372,7 @@
     "12": "3rem",
     "16": "4rem",
     "20": "5rem",
-    "$description": "Generous spacing — breathing room, not dense",
+    "$description": "Generous spacing — breathing room, not dense. Multiples of half the brand's grid.unit (spacing.1 = half a unit, spacing.2 = one unit), computed per brand at build time by style-dictionary.config.js; the values written here are what an 8px grid gives. The x-5 steps fall between half-units: avoid them in new work",
     "px": "1px",
     "0-5": "0.125rem",
     "1-5": "0.375rem",
@@ -423,9 +427,9 @@
     "heading": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', sans-serif",
       "h1": {
-        "fontSize": "2.625rem",
+        "fontSize": "2.5rem",
         "fontWeight": "700",
-        "lineHeight": 1.25,
+        "lineHeight": 1.2,
         "letterSpacing": "-0.02em"
       },
       "h2": {
@@ -435,21 +439,21 @@
         "letterSpacing": "-0.01em"
       },
       "h3": {
-        "fontSize": "1.625rem",
+        "fontSize": "1.75rem",
         "fontWeight": "600",
-        "lineHeight": 1.35,
+        "lineHeight": 1.4286,
         "letterSpacing": "-0.01em"
       },
       "h4": {
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "fontWeight": "600",
-        "lineHeight": 1.35,
+        "lineHeight": 1.3333,
         "letterSpacing": "0"
       },
       "h5": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "fontWeight": "500",
-        "lineHeight": 1.5
+        "lineHeight": 1.6
       },
       "h6": {
         "fontSize": "1rem",
@@ -461,14 +465,14 @@
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
       "xl": {
         "$description": "Lead paragraphs and hero subtitles",
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "fontWeight": "400",
-        "lineHeight": 1.5
+        "lineHeight": 1.6667
       },
       "lg": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "fontWeight": "400",
-        "lineHeight": 1.65
+        "lineHeight": 1.6
       },
       "base": {
         "fontSize": "1rem",
@@ -476,22 +480,22 @@
         "lineHeight": 1.5
       },
       "sm": {
-        "fontSize": "0.875rem",
+        "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       },
       "xs": {
         "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
     "label": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
       "base": {
-        "fontSize": "0.875rem",
+        "fontSize": "1rem",
         "fontWeight": "500",
         "lineHeight": 1.5,
         "letterSpacing": "0.01em"
@@ -499,7 +503,7 @@
       "sm": {
         "fontSize": "0.75rem",
         "fontWeight": "500",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
@@ -517,8 +521,8 @@
       "letterSpacing": "0.01em",
       "fontSize": {
         "sm": "1rem",
-        "md": "1.125rem",
-        "lg": "1.25rem"
+        "md": "1.25rem",
+        "lg": "1.5rem"
       }
     },
     "emphasis": {
@@ -527,7 +531,7 @@
     },
     "code": {
       "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
-      "fontSize": "0.875rem",
+      "fontSize": "1rem",
       "lineHeight": 1.5
     }
   },
@@ -632,14 +636,14 @@
         "gap": "0.5rem"
       },
       "md": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "paddingX": "1.5rem",
         "paddingY": "0.75rem",
         "minHeight": "48px",
         "gap": "0.5rem"
       },
       "lg": {
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "paddingX": "2rem",
         "paddingY": "1rem",
         "minHeight": "56px",
@@ -685,7 +689,7 @@
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontSize": "1.125rem",
+      "fontSize": "1.25rem",
       "lineHeight": 1.5,
       "borderRadius": "10px",
       "borderWidth": "2.5px",

package/dist/themes/dark.json

@@ -1,5 +1,9 @@
 {
   "$description": "Dark Theme — warm cocoa base, cozy evening Orange Halo. Overrides tier 2 only; every colour references the palette. Applies when data-theme=\"dark\" is set.",
+  "grid": {
+    "$description": "The brand's layout grid. Spacing is multiples of half a unit; type sizes and line heights sit on it (see style-dictionary.config.js)",
+    "unit": "8px"
+  },
   "color": {
     "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
@@ -194,16 +198,16 @@
       "mono": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
     },
     "size": {
-      "$description": "Slightly expressive type scale",
+      "$description": "Type scale on the brand's grid (grid.unit): every size is a multiple of half a unit. Strict: no size between xs and base",
       "xs": "0.75rem",
-      "sm": "0.875rem",
+      "sm": "0.75rem",
       "base": "1rem",
-      "lg": "1.125rem",
-      "xl": "1.25rem",
-      "2xl": "1.625rem",
+      "lg": "1.25rem",
+      "xl": "1.5rem",
+      "2xl": "1.75rem",
       "3xl": "2rem",
-      "4xl": "2.625rem",
-      "5xl": "3.25rem"
+      "4xl": "2.5rem",
+      "5xl": "3rem"
     },
     "weight": {
       "$description": "Font weights for hierarchy",
@@ -368,7 +372,7 @@
     "12": "3rem",
     "16": "4rem",
     "20": "5rem",
-    "$description": "Generous spacing — breathing room, not dense",
+    "$description": "Generous spacing — breathing room, not dense. Multiples of half the brand's grid.unit (spacing.1 = half a unit, spacing.2 = one unit), computed per brand at build time by style-dictionary.config.js; the values written here are what an 8px grid gives. The x-5 steps fall between half-units: avoid them in new work",
     "px": "1px",
     "0-5": "0.125rem",
     "1-5": "0.375rem",
@@ -423,9 +427,9 @@
     "heading": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', sans-serif",
       "h1": {
-        "fontSize": "2.625rem",
+        "fontSize": "2.5rem",
         "fontWeight": "700",
-        "lineHeight": 1.25,
+        "lineHeight": 1.2,
         "letterSpacing": "-0.02em"
       },
       "h2": {
@@ -435,21 +439,21 @@
         "letterSpacing": "-0.01em"
       },
       "h3": {
-        "fontSize": "1.625rem",
+        "fontSize": "1.75rem",
         "fontWeight": "600",
-        "lineHeight": 1.35,
+        "lineHeight": 1.4286,
         "letterSpacing": "-0.01em"
       },
       "h4": {
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "fontWeight": "600",
-        "lineHeight": 1.35,
+        "lineHeight": 1.3333,
         "letterSpacing": "0"
       },
       "h5": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "fontWeight": "500",
-        "lineHeight": 1.5
+        "lineHeight": 1.6
       },
       "h6": {
         "fontSize": "1rem",
@@ -461,14 +465,14 @@
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
       "xl": {
         "$description": "Lead paragraphs and hero subtitles",
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "fontWeight": "400",
-        "lineHeight": 1.5
+        "lineHeight": 1.6667
       },
       "lg": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "fontWeight": "400",
-        "lineHeight": 1.65
+        "lineHeight": 1.6
       },
       "base": {
         "fontSize": "1rem",
@@ -476,22 +480,22 @@
         "lineHeight": 1.5
       },
       "sm": {
-        "fontSize": "0.875rem",
+        "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       },
       "xs": {
         "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
     "label": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
       "base": {
-        "fontSize": "0.875rem",
+        "fontSize": "1rem",
         "fontWeight": "500",
         "lineHeight": 1.5,
         "letterSpacing": "0.01em"
@@ -499,7 +503,7 @@
       "sm": {
         "fontSize": "0.75rem",
         "fontWeight": "500",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
@@ -517,8 +521,8 @@
       "letterSpacing": "0.01em",
       "fontSize": {
         "sm": "1rem",
-        "md": "1.125rem",
-        "lg": "1.25rem"
+        "md": "1.25rem",
+        "lg": "1.5rem"
       }
     },
     "emphasis": {
@@ -527,7 +531,7 @@
     },
     "code": {
       "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
-      "fontSize": "0.875rem",
+      "fontSize": "1rem",
       "lineHeight": 1.5
     }
   },
@@ -632,14 +636,14 @@
         "gap": "0.5rem"
       },
       "md": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "paddingX": "1.5rem",
         "paddingY": "0.75rem",
         "minHeight": "48px",
         "gap": "0.5rem"
       },
       "lg": {
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "paddingX": "2rem",
         "paddingY": "1rem",
         "minHeight": "56px",
@@ -685,7 +689,7 @@
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontSize": "1.125rem",
+      "fontSize": "1.25rem",
       "lineHeight": 1.5,
       "borderRadius": "10px",
       "borderWidth": "2.5px",

package/dist/tokens.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --oh-grid-unit: 8px; /** 8px grid with 4px half-steps */
   --oh-color-orange-50: #fff3e0;
   --oh-color-orange-100: #ffe0b2;
   --oh-color-orange-200: #ffcc80;
@@ -98,14 +99,13 @@
   --oh-font-family-display: 'Bricolage Grotesque', 'General Sans', sans-serif;
   --oh-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
   --oh-font-size-xs: 0.75rem; /** 12px */
-  --oh-font-size-sm: 0.875rem; /** 14px */
   --oh-font-size-base: 1rem; /** 16px */
-  --oh-font-size-lg: 1.125rem; /** 18px */
-  --oh-font-size-xl: 1.25rem; /** 20px */
-  --oh-font-size-2xl: 1.625rem; /** 26px */
+  --oh-font-size-lg: 1.25rem; /** 20px */
+  --oh-font-size-xl: 1.5rem; /** 24px */
+  --oh-font-size-2xl: 1.75rem; /** 28px */
   --oh-font-size-3xl: 2rem; /** 32px */
-  --oh-font-size-4xl: 2.625rem; /** 42px */
-  --oh-font-size-5xl: 3.25rem; /** 52px */
+  --oh-font-size-4xl: 2.5rem; /** 40px */
+  --oh-font-size-5xl: 3rem; /** 48px */
   --oh-font-weight-normal: 400;
   --oh-font-weight-medium: 500;
   --oh-font-weight-semibold: 600;
@@ -200,6 +200,20 @@
   --oh-z-index-modal: 1200;
   --oh-z-index-popover: 1300;
   --oh-z-index-tooltip: 1400;
+  --oh-typography-heading-h1-line-height: 1.2; /** 48px at 40px: 40px × 1.25, rounded to the 8px grid */
+  --oh-typography-heading-h2-line-height: 1.25; /** 40px at 32px: 32px × 1.25, rounded to the 8px grid */
+  --oh-typography-heading-h3-line-height: 1.4286; /** 40px at 28px: 28px × 1.35, rounded to the 8px grid */
+  --oh-typography-heading-h4-line-height: 1.3333; /** 32px at 24px: 24px × 1.35, rounded to the 8px grid */
+  --oh-typography-heading-h5-line-height: 1.6; /** 32px at 20px: 20px × 1.5, rounded to the 8px grid */
+  --oh-typography-heading-h6-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-xl-line-height: 1.6667; /** 40px at 24px: 24px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-lg-line-height: 1.6; /** 32px at 20px: 20px × 1.65, rounded to the 8px grid */
+  --oh-typography-body-base-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-sm-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-body-xs-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-label-base-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-label-sm-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-code-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
   --oh-elevation-offset-xs: 1px;
   --oh-elevation-offset-sm: 2px;
   --oh-elevation-offset-md: 3px;
@@ -280,6 +294,7 @@
   --oh-color-text-on-error: var(--oh-color-white); /** Text on filled color.feedback.error */
   --oh-color-text-on-warning: var(--oh-color-white); /** Text on filled color.feedback.warning */
   --oh-color-text-on-info: var(--oh-color-white); /** Text on filled color.feedback.info */
+  --oh-font-size-sm: var(--oh-font-size-xs); /** Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role */
   --oh-shadow-primary: var(--oh-shadow-chunky-primary); /** Primary buttons */
   --oh-shadow-secondary: var(--oh-shadow-chunky-secondary); /** Secondary/form elements */
   --oh-shadow-accent: var(--oh-shadow-chunky-accent); /** Accent buttons */
@@ -309,52 +324,39 @@
   --oh-typography-heading-font-family: var(--oh-font-family-display);
   --oh-typography-heading-h1-font-size: var(--oh-font-size-4xl);
   --oh-typography-heading-h1-font-weight: var(--oh-font-weight-bold);
-  --oh-typography-heading-h1-line-height: var(--oh-font-line-height-tight);
   --oh-typography-heading-h1-letter-spacing: var(--oh-font-letter-spacing-tighter);
   --oh-typography-heading-h2-font-size: var(--oh-font-size-3xl);
   --oh-typography-heading-h2-font-weight: var(--oh-font-weight-bold);
-  --oh-typography-heading-h2-line-height: var(--oh-font-line-height-tight);
   --oh-typography-heading-h2-letter-spacing: var(--oh-font-letter-spacing-tight);
   --oh-typography-heading-h3-font-size: var(--oh-font-size-2xl);
   --oh-typography-heading-h3-font-weight: var(--oh-font-weight-semibold);
-  --oh-typography-heading-h3-line-height: var(--oh-font-line-height-snug);
   --oh-typography-heading-h3-letter-spacing: var(--oh-font-letter-spacing-tight);
   --oh-typography-heading-h4-font-size: var(--oh-font-size-xl);
   --oh-typography-heading-h4-font-weight: var(--oh-font-weight-semibold);
-  --oh-typography-heading-h4-line-height: var(--oh-font-line-height-snug);
   --oh-typography-heading-h4-letter-spacing: var(--oh-font-letter-spacing-normal);
   --oh-typography-heading-h5-font-size: var(--oh-font-size-lg);
   --oh-typography-heading-h5-font-weight: var(--oh-font-weight-medium);
-  --oh-typography-heading-h5-line-height: var(--oh-font-line-height-normal);
   --oh-typography-heading-h6-font-size: var(--oh-font-size-base);
   --oh-typography-heading-h6-font-weight: var(--oh-font-weight-medium);
-  --oh-typography-heading-h6-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-font-family: var(--oh-font-family-sans);
   --oh-typography-body-xl-font-size: var(--oh-font-size-xl);
   --oh-typography-body-xl-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-xl-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-lg-font-size: var(--oh-font-size-lg);
   --oh-typography-body-lg-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-lg-line-height: var(--oh-font-line-height-relaxed);
   --oh-typography-body-base-font-size: var(--oh-font-size-base);
   --oh-typography-body-base-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-base-line-height: var(--oh-font-line-height-normal);
-  --oh-typography-body-sm-font-size: var(--oh-font-size-sm);
+  --oh-typography-body-sm-font-size: var(--oh-font-size-xs);
   --oh-typography-body-sm-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-sm-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-sm-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-body-xs-font-size: var(--oh-font-size-xs);
   --oh-typography-body-xs-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-xs-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-xs-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-label-font-family: var(--oh-font-family-sans);
-  --oh-typography-label-base-font-size: var(--oh-font-size-sm);
+  --oh-typography-label-base-font-size: var(--oh-font-size-base);
   --oh-typography-label-base-font-weight: var(--oh-font-weight-medium);
-  --oh-typography-label-base-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
   --oh-typography-label-base-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-label-sm-font-size: var(--oh-font-size-xs);
   --oh-typography-label-sm-font-weight: var(--oh-font-weight-medium);
-  --oh-typography-label-sm-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
   --oh-typography-label-sm-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-eyebrow-font-family: var(--oh-font-family-sans);
   --oh-typography-eyebrow-font-size: var(--oh-font-size-base);
@@ -368,8 +370,7 @@
   --oh-typography-control-font-size-lg: var(--oh-font-size-xl); /** Large buttons */
   --oh-typography-emphasis-font-weight: var(--oh-font-weight-semibold);
   --oh-typography-code-font-family: var(--oh-font-family-mono);
-  --oh-typography-code-font-size: var(--oh-font-size-sm);
-  --oh-typography-code-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-code-font-size: var(--oh-font-size-base);
   --oh-layout-container-sm: var(--oh-size-container-sm);
   --oh-layout-container-md: var(--oh-size-container-md);
   --oh-layout-container-lg: var(--oh-size-container-lg);
@@ -410,6 +411,7 @@
   --oh-button-variant-secondary-background-hover: var(--oh-color-surface-hover);
   --oh-button-variant-secondary-background-active: var(--oh-color-surface-active-pressed);
   --oh-button-focus-glow-color: var(--oh-focus-glow-color);
+  --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
   --oh-input-size-md-padding-x: var(--oh-spacing-4);
   --oh-input-size-md-padding-y: var(--oh-spacing-3);
   --oh-card-base-padding: var(--oh-spacing-5);
@@ -450,7 +452,6 @@
   --oh-button-focus-ring-color: var(--oh-focus-ring-color);
   --oh-input-base-font-family: var(--oh-typography-control-font-family);
   --oh-input-base-font-size: var(--oh-typography-control-font-size-md);
-  --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
   --oh-input-base-border-radius: var(--oh-shape-control);
   --oh-input-base-border-width: var(--oh-stroke-control);
   --oh-input-base-transition-duration: var(--oh-motion-snappy);

package/dist/tokens.js

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const OhGridUnit = "8px"; // 8px grid with 4px half-steps
 export const OhColorOrange50 = "#fff3e0";
 export const OhColorOrange100 = "#ffe0b2";
 export const OhColorOrange200 = "#ffcc80";
@@ -150,14 +151,14 @@ export const OhFontFamilyDisplay =
 export const OhFontFamilyMono =
   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace";
 export const OhFontSizeXs = "0.75rem"; // 12px
-export const OhFontSizeSm = "0.875rem"; // 14px
+export const OhFontSizeSm = "0.75rem"; // Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role
 export const OhFontSizeBase = "1rem"; // 16px
-export const OhFontSizeLg = "1.125rem"; // 18px
-export const OhFontSizeXl = "1.25rem"; // 20px
-export const OhFontSize2xl = "1.625rem"; // 26px
+export const OhFontSizeLg = "1.25rem"; // 20px
+export const OhFontSizeXl = "1.5rem"; // 24px
+export const OhFontSize2xl = "1.75rem"; // 28px
 export const OhFontSize3xl = "2rem"; // 32px
-export const OhFontSize4xl = "2.625rem"; // 42px
-export const OhFontSize5xl = "3.25rem"; // 52px
+export const OhFontSize4xl = "2.5rem"; // 40px
+export const OhFontSize5xl = "3rem"; // 48px
 export const OhFontWeightNormal = "400";
 export const OhFontWeightMedium = "500";
 export const OhFontWeightSemibold = "600";
@@ -295,56 +296,56 @@ export const OhZIndexPopover = 1300;
 export const OhZIndexTooltip = 1400;
 export const OhTypographyHeadingFontFamily =
   "'Bricolage Grotesque', 'General Sans', sans-serif";
-export const OhTypographyHeadingH1FontSize = "2.625rem";
+export const OhTypographyHeadingH1FontSize = "2.5rem";
 export const OhTypographyHeadingH1FontWeight = "700";
-export const OhTypographyHeadingH1LineHeight = 1.25;
+export const OhTypographyHeadingH1LineHeight = 1.2; // 48px at 40px: 40px × 1.25, rounded to the 8px grid
 export const OhTypographyHeadingH1LetterSpacing = "-0.02em";
 export const OhTypographyHeadingH2FontSize = "2rem";
 export const OhTypographyHeadingH2FontWeight = "700";
-export const OhTypographyHeadingH2LineHeight = 1.25;
+export const OhTypographyHeadingH2LineHeight = 1.25; // 40px at 32px: 32px × 1.25, rounded to the 8px grid
 export const OhTypographyHeadingH2LetterSpacing = "-0.01em";
-export const OhTypographyHeadingH3FontSize = "1.625rem";
+export const OhTypographyHeadingH3FontSize = "1.75rem";
 export const OhTypographyHeadingH3FontWeight = "600";
-export const OhTypographyHeadingH3LineHeight = 1.35;
+export const OhTypographyHeadingH3LineHeight = 1.4286; // 40px at 28px: 28px × 1.35, rounded to the 8px grid
 export const OhTypographyHeadingH3LetterSpacing = "-0.01em";
-export const OhTypographyHeadingH4FontSize = "1.25rem";
+export const OhTypographyHeadingH4FontSize = "1.5rem";
 export const OhTypographyHeadingH4FontWeight = "600";
-export const OhTypographyHeadingH4LineHeight = 1.35;
+export const OhTypographyHeadingH4LineHeight = 1.3333; // 32px at 24px: 24px × 1.35, rounded to the 8px grid
 export const OhTypographyHeadingH4LetterSpacing = "0";
-export const OhTypographyHeadingH5FontSize = "1.125rem";
+export const OhTypographyHeadingH5FontSize = "1.25rem";
 export const OhTypographyHeadingH5FontWeight = "500";
-export const OhTypographyHeadingH5LineHeight = 1.5;
+export const OhTypographyHeadingH5LineHeight = 1.6; // 32px at 20px: 20px × 1.5, rounded to the 8px grid
 export const OhTypographyHeadingH6FontSize = "1rem";
 export const OhTypographyHeadingH6FontWeight = "500";
-export const OhTypographyHeadingH6LineHeight = 1.5;
+export const OhTypographyHeadingH6LineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
 export const OhTypographyBodyFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhTypographyBodyXlFontSize = "1.25rem";
+export const OhTypographyBodyXlFontSize = "1.5rem";
 export const OhTypographyBodyXlFontWeight = "400";
-export const OhTypographyBodyXlLineHeight = 1.5;
-export const OhTypographyBodyLgFontSize = "1.125rem";
+export const OhTypographyBodyXlLineHeight = 1.6667; // 40px at 24px: 24px × 1.5, rounded to the 8px grid
+export const OhTypographyBodyLgFontSize = "1.25rem";
 export const OhTypographyBodyLgFontWeight = "400";
-export const OhTypographyBodyLgLineHeight = 1.65;
+export const OhTypographyBodyLgLineHeight = 1.6; // 32px at 20px: 20px × 1.65, rounded to the 8px grid
 export const OhTypographyBodyBaseFontSize = "1rem";
 export const OhTypographyBodyBaseFontWeight = "400";
-export const OhTypographyBodyBaseLineHeight = 1.5;
-export const OhTypographyBodySmFontSize = "0.875rem";
+export const OhTypographyBodyBaseLineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
+export const OhTypographyBodySmFontSize = "0.75rem";
 export const OhTypographyBodySmFontWeight = "400";
-export const OhTypographyBodySmLineHeight = 1.5;
+export const OhTypographyBodySmLineHeight = 1.6667; // 20px at 12px: 12px × 1.5, rounded to the 4px grid
 export const OhTypographyBodySmLetterSpacing = "0.01em";
 export const OhTypographyBodyXsFontSize = "0.75rem";
 export const OhTypographyBodyXsFontWeight = "400";
-export const OhTypographyBodyXsLineHeight = 1.5;
+export const OhTypographyBodyXsLineHeight = 1.6667; // 20px at 12px: 12px × 1.5, rounded to the 4px grid
 export const OhTypographyBodyXsLetterSpacing = "0.01em";
 export const OhTypographyLabelFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhTypographyLabelBaseFontSize = "0.875rem";
+export const OhTypographyLabelBaseFontSize = "1rem";
 export const OhTypographyLabelBaseFontWeight = "500";
-export const OhTypographyLabelBaseLineHeight = 1.5; // 1.5 for WCAG 1.4.12
+export const OhTypographyLabelBaseLineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
 export const OhTypographyLabelBaseLetterSpacing = "0.01em";
 export const OhTypographyLabelSmFontSize = "0.75rem";
 export const OhTypographyLabelSmFontWeight = "500";
-export const OhTypographyLabelSmLineHeight = 1.5; // 1.5 for WCAG 1.4.12
+export const OhTypographyLabelSmLineHeight = 1.6667; // 20px at 12px: 12px × 1.5, rounded to the 4px grid
 export const OhTypographyLabelSmLetterSpacing = "0.01em";
 export const OhTypographyEyebrowFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
@@ -356,13 +357,13 @@ export const OhTypographyControlFontFamily =
 export const OhTypographyControlFontWeight = "600";
 export const OhTypographyControlLetterSpacing = "0.01em";
 export const OhTypographyControlFontSizeSm = "1rem"; // Small buttons, field labels
-export const OhTypographyControlFontSizeMd = "1.125rem"; // Default: input text, choices, buttons
-export const OhTypographyControlFontSizeLg = "1.25rem"; // Large buttons
+export const OhTypographyControlFontSizeMd = "1.25rem"; // Default: input text, choices, buttons
+export const OhTypographyControlFontSizeLg = "1.5rem"; // Large buttons
 export const OhTypographyEmphasisFontWeight = "600";
 export const OhTypographyCodeFontFamily =
   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace";
-export const OhTypographyCodeFontSize = "0.875rem";
-export const OhTypographyCodeLineHeight = 1.5;
+export const OhTypographyCodeFontSize = "1rem";
+export const OhTypographyCodeLineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
 export const OhLayoutContainerSm = "640px";
 export const OhLayoutContainerMd = "768px";
 export const OhLayoutContainerLg = "1024px";
@@ -433,12 +434,12 @@ export const OhButtonSizeSmPaddingX = "1rem";
 export const OhButtonSizeSmPaddingY = "0.5rem";
 export const OhButtonSizeSmMinHeight = "40px";
 export const OhButtonSizeSmGap = "0.5rem";
-export const OhButtonSizeMdFontSize = "1.125rem";
+export const OhButtonSizeMdFontSize = "1.25rem";
 export const OhButtonSizeMdPaddingX = "1.5rem";
 export const OhButtonSizeMdPaddingY = "0.75rem";
 export const OhButtonSizeMdMinHeight = "48px";
 export const OhButtonSizeMdGap = "0.5rem";
-export const OhButtonSizeLgFontSize = "1.25rem";
+export const OhButtonSizeLgFontSize = "1.5rem";
 export const OhButtonSizeLgPaddingX = "2rem";
 export const OhButtonSizeLgPaddingY = "1rem";
 export const OhButtonSizeLgMinHeight = "56px";
@@ -465,7 +466,7 @@ export const OhButtonFocusRingColor = "#c54300";
 export const OhButtonFocusGlowColor = "#c5430026";
 export const OhInputBaseFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhInputBaseFontSize = "1.125rem";
+export const OhInputBaseFontSize = "1.25rem";
 export const OhInputBaseLineHeight = 1.5;
 export const OhInputBaseBorderRadius = "10px";
 export const OhInputBaseBorderWidth = "2.5px";