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

package/src/components/features/ai-enrich/ConfidenceBadge.tsx

@@ -19,9 +19,9 @@ export interface ConfidenceBadgeProps {
 }
 
 const sizeStyles = {
-  sm: 'text-xs px-1.5 py-0.5',
-  md: 'text-sm px-2 py-1',
-  lg: 'text-base px-3 py-1.5',
+  sm: 'text-h6 px-1.5 py-0.5',
+  md: 'text-h6 px-2 py-1',
+  lg: 'text-h6 px-3 py-1.5',
 }
 
 export const ConfidenceBadge: React.FC<ConfidenceBadgeProps> = ({
@@ -45,7 +45,7 @@ export const ConfidenceBadge: React.FC<ConfidenceBadgeProps> = ({
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1 rounded-full border font-medium',
+        'inline-flex items-center gap-1 rounded-full border',
         sizeStyles[size],
         borderClass,
         textClass,

package/src/components/features/array-entry-manager.tsx

@@ -124,7 +124,7 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
   return (
     <div className={`space-y-3 ${className}`}>
       <div className="flex items-center justify-between">
-        <Label className="text-[14px] text-ods-text-primary">{title}</Label>
+        <Label className="text-h6 text-ods-text-primary">{title}</Label>
         <div className="flex items-center gap-2">
           {requireSave && isDirty && (
             <Button
@@ -133,7 +133,7 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
               onClick={handleSave}
               disabled={isSaving}
               leftIcon={isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-              className="font-['DM_Sans'] text-[14px] bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover"
+              className="text-h6 bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover"
             >
               {isSaving ? 'Saving...' : saveButtonText}
             </Button>
@@ -144,7 +144,7 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
             size="small-legacy"
             onClick={addItem}
             leftIcon={<Plus className="h-4 w-4" />}
-            className="font-['DM_Sans'] text-[14px]"
+            className="text-h6"
           >
             {addButtonText}
           </Button>
@@ -152,7 +152,7 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
       </div>
 
       {workingItems.map((item, index) => (
-        <div key={index} className="flex items-center gap-3 p-3 bg-ods-bg-secondary rounded-lg border border-ods-border">
+        <div key={index} className="flex items-center gap-3 p-3 bg-ods-bg-surface rounded-lg border border-ods-border">
           {icon && (
             <div className="w-8 h-8 flex items-center justify-center">
               {icon}
@@ -176,7 +176,7 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
             variant="transparent"
             size="icon"
             onClick={() => removeItem(index)}
-            className="text-ods-attention-red-error hover:bg-ods-attention-red-error-secondary"
+            className="text-ods-error hover:bg-ods-error-secondary"
           >
             <Trash2 className="h-4 w-4" />
           </Button>
@@ -184,8 +184,8 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
       ))}
 
       {workingItems.length === 0 && (
-        <div className="text-center py-4 px-4 bg-ods-bg-secondary border border-ods-border rounded-lg">
-          <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
+        <div className="text-center py-4 px-4 bg-ods-bg-surface border border-ods-border rounded-lg">
+          <p className="text-ods-text-secondary text-h6">
             {emptyMessage}
           </p>
         </div>

package/src/components/features/auth-providers-list.tsx

@@ -50,7 +50,7 @@ export function AuthProvidersList({
           <div className="absolute inset-0 flex items-center">
             <div className="w-full border-t border-ods-border" />
           </div>
-          <div className="relative flex justify-center text-sm">
+          <div className="relative flex justify-center text-h6">
             <span className="px-2 bg-ods-card text-ods-text-secondary">{dividerText}</span>
           </div>
         </div>

package/src/components/features/board/ticket-card.tsx

@@ -77,7 +77,7 @@ export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprov
             />
           ))}
           {ticket.assignees.length > MAX_VISIBLE_ASSIGNEES && (
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-ods-border bg-ods-bg text-xs font-medium text-ods-text-secondary">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-ods-border bg-ods-bg text-h6 text-ods-text-secondary">
               +{ticket.assignees.length - MAX_VISIBLE_ASSIGNEES}
             </div>
           )}

package/src/components/features/changelog-manager.tsx

@@ -89,7 +89,7 @@ export function ChangelogManager({
   return (
     <div className={`space-y-3 ${className}`}>
       <div className="flex items-center justify-between">
-        <Label className="text-[14px] text-ods-text-primary">
+        <Label className="text-h6 text-ods-text-primary">
           {title}
         </Label>
         <Button
@@ -98,7 +98,7 @@ export function ChangelogManager({
           size="small-legacy"
           onClick={addEntry}
           leftIcon={<Plus className="h-4 w-4" />}
-          className="font-['DM_Sans'] text-[14px]"
+          className="text-h6"
         >
           Add Entry
         </Button>
@@ -109,7 +109,7 @@ export function ChangelogManager({
         const hasContent = entry.title.trim().length > 0;
 
         return (
-          <div key={index} className="bg-ods-bg-secondary rounded-lg border border-ods-border overflow-hidden">
+          <div key={index} className="bg-ods-bg-surface rounded-lg border border-ods-border overflow-hidden">
             {/* Header - always visible */}
             <div className="flex items-center gap-3 p-3">
               <Button
@@ -124,11 +124,11 @@ export function ChangelogManager({
 
               <div className="flex-1 min-w-0">
                 {hasContent ? (
-                  <p className="font-['DM_Sans'] font-medium text-[14px] text-ods-text-primary truncate">
+                  <p className="text-h6 text-ods-text-primary truncate">
                     {entry.title}
                   </p>
                 ) : (
-                  <p className="font-['DM_Sans'] font-medium text-[14px] text-ods-text-secondary italic">
+                  <p className="text-h6 text-ods-text-secondary italic">
                     New entry (click to edit)
                   </p>
                 )}
@@ -160,7 +160,7 @@ export function ChangelogManager({
                 variant="transparent"
                 size="icon"
                 onClick={() => removeEntry(index)}
-                className="text-red-400 hover:text-red-300 hover:bg-red-400/10 shrink-0"
+                className="text-ods-error hover:text-ods-error-hover hover:bg-ods-error-secondary shrink-0"
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
@@ -171,7 +171,7 @@ export function ChangelogManager({
               <div className="px-3 pb-3 space-y-3 border-t border-ods-border pt-3">
                 {/* Title */}
                 <div className="space-y-1">
-                  <Label className="text-[12px] text-ods-text-secondary">Title *</Label>
+                  <Label className="text-h6 text-ods-text-secondary">Title *</Label>
                   <Input
                     placeholder="e.g., New dark mode theme support"
                     value={entry.title}
@@ -183,7 +183,7 @@ export function ChangelogManager({
 
                 {/* Description */}
                 <div className="space-y-1">
-                  <Label className="text-[12px] text-ods-text-secondary">Description</Label>
+                  <Label className="text-h6 text-ods-text-secondary">Description</Label>
                   <Textarea
                     placeholder="Detailed explanation of the change..."
                     value={entry.description || ''}
@@ -199,8 +199,8 @@ export function ChangelogManager({
       })}
 
       {entries.length === 0 && (
-        <div className="text-center py-4 px-4 bg-ods-bg-secondary border border-ods-border rounded-lg">
-          <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
+        <div className="text-center py-4 px-4 bg-ods-bg-surface border border-ods-border rounded-lg">
+          <p className="text-ods-text-secondary text-h6">
             No entries added. Click "Add Entry" to create {title.toLowerCase()}.
           </p>
         </div>

package/src/components/features/command-box.tsx

@@ -94,14 +94,14 @@ export function CommandBox({
   return (
     <div className={cn('flex flex-col gap-2', className)}>
       {title && (
-        <div className="text-ods-text-primary text-[18px] font-medium">
+        <div className="text-ods-text-primary text-h4">
           {title}
         </div>
       )}
       <div className="bg-ods-bg border border-ods-border rounded-[6px] p-4">
         <div
           className={cn(
-            'text-ods-text-primary font-mono text-[14px] md:text-[16px] leading-relaxed break-all',
+            'text-ods-text-primary text-code break-all',
             lineClampClass,
             commandClassName
           )}

package/src/components/features/entity-summary-editor.tsx

@@ -66,10 +66,10 @@ export function EntitySummaryEditor({
             />
           )}
         </div>
-        <p className="text-xs text-ods-text-secondary mt-1">{helperText}</p>
+        <p className="text-h6 text-ods-text-secondary mt-1">{helperText}</p>
       </div>
       <div
-        className="rounded-lg border border-ods-border bg-[#1a1a1a] overflow-hidden"
+        className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
         style={{ minHeight: `${minHeight}px` }}
       >
         <Textarea
@@ -78,7 +78,7 @@ export function EntitySummaryEditor({
           onChange={(e) => onSummaryChange(e.target.value)}
           placeholder={placeholder}
           disabled={disabled}
-          className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 font-mono text-sm"
+          className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 text-code"
           style={{ minHeight: `${minHeight}px`, lineHeight: '1.6' }}
         />
       </div>

package/src/components/features/figma-prototype-viewer.tsx

@@ -391,7 +391,7 @@ function renderUnifiedUI(state: UnifiedState, handlers: {
           <div 
             className="absolute z-10 bottom-4 left-4"
           >
-            <Badge variant="secondary" className="bg-black/70 text-white backdrop-blur-sm">
+            <Badge variant="secondary" className="bg-ods-overlay text-ods-text-on-dark backdrop-blur-sm">
               Tap twice to click
             </Badge>
           </div>
@@ -429,10 +429,10 @@ function renderUnifiedUI(state: UnifiedState, handlers: {
         {showSkeleton && (
           <div className="absolute inset-0 w-full h-full bg-ods-skeleton animate-pulse rounded-lg z-10 flex items-center justify-center">
             <div className="text-center">
-              <div className="text-xl md:text-2xl font-['Azeret_Mono'] font-semibold text-ods-text-primary">
-                Warming up <span className="text-[var(--ods-open-yellow-base)]">Fae</span> and <span className="text-[var(--ods-open-yellow-base)]">Mingo</span>
+              <div className="text-h2 text-ods-text-primary">
+                Warming up <span className="text-ods-open-yellow">Fae</span> and <span className="text-ods-open-yellow">Mingo</span>
               </div>
-              <div className="mt-2 text-sm text-ods-text-secondary">
+              <div className="mt-2 text-h6 text-ods-text-secondary">
                 Loading AI Co-Pilots...
               </div>
             </div>
@@ -739,9 +739,9 @@ export const FigmaPrototypeViewer: React.FC<FigmaPrototypeViewerProps> = ({
       {/* Debug Panel */}
       {showDebugPanel && (
         <div className="mt-6 p-4 bg-ods-card border border-ods-border rounded-md">
-          <h3 className="font-semibold text-ods-text-primary mb-3">🔍 Debug Panel</h3>
-          
-          <div className="grid grid-cols-2 gap-4 text-sm">
+          <h3 className="text-h3 text-ods-text-primary mb-3">🔍 Debug Panel</h3>
+
+          <div className="grid grid-cols-2 gap-4 text-h6">
             <div>
               <span className="text-ods-text-secondary">View Mode:</span>{' '}
               <span className="text-ods-text-primary font-mono">{viewMode}</span>
@@ -774,13 +774,13 @@ export const FigmaPrototypeViewer: React.FC<FigmaPrototypeViewerProps> = ({
             </div>
           </div>
           
-          <div className="mt-3 text-xs text-ods-text-secondary">
+          <div className="mt-3 text-h6 text-ods-text-secondary">
             Margins: {scaling.marginX.toFixed(0)}px × {scaling.marginY.toFixed(0)}px
           </div>
           
           {/* Additional debug info */}
           <div className="mt-3 pt-3 border-t border-ods-border">
-            <div className="text-xs text-ods-text-secondary space-y-1">
+            <div className="text-h6 text-ods-text-secondary space-y-1">
               <div>
                 <span className="text-ods-text-secondary">File Key:</span>{' '}
                 <span className="text-ods-text-primary font-mono">

package/src/components/features/filters-dropdown.tsx

@@ -69,7 +69,7 @@ const FilterCheckbox: React.FC<{
       aria-checked={checked}
       className={cn(
         "relative h-6 w-6 rounded-[6px] transition-all duration-150 shrink-0",
-        checked ? "bg-ods-accent" : "bg-ods-bg-secondary",
+        checked ? "bg-ods-accent" : "bg-ods-bg-surface",
         !checked && "border-2 border-ods-border",
         disabled && "opacity-50",
         className
@@ -423,7 +423,7 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
                           onClick={() => handleToggleOption(section.id, option.id, section.type)}
                           className={cn(
                             "flex items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-s)] w-full text-left",
-                            isSelected ? "bg-ods-bg-secondary" : "bg-ods-bg",
+                            isSelected ? "bg-ods-bg-surface" : "bg-ods-bg",
                             !isLast && "border-b border-ods-border",
                             "hover:bg-ods-bg-hover transition-colors"
                           )}

package/src/components/features/highlight-config-section.tsx

@@ -34,10 +34,10 @@ export function HighlightConfigSection({
   className = '',
 }: HighlightConfigSectionProps) {
   return (
-    <div className={`space-y-3 p-4 bg-[#1a1a1a] rounded-lg border border-ods-border ${className}`}>
+    <div className={`space-y-3 p-4 bg-ods-card rounded-lg border border-ods-border ${className}`}>
       <div className="flex items-center gap-4">
         <div className="flex-1">
-          <Label className="text-sm">Target Duration</Label>
+          <Label className="text-h6">Target Duration</Label>
           <Select
             value={targetDurationSeconds.toString()}
             onValueChange={(value) => onTargetDurationChange(parseInt(value))}
@@ -64,7 +64,7 @@ export function HighlightConfigSection({
             disabled={disabled}
             className="h-4 w-4 rounded border-ods-border bg-ods-bg text-ods-accent focus:ring-ods-accent"
           />
-          <Label htmlFor="skipSubtitleBurning" className="text-sm cursor-pointer">
+          <Label htmlFor="skipSubtitleBurning" className="text-h6 cursor-pointer">
             Skip subtitle burning
           </Label>
         </div>

package/src/components/features/highlight-video-combined-section.tsx

@@ -197,7 +197,7 @@ export function HighlightVideoCombinedSection({
               <AIGeneratedBadge />
             )}
             {highlightVideoDurationMs && (
-              <Badge variant="outline" className="text-xs">
+              <Badge variant="outline" className="text-h6">
                 {formatDuration(highlightVideoDurationMs)}
               </Badge>
             )}
@@ -224,7 +224,7 @@ export function HighlightVideoCombinedSection({
             onDelete,
           })
         ) : (
-          <p className="text-sm text-ods-text-secondary italic">
+          <p className="text-h6 text-ods-text-secondary italic">
             {emptyMessage}
           </p>
         )}

package/src/components/features/highlight-video-preview.tsx

@@ -84,7 +84,7 @@ export function HighlightVideoPreview({
             <AIGeneratedBadge />
           )}
           {highlightVideoDurationMs && (
-            <Badge variant="outline" className="text-xs">
+            <Badge variant="outline" className="text-h6">
               {formatDuration(highlightVideoDurationMs)}
             </Badge>
           )}
@@ -111,7 +111,7 @@ export function HighlightVideoPreview({
           onDelete,
         })
       ) : (
-        <p className="text-sm text-ods-text-secondary italic">
+        <p className="text-h6 text-ods-text-secondary italic">
           {emptyMessage}
         </p>
       )}

package/src/components/features/highlight-video-section.tsx

@@ -130,16 +130,16 @@ export function HighlightVideoSection({
   return (
     <div className={`space-y-4 ${className}`}>
       {/* Highlight Video Configuration */}
-      <div className="space-y-3 p-4 bg-ods-background-secondary rounded-lg border border-ods-border">
+      <div className="space-y-3 p-4 bg-ods-card rounded-lg border border-ods-border">
         <div className="flex items-center gap-4">
           <div className="flex-1">
-            <Label className="text-sm">Target Duration</Label>
+            <Label className="text-h6">Target Duration</Label>
             <Select
               value={targetDurationSeconds.toString()}
               onValueChange={(value) => onTargetDurationChange(parseInt(value))}
               disabled={disabled}
             >
-              <SelectTrigger className="bg-ods-background-tertiary mt-1">
+              <SelectTrigger className="bg-ods-bg-surface mt-1">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent className="bg-ods-card">
@@ -158,9 +158,9 @@ export function HighlightVideoSection({
               checked={skipSubtitleBurning}
               onChange={(e) => onSkipSubtitleBurningChange(e.target.checked)}
               disabled={disabled}
-              className="h-4 w-4 rounded border-ods-border bg-ods-background-tertiary text-ods-accent focus:ring-ods-accent"
+              className="h-4 w-4 rounded border-ods-border bg-ods-bg-surface text-ods-accent focus:ring-ods-accent"
             />
-            <Label htmlFor="skipSubtitleBurning" className="text-sm cursor-pointer">
+            <Label htmlFor="skipSubtitleBurning" className="text-h6 cursor-pointer">
               Skip subtitle burning
             </Label>
           </div>
@@ -199,7 +199,7 @@ export function HighlightVideoSection({
               <AIGeneratedBadge />
             )}
             {highlightVideoDurationMs && (
-              <Badge variant="outline" className="text-xs">
+              <Badge variant="outline" className="text-h6">
                 {formatDuration(highlightVideoDurationMs)}
               </Badge>
             )}
@@ -217,7 +217,7 @@ export function HighlightVideoSection({
         </div>
 
         {uploadError && (
-          <p className="text-sm text-ods-attention-red-error">{uploadError}</p>
+          <p className="text-h6 text-ods-error">{uploadError}</p>
         )}
 
         {highlightVideoUrl ? (
@@ -243,7 +243,7 @@ export function HighlightVideoSection({
                   className="absolute top-2 right-2 p-1.5 bg-black/60 hover:bg-black/80 rounded-full transition-colors"
                 >
                   <span className="sr-only">Delete</span>
-                  <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg className="h-4 w-4 text-ods-text-on-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
@@ -251,7 +251,7 @@ export function HighlightVideoSection({
             </div>
           )
         ) : (
-          <p className="text-sm text-ods-text-secondary italic">
+          <p className="text-h6 text-ods-text-secondary italic">
             No highlight video yet. Use AI generation above or upload manually.
           </p>
         )}

package/src/components/features/media-gallery-manager.tsx

@@ -129,7 +129,7 @@ export function MediaGalleryManager({
       >
         {/* Drag Handle */}
         <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity cursor-move z-10">
-          <GripVertical className="h-4 w-4 text-white drop-shadow" />
+          <GripVertical className="h-4 w-4 text-ods-text-on-dark drop-shadow" />
         </div>
 
         {/* Delete Button */}
@@ -140,12 +140,12 @@ export function MediaGalleryManager({
             size="small-legacy"
             onClick={() => handleDeleteMedia(index)}
             disabled={isDeleting}
-            className="h-8 w-8 p-0 bg-red-500 hover:bg-red-600 border-red-500"
+            className="h-8 w-8 p-0 bg-ods-error hover:bg-ods-error-hover border-ods-error"
           >
             {isDeleting ? (
-              <Loader2 className="h-4 w-4 animate-spin text-white" />
+              <Loader2 className="h-4 w-4 animate-spin text-ods-text-on-dark" />
             ) : (
-              <Trash2 className="h-4 w-4 text-white" />
+              <Trash2 className="h-4 w-4 text-ods-text-on-dark" />
             )}
           </Button>
         </div>
@@ -178,12 +178,12 @@ export function MediaGalleryManager({
             ) : (
               <ImageIcon className="h-4 w-4 text-ods-text-secondary" />
             )}
-            <span className="text-sm font-medium text-ods-text-primary capitalize">
+            <span className="text-h6 text-ods-text-primary capitalize">
               {mediaItem.media_type}
             </span>
           </div>
           {mediaItem.title && (
-            <p className="text-sm text-ods-text-secondary truncate">
+            <p className="text-h6 text-ods-text-secondary truncate">
               {mediaItem.title}
             </p>
           )}
@@ -205,13 +205,13 @@ export function MediaGalleryManager({
             )}
           </div>
           <div>
-            <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-1">
+            <h3 className="text-h3 text-ods-text-primary mb-1">
               {isUploading ? 'Uploading...' : 'Upload Media'}
             </h3>
-            <p className="text-sm text-ods-text-secondary">
+            <p className="text-h6 text-ods-text-secondary">
               Drag and drop or click to select images and videos
             </p>
-            <p className="text-xs text-ods-text-secondary mt-1">
+            <p className="text-h6 text-ods-text-secondary mt-1">
               Maximum file size: 50MB
             </p>
           </div>
@@ -221,7 +221,7 @@ export function MediaGalleryManager({
             onClick={() => fileInputRef.current?.click()}
             disabled={isUploading}
             leftIcon={<Plus className="h-4 w-4" />}
-            className="font-['DM_Sans'] text-[16px] font-bold"
+            className="text-h6 font-bold"
           >
             {isUploading ? 'Uploading...' : 'Select Files'}
           </Button>
@@ -241,20 +241,20 @@ export function MediaGalleryManager({
       {media.length === 0 ? (
         <div className="text-center py-8">
           <ImageIcon className="h-12 w-12 text-ods-text-secondary mx-auto mb-4" />
-          <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-2">
+          <h3 className="text-h3 text-ods-text-primary mb-2">
             No media uploaded yet
           </h3>
-          <p className="text-sm text-ods-text-secondary">
+          <p className="text-h6 text-ods-text-secondary">
             Upload your first image or video to get started
           </p>
         </div>
       ) : (
         <div>
           <div className="flex items-center justify-between mb-4">
-            <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary">
+            <h3 className="text-h3 text-ods-text-primary">
               Media Gallery ({media.length})
             </h3>
-            <p className="text-xs text-ods-text-secondary">
+            <p className="text-h6 text-ods-text-secondary">
               Drag to reorder
             </p>
           </div>

package/src/components/features/og-editor-preview.tsx

@@ -57,7 +57,7 @@ export function OGEditorPreview({
       {/* SEO Title & Keywords - Same Row */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-2">
-          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+          <Label className="text-h6 text-ods-text-primary">
             SEO Title
           </Label>
           <Input
@@ -70,7 +70,7 @@ export function OGEditorPreview({
         </div>
 
         <div className="space-y-2">
-          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+          <Label className="text-h6 text-ods-text-primary">
             SEO Keywords
           </Label>
           <Input
@@ -86,7 +86,7 @@ export function OGEditorPreview({
       {/* SEO Description & OG Image - Same Row */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-2 flex flex-col h-full">
-          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+          <Label className="text-h6 text-ods-text-primary">
             SEO Description
           </Label>
           <Textarea
@@ -100,7 +100,7 @@ export function OGEditorPreview({
         </div>
 
         <div className="space-y-2 flex flex-col h-full">
-          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+          <Label className="text-h6 text-ods-text-primary">
             OG Image
           </Label>
           <div className="flex-1">

package/src/components/features/os-type-badge-group.tsx

@@ -60,7 +60,7 @@ export function OSTypeBadgeGroup({
         />
       ))}
       {remainingCount > 0 && (
-        <span className="text-ods-text-secondary text-sm font-medium">
+        <span className="text-ods-text-secondary text-h6">
           +{remainingCount} more
         </span>
       )}

package/src/components/features/os-type-badge.tsx

@@ -43,7 +43,7 @@ export const OSTypeBadge: React.FC<OSTypeBadgeProps> = ({
   className = '',
   iconOnly = false,
   iconSize = 'w-4 h-4',
-  iconColor = '#888888',
+  iconColor = 'var(--color-text-secondary)',
   labelOnly = false,
   rightIcon = null
 }) => {
@@ -74,7 +74,7 @@ export const OSTypeBadge: React.FC<OSTypeBadgeProps> = ({
   }
 
   return (
-    <div className={cn("flex items-center gap-1 text-ods-text-primary text-[14px] leading-[20px] md:text-[18px] md:leading-[24px]", className)}>
+    <div className={cn("flex items-center gap-1 text-ods-text-primary text-h4", className)}>
       {IconComponent && <IconComponent className={iconSize} color={iconColor} />}
       {label}
       {rightIcon && rightIcon}

package/src/components/features/platform-badge.tsx

@@ -23,17 +23,17 @@ const sizeClasses = {
   xs: {
     container: 'gap-1 px-1.5 py-0.5',
     icon: 'h-3 w-3',
-    text: 'text-[10px]'
+    text: 'text-h6'
   },
   sm: {
     container: 'gap-1.5 px-2 py-1',
     icon: 'h-4 w-4',
-    text: 'text-[11px]'
+    text: 'text-h6'
   },
   md: {
     container: 'gap-2 px-2.5 py-1.5',
     icon: 'h-5 w-5',
-    text: 'text-[12px]'
+    text: 'text-h6'
   }
 };
 
@@ -142,7 +142,7 @@ export function PlatformBadge({
         colors.bg,
         colors.border,
         colors.text,
-        'font-["DM_Sans"] font-medium',
+        'font-body font-medium',
         className
       )}
     >