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

package/src/components/navigation/app-header.tsx

@@ -183,12 +183,12 @@ export const AppHeader = React.memo(function AppHeader({
               />
               <div className="flex-1 min-w-0">
                 {userName && (
-                  <div className="text-[18px] font-medium text-ods-text-primary truncate leading-6">
+                  <div className="text-h4 text-ods-text-primary truncate">
                     {userName}
                   </div>
                 )}
                 {userEmail && (
-                  <div className="text-[14px] text-ods-text-secondary truncate leading-5">
+                  <div className="text-h6 text-ods-text-secondary truncate">
                     {userEmail}
                   </div>
                 )}
@@ -198,21 +198,21 @@ export const AppHeader = React.memo(function AppHeader({
             {/* Menu items */}
             <DropdownMenuItem
               onClick={onProfile}
-              className="bg-ods-card border-b border-ods-border rounded-none px-3 py-3 hover:bg-ods-bg-card/80 focus:bg-ods-bg-card/80 cursor-pointer"
+              className="bg-ods-card border-b border-ods-border rounded-none px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80 cursor-pointer"
             >
               <div className="flex items-center gap-2">
                 <UserIcon className="h-6 w-6 text-ods-text-primary shrink-0" />
-                <span className="text-[18px] font-medium text-ods-text-primary">Profile Settings</span>
+                <span className="text-h4 text-ods-text-primary">Profile Settings</span>
               </div>
             </DropdownMenuItem>
 
             <DropdownMenuItem
               onClick={onLogout}
-              className="bg-ods-card rounded-none px-3 py-3 hover:bg-ods-bg-card/80 focus:bg-ods-bg-card/80 cursor-pointer"
+              className="bg-ods-card rounded-none px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80 cursor-pointer"
             >
               <div className="flex items-center gap-2">
                 <LogOutIcon className="text-ods-error shrink-0" size={24} />
-                <span className="text-[18px] font-medium text-ods-text-primary">Log Out</span>
+                <span className="text-h4 text-ods-text-primary">Log Out</span>
               </div>
             </DropdownMenuItem>
           </DropdownMenuContent>

package/src/components/navigation/header-organization-filter.tsx

@@ -48,11 +48,11 @@ export function HeaderOrganizationFilter({
         >
           <Filter02Icon className="w-4 h-4 shrink-0 text-ods-text-secondary" />
           <div className="flex flex-col items-start justify-center min-w-0">
-            <span className="font-mono text-sm font-medium leading-5 text-ods-text-primary uppercase tracking-tight truncate" title={displayName}>
+            <span className="text-h5 text-ods-text-primary truncate" title={displayName}>
               {displayName}
             </span>
             {deviceCount !== undefined && (
-              <span className="text-sm font-medium leading-5 text-ods-text-secondary truncate">
+              <span className="text-h6 text-ods-text-secondary truncate">
                 {deviceCount.toLocaleString()} Devices
               </span>
             )}

package/src/components/navigation/header.tsx

@@ -133,7 +133,7 @@ export function Header({ config, platform }: HeaderProps) {
             }}
             size="small-legacy"
             className={cn(
-              "font-bold text-[16px] leading-none tracking-[-0.32px]",
+              "text-h6 font-bold",
               item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
               isOpen && 'bg-ods-bg-hover', // Open dropdowns get gray background
               item.className
@@ -189,7 +189,7 @@ export function Header({ config, platform }: HeaderProps) {
                   }}
                   className={cn(
                     "flex justify-start w-full",
-                    "font-bold text-[16px] leading-none tracking-[-0.32px]",
+                    "text-h6 font-bold",
                     index < (item.children?.length ?? 0) - 1 && "mb-1",
                     "text-ods-text-primary", // All dropdown items use primary text color
                     child.isActive && 'bg-ods-bg-hover' // Active dropdown items get gray background
@@ -225,7 +225,7 @@ export function Header({ config, platform }: HeaderProps) {
           rightIcon={item.badge}
           size="small-legacy"
           className={cn(
-            "font-bold text-[16px] leading-none tracking-[-0.32px]",
+            "text-h6 font-bold",
             "hover:bg-ods-bg-hover focus:bg-ods-bg-hover",
             "whitespace-nowrap",
             "text-ods-text-primary", // All items use primary text color
@@ -249,7 +249,7 @@ export function Header({ config, platform }: HeaderProps) {
         rightIcon={item.badge}
         size="small-legacy"
         className={cn(
-          "font-bold text-[16px] leading-none tracking-[-0.32px]",
+          "text-h6 font-bold",
           "hover:bg-ods-bg-hover focus:bg-ods-bg-hover",
           "whitespace-nowrap",
           "text-ods-text-primary", // All items use primary text color

package/src/components/navigation/mobile-burger-menu.tsx

@@ -81,7 +81,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
           "flex items-center gap-1 p-3 relative",
           "transition-colors duration-200",
           "bg-ods-card border border-ods-border rounded-md",
-          !disabled && "hover:bg-ods-hover",
+          !disabled && "hover:bg-ods-bg-hover",
           isGridItem ? "flex-1 min-w-0" : "w-full",
           // Active state
           isActive && !disabled && "border-ods-accent",
@@ -102,7 +102,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
 
         {/* Label */}
         <span className={cn(
-          "font-['DM_Sans'] font-medium text-sm leading-5 flex-1 text-left truncate",
+          "text-h6 flex-1 text-left truncate",
           isActive && !disabled ? "text-ods-accent" : "text-ods-text-primary"
         )}>
           {item.label}
@@ -204,17 +204,17 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
               {/* User Info */}
               <div className="flex-1 min-w-0 flex flex-col">
                 <div className="flex items-center gap-2">
-                  <span className="font-medium text-sm text-ods-text-primary truncate">
+                  <span className="text-h6 text-ods-text-primary truncate">
                     {user.userName || 'User'}
                   </span>
                   {user.userRole && (
-                    <span className="shrink-0 px-2 py-0.5 bg-ods-card border border-ods-border rounded-md font-medium text-xs text-ods-text-primary uppercase tracking-tight">
+                    <span className="shrink-0 px-2 py-0.5 bg-ods-card border border-ods-border rounded-md text-h6 uppercase text-ods-text-primary">
                       {user.userRole}
                     </span>
                   )}
                 </div>
                 {user.userEmail && (
-                  <span className="font-medium text-xs text-ods-text-secondary truncate">
+                  <span className="text-h6 text-ods-text-secondary truncate">
                     {user.userEmail}
                   </span>
                 )}
@@ -269,12 +269,12 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
               disabled={disabled}
               className={cn(
                 "w-full flex items-center gap-1 p-3 bg-ods-card border border-ods-border rounded-md transition-colors",
-                !disabled && "hover:bg-ods-hover",
+                !disabled && "hover:bg-ods-bg-hover",
                 disabled && "cursor-not-allowed opacity-50"
               )}
             >
               <Logout02Icon className="size-4 text-ods-error" />
-              <span className="font-['DM_Sans'] font-medium text-sm leading-5 flex-1 text-left text-ods-text-primary">
+              <span className="text-h6 flex-1 text-left text-ods-text-primary">
                 Log Out
               </span>
             </button>

package/src/components/navigation/mobile-nav-panel.tsx

@@ -134,7 +134,7 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
             {config.sections.map((section, index) => (
               <div key={index}>
                 {section.title && (
-                  <div className="px-4 pt-2 pb-1 text-xs font-semibold text-ods-text-secondary uppercase tracking-wide">
+                  <div className="px-4 pt-2 pb-1 text-h6 font-semibold uppercase text-ods-text-secondary">
                     {section.title}
                   </div>
                 )}

package/src/components/navigation/multi-level-navigation.tsx

@@ -157,8 +157,8 @@ function NavigationItem({
           <div className="flex items-center relative">
             <button
               className={cn(
-                "w-full flex items-center h-12 px-2 rounded-lg text-[16px] font-medium font-['DM_Sans'] transition-all duration-150 leading-[1.33em] text-ods-text-primary",
-                !isSelected && "hover:bg-ods-bg-secondary",
+                "w-full flex items-center h-12 px-2 rounded-lg text-h6 transition-all duration-150 text-ods-text-primary",
+                !isSelected && "hover:bg-ods-bg-hover",
                 hasChildren && "pr-12"
               )}
               onClick={() => onNodeClick(node)}
@@ -175,7 +175,7 @@ function NavigationItem({
                 {node.name.endsWith('.md') ? node.name.replace('.md', '') : node.name}
               </span>
               {node.type === 'folder' && node.hasReadme && (
-                <span className="text-[10px] bg-ods-bg-secondary text-ods-text-tertiary px-1.5 py-0.5 rounded mr-2">
+                <span className="text-h6 bg-ods-bg-surface text-ods-text-tertiary px-1.5 py-0.5 rounded mr-2">
                   README
                 </span>
               )}
@@ -290,8 +290,8 @@ function MobileNavigationItem({
           <div className="flex items-center relative">
             <button
               className={cn(
-                "w-full flex items-center h-11 px-2 rounded-lg text-[15px] font-medium font-['DM_Sans'] transition-all duration-150 leading-[1.33em] text-ods-text-primary",
-                !isSelected && "hover:bg-ods-bg-secondary",
+                "w-full flex items-center h-11 px-2 rounded-lg text-h6 transition-all duration-150 text-ods-text-primary",
+                !isSelected && "hover:bg-ods-bg-hover",
                 hasChildren && "pr-11"
               )}
               onClick={() => onNodeClick(node)}
@@ -303,11 +303,11 @@ function MobileNavigationItem({
                   <FileText className="h-4 w-4" />
                 )}
               </span>
-              <span className="text-left truncate flex-1 min-w-0 text-sm">
+              <span className="text-left truncate flex-1 min-w-0">
                 {node.name.endsWith('.md') ? node.name.replace('.md', '') : node.name}
               </span>
               {node.type === 'folder' && node.hasReadme && (
-                <span className="text-[10px] bg-ods-bg-secondary text-ods-text-tertiary px-1.5 py-0.5 rounded mr-2">
+                <span className="text-h6 bg-ods-bg-surface text-ods-text-tertiary px-1.5 py-0.5 rounded mr-2">
                   README
                 </span>
               )}

package/src/components/navigation/navigation-sidebar.tsx

@@ -113,7 +113,7 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
       {/* Backdrop scrim — only visible on tablet while the overlay is open */}
       <div
         className={cn(
-          "fixed inset-0 z-[40] bg-black/50",
+          "fixed inset-0 z-[40] bg-ods-overlay",
           "hidden md:block lg:hidden",
           "transition-opacity duration-300",
           isOverlayOpen ? "opacity-100" : "opacity-0 pointer-events-none",

package/src/components/navigation/sticky-section-nav.tsx

@@ -28,7 +28,7 @@ export function StickySectionNav({
   onSectionClick,
   className,
   ribbonPosition = 'left',
-  ribbonColor = '#FFC008'
+  ribbonColor = 'var(--color-accent-primary)'
 }: StickySectionNavProps) {
   const navHeight = sections.length * 40 // 40px per item (h-10)
 
@@ -71,7 +71,7 @@ export function StickySectionNav({
             className="flex-1 flex items-center gap-2 px-3 py-2 cursor-pointer relative"
           >
             <span className={cn(
-              "text-left font-['DM_Sans'] text-[14px] font-medium tracking-[-0.02em] leading-[1.43em] transition-all duration-200",
+              "text-left text-h6 transition-all duration-200",
               activeSection === section.id
                 ? "text-ods-text-primary"
                 : "text-ods-text-secondary hover:text-ods-text-primary"

package/src/components/onboarding-guides/onboarding-guides-catalog-view.tsx

@@ -206,10 +206,10 @@ export function OnboardingGuidesCatalogView({
       {guides.length === 0 ? (
         <div className="text-center py-16">
           <GraduationCap className="h-12 w-12 text-ods-text-secondary mx-auto mb-4" />
-          <h2 className="text-ods-text-primary font-['DM_Sans'] text-[20px] font-semibold mb-2">
+          <h2 className="text-ods-text-primary text-h3 mb-2">
             No onboarding guides found
           </h2>
-          <p className="text-ods-text-secondary font-['DM_Sans'] text-[14px]">
+          <p className="text-ods-text-secondary text-h6">
             {activeSection !== 'all'
               ? 'No guides in this section yet.'
               : "We're working on the onboarding library. Check back soon."}
@@ -219,9 +219,9 @@ export function OnboardingGuidesCatalogView({
         <div className={isPending || isLoading ? 'opacity-60 transition-opacity space-y-10' : 'space-y-10'}>
           {grouped.map((sec) => (
             <section key={sec.section} className="space-y-4">
-              <h2 className="text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2">
+              <h2 className="text-h3 text-ods-text-primary flex items-center gap-2">
                 {sec.section}
-                <span className="inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 text-ods-text-secondary text-xs font-medium px-2 py-0.5">
+                <span className="inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 text-ods-text-secondary text-h6 px-2 py-0.5">
                   {sec.guides.length}
                 </span>
               </h2>

package/src/components/pagination.tsx

@@ -85,7 +85,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
             // Render ellipsis
             return (
               <li key={`ellipsis-${index}`}>
-                <span className="flex h-9 w-9 items-center justify-center text-sm text-muted-foreground">
+                <span className="flex h-9 w-9 items-center justify-center text-h6 text-muted-foreground">
                   <MoreHorizontal className="h-4 w-4" />
                   <span className="sr-only">More pages</span>
                 </span>
@@ -147,7 +147,7 @@ const PaginationLink = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttri
       <button
         ref={ref}
         className={cn(
-          "inline-flex items-center justify-center h-10 w-10 rounded-md border border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "inline-flex items-center justify-center h-10 w-10 rounded-md border border-input bg-background text-h6 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           className,
         )}
         {...props}

package/src/components/persistent-filter-controls.tsx

@@ -107,7 +107,7 @@ export function PersistentFilterControls({
           role="status"
           aria-label="Loading filters"
         >
-          <div className="w-4 h-4 border-2 border-ods-border border-t-[#FFC008] rounded-full animate-spin" />
+          <div className="w-4 h-4 border-2 border-ods-border border-t-ods-accent rounded-full animate-spin" />
         </div>
       )}
     </div>

package/src/components/platform/.ShellTypeBadge.md

@@ -20,7 +20,7 @@ import { ShellTypeValues } from './types/shell.types'
 // With custom wrapper and icon class overrides
 <ShellTypeBadge
   shellType={ShellTypeValues.PYTHON}
-  className="bg-ods-surface-secondary px-2 py-1 rounded"
+  className="bg-ods-bg-surface px-2 py-1 rounded"
   iconClassName="opacity-75"
 />
 

package/src/components/platform/CveLink.tsx

@@ -33,7 +33,7 @@ export const CveLink: React.FC<CveLinkProps> = ({
       target="_blank"
       rel="noopener noreferrer"
       className={cn(
-        'inline-flex items-center gap-2 font-medium text-[18px] leading-[20px] text-ods-text-primary font-mono hover:text-ods-accent transition-colors group',
+        'inline-flex items-center gap-2 text-code text-ods-text-primary hover:text-ods-accent transition-colors group',
         className
       )}
     >

package/src/components/platform/ScriptArguments.tsx

@@ -136,7 +136,7 @@ export const ScriptArguments: React.FC<ScriptArgumentsProps> = ({
                 placeholder={valuePlaceholder}
                 disabled={disabled}
                 className={cn(
-                  !arg.value && 'placeholder:text-[#888]'
+                  !arg.value && 'placeholder:text-ods-text-muted'
                 )}
               />
             </div>
@@ -147,7 +147,7 @@ export const ScriptArguments: React.FC<ScriptArgumentsProps> = ({
               onClick={() => handleDelete(arg.id)}
               disabled={disabled}
               aria-label="Delete argument"
-              leftIcon={<Trash2 className="size-4 md:size-6 " color="var(--ods-attention-red-error)" />}
+              leftIcon={<Trash2 className="size-4 md:size-6 " color="var(--color-error)" />}
             />
           </div>
         </div>

package/src/components/platform/ScriptInfoSection.tsx

@@ -91,7 +91,7 @@ function InfoCell({ label, value, avatar, className }: InfoCellProps) {
               className="size-full object-cover"
             />
           ) : (
-            <div className="size-full flex items-center justify-center text-ods-text-secondary text-sm font-medium">
+            <div className="size-full flex items-center justify-center text-ods-text-secondary text-h6">
               {avatar.initials || getInitials(avatar.name)}
             </div>
           )}
@@ -100,10 +100,10 @@ function InfoCell({ label, value, avatar, className }: InfoCellProps) {
 
       {/* Text content */}
       <div className="flex flex-col min-w-0">
-        <span className="text-ods-text-primary font-['DM_Sans'] text-[14px] leading-[20px] md:text-[18px] md:leading-[24px] font-medium truncate" title={value}>
+        <span className="text-ods-text-primary text-h4 truncate" title={value}>
           {value}
         </span>
-        <span className="text-ods-text-secondary font-['DM_Sans'] text-[12px] leading-[16px] md:text-[14px] md:leading-[20px] font-medium truncate">
+        <span className="text-ods-text-secondary text-h6 truncate">
           {label}
         </span>
       </div>
@@ -148,11 +148,11 @@ export const ScriptInfoSection: React.FC<ScriptInfoSectionProps> = ({
       {/* Header row with title and description */}
       <div className="p-4 border-b border-ods-border">
         <div className="flex flex-col gap-1">
-          <h3 className="text-ods-text-primary font-['DM_Sans'] text-[14px] leading-[20px] md:text-[18px] md:leading-[24px] font-medium">
+          <h3 className="text-ods-text-primary text-h4">
             {headline}
           </h3>
           {subheadline && (
-            <p className="text-ods-text-secondary font-['DM_Sans'] text-[12px] leading-[16px] md:text-[14px] md:leading-[20px] font-medium break-words">
+            <p className="text-ods-text-secondary text-h6 break-words">
               {subheadline}
             </p>
           )}

package/src/components/platform/ShellTypeBadge.tsx

@@ -39,11 +39,11 @@ const shellIconMap: Record<ShellType, ShellIconConfig> = {
   },
   [ShellTypeValues.CMD]: {
     icon: CmdIcon,
-    props: { size: 16, color: '#888888' }
+    props: { size: 16, color: 'var(--color-text-secondary)' }
   },
   [ShellTypeValues.BASH]: {
     icon: BashIcon,
-    props: { size: 16, color: '#888888' }
+    props: { size: 16, color: 'var(--color-text-secondary)' }
   },
   [ShellTypeValues.PYTHON]: {
     icon: PythonLogoIcon,
@@ -51,21 +51,21 @@ const shellIconMap: Record<ShellType, ShellIconConfig> = {
   },
   [ShellTypeValues.NUSHELL]: {
     icon: NushellIcon,
-    props: { size: 16, color: '#888888' }
+    props: { size: 16, color: 'var(--color-text-secondary)' }
   },
   [ShellTypeValues.DENO]: {
     icon: DenoIcon,
-    props: { size: 16, color: '#888888' }
+    props: { size: 16, color: 'var(--color-text-secondary)' }
   },
   [ShellTypeValues.SHELL]: {
     icon: ShellIcon,
-    props: { size: 16, color: '#888888' }
+    props: { size: 16, color: 'var(--color-text-secondary)' }
   }
 } as const
 
 const defaultIconConfig: ShellIconConfig = {
   icon: ShellIcon,
-  props: { size: 16, color: '#888888' }
+  props: { size: 16, color: 'var(--color-text-secondary)' }
 }
 
 export interface ShellTypeBadgeProps {

package/src/components/platform/SoftwareInfo.tsx

@@ -38,13 +38,13 @@ export const SoftwareInfo: React.FC<SoftwareInfoProps> = ({
           {name}
         </div>
         {version && (
-          <div className="px-2 py-1 bg-ods-system-greys-soft-grey-action rounded text-ods-text-secondary font-['DM_Sans'] font-normal text-[16px] leading-[20px]">
+          <div className="px-2 py-1 bg-ods-bg-surface rounded text-ods-text-secondary text-h6">
             {version}
           </div>
         )}
       </div>
       {vendor && (
-        <div className="font-['DM_Sans'] font-normal text-[16px] leading-[16px] text-ods-text-secondary">
+        <div className="text-h6 text-ods-text-secondary">
           {vendor}
         </div>
       )}

package/src/components/pricing-display.tsx

@@ -23,30 +23,30 @@ interface PricingDisplayProps {
 export const PRICING_STYLES = {
   // Comparison table style (current default)
   comparison: {
-    priceTextSize: 'text-[16px]',
+    priceTextSize: 'text-h6',
     priceTextColor: 'text-ods-text-primary',
-    secondaryTextSize: 'text-[16px]',
+    secondaryTextSize: 'text-h6',
     secondaryTextColor: 'text-ods-text-secondary',
     showTildePrefix: false,
-    fontFamily: "font-['DM_Sans']"
+    fontFamily: 'font-body'
   },
   // Vendor dropdown compact style (Figma design)
   compact: {
-    priceTextSize: 'text-[12px]',
+    priceTextSize: 'text-h6',
     priceTextColor: 'text-ods-text-secondary',
-    secondaryTextSize: 'text-[12px]',
+    secondaryTextSize: 'text-h6',
     secondaryTextColor: 'text-ods-text-secondary',
     showTildePrefix: true,
-    fontFamily: "font-['DM_Sans']"
+    fontFamily: 'font-body'
   },
   // Card style for vendor cards
   card: {
-    priceTextSize: 'text-[14px]',
+    priceTextSize: 'text-h6',
     priceTextColor: 'text-ods-text-primary',
-    secondaryTextSize: 'text-[14px]',
+    secondaryTextSize: 'text-h6',
     secondaryTextColor: 'text-ods-text-secondary',
     showTildePrefix: true,
-    fontFamily: "font-['DM_Sans']"
+    fontFamily: 'font-body'
   }
 } as const
 

package/src/components/profile/ProfileLoadingSkeleton.tsx

@@ -10,18 +10,18 @@ export function ProfileLoadingSkeleton({ className }: ProfileLoadingSkeletonProp
     <div className={cn("space-y-6", className)}>
       {/* Header skeleton */}
       <div className="flex items-center space-x-4">
-        <div className="h-16 w-16 bg-gray-200 rounded-full animate-pulse" />
+        <div className="h-16 w-16 bg-ods-skeleton rounded-full animate-pulse" />
         <div className="space-y-2">
-          <div className="h-4 w-32 bg-gray-200 rounded animate-pulse" />
-          <div className="h-3 w-24 bg-gray-200 rounded animate-pulse" />
+          <div className="h-4 w-32 bg-ods-skeleton rounded animate-pulse" />
+          <div className="h-3 w-24 bg-ods-skeleton rounded animate-pulse" />
         </div>
       </div>
       
       {/* Content skeleton */}
       <div className="space-y-4">
-        <div className="h-4 w-full bg-gray-200 rounded animate-pulse" />
-        <div className="h-4 w-3/4 bg-gray-200 rounded animate-pulse" />
-        <div className="h-4 w-1/2 bg-gray-200 rounded animate-pulse" />
+        <div className="h-4 w-full bg-ods-skeleton rounded animate-pulse" />
+        <div className="h-4 w-3/4 bg-ods-skeleton rounded animate-pulse" />
+        <div className="h-4 w-1/2 bg-ods-skeleton rounded animate-pulse" />
       </div>
     </div>
   )

package/src/components/related-content/related-content-section.tsx

@@ -730,7 +730,7 @@ export function RelatedContentSection({
       const skeletonType = includeTypes?.[0] ?? entityType ?? 'blog_post_existing';
       return (
         <div className="space-y-8">
-          <h2 className="text-2xl font-bold text-ods-text-primary">{title}</h2>
+          <h2 className="text-h2 text-ods-text-primary">{title}</h2>
           <div className={gridClassFor(columns)}>
             {Array.from({ length: 3 }).map((_, i) => (
               <div key={i}>{renderSkeletonForType(skeletonType, 'default', adminCampaignCard)}</div>
@@ -774,7 +774,7 @@ export function RelatedContentSection({
 
   return (
     <div className="space-y-8">
-      <h2 className="text-2xl font-bold text-ods-text-primary">{title}</h2>
+      <h2 className="text-h2 text-ods-text-primary">{title}</h2>
       {orderedTypes.map((type) => (
         <ContentGroup
           key={type}
@@ -787,7 +787,7 @@ export function RelatedContentSection({
           extras={extras}
           adminCampaignCard={adminCampaignCard}
           heading={
-            <h3 className="font-['Azeret_Mono'] text-[14px] font-semibold uppercase text-ods-text-secondary tracking-wider">
+            <h3 className="text-h5 font-semibold text-ods-text-secondary">
               {getContentRefLabelOrTitleCase(type)}
             </h3>
           }

package/src/components/results-count.tsx

@@ -27,7 +27,7 @@ export function ResultsCount({
 
   return (
     <div className="mb-6">
-      <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
+      <p className="text-ods-text-secondary text-h6">
         {totalResults > 0 && (
           <>
             Showing {startIndex}-{endIndex} of {totalResults} {displayType}

package/src/components/shared/delivery/delivery-row.tsx

@@ -89,7 +89,7 @@ export function DeliveryRow({
       {/* Left: caption (optional) + title + subtitle + description */}
       <div className="flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]">
         {caption && (
-          <p className="text-xs font-medium uppercase tracking-wider text-ods-text-secondary">
+          <p className="text-h5 text-ods-text-secondary">
             {caption}
           </p>
         )}

package/src/components/shared/delivery/delivery-table.tsx

@@ -85,7 +85,7 @@ export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps)
   if (items.length === 0) {
     return (
       <div className="bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full">
-        <p className="text-ods-text-secondary text-[14px] font-['DM_Sans'] font-medium">
+        <p className="text-h6 text-ods-text-secondary">
           No tasks available
         </p>
       </div>

package/src/components/shared/dev-section/dev-section-view.tsx

@@ -107,7 +107,7 @@ export function DevSectionView({ sectionKey, hero, preControls, children, showHe
               {hero.icon}
               {hero.title ?? section.hero.title}
             </h1>
-            <p className="font-['DM_Sans'] font-medium text-[18px] leading-[28px] text-ods-text-secondary max-w-3xl">
+            <p className="text-h4 text-ods-text-secondary max-w-3xl">
               {hero.description}
             </p>
           </div>

package/src/components/shared/doc-search/doc-search-result-row.tsx

@@ -56,14 +56,14 @@ export function DocSearchResultRow({
       </span>
       <div className="min-w-0 flex-1">
         <div
-          className={`text-sm font-medium leading-5 truncate ${
+          className={`text-h6 truncate ${
             isHighlighted ? 'text-ods-accent' : 'text-ods-text-primary'
           }`}
         >
           {result.title || result.path}
         </div>
         {!isGroup && result.path?.includes('/') && (
-          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5">
+          <div className="text-h6 text-ods-text-secondary truncate mt-0.5">
             {formatRelativePath(result.path)}
           </div>
         )}

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -110,7 +110,7 @@ export function LegalDocumentPage({
   const inner = (
     <PageLayout title={title} subtitle={subtitle} backButton={backCfg} titleSize="h1" titleWrap>
       {data?.sourceFile && (
-        <p className="font-['DM_Sans'] text-sm text-ods-text-secondary opacity-75">Source: {data.sourceFile}</p>
+        <p className="text-h6 text-ods-text-secondary opacity-75">Source: {data.sourceFile}</p>
       )}
 
       <div className="flex flex-col lg:flex-row gap-6 lg:gap-10 items-start flex-1">
@@ -134,9 +134,9 @@ export function LegalDocumentPage({
                   </div>
                 ) : error ? (
                   <div className="text-center space-y-4">
-                    <div className="bg-red-900/20 border border-red-700 rounded-lg p-6">
-                      <p className="text-red-400 mb-2">{errorTitle}</p>
-                      <p className="text-red-300 text-sm">{error}</p>
+                    <div className="bg-ods-error-secondary border border-ods-error rounded-lg p-6">
+                      <p className="text-ods-error mb-2">{errorTitle}</p>
+                      <p className="text-ods-error text-h6">{error}</p>
                     </div>
                     <div className="text-ods-text-secondary">
                       <p>{errorContactPrompt}</p>
@@ -153,7 +153,7 @@ export function LegalDocumentPage({
                   />
                 ) : (
                   <div className="text-center text-ods-text-secondary py-16">
-                    <p className="text-xl">{emptyStateMessage}</p>
+                    <p className="text-h4">{emptyStateMessage}</p>
                     <p className="mt-2">
                       Please contact{' '}
                       <a href={`mailto:${contactEmail}`} className="text-ods-accent hover:underline">

package/src/components/shared/onboarding/onboarding-step-card.tsx

@@ -69,7 +69,7 @@ export function OnboardingStepCard({
         <h3 className="text-h4 text-ods-text-primary truncate" title={step.title}>
           {step.title}
         </h3>
-        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate h-[20px]" title={step.description}>
+        <p className="text-h6 text-ods-text-secondary truncate h-[20px]" title={step.description}>
           {step.description}
         </p>
       </div>