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

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

@@ -108,10 +108,10 @@ export function TranscriptSummaryEditor({
               />
             )}
           </div>
-          <p className="text-xs text-ods-text-secondary mt-1">{videoSummaryHelperText}</p>
+          <p className="text-h6 text-ods-text-secondary mt-1">{videoSummaryHelperText}</p>
         </div>
         <div
-          className="rounded-lg border border-ods-border bg-ods-background-secondary overflow-hidden"
+          className="rounded-lg border border-ods-border bg-ods-card 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 font-mono text-sm"
+            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"
             style={{ minHeight: `${videoSummaryMinHeight}px`, lineHeight: '1.6' }}
           />
         </div>
@@ -143,10 +143,10 @@ export function TranscriptSummaryEditor({
               />
             )}
           </div>
-          <p className="text-xs text-ods-text-secondary mt-1">{transcriptHelperText}</p>
+          <p className="text-h6 text-ods-text-secondary mt-1">{transcriptHelperText}</p>
         </div>
         <div
-          className="rounded-lg border border-ods-border bg-ods-background-secondary overflow-hidden"
+          className="rounded-lg border border-ods-border bg-ods-card 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 font-mono text-sm"
+            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"
             style={{ minHeight: `${transcriptMinHeight}px`, lineHeight: '1.6' }}
           />
         </div>
@@ -174,10 +174,10 @@ export function TranscriptSummaryEditor({
                 </Badge>
               )}
             </div>
-            <p className="text-xs text-ods-text-secondary mt-1">{subtitlesHelperText}</p>
+            <p className="text-h6 text-ods-text-secondary mt-1">{subtitlesHelperText}</p>
           </div>
           <div
-            className="rounded-lg border border-ods-border bg-ods-background-secondary overflow-hidden"
+            className="rounded-lg border border-ods-border bg-ods-card 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 font-mono text-sm"
+              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"
               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 = "font-['DM_Sans'] text-sm font-medium leading-5 text-ods-text-primary";
+  const titleClass = "text-h6 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-sm 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-h6 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="font-['Azeret_Mono'] text-[18px] font-semibold uppercase text-ods-text-primary flex items-center gap-2">
+        <h3 className="text-h5 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-xs text-ods-text-secondary">
+            <p className="text-h6 text-ods-text-secondary">
               {youtubeHelperText}
             </p>
           )}
@@ -236,15 +236,15 @@ export function VideoSourceSelector({
                     style={{ width: `${uploadProgress}%` }}
                   />
                 </div>
-                <span className="text-xs text-ods-text-secondary">{uploadProgress}%</span>
+                <span className="text-h6 text-ods-text-secondary">{uploadProgress}%</span>
               </div>
-              <p className="text-xs text-ods-text-secondary">{uploadMessage}</p>
+              <p className="text-h6 text-ods-text-secondary">{uploadMessage}</p>
             </div>
           )}
 
           {/* Upload Error */}
           {uploadError && (
-            <p className="text-sm text-ods-attention-red-error mb-3">{uploadError}</p>
+            <p className="text-h6 text-ods-error mb-3">{uploadError}</p>
           )}
 
           {/* Video Preview */}
@@ -265,7 +265,7 @@ export function VideoSourceSelector({
               />
             )
           ) : (
-            <p className="text-sm text-ods-text-secondary italic">
+            <p className="text-h6 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-white" />
+        <X className="h-4 w-4 text-ods-text-on-dark" />
       </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-inverse 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 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. */}

package/src/components/features/waitlist-form.tsx

@@ -222,7 +222,7 @@ export function WaitlistForm({
           onKeyDown={handleKeyDown}
         />
         {showPhoneWarning && (
-          <p className="text-h6 absolute bottom-0 left-0 translate-y-full text-[var(--ods-attention-yellow-warning)] truncate" title={invalidPhoneHint}>
+          <p className="text-h6 absolute bottom-0 left-0 translate-y-full text-ods-warning truncate" title={invalidPhoneHint}>
             {invalidPhoneHint}
           </p>
         )}
@@ -245,7 +245,7 @@ export function WaitlistForm({
               {consentText}{' View our '}
               <a
                 href={termsOfServiceUrl || '#'}
-                className="text-[var(--color-accent-primary)] underline"
+                className="text-ods-accent underline"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => e.stopPropagation()}
@@ -255,7 +255,7 @@ export function WaitlistForm({
               {' and '}
               <a
                 href={privacyPolicyUrl || '#'}
-                className="text-[var(--color-accent-primary)] underline"
+                className="text-ods-accent underline"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => e.stopPropagation()}

package/src/components/filter-chip.tsx

@@ -30,7 +30,7 @@ export function FilterChip({
   const baseClasses = cn(
     "inline-flex items-center justify-center rounded-full font-medium transition-all duration-200 shrink-0 group cursor-pointer",
     "hover:shadow-md hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2",
-    "font-['DM_Sans'] leading-none",
+    "font-body leading-none",
     // Size variants - enhanced mobile sizing for better visibility and touch targets
     size === 'sm' 
       ? "text-sm pl-3 pr-3 py-1 md:text-sm md:pl-3 md:pr-3 md:py-1"
@@ -43,14 +43,14 @@ export function FilterChip({
 
   const variantClasses = {
     // Legacy variants (for backward compatibility)
-    selected: "bg-[#2A2A2A] text-[#E8E8E8] border border-[#FFC008] hover:bg-ods-border hover:border-[#FFD951] focus:ring-[#FFC008] focus:ring-offset-[#161616]",
-    unselected: "bg-[#2A2A2A] text-[#CCCCCC] border border-[#4A4A4A] hover:bg-ods-border hover:border-[#5A5A5A] hover:text-ods-text-primary focus:ring-[#4A4A4A] focus:ring-offset-[#161616]",
-    info: "bg-ods-border text-[#CCCCCC] border border-[#5A5A5A] cursor-default hover:scale-100 hover:shadow-none focus:ring-[#5A5A5A] focus:ring-offset-[#161616]",
-    
+    selected: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent hover:bg-ods-border hover:border-ods-accent-hover focus:ring-ods-accent focus:ring-offset-ods-bg",
+    unselected: "bg-ods-bg-surface text-ods-text-secondary border border-ods-border hover:bg-ods-border hover:border-ods-border-hover hover:text-ods-text-primary focus:ring-ods-border focus:ring-offset-ods-bg",
+    info: "bg-ods-border text-ods-text-secondary border border-ods-border-hover cursor-default hover:scale-100 hover:shadow-none focus:ring-ods-border-hover focus:ring-offset-ods-bg",
+
     // New subtle selected variants - same backgrounds/text, only border colors different
-    category: "bg-[#2A2A2A] text-[#E8E8E8] border border-[#FFC008]/40 hover:bg-ods-border hover:border-[#FFC008]/60 hover:text-ods-text-primary focus:ring-[#FFC008]/40 focus:ring-offset-[#161616]",
-    subcategory: "bg-[#2A2A2A] text-[#E8E8E8] border border-[#FFC008]/60 hover:bg-ods-border hover:border-[#FFC008]/80 hover:text-ods-text-primary focus:ring-[#FFC008]/60 focus:ring-offset-[#161616]",
-    tag: "bg-[#2A2A2A] text-ods-text-primary border border-[#FFC008]/20 hover:bg-ods-border hover:border-[#FFC008]/30 hover:text-ods-text-primary focus:ring-[#FFC008]/20 focus:ring-offset-[#161616]",
+    category: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent/40 hover:bg-ods-border hover:border-ods-accent/60 hover:text-ods-text-primary focus:ring-ods-accent/40 focus:ring-offset-ods-bg",
+    subcategory: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent/60 hover:bg-ods-border hover:border-ods-accent/80 hover:text-ods-text-primary focus:ring-ods-accent/60 focus:ring-offset-ods-bg",
+    tag: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent/20 hover:bg-ods-border hover:border-ods-accent/30 hover:text-ods-text-primary focus:ring-ods-accent/20 focus:ring-offset-ods-bg",
   }
 
   return (
@@ -67,7 +67,7 @@ export function FilterChip({
       aria-disabled={disabled}
     >
       <span className={cn(
-        "truncate font-['DM_Sans'] font-medium leading-none text-center",
+        "truncate font-body font-medium leading-none text-center",
         size === 'sm' ? "max-w-[100px] md:max-w-[120px]" : "max-w-[120px] md:max-w-[140px]"
       )} title={label}>
         {label}
@@ -86,12 +86,12 @@ export function FilterChip({
             "transition-all duration-200 shrink-0",
             "group-hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1",
             variant === 'category'
-              ? "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]"
+              ? "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface"
               : variant === 'subcategory'
-              ? "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]"
+              ? "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface"
               : variant === 'tag'
-              ? "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]"
-              : "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]",
+              ? "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface"
+              : "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface",
             disabled && "opacity-50 cursor-not-allowed hover:scale-100"
           )}
           aria-label={`Remove ${label} filter`}

package/src/components/footer.tsx

@@ -27,7 +27,7 @@ interface FooterConfig {
   belowDescriptionContent?: React.ReactNode  // Custom content below description
   moveDescriptionToRight?: boolean  // Move description and belowDescriptionContent to right column
   keepBelowDescriptionLeft?: boolean  // Keep belowDescriptionContent on left even when moveDescriptionToRight is true
-  backgroundColor?: string  // ODS background color (e.g., 'bg-ods-bg-card', 'bg-ods-system-greys-black')
+  backgroundColor?: string  // ODS background color (e.g., 'bg-ods-card', 'bg-ods-bg')
   social?: {
     github?: string
     twitter?: string
@@ -71,7 +71,7 @@ export function Footer({ config, renderLink }: FooterProps) {
  */
 function UniversalFooter({ config, renderLink }: { config: FooterConfig; renderLink?: (link: FooterLink) => React.ReactNode }) {
   const defaultRenderLink = (link: FooterLink) => (
-    <a href={link.href} className="font-body font-medium text-md md:text-md leading-[1.33] text-ods-text-primary hover:text-ods-accent-primary transition-colors">
+    <a href={link.href} className="font-body font-medium text-md md:text-md leading-[1.33] text-ods-text-primary hover:text-ods-accent transition-colors">
       {link.label}
     </a>
   )
@@ -79,7 +79,7 @@ function UniversalFooter({ config, renderLink }: { config: FooterConfig; renderL
   const linkRenderer = renderLink || defaultRenderLink
   
   return (
-    <footer className={`w-full flex flex-col justify-center items-center ${config.backgroundColor || 'bg-ods-bg-card'} px-6 py-10 relative gap-6 md:gap-6 min-h-[auto] md:min-h-[248px] z-[44] border-t border-ods-border`}>
+    <footer className={`w-full flex flex-col justify-center items-center ${config.backgroundColor || 'bg-ods-card'} px-6 py-10 relative gap-6 md:gap-6 min-h-[auto] md:min-h-[248px] z-[44] border-t border-ods-border`}>
       <div className="w-full grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 items-start">
         
         {/* Column 1: Logo and optionally description */}

package/src/components/form.tsx

@@ -112,7 +112,7 @@ const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttribu
   ({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField()
 
-    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />
+    return <p ref={ref} id={formDescriptionId} className={cn("text-h6 text-muted-foreground", className)} {...props} />
   },
 )
 FormDescription.displayName = "FormDescription"
@@ -127,7 +127,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
     }
 
     return (
-      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
+      <p ref={ref} id={formMessageId} className={cn("text-h6 text-destructive", className)} {...props}>
         {body}
       </p>
     )

package/src/components/hero-image-uploader.tsx

@@ -158,9 +158,9 @@ export function HeroImageUploader({ imageUrl, onChange, uploadEndpoint, height =
           ) : (
             <>
               <ImageIcon className="h-12 w-12 text-ods-text-secondary" />
-              <span className="text-ods-text-primary font-['DM_Sans'] text-[16px] font-medium mt-2">Upload cover image</span>
-              <span className="text-ods-text-secondary font-['DM_Sans'] text-[14px] mt-1">Click to upload or drag and drop</span>
-              <span className="text-ods-text-secondary font-['DM_Sans'] text-[12px]">PNG, JPEG, WebP, GIF up to 5MB</span>
+              <span className="text-ods-text-primary text-h6 mt-2">Upload cover image</span>
+              <span className="text-ods-text-secondary text-h6 mt-1">Click to upload or drag and drop</span>
+              <span className="text-ods-text-secondary text-h6">PNG, JPEG, WebP, GIF up to 5MB</span>
             </>
           )}
         </div>

package/src/components/image-cropper.tsx

@@ -213,7 +213,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
       <div className="flex flex-col gap-4">
         {/* Zoom */}
         <div className="flex items-center gap-3">
-          <span className="min-w-[60px] text-sm">Zoom</span>
+          <span className="min-w-[60px] text-h6">Zoom</span>
           <Slider
             min={1}
             max={3}
@@ -226,7 +226,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
         </div>
         {/* Rotate */}
         <div className="flex items-center gap-3">
-          <span className="min-w-[60px] text-sm">Rotate</span>
+          <span className="min-w-[60px] text-h6">Rotate</span>
           <Slider
             min={0}
             max={360}

package/src/components/layout/page-container.tsx

@@ -248,14 +248,14 @@ function renderAdvancedPageContainer({
 
             {/* Title */}
             {title && (
-              <h1 className="text-h2 tracking-[-0.64px] text-ods-text-primary">
+              <h1 className="text-h2 text-ods-text-primary">
                 {title}
               </h1>
             )}
 
             {/* Subtitle */}
             {subtitle && (
-              <div className="text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]">
+              <div className="text-h6 text-ods-text-secondary">
                 {subtitle}
               </div>
             )}
@@ -286,12 +286,12 @@ function renderAdvancedPageContainer({
             )}
 
             {title && (
-              <h1 className="text-h2 tracking-[-0.48px] text-ods-text-primary">
+              <h1 className="text-h2 text-ods-text-primary">
                 {title}
               </h1>
             )}
             {subtitle && (
-              <div className="text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]">
+              <div className="text-h6 text-ods-text-secondary">
                 {subtitle}
               </div>
             )}
@@ -322,7 +322,7 @@ function renderAdvancedPageContainer({
             )}
 
             {title && (
-              <h1 className="text-[32px] font-['Azeret_Mono:SemiBold',_sans-serif] font-semibold text-ods-text-primary tracking-[-0.64px]">
+              <h1 className="text-h2 text-ods-text-primary">
                 {title}
               </h1>
             )}
@@ -350,7 +350,7 @@ function renderAdvancedPageContainer({
               </h1>
             )}
             {subtitle && (
-              <div className="text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]">
+              <div className="text-h6 text-ods-text-secondary">
                 {subtitle}
               </div>
             )}

package/src/components/layout/page-heading.tsx

@@ -22,7 +22,7 @@ export const PAGE_HEADING_CLASS = 'text-h1 text-ods-text-primary'
 export const SECTION_HEADING_CLASS = 'text-h2 text-ods-text-primary'
 
 const DESCRIPTION_CLASS =
-  "mt-6 max-w-[640px] font-['DM_Sans'] text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary"
+  "mt-6 max-w-[640px] font-body text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary"
 
 export interface PageHeadingProps {
   /** Heading content — plain text or nodes (e.g. an accent <span>). */

package/src/components/loading/card-skeleton.tsx

@@ -177,10 +177,10 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
               </div>
               
               {/* Date and reading time section - matches BlogMeta right side */}
-              <div className="flex items-center gap-3 text-[#767676] shrink-0">
+              <div className="flex items-center gap-3 text-ods-text-muted shrink-0">
                 <TextSkeleton.Caption className="w-12" />
                 {/* Separator dot */}
-                <div className="w-1 h-1 bg-[#767676] rounded-full"></div>
+                <div className="w-1 h-1 bg-ods-skeleton rounded-full"></div>
                 <TextSkeleton.Caption className="w-16" />
               </div>
             </div>

package/src/components/loading/category-card-skeleton.tsx

@@ -10,7 +10,7 @@ export function CategoryCardSkeleton({ className }: CategoryCardSkeletonProps) {
   return (
     <article
       className={cn(
-        'bg-[#1A1A1A] border border-[#424242] rounded-[12px] p-8 flex flex-col min-w-0 box-border',
+        'bg-ods-card border border-ods-border rounded-[12px] p-8 flex flex-col min-w-0 box-border',
         className,
       )}
       role="status"

package/src/components/loading/margin-report-skeleton.tsx

@@ -15,8 +15,8 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
       <div className="max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto space-y-10">
         {/* Header */}
         <div className="space-y-3">
-          <div className="h-10 w-72 bg-[#2A2A2A] rounded" />
-          <div className="h-4 w-80 bg-[#2A2A2A] rounded" />
+          <div className="h-10 w-72 bg-ods-skeleton rounded" />
+          <div className="h-4 w-80 bg-ods-skeleton rounded" />
         </div>
 
         {/* Summary cards */}
@@ -30,10 +30,10 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* MSP profile skeleton */}
           <div className="bg-ods-card border border-ods-border rounded-lg p-6 flex items-center gap-4 animate-pulse">
-            <div className="w-14 h-14 rounded-lg bg-[#2A2A2A]" />
+            <div className="w-14 h-14 rounded-lg bg-ods-skeleton" />
             <div className="flex-1 space-y-2">
-              <div className="h-4 bg-[#2A2A2A] rounded w-3/4" />
-              <div className="h-3 bg-[#2A2A2A] rounded w-1/2" />
+              <div className="h-4 bg-ods-skeleton rounded w-3/4" />
+              <div className="h-3 bg-ods-skeleton rounded w-1/2" />
             </div>
           </div>
 
@@ -41,15 +41,15 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           <div className="bg-ods-card border border-ods-border rounded-lg p-6 flex flex-col gap-4 animate-pulse">
             <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-2">
-                <div className="w-10 h-10 rounded-lg bg-[#2A2A2A]" />
+                <div className="w-10 h-10 rounded-lg bg-ods-skeleton" />
                 <div className="space-y-1">
-                  <div className="h-4 w-32 bg-[#2A2A2A] rounded" />
-                  <div className="h-3 w-20 bg-[#2A2A2A] rounded" />
+                  <div className="h-4 w-32 bg-ods-skeleton rounded" />
+                  <div className="h-3 w-20 bg-ods-skeleton rounded" />
                 </div>
               </div>
-              <div className="h-6 w-36 bg-[#2A2A2A] rounded" />
+              <div className="h-6 w-36 bg-ods-skeleton rounded" />
             </div>
-            <div className="h-4 w-40 bg-[#2A2A2A] rounded mt-4" />
+            <div className="h-4 w-40 bg-ods-skeleton rounded mt-4" />
           </div>
         </div>
 
@@ -59,10 +59,10 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
             <div key={idx} className="bg-ods-card border border-ods-border rounded-lg overflow-hidden flex flex-col animate-pulse">
               {/* list header */}
               <div className="flex items-center justify-between px-6 py-4">
-                <div className="h-6 w-40 bg-[#2A2A2A] rounded" />
+                <div className="h-6 w-40 bg-ods-skeleton rounded" />
                 <div className="flex items-center gap-2">
-                  <div className="h-5 w-20 bg-[#2A2A2A] rounded" />
-                  <div className="h-4 w-10 bg-[#2A2A2A] rounded" />
+                  <div className="h-5 w-20 bg-ods-skeleton rounded" />
+                  <div className="h-4 w-10 bg-ods-skeleton rounded" />
                 </div>
               </div>
 
@@ -72,16 +72,16 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
                   <div key={j} className="bg-ods-bg border border-ods-border rounded-lg px-4 py-3 flex items-center justify-between">
                     {/* left section: icon + text */}
                     <div className="flex items-center gap-3 min-w-0">
-                      <div className="w-12 h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0" />
+                      <div className="w-12 h-12 bg-ods-skeleton rounded-lg flex-shrink-0" />
                       <div className="flex flex-col min-w-0">
-                        <div className="h-4 w-32 bg-[#2A2A2A] rounded" />
-                        <div className="hidden md:block h-3 w-24 bg-[#2A2A2A] rounded mt-1" />
+                        <div className="h-4 w-32 bg-ods-skeleton rounded" />
+                        <div className="hidden md:block h-3 w-24 bg-ods-skeleton rounded mt-1" />
                       </div>
                     </div>
                     {/* right addon: cost text */}
                     <div className="flex items-center gap-1 flex-shrink-0">
-                      <div className="h-4 w-16 bg-[#2A2A2A] rounded" />
-                      <div className="h-3 w-8 bg-[#2A2A2A] rounded" />
+                      <div className="h-4 w-16 bg-ods-skeleton rounded" />
+                      <div className="h-3 w-8 bg-ods-skeleton rounded" />
                     </div>
                   </div>
                 ))}
@@ -91,7 +91,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         </div>
 
         {/* Strategic Recommendations header placeholder */}
-        <div className="h-6 w-60 bg-[#2A2A2A] rounded" />
+        <div className="h-6 w-60 bg-ods-skeleton rounded" />
 
         {/* Recommendations grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -105,11 +105,11 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           {/* Section header */}
           <div className="flex items-start gap-6">
             <div className="flex-1 space-y-2 min-w-0">
-              <div className="h-8 w-72 bg-[#2A2A2A] rounded" />
-              <div className="h-4 w-3/4 bg-[#2A2A2A] rounded" />
+              <div className="h-8 w-72 bg-ods-skeleton rounded" />
+              <div className="h-4 w-3/4 bg-ods-skeleton rounded" />
             </div>
             {/* Logo placeholder */}
-            <div className="w-12 h-12 bg-[#2A2A2A] rounded-md shrink-0" />
+            <div className="w-12 h-12 bg-ods-skeleton rounded-md shrink-0" />
           </div>
 
           {/* Value cards grid */}

package/src/components/loading/openmsp-heartbeat.tsx

@@ -35,7 +35,7 @@ export function OpenmspHeartbeatLoader({ className = '', progress = 0, label, ba
         <div className="flex flex-col items-center justify-center w-128">
           {/* Progress text */} 
           <h2 className="mt-2 text-ods-accent text-center font-bold">
-            {progress != undefined && progress > 0 ? Math.floor(progress) : 0}% <span  className="text-sm text-ods-text-secondary">/100%</span>
+            {progress != undefined && progress > 0 ? Math.floor(progress) : 0}% <span  className="text-h6 text-ods-text-secondary">/100%</span>
           </h2>
 
           {/* Progress text */}