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

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

@@ -11,7 +11,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../dropdown-menu'
+} from '../ui/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-[16px] font-medium text-ods-text-primary truncate" title={policy.name}>
+        <p className="text-h6 text-ods-text-primary truncate" title={policy.name}>
           {policy.name}
         </p>
-        <p className="text-[12px] text-ods-text-secondary break-all font-mono">
+        <p className="text-code text-ods-text-secondary break-all">
           {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-[16px]"
+                className="text-h6"
               >
                 {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-[16px] font-medium text-ods-text-primary">
+          <span className="text-h6 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-[14px] text-ods-text-secondary">
+          <p className="text-h6 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-[16px] !font-bold !leading-tight
+        !text-h6 !font-bold
         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-bg-secondary rounded animate-pulse" />
+        <div className="h-5 w-20 bg-ods-skeleton 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-bg-secondary animate-pulse">
+          <div key={i} className="p-4 rounded-lg border border-ods-border bg-ods-skeleton animate-pulse">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-ods-bg-primary rounded" />
+                <div className="w-8 h-8 bg-ods-skeleton rounded" />
                 <div>
-                  <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 className="h-4 w-20 bg-ods-skeleton rounded mb-1" />
+                  <div className="h-3 w-32 bg-ods-skeleton rounded" />
                 </div>
               </div>
-              <div className="w-6 h-6 bg-ods-bg-primary rounded border-2 border-ods-border" />
+              <div className="w-6 h-6 bg-ods-skeleton 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-attention-red-error-secondary border border-ods-attention-red-error rounded-lg">
-        <div className="font-['DM_Sans'] text-[14px] text-ods-attention-red-error">
+      <div className="p-4 bg-ods-error-secondary border border-ods-error rounded-lg">
+        <div className="text-h6 text-ods-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-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'
+              ? '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'
           }
         `}
         // 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="font-['DM_Sans'] text-[16px] font-semibold text-ods-text-primary">
+              <div className="text-h6 font-semibold text-ods-text-primary">
                 {option.displayName || option.name}
               </div>
               {option.description && (
-                <div className="font-['DM_Sans'] text-[12px] text-ods-text-secondary line-clamp-2" title={option.description}>
+                <div className="text-h6 text-ods-text-secondary line-clamp-2" title={option.description}>
                   {option.description}
                 </div>
               )}
@@ -258,11 +258,11 @@ export function PushButtonSelector({
                   </div>
                 )}
                 <div>
-                  <div className="font-['DM_Sans'] text-[14px] font-semibold text-ods-text-primary">
+                  <div className="text-h6 font-semibold text-ods-text-primary">
                     {section.label}
                   </div>
                   {section.description && (
-                    <div className="font-['DM_Sans'] text-[11px] text-ods-text-tertiary">
+                    <div className="text-h6 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-attention-green-success-secondary border border-ods-attention-green-success rounded-lg">
+        <div className="p-4 bg-ods-success-secondary border border-ods-success rounded-lg">
           <div className="flex items-center gap-2 mb-2">
-            <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">
+            <div className="w-2 h-2 bg-ods-success rounded-full"></div>
+            <span className="text-h6 text-ods-success">
               {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 font-['DM_Sans'] text-[12px] font-medium"
+                className="bg-ods-accent text-ods-text-primary text-h6"
               >
                 {option.displayName || option.name}
               </Badge>
@@ -322,15 +322,15 @@ export function PushButtonSelector({
 
       {/* Help Text */}
       {helpText && (
-        <div className="text-[12px] text-ods-text-secondary font-['DM_Sans']">
+        <div className="text-h6 text-ods-text-secondary">
           {helpText}
         </div>
       )}
 
       {/* Empty State Warning */}
       {validSelectedIds.length === 0 && title && !optional && (
-        <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">
+        <div className="p-3 bg-ods-error-secondary border border-ods-error rounded-lg">
+          <div className="text-h6 text-ods-error">
             ⚠️ Please select at least one option
           </div>
         </div>

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

@@ -132,13 +132,13 @@ export function ReleaseMediaManager({
             )}
           </div>
           <div>
-            <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-1">
+            <h3 className="text-h3 text-ods-text-primary mb-1">
               {uploadingIndex !== null ? 'Uploading...' : 'Upload Media'}
             </h3>
-            <p className="text-sm text-ods-text-secondary">
+            <p className="text-h6 text-ods-text-secondary">
               Drag and drop or click to select images and videos
             </p>
-            <p className="text-xs text-ods-text-secondary mt-1">
+            <p className="text-h6 text-ods-text-secondary mt-1">
               Maximum file size: 50MB
             </p>
           </div>
@@ -148,7 +148,7 @@ export function ReleaseMediaManager({
             onClick={() => fileInputRef.current?.click()}
             disabled={uploadingIndex !== null}
             leftIcon={<Plus className="h-4 w-4" />}
-            className="font-['DM_Sans'] text-[16px] font-bold"
+            className="text-h6 font-bold"
           >
             {uploadingIndex !== null ? 'Uploading...' : 'Select Files'}
           </Button>
@@ -168,8 +168,8 @@ export function ReleaseMediaManager({
       {media.length > 0 && (
         <div>
           <div className="flex items-center justify-between mb-4">
-            <Label className="text-[14px] text-ods-text-primary">Media Gallery ({media.length})</Label>
-            <p className="text-xs text-ods-text-secondary">Drag to reorder</p>
+            <Label className="text-h6 text-ods-text-primary">Media Gallery ({media.length})</Label>
+            <p className="text-h6 text-ods-text-secondary">Drag to reorder</p>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -180,11 +180,11 @@ export function ReleaseMediaManager({
                 onDragStart={handleDragStart(index)}
                 onDragOver={handleDragOver}
                 onDrop={handleDrop(index)}
-                className="relative group border border-ods-border rounded-lg overflow-hidden hover:border-ods-accent/30 transition-colors bg-ods-bg-secondary"
+                className="relative group border border-ods-border rounded-lg overflow-hidden hover:border-ods-accent/30 transition-colors bg-ods-bg-surface"
               >
                 {/* Drag Handle */}
                 <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity cursor-move z-10">
-                  <GripVertical className="h-4 w-4 text-white drop-shadow" />
+                  <GripVertical className="h-4 w-4 text-ods-text-on-dark drop-shadow" />
                 </div>
 
                 {/* Delete Button */}
@@ -195,9 +195,9 @@ export function ReleaseMediaManager({
                     size="small-legacy"
                     onClick={() => removeMedia(index)}
                     disabled={item._uploading}
-                    className="h-8 w-8 p-0 bg-red-500 hover:bg-red-600 border-red-500"
+                    className="h-8 w-8 p-0 bg-ods-error hover:bg-ods-error-hover border-ods-error"
                   >
-                    <Trash2 className="h-4 w-4 text-white" />
+                    <Trash2 className="h-4 w-4 text-ods-text-on-dark" />
                   </Button>
                 </div>
 
@@ -227,7 +227,7 @@ export function ReleaseMediaManager({
                   <div className="aspect-video bg-ods-bg flex items-center justify-center">
                     <div className="flex flex-col items-center gap-2">
                       <Loader2 className="h-8 w-8 animate-spin text-ods-accent" />
-                      <span className="text-sm text-ods-text-secondary">Uploading...</span>
+                      <span className="text-h6 text-ods-text-secondary">Uploading...</span>
                     </div>
                   </div>
                 )}
@@ -241,7 +241,7 @@ export function ReleaseMediaManager({
                       onValueChange={(value: any) => updateMedia(index, 'media_type', value)}
                       disabled={item._uploading}
                     >
-                      <SelectTrigger className="bg-ods-bg h-8 text-xs">
+                      <SelectTrigger className="bg-ods-bg h-8 text-h6">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent className="bg-ods-card">
@@ -258,7 +258,7 @@ export function ReleaseMediaManager({
                     value={item.title}
                     onChange={(e) => updateMedia(index, 'title', e.target.value)}
                     onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
-                    className="bg-ods-bg h-8 text-xs"
+                    className="bg-ods-bg h-8 text-h6"
                     disabled={item._uploading}
                   />
                 </div>
@@ -269,12 +269,12 @@ export function ReleaseMediaManager({
       )}
 
       {media.length === 0 && (
-        <div className="text-center py-8 px-4 bg-ods-bg-secondary border border-ods-border rounded-lg">
+        <div className="text-center py-8 px-4 bg-ods-bg-surface border border-ods-border rounded-lg">
           <ImageIcon className="h-12 w-12 text-ods-text-secondary mx-auto mb-4" />
-          <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-2">
+          <h3 className="text-h3 text-ods-text-primary mb-2">
             No media uploaded yet
           </h3>
-          <p className="text-sm text-ods-text-secondary">
+          <p className="text-h6 text-ods-text-secondary">
             Upload your first image or video to get started
           </p>
         </div>

package/src/components/features/section-selector.tsx

@@ -63,9 +63,9 @@ const SectionButton: React.FC<{
   minHeight = layout === 'vertical' ? '96px' : '76px',
   showDescription = true
 }) => {
-  const titleClasses = "font-['DM_Sans'] text-ods-text-primary"
-  const subtitleClasses = "font-['DM_Sans'] text-ods-text-secondary"
-  const numberClasses = "font-['DM_Sans'] font-bold text-ods-accent"
+  const titleClasses = "text-ods-text-primary"
+  const subtitleClasses = "text-ods-text-secondary"
+  const numberClasses = "text-ods-accent"
 
   const isDisabled = section.disabled || disabled;
 
@@ -100,13 +100,13 @@ const SectionButton: React.FC<{
             </div>
           )}
           {section.number && (
-            <span className={cn(numberClasses, 'text-lg tracking-[-0.36px] leading-[24px] shrink-0')}>
+            <span className={cn(numberClasses, 'text-h3 shrink-0')}>
               {section.number}
             </span>
           )}
           <div className="flex-1 text-left min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <p className={cn(titleClasses, 'font-medium text-lg leading-[24px] whitespace-normal break-words')}>
+              <p className={cn(titleClasses, 'text-h4 whitespace-normal break-words')}>
                 {section.title}
               </p>
               {section.badge && (
@@ -118,7 +118,7 @@ const SectionButton: React.FC<{
               )}
             </div>
             {section.description && showDescription && (
-              <p className={cn(subtitleClasses, 'text-sm mt-1 whitespace-normal break-words')}>
+              <p className={cn(subtitleClasses, 'text-h6 mt-1 whitespace-normal break-words')}>
                 {section.description}
               </p>
             )}
@@ -134,7 +134,7 @@ const SectionButton: React.FC<{
           )}
           <div className="flex flex-col items-start justify-start flex-1 gap-1">
             <div className="flex items-start gap-2 flex-wrap w-full">
-              <span className={cn(titleClasses, 'font-bold text-[18px] leading-[24px] tracking-[-0.36px]')} style={{ textAlign: 'left' }}>
+              <span className={cn(titleClasses, 'text-h3')} style={{ textAlign: 'left' }}>
                 {section.title}
               </span>
               {section.badge && (
@@ -146,7 +146,7 @@ const SectionButton: React.FC<{
               )}
             </div>
             {section.subtitle && (
-              <div className={cn(subtitleClasses, 'font-medium text-[14px] leading-[20px] w-full')} style={{ textAlign: 'left' }}>
+              <div className={cn(subtitleClasses, 'text-h6 w-full')} style={{ textAlign: 'left' }}>
                 {section.subtitle}
               </div>
             )}

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

@@ -33,11 +33,11 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         onClick={onClick}
         className={cn(
           "group flex items-center md:gap-2 gap-1 h-11 md:h-16 px-3 md:px-4 py-3 rounded-[6px] border transition-colors duration-200",
-          "font-['DM_Sans'] text-left w-full",
+          "font-body text-left w-full",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
           "disabled:pointer-events-none disabled:opacity-50",
           selected
-            ? "bg-[var(--ods-open-yellow-light)] border-ods-accent hover:bg-[var(--ods-open-yellow-light-hover)] active:bg-[var(--ods-open-yellow-light-action)]"
+            ? "bg-ods-open-yellow-light border-ods-accent hover:bg-ods-open-yellow-light-hover active:bg-ods-open-yellow-light-action"
             : "bg-ods-card border-ods-border hover:bg-ods-bg-hover hover:border-ods-accent active:bg-ods-bg-active active:border-ods-accent",
           className,
         )}
@@ -59,13 +59,13 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         )}
 
         <span className="flex flex-1 flex-col justify-center min-w-0 overflow-hidden">
-          <span className="md:text-[18px] text-[14px] font-medium text-ods-text-primary truncate" title={title}>
+          <span className="text-h4 text-ods-text-primary truncate" title={title}>
             {title}
           </span>
           {description && (
             <span
               className={cn(
-                "text-[14px] font-medium leading-5 truncate hidden md:flex",
+                "text-h6 truncate hidden md:flex",
                 selected ? "text-ods-accent" : "text-ods-text-secondary",
               )} title={description}>
               {description}

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

@@ -116,7 +116,7 @@ export function SEOEditorPreview({
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-2">
           <div className="flex items-center gap-2">
-            <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+            <Label className="text-h6 text-ods-text-primary">
               SEO Title
             </Label>
             {aiConfidenceSeoTitle !== undefined && (
@@ -141,14 +141,14 @@ export function SEOEditorPreview({
             className="bg-ods-bg border-ods-border text-ods-text-primary"
           />
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[11px] text-ods-error font-['DM_Sans']">
+            <span className="text-h6 text-ods-error">
               {seoTitleTooLong
                 ? `Too long: search engines may truncate this title (keep it under ${SEO_TITLE_MAX_LENGTH})`
                 : ''}
             </span>
             <span
               className={cn(
-                "text-[11px] font-['DM_Sans'] tabular-nums shrink-0",
+                "text-h6 tabular-nums shrink-0",
                 seoTitleTooLong ? 'text-ods-error font-semibold' : 'text-ods-text-secondary'
               )}
             >
@@ -156,7 +156,7 @@ export function SEOEditorPreview({
             </span>
           </div>
           {!seoTitle && title && (
-            <p className="text-[11px] text-ods-accent font-['DM_Sans']">
+            <p className="text-h6 text-ods-accent">
               Auto-populated from title
             </p>
           )}
@@ -164,7 +164,7 @@ export function SEOEditorPreview({
 
         <div className="space-y-2">
           <div className="flex items-center gap-2">
-            <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+            <Label className="text-h6 text-ods-text-primary">
               SEO Keywords
             </Label>
             {aiConfidenceSeoKeywords !== undefined && (
@@ -193,7 +193,7 @@ export function SEOEditorPreview({
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-2 flex flex-col h-full">
           <div className="flex items-center gap-2">
-            <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+            <Label className="text-h6 text-ods-text-primary">
               SEO Description
             </Label>
             {aiConfidenceSeoDescription !== undefined && (
@@ -219,14 +219,14 @@ export function SEOEditorPreview({
             rows={6}
           />
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[11px] text-ods-error font-['DM_Sans']">
+            <span className="text-h6 text-ods-error">
               {seoDescriptionTooLong
                 ? `Too long: search engines may truncate this description (keep it under ${SEO_DESCRIPTION_MAX_LENGTH})`
                 : ''}
             </span>
             <span
               className={cn(
-                "text-[11px] font-['DM_Sans'] tabular-nums shrink-0",
+                "text-h6 tabular-nums shrink-0",
                 seoDescriptionTooLong ? 'text-ods-error font-semibold' : 'text-ods-text-secondary'
               )}
             >
@@ -234,14 +234,14 @@ export function SEOEditorPreview({
             </span>
           </div>
           {!seoDescription && summary && (
-            <p className="text-[11px] text-ods-accent font-['DM_Sans']">
+            <p className="text-h6 text-ods-accent">
               Auto-populated from summary
             </p>
           )}
         </div>
 
         <div className="space-y-2 flex flex-col h-full">
-          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
+          <Label className="text-h6 text-ods-text-primary">
             OG Image
           </Label>
 
@@ -291,7 +291,7 @@ export function SEOEditorPreview({
                 ) : (
                   <>
                     <Upload className="h-8 w-8 text-ods-text-secondary mb-2" />
-                    <span className="text-sm text-ods-text-secondary font-['DM_Sans']">
+                    <span className="text-h6 text-ods-text-secondary">
                       {onOgImageUpload ? 'Click to upload OG image' : 'No image'}
                     </span>
                   </>
@@ -312,7 +312,7 @@ export function SEOEditorPreview({
           </div>
 
           {!ogImageUrl && featuredImage && (
-            <p className="text-[11px] text-ods-accent font-['DM_Sans']">
+            <p className="text-h6 text-ods-accent">
               Using featured image
             </p>
           )}
@@ -323,7 +323,7 @@ export function SEOEditorPreview({
       <div className="pt-4 border-t border-ods-border">
         <div className="flex items-center gap-2 mb-3">
           <Globe className="w-4 h-4 text-ods-text-secondary" />
-          <span className="font-['DM_Sans'] text-[12px] font-medium text-ods-text-secondary">
+          <span className="text-h6 text-ods-text-secondary">
             Social Media Preview
           </span>
         </div>
@@ -344,7 +344,7 @@ export function SEOEditorPreview({
               <div className="absolute inset-0 flex items-center justify-center">
                 <div className="text-center">
                   <Globe className="w-12 h-12 text-ods-text-secondary mx-auto mb-2" />
-                  <p className="text-ods-text-secondary text-sm font-['DM_Sans']">No preview image</p>
+                  <p className="text-ods-text-secondary text-h6">No preview image</p>
                 </div>
               </div>
             )}
@@ -355,18 +355,18 @@ export function SEOEditorPreview({
             {/* Domain */}
             <div className="flex items-center gap-1">
               <ExternalLink className="w-3 h-3 text-ods-text-secondary" />
-              <span className="font-['DM_Sans'] text-[11px] text-ods-text-secondary uppercase tracking-wide">
+              <span className="text-h6 text-ods-text-secondary uppercase">
                 {domain}
               </span>
             </div>
 
             {/* Title */}
-            <h3 className="font-['DM_Sans'] text-[16px] font-semibold text-ods-text-primary leading-[1.3] line-clamp-2">
+            <h3 className="text-h6 font-semibold text-ods-text-primary line-clamp-2">
               {displayTitle}
             </h3>
 
             {/* Description */}
-            <p className="font-['DM_Sans'] text-[14px] text-ods-text-secondary leading-[1.4] line-clamp-3">
+            <p className="text-h6 text-ods-text-secondary line-clamp-3">
               {displayDescription}
             </p>
           </div>
@@ -375,17 +375,17 @@ export function SEOEditorPreview({
         {/* Fallback Indicators */}
         <div className="space-y-1 mt-3">
           {!seoTitle.trim() && title && (
-            <p className="font-['DM_Sans'] text-[11px] text-ods-accent">
+            <p className="text-h6 text-ods-accent">
               • Using title as SEO title
             </p>
           )}
           {!seoDescription.trim() && summary && (
-            <p className="font-['DM_Sans'] text-[11px] text-ods-accent">
+            <p className="text-h6 text-ods-accent">
               • Using summary as SEO description
             </p>
           )}
           {!ogImageUrl.trim() && featuredImage.trim() && (
-            <p className="font-['DM_Sans'] text-[11px] text-ods-accent">
+            <p className="text-h6 text-ods-accent">
               • Using featured image as OG image
             </p>
           )}

package/src/components/features/social-links-manager.tsx

@@ -103,7 +103,7 @@ export function SocialLinksManager({
         const Icon = getIcon(link, platform);
 
         return (
-          <div key={index} className="flex items-center gap-3 p-3 bg-ods-bg-secondary rounded-lg border border-ods-border">
+          <div key={index} className="flex items-center gap-3 p-3 bg-ods-bg-surface rounded-lg border border-ods-border">
             <div className="w-8 h-8 flex items-center justify-center">
               {Icon}
             </div>
@@ -156,7 +156,7 @@ export function SocialLinksManager({
               variant="transparent"
               size="icon"
               onClick={() => removeLink(index)}
-              className="text-red-400 hover:text-red-300 hover:bg-red-400/10"
+              className="text-ods-error hover:text-ods-error-hover hover:bg-ods-error-secondary"
             >
               <Trash2 className="h-4 w-4" />
             </Button>
@@ -166,7 +166,7 @@ export function SocialLinksManager({
 
       {links.length === 0 && (
         <div className="text-center py-8 text-ods-text-secondary">
-          <p className="text-sm">No social links added yet.</p>
+          <p className="text-h6">No social links added yet.</p>
         </div>
       )}
 

package/src/components/features/start-with-openframe-button.tsx

@@ -42,18 +42,18 @@ export const StartWithOpenFrameButton = React.forwardRef<
   
   if (isYellow) {
     buttonVariant = "accent";
-    modeClassName = 'bg-[var(--ods-open-yellow-base)] hover:bg-[var(--ods-open-yellow-hover)] text-ods-text-on-accent border-[var(--ods-open-yellow-base)]';
+    modeClassName = 'bg-ods-accent hover:bg-ods-accent-hover text-ods-text-on-accent border-ods-accent';
     iconLowerPath = "var(--ods-system-greys-white)";
     iconUpperPath = "var(--ods-system-greys-black)";
   } else if (isPink) {
     buttonVariant = "accent";
-    modeClassName = 'bg-[var(--ods-flamingo-pink-base)] hover:bg-[var(--ods-flamingo-pink-hover)] text-[var(--ods-system-greys-black)] border-[var(--ods-flamingo-pink-base)]';
+    modeClassName = 'bg-ods-flamingo-pink hover:bg-ods-flamingo-pink-hover text-ods-text-on-accent border-ods-flamingo-pink';
     iconLowerPath = "var(--ods-system-greys-white)";
     iconUpperPath = "var(--ods-system-greys-black)";
   } else if (isCyan) {
     // Cyan mode: similar to JoinWaitlistButton with custom colors
     buttonVariant = "accent";
-    modeClassName = 'bg-[var(--ods-flamingo-cyan-base)] hover:bg-[var(--ods-flamingo-cyan-hover)] text-[var(--ods-system-greys-black)] border-[var(--ods-flamingo-cyan-base)]';
+    modeClassName = 'bg-ods-flamingo-cyan hover:bg-ods-flamingo-cyan-hover text-ods-text-on-accent border-ods-flamingo-cyan';
     // Allow override with custom colors if provided
     if (buttonBackgroundColor || buttonTextColor) {
       customStyle = { 

package/src/components/features/status-filter-component.tsx

@@ -78,7 +78,7 @@ export function StatusFilterComponent({
 
       {/* Optional count display */}
       {showCount && (
-        <div className="ml-auto text-[12px] font-['DM_Sans'] text-ods-text-secondary shrink-0">
+        <div className="ml-auto text-h6 text-ods-text-secondary shrink-0">
           {count} items
         </div>
       )}

package/src/components/features/tags-selector.tsx

@@ -117,7 +117,7 @@ export function TagsSelector({
           {getSelectedTags().map((tag) => (
             <span
               key={tag.id}
-              className="inline-flex items-center gap-1 pl-2.5 pr-1 py-1 rounded-md bg-ods-accent/15 border border-ods-accent/30 text-ods-text-primary text-[13px] leading-none font-medium font-['DM_Sans']"
+              className="inline-flex items-center gap-1 pl-2.5 pr-1 py-1 rounded-md bg-ods-accent/15 border border-ods-accent/30 text-ods-text-primary text-h6"
             >
               {tag.name}
               {!disabled && (
@@ -195,7 +195,7 @@ export function TagsSelector({
                   onClick={handleCreateTag}
                   disabled={isCreating}
                   leftIcon={isCreating ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
-                  className="w-full flex flex-row items-center gap-1.5 px-2 py-1 mb-2 h-auto rounded border-dashed border-ods-accent bg-ods-bg hover:bg-ods-card text-ods-accent font-['DM_Sans'] !text-xs !font-medium"
+                  className="w-full flex flex-row items-center gap-1.5 px-2 py-1 mb-2 h-auto rounded border-dashed border-ods-accent bg-ods-bg hover:bg-ods-card text-ods-accent !text-h6"
                 >
                   Create tag: <strong>"{searchQuery.trim()}"</strong>
                 </Button>
@@ -210,7 +210,7 @@ export function TagsSelector({
                       variant="outline"
                       type="button"
                       onClick={() => handleTagAdd(tag.id)}
-                      className="h-auto px-2 py-0.5 rounded border-ods-border hover:border-ods-accent bg-ods-bg hover:bg-ods-card text-ods-text-primary font-['DM_Sans'] !text-xs !font-medium"
+                      className="h-auto px-2 py-0.5 rounded border-ods-border hover:border-ods-accent bg-ods-bg hover:bg-ods-card text-ods-text-primary !text-h6"
                     >
                       {tag.name}
                     </Button>
@@ -218,7 +218,7 @@ export function TagsSelector({
                 </div>
               ) : !canCreateNewTag ? (
                 <div className="py-4 px-4 text-center w-full">
-                  <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
+                  <p className="text-ods-text-secondary text-h6">
                     {searchQuery.trim() ? `No tags found for "${searchQuery}"` : "No tags available"}
                   </p>
                 </div>
@@ -230,11 +230,11 @@ export function TagsSelector({
 
       {/* Tag Counter */}
       <div className="flex items-center justify-between">
-        <div className="text-[11px] text-ods-text-secondary font-['DM_Sans']">
+        <div className="text-h6 text-ods-text-secondary">
           {selectedTagIds.length} / {maxTags} tags selected
         </div>
         {selectedTagIds.length >= maxTags && (
-          <span className="text-[11px] text-[--ods-attention-red-error] font-['DM_Sans']">
+          <span className="text-h6 text-ods-error">
             (Maximum reached)
           </span>
         )}