@flamingo-stack/openframe-frontend-core 0.0.439 → 0.0.440

package/src/components/ui/file-upload.tsx

@@ -329,21 +329,21 @@ export function FileUpload({
                       <FileIcon className="size-6 text-ods-text-secondary" />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <p className="text-heading-4 font-medium text-ods-text-primary truncate" title={entry.fileName}>
+                      <p className="text-h4 text-ods-text-primary truncate" title={entry.fileName}>
                         {entry.fileName}
                       </p>
                       <div className="flex items-center gap-[var(--spacing-system-xsf)]">
-                        <span className="text-heading-5 text-ods-text-secondary">
+                        <span className="text-h6 text-ods-text-secondary">
                           {formatFileSize(entry.fileSize)}
                         </span>
                         {entry.status === "uploading" && (
-                          <span className="flex items-center gap-[var(--spacing-system-xxs)] text-heading-5 text-ods-text-secondary">
+                          <span className="flex items-center gap-[var(--spacing-system-xxs)] text-h6 text-ods-text-secondary">
                             <Loader2 className="size-3 animate-spin" />
                             Uploading...
                           </span>
                         )}
                         {entry.status === "error" && (
-                          <span className="text-heading-5 text-ods-error">
+                          <span className="text-h6 text-ods-error">
                             {entry.error || "Upload failed"}
                           </span>
                         )}
@@ -380,10 +380,10 @@ export function FileUpload({
                       <FileIcon className="size-6 text-ods-text-secondary" />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <p className="text-heading-4 font-medium text-ods-text-primary truncate" title={file.name}>
+                      <p className="text-h4 text-ods-text-primary truncate" title={file.name}>
                         {file.name}
                       </p>
-                      <p className="text-heading-5 text-ods-text-secondary">
+                      <p className="text-h6 text-ods-text-secondary">
                         {formatFileSize(file.size)}
                       </p>
                     </div>
@@ -424,9 +424,9 @@ export function FileUpload({
           <div className="flex items-center p-[var(--spacing-system-sf)] rounded-full bg-ods-card border border-ods-border shrink-0">
             {icon || <ImagePlusIcon className="size-6 text-ods-text-primary" />}
           </div>
-          <div className="flex flex-1 flex-col font-['DM_Sans'] font-medium min-w-0">
-            <span className="text-heading-4 text-ods-text-primary">{label}</span>
-            <span className="text-heading-5 text-ods-text-secondary">{description}</span>
+          <div className="flex flex-1 flex-col min-w-0">
+            <span className="text-h4 text-ods-text-primary">{label}</span>
+            <span className="text-h6 text-ods-text-secondary">{description}</span>
           </div>
         </button>
         )}

package/src/components/ui/filter-pill-row.tsx

@@ -63,7 +63,7 @@ export function FilterPillRow({
           </Button>
         ))}
       {countLabel && (
-        <div className="ml-auto text-[12px] font-['DM_Sans'] text-ods-text-secondary shrink-0">
+        <div className="ml-auto text-h6 text-ods-text-secondary shrink-0">
           {countLabel}
         </div>
       )}

package/src/components/ui/floating-tooltip.tsx

@@ -175,7 +175,7 @@ export function FloatingTooltip({
           >
             {/* Scroll wrapper — `min-h-0` lets it shrink below content height inside
                 the max-height cap set by the `size` middleware, so tall content scrolls. */}
-            <div className="min-h-0 overflow-y-auto px-3 py-2.5 text-sm leading-relaxed text-ods-text-primary whitespace-pre-line">
+            <div className="min-h-0 overflow-y-auto px-3 py-2.5 text-h6 text-ods-text-primary whitespace-pre-line">
               {parsedContent}
             </div>
             {/* Arrow element */}

package/src/components/ui/highlight-card.tsx

@@ -41,7 +41,7 @@ export function HighlightCard({
             width: `${desktopWidth}px`
           }}
         />
-        <h3 className="font-['Azeret_Mono'] font-semibold text-[24px] md:text-[28px] lg:text-[32px] leading-[1.25] tracking-[-0.64px] text-ods-text-primary relative z-10">
+        <h3 className="text-h2 text-ods-text-primary relative z-10">
           Your{' '}
           <span style={{ color: item.categoryColor }}>
             {item.category}

package/src/components/ui/hover-dropdown.tsx

@@ -190,7 +190,7 @@ export function HoverDropdown({
             // occupies the left expanding region; the optional secondary
             // action ("Ask") sits at the right as a sibling icon-button so
             // its click is independent of the primary navigation.
-            const rowClass = 'group flex w-full items-center gap-1.5 pl-2 pr-1 py-1.5 rounded text-[11px] text-ods-text-secondary hover:bg-ods-accent/10 transition-colors text-left'
+            const rowClass = 'group flex w-full items-center gap-1.5 pl-2 pr-1 py-1.5 rounded text-h6 text-ods-text-secondary hover:bg-ods-accent/10 transition-colors text-left'
             const primaryClass = 'flex flex-1 items-center gap-1.5 min-w-0 hover:text-ods-accent cursor-pointer no-underline'
 
             const secondary = item.secondaryAction ? (

package/src/components/ui/image-gallery-modal.tsx

@@ -147,7 +147,7 @@ export function ImageGalleryModal({
 
         {/* Image Counter */}
         {images.length > 1 && (
-          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[10000] px-4 py-2 rounded-full bg-black/50 text-white text-sm">
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[10000] px-4 py-2 rounded-full bg-black/50 text-white text-h6">
             {selectedImageIndex + 1} / {images.length}
           </div>
         )}

package/src/components/ui/info-row.tsx

@@ -12,7 +12,7 @@ export function InfoRow({ label, value, icon }: InfoRowProps) {
       <div className="text-h4 text-ods-text-primary overflow-hidden text-ellipsis whitespace-nowrap">
         {label}
       </div>
-      <div className="flex-1 bg-[#3a3a3a] h-px min-h-px min-w-px" />
+      <div className="flex-1 bg-ods-border h-px min-h-px min-w-px" />
       <div className="text-h4 text-ods-text-primary overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-1">
         {value}
         {icon}

package/src/components/ui/input.tsx

@@ -26,7 +26,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 
 const invalidBorderClasses = {
   error: "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
-  warning: "!border-[var(--ods-attention-yellow-warning)] hover:!border-[var(--ods-attention-yellow-warning)] has-[:focus]:!border-[var(--ods-attention-yellow-warning)]",
+  warning: "!border-ods-warning hover:!border-ods-warning has-[:focus]:!border-ods-warning",
 } as const;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(

package/src/components/ui/label.tsx

@@ -7,14 +7,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../utils/cn"
 
 const labelVariants = cva(
-  "block font-body font-medium text-ods-text-primary leading-6",
+  "block text-ods-text-primary",
   {
     variants: {
       variant: {
-        default: "text-[18px]",
-        small: "text-[14px]",
-        medium: "text-[16px]",
-        large: "text-[20px]"
+        default: "text-h4",
+        small: "text-h6",
+        medium: "text-h6",
+        large: "text-h4"
       },
       spacing: {
         default: "mb-1",

package/src/components/ui/markdown-editor.tsx

@@ -12,8 +12,8 @@ const MARKDOWN_EDITOR_STYLE_ID = "ods-markdown-editor-styles"
 const mdEditorCSS = `
 :root { --md-editor-text-color: var(--color-text-primary) !important; }
 body .w-md-editor { background-color: var(--color-bg) !important; border: 1px solid var(--ods-system-greys-soft-grey) !important; border-radius: 6px !important; --md-editor-text-color: var(--color-text-primary) !important; --md-editor-box-shadow-color: transparent !important; box-shadow: none !important; }
-body .w-md-editor-area, body .w-md-editor-input, body .w-md-editor-text, body .w-md-editor-text-pre, body .w-md-editor-text-input, body .w-md-editor-text-textarea { background-color: var(--color-bg-card) !important; color: var(--color-text-primary) !important; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; padding: 16px !important; }
-body .w-md-editor-text-textarea::placeholder { color: var(--color-text-secondary) !important; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 18px !important; font-weight: 500 !important; }
+body .w-md-editor-area, body .w-md-editor-input, body .w-md-editor-text, body .w-md-editor-text-pre, body .w-md-editor-text-input, body .w-md-editor-text-textarea { background-color: var(--color-bg-card) !important; color: var(--color-text-primary) !important; font-family: var(--font-family-body) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; padding: 16px !important; }
+body .w-md-editor-text-textarea::placeholder { color: var(--color-text-secondary) !important; font-family: var(--font-family-body) !important; font-size: 18px !important; font-weight: 500 !important; }
 body .w-md-editor-text .token, body .w-md-editor-text-pre .token, body .w-md-editor-text-textarea, body .w-md-editor-text-input { color: var(--color-text-primary) !important; }
 body .w-md-editor-text-pre *, body .w-md-editor-text-textarea *, body .w-md-editor-text-input *, body .w-md-editor-text * { color: var(--color-text-primary) !important; }
 body .w-md-editor-text-pre .token.title, body .w-md-editor-text-pre .token.bold, body .w-md-editor-text-pre .token.code, body .w-md-editor-text-pre .token.string, body .w-md-editor-text-pre .token.keyword { color: var(--color-text-primary) !important; }
@@ -331,8 +331,7 @@ export function MarkdownEditor({
             placeholder,
             disabled,
             style: {
-              fontFamily:
-                'DM Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              fontFamily: 'var(--font-family-body)',
               fontSize: "18px",
               fontWeight: 500,
               lineHeight: "24px",
@@ -345,7 +344,7 @@ export function MarkdownEditor({
       )}
 
       {uploadProgress && (
-        <p className="text-xs text-ods-text-secondary mt-1">{uploadProgress}</p>
+        <p className="text-h6 text-ods-text-secondary mt-1">{uploadProgress}</p>
       )}
 
       <MarkdownEditorStyles />

package/src/components/ui/menubar.tsx

@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -132,7 +132,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -155,7 +155,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -179,7 +179,7 @@ const MenubarLabel = React.forwardRef<
   <MenubarPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-2 py-1.5 text-h6 font-semibold",
       inset && "pl-8",
       className
     )}
@@ -207,7 +207,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto text-h6 text-muted-foreground",
         className
       )}
       {...props}

package/src/components/ui/modal-v2.tsx

@@ -80,7 +80,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         <div
           data-state={state}
           className={cn(
-            "absolute inset-0 bg-black/50 backdrop-blur-[2px] md:backdrop-blur-none",
+            "absolute inset-0 bg-ods-overlay backdrop-blur-[2px] md:backdrop-blur-none",
             "duration-200 fill-mode-forwards",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",

package/src/components/ui/modal.tsx

@@ -58,7 +58,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
     return (
       <div className="fixed inset-0 z-[1300] flex items-center justify-center">
         <div 
-          className="absolute inset-0 bg-black/50" 
+          className="absolute inset-0 bg-ods-overlay"
           onClick={onClose}
           aria-hidden="true"
         />

package/src/components/ui/more-actions-menu.tsx

@@ -112,7 +112,7 @@ export function MoreActionsMenu({
                   {item.icon}
                 </div>
               )}
-              <span className="font-medium text-[18px] leading-6 text-ods-text-primary">
+              <span className="text-h4 text-ods-text-primary">
                 {item.label}
               </span>
             </>

package/src/components/ui/navigation-menu.tsx

@@ -43,7 +43,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-h6 transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 )
 
 const NavigationMenuTrigger = React.forwardRef<

package/src/components/ui/organization-card.tsx

@@ -73,7 +73,7 @@ export function OrganizationCard({
       {deviceCount !== undefined && (
         <div className="absolute top-4 right-4 flex items-center gap-2 shrink-0">
           <Monitor className="w-4 h-4 text-ods-text-secondary" />
-          <span className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+          <span className="text-h6 text-ods-text-secondary">
             {deviceCount.toLocaleString()} devices
           </span>
         </div>
@@ -85,8 +85,8 @@ export function OrganizationCard({
           className={cn(
             "absolute top-2 right-2 h-8 w-8 rounded flex items-center justify-center z-10 transition-colors",
             actionButton.variant === 'primary'
-              ? "bg-ods-accent text-black hover:bg-ods-accent-hover"
-              : "text-ods-text-secondary hover:text-red-500 hover:bg-red-100/10"
+              ? "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover"
+              : "text-ods-text-secondary hover:text-ods-error hover:bg-ods-error-secondary"
           )}
           onClick={handleActionClick}
           disabled={actionButton.disabled}
@@ -104,10 +104,10 @@ export function OrganizationCard({
         />
 
         <div className="flex-1 flex flex-col justify-center py-2 min-w-0">
-          <h3 className="font-['DM_Sans'] font-bold text-lg leading-[1.33] tracking-[-0.02em] text-ods-text-primary transition-colors truncate" title={organization.name}>
+          <h3 className="text-h3 text-ods-text-primary transition-colors truncate" title={organization.name}>
             {organization.name}
           </h3>
-          <p className="font-['DM_Sans'] font-medium text-sm leading-[1.43] text-ods-text-secondary truncate" title={organization.industry || organization.tier || organization.websiteUrl || "Organization"}>
+          <p className="text-h6 text-ods-text-secondary truncate" title={organization.industry || organization.tier || organization.websiteUrl || "Organization"}>
             {organization.industry || organization.tier || organization.websiteUrl || "Organization"}
           </p>
         </div>
@@ -116,7 +116,7 @@ export function OrganizationCard({
       {/* Description */}
       {organization.description && (
         <div className="w-full h-12 overflow-hidden">
-          <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary line-clamp-2" title={organization.description}>
+          <p className="text-h4 text-ods-text-primary line-clamp-2" title={organization.description}>
             {organization.description}
           </p>
         </div>
@@ -131,11 +131,11 @@ export function OrganizationCard({
             {footerStats.map((stat, index) => (
               <div key={index} className="flex items-center gap-1 flex-shrink-0">
                 {stat.icon}
-                <span className="font-['DM_Sans'] font-medium text-base text-ods-text-primary">
+                <span className="text-h6 text-ods-text-primary">
                   {typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value}
                 </span>
                 {stat.label && (
-                  <span className="font-['DM_Sans'] font-medium text-sm text-ods-text-secondary">
+                  <span className="text-h6 text-ods-text-secondary">
                     {stat.label}
                   </span>
                 )}

package/src/components/ui/page-loader.tsx

@@ -46,15 +46,15 @@ export function PageLoader({
             <OpenFrameLogo 
               className="w-6 h-6 animate-pulse text-ods-accent"
               upperPathColor="currentColor"
-              lowerPathColor="var(--ods-text-tertiary)"
+              lowerPathColor="var(--color-text-tertiary)"
             />
           </div>
         )}
         <div className="flex flex-col items-center text-center">
-          <p className="text-lg font-medium text-ods-text-tertiary leading-6">
+          <p className="text-h4 text-ods-text-tertiary">
             {title}
           </p>
-          <p className="text-sm font-medium text-ods-text-tertiary opacity-70 leading-5 mt-1">
+          <p className="text-h6 text-ods-text-tertiary opacity-70 mt-1">
             {description}
           </p>
         </div>
@@ -85,16 +85,16 @@ export function CompactPageLoader({
             <OpenFrameLogo 
               className="w-6 h-6 animate-pulse text-ods-accent"
               upperPathColor="currentColor"
-              lowerPathColor="var(--ods-text-tertiary)"
+              lowerPathColor="var(--color-text-tertiary)"
             />
           </div>
         )}
         <div className="flex flex-col items-center text-center">
-          <p className="text-base font-medium text-ods-text-tertiary">
+          <p className="text-h6 text-ods-text-tertiary">
             {title}
           </p>
           {description && (
-            <p className="text-sm text-ods-text-tertiary opacity-70 mt-1">
+            <p className="text-h6 text-ods-text-tertiary opacity-70 mt-1">
               {description}
             </p>
           )}

package/src/components/ui/phone-input.tsx

@@ -114,7 +114,7 @@ export function PhoneInput({
         disabled={disabled}
         placeholder={placeholder}
         onKeyDown={onKeyDown}
-        className={`min-w-0 flex-1 ${isInvalid ? '!border-[var(--ods-attention-yellow-warning)]' : ''}`}
+        className={`min-w-0 flex-1 ${isInvalid ? '!border-ods-warning' : ''}`}
       />
     </div>
   )

package/src/components/ui/progress-bar.tsx

@@ -56,15 +56,15 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
     if (inverted) {
       // Inverted: high values = good (green), low values = bad (red)
       // For battery health: 100% = green, <30% = red
-      if (progress >= criticalThreshold) return "var(--ods-attention-green-success)"; // high = green
+      if (progress >= criticalThreshold) return "var(--color-success)"; // high = green
       if (progress >= warningThreshold) return "var(--color-warning)"; // medium = warning
-      return "var(--ods-attention-red-error)"; // low = red
+      return "var(--color-error)"; // low = red
     } else {
       // Normal: high values = bad (red), low values = good (green)
       // For disk usage: 100% = red, <70% = green
-      if (progress >= criticalThreshold) return "var(--ods-attention-red-error)"; // critical red
+      if (progress >= criticalThreshold) return "var(--color-error)"; // critical red
       if (progress >= warningThreshold) return "var(--color-warning)"; // warning yellow
-      return "var(--ods-attention-green-success)"; // base green
+      return "var(--color-success)"; // base green
     }
   };
 
@@ -84,7 +84,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
             backgroundColor:
               i < Math.round((progress / 100) * segmentCount)
                 ? getColor()
-                : "var(--ods-system-greys-soft-grey-action)", // unfilled segments
+                : "var(--color-bg-surface-active)", // unfilled segments
           }}
         />
       ))}

package/src/components/ui/query-report-table/.query-report-table-header.md

@@ -24,7 +24,7 @@ import { QueryReportTableHeader } from './query-report-table-header'
   columns={['hostname', 'ip_address', 'os_version', 'last_seen']}
   columnWidth={160}
   variant="compact"
-  className="bg-ods-surface"
+  className="bg-ods-bg-surface"
 />
 ```
 

package/src/components/ui/query-report-table/query-report-table-header.tsx

@@ -58,7 +58,7 @@ function TruncatedHeaderCell({ value, width }: { value: string; width: number })
           >
             <div
               ref={textRef}
-              className="font-mono font-medium text-[14px] leading-[20px] text-ods-text-secondary uppercase tracking-[-0.28px] truncate"
+              className="text-h5 text-ods-text-secondary truncate"
             >
               {value}
             </div>

package/src/components/ui/query-report-table/query-report-table-row.tsx

@@ -45,8 +45,8 @@ export function QueryReportTableRow({
                 className={cn(
                   'text-ods-text-primary',
                   isCompact
-                    ? 'font-sans font-normal text-[14px] leading-[20px]'
-                    : 'font-sans font-medium text-[18px] leading-[24px]'
+                    ? 'text-h6'
+                    : 'text-h4'
                 )}
                 value={displayValue}
               />

package/src/components/ui/query-report-table/query-report-table.tsx

@@ -62,7 +62,7 @@ export function QueryReportTable({
       {/* Title bar — hidden in compact mode and when empty */}
       {!isCompact && (title || headerActions || (showExport && data.length > 0)) && (
         <div className="flex items-end justify-between pt-6">
-          <h2 className="font-mono font-semibold text-[32px] leading-[40px] text-ods-text-primary">
+          <h2 className="text-h2 text-ods-text-primary">
             {title}
           </h2>
           <div className="flex items-center gap-3">

package/src/components/ui/release-changelog-section.tsx

@@ -72,7 +72,7 @@ export function ReleaseChangelogSection({
             onClick={() => setCollapsed(!collapsed)}
             className="flex items-center justify-between w-full cursor-pointer"
           >
-            <h2 className={`flex items-center gap-2 text-2xl font-bold ${isBreaking ? 'text-red-500' : 'text-ods-text-primary'}`}>
+            <h2 className={`flex items-center gap-2 text-h2 ${isBreaking ? 'text-ods-error' : 'text-ods-text-primary'}`}>
               {icon}
               {title}
               <Badge variant="secondary" className="ml-2">{entries.length}</Badge>
@@ -84,7 +84,7 @@ export function ReleaseChangelogSection({
             />
           </button>
         ) : (
-          <h2 className={`flex items-center gap-2 text-2xl font-bold ${isBreaking ? 'text-red-500' : 'text-ods-text-primary'}`}>
+          <h2 className={`flex items-center gap-2 text-h2 ${isBreaking ? 'text-ods-error' : 'text-ods-text-primary'}`}>
             {icon}
             {title}
             <Badge variant="secondary" className="ml-2">{entries.length}</Badge>

package/src/components/ui/rich-markdown-renderer.tsx

@@ -713,7 +713,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
           <div className={`code-block-container border rounded-lg my-6 overflow-hidden ${
             isDarkMode
               ? 'bg-ods-card border-ods-border'
-              : 'bg-ods-bg-secondary border-ods-border'
+              : 'bg-ods-bg-surface border-ods-border'
           }`}>
             <div className={`code-header border-b px-4 py-2 ${
               isDarkMode
@@ -734,7 +734,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
                     fontSize: '14px',
                     fontFamily: "'JetBrains Mono', 'SF Mono', Consolas, monospace",
                     background: 'transparent',
-                    color: isDarkMode ? 'var(--ods-text-primary)' : 'var(--ods-text-primary)'
+                    color: isDarkMode ? 'var(--color-text-primary)' : 'var(--color-text-primary)'
                   }}
                   {...props}
                 >
@@ -751,7 +751,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
           className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded border ${
             isDarkMode
               ? 'bg-ods-card text-ods-text-primary border-ods-border'
-              : 'bg-ods-bg-secondary text-ods-text-primary border-ods-border'
+              : 'bg-ods-bg-surface text-ods-text-primary border-ods-border'
           }`}
           {...props}
         >
@@ -821,7 +821,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
 
     // Style blockquotes
     blockquote: ({ children }: any) => (
-      <blockquote className={`border-l-4 border-[#FFC008] ml-0 pl-6 my-8 py-4 rounded-r-lg ${
+      <blockquote className={`border-l-4 border-ods-accent ml-0 pl-6 my-8 py-4 rounded-r-lg ${
         isDarkMode
           ? 'bg-[#1F1F1F]'
           : 'bg-[#F8F9FA]'
@@ -1013,7 +1013,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
         return (
           <span className="text-ods-accent cursor-not-allowed">
             {children}
-            <sup className="ml-1 text-xs font-bold text-red-500">[BROKEN]</sup>
+            <sup className="ml-1 text-xs font-bold text-ods-error">[BROKEN]</sup>
           </span>
         );
       }
@@ -1136,7 +1136,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
       </div>
     ),
     thead: ({ children }: any) => (
-      <thead className={isDarkMode ? 'bg-ods-bg-secondary' : 'bg-ods-bg-secondary'}>
+      <thead className={isDarkMode ? 'bg-ods-bg-surface' : 'bg-ods-bg-surface'}>
         {children}
       </thead>
     ),

package/src/components/ui/search-input.tsx

@@ -326,19 +326,19 @@ export function SearchInput({
       )}
       <div className="min-w-0 flex-1">
         <div className={cn(
-          "text-sm font-medium leading-5 truncate",
+          "text-h6 truncate",
           isHighlighted ? "text-ods-accent" : "text-ods-text-primary"
         )} title={result.title}>
           {result.title}
         </div>
         {result.description && (
-          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5" title={result.description}>
+          <div className="text-h6 text-ods-text-secondary truncate mt-0.5" title={result.description}>
             {result.description}
           </div>
         )}
       </div>
       {result.type && (
-        <span className="flex-shrink-0 text-[11px] font-medium text-ods-text-muted uppercase tracking-wider">
+        <span className="flex-shrink-0 text-h6 text-ods-text-muted uppercase">
           {result.type}
         </span>
       )}
@@ -370,7 +370,7 @@ export function SearchInput({
   const renderDropdownContent = () => {
     if (isLoading) {
       return (
-        <div className="px-4 py-3 text-ods-text-secondary text-[14px]">
+        <div className="px-4 py-3 text-ods-text-secondary text-h6">
           Loading...
         </div>
       )
@@ -378,7 +378,7 @@ export function SearchInput({
 
     if (flatResults.length === 0) {
       return (
-        <div className="px-4 py-3 text-ods-text-secondary text-[14px]">
+        <div className="px-4 py-3 text-ods-text-secondary text-h6">
           {emptyResultsText}
         </div>
       )
@@ -388,7 +388,7 @@ export function SearchInput({
       let globalIndex = 0
       return Array.from(groups.entries()).map(([groupLabel, groupResults]) => (
         <div key={groupLabel}>
-          <div className="px-4 py-2 text-[12px] font-semibold text-ods-text-secondary uppercase tracking-wide bg-ods-bg">
+          <div className="px-4 py-2 text-h6 font-semibold text-ods-text-secondary uppercase bg-ods-bg">
             {groupLabel}
           </div>
           {groupResults.map((result) => {
@@ -451,7 +451,7 @@ export function SearchInput({
                     className={cn(
                       "flex items-center h-8 px-2",
                       "bg-ods-card border border-ods-border rounded-[6px]",
-                      "font-mono text-[14px] font-medium leading-5 text-ods-text-secondary uppercase tracking-[-0.28px]",
+                      "text-h5 text-ods-text-secondary",
                       "hover:bg-ods-bg-hover transition-colors cursor-pointer",
                     )}
                     aria-label={`${hiddenCount} more selected filters`}

package/src/components/ui/select.tsx

@@ -137,7 +137,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 pl-8 pr-2 text-h6 font-semibold", className)}
     {...props}
   />
 ))