@flamingo-stack/openframe-frontend-core 0.0.439-snapshot.20260717095442 → 0.0.439

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-h4">
+        <div className="text-ods-text-primary text-[18px] font-medium">
           {title}
         </div>
       )}
       <div className="bg-ods-bg border border-ods-border rounded-[6px] p-4">
         <div
           className={cn(
-            'text-ods-text-primary text-code break-all',
+            'text-ods-text-primary font-mono text-[14px] md:text-[16px] leading-relaxed break-all',
             lineClampClass,
             commandClassName
           )}

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

@@ -66,10 +66,10 @@ export function EntitySummaryEditor({
             />
           )}
         </div>
-        <p className="text-h6 text-ods-text-secondary mt-1">{helperText}</p>
+        <p className="text-xs text-ods-text-secondary mt-1">{helperText}</p>
       </div>
       <div
-        className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
+        className="rounded-lg border border-ods-border bg-[#1a1a1a] 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 text-code"
+          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"
           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-ods-overlay text-ods-text-on-dark backdrop-blur-sm">
+            <Badge variant="secondary" className="bg-black/70 text-white 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-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 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>
-              <div className="mt-2 text-h6 text-ods-text-secondary">
+              <div className="mt-2 text-sm 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="text-h3 text-ods-text-primary mb-3">🔍 Debug Panel</h3>
-
-          <div className="grid grid-cols-2 gap-4 text-h6">
+          <h3 className="font-semibold text-ods-text-primary mb-3">🔍 Debug Panel</h3>
+          
+          <div className="grid grid-cols-2 gap-4 text-sm">
             <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-h6 text-ods-text-secondary">
+          <div className="mt-3 text-xs 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-h6 text-ods-text-secondary space-y-1">
+            <div className="text-xs 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-surface",
+        checked ? "bg-ods-accent" : "bg-ods-bg-secondary",
         !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-surface" : "bg-ods-bg",
+                            isSelected ? "bg-ods-bg-secondary" : "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-ods-card rounded-lg border border-ods-border ${className}`}>
+    <div className={`space-y-3 p-4 bg-[#1a1a1a] rounded-lg border border-ods-border ${className}`}>
       <div className="flex items-center gap-4">
         <div className="flex-1">
-          <Label className="text-h6">Target Duration</Label>
+          <Label className="text-sm">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-h6 cursor-pointer">
+          <Label htmlFor="skipSubtitleBurning" className="text-sm 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-h6">
+              <Badge variant="outline" className="text-xs">
                 {formatDuration(highlightVideoDurationMs)}
               </Badge>
             )}
@@ -224,7 +224,7 @@ export function HighlightVideoCombinedSection({
             onDelete,
           })
         ) : (
-          <p className="text-h6 text-ods-text-secondary italic">
+          <p className="text-sm 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-h6">
+            <Badge variant="outline" className="text-xs">
               {formatDuration(highlightVideoDurationMs)}
             </Badge>
           )}
@@ -111,7 +111,7 @@ export function HighlightVideoPreview({
           onDelete,
         })
       ) : (
-        <p className="text-h6 text-ods-text-secondary italic">
+        <p className="text-sm 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-card rounded-lg border border-ods-border">
+      <div className="space-y-3 p-4 bg-ods-background-secondary rounded-lg border border-ods-border">
         <div className="flex items-center gap-4">
           <div className="flex-1">
-            <Label className="text-h6">Target Duration</Label>
+            <Label className="text-sm">Target Duration</Label>
             <Select
               value={targetDurationSeconds.toString()}
               onValueChange={(value) => onTargetDurationChange(parseInt(value))}
               disabled={disabled}
             >
-              <SelectTrigger className="bg-ods-bg-surface mt-1">
+              <SelectTrigger className="bg-ods-background-tertiary 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-bg-surface text-ods-accent focus:ring-ods-accent"
+              className="h-4 w-4 rounded border-ods-border bg-ods-background-tertiary text-ods-accent focus:ring-ods-accent"
             />
-            <Label htmlFor="skipSubtitleBurning" className="text-h6 cursor-pointer">
+            <Label htmlFor="skipSubtitleBurning" className="text-sm cursor-pointer">
               Skip subtitle burning
             </Label>
           </div>
@@ -199,7 +199,7 @@ export function HighlightVideoSection({
               <AIGeneratedBadge />
             )}
             {highlightVideoDurationMs && (
-              <Badge variant="outline" className="text-h6">
+              <Badge variant="outline" className="text-xs">
                 {formatDuration(highlightVideoDurationMs)}
               </Badge>
             )}
@@ -217,7 +217,7 @@ export function HighlightVideoSection({
         </div>
 
         {uploadError && (
-          <p className="text-h6 text-ods-error">{uploadError}</p>
+          <p className="text-sm text-ods-attention-red-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-ods-text-on-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg className="h-4 w-4 text-white" 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-h6 text-ods-text-secondary italic">
+          <p className="text-sm 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-ods-text-on-dark drop-shadow" />
+          <GripVertical className="h-4 w-4 text-white 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-ods-error hover:bg-ods-error-hover border-ods-error"
+            className="h-8 w-8 p-0 bg-red-500 hover:bg-red-600 border-red-500"
           >
             {isDeleting ? (
-              <Loader2 className="h-4 w-4 animate-spin text-ods-text-on-dark" />
+              <Loader2 className="h-4 w-4 animate-spin text-white" />
             ) : (
-              <Trash2 className="h-4 w-4 text-ods-text-on-dark" />
+              <Trash2 className="h-4 w-4 text-white" />
             )}
           </Button>
         </div>
@@ -178,12 +178,12 @@ export function MediaGalleryManager({
             ) : (
               <ImageIcon className="h-4 w-4 text-ods-text-secondary" />
             )}
-            <span className="text-h6 text-ods-text-primary capitalize">
+            <span className="text-sm font-medium text-ods-text-primary capitalize">
               {mediaItem.media_type}
             </span>
           </div>
           {mediaItem.title && (
-            <p className="text-h6 text-ods-text-secondary truncate">
+            <p className="text-sm text-ods-text-secondary truncate">
               {mediaItem.title}
             </p>
           )}
@@ -205,13 +205,13 @@ export function MediaGalleryManager({
             )}
           </div>
           <div>
-            <h3 className="text-h3 text-ods-text-primary mb-1">
+            <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-1">
               {isUploading ? 'Uploading...' : 'Upload Media'}
             </h3>
-            <p className="text-h6 text-ods-text-secondary">
+            <p className="text-sm text-ods-text-secondary">
               Drag and drop or click to select images and videos
             </p>
-            <p className="text-h6 text-ods-text-secondary mt-1">
+            <p className="text-xs 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="text-h6 font-bold"
+            className="font-['DM_Sans'] text-[16px] 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="text-h3 text-ods-text-primary mb-2">
+          <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-2">
             No media uploaded yet
           </h3>
-          <p className="text-h6 text-ods-text-secondary">
+          <p className="text-sm 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="text-h3 text-ods-text-primary">
+            <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary">
               Media Gallery ({media.length})
             </h3>
-            <p className="text-h6 text-ods-text-secondary">
+            <p className="text-xs 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="text-h6 text-ods-text-primary">
+          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
             SEO Title
           </Label>
           <Input
@@ -70,7 +70,7 @@ export function OGEditorPreview({
         </div>
 
         <div className="space-y-2">
-          <Label className="text-h6 text-ods-text-primary">
+          <Label className="font-['DM_Sans'] text-[14px] font-medium 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="text-h6 text-ods-text-primary">
+          <Label className="font-['DM_Sans'] text-[14px] font-medium 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="text-h6 text-ods-text-primary">
+          <Label className="font-['DM_Sans'] text-[14px] font-medium 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-h6">
+        <span className="text-ods-text-secondary text-sm font-medium">
           +{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 = 'var(--color-text-secondary)',
+  iconColor = '#888888',
   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-h4", className)}>
+    <div className={cn("flex items-center gap-1 text-ods-text-primary text-[14px] leading-[20px] md:text-[18px] md:leading-[24px]", 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-h6'
+    text: 'text-[10px]'
   },
   sm: {
     container: 'gap-1.5 px-2 py-1',
     icon: 'h-4 w-4',
-    text: 'text-h6'
+    text: 'text-[11px]'
   },
   md: {
     container: 'gap-2 px-2.5 py-1.5',
     icon: 'h-5 w-5',
-    text: 'text-h6'
+    text: 'text-[12px]'
   }
 };
 
@@ -142,7 +142,7 @@ export function PlatformBadge({
         colors.bg,
         colors.border,
         colors.text,
-        'font-body font-medium',
+        'font-["DM_Sans"] font-medium',
         className
       )}
     >

package/src/components/features/policy-configuration-panel.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
+} from '../dropdown-menu'
 import {
   ApprovalLevel,
   PermissionCategory,
@@ -49,10 +49,10 @@ const PolicyRow: React.FC<{
 
       {/* Policy Info */}
       <div className="flex-1 flex flex-col min-w-0">
-        <p className="text-h6 text-ods-text-primary truncate" title={policy.name}>
+        <p className="text-[16px] font-medium text-ods-text-primary truncate" title={policy.name}>
           {policy.name}
         </p>
-        <p className="text-code text-ods-text-secondary break-all">
+        <p className="text-[12px] text-ods-text-secondary break-all font-mono">
           {policy.commandPattern}
         </p>
       </div>
@@ -74,7 +74,7 @@ const PolicyRow: React.FC<{
               <DropdownMenuItem
                 key={option.value}
                 onClick={() => onPermissionChange(categoryId, policy.id, option.value)}
-                className="text-h6"
+                className="text-[16px]"
               >
                 {option.label}
               </DropdownMenuItem>
@@ -83,7 +83,7 @@ const PolicyRow: React.FC<{
         </DropdownMenu>
       ) : policy.approvalLevel ? (
         <div className="px-3 py-2 w-[180px]">
-          <span className="text-h6 text-ods-text-primary">
+          <span className="text-[16px] font-medium text-ods-text-primary">
             {getApprovalLevelLabel(policy.approvalLevel, editMode)}
           </span>
         </div>
@@ -142,7 +142,7 @@ const CategorySection: React.FC<{
           <p className="md:!text-sm font-medium text-ods-text-primary">
             {category.name}
           </p>
-          <p className="text-h6 text-ods-text-secondary">
+          <p className="text-[14px] text-ods-text-secondary">
             {category.configurationsCount} Configurations
           </p>
         </div>

package/src/components/features/provider-button.tsx

@@ -72,7 +72,7 @@ export function ProviderButton({ provider, onClick, disabled = false, loading =
       leftIcon={isLoading ? null : <IconComponent className="w-5 h-5" />}
       className={`
         w-full md:!w-full h-[56px] 
-        !text-h6 !font-bold
+        !text-[16px] !font-bold !leading-tight
         hover:bg-ods-bg-hover
         ${isLoading ? 'cursor-wait' : 'cursor-pointer'}
       `}

package/src/components/features/push-button-selector.tsx

@@ -48,20 +48,20 @@ function PushButtonSelectorSkeleton({ count = 3, hasTitle }: { count?: number; h
   return (
     <div className="space-y-3">
       {hasTitle && (
-        <div className="h-5 w-20 bg-ods-skeleton rounded animate-pulse" />
+        <div className="h-5 w-20 bg-ods-bg-secondary rounded animate-pulse" />
       )}
       <div className="space-y-3">
         {[...Array(count)].map((_, i) => (
-          <div key={i} className="p-4 rounded-lg border border-ods-border bg-ods-skeleton animate-pulse">
+          <div key={i} className="p-4 rounded-lg border border-ods-border bg-ods-bg-secondary animate-pulse">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-ods-skeleton rounded" />
+                <div className="w-8 h-8 bg-ods-bg-primary rounded" />
                 <div>
-                  <div className="h-4 w-20 bg-ods-skeleton rounded mb-1" />
-                  <div className="h-3 w-32 bg-ods-skeleton rounded" />
+                  <div className="h-4 w-20 bg-ods-bg-primary rounded mb-1" />
+                  <div className="h-3 w-32 bg-ods-bg-primary rounded" />
                 </div>
               </div>
-              <div className="w-6 h-6 bg-ods-skeleton rounded border-2 border-ods-border" />
+              <div className="w-6 h-6 bg-ods-bg-primary rounded border-2 border-ods-border" />
             </div>
           </div>
         ))}
@@ -79,8 +79,8 @@ function PushButtonSelectorError({ message, title }: { message: string; title?:
           {title}
         </h3>
       )}
-      <div className="p-4 bg-ods-error-secondary border border-ods-error rounded-lg">
-        <div className="text-h6 text-ods-error">
+      <div className="p-4 bg-ods-attention-red-error-secondary border border-ods-attention-red-error rounded-lg">
+        <div className="font-['DM_Sans'] text-[14px] text-ods-attention-red-error">
           ⚠️ {message}
         </div>
       </div>
@@ -161,8 +161,8 @@ export function PushButtonSelector({
           ${option.disabled
             ? `${isSelected ? 'cursor-pointer' : 'cursor-not-allowed'} opacity-40 bg-ods-card border-ods-border`
             : isSelected
-              ? 'cursor-pointer bg-ods-bg-surface border-ods-accent shadow-sm'
-              : 'cursor-pointer bg-ods-bg border-ods-border hover:border-ods-border-hover hover:bg-ods-bg-hover'
+              ? 'cursor-pointer bg-ods-bg-secondary border-ods-accent shadow-sm'
+              : 'cursor-pointer bg-ods-bg-primary border-ods-border hover:border-ods-border-hover hover:bg-ods-bg-hover'
           }
         `}
         // Disabled options can't be newly SELECTED, but an already-selected one
@@ -177,11 +177,11 @@ export function PushButtonSelector({
               </div>
             )}
             <div className="flex-1 min-w-0">
-              <div className="text-h6 font-semibold text-ods-text-primary">
+              <div className="font-['DM_Sans'] text-[16px] font-semibold text-ods-text-primary">
                 {option.displayName || option.name}
               </div>
               {option.description && (
-                <div className="text-h6 text-ods-text-secondary line-clamp-2" title={option.description}>
+                <div className="font-['DM_Sans'] text-[12px] text-ods-text-secondary line-clamp-2" title={option.description}>
                   {option.description}
                 </div>
               )}
@@ -258,11 +258,11 @@ export function PushButtonSelector({
                   </div>
                 )}
                 <div>
-                  <div className="text-h6 font-semibold text-ods-text-primary">
+                  <div className="font-['DM_Sans'] text-[14px] font-semibold text-ods-text-primary">
                     {section.label}
                   </div>
                   {section.description && (
-                    <div className="text-h6 text-ods-text-tertiary">
+                    <div className="font-['DM_Sans'] text-[11px] text-ods-text-tertiary">
                       {section.description}
                     </div>
                   )}
@@ -299,10 +299,10 @@ export function PushButtonSelector({
 
       {/* Selection Summary */}
       {selectionSummary && validSelectedIds.length > 0 && (
-        <div className="p-4 bg-ods-success-secondary border border-ods-success rounded-lg">
+        <div className="p-4 bg-ods-attention-green-success-secondary border border-ods-attention-green-success rounded-lg">
           <div className="flex items-center gap-2 mb-2">
-            <div className="w-2 h-2 bg-ods-success rounded-full"></div>
-            <span className="text-h6 text-ods-success">
+            <div className="w-2 h-2 bg-ods-attention-green-success rounded-full"></div>
+            <span className="font-['DM_Sans'] text-[14px] text-ods-attention-green-success font-medium">
               {validSelectedIds.length} {multiSelect ? 'items' : 'item'} selected
             </span>
           </div>
@@ -311,7 +311,7 @@ export function PushButtonSelector({
             {getSelectedOptions().map(option => (
               <Badge
                 key={option.id}
-                className="bg-ods-accent text-ods-text-primary text-h6"
+                className="bg-ods-accent text-ods-text-primary font-['DM_Sans'] text-[12px] font-medium"
               >
                 {option.displayName || option.name}
               </Badge>
@@ -322,15 +322,15 @@ export function PushButtonSelector({
 
       {/* Help Text */}
       {helpText && (
-        <div className="text-h6 text-ods-text-secondary">
+        <div className="text-[12px] text-ods-text-secondary font-['DM_Sans']">
           {helpText}
         </div>
       )}
 
       {/* Empty State Warning */}
       {validSelectedIds.length === 0 && title && !optional && (
-        <div className="p-3 bg-ods-error-secondary border border-ods-error rounded-lg">
-          <div className="text-h6 text-ods-error">
+        <div className="p-3 bg-ods-attention-red-error-secondary border border-ods-attention-red-error rounded-lg">
+          <div className="font-['DM_Sans'] text-[12px] text-ods-attention-red-error">
             ⚠️ Please select at least one option
           </div>
         </div>