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

package/src/components/embeds/og-link-preview.tsx

@@ -257,7 +257,7 @@ export const OGLinkPreview: React.FC<OGLinkPreviewProps> = ({
   const hasImage = !!resolvedImageUrl
   const isFallbackImage = resolvedImageUrl === fallbackImage
   const isPlaceholder = resolvedImageUrl === placeholderImageUrl && !isFallbackImage
-  const bgColor = useImageEdgeColor(resolvedImageUrl ?? null, 'var(--color-bg-surface)')
+  const bgColor = useImageEdgeColor(resolvedImageUrl ?? null, 'var(--ods-bg-secondary)')
 
   const renderSkeleton = () => isCompact ? (
     <div className="my-4">
@@ -359,13 +359,13 @@ export const OGLinkPreview: React.FC<OGLinkPreviewProps> = ({
         <div className="my-4">
           <a href={effectiveData.url} target="_blank" rel="noopener noreferrer"
             className="flex flex-row items-center gap-3 border border-ods-border rounded-lg overflow-hidden bg-ods-card hover:border-ods-accent transition-all duration-200 group px-4 py-3">
-            <div className="w-8 h-8 bg-ods-bg-surface rounded-lg flex items-center justify-center flex-shrink-0">
+            <div className="w-8 h-8 bg-ods-bg-secondary rounded-lg flex items-center justify-center flex-shrink-0">
               <Favicon src={faviconSrc} size="w-5 h-5" />
             </div>
             <div className="flex-1 min-w-0">
-              <h3 className="text-h6 font-semibold text-ods-text-primary group-hover:text-ods-accent transition-colors truncate">{title}</h3>
+              <h3 className="font-sans text-sm font-semibold text-ods-text-primary group-hover:text-ods-accent transition-colors truncate">{title}</h3>
               {description && (
-                <p className="text-h6 text-ods-text-secondary truncate">{description}</p>
+                <p className="font-sans text-xs text-ods-text-secondary truncate">{description}</p>
               )}
             </div>
             <ExternalLinkIcon size={14} />
@@ -381,13 +381,13 @@ export const OGLinkPreview: React.FC<OGLinkPreviewProps> = ({
             {renderImage()}
           </div>
           <div className="flex-1 p-3 flex flex-col justify-center min-w-0">
-            <h3 className="text-h6 font-semibold text-ods-text-primary overflow-hidden group-hover:text-ods-accent transition-colors"
+            <h3 className="font-sans text-sm font-semibold text-ods-text-primary overflow-hidden group-hover:text-ods-accent transition-colors"
               style={{ display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' }}>{title}</h3>
             {description && (
-              <p className="text-h6 text-ods-text-secondary overflow-hidden mt-1"
+              <p className="font-sans text-xs text-ods-text-secondary overflow-hidden mt-1"
                 style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{description}</p>
             )}
-            <div className="text-h6 text-ods-text-secondary mt-1 truncate">{effectiveData.siteName || ogDomain}</div>
+            <div className="text-xs text-ods-text-secondary mt-1 truncate">{effectiveData.siteName || ogDomain}</div>
           </div>
         </a>
       </div>
@@ -399,13 +399,13 @@ export const OGLinkPreview: React.FC<OGLinkPreviewProps> = ({
       <div className="my-6">
         <a href={effectiveData.url} target="_blank" rel="noopener noreferrer"
           className="flex items-center gap-3 border border-ods-border rounded-lg overflow-hidden bg-ods-card hover:border-ods-accent transition-all duration-200 group px-4 py-3">
-          <div className="w-10 h-10 bg-ods-bg-surface rounded-lg flex items-center justify-center flex-shrink-0">
+          <div className="w-10 h-10 bg-ods-bg-secondary rounded-lg flex items-center justify-center flex-shrink-0">
             <Favicon src={faviconSrc} />
           </div>
           <div className="flex-1 min-w-0">
-            <h3 className="text-h6 font-semibold text-ods-text-primary group-hover:text-ods-accent transition-colors truncate">{title}</h3>
+            <h3 className="font-sans font-semibold text-ods-text-primary text-base group-hover:text-ods-accent transition-colors truncate">{title}</h3>
             {description && (
-              <p className="text-h6 text-ods-text-secondary truncate">{description}</p>
+              <p className="font-sans text-sm text-ods-text-secondary truncate">{description}</p>
             )}
           </div>
           <ExternalLinkIcon />
@@ -426,14 +426,14 @@ export const OGLinkPreview: React.FC<OGLinkPreviewProps> = ({
             <img src={logoSrc} alt={publicationName || ''} className="w-6 h-6 rounded object-contain flex-shrink-0 mt-0.5"
               onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
             <div className="flex-1 min-w-0">
-              <h3 className="text-h6 font-semibold text-ods-text-primary overflow-hidden group-hover:text-ods-accent transition-colors h-[2.5rem] mb-2"
+              <h3 className="font-sans font-semibold text-ods-text-primary text-base overflow-hidden group-hover:text-ods-accent transition-colors h-[2.5rem] leading-[1.25rem] mb-2"
                 style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{title}</h3>
               {description && (
-                <p className="text-h6 text-ods-text-secondary overflow-hidden h-[2.5rem] mb-2"
+                <p className="font-sans text-sm text-ods-text-secondary overflow-hidden h-[2.5rem] leading-[1.25rem] mb-2"
                   style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{description}</p>
               )}
-              <div className="flex items-center gap-2 text-h6 text-ods-text-secondary">
-                <span>{effectiveData.siteName}</span>
+              <div className="flex items-center gap-2 text-xs text-ods-text-secondary">
+                <span className="font-medium">{effectiveData.siteName}</span>
                 <span>•</span>
                 <span className="truncate">{ogDomain}</span>
               </div>

package/src/components/embeds/pdf-viewer.tsx

@@ -31,7 +31,7 @@ export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfV
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-2 min-w-0">
           <AdobePdfIcon className="w-5 h-5 shrink-0" />
-          <h2 className="text-h3 text-ods-text-primary truncate">{displayName}</h2>
+          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
         </div>
         <div className="flex items-center gap-2 w-full sm:w-auto">
           <Button

package/src/components/embeds/reddit-embed-client.tsx

@@ -206,14 +206,14 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
           </div>
 
           <div className="text-center">
-            <p className="text-ods-text-secondary text-h6 mb-4">
+            <p className="text-ods-text-secondary text-sm mb-4">
               This Reddit post could not be loaded. It may have been deleted, made private, or the subreddit may be restricted.
             </p>
             <a
               href={url}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center space-x-2 px-4 py-2 bg-[#FF4500] text-white rounded-md text-h6 hover:bg-[#E03D00] transition-colors"
+              className="inline-flex items-center space-x-2 px-4 py-2 bg-[#FF4500] text-white rounded-md text-sm font-medium hover:bg-[#E03D00] transition-colors"
             >
               <RedditIcon />
               <span>View on Reddit</span>
@@ -479,8 +479,8 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
                 <RedditProfilePic username={redditData.author} />
               </div>
               <div>
-                <p className="text-ods-text-primary text-h6">r/{redditData.subreddit}</p>
-                <div className="flex items-center space-x-2 text-ods-text-secondary text-h6">
+                <p className="text-ods-text-primary font-medium">r/{redditData.subreddit}</p>
+                <div className="flex items-center space-x-2 text-ods-text-secondary text-sm">
                   <UserIcon />
                   <span>u/{redditData.author}</span>
                   <ClockIcon />
@@ -493,13 +493,13 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
 
         {/* Content - Matching Twitter Style */}
         <div className="p-4">
-          <h3 className="text-ods-text-primary text-h3 mb-3">
+          <h3 className="text-ods-text-primary font-semibold text-lg mb-3 leading-tight">
             {redditData.title}
           </h3>
 
           {redditData.selftext && (
             <div
-              className="text-ods-text-secondary text-h6 mb-4 overflow-hidden"
+              className="text-ods-text-secondary text-sm leading-relaxed mb-4 overflow-hidden"
               style={{ maxHeight: `${maxWidth - 200}px` }}
             >
               <p className="whitespace-pre-wrap">
@@ -517,7 +517,7 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
           )}
 
           {/* Stats - Matching Twitter Style */}
-          <div className="flex items-center space-x-6 text-ods-text-secondary text-h6">
+          <div className="flex items-center space-x-6 text-ods-text-secondary text-sm">
             <div className="flex items-center space-x-1">
               <ArrowUpIcon />
               <span>{formatNumber(redditData.ups)} upvotes</span>
@@ -530,12 +530,12 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
         </div>
 
         {/* Footer - Matching Twitter Style */}
-        <div className="px-4 py-3 bg-ods-bg-surface border-t border-ods-border">
+        <div className="px-4 py-3 bg-ods-bg-secondary border-t border-ods-border">
           <a
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center space-x-2 text-ods-accent hover:opacity-80 transition-colors text-h6"
+            className="inline-flex items-center space-x-2 text-ods-accent hover:opacity-80 transition-colors text-sm font-medium"
           >
             <ExternalLinkIcon />
             <span>View on Reddit</span>

package/src/components/embeds/twitter-embed-client.tsx

@@ -148,14 +148,14 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
           </div>
 
           <div className="text-center">
-            <p className="text-ods-text-secondary text-h6 mb-4">
+            <p className="text-ods-text-secondary text-sm mb-4">
               This tweet could not be loaded. It may have been deleted, made private, or the account may be suspended.
             </p>
             <a
               href={url}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-bg-surface text-ods-text-primary rounded-md text-h6 hover:bg-ods-bg-active transition-colors"
+              className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-bg-secondary text-ods-text-primary rounded-md text-sm font-medium hover:bg-ods-bg-tertiary transition-colors"
             >
               <XIcon />
               <span>View on X</span>
@@ -228,8 +228,8 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
                 />
               </div>
               <div>
-                <p className="text-ods-text-primary text-h6">@{username}</p>
-                <div className="flex items-center space-x-2 text-ods-text-secondary text-h6">
+                <p className="text-ods-text-primary font-medium">@{username}</p>
+                <div className="flex items-center space-x-2 text-ods-text-secondary text-sm">
                   <UserIcon />
                   <span>{tweetData.author_name}</span>
                   <ClockIcon />
@@ -244,7 +244,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
         <div className="p-4">
           {tweetText && (
             <div
-              className="text-ods-text-secondary text-h6 mb-4 overflow-hidden"
+              className="text-ods-text-secondary text-sm leading-relaxed mb-4 overflow-hidden"
               style={{ maxHeight: `${maxWidth - 200}px` }}
             >
               <p className="whitespace-pre-wrap">
@@ -264,7 +264,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
                   href={link.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center space-x-2 text-[#1DA1F2] hover:text-ods-accent transition-colors text-h6"
+                  className="inline-flex items-center space-x-2 text-[#1DA1F2] hover:text-ods-accent transition-colors text-sm"
                 >
                   <ExternalLinkIcon />
                   <span className="underline">{link.text}</span>
@@ -274,7 +274,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
           )}
 
           {/* Stats */}
-          <div className="flex items-center space-x-6 text-ods-text-secondary text-h6">
+          <div className="flex items-center space-x-6 text-ods-text-secondary text-sm">
             <div className="flex items-center space-x-1">
               <HeartIcon />
               <span>Likes</span>
@@ -291,12 +291,12 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
         </div>
 
         {/* Footer */}
-        <div className="px-4 py-3 bg-ods-bg-surface border-t border-ods-border">
+        <div className="px-4 py-3 bg-ods-bg-secondary border-t border-ods-border">
           <a
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center space-x-2 text-ods-accent hover:opacity-80 transition-colors text-h6"
+            className="inline-flex items-center space-x-2 text-ods-accent hover:opacity-80 transition-colors text-sm font-medium"
           >
             <ExternalLinkIcon />
             <span>View on X</span>

package/src/components/empty-state.tsx

@@ -163,12 +163,12 @@ export function EmptyState({
       </div>
 
       {/* Title */}
-      <h2 className="mb-2 md:mb-3 text-h3 text-ods-text-primary">
+      <h2 className="mb-2 md:mb-3 text-lg md:text-xl font-semibold font-['DM_Sans'] text-ods-text-primary tracking-[-0.02em]">
         {displayTitle}
       </h2>
 
       {/* Description */}
-      <p className="mb-4 md:mb-8 max-w-md text-h6 text-ods-text-secondary">
+      <p className="mb-4 md:mb-8 max-w-md text-sm font-medium font-['DM_Sans'] text-ods-text-secondary leading-[1.43em]">
         {displayDescription}
       </p>
 
@@ -178,8 +178,8 @@ export function EmptyState({
           <Button
             onClick={smartCTA.action}
             className={ctaVariant === 'primary'
-              ? "w-full bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover transition-all duration-150 font-body font-medium"
-              : "w-full bg-transparent border border-ods-border text-ods-text-primary hover:border-ods-accent hover:text-ods-accent transition-all duration-150 font-body font-medium"
+              ? "w-full bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover transition-all duration-150 font-['DM_Sans'] font-medium"
+              : "w-full bg-transparent border border-ods-border text-ods-text-primary hover:border-ods-accent hover:text-ods-accent transition-all duration-150 font-['DM_Sans'] font-medium"
             }
           >
             {smartCTA.text}
@@ -193,7 +193,7 @@ export function EmptyState({
           <Button
             onClick={onGoBack}
             variant="outline"
-            className="w-full transition-all duration-150 font-body font-medium"
+            className="w-full transition-all duration-150 font-['DM_Sans'] font-medium"
           >
             {backButtonText}
           </Button>

package/src/components/faq/faq-section.tsx

@@ -272,7 +272,7 @@ function GroupedFaqList({
                 aria-current={isActive ? 'true' : undefined}
                 onClick={(e) => handleJump(e, group.slug as string)}
                 className={cn(
-                  "rounded-full border px-4 py-2 text-h6 transition-colors",
+                  "rounded-full border px-4 py-2 text-sm font-medium font-['DM_Sans'] transition-colors",
                   isActive
                     ? 'border-ods-text-primary bg-ods-card text-ods-text-primary'
                     : 'border-ods-border bg-ods-card text-ods-text-secondary hover:border-ods-text-secondary hover:text-ods-text-primary',

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

@@ -141,7 +141,7 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
             {title}
           </h3>
           {description && (
-            <p className="text-ods-text-secondary text-h6 mt-1">
+            <p className="text-ods-text-secondary text-sm font-['DM_Sans'] mt-1">
               {description}
             </p>
           )}
@@ -154,12 +154,12 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
           <div className="flex items-center justify-between">
             <label
               htmlFor="ai-enrich-custom-instructions"
-              className="text-h6 text-ods-text-primary"
+              className="text-sm font-medium text-ods-text-primary font-['DM_Sans']"
             >
               {customInstructionsLabel}
             </label>
             {customInstructionsMaxLength !== undefined && (
-              <span className="text-h6 text-ods-text-secondary">
+              <span className="text-xs text-ods-text-secondary font-['DM_Sans']">
                 {(customInstructions ?? '').length}/{customInstructionsMaxLength}
               </span>
             )}
@@ -175,7 +175,7 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
             className="resize-y"
           />
           {customInstructionsHelperText && (
-            <p className="text-h6 text-ods-text-secondary">
+            <p className="text-xs text-ods-text-secondary font-['DM_Sans']">
               {customInstructionsHelperText}
             </p>
           )}
@@ -217,7 +217,7 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
       {/* Disabled message with unfilled fields */}
       {shouldDisable && !loading && (
         <div className="space-y-2">
-          <p className="text-ods-text-secondary text-h6">
+          <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
             {disabledMessage}
           </p>
           {unfilledFields.length > 0 && (
@@ -225,9 +225,9 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
               {unfilledFields.map(field => (
                 <span
                   key={field.key}
-                  className="inline-flex items-center gap-1 px-2 py-0.5 text-h6 rounded-full bg-ods-flamingo-cyan/10 text-ods-flamingo-cyan/70"
+                  className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-[--ods-flamingo-cyan-base]/10 text-[--ods-flamingo-cyan-base]/70 font-['DM_Sans']"
                 >
-                  <span className="w-1.5 h-1.5 rounded-full bg-ods-flamingo-cyan/50" />
+                  <span className="w-1.5 h-1.5 rounded-full bg-[--ods-flamingo-cyan-base]/50" />
                   {field.label}
                 </span>
               ))}
@@ -238,9 +238,9 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
 
       {/* Loading state with status message */}
       {loading && statusMessage && (
-        <div className="flex items-center gap-3 p-3 rounded-lg bg-ods-bg-surface">
+        <div className="flex items-center gap-3 p-3 rounded-lg bg-ods-card-secondary">
           <Loader2 className="h-5 w-5 text-ods-accent animate-spin" />
-          <span className="text-h6 text-ods-text-primary">
+          <span className="text-sm text-ods-text-primary font-['DM_Sans']">
             {statusMessage}
           </span>
         </div>
@@ -252,16 +252,16 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
           {/* Status indicator - simple and clean */}
           <div className={cn(
             'flex items-center gap-3 p-3 rounded-lg',
-            status === 'success' ? 'bg-ods-success/10' : 'bg-ods-error/10'
+            status === 'success' ? 'bg-[--ods-attention-green-success]/10' : 'bg-[--ods-attention-red-error]/10'
           )}>
             {status === 'success' ? (
-              <CheckCircle className="h-5 w-5 text-ods-success" />
+              <CheckCircle className="h-5 w-5 text-[--ods-attention-green-success]" />
             ) : (
-              <AlertCircle className="h-5 w-5 text-ods-error" />
+              <AlertCircle className="h-5 w-5 text-[--ods-attention-red-error]" />
             )}
             <span className={cn(
-              'text-h6',
-              status === 'success' ? 'text-ods-success' : 'text-ods-error'
+              'text-sm font-medium',
+              status === 'success' ? 'text-[--ods-attention-green-success]' : 'text-[--ods-attention-red-error]'
             )}>
               {statusMessage || (status === 'success' ? 'Enrichment complete' : 'Enrichment failed')}
             </span>

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

@@ -21,15 +21,15 @@ export const AIRequiredBadge: React.FC<AIRequiredBadgeProps> = ({
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1 text-h6 rounded-full',
-        'bg-ods-flamingo-cyan/10 text-ods-flamingo-cyan',
-        size === 'sm' && 'ml-2 px-2 py-0.5',
-        size === 'md' && 'ml-2 px-2.5 py-1',
+        'inline-flex items-center gap-1 font-medium rounded-full',
+        'bg-[--ods-flamingo-cyan-base]/10 text-[--ods-flamingo-cyan-base]',
+        size === 'sm' && 'ml-2 px-2 py-0.5 text-xs',
+        size === 'md' && 'ml-2 px-2.5 py-1 text-sm',
         className
       )}
     >
       <SparklesIcon size={size === 'sm' ? 12 : 14} color="var(--ods-flamingo-cyan-base)" />
-      <span className="font-body">AI-required</span>
+      <span className="font-['DM_Sans']">AI-required</span>
     </span>
   )
 }

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

@@ -22,18 +22,18 @@ const statusConfig = {
     label: 'Ready',
   },
   loading: {
-    color: 'text-ods-flamingo-cyan',
-    bgColor: 'bg-ods-flamingo-cyan/10',
+    color: 'text-[var(--ods-flamingo-cyan-base)]',
+    bgColor: 'bg-[var(--ods-flamingo-cyan-base)]/10',
     label: 'Processing...',
   },
   success: {
-    color: 'text-ods-success',
-    bgColor: 'bg-ods-success/10',
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
     label: 'Enriched',
   },
   error: {
-    color: 'text-ods-error',
-    bgColor: 'bg-ods-error/10',
+    color: 'text-red-500',
+    bgColor: 'bg-red-500/10',
     label: 'Failed',
   },
 }
@@ -71,7 +71,7 @@ export const AIStatusIndicator: React.FC<AIStatusIndicatorProps> = ({
       />
       <span
         className={cn(
-          'text-h6',
+          'text-sm font-medium',
           confidence !== undefined && status === 'success'
             ? getConfidenceTextClass(confidence)
             : config.color
@@ -82,7 +82,7 @@ export const AIStatusIndicator: React.FC<AIStatusIndicatorProps> = ({
       {confidenceLabel && status === 'success' && (
         <span
           className={cn(
-            'text-h6 px-2 py-0.5 rounded-full border',
+            'text-xs px-2 py-0.5 rounded-full border',
             getConfidenceBorderClass(confidence),
             getConfidenceTextClass(confidence)
           )}

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

@@ -21,13 +21,13 @@ export const AIWarningsSection: React.FC<AIWarningsSectionProps> = ({
   return (
     <div
       className={cn(
-        'rounded-lg border border-ods-warning/30 bg-ods-warning/10 p-4',
+        'rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4',
         className
       )}
     >
       <div className="flex items-start gap-2">
         <svg
-          className="w-5 h-5 text-ods-warning flex-shrink-0 mt-0.5"
+          className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -40,14 +40,14 @@ export const AIWarningsSection: React.FC<AIWarningsSectionProps> = ({
           />
         </svg>
         <div className="flex-1">
-          <h4 className="text-h6 font-semibold text-ods-warning mb-2">
+          <h4 className="text-sm font-semibold text-yellow-500 mb-2">
             {title}
           </h4>
           <ul className="space-y-1">
             {warnings.map((warning, index) => (
               <li
                 key={index}
-                className="text-h6 text-ods-warning/80 list-disc list-inside"
+                className="text-sm text-yellow-500/80 list-disc list-inside"
               >
                 {warning}
               </li>

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

@@ -19,9 +19,9 @@ export interface ConfidenceBadgeProps {
 }
 
 const sizeStyles = {
-  sm: 'text-h6 px-1.5 py-0.5',
-  md: 'text-h6 px-2 py-1',
-  lg: 'text-h6 px-3 py-1.5',
+  sm: 'text-xs px-1.5 py-0.5',
+  md: 'text-sm px-2 py-1',
+  lg: 'text-base 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',
+        'inline-flex items-center gap-1 rounded-full border font-medium',
         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-h6 text-ods-text-primary">{title}</Label>
+        <Label className="text-[14px] 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="text-h6 bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover"
+              className="font-['DM_Sans'] text-[14px] 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="text-h6"
+            className="font-['DM_Sans'] text-[14px]"
           >
             {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-surface rounded-lg border border-ods-border">
+        <div key={index} className="flex items-center gap-3 p-3 bg-ods-bg-secondary 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-error hover:bg-ods-error-secondary"
+            className="text-ods-attention-red-error hover:bg-ods-attention-red-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-surface border border-ods-border rounded-lg">
-          <p className="text-ods-text-secondary text-h6">
+        <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']">
             {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-h6">
+          <div className="relative flex justify-center text-sm">
             <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-h6 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-xs font-medium 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-h6 text-ods-text-primary">
+        <Label className="text-[14px] 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="text-h6"
+          className="font-['DM_Sans'] text-[14px]"
         >
           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-surface rounded-lg border border-ods-border overflow-hidden">
+          <div key={index} className="bg-ods-bg-secondary 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="text-h6 text-ods-text-primary truncate">
+                  <p className="font-['DM_Sans'] font-medium text-[14px] text-ods-text-primary truncate">
                     {entry.title}
                   </p>
                 ) : (
-                  <p className="text-h6 text-ods-text-secondary italic">
+                  <p className="font-['DM_Sans'] font-medium text-[14px] 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-ods-error hover:text-ods-error-hover hover:bg-ods-error-secondary shrink-0"
+                className="text-red-400 hover:text-red-300 hover:bg-red-400/10 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-h6 text-ods-text-secondary">Title *</Label>
+                  <Label className="text-[12px] 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-h6 text-ods-text-secondary">Description</Label>
+                  <Label className="text-[12px] 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-surface border border-ods-border rounded-lg">
-          <p className="text-ods-text-secondary text-h6">
+        <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']">
             No entries added. Click "Add Entry" to create {title.toLowerCase()}.
           </p>
         </div>