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

package/src/components/chat/entity-cards/admin-content-card.tsx

@@ -97,27 +97,27 @@ export function AdminContentCard({
             />
           </>
         ) : (
-          <div className="absolute inset-0 bg-ods-background" />
+          <div className="absolute inset-0 bg-ods-bg" />
         )}
       </div>
 
       {/* Content */}
       <div className="flex flex-1 flex-col gap-3 p-5">
         {/* Title */}
-        <h3 className="font-['DM_Sans'] font-bold text-ods-text-primary text-[18px] leading-snug line-clamp-2 break-words">
+        <h3 className="text-h3 text-ods-text-primary line-clamp-2 break-words">
           {title}
         </h3>
 
         {/* Subtitle (optional) */}
         {subtitle && (
-          <p className="font-['DM_Sans'] text-[14px] text-ods-text-secondary truncate">
+          <p className="text-h6 text-ods-text-secondary truncate">
             {subtitle}
           </p>
         )}
 
         {/* Summary */}
         {summary && (
-          <p className="font-['DM_Sans'] text-[14px] leading-relaxed text-ods-text-secondary line-clamp-2">
+          <p className="text-h6 text-ods-text-secondary line-clamp-2">
             {summary}
           </p>
         )}
@@ -138,7 +138,7 @@ export function AdminContentCard({
 
         {/* Meta row */}
         {meta && (
-          <div className="flex items-center gap-3 text-[12px] font-['DM_Sans'] text-ods-text-secondary">
+          <div className="flex items-center gap-3 text-h6 text-ods-text-secondary">
             {meta}
           </div>
         )}

package/src/components/chat/entity-cards/blog-card.tsx

@@ -161,7 +161,7 @@ export function BlogCard({
         </span>
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={cn(COMPACT_CARD_TITLE_ROW, 'gap-1.5')}>
-            <span className={cn(COMPACT_CARD_TITLE, "font-['DM_Sans']")}>
+            <span className={cn(COMPACT_CARD_TITLE, 'font-body')}>
               {post.title}
             </span>
             {hasEmbeddedVideo ? (
@@ -257,9 +257,7 @@ export function BlogCard({
           <div className="mb-3 flex items-center min-h-[50.4px] md:min-h-[56px] lg:min-h-[61.6px]">
             <h3
               className={cn(
-                "font-['DM_Sans'] font-bold text-ods-text-primary",
-                'text-lg md:text-xl lg:text-[22px]',
-                'leading-[1.4] tracking-[-0.02em]',
+                'text-h3 text-ods-text-primary',
                 'line-clamp-2',
                 'transition-colors duration-300 ease-out',
                 'group-hover:text-ods-accent',
@@ -272,16 +270,15 @@ export function BlogCard({
           <div className="mb-3 flex items-center min-h-[42px] md:min-h-[45px] lg:min-h-[48px]">
             <p
               className={cn(
-                "font-['DM_Sans'] font-medium text-ods-text-primary",
-                'text-sm md:text-[15px] lg:text-base',
-                'leading-[1.5] line-clamp-2',
+                'text-h6 text-ods-text-primary',
+                'line-clamp-2',
               )}
             >
               {post.summary || ''}
             </p>
           </div>
 
-          <div className="mt-auto flex items-center justify-between gap-2 text-sm text-ods-text-secondary">
+          <div className="mt-auto flex items-center justify-between gap-2 text-h6 text-ods-text-secondary">
             <div className="flex items-center gap-2 min-w-0">
               {post.author_avatar ? (
                 <Image

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -205,14 +205,14 @@ export function CaseStudyCard({
                 <Image
                   src={study.user.avatar_url}
                   alt={study.user?.full_name || 'User'}
-                  className="w-12 h-12 rounded-full object-cover bg-ods-background border border-ods-border"
+                  className="w-12 h-12 rounded-full object-cover bg-ods-bg border border-ods-border"
                   width={48}
                   height={48}
                   unoptimized
                 />
               ) : (
-                <div className="w-12 h-12 rounded-full bg-ods-background border border-ods-border flex items-center justify-center">
-                  <span className="text-ods-text-secondary font-medium text-xl">
+                <div className="w-12 h-12 rounded-full bg-ods-bg border border-ods-border flex items-center justify-center">
+                  <span className="text-ods-text-secondary text-h4">
                     {(study.user?.full_name || 'A').charAt(0).toUpperCase()}
                   </span>
                 </div>
@@ -231,11 +231,11 @@ export function CaseStudyCard({
               )}
             </div>
             <div className="min-w-0 flex-1">
-              <p className="font-['DM_Sans'] text-[16px] leading-[1.3] text-ods-text-primary truncate">
+              <p className="text-h6 text-ods-text-primary truncate">
                 {study.user?.full_name || 'Anonymous'}
                 {study.msp?.name && <span className="text-ods-text-secondary"> • {study.msp.name}</span>}
               </p>
-              <p className="font-['DM_Sans'] text-[14px] leading-none text-ods-text-secondary truncate">
+              <p className="text-h6 text-ods-text-secondary truncate">
                 {study.user?.job_title || ' '}
               </p>
             </div>

package/src/components/chat/entity-cards/chat-ticket-item.tsx

@@ -129,7 +129,7 @@ const ChatTicketItem = React.forwardRef<HTMLButtonElement, ChatTicketItemProps>(
           <Tag
             label={ticket.linkedTaskLabel}
             variant="outline"
-            icon={<WrenchIcon size={14} color="var(--ods-text-secondary)" />}
+            icon={<WrenchIcon size={14} color="var(--color-text-secondary)" />}
             className="shrink-0 hidden sm:inline-flex"
           />
         )}

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -129,7 +129,7 @@ export function CustomerInterviewCard({
           ) : null}
           {interview.main_video_url ? (
             <span className="absolute inset-0 flex items-center justify-center bg-black/30">
-              <Video className="h-4 w-4 text-white" />
+              <Video className="h-4 w-4 text-ods-text-on-dark" />
             </span>
           ) : null}
         </span>
@@ -193,7 +193,7 @@ export function CustomerInterviewCard({
               {interview.main_video_url && (
                 <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
                   <div className="w-16 h-16 rounded-full bg-ods-accent/90 flex items-center justify-center">
-                    <Video className="w-8 h-8 text-black" />
+                    <Video className="w-8 h-8 text-ods-text-on-accent" />
                   </div>
                 </div>
               )}
@@ -206,14 +206,14 @@ export function CustomerInterviewCard({
         </div>
 
         <div className="shrink-0">
-          <h3 className="font-['DM_Sans'] font-semibold text-[20px] leading-[28px] text-ods-text-primary line-clamp-2 break-words">
+          <h3 className="text-h3 text-ods-text-primary line-clamp-2 break-words">
             {interview.title}
           </h3>
         </div>
 
         {interview.video_summary && (
           <div className="shrink-0">
-            <p className="font-['DM_Sans'] text-[14px] leading-[20px] text-ods-text-secondary line-clamp-3">
+            <p className="text-h6 text-ods-text-secondary line-clamp-3">
               {interview.video_summary}
             </p>
           </div>
@@ -226,11 +226,11 @@ export function CustomerInterviewCard({
                 <img
                   src={interview.user.avatar_url}
                   alt={interview.user?.full_name || 'Customer'}
-                  className="w-12 h-12 rounded-full object-cover bg-ods-background border border-ods-border"
+                  className="w-12 h-12 rounded-full object-cover bg-ods-bg border border-ods-border"
                 />
               ) : (
-                <div className="w-12 h-12 rounded-full bg-ods-background border border-ods-border flex items-center justify-center">
-                  <span className="text-ods-text-secondary font-medium text-xl">
+                <div className="w-12 h-12 rounded-full bg-ods-bg border border-ods-border flex items-center justify-center">
+                  <span className="text-ods-text-secondary text-h4">
                     {(interview.user?.full_name || 'A').charAt(0).toUpperCase()}
                   </span>
                 </div>
@@ -246,11 +246,11 @@ export function CustomerInterviewCard({
               )}
             </div>
             <div className="min-w-0 flex-1">
-              <p className="font-['DM_Sans'] text-[16px] leading-[1.3] text-ods-text-primary truncate">
+              <p className="text-h6 text-ods-text-primary truncate">
                 {interview.user?.full_name || 'Anonymous'}
                 {interview.msp?.name && <span className="text-ods-text-secondary"> • {interview.msp.name}</span>}
               </p>
-              <p className="font-['DM_Sans'] text-[14px] leading-none text-ods-text-secondary truncate">
+              <p className="text-h6 text-ods-text-secondary truncate">
                 {interview.user?.job_title || ' '}
               </p>
             </div>

package/src/components/chat/entity-cards/data-room-doc-card.tsx

@@ -64,14 +64,14 @@ export function DataRoomDocCard({ item, className, badgeText, anchorProps }: Dat
           <StatusBadge text={badgeText} variant="button" colorScheme="cyan" className="shrink-0" />
         </span>
         {item.path ? (
-          <span className="flex min-w-0 items-center gap-1 text-[11px] leading-4 text-ods-text-secondary">
+          <span className="flex min-w-0 items-center gap-1 text-h6 text-ods-text-secondary">
             <span className="shrink-0 text-ods-text-secondary/70">Path:</span>
             <span className="min-w-0 truncate font-mono">{item.path}</span>
           </span>
         ) : null}
         {item.preview ? (
           <span className="flex min-w-0">
-            <span className="line-clamp-2 whitespace-pre-wrap break-words text-[13px] leading-5 text-ods-text-secondary">
+            <span className="line-clamp-2 whitespace-pre-wrap break-words text-h6 text-ods-text-secondary">
               {item.preview}
             </span>
           </span>

package/src/components/chat/entity-cards/dispatch.tsx

@@ -523,7 +523,7 @@ function ChatCardWithDiscuss({
         {!onDiscuss && !useDisplay ? <span /> : null}
         {idDisplay ? (
           <span
-            className="inline-flex items-center gap-1 text-[10px] leading-3 font-mono shrink-0 text-ods-text-secondary opacity-60 hover:opacity-100 hover:text-ods-text-primary transition-opacity"
+            className="inline-flex items-center gap-1 text-code shrink-0 text-ods-text-secondary opacity-60 hover:opacity-100 hover:text-ods-text-primary transition-opacity"
             title={`${sourceLabel} · ${chatRef.id}`}
           >
             <SourceIcon className="h-3 w-3 shrink-0" />

package/src/components/chat/entity-cards/entity-author-card.tsx

@@ -91,7 +91,7 @@ export function EntityMetadataValueCell({
         <p className="text-h4 text-ods-text-primary">
           {uppercase ? value.toLocaleUpperCase() : 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">
           {label}
         </p>
       </div>
@@ -131,7 +131,7 @@ export function EntityMetadataAuthorCell({
       <div className="flex flex-col gap-0 flex-1 min-w-0">
         {/* title = full-name tooltip on truncation (carried over from the
             release page's cell when it adopted this shared one). */}
-        <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate" title={fullName}>
+        <p className="text-h3 text-ods-text-primary truncate" title={fullName}>
           {authorHref && trimmedName ? (
             <Link href={authorHref} className="hover:text-ods-accent transition-colors">
               {fullName}
@@ -140,7 +140,7 @@ export function EntityMetadataAuthorCell({
             fullName
           )}
         </p>
-        <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+        <p className="text-h6 text-ods-text-secondary">
           {author.job_title || roleLabel}
         </p>
       </div>

package/src/components/chat/entity-cards/entity-portrait-card.tsx

@@ -102,7 +102,7 @@ export function EntityPortraitCard({
 
   // Edge-sampled slot fill for non-wide covers — the SAME hook/fallback the
   // media/news cards use (og-link-preview.tsx).
-  const edgeColor = useImageEdgeColor(isWide === false ? src : null, 'var(--ods-bg-secondary)')
+  const edgeColor = useImageEdgeColor(isWide === false ? src : null, 'var(--color-bg-surface)')
 
   return (
     <a href={href} target={target} rel={rel} className={cn('block h-full', className)} aria-label={`Open ${title}`}>
@@ -168,7 +168,7 @@ export function EntityPortraitCard({
                   />
                 ) : (
                   <div className="w-12 h-12 rounded-full bg-ods-bg border border-ods-border flex items-center justify-center">
-                    <span className="text-ods-text-secondary font-medium text-xl">
+                    <span className="text-ods-text-secondary text-h4">
                       {person.name.charAt(0).toUpperCase()}
                     </span>
                   </div>
@@ -187,9 +187,9 @@ export function EntityPortraitCard({
                 )}
               </div>
               <div className="flex flex-col min-w-0">
-                <span className="font-['DM_Sans'] font-bold text-ods-text-primary truncate">{person.name}</span>
+                <span className="text-h6 font-bold text-ods-text-primary truncate">{person.name}</span>
                 {person.subtitle && (
-                  <span className="font-['DM_Sans'] text-sm text-ods-text-secondary truncate">{person.subtitle}</span>
+                  <span className="text-h6 text-ods-text-secondary truncate">{person.subtitle}</span>
                 )}
               </div>
             </div>

package/src/components/chat/entity-cards/generic-entity-card.tsx

@@ -67,19 +67,19 @@ export function GenericEntityCard({ item, className, anchorProps }: GenericEntit
           ) : null}
         </span>
         {item.subtitle ? (
-          <span className="flex min-w-0 items-center gap-1 text-[11px] leading-4 text-ods-text-secondary">
+          <span className="flex min-w-0 items-center gap-1 text-h6 text-ods-text-secondary">
             <span className="min-w-0 truncate font-mono">{item.subtitle}</span>
           </span>
         ) : null}
         {item.preview ? (
           <span className="flex min-w-0">
-            <span className="line-clamp-2 whitespace-pre-wrap break-words text-[13px] leading-5 text-ods-text-secondary">
+            <span className="line-clamp-2 whitespace-pre-wrap break-words text-h6 text-ods-text-secondary">
               {item.preview}
             </span>
           </span>
         ) : null}
         {item.facts && item.facts.length > 0 ? (
-          <span className="flex flex-wrap items-center gap-x-3 gap-y-0.5 min-w-0 text-[11px] leading-4">
+          <span className="flex flex-wrap items-center gap-x-3 gap-y-0.5 min-w-0 text-h6">
             {item.facts.map((f, i) => (
               <span key={i} className="inline-flex items-center gap-1 min-w-0 truncate">
                 <span className="text-ods-text-secondary/70 shrink-0">{f.label}:</span>

package/src/components/chat/entity-cards/github-activity-card.tsx

@@ -130,23 +130,23 @@ export function parseGithubTitle(title: string, kind: GitHubActivityKind): { dis
 const REVIEW_STATE_STYLE: Record<PrReviewState, { label: string; className: string }> = {
   APPROVED: {
     label: 'Approved',
-    className: 'bg-[var(--ods-attention-green-success-secondary)] text-[var(--ods-attention-green-success)]',
+    className: 'bg-ods-success-secondary text-ods-success',
   },
   CHANGES_REQUESTED: {
     label: 'Changes',
-    className: 'bg-[var(--ods-attention-red-error-secondary)] text-[var(--ods-attention-red-error)]',
+    className: 'bg-ods-error-secondary text-ods-error',
   },
   COMMENTED: {
     label: 'Comment',
-    className: 'bg-ods-bg-secondary text-ods-text-primary',
+    className: 'bg-ods-bg-surface text-ods-text-primary',
   },
   DISMISSED: {
     label: 'Dismissed',
-    className: 'bg-ods-bg-secondary text-ods-text-secondary',
+    className: 'bg-ods-bg-surface text-ods-text-secondary',
   },
   PENDING: {
     label: 'Pending',
-    className: 'bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)]',
+    className: 'bg-ods-warning-secondary text-ods-warning',
   },
 }
 
@@ -160,7 +160,7 @@ function ReviewStateBadge({ state, className = '' }: { state: PrReviewState; cla
   const { label, className: paint } = REVIEW_STATE_STYLE[state] ?? REVIEW_STATE_STYLE.COMMENTED
   return (
     <span
-      className={`inline-flex items-center rounded px-1.5 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wide shrink-0 ${paint} ${className}`}
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-h5 shrink-0 ${paint} ${className}`}
     >
       {label}
     </span>
@@ -198,17 +198,17 @@ export function GitHubActivityCard({ item, variant = 'compact', className, ancho
       <div className={`flex items-center gap-3 min-w-0 ${className ?? ''}`}>
         <span className="flex items-center gap-2 w-28 shrink-0">
           {kindIcon(kind, 'h-3.5 w-3.5')}
-          <code className="text-ods-text-secondary font-mono text-xs truncate">{idLabel}</code>
+          <code className="text-ods-text-secondary text-code truncate">{idLabel}</code>
         </span>
-        <span className="flex items-center gap-2 text-ods-text-primary text-sm flex-1 min-w-0">
+        <span className="flex items-center gap-2 text-ods-text-primary text-h6 flex-1 min-w-0">
           {reviewState ? <ReviewStateBadge state={reviewState} /> : null}
           <span className="truncate">{primaryText}</span>
         </span>
         {repo ? (
-          <span className="font-mono text-[11px] text-ods-text-secondary truncate max-w-[240px] shrink-0">{repo}</span>
+          <span className="text-code text-ods-text-secondary truncate max-w-[240px] shrink-0">{repo}</span>
         ) : null}
         {dateText ? (
-          <span className="text-ods-text-secondary text-xs w-24 shrink-0 text-right">{dateText}</span>
+          <span className="text-ods-text-secondary text-h6 w-24 shrink-0 text-right">{dateText}</span>
         ) : null}
       </div>
     )
@@ -216,7 +216,7 @@ export function GitHubActivityCard({ item, variant = 'compact', className, ancho
 
   const metaParts: React.ReactNode[] = []
   metaParts.push(
-    <span key="kind" className="font-medium uppercase tracking-wide text-[10px]">{kindLabel(kind)}</span>,
+    <span key="kind" className="text-h6 uppercase">{kindLabel(kind)}</span>,
   )
   if (idLabel) metaParts.push(<code key="id" className="font-mono">{idLabel}</code>)
   if (repo) metaParts.push(<span key="repo" className="font-mono truncate">{repo}</span>)

package/src/components/chat/entity-cards/hubspot-ticket-card.tsx

@@ -70,15 +70,15 @@ export function HubspotTicketCard({ item, variant = 'compact', className, anchor
   if (variant === 'row') {
     return (
       <div className={`flex items-center gap-3 min-w-0 ${className ?? ''}`}>
-        <span className="text-ods-text-primary text-sm font-medium truncate max-w-[260px] shrink-0">{item.title}</span>
+        <span className="text-ods-text-primary text-h6 truncate max-w-[260px] shrink-0">{item.title}</span>
         {item.preview ? (
-          <span className="text-ods-text-secondary text-sm flex-1 min-w-0 truncate">{item.preview}</span>
+          <span className="text-ods-text-secondary text-h6 flex-1 min-w-0 truncate">{item.preview}</span>
         ) : null}
         {statusText ? (
           <StatusBadge text={statusText} variant="button" colorScheme={statusScheme(item.status)} />
         ) : null}
         {dateText ? (
-          <span className="text-ods-text-secondary text-xs w-24 shrink-0 text-right">{dateText}</span>
+          <span className="text-ods-text-secondary text-h6 w-24 shrink-0 text-right">{dateText}</span>
         ) : null}
       </div>
     )
@@ -116,13 +116,13 @@ export function HubspotTicketCard({ item, variant = 'compact', className, anchor
           ) : null}
         </span>
         {item.customerEmail ? (
-          <span className="flex min-w-0 items-center gap-1 text-[11px] leading-4 text-ods-text-secondary">
+          <span className="flex min-w-0 items-center gap-1 text-h6 text-ods-text-secondary">
             <span className="shrink-0 text-ods-text-secondary/70">From:</span>
             <span className="min-w-0 truncate">{item.customerEmail}</span>
           </span>
         ) : null}
         <span className="flex min-w-0">
-          <span className="line-clamp-4 whitespace-pre-wrap break-words text-[13px] leading-5 text-ods-text-secondary">
+          <span className="line-clamp-4 whitespace-pre-wrap break-words text-h6 text-ods-text-secondary">
             {item.preview || <span className="italic text-ods-text-secondary/60">No description provided.</span>}
           </span>
         </span>

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -129,7 +129,7 @@ export function InvestorUpdateCard({
               {update.title || `Update #${update.update_number ?? '?'}`}
             </span>
             {update.update_number ? (
-              <span className="shrink-0 rounded bg-ods-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-ods-accent">
+              <span className="shrink-0 rounded bg-ods-accent/10 px-1.5 py-0.5 text-h6 text-ods-accent">
                 #{update.update_number}
               </span>
             ) : null}

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -83,7 +83,7 @@ function stripMarkdownPreview(text: string): string {
 const HORIZONTAL_SIZE_TOKENS = {
   default: {
     padding: 'p-4',
-    step: 'w-8 h-8 text-sm',
+    step: 'w-8 h-8 text-h6',
     title: 'text-h5',
     summaryClamp: 'line-clamp-2',
   },
@@ -92,7 +92,7 @@ const HORIZONTAL_SIZE_TOKENS = {
 export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'catalog' | 'default' | 'sm' }) {
   if (size === 'catalog') {
     return (
-      <div className="bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden flex flex-col p-6 gap-4 animate-pulse">
+      <div className="bg-ods-card border border-ods-border rounded-lg overflow-hidden flex flex-col p-6 gap-4 animate-pulse">
         <div className="flex flex-col md:flex-row gap-4 md:gap-6">
           <div className="w-full md:w-[256px] aspect-[1200/630] bg-ods-border rounded-lg flex-shrink-0" />
           <div className="flex-1 min-w-0 flex flex-col">
@@ -235,7 +235,7 @@ export function OnboardingGuideCard({
         rel={rel}
         prefetch={false}
         className={cn(
-          'group block no-underline bg-ods-system-greys-black',
+          'group block no-underline bg-ods-card',
           'border border-ods-border rounded-lg overflow-hidden',
           'transition-all duration-300 ease-out',
           'transform hover:translate-y-[-2px]',
@@ -266,11 +266,11 @@ export function OnboardingGuideCard({
                 )}
                 {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>
                 )}
                 {durationLabel && (
-                  <span className="absolute bottom-2 right-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs font-medium font-mono">
+                  <span className="absolute bottom-2 right-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-ods-text-on-dark text-code">
                     <Clock className="w-3 h-3" />
                     {durationLabel}
                   </span>
@@ -280,12 +280,12 @@ export function OnboardingGuideCard({
 
             <div className="flex-1 min-w-0 flex flex-col">
               <div className="min-h-[60px] md:min-h-[72px] flex items-start mb-3">
-                <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2">
+                <h3 className="text-h2 text-ods-text-primary line-clamp-2">
                   {guide.title}
                 </h3>
               </div>
               <div className="min-h-[46px] md:min-h-[52px]">
-                <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-2">
+                <p className="text-h6 text-ods-text-secondary line-clamp-2">
                   {stripMarkdownPreview(guide.video_summary || guide.content || '')}
                 </p>
               </div>
@@ -339,18 +339,18 @@ export function OnboardingGuideCard({
           )}
           {hasVideoCover && compactCover && (
             <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>
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className={cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']")}>
+            <span className={cn(COMPACT_CARD_TITLE, 'font-heading')}>
               {guide.title}
             </span>
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="truncate text-[11px] leading-4 text-[var(--color-accent-primary)]">
+            <span className="truncate text-h6 text-ods-accent">
               {subtitleParts.join(' · ')}
             </span>
           </span>
@@ -390,12 +390,12 @@ export function OnboardingGuideCard({
       </span>
       <span className="flex flex-col gap-0.5 flex-1 min-w-0">
         <span className={`block ${t.title} text-ods-text-primary truncate`}>{guide.title}</span>
-        <span className="inline-flex items-center gap-1 font-['DM_Sans'] text-[12px] leading-[16px] text-ods-text-secondary">
+        <span className="inline-flex items-center gap-1 text-h6 text-ods-text-secondary">
           <GraduationCap className="h-3 w-3 shrink-0" />
           <span className="truncate">{guide.section}</span>
         </span>
         {summary && (
-          <span className={`font-['DM_Sans'] text-[14px] leading-[20px] text-ods-text-secondary ${t.summaryClamp}`}>
+          <span className={`text-h6 text-ods-text-secondary ${t.summaryClamp}`}>
             {summary}
           </span>
         )}

package/src/components/chat/entity-cards/program-card.tsx

@@ -329,18 +329,18 @@ export function ProgramCard<T extends BaseProgramItem>({
           )}
           {config.type === 'podcast' && !isScheduled && compactCover && (
             <span className="absolute inset-0 flex items-center justify-center bg-black/30">
-              <Play className="w-4 h-4 text-white" fill="white" />
+              <Play className="w-4 h-4 text-ods-text-on-dark" fill="white" />
             </span>
           )}
         </span>
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className={cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']")}>
+            <span className={cn(COMPACT_CARD_TITLE, 'font-heading')}>
               {item.title}
             </span>
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="truncate text-[11px] leading-4 text-[var(--color-accent-primary)]">
+            <span className="truncate text-h6 text-ods-accent">
               {subtitleParts.join(' · ')}
             </span>
           </span>
@@ -365,7 +365,7 @@ export function ProgramCard<T extends BaseProgramItem>({
       return (
         <>
           <Clock className="w-4 h-4 text-ods-text-secondary" />
-          <span className="font-['DM_Sans'] text-ods-text-secondary">
+          <span className="font-body text-ods-text-secondary">
             {formatDurationCompact((item as any).duration_seconds)}
           </span>
         </>
@@ -373,7 +373,7 @@ export function ProgramCard<T extends BaseProgramItem>({
     }
     if (config.type === 'event' && 'location_name' in item) {
       return (
-        <span className="font-['DM_Sans'] text-ods-text-secondary">
+        <span className="font-body text-ods-text-secondary">
           {(item as any).location_name || 'Location TBD'}
         </span>
       )
@@ -384,12 +384,12 @@ export function ProgramCard<T extends BaseProgramItem>({
       return (
         <>
           <Video className="w-4 h-4 text-ods-text-secondary" />
-          <span className="font-['DM_Sans'] text-ods-text-secondary">
+          <span className="font-body text-ods-text-secondary">
             {formatTimeWithTimezone(webinarItem.start_at, webinarItem.timezone ?? null)}
             {duration && ` · ${duration}`}
           </span>
           {webinarItem.timezone && (
-            <span className="font-['DM_Sans'] text-xs text-ods-text-secondary">
+            <span className="text-h6 text-ods-text-secondary">
               ({webinarItem.timezone})
             </span>
           )}
@@ -415,7 +415,7 @@ export function ProgramCard<T extends BaseProgramItem>({
               />
               {config.type === 'podcast' && !isScheduled && (
                 <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
-                  <Play className="w-10 h-10 text-white" fill="white" />
+                  <Play className="w-10 h-10 text-ods-text-on-dark" fill="white" />
                 </div>
               )}
             </div>
@@ -423,12 +423,12 @@ export function ProgramCard<T extends BaseProgramItem>({
         )}
 
         <div className="flex-1 min-w-0 flex flex-col">
-          <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight mb-3 min-h-[3rem] md:min-h-[3.5rem] line-clamp-2 flex items-center">
+          <h3 className="text-h2 text-ods-text-primary mb-3 min-h-[3rem] md:min-h-[3.5rem] line-clamp-2 flex items-center">
             {item.title}
           </h3>
 
           <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 mb-4">
-            <span className="font-['DM_Sans'] font-medium" style={{ color: accentColor }}>
+            <span className="text-h6" style={{ color: accentColor }}>
               {dateFormat}
             </span>
             {renderMeta ? (
@@ -447,7 +447,7 @@ export function ProgramCard<T extends BaseProgramItem>({
           </div>
 
           <div className="flex-1">
-            <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-3 min-h-[4.5rem]">
+            <p className="text-h6 text-ods-text-secondary line-clamp-3 min-h-[4.5rem]">
               {item.description}
             </p>
           </div>
@@ -494,7 +494,7 @@ export function ProgramCard<T extends BaseProgramItem>({
         <div className="p-6 pt-0 mt-auto">
           <div className="pt-4 border-t border-ods-border">
             <span
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-md border border-ods-accent text-ods-accent text-sm font-medium font-['DM_Sans']"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-md border border-ods-accent text-ods-accent text-h6"
               aria-hidden="true"
             >
               View {config.labels.singular} Details