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

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-system-greys-black border border-ods-border …
+  // Same outer frame (`bg-ods-card 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-system-greys-black border border-ods-border rounded-lg overflow-hidden',
+          'bg-ods-card 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-system-greys-black`
+            contrast against the card's `bg-ods-card`
             (#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 —

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

@@ -220,7 +220,7 @@ export function ProductReleaseCard({
     const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border'
 
     const frameClass = cn(
-      'group bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden',
+      'group bg-ods-card border border-ods-border rounded-lg overflow-hidden',
       'flex flex-col p-6 gap-4',
       'transition-all duration-300 ease-out transform hover:translate-y-[-2px]',
       'hover:border-ods-accent hover:shadow-lg hover:shadow-ods-accent/[0.08]',
@@ -251,14 +251,14 @@ export function ProductReleaseCard({
               )}
               {hasVideoCover && coverImage && (
                 <span className="absolute inset-0 flex items-center justify-center bg-black/30">
-                  <Play className="w-10 h-10 text-white" fill="white" />
+                  <Play className="w-10 h-10 text-ods-text-on-dark" fill="white" />
                 </span>
               )}
             </div>
           </div>
           <div className="flex-1 min-w-0 flex flex-col">
             <div className="flex items-center gap-3 mb-3">
-              <span className="font-mono font-semibold text-lg text-ods-text-primary truncate">
+              <span className="text-code font-semibold text-ods-text-primary truncate">
                 v{version}
               </span>
             </div>
@@ -290,7 +290,7 @@ export function ProductReleaseCard({
             (zero reflow on resolve). When `totalChangelog === 0`, an
             empty-state line takes the same vertical space as the
             populated row. */}
-        <div className="border-t border-ods-border pt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 font-['DM_Sans'] text-sm text-ods-text-secondary">
+        <div className="border-t border-ods-border pt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-h6 text-ods-text-secondary">
           {totalChangelog > 0 && changelogCounts ? (
             <>
               {changelogCounts.features > 0 && (
@@ -312,14 +312,14 @@ export function ProductReleaseCard({
                 </span>
               )}
               {changelogCounts.breaking > 0 && (
-                <span className="inline-flex items-center gap-1.5 text-[var(--ods-attention-yellow-warning)]">
+                <span className="inline-flex items-center gap-1.5 text-ods-warning">
                   <AlertTriangle className="w-3.5 h-3.5" />
                   {changelogCounts.breaking} breaking
                 </span>
               )}
             </>
           ) : (
-            <span className="text-sm text-ods-text-secondary">No changelog entries yet</span>
+            <span className="text-ods-text-secondary">No changelog entries yet</span>
           )}
         </div>
 
@@ -362,7 +362,7 @@ export function ProductReleaseCard({
                     {cell.uppercase ? cell.value.toLocaleUpperCase() : cell.value}
                   </p>
                 )}
-                <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+                <p className="text-h6 text-ods-text-secondary">
                   {cell.label}
                 </p>
               </div>
@@ -380,7 +380,7 @@ export function ProductReleaseCard({
               <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
                 {effectiveAuthor.full_name}
               </p>
-              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+              <p className="text-h6 text-ods-text-secondary">
                 {effectiveAuthor.job_title || 'Author'}
               </p>
             </div>
@@ -388,7 +388,7 @@ export function ProductReleaseCard({
         </div>
 
         {typeof viewCount === 'number' && viewCount > 0 && (
-          <div className="flex items-center gap-1.5 text-xs text-ods-text-secondary">
+          <div className="flex items-center gap-1.5 text-h6 text-ods-text-secondary">
             <Eye className="w-3.5 h-3.5" />
             <span>{viewCount.toLocaleString()} views</span>
           </div>
@@ -492,7 +492,7 @@ export function ProductReleaseCard({
           )}
           {hasVideoCover && coverImage && (
             <span className="absolute inset-0 flex items-center justify-center bg-black/30">
-              <Play className="h-4 w-4 text-white" fill="white" />
+              <Play className="h-4 w-4 text-ods-text-on-dark" fill="white" />
             </span>
           )}
         </span>
@@ -506,22 +506,22 @@ export function ProductReleaseCard({
             as the loaded text — zero load-to-resolve baseline shift. */}
         <span className="flex min-w-0 flex-1 flex-col gap-0.5 min-h-14">
           <span className="flex items-center gap-2 min-w-0 h-5">
-            <span className="truncate text-sm font-semibold leading-5 text-ods-text-primary min-w-0" title={title}>
+            <span className="truncate text-h6 font-semibold text-ods-text-primary min-w-0" title={title}>
               {title}
             </span>
             {version ? (
-              <span className="shrink-0 rounded bg-ods-accent/10 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ods-accent">
+              <span className="shrink-0 rounded bg-ods-accent/10 px-1.5 py-0.5 text-code text-ods-accent">
                 {version}
               </span>
             ) : null}
           </span>
           <span className="flex items-center min-w-0 h-4">
-            <span className="truncate text-[11px] leading-4 text-ods-text-secondary">
+            <span className="truncate text-h6 text-ods-text-secondary">
               {formattedDate || 'Product release'}
             </span>
           </span>
           <span className="flex items-center min-w-0 h-4">
-            <span className="truncate text-[11px] leading-4 text-ods-text-secondary/80" title={summary || undefined}>
+            <span className="truncate text-h6 text-ods-text-secondary/80" title={summary || undefined}>
               {/* The literal between the curly-quote string is U+00A0
                   (NBSP). The hub's `COMPACT_CARD_ROW_FILLER` is also
                   NBSP; ASCII space here would let React collapse the

package/src/components/shared/product-release/release-detail-page.tsx

@@ -220,8 +220,8 @@ export function ReleaseDetailPage({
   if (error || !release) {
     return renderShell(
       <div className="text-center py-16">
-        <h1 className="text-4xl font-bold text-ods-text-primary mb-4">Release Not Found</h1>
-        <p className="text-xl text-ods-text-secondary">The release you&apos;re looking for doesn&apos;t exist.</p>
+        <h1 className="text-h1 text-ods-text-primary mb-4">Release Not Found</h1>
+        <p className="text-h4 text-ods-text-secondary">The release you&apos;re looking for doesn&apos;t exist.</p>
       </div>
     );
   }
@@ -276,7 +276,7 @@ export function ReleaseDetailPage({
               <p className="text-h4 text-ods-text-primary">
                 {releaseType.toLocaleUpperCase()}
               </p>
-              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+              <p className="text-h6 text-ods-text-secondary">
                 Release Type
               </p>
             </div>
@@ -288,7 +288,7 @@ export function ReleaseDetailPage({
               <p className="text-h4 text-ods-text-primary">
                 {releaseStatus.toLocaleUpperCase()}
               </p>
-              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+              <p className="text-h6 text-ods-text-secondary">
                 Release Status
               </p>
             </div>
@@ -300,7 +300,7 @@ export function ReleaseDetailPage({
               <p className="text-h4 text-ods-text-primary">
                 {formatReleaseDate(releaseDate)}
               </p>
-              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+              <p className="text-h6 text-ods-text-secondary">
                 Release Date
               </p>
             </div>
@@ -385,12 +385,12 @@ export function ReleaseDetailPage({
 
         {/* Breaking Changes Warning */}
         {hasBreakingChanges && (
-          <Card className="border-red-500 bg-red-500/10">
+          <Card className="border-ods-error bg-ods-error/10">
             <CardContent className="p-6">
               <div className="flex items-center gap-3">
-                <AlertTriangle className="h-6 w-6 text-red-500" />
+                <AlertTriangle className="h-6 w-6 text-ods-error" />
                 <div>
-                  <h3 className="font-bold text-red-500 text-lg">Breaking Changes</h3>
+                  <h3 className="text-h3 text-ods-error">Breaking Changes</h3>
                   <p className="text-ods-text-secondary">This release contains breaking changes. Review carefully before upgrading.</p>
                 </div>
               </div>
@@ -510,11 +510,11 @@ export function ReleaseDetailPage({
                           href={ghRelease.github_release_url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-h4 text-[#ffc008] hover:underline"
+                          className="text-h4 text-ods-accent hover:underline"
                         >
                           {ghRelease.github_release_url.split('/').pop()}
                         </a>
-                        <ExternalLink className="h-6 w-6 text-[#ffc008] shrink-0" />
+                        <ExternalLink className="h-6 w-6 text-ods-accent shrink-0" />
                       </div>
                     ))}
                   </>
@@ -534,11 +534,11 @@ export function ReleaseDetailPage({
                           </span>
                           <Link
                             href={path.startsWith('http') ? path : `/knowledge-base${path.startsWith('/') ? '' : '/'}${path}`}
-                            className="text-h4 text-[#ffc008] hover:underline"
+                            className="text-h4 text-ods-accent hover:underline"
                           >
                             {path.replace(/^\//, '').split('/').pop()?.replace(/-/g, ' ') || 'View Article'}
                           </Link>
-                          <ExternalLink className="h-6 w-6 text-[#ffc008] shrink-0" />
+                          <ExternalLink className="h-6 w-6 text-ods-accent shrink-0" />
                         </div>
                       );
                     })}
@@ -553,11 +553,11 @@ export function ReleaseDetailPage({
                       href={migrationGuideUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-h4 text-[#ffc008] hover:underline"
+                      className="text-h4 text-ods-accent hover:underline"
                     >
                       📖 Migration Guide
                     </a>
-                    <ExternalLink className="h-6 w-6 text-[#ffc008] shrink-0" />
+                    <ExternalLink className="h-6 w-6 text-ods-accent shrink-0" />
                   </div>
                 )}
 
@@ -569,11 +569,11 @@ export function ReleaseDetailPage({
                       href={documentationUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-h4 text-[#ffc008] hover:underline"
+                      className="text-h4 text-ods-accent hover:underline"
                     >
                       📚 Documentation
                     </a>
-                    <ExternalLink className="h-6 w-6 text-[#ffc008] shrink-0" />
+                    <ExternalLink className="h-6 w-6 text-ods-accent shrink-0" />
                   </div>
                 )}
               </div>

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -283,7 +283,7 @@ export function RoadmapGrid({
               <div className="flex items-center gap-3">
                 <h3
                   className={cn(
-                    "font-['Azeret_Mono'] font-semibold text-[24px] md:text-[28px] lg:text-[32px] leading-[32px] md:leading-[36px] lg:leading-[40px] text-ods-text-primary tracking-[-0.48px] md:tracking-[-0.56px] lg:tracking-[-0.64px] transition-opacity",
+                    'text-h2 text-ods-text-primary transition-opacity',
                     isExpanded ? 'opacity-100' : 'opacity-60',
                   )}
                 >
@@ -292,7 +292,7 @@ export function RoadmapGrid({
                 </h3>
                 <span
                   className={cn(
-                    'text-sm font-medium transition-opacity',
+                    'text-h6 transition-opacity',
                     isExpanded ? 'text-ods-text-secondary opacity-100' : 'text-ods-text-tertiary opacity-60',
                   )}
                 >

package/src/components/smooth-accordion.tsx

@@ -47,7 +47,7 @@ export const SmoothAccordionTrigger = React.forwardRef<
         size="md"
         isExpanded={false}
         backgroundColor="transparent"
-        borderColor="#3A3A3A"
+        borderColor="var(--color-border-default)"
         className="transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180"
       />
     </AccordionPrimitive.Trigger>

package/src/components/social-icon-row.tsx

@@ -86,7 +86,7 @@ function renderSocialIcon(platform: string) {
       // force the themed foreground via the ODS token (white on the dark
       // theme, tracking the theme unlike the literal the reddit/slack cases
       // still carry).
-      return <CopyIcon className="w-5 h-5" color="var(--ods-text-primary)" />;
+      return <CopyIcon className="w-5 h-5" color="var(--color-text-primary)" />;
     default:
       return <GlobeIcon className="w-5 h-5" />;
   }

package/src/components/sonner.tsx

@@ -13,14 +13,14 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-ods-background-secondary group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-border group-[.toaster]:shadow-lg",
+            "group toast group-[.toaster]:bg-ods-card group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-ods-text-secondary",
           actionButton:
-            "group-[.toast]:bg-ods-accent group-[.toast]:text-ods-text-inverted",
+            "group-[.toast]:bg-ods-accent group-[.toast]:text-ods-text-on-accent",
           cancelButton:
-            "group-[.toast]:bg-ods-background-tertiary group-[.toast]:text-ods-text-secondary",
-          error: "group-[.toaster]:bg-red-950 group-[.toaster]:text-red-50 group-[.toaster]:border-red-900",
-          success: "group-[.toaster]:bg-green-950 group-[.toaster]:text-green-50 group-[.toaster]:border-green-900",
+            "group-[.toast]:bg-ods-bg-surface group-[.toast]:text-ods-text-secondary",
+          error: "group-[.toaster]:bg-ods-error-secondary group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-error",
+          success: "group-[.toaster]:bg-ods-success-secondary group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-success",
         },
       }}
       {...props}

package/src/components/steps.tsx

@@ -65,7 +65,7 @@ const Step = React.forwardRef<HTMLDivElement, StepProps>(
               <polyline points="20 6 9 17 4 12" />
             </svg>
           ) : (
-            <span className={cn("text-sm font-medium", isActive ? "text-primary" : "text-muted-foreground")}>
+            <span className={cn("text-h6", isActive ? "text-primary" : "text-muted-foreground")}>
               {stepNumber}
             </span>
           )}
@@ -75,7 +75,7 @@ const Step = React.forwardRef<HTMLDivElement, StepProps>(
         <div className="flex flex-col gap-0.5">
           <h3
             className={cn(
-              "text-base font-medium",
+              "text-h6",
               isActive ? "text-foreground" : "text-muted-foreground",
               isCompleted && "text-primary",
             )}
@@ -83,7 +83,7 @@ const Step = React.forwardRef<HTMLDivElement, StepProps>(
             {title}
           </h3>
           {description && (
-            <p className={cn("text-sm", isActive ? "text-muted-foreground" : "text-muted-foreground/60")}>
+            <p className={cn("text-h6", isActive ? "text-muted-foreground" : "text-muted-foreground/60")}>
               {description}
             </p>
           )}

package/src/components/tickets/help-center-create-form.tsx

@@ -195,7 +195,7 @@ export function HelpCenterCreateForm({
       {subjectError && (
         <span
           id="help-center-subject-error"
-          className="text-ods-error text-xs font-['DM_Sans'] mt-1"
+          className="text-ods-error text-h6 mt-1"
         >
           {subjectError}
         </span>

package/src/components/tickets/help-center-list.tsx

@@ -319,7 +319,7 @@ function HelpCenterListAuthed({
     <div className="w-full flex flex-col gap-[40px]">
       {error && (
         <div className="bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full flex flex-col items-center gap-3">
-          <p className="text-ods-error text-base">
+          <p className="text-ods-error text-h6">
             Couldn&rsquo;t load your tickets. {error.message}
           </p>
           <Button type="button" variant="accent" onClick={() => refetch()}>

package/src/components/tickets/ticket-center.tsx

@@ -134,10 +134,10 @@ function TicketCenterAuthed({
 
       <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between gap-3">
-          <p className="text-xs font-medium text-ods-text-secondary uppercase tracking-wider">
+          <p className="text-h5 text-ods-text-secondary">
             Your Current Tickets
           </p>
-          <div className="flex items-center gap-3 text-xs text-ods-text-secondary">
+          <div className="flex items-center gap-3 text-h6 text-ods-text-secondary">
             {lastUpdatedAt && (
               <span>Updated {formatRelativeTime(new Date(lastUpdatedAt))}</span>
             )}

package/src/components/tickets/ticket-detail-drawer.tsx

@@ -112,7 +112,7 @@ export function TicketDetailDrawer({
       )}
 
       <div>
-        <p className="text-xs font-medium text-ods-text-secondary mb-2 uppercase tracking-wider">
+        <p className="text-h5 text-ods-text-secondary mb-2">
           Conversation
         </p>
         <TicketTimelinePanel ticket={ticket} />
@@ -580,7 +580,7 @@ function ReplyFailureBanner({
     <div
       role="status"
       aria-live="polite"
-      className="mb-3 flex items-start gap-3 rounded-md border border-ods-attention-red-error bg-ods-attention-red-error-secondary px-3 py-2 text-sm text-ods-attention-red-error"
+      className="mb-3 flex items-start gap-3 rounded-md border border-ods-error bg-ods-error-secondary px-3 py-2 text-h6 text-ods-error"
     >
       <span className="font-medium leading-snug">{error.message}</span>
       <Button
@@ -588,7 +588,7 @@ function ReplyFailureBanner({
         variant="transparent"
         onClick={onDismiss}
         aria-label="Dismiss reply failure"
-        className="ml-auto px-2 py-0.5 text-xs font-medium uppercase tracking-wider text-ods-attention-red-error hover:bg-ods-attention-red-error-secondary border-transparent"
+        className="ml-auto px-2 py-0.5 text-h6 uppercase text-ods-error hover:bg-ods-error-secondary border-transparent"
       >
         Dismiss
       </Button>
@@ -625,8 +625,8 @@ function AssignedAgentRow({
   const displayLabel =
     trimmedName ?? (emailFallback ? emailFallback.split('@')[0] : null)
   return (
-    <div className="flex items-center gap-2 text-xs">
-      <span className="text-ods-text-secondary uppercase tracking-wider font-medium">
+    <div className="flex items-center gap-2 text-h6">
+      <span className="text-h5 text-ods-text-secondary">
         Assigned to
       </span>
       {displayLabel ? (

package/src/components/tickets/ticket-open-form.tsx

@@ -83,15 +83,15 @@ export function TicketOpenForm({
     <Card className="p-6">
       <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-6">
         <div className="flex-1 min-w-0 md:max-w-md">
-          <h2 className="text-2xl font-semibold text-ods-text-primary mb-2">
+          <h2 className="text-h2 text-ods-text-primary mb-2">
             Need Support?
           </h2>
-          <p className="text-ods-text-secondary text-sm">
+          <p className="text-ods-text-secondary text-h6">
             Can&apos;t find what you&apos;re looking for? Submit a support ticket
             below — we&apos;ll follow up shortly.
           </p>
           {supportSystemDown && (
-            <p className="mt-4 text-sm text-ods-error">
+            <p className="mt-4 text-h6 text-ods-error">
               Support system temporarily unavailable. Please try again shortly.
             </p>
           )}
@@ -101,7 +101,7 @@ export function TicketOpenForm({
           <div>
             <label
               htmlFor="ticket-subject"
-              className="block text-sm font-medium text-ods-text-primary mb-1"
+              className="block text-h6 text-ods-text-primary mb-1"
             >
               Ticket Subject
             </label>
@@ -119,7 +119,7 @@ export function TicketOpenForm({
           <div>
             <label
               htmlFor="ticket-content"
-              className="block text-sm font-medium text-ods-text-primary mb-1"
+              className="block text-h6 text-ods-text-primary mb-1"
             >
               Your Message
             </label>
@@ -134,7 +134,7 @@ export function TicketOpenForm({
             />
             {showCounter && (
               <p
-                className={`mt-1 text-xs text-right ${
+                className={`mt-1 text-h6 text-right ${
                   overCap ? 'text-ods-error' : 'text-ods-text-secondary'
                 }`}
               >

package/src/components/ui/.title-content-block.md

@@ -35,6 +35,6 @@ The main export — a client-side React component that pairs a title label with
   titleAs="h3"
   contentAs="p"
   spacing="lg"
-  containerClassName="p-4 rounded-lg bg-ods-surface"
+  containerClassName="p-4 rounded-lg bg-ods-bg-surface"
 />
 ```

package/src/components/ui/accordion.tsx

@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-h6 transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className,
       )}
       {...props}
@@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "overflow-hidden text-h6 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className,
     )}
     {...props}

package/src/components/ui/actions-menu.tsx

@@ -171,7 +171,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onItemClick }) => {
 	);
 
 	if (item.type === "separator") {
-		return <div className="bg-ods-system-greys-soft-grey h-1 w-full" />;
+		return <div className="bg-ods-divider h-1 w-full" />;
 	}
 
 	const itemClasses = cn(

package/src/components/ui/alert-dialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-ods-overlay  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -79,7 +79,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn("text-h3", className)}
     {...props}
   />
 ))
@@ -91,7 +91,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-h6 text-muted-foreground", className)}
     {...props}
   />
 ))

package/src/components/ui/alert.tsx

@@ -14,7 +14,7 @@ const alertVariants = cva(
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
         warning:
-          "border-transparent bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)] [&>svg]:text-[var(--ods-attention-yellow-warning)]",
+          "border-transparent bg-ods-warning-secondary text-ods-warning [&>svg]:text-ods-warning",
       },
     },
     defaultVariants: {
@@ -54,7 +54,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    className={cn("text-h6 [&_p]:leading-relaxed", className)}
     {...props}
   />
 ))

package/src/components/ui/allowed-domains-input.tsx

@@ -129,17 +129,17 @@ const AllowedDomainsInput = React.forwardRef<HTMLDivElement, AllowedDomainsInput
           disabled={disabled}
         >
           <PlusCircle className="h-5 w-5 text-ods-text-secondary" />
-          <span className="font-['DM_Sans'] font-bold text-base">Add Domain</span>
+          <span className="text-h6 font-bold">Add Domain</span>
         </button>
 
         {/* Error message */}
         {displayError && (
-          <p className="text-sm text-ods-error">{displayError}</p>
+          <p className="text-h6 text-ods-error">{displayError}</p>
         )}
 
         {/* Helper text */}
         {helperText && !displayError && (
-          <p className="text-sm text-ods-text-secondary">{helperText}</p>
+          <p className="text-h6 text-ods-text-secondary">{helperText}</p>
         )}
       </div>
     )

package/src/components/ui/autocomplete.tsx

@@ -485,7 +485,7 @@ function AutocompleteInner<T = string>(
                   className={cn(
                     "flex items-center h-8 px-2",
                     "bg-ods-card border border-ods-border rounded-[6px]",
-                    "font-mono text-[14px] font-medium leading-5 text-ods-text-secondary uppercase tracking-[-0.28px]",
+                    "text-h5 text-ods-text-secondary",
                     "hover:bg-ods-bg-hover transition-colors cursor-pointer"
                   )}
                 >
@@ -569,7 +569,7 @@ function AutocompleteInner<T = string>(
           <ScrollAreaPrimitive.Viewport className="max-h-[240px] w-full [&>div]:!block">
             <div role="listbox">
               {loading ? (
-                <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
+                <div className="px-3 py-2 text-ods-text-secondary text-h6">
                   {loadingText}
                 </div>
               ) : filteredOptions.length === 0 ? (
@@ -593,7 +593,7 @@ function AutocompleteInner<T = string>(
                     </div>
                   )
                 ) : (
-                  <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
+                  <div className="px-3 py-2 text-ods-text-secondary text-h6">
                     {freeSolo && inputValue.trim() ? (
                       <span>Press Enter to add &quot;{inputValue}&quot;</span>
                     ) : (

package/src/components/ui/badge.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../utils/cn"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-h6 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -14,7 +14,7 @@ const badgeVariants = cva(
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
-        success: "border-transparent bg-green-500 text-white hover:bg-green-600", // Add this line
+        success: "border-transparent bg-ods-success text-ods-text-on-accent hover:bg-ods-success-hover",
       },
     },
     defaultVariants: {

package/src/components/ui/brand-association-card.tsx

@@ -42,12 +42,12 @@ export function BrandAssociationCard({
         </div>
 
         {/* Title */}
-        <h3 className="text-h2 tracking-[-0.64px] text-ods-text-primary">
+        <h3 className="text-h2 text-ods-text-primary">
           {item.title}
         </h3>
 
         {/* Description */}
-        <p className="font-['DM_Sans'] font-normal text-[16px] leading-[1.5] text-ods-text-secondary">
+        <p className="text-h6 text-ods-text-secondary">
           {item.description}
         </p>