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

package/src/components/context-menu.tsx

@@ -27,7 +27,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -120,7 +120,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -144,7 +144,7 @@ const ContextMenuLabel = React.forwardRef<
   <ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      "px-2 py-1.5 text-h6 font-semibold text-foreground",
       inset && "pl-8",
       className
     )}

package/src/components/date-time-picker.tsx

@@ -25,7 +25,7 @@ const inputClassName = cn(
   "disabled:cursor-not-allowed disabled:opacity-50 touch-manipulation",
   // Admin theme colors
   "bg-ods-card border-ods-border text-ods-text-primary",
-  "placeholder:text-[#767676] focus-visible:ring-[#FFC008]",
+  "placeholder:text-ods-text-muted focus-visible:ring-ods-accent",
   "md:text-sm text-base" // Mobile zoom prevention
 );
 
@@ -44,7 +44,7 @@ export function DateTimePicker({
   return (
     <div className={cn("space-y-2", className)}>
       {label && (
-        <Label className="font-['Azeret_Mono'] text-[12px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-secondary uppercase">
+        <Label className="text-h5 font-semibold text-ods-text-secondary">
           {label}
         </Label>
       )}

package/src/components/docs/doc-viewer.tsx

@@ -291,7 +291,7 @@ function DocViewerContent({
           {error && (
             <div className="flex justify-center">
               <div className="rounded-lg border bg-ods-card p-8 text-center max-w-md border-ods-border">
-                <h2 className="text-xl font-semibold text-ods-text-primary">
+                <h2 className="text-h3 text-ods-text-primary">
                   Error Loading Documents
                 </h2>
                 <p className="mt-2 text-ods-text-secondary">{error}. Please try again later.</p>
@@ -322,7 +322,7 @@ function DocViewerContent({
                       <PersistentSidebar isLoading={false}>
                         <div className="hidden lg:block">
                           <div className="space-y-4">
-                            <h3 className="text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em]">
+                            <h3 className="text-h5 font-semibold text-ods-text-secondary">
                               {sidebarLabel}
                             </h3>
                             <MultiLevelNavigation
@@ -369,7 +369,7 @@ function DocViewerContent({
                         renderSkeleton(selectedNodeDocType)
                       ) : !content ? (
                         <div className="text-center py-16">
-                          <p className="text-xl text-ods-text-secondary">{resolvedEmptyText}</p>
+                          <p className="text-h4 text-ods-text-secondary">{resolvedEmptyText}</p>
                         </div>
                       ) : (
                         renderedContent
@@ -406,7 +406,7 @@ function DocViewerContent({
                     !isLoadingContent && (
                       <div className="hidden lg:block">
                         <div className="sticky top-24">
-                          <h3 className="text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em] mb-4">
+                          <h3 className="text-h5 font-semibold text-ods-text-secondary mb-4">
                             ON THIS PAGE
                           </h3>
                           <StickySectionNav

package/src/components/embeds/figma-embed.tsx

@@ -57,7 +57,7 @@ function SlidesViewToggle({
             key={key}
             value={key}
             aria-label={label}
-            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium transition-colors ${
+            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-h6 transition-colors ${
               active
                 ? 'bg-ods-accent text-ods-text-on-accent'
                 : 'text-ods-text-secondary hover:text-ods-text-primary hover:bg-ods-bg-hover'
@@ -106,7 +106,7 @@ export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedP
       <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">
           <FigmaIcon className="w-5 h-5 shrink-0" />
-          <span className="font-sans text-base font-semibold text-ods-text-primary truncate">
+          <span className="text-h6 font-semibold text-ods-text-primary truncate">
             {heading}
           </span>
         </div>

package/src/components/embeds/file-download-card.tsx

@@ -30,10 +30,10 @@ export function FileDownloadCard({
       <div className="bg-ods-card border border-ods-border rounded-xl p-8 max-w-md w-full text-center space-y-4">
         <FileText className="w-16 h-16 text-ods-text-secondary mx-auto" />
         <div>
-          <h3 className="text-lg font-semibold text-ods-text-primary">
+          <h3 className="text-h3 text-ods-text-primary">
             {fileName || 'File'}
           </h3>
-          <div className="flex items-center justify-center gap-3 mt-2 text-sm text-ods-text-secondary">
+          <div className="flex items-center justify-center gap-3 mt-2 text-h6 text-ods-text-secondary">
             {mimeType && <span>{mimeType}</span>}
             {typeof fileSize === 'number' && <span>{formatFileSize(fileSize)}</span>}
           </div>

package/src/components/embeds/google-sheets-viewer.tsx

@@ -30,7 +30,7 @@ export function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleShee
       <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">
           <GoogleSheetsIcon className="w-5 h-5 shrink-0" />
-          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
+          <h2 className="text-h3 text-ods-text-primary truncate">{displayName}</h2>
         </div>
         <Button
           variant="outline"

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

@@ -46,7 +46,7 @@ export function LinkedInEmbedClient({ url, height = 600 }: LinkedInEmbedProps) {
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-card border border-ods-border text-ods-text-primary rounded-md text-sm font-medium hover:bg-ods-bg-secondary transition-colors"
+            className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-card border border-ods-border text-ods-text-primary rounded-md text-h6 hover:bg-ods-bg-hover transition-colors"
           >
             <LinkedinIcon className="w-4 h-4" />
             <span>View on LinkedIn</span>
@@ -84,12 +84,12 @@ export function LinkedInEmbedClient({ url, height = 600 }: LinkedInEmbedProps) {
           onLoad={() => setLoaded(true)}
         />
       </div>
-      <div className="px-4 py-3 bg-ods-bg-secondary border-t border-ods-border">
+      <div className="px-4 py-3 bg-ods-bg-surface 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:text-ods-accent/80 transition-colors text-sm font-medium"
+          className="inline-flex items-center space-x-2 text-ods-accent hover:text-ods-accent/80 transition-colors text-h6"
         >
           <ExternalLink className="w-4 h-4" />
           <span>View on LinkedIn</span>

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(--ods-bg-secondary)')
+  const bgColor = useImageEdgeColor(resolvedImageUrl ?? null, 'var(--color-bg-surface)')
 
   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-secondary rounded-lg flex items-center justify-center flex-shrink-0">
+            <div className="w-8 h-8 bg-ods-bg-surface 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="font-sans text-sm font-semibold text-ods-text-primary group-hover:text-ods-accent transition-colors truncate">{title}</h3>
+              <h3 className="text-h6 font-semibold text-ods-text-primary group-hover:text-ods-accent transition-colors truncate">{title}</h3>
               {description && (
-                <p className="font-sans text-xs text-ods-text-secondary truncate">{description}</p>
+                <p className="text-h6 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="font-sans text-sm font-semibold text-ods-text-primary overflow-hidden group-hover:text-ods-accent transition-colors"
+            <h3 className="text-h6 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="font-sans text-xs text-ods-text-secondary overflow-hidden mt-1"
+              <p className="text-h6 text-ods-text-secondary overflow-hidden mt-1"
                 style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{description}</p>
             )}
-            <div className="text-xs text-ods-text-secondary mt-1 truncate">{effectiveData.siteName || ogDomain}</div>
+            <div className="text-h6 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-secondary rounded-lg flex items-center justify-center flex-shrink-0">
+          <div className="w-10 h-10 bg-ods-bg-surface rounded-lg flex items-center justify-center flex-shrink-0">
             <Favicon src={faviconSrc} />
           </div>
           <div className="flex-1 min-w-0">
-            <h3 className="font-sans font-semibold text-ods-text-primary text-base group-hover:text-ods-accent transition-colors truncate">{title}</h3>
+            <h3 className="text-h6 font-semibold text-ods-text-primary group-hover:text-ods-accent transition-colors truncate">{title}</h3>
             {description && (
-              <p className="font-sans text-sm text-ods-text-secondary truncate">{description}</p>
+              <p className="text-h6 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="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"
+              <h3 className="text-h6 font-semibold text-ods-text-primary overflow-hidden group-hover:text-ods-accent transition-colors h-[2.5rem] mb-2"
                 style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{title}</h3>
               {description && (
-                <p className="font-sans text-sm text-ods-text-secondary overflow-hidden h-[2.5rem] leading-[1.25rem] mb-2"
+                <p className="text-h6 text-ods-text-secondary overflow-hidden h-[2.5rem] mb-2"
                   style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{description}</p>
               )}
-              <div className="flex items-center gap-2 text-xs text-ods-text-secondary">
-                <span className="font-medium">{effectiveData.siteName}</span>
+              <div className="flex items-center gap-2 text-h6 text-ods-text-secondary">
+                <span>{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-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
+          <h2 className="text-h3 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-sm mb-4">
+            <p className="text-ods-text-secondary text-h6 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-sm font-medium hover:bg-[#E03D00] transition-colors"
+              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"
             >
               <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 font-medium">r/{redditData.subreddit}</p>
-                <div className="flex items-center space-x-2 text-ods-text-secondary text-sm">
+                <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">
                   <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 font-semibold text-lg mb-3 leading-tight">
+          <h3 className="text-ods-text-primary text-h3 mb-3">
             {redditData.title}
           </h3>
 
           {redditData.selftext && (
             <div
-              className="text-ods-text-secondary text-sm leading-relaxed mb-4 overflow-hidden"
+              className="text-ods-text-secondary text-h6 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-sm">
+          <div className="flex items-center space-x-6 text-ods-text-secondary text-h6">
             <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-secondary border-t border-ods-border">
+        <div className="px-4 py-3 bg-ods-bg-surface 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-sm font-medium"
+            className="inline-flex items-center space-x-2 text-ods-accent hover:opacity-80 transition-colors text-h6"
           >
             <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-sm mb-4">
+            <p className="text-ods-text-secondary text-h6 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-secondary text-ods-text-primary rounded-md text-sm font-medium hover:bg-ods-bg-tertiary transition-colors"
+              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"
             >
               <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 font-medium">@{username}</p>
-                <div className="flex items-center space-x-2 text-ods-text-secondary text-sm">
+                <p className="text-ods-text-primary text-h6">@{username}</p>
+                <div className="flex items-center space-x-2 text-ods-text-secondary text-h6">
                   <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-sm leading-relaxed mb-4 overflow-hidden"
+              className="text-ods-text-secondary text-h6 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-sm"
+                  className="inline-flex items-center space-x-2 text-[#1DA1F2] hover:text-ods-accent transition-colors text-h6"
                 >
                   <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-sm">
+          <div className="flex items-center space-x-6 text-ods-text-secondary text-h6">
             <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-secondary border-t border-ods-border">
+        <div className="px-4 py-3 bg-ods-bg-surface 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-sm font-medium"
+            className="inline-flex items-center space-x-2 text-ods-accent hover:opacity-80 transition-colors text-h6"
           >
             <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-lg md:text-xl font-semibold font-['DM_Sans'] text-ods-text-primary tracking-[-0.02em]">
+      <h2 className="mb-2 md:mb-3 text-h3 text-ods-text-primary">
         {displayTitle}
       </h2>
 
       {/* Description */}
-      <p className="mb-4 md:mb-8 max-w-md text-sm font-medium font-['DM_Sans'] text-ods-text-secondary leading-[1.43em]">
+      <p className="mb-4 md:mb-8 max-w-md text-h6 text-ods-text-secondary">
         {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-['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"
+              ? "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"
             }
           >
             {smartCTA.text}
@@ -193,7 +193,7 @@ export function EmptyState({
           <Button
             onClick={onGoBack}
             variant="outline"
-            className="w-full transition-all duration-150 font-['DM_Sans'] font-medium"
+            className="w-full transition-all duration-150 font-body 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-sm font-medium font-['DM_Sans'] transition-colors",
+                  "rounded-full border px-4 py-2 text-h6 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-sm font-['DM_Sans'] mt-1">
+            <p className="text-ods-text-secondary text-h6 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-sm font-medium text-ods-text-primary font-['DM_Sans']"
+              className="text-h6 text-ods-text-primary"
             >
               {customInstructionsLabel}
             </label>
             {customInstructionsMaxLength !== undefined && (
-              <span className="text-xs text-ods-text-secondary font-['DM_Sans']">
+              <span className="text-h6 text-ods-text-secondary">
                 {(customInstructions ?? '').length}/{customInstructionsMaxLength}
               </span>
             )}
@@ -175,7 +175,7 @@ export const AIEnrichSection: React.FC<AIEnrichSectionProps> = ({
             className="resize-y"
           />
           {customInstructionsHelperText && (
-            <p className="text-xs text-ods-text-secondary font-['DM_Sans']">
+            <p className="text-h6 text-ods-text-secondary">
               {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-sm font-['DM_Sans']">
+          <p className="text-ods-text-secondary text-h6">
             {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-xs font-medium rounded-full bg-[--ods-flamingo-cyan-base]/10 text-[--ods-flamingo-cyan-base]/70 font-['DM_Sans']"
+                  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"
                 >
-                  <span className="w-1.5 h-1.5 rounded-full bg-[--ods-flamingo-cyan-base]/50" />
+                  <span className="w-1.5 h-1.5 rounded-full bg-ods-flamingo-cyan/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-card-secondary">
+        <div className="flex items-center gap-3 p-3 rounded-lg bg-ods-bg-surface">
           <Loader2 className="h-5 w-5 text-ods-accent animate-spin" />
-          <span className="text-sm text-ods-text-primary font-['DM_Sans']">
+          <span className="text-h6 text-ods-text-primary">
             {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-attention-green-success]/10' : 'bg-[--ods-attention-red-error]/10'
+            status === 'success' ? 'bg-ods-success/10' : 'bg-ods-error/10'
           )}>
             {status === 'success' ? (
-              <CheckCircle className="h-5 w-5 text-[--ods-attention-green-success]" />
+              <CheckCircle className="h-5 w-5 text-ods-success" />
             ) : (
-              <AlertCircle className="h-5 w-5 text-[--ods-attention-red-error]" />
+              <AlertCircle className="h-5 w-5 text-ods-error" />
             )}
             <span className={cn(
-              'text-sm font-medium',
-              status === 'success' ? 'text-[--ods-attention-green-success]' : 'text-[--ods-attention-red-error]'
+              'text-h6',
+              status === 'success' ? 'text-ods-success' : 'text-ods-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 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',
+        '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',
         className
       )}
     >
       <SparklesIcon size={size === 'sm' ? 12 : 14} color="var(--ods-flamingo-cyan-base)" />
-      <span className="font-['DM_Sans']">AI-required</span>
+      <span className="font-body">AI-required</span>
     </span>
   )
 }

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

@@ -22,18 +22,18 @@ const statusConfig = {
     label: 'Ready',
   },
   loading: {
-    color: 'text-[var(--ods-flamingo-cyan-base)]',
-    bgColor: 'bg-[var(--ods-flamingo-cyan-base)]/10',
+    color: 'text-ods-flamingo-cyan',
+    bgColor: 'bg-ods-flamingo-cyan/10',
     label: 'Processing...',
   },
   success: {
-    color: 'text-green-500',
-    bgColor: 'bg-green-500/10',
+    color: 'text-ods-success',
+    bgColor: 'bg-ods-success/10',
     label: 'Enriched',
   },
   error: {
-    color: 'text-red-500',
-    bgColor: 'bg-red-500/10',
+    color: 'text-ods-error',
+    bgColor: 'bg-ods-error/10',
     label: 'Failed',
   },
 }
@@ -71,7 +71,7 @@ export const AIStatusIndicator: React.FC<AIStatusIndicatorProps> = ({
       />
       <span
         className={cn(
-          'text-sm font-medium',
+          'text-h6',
           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-xs px-2 py-0.5 rounded-full border',
+            'text-h6 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-yellow-500/30 bg-yellow-500/10 p-4',
+        'rounded-lg border border-ods-warning/30 bg-ods-warning/10 p-4',
         className
       )}
     >
       <div className="flex items-start gap-2">
         <svg
-          className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5"
+          className="w-5 h-5 text-ods-warning 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-sm font-semibold text-yellow-500 mb-2">
+          <h4 className="text-h6 font-semibold text-ods-warning mb-2">
             {title}
           </h4>
           <ul className="space-y-1">
             {warnings.map((warning, index) => (
               <li
                 key={index}
-                className="text-sm text-yellow-500/80 list-disc list-inside"
+                className="text-h6 text-ods-warning/80 list-disc list-inside"
               >
                 {warning}
               </li>