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

package/src/components/chat/approval-request-message.tsx

@@ -22,10 +22,7 @@ function ApprovalFieldList({ fields }: { fields: ApprovalRequestField[] }) {
     <dl className="flex flex-col gap-2.5 mt-[var(--spacing-system-xxs)]">
       {fields.map((f, i) => (
         <div key={i} className="flex flex-col gap-0.5">
-          {/* NOTE: 11px DM Sans small-caps label has no ODS composite token
-              (h5 is Azeret Mono, h6 is 14px) — flagged for a future caption
-              token; kept as-is rather than forcing a mismatched h-class. */}
-          <dt className="font-['DM_Sans'] font-semibold text-[11px] uppercase tracking-wide text-ods-text-tertiary leading-4">
+          <dt className="text-h6 font-semibold uppercase text-ods-text-tertiary">
             {f.label}
           </dt>
           <dd className="text-h6 text-ods-text-primary whitespace-pre-wrap break-words">
@@ -55,7 +52,7 @@ function ApprovalCardBody({
   return (
     <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
       <div className="bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] flex gap-[var(--spacing-system-xsf)] items-start max-h-32 overflow-y-auto">
-        <code className="text-h6 text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
+        <code className="text-code text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
           {data.command}
         </code>
         {data.icon && (

package/src/components/chat/chat-attachment-bar.tsx

@@ -288,18 +288,18 @@ function AttachmentChip({ attachment, onRemove, disabled, size = 'default' }: At
 
       {/* Filename + status */}
       <div className="min-w-0 flex-1">
-        <div className={cn('truncate text-ods-text-primary', compact ? 'text-[11px] leading-tight' : 'text-xs')} title={file.name}>
+        <div className="truncate text-ods-text-primary text-h6" title={file.name}>
           {file.name}
         </div>
         {/* Compact mode hides the size/status sub-line for ready files to keep the
             chip to a single line; uploading/error states still surface. */}
         {(!compact || status !== 'ready') && (
-          <div className={cn('text-ods-text-muted', compact ? 'text-[9px] leading-tight' : 'text-[10px]')}>
+          <div className="text-ods-text-muted text-h6">
             {status === 'sniffing' && 'Checking…'}
             {status === 'uploading' && `${progress}% · ${formatFileSize(file.size)}`}
             {status === 'ready' && formatFileSize(file.size)}
             {status === 'error' && (
-              <span className="text-ods-attention-red-error" title={errorMessage}>
+              <span className="text-ods-error" title={errorMessage}>
                 {errorMessage ?? 'Upload failed'}
               </span>
             )}

package/src/components/chat/chat-message-enhanced.tsx

@@ -478,7 +478,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               {name || (isUser ? "User" : assistantType === 'mingo' ? "Mingo" : "Fae")}{!isSystem && ':'}
             </span>
             {timestamp && (
-              <span className="font-sans text-heading-5 font-medium text-ods-text-secondary shrink-0 whitespace-nowrap">
+              <span className="text-h6 text-ods-text-secondary shrink-0 whitespace-nowrap">
                 {formatMessageTimestamp(timestamp)}
               </span>
             )}

package/src/components/chat/chat-message-list.tsx

@@ -569,7 +569,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
             aria-live="polite"
           >
             <DotsLoaderIcon className="w-6 h-6" />
-            <CyclingPhrase words={STREAMING_WORDS} className="text-sm" />
+            <CyclingPhrase words={STREAMING_WORDS} className="text-h6" />
           </div>
         )}
 

package/src/components/chat/chat-message-row.tsx

@@ -75,7 +75,7 @@ export function ChatMessageRow({
           onError={() => setFailedSrc(resolvedAvatar ?? null)}
         />
       ) : (
-        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 flex items-center justify-center bg-ods-bg border border-ods-border text-[12px] font-medium text-ods-text-primary font-body">
+        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 flex items-center justify-center bg-ods-bg border border-ods-border text-h6 text-ods-text-primary">
           {getFirstLastInitials(displayName) || '?'}
         </div>
       )}
@@ -88,7 +88,7 @@ export function ChatMessageRow({
             {displayName}
           </span>
           {timeLabel && (
-            <span className="text-[11px] md:text-[12px] font-medium leading-[1.43] text-ods-text-secondary font-body flex-shrink-0">
+            <span className="text-h6 text-ods-text-secondary flex-shrink-0">
               {timeLabel}
             </span>
           )}
@@ -96,7 +96,7 @@ export function ChatMessageRow({
 
         {/* Body — verbatim Slack: 12/14px, pre-wrap, break-words. */}
         {hasBody && (
-          <div className="text-[12px] md:text-[14px] font-medium leading-[1.43] text-ods-text-primary font-body whitespace-pre-wrap break-words min-w-0 max-w-full">
+          <div className="text-h6 text-ods-text-primary whitespace-pre-wrap break-words min-w-0 max-w-full">
             {body}
           </div>
         )}

package/src/components/chat/chat-quick-action.tsx

@@ -47,7 +47,7 @@ const ChatQuickAction = React.forwardRef<HTMLButtonElement, ChatQuickActionProps
         )}
         {...props}
       >
-        <span className="text-sm font-medium">{text}</span>
+        <span className="text-h6">{text}</span>
         <ChevronRight className="h-4 w-4 text-ods-text-secondary flex-shrink-0" />
       </button>
     )

package/src/components/chat/chat-sidebar-skeleton.tsx

@@ -66,7 +66,7 @@ const ChatSidebarSkeleton = React.forwardRef<HTMLDivElement, ChatSidebarSkeleton
               variant="transparent"
               disabled={true}
               leftIcon={<ChatPlusIcon className="size-6 text-ods-text-secondary" />}
-              className="flex-1 justify-center text-lg font-bold text-ods-text-secondary cursor-not-allowed hover:bg-transparent"
+              className="flex-1 justify-center text-h3 text-ods-text-secondary cursor-not-allowed hover:bg-transparent"
             >
               Start New Chat
             </Button>

package/src/components/chat/chat-sidebar.tsx

@@ -42,7 +42,7 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
         <div className="flex flex-1 flex-col items-start justify-center gap-1 min-w-0">
           <div className="flex items-center w-full min-w-0">
             <h3 className={cn(
-              "text-base font-medium leading-5 min-w-0 flex-1",
+              "text-h6 min-w-0 flex-1",
               isActive ? "text-ods-accent" : "text-ods-text-primary",
               "truncate"
             )} title={dialog.title || 'Untitled Chat'}>
@@ -50,7 +50,7 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
             </h3>
           </div>
           {dialog.timestamp && (
-            <p className="text-sm text-ods-text-secondary truncate w-full min-w-0">
+            <p className="text-h6 text-ods-text-secondary truncate w-full min-w-0">
               {formatTimestamp(dialog.timestamp)}
             </p>
           )}
@@ -60,7 +60,7 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
         <div className="flex-shrink-0 ml-2">
           {dialog.unreadMessagesCount && dialog.unreadMessagesCount > 0 ? (
             <div className="bg-ods-accent flex items-center justify-center p-2 rounded-md size-6">
-              <span className="text-xs font-medium text-ods-text-on-accent">
+              <span className="text-h6 text-ods-text-on-accent">
                 {dialog.unreadMessagesCount > 99 ? '99+' : dialog.unreadMessagesCount}
               </span>
             </div>
@@ -131,7 +131,7 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
             variant="transparent"
             disabled={isLoading || isCreatingDialog}
             leftIcon={<ChatPlusIcon className="size-6 text-ods-text-secondary" />}
-            className="flex-1 justify-center text-lg font-bold text-ods-text-primary hover:bg-ods-bg-hover focus-visible:ring-0"
+            className="flex-1 justify-center text-h3 text-ods-text-primary hover:bg-ods-bg-hover focus-visible:ring-0"
           >
             Start New Chat
           </Button>
@@ -144,10 +144,10 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
             <div className="flex-1 flex flex-col items-center justify-center gap-6 p-6">
               <ChatsIcon className="w-6 h-6 text-ods-text-secondary" />
               <div className="text-center space-y-2">
-                <h3 className="text-lg font-medium text-ods-text-secondary">
+                <h3 className="text-h4 text-ods-text-secondary">
                   No Current Chats
                 </h3>
-                <p className="text-sm font-medium text-ods-text-secondary">
+                <p className="text-h6 text-ods-text-secondary">
                   Previous Mingo sessions will show here
                 </p>
               </div>

package/src/components/chat/chat-typing-indicator.tsx

@@ -37,7 +37,7 @@ const ChatTypingIndicator = React.forwardRef<HTMLDivElement, ChatTypingIndicator
       >
         <style dangerouslySetInnerHTML={{ __html: dotAnimation }} />
         {showText && (
-          <span className="text-ods-text-secondary text-sm">Assistant is typing</span>
+          <span className="text-ods-text-secondary text-h6">Assistant is typing</span>
         )}
         <div className={cn(
           "inline-flex items-center justify-center gap-1",

package/src/components/chat/context-compaction-display.tsx

@@ -23,7 +23,7 @@ const ContextCompactionDisplay = forwardRef<HTMLDivElement, ContextCompactionDis
         )}
         {...props}
       >
-        <span className="text-sm font-medium text-ods-text-secondary flex-1 min-w-0">
+        <span className="text-h6 text-ods-text-secondary flex-1 min-w-0">
           {label}
         </span>
         {isStarted ? (

package/src/components/chat/embeddable-chat.tsx

@@ -778,7 +778,7 @@ function SourceChips({
     if (fallback.length === 0) return null
     return (
       <div className="flex flex-col gap-1.5 mt-2 pt-2 border-t border-ods-border">
-        <span className="text-[11px] text-ods-text-muted uppercase tracking-wider font-medium">
+        <span className="text-h6 text-ods-text-muted uppercase">
           Top retrieved sources
         </span>
         <div className="flex flex-wrap gap-1.5">
@@ -802,7 +802,7 @@ function SourceChips({
 
   return (
     <div className="flex flex-col gap-1.5 mt-2 pt-2 border-t border-ods-border">
-      <span className="text-[11px] text-ods-text-muted uppercase tracking-wider font-medium">
+      <span className="text-h6 text-ods-text-muted uppercase">
         Sources
       </span>
       <div
@@ -832,7 +832,7 @@ function SourceChips({
         {hasOverflow && (
           <button
             onClick={() => setExpanded(!expanded)}
-            className="inline-flex items-center gap-1 px-2 py-0.5 rounded border text-[11px] cursor-pointer transition-colors bg-ods-card border-ods-accent text-ods-accent hover:bg-ods-accent/10"
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded border text-h6 cursor-pointer transition-colors bg-ods-card border-ods-accent text-ods-accent hover:bg-ods-accent/10"
             aria-expanded={expanded}
             aria-label={
               expanded

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}