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

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

@@ -132,13 +132,13 @@ export function ReleaseMediaManager({
             )}
           </div>
           <div>
-            <h3 className="text-h3 text-ods-text-primary mb-1">
+            <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-1">
               {uploadingIndex !== null ? 'Uploading...' : 'Upload Media'}
             </h3>
-            <p className="text-h6 text-ods-text-secondary">
+            <p className="text-sm text-ods-text-secondary">
               Drag and drop or click to select images and videos
             </p>
-            <p className="text-h6 text-ods-text-secondary mt-1">
+            <p className="text-xs text-ods-text-secondary mt-1">
               Maximum file size: 50MB
             </p>
           </div>
@@ -148,7 +148,7 @@ export function ReleaseMediaManager({
             onClick={() => fileInputRef.current?.click()}
             disabled={uploadingIndex !== null}
             leftIcon={<Plus className="h-4 w-4" />}
-            className="text-h6 font-bold"
+            className="font-['DM_Sans'] text-[16px] 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-h6 text-ods-text-primary">Media Gallery ({media.length})</Label>
-            <p className="text-h6 text-ods-text-secondary">Drag to reorder</p>
+            <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>
           </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-surface"
+                className="relative group border border-ods-border rounded-lg overflow-hidden hover:border-ods-accent/30 transition-colors bg-ods-bg-secondary"
               >
                 {/* Drag Handle */}
                 <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity cursor-move z-10">
-                  <GripVertical className="h-4 w-4 text-ods-text-on-dark drop-shadow" />
+                  <GripVertical className="h-4 w-4 text-white drop-shadow" />
                 </div>
 
                 {/* Delete Button */}
@@ -195,9 +195,9 @@ export function ReleaseMediaManager({
                     size="small-legacy"
                     onClick={() => removeMedia(index)}
                     disabled={item._uploading}
-                    className="h-8 w-8 p-0 bg-ods-error hover:bg-ods-error-hover border-ods-error"
+                    className="h-8 w-8 p-0 bg-red-500 hover:bg-red-600 border-red-500"
                   >
-                    <Trash2 className="h-4 w-4 text-ods-text-on-dark" />
+                    <Trash2 className="h-4 w-4 text-white" />
                   </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-h6 text-ods-text-secondary">Uploading...</span>
+                      <span className="text-sm 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-h6">
+                      <SelectTrigger className="bg-ods-bg h-8 text-xs">
                         <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-h6"
+                    className="bg-ods-bg h-8 text-xs"
                     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-surface border border-ods-border rounded-lg">
+        <div className="text-center py-8 px-4 bg-ods-bg-secondary border border-ods-border rounded-lg">
           <ImageIcon className="h-12 w-12 text-ods-text-secondary mx-auto mb-4" />
-          <h3 className="text-h3 text-ods-text-primary mb-2">
+          <h3 className="font-['DM_Sans'] font-semibold text-ods-text-primary mb-2">
             No media uploaded yet
           </h3>
-          <p className="text-h6 text-ods-text-secondary">
+          <p className="text-sm text-ods-text-secondary">
             Upload your first image or video to get started
           </p>
         </div>

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

@@ -63,9 +63,9 @@ const SectionButton: React.FC<{
   minHeight = layout === 'vertical' ? '96px' : '76px',
   showDescription = true
 }) => {
-  const titleClasses = "text-ods-text-primary"
-  const subtitleClasses = "text-ods-text-secondary"
-  const numberClasses = "text-ods-accent"
+  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 isDisabled = section.disabled || disabled;
 
@@ -100,13 +100,13 @@ const SectionButton: React.FC<{
             </div>
           )}
           {section.number && (
-            <span className={cn(numberClasses, 'text-h3 shrink-0')}>
+            <span className={cn(numberClasses, 'text-lg tracking-[-0.36px] leading-[24px] 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, 'text-h4 whitespace-normal break-words')}>
+              <p className={cn(titleClasses, 'font-medium text-lg leading-[24px] 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-h6 mt-1 whitespace-normal break-words')}>
+              <p className={cn(subtitleClasses, 'text-sm 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, 'text-h3')} style={{ textAlign: 'left' }}>
+              <span className={cn(titleClasses, 'font-bold text-[18px] leading-[24px] tracking-[-0.36px]')} style={{ textAlign: 'left' }}>
                 {section.title}
               </span>
               {section.badge && (
@@ -146,7 +146,7 @@ const SectionButton: React.FC<{
               )}
             </div>
             {section.subtitle && (
-              <div className={cn(subtitleClasses, 'text-h6 w-full')} style={{ textAlign: 'left' }}>
+              <div className={cn(subtitleClasses, 'font-medium text-[14px] leading-[20px] 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-body text-left w-full",
+          "font-['DM_Sans'] 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-ods-open-yellow-light border-ods-accent hover:bg-ods-open-yellow-light-hover active:bg-ods-open-yellow-light-action"
+            ? "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-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="text-h4 text-ods-text-primary truncate" title={title}>
+          <span className="md:text-[18px] text-[14px] font-medium text-ods-text-primary truncate" title={title}>
             {title}
           </span>
           {description && (
             <span
               className={cn(
-                "text-h6 truncate hidden md:flex",
+                "text-[14px] font-medium leading-5 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="text-h6 text-ods-text-primary">
+            <Label className="font-['DM_Sans'] text-[14px] font-medium 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-h6 text-ods-error">
+            <span className="text-[11px] text-ods-error font-['DM_Sans']">
               {seoTitleTooLong
                 ? `Too long: search engines may truncate this title (keep it under ${SEO_TITLE_MAX_LENGTH})`
                 : ''}
             </span>
             <span
               className={cn(
-                "text-h6 tabular-nums shrink-0",
+                "text-[11px] font-['DM_Sans'] 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-h6 text-ods-accent">
+            <p className="text-[11px] text-ods-accent font-['DM_Sans']">
               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="text-h6 text-ods-text-primary">
+            <Label className="font-['DM_Sans'] text-[14px] font-medium 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="text-h6 text-ods-text-primary">
+            <Label className="font-['DM_Sans'] text-[14px] font-medium 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-h6 text-ods-error">
+            <span className="text-[11px] text-ods-error font-['DM_Sans']">
               {seoDescriptionTooLong
                 ? `Too long: search engines may truncate this description (keep it under ${SEO_DESCRIPTION_MAX_LENGTH})`
                 : ''}
             </span>
             <span
               className={cn(
-                "text-h6 tabular-nums shrink-0",
+                "text-[11px] font-['DM_Sans'] 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-h6 text-ods-accent">
+            <p className="text-[11px] text-ods-accent font-['DM_Sans']">
               Auto-populated from summary
             </p>
           )}
         </div>
 
         <div className="space-y-2 flex flex-col h-full">
-          <Label className="text-h6 text-ods-text-primary">
+          <Label className="font-['DM_Sans'] text-[14px] font-medium text-ods-text-primary">
             OG Image
           </Label>
 
@@ -291,7 +291,7 @@ export function SEOEditorPreview({
                 ) : (
                   <>
                     <Upload className="h-8 w-8 text-ods-text-secondary mb-2" />
-                    <span className="text-h6 text-ods-text-secondary">
+                    <span className="text-sm text-ods-text-secondary font-['DM_Sans']">
                       {onOgImageUpload ? 'Click to upload OG image' : 'No image'}
                     </span>
                   </>
@@ -312,7 +312,7 @@ export function SEOEditorPreview({
           </div>
 
           {!ogImageUrl && featuredImage && (
-            <p className="text-h6 text-ods-accent">
+            <p className="text-[11px] text-ods-accent font-['DM_Sans']">
               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="text-h6 text-ods-text-secondary">
+          <span className="font-['DM_Sans'] text-[12px] font-medium 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-h6">No preview image</p>
+                  <p className="text-ods-text-secondary text-sm font-['DM_Sans']">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="text-h6 text-ods-text-secondary uppercase">
+              <span className="font-['DM_Sans'] text-[11px] text-ods-text-secondary uppercase tracking-wide">
                 {domain}
               </span>
             </div>
 
             {/* Title */}
-            <h3 className="text-h6 font-semibold text-ods-text-primary line-clamp-2">
+            <h3 className="font-['DM_Sans'] text-[16px] font-semibold text-ods-text-primary leading-[1.3] line-clamp-2">
               {displayTitle}
             </h3>
 
             {/* Description */}
-            <p className="text-h6 text-ods-text-secondary line-clamp-3">
+            <p className="font-['DM_Sans'] text-[14px] text-ods-text-secondary leading-[1.4] 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="text-h6 text-ods-accent">
+            <p className="font-['DM_Sans'] text-[11px] text-ods-accent">
               • Using title as SEO title
             </p>
           )}
           {!seoDescription.trim() && summary && (
-            <p className="text-h6 text-ods-accent">
+            <p className="font-['DM_Sans'] text-[11px] text-ods-accent">
               • Using summary as SEO description
             </p>
           )}
           {!ogImageUrl.trim() && featuredImage.trim() && (
-            <p className="text-h6 text-ods-accent">
+            <p className="font-['DM_Sans'] text-[11px] 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-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">
             <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-ods-error hover:text-ods-error-hover hover:bg-ods-error-secondary"
+              className="text-red-400 hover:text-red-300 hover:bg-red-400/10"
             >
               <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-h6">No social links added yet.</p>
+          <p className="text-sm">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-ods-accent hover:bg-ods-accent-hover text-ods-text-on-accent border-ods-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)]';
     iconLowerPath = "var(--ods-system-greys-white)";
     iconUpperPath = "var(--ods-system-greys-black)";
   } else if (isPink) {
     buttonVariant = "accent";
-    modeClassName = 'bg-ods-flamingo-pink hover:bg-ods-flamingo-pink-hover text-ods-text-on-accent border-ods-flamingo-pink';
+    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)]';
     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-ods-flamingo-cyan hover:bg-ods-flamingo-cyan-hover text-ods-text-on-accent border-ods-flamingo-cyan';
+    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)]';
     // 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-h6 text-ods-text-secondary shrink-0">
+        <div className="ml-auto text-[12px] font-['DM_Sans'] 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-h6"
+              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']"
             >
               {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 !text-h6"
+                  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"
                 >
                   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 !text-h6"
+                      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"
                     >
                       {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-h6">
+                  <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
                     {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-h6 text-ods-text-secondary">
+        <div className="text-[11px] text-ods-text-secondary font-['DM_Sans']">
           {selectedTagIds.length} / {maxTags} tags selected
         </div>
         {selectedTagIds.length >= maxTags && (
-          <span className="text-h6 text-ods-error">
+          <span className="text-[11px] text-[--ods-attention-red-error] font-['DM_Sans']">
             (Maximum reached)
           </span>
         )}

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

@@ -108,10 +108,10 @@ export function TranscriptSummaryEditor({
               />
             )}
           </div>
-          <p className="text-h6 text-ods-text-secondary mt-1">{videoSummaryHelperText}</p>
+          <p className="text-xs text-ods-text-secondary mt-1">{videoSummaryHelperText}</p>
         </div>
         <div
-          className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
+          className="rounded-lg border border-ods-border bg-ods-background-secondary overflow-hidden"
           style={{ minHeight: `${videoSummaryMinHeight}px` }}
         >
           <Textarea
@@ -120,7 +120,7 @@ export function TranscriptSummaryEditor({
             onChange={(e) => onVideoSummaryChange(e.target.value)}
             placeholder={videoSummaryPlaceholder}
             disabled={disabled}
-            className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 text-code"
+            className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 font-mono text-sm"
             style={{ minHeight: `${videoSummaryMinHeight}px`, lineHeight: '1.6' }}
           />
         </div>
@@ -143,10 +143,10 @@ export function TranscriptSummaryEditor({
               />
             )}
           </div>
-          <p className="text-h6 text-ods-text-secondary mt-1">{transcriptHelperText}</p>
+          <p className="text-xs text-ods-text-secondary mt-1">{transcriptHelperText}</p>
         </div>
         <div
-          className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
+          className="rounded-lg border border-ods-border bg-ods-background-secondary overflow-hidden"
           style={{ minHeight: `${transcriptMinHeight}px` }}
         >
           <Textarea
@@ -155,7 +155,7 @@ export function TranscriptSummaryEditor({
             onChange={(e) => onTranscriptChange(e.target.value)}
             placeholder={transcriptPlaceholder}
             disabled={disabled}
-            className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 text-code"
+            className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 font-mono text-sm"
             style={{ minHeight: `${transcriptMinHeight}px`, lineHeight: '1.6' }}
           />
         </div>
@@ -174,10 +174,10 @@ export function TranscriptSummaryEditor({
                 </Badge>
               )}
             </div>
-            <p className="text-h6 text-ods-text-secondary mt-1">{subtitlesHelperText}</p>
+            <p className="text-xs text-ods-text-secondary mt-1">{subtitlesHelperText}</p>
           </div>
           <div
-            className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
+            className="rounded-lg border border-ods-border bg-ods-background-secondary overflow-hidden"
             style={{ minHeight: `${subtitlesMinHeight}px` }}
           >
             <Textarea
@@ -186,7 +186,7 @@ export function TranscriptSummaryEditor({
               onChange={(e) => onSubtitlesChange?.(e.target.value)}
               placeholder={subtitlesPlaceholder}
               disabled={disabled || !onSubtitlesChange}
-              className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 text-code"
+              className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 font-mono text-sm"
               style={{ minHeight: `${subtitlesMinHeight}px`, lineHeight: '1.6' }}
             />
           </div>

package/src/components/features/video-bites-strip.tsx

@@ -286,7 +286,7 @@ export function VideoBiteCard({
   // chevron affordance. The WHOLE footer is the navigation target — it links
   // to the entity the bite originated from. In the editor the title row is
   // the inline title editor (edited directly on the card).
-  const titleClass = "text-h6 text-ods-text-primary";
+  const titleClass = "font-['DM_Sans'] text-sm font-medium leading-5 text-ods-text-primary";
   const overlayContent = (
     <>
       {titleEditable ? (

package/src/components/features/video-ratio-tabs.tsx

@@ -42,7 +42,7 @@ export type RatioCategory = 'portrait' | 'square' | 'landscape';
 
 // Shared tab trigger class — matches `<EntityVideoSection>`'s pattern.
 const TAB_TRIGGER_CLASS =
-  'rounded-none border-b-2 border-transparent data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2 text-h6 text-ods-text-secondary data-[state=active]:text-ods-text-primary';
+  'rounded-none border-b-2 border-transparent data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2 text-sm text-ods-text-secondary data-[state=active]:text-ods-text-primary';
 
 /** Grid class for each aspect ratio (admin editors — narrower columns). */
 export const RATIO_GRID_CLASS: Record<RatioCategory, string> = {

package/src/components/features/video-source-selector.tsx

@@ -148,7 +148,7 @@ export function VideoSourceSelector({
     <div className={`space-y-4 p-6 bg-ods-card border border-ods-border rounded-lg ${className}`}>
       {/* Section Title */}
       {showTitle && (
-        <h3 className="text-h5 text-ods-text-primary flex items-center gap-2">
+        <h3 className="font-['Azeret_Mono'] text-[18px] font-semibold uppercase text-ods-text-primary flex items-center gap-2">
           <Video className="h-5 w-5" />
           {title}
         </h3>
@@ -188,7 +188,7 @@ export function VideoSourceSelector({
             disabled={disabled}
           />
           {youtubeHelperText && (
-            <p className="text-h6 text-ods-text-secondary">
+            <p className="text-xs text-ods-text-secondary">
               {youtubeHelperText}
             </p>
           )}
@@ -236,15 +236,15 @@ export function VideoSourceSelector({
                     style={{ width: `${uploadProgress}%` }}
                   />
                 </div>
-                <span className="text-h6 text-ods-text-secondary">{uploadProgress}%</span>
+                <span className="text-xs text-ods-text-secondary">{uploadProgress}%</span>
               </div>
-              <p className="text-h6 text-ods-text-secondary">{uploadMessage}</p>
+              <p className="text-xs text-ods-text-secondary">{uploadMessage}</p>
             </div>
           )}
 
           {/* Upload Error */}
           {uploadError && (
-            <p className="text-h6 text-ods-error mb-3">{uploadError}</p>
+            <p className="text-sm text-ods-attention-red-error mb-3">{uploadError}</p>
           )}
 
           {/* Video Preview */}
@@ -265,7 +265,7 @@ export function VideoSourceSelector({
               />
             )
           ) : (
-            <p className="text-h6 text-ods-text-secondary italic">
+            <p className="text-sm text-ods-text-secondary italic">
               {uploadEmptyText}
             </p>
           )}
@@ -332,7 +332,7 @@ function DefaultVideoPreview({ videoUrl, resolveVideoUrl, onDelete, disabled }:
         className="absolute top-2 right-2 p-1.5 bg-black/60 hover:bg-black/80 rounded-full transition-colors"
         disabled={disabled}
       >
-        <X className="h-4 w-4 text-ods-text-on-dark" />
+        <X className="h-4 w-4 text-white" />
       </button>
     </div>
   );

package/src/components/features/video.tsx

@@ -931,7 +931,7 @@ function YouTubeFacadeInner({
             className="absolute inset-0 w-full h-full object-cover"
           />
         </picture>
-        <div className="absolute inset-0 flex items-center justify-center bg-ods-bg bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30">
+        <div className="absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30">
           {/* THE shared center play badge (video-center-badge.tsx) — same disc
               as strip cards / carousel thumbs / unmute chip; hero size + the
               facade's hover-scale affordance. */}