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

package/src/components/pagination.tsx

@@ -85,7 +85,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
             // Render ellipsis
             return (
               <li key={`ellipsis-${index}`}>
-                <span className="flex h-9 w-9 items-center justify-center text-h6 text-muted-foreground">
+                <span className="flex h-9 w-9 items-center justify-center text-sm text-muted-foreground">
                   <MoreHorizontal className="h-4 w-4" />
                   <span className="sr-only">More pages</span>
                 </span>
@@ -147,7 +147,7 @@ const PaginationLink = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttri
       <button
         ref={ref}
         className={cn(
-          "inline-flex items-center justify-center h-10 w-10 rounded-md border border-input bg-background text-h6 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "inline-flex items-center justify-center h-10 w-10 rounded-md border border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           className,
         )}
         {...props}

package/src/components/persistent-filter-controls.tsx

@@ -107,7 +107,7 @@ export function PersistentFilterControls({
           role="status"
           aria-label="Loading filters"
         >
-          <div className="w-4 h-4 border-2 border-ods-border border-t-ods-accent rounded-full animate-spin" />
+          <div className="w-4 h-4 border-2 border-ods-border border-t-[#FFC008] rounded-full animate-spin" />
         </div>
       )}
     </div>

package/src/components/platform/.ShellTypeBadge.md

@@ -20,7 +20,7 @@ import { ShellTypeValues } from './types/shell.types'
 // With custom wrapper and icon class overrides
 <ShellTypeBadge
   shellType={ShellTypeValues.PYTHON}
-  className="bg-ods-bg-surface px-2 py-1 rounded"
+  className="bg-ods-surface-secondary px-2 py-1 rounded"
   iconClassName="opacity-75"
 />
 

package/src/components/platform/CveLink.tsx

@@ -33,7 +33,7 @@ export const CveLink: React.FC<CveLinkProps> = ({
       target="_blank"
       rel="noopener noreferrer"
       className={cn(
-        'inline-flex items-center gap-2 text-code text-ods-text-primary hover:text-ods-accent transition-colors group',
+        'inline-flex items-center gap-2 font-medium text-[18px] leading-[20px] text-ods-text-primary font-mono hover:text-ods-accent transition-colors group',
         className
       )}
     >

package/src/components/platform/ScriptArguments.tsx

@@ -136,7 +136,7 @@ export const ScriptArguments: React.FC<ScriptArgumentsProps> = ({
                 placeholder={valuePlaceholder}
                 disabled={disabled}
                 className={cn(
-                  !arg.value && 'placeholder:text-ods-text-muted'
+                  !arg.value && 'placeholder:text-[#888]'
                 )}
               />
             </div>
@@ -147,7 +147,7 @@ export const ScriptArguments: React.FC<ScriptArgumentsProps> = ({
               onClick={() => handleDelete(arg.id)}
               disabled={disabled}
               aria-label="Delete argument"
-              leftIcon={<Trash2 className="size-4 md:size-6 " color="var(--color-error)" />}
+              leftIcon={<Trash2 className="size-4 md:size-6 " color="var(--ods-attention-red-error)" />}
             />
           </div>
         </div>

package/src/components/platform/ScriptInfoSection.tsx

@@ -91,7 +91,7 @@ function InfoCell({ label, value, avatar, className }: InfoCellProps) {
               className="size-full object-cover"
             />
           ) : (
-            <div className="size-full flex items-center justify-center text-ods-text-secondary text-h6">
+            <div className="size-full flex items-center justify-center text-ods-text-secondary text-sm font-medium">
               {avatar.initials || getInitials(avatar.name)}
             </div>
           )}
@@ -100,10 +100,10 @@ function InfoCell({ label, value, avatar, className }: InfoCellProps) {
 
       {/* Text content */}
       <div className="flex flex-col min-w-0">
-        <span className="text-ods-text-primary text-h4 truncate" title={value}>
+        <span className="text-ods-text-primary font-['DM_Sans'] text-[14px] leading-[20px] md:text-[18px] md:leading-[24px] font-medium truncate" title={value}>
           {value}
         </span>
-        <span className="text-ods-text-secondary text-h6 truncate">
+        <span className="text-ods-text-secondary font-['DM_Sans'] text-[12px] leading-[16px] md:text-[14px] md:leading-[20px] font-medium truncate">
           {label}
         </span>
       </div>
@@ -148,11 +148,11 @@ export const ScriptInfoSection: React.FC<ScriptInfoSectionProps> = ({
       {/* Header row with title and description */}
       <div className="p-4 border-b border-ods-border">
         <div className="flex flex-col gap-1">
-          <h3 className="text-ods-text-primary text-h4">
+          <h3 className="text-ods-text-primary font-['DM_Sans'] text-[14px] leading-[20px] md:text-[18px] md:leading-[24px] font-medium">
             {headline}
           </h3>
           {subheadline && (
-            <p className="text-ods-text-secondary text-h6 break-words">
+            <p className="text-ods-text-secondary font-['DM_Sans'] text-[12px] leading-[16px] md:text-[14px] md:leading-[20px] font-medium break-words">
               {subheadline}
             </p>
           )}

package/src/components/platform/ShellTypeBadge.tsx

@@ -39,11 +39,11 @@ const shellIconMap: Record<ShellType, ShellIconConfig> = {
   },
   [ShellTypeValues.CMD]: {
     icon: CmdIcon,
-    props: { size: 16, color: 'var(--color-text-secondary)' }
+    props: { size: 16, color: '#888888' }
   },
   [ShellTypeValues.BASH]: {
     icon: BashIcon,
-    props: { size: 16, color: 'var(--color-text-secondary)' }
+    props: { size: 16, color: '#888888' }
   },
   [ShellTypeValues.PYTHON]: {
     icon: PythonLogoIcon,
@@ -51,21 +51,21 @@ const shellIconMap: Record<ShellType, ShellIconConfig> = {
   },
   [ShellTypeValues.NUSHELL]: {
     icon: NushellIcon,
-    props: { size: 16, color: 'var(--color-text-secondary)' }
+    props: { size: 16, color: '#888888' }
   },
   [ShellTypeValues.DENO]: {
     icon: DenoIcon,
-    props: { size: 16, color: 'var(--color-text-secondary)' }
+    props: { size: 16, color: '#888888' }
   },
   [ShellTypeValues.SHELL]: {
     icon: ShellIcon,
-    props: { size: 16, color: 'var(--color-text-secondary)' }
+    props: { size: 16, color: '#888888' }
   }
 } as const
 
 const defaultIconConfig: ShellIconConfig = {
   icon: ShellIcon,
-  props: { size: 16, color: 'var(--color-text-secondary)' }
+  props: { size: 16, color: '#888888' }
 }
 
 export interface ShellTypeBadgeProps {

package/src/components/platform/SoftwareInfo.tsx

@@ -38,13 +38,13 @@ export const SoftwareInfo: React.FC<SoftwareInfoProps> = ({
           {name}
         </div>
         {version && (
-          <div className="px-2 py-1 bg-ods-bg-surface rounded text-ods-text-secondary text-h6">
+          <div className="px-2 py-1 bg-ods-system-greys-soft-grey-action rounded text-ods-text-secondary font-['DM_Sans'] font-normal text-[16px] leading-[20px]">
             {version}
           </div>
         )}
       </div>
       {vendor && (
-        <div className="text-h6 text-ods-text-secondary">
+        <div className="font-['DM_Sans'] font-normal text-[16px] leading-[16px] text-ods-text-secondary">
           {vendor}
         </div>
       )}

package/src/components/pricing-display.tsx

@@ -23,30 +23,30 @@ interface PricingDisplayProps {
 export const PRICING_STYLES = {
   // Comparison table style (current default)
   comparison: {
-    priceTextSize: 'text-h6',
+    priceTextSize: 'text-[16px]',
     priceTextColor: 'text-ods-text-primary',
-    secondaryTextSize: 'text-h6',
+    secondaryTextSize: 'text-[16px]',
     secondaryTextColor: 'text-ods-text-secondary',
     showTildePrefix: false,
-    fontFamily: 'font-body'
+    fontFamily: "font-['DM_Sans']"
   },
   // Vendor dropdown compact style (Figma design)
   compact: {
-    priceTextSize: 'text-h6',
+    priceTextSize: 'text-[12px]',
     priceTextColor: 'text-ods-text-secondary',
-    secondaryTextSize: 'text-h6',
+    secondaryTextSize: 'text-[12px]',
     secondaryTextColor: 'text-ods-text-secondary',
     showTildePrefix: true,
-    fontFamily: 'font-body'
+    fontFamily: "font-['DM_Sans']"
   },
   // Card style for vendor cards
   card: {
-    priceTextSize: 'text-h6',
+    priceTextSize: 'text-[14px]',
     priceTextColor: 'text-ods-text-primary',
-    secondaryTextSize: 'text-h6',
+    secondaryTextSize: 'text-[14px]',
     secondaryTextColor: 'text-ods-text-secondary',
     showTildePrefix: true,
-    fontFamily: 'font-body'
+    fontFamily: "font-['DM_Sans']"
   }
 } as const
 

package/src/components/profile/ProfileLoadingSkeleton.tsx

@@ -10,18 +10,18 @@ export function ProfileLoadingSkeleton({ className }: ProfileLoadingSkeletonProp
     <div className={cn("space-y-6", className)}>
       {/* Header skeleton */}
       <div className="flex items-center space-x-4">
-        <div className="h-16 w-16 bg-ods-skeleton rounded-full animate-pulse" />
+        <div className="h-16 w-16 bg-gray-200 rounded-full animate-pulse" />
         <div className="space-y-2">
-          <div className="h-4 w-32 bg-ods-skeleton rounded animate-pulse" />
-          <div className="h-3 w-24 bg-ods-skeleton rounded animate-pulse" />
+          <div className="h-4 w-32 bg-gray-200 rounded animate-pulse" />
+          <div className="h-3 w-24 bg-gray-200 rounded animate-pulse" />
         </div>
       </div>
       
       {/* Content skeleton */}
       <div className="space-y-4">
-        <div className="h-4 w-full bg-ods-skeleton rounded animate-pulse" />
-        <div className="h-4 w-3/4 bg-ods-skeleton rounded animate-pulse" />
-        <div className="h-4 w-1/2 bg-ods-skeleton rounded animate-pulse" />
+        <div className="h-4 w-full bg-gray-200 rounded animate-pulse" />
+        <div className="h-4 w-3/4 bg-gray-200 rounded animate-pulse" />
+        <div className="h-4 w-1/2 bg-gray-200 rounded animate-pulse" />
       </div>
     </div>
   )

package/src/components/related-content/related-content-section.tsx

@@ -730,7 +730,7 @@ export function RelatedContentSection({
       const skeletonType = includeTypes?.[0] ?? entityType ?? 'blog_post_existing';
       return (
         <div className="space-y-8">
-          <h2 className="text-h2 text-ods-text-primary">{title}</h2>
+          <h2 className="text-2xl font-bold text-ods-text-primary">{title}</h2>
           <div className={gridClassFor(columns)}>
             {Array.from({ length: 3 }).map((_, i) => (
               <div key={i}>{renderSkeletonForType(skeletonType, 'default', adminCampaignCard)}</div>
@@ -774,7 +774,7 @@ export function RelatedContentSection({
 
   return (
     <div className="space-y-8">
-      <h2 className="text-h2 text-ods-text-primary">{title}</h2>
+      <h2 className="text-2xl font-bold text-ods-text-primary">{title}</h2>
       {orderedTypes.map((type) => (
         <ContentGroup
           key={type}
@@ -787,7 +787,7 @@ export function RelatedContentSection({
           extras={extras}
           adminCampaignCard={adminCampaignCard}
           heading={
-            <h3 className="text-h5 font-semibold text-ods-text-secondary">
+            <h3 className="font-['Azeret_Mono'] text-[14px] font-semibold uppercase text-ods-text-secondary tracking-wider">
               {getContentRefLabelOrTitleCase(type)}
             </h3>
           }

package/src/components/results-count.tsx

@@ -27,7 +27,7 @@ export function ResultsCount({
 
   return (
     <div className="mb-6">
-      <p className="text-ods-text-secondary text-h6">
+      <p className="text-ods-text-secondary text-sm font-['DM_Sans']">
         {totalResults > 0 && (
           <>
             Showing {startIndex}-{endIndex} of {totalResults} {displayType}

package/src/components/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-ods-border bg-ods-card px-3 py-2 text-h4 placeholder:text-ods-text-secondary focus:outline-none focus:ring-2 focus:ring-ods-accent focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-ods-bg [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-[1400] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h4 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/src/components/shared/delivery/delivery-row.tsx

@@ -89,7 +89,7 @@ export function DeliveryRow({
       {/* Left: caption (optional) + title + subtitle + description */}
       <div className="flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]">
         {caption && (
-          <p className="text-h5 text-ods-text-secondary">
+          <p className="text-xs font-medium uppercase tracking-wider text-ods-text-secondary">
             {caption}
           </p>
         )}

package/src/components/shared/delivery/delivery-table.tsx

@@ -85,7 +85,7 @@ export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps)
   if (items.length === 0) {
     return (
       <div className="bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full">
-        <p className="text-h6 text-ods-text-secondary">
+        <p className="text-ods-text-secondary text-[14px] font-['DM_Sans'] font-medium">
           No tasks available
         </p>
       </div>

package/src/components/shared/dev-section/dev-section-view.tsx

@@ -107,7 +107,7 @@ export function DevSectionView({ sectionKey, hero, preControls, children, showHe
               {hero.icon}
               {hero.title ?? section.hero.title}
             </h1>
-            <p className="text-h4 text-ods-text-secondary max-w-3xl">
+            <p className="font-['DM_Sans'] font-medium text-[18px] leading-[28px] text-ods-text-secondary max-w-3xl">
               {hero.description}
             </p>
           </div>

package/src/components/shared/doc-search/doc-search-result-row.tsx

@@ -56,14 +56,14 @@ export function DocSearchResultRow({
       </span>
       <div className="min-w-0 flex-1">
         <div
-          className={`text-h6 truncate ${
+          className={`text-sm font-medium leading-5 truncate ${
             isHighlighted ? 'text-ods-accent' : 'text-ods-text-primary'
           }`}
         >
           {result.title || result.path}
         </div>
         {!isGroup && result.path?.includes('/') && (
-          <div className="text-h6 text-ods-text-secondary truncate mt-0.5">
+          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5">
             {formatRelativePath(result.path)}
           </div>
         )}

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -110,7 +110,7 @@ export function LegalDocumentPage({
   const inner = (
     <PageLayout title={title} subtitle={subtitle} backButton={backCfg} titleSize="h1" titleWrap>
       {data?.sourceFile && (
-        <p className="text-h6 text-ods-text-secondary opacity-75">Source: {data.sourceFile}</p>
+        <p className="font-['DM_Sans'] text-sm text-ods-text-secondary opacity-75">Source: {data.sourceFile}</p>
       )}
 
       <div className="flex flex-col lg:flex-row gap-6 lg:gap-10 items-start flex-1">
@@ -134,9 +134,9 @@ export function LegalDocumentPage({
                   </div>
                 ) : error ? (
                   <div className="text-center space-y-4">
-                    <div className="bg-ods-error-secondary border border-ods-error rounded-lg p-6">
-                      <p className="text-ods-error mb-2">{errorTitle}</p>
-                      <p className="text-ods-error text-h6">{error}</p>
+                    <div className="bg-red-900/20 border border-red-700 rounded-lg p-6">
+                      <p className="text-red-400 mb-2">{errorTitle}</p>
+                      <p className="text-red-300 text-sm">{error}</p>
                     </div>
                     <div className="text-ods-text-secondary">
                       <p>{errorContactPrompt}</p>
@@ -153,7 +153,7 @@ export function LegalDocumentPage({
                   />
                 ) : (
                   <div className="text-center text-ods-text-secondary py-16">
-                    <p className="text-h4">{emptyStateMessage}</p>
+                    <p className="text-xl">{emptyStateMessage}</p>
                     <p className="mt-2">
                       Please contact{' '}
                       <a href={`mailto:${contactEmail}`} className="text-ods-accent hover:underline">

package/src/components/shared/onboarding/onboarding-step-card.tsx

@@ -69,7 +69,7 @@ export function OnboardingStepCard({
         <h3 className="text-h4 text-ods-text-primary truncate" title={step.title}>
           {step.title}
         </h3>
-        <p className="text-h6 text-ods-text-secondary truncate h-[20px]" title={step.description}>
+        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate h-[20px]" title={step.description}>
           {step.description}
         </p>
       </div>

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -13,7 +13,7 @@ export interface ProductReleaseCardSkeletonProps {
 
 export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductReleaseCardSkeletonProps) {
   // ----- LG branch — must match ProductReleaseCard size='lg'.
-  // Same outer frame (`bg-ods-card border border-ods-border …
+  // Same outer frame (`bg-ods-system-greys-black border border-ods-border …
   // p-6 gap-4`). Inner: hero (16:9 cover + version pill + title + summary),
   // changelog strip placeholder, metadata-grid footer (4 cells via grid).
   // Heights chosen to match the loaded card's rendered metrics so the
@@ -25,14 +25,14 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
     return (
       <div
         className={cn(
-          'bg-ods-card border border-ods-border rounded-lg overflow-hidden',
+          'bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden',
           'flex flex-col p-6 gap-4',
           'animate-pulse',
           className,
         )}
       >
         {/* HERO — placeholders use `bg-ods-border` (#3a3a3a) so they
-            contrast against the card's `bg-ods-card`
+            contrast against the card's `bg-ods-system-greys-black`
             (#212121) container. The metadata grid cells below use
             `bg-ods-card` containers so `bg-ods-bg` placeholders work
             there, but in the hero the card IS `bg-ods-card`-equivalent —