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

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-h6',
+    step: 'w-8 h-8 text-sm',
     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-card border border-ods-border rounded-lg overflow-hidden flex flex-col p-6 gap-4 animate-pulse">
+      <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="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-card',
+          'group block no-underline bg-ods-system-greys-black',
           '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-ods-text-on-dark" fill="white" />
+                    <Play className="w-10 h-10 text-white" 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-ods-text-on-dark text-code">
+                  <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">
                     <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="text-h2 text-ods-text-primary line-clamp-2">
+                <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2">
                   {guide.title}
                 </h3>
               </div>
               <div className="min-h-[46px] md:min-h-[52px]">
-                <p className="text-h6 text-ods-text-secondary line-clamp-2">
+                <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed 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-ods-text-on-dark" fill="white" />
+              <Play className="h-4 w-4 text-white" fill="white" />
             </span>
           )}
         </span>
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className={cn(COMPACT_CARD_TITLE, 'font-heading')}>
+            <span className={cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']")}>
               {guide.title}
             </span>
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="truncate text-h6 text-ods-accent">
+            <span className="truncate text-[11px] leading-4 text-[var(--color-accent-primary)]">
               {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 text-h6 text-ods-text-secondary">
+        <span className="inline-flex items-center gap-1 font-['DM_Sans'] text-[12px] leading-[16px] text-ods-text-secondary">
           <GraduationCap className="h-3 w-3 shrink-0" />
           <span className="truncate">{guide.section}</span>
         </span>
         {summary && (
-          <span className={`text-h6 text-ods-text-secondary ${t.summaryClamp}`}>
+          <span className={`font-['DM_Sans'] text-[14px] leading-[20px] 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-ods-text-on-dark" fill="white" />
+              <Play className="w-4 h-4 text-white" fill="white" />
             </span>
           )}
         </span>
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className={cn(COMPACT_CARD_TITLE, 'font-heading')}>
+            <span className={cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']")}>
               {item.title}
             </span>
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="truncate text-h6 text-ods-accent">
+            <span className="truncate text-[11px] leading-4 text-[var(--color-accent-primary)]">
               {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-body text-ods-text-secondary">
+          <span className="font-['DM_Sans'] 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-body text-ods-text-secondary">
+        <span className="font-['DM_Sans'] 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-body text-ods-text-secondary">
+          <span className="font-['DM_Sans'] text-ods-text-secondary">
             {formatTimeWithTimezone(webinarItem.start_at, webinarItem.timezone ?? null)}
             {duration && ` · ${duration}`}
           </span>
           {webinarItem.timezone && (
-            <span className="text-h6 text-ods-text-secondary">
+            <span className="font-['DM_Sans'] text-xs 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-ods-text-on-dark" fill="white" />
+                  <Play className="w-10 h-10 text-white" 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="text-h2 text-ods-text-primary mb-3 min-h-[3rem] md:min-h-[3.5rem] line-clamp-2 flex items-center">
+          <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">
             {item.title}
           </h3>
 
           <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 mb-4">
-            <span className="text-h6" style={{ color: accentColor }}>
+            <span className="font-['DM_Sans'] font-medium" style={{ color: accentColor }}>
               {dateFormat}
             </span>
             {renderMeta ? (
@@ -447,7 +447,7 @@ export function ProgramCard<T extends BaseProgramItem>({
           </div>
 
           <div className="flex-1">
-            <p className="text-h6 text-ods-text-secondary line-clamp-3 min-h-[4.5rem]">
+            <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed 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-h6"
+              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']"
               aria-hidden="true"
             >
               View {config.labels.singular} Details

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

@@ -159,7 +159,7 @@ export function RoadmapCard({
               className="h-8 w-8 object-contain"
             />
           ) : (
-            <span className="text-h6 uppercase text-ods-text-secondary">
+            <span className="text-[10px] font-medium uppercase text-ods-text-secondary">
               {item.title?.substring(0, 2) || '??'}
             </span>
           )}
@@ -178,7 +178,7 @@ export function RoadmapCard({
             ) : null}
           </span>
           <span className={`${COMPACT_CARD_META_ROW_BOX} gap-2 text-ods-text-secondary`}>
-            <span className="truncate text-h6 min-w-0 flex-1">
+            <span className="truncate text-[11px] leading-4 min-w-0 flex-1">
               {(() => {
                 const parts = [
                   item.quarter,
@@ -195,7 +195,7 @@ export function RoadmapCard({
               })()}
             </span>
             {hasVotes ? (
-              <span className="hidden sm:flex items-center gap-2 shrink-0 text-h6 text-ods-text-secondary">
+              <span className="hidden sm:flex items-center gap-2 shrink-0 text-[11px] leading-4 text-ods-text-secondary">
                 <span className="flex items-center gap-0.5">
                   <ThumbsUp className="h-3 w-3" />
                   <span>{item.upvotes ?? 0}</span>
@@ -213,7 +213,7 @@ export function RoadmapCard({
             ) : null}
             {hasScreenshots ? (
               <span
-                className="hidden sm:flex shrink-0 items-center gap-0.5 text-h6"
+                className="hidden sm:flex shrink-0 items-center gap-0.5 text-[11px] leading-4"
                 title={`${item.screenshots.length} screenshot${item.screenshots.length === 1 ? '' : 's'}`}
               >
                 <ImageIcon className="h-3 w-3" />
@@ -261,12 +261,12 @@ export function RoadmapCard({
 
         <div className="flex-1 min-w-0 flex flex-col">
           <div className="min-h-[48px] flex items-center">
-            <h3 className="text-h3 text-ods-text-primary flex-1 line-clamp-2">
+            <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] flex-1 line-clamp-2">
               {item.title}
             </h3>
           </div>
           <div className="min-h-[20px] flex items-center">
-            <p className="text-h5 text-ods-text-secondary truncate">
+            <p className="text-h5 text-ods-text-secondary uppercase tracking-[-0.28px] truncate">
               {item.quarter}, {item.id}
             </p>
           </div>

package/src/components/chat/entity-cards/roadmap-vote-button.tsx

@@ -48,7 +48,7 @@ export function RoadmapVoteButton({
         isActive && 'bg-ods-border',
       )}
     >
-      {showCount && <span className="text-h6">{count}</span>}
+      {showCount && <span className="text-sm">{count}</span>}
     </Button>
   )
 }

package/src/components/chat/entity-cards/slack-message-card.tsx

@@ -66,18 +66,18 @@ export function SlackMessageCard({ item, variant = 'compact', className, anchorP
     return (
       <div className={`flex items-center gap-3 min-w-0 ${className ?? ''}`}>
         <SlackIcon className="h-3.5 w-3.5 shrink-0" />
-        <span className="text-ods-text-primary text-h6 truncate max-w-[180px] shrink-0">{item.title}</span>
+        <span className="text-ods-text-primary text-sm font-medium truncate max-w-[180px] shrink-0">{item.title}</span>
         {item.preview ? (
-          <span className="text-ods-text-secondary text-h6 flex-1 min-w-0 truncate">{item.preview}</span>
+          <span className="text-ods-text-secondary text-sm flex-1 min-w-0 truncate">{item.preview}</span>
         ) : null}
         {channel ? (
-          <span className="text-code text-ods-text-secondary truncate max-w-[140px] shrink-0">
+          <span className="font-mono text-[11px] text-ods-text-secondary truncate max-w-[140px] shrink-0">
             <Hash className="inline h-3 w-3" />
             {channel}
           </span>
         ) : null}
         {dateText ? (
-          <span className="text-ods-text-secondary text-h6 w-24 shrink-0 text-right">{dateText}</span>
+          <span className="text-ods-text-secondary text-xs w-24 shrink-0 text-right">{dateText}</span>
         ) : null}
       </div>
     )

package/src/components/chat/error-message-display.tsx

@@ -44,7 +44,7 @@ const ErrorMessageDisplay = forwardRef<HTMLDivElement, ErrorMessageDisplayProps>
           <AlertCircleIcon size={16} className={cn("shrink-0", iconTint[type])} />
           <span
             className={cn(
-              "min-w-0 flex-1 text-h5",
+              "min-w-0 flex-1 font-mono text-sm font-medium uppercase leading-5 tracking-[-0.28px]",
               expanded ? "text-ods-text-primary" : "truncate text-ods-text-secondary"
             )}
           >
@@ -59,7 +59,7 @@ const ErrorMessageDisplay = forwardRef<HTMLDivElement, ErrorMessageDisplayProps>
               ref={innerRef}
               className="px-[var(--spacing-system-lf)] pt-[var(--spacing-system-xsf)]"
             >
-              <p className="text-h6 text-ods-text-primary">
+              <p className="text-sm font-medium leading-5 text-ods-text-primary">
                 {details}
               </p>
             </div>

package/src/components/chat/mingo-info-card.tsx

@@ -96,7 +96,7 @@ function CardMedia({
             picture and its 1px frame share one radius (no corner gap from
             clipping a separate absolutely-positioned child). On a 404 the
             image's `onError` hides it and the initials show through. */}
-        <span className="absolute inset-0 flex items-center justify-center rounded-sm border border-ods-border bg-ods-bg text-h6 text-ods-text-primary">
+        <span className="absolute inset-0 flex items-center justify-center rounded-sm border border-ods-border bg-ods-bg text-xs font-medium text-ods-text-primary">
           {getFirstLastInitials(imageAlt) || '?'}
         </span>
         <img
@@ -146,7 +146,7 @@ export function MingoInfoCard({
         <CardMedia imageSrc={imageSrc} imageAlt={imageAlt} icon={icon} />
       )}
       <span className="flex min-w-0 flex-1 flex-col justify-center">
-        <span className="truncate text-h4 text-ods-text-primary">
+        <span className="truncate text-h4 font-medium text-ods-text-primary">
           {title}
         </span>
         {description ? (

package/src/components/chat/model-display.tsx

@@ -74,7 +74,7 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
         ref={ref}
         className={cn(
           'flex items-center gap-1 text-ods-text-secondary',
-          'text-h6',
+          'text-sm',
           className,
         )}
         {...props}
@@ -84,11 +84,11 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
             {icon}
           </span>
         )}
-        <span className="font-body">
+        <span className="font-dm-sans font-medium">
           {name}
         </span>
         {contextWindow != null && (
-          <span className="text-h6 opacity-70 ml-auto">
+          <span className="font-dm-sans text-xs opacity-70 ml-auto">
             {usedTokens != null ? formatTokenCount(usedTokens) : '—'}/{formatTokenCount(contextWindow)} tokens used
           </span>
         )}
@@ -113,7 +113,7 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
           align="end"
           sideOffset={6}
         >
-          <div className="text-h6 font-semibold text-ods-text-primary mb-2">
+          <div className="font-dm-sans text-xs font-semibold text-ods-text-primary mb-2">
             Token breakdown
           </div>
           {/* Answer-call row — uses the SAME pretty model name as the
@@ -147,7 +147,7 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
             />
           )}
           {typeof hitRatePct === 'number' && hitRatePct > 0 && (
-            <div className="mt-2 pt-2 border-t border-ods-border text-h6 text-ods-text-secondary">
+            <div className="mt-2 pt-2 border-t border-ods-border font-dm-sans text-xs text-ods-text-secondary">
               Prompt-cache hit: {hitRatePct}% of answer input
             </div>
           )}
@@ -169,7 +169,7 @@ function BreakdownRow({
   isAnswer?: boolean;
 }) {
   return (
-    <div className="flex items-center justify-between py-1 text-h6">
+    <div className="flex items-center justify-between py-1 font-dm-sans text-xs">
       <span
         className={cn(
           'text-ods-text-secondary',
@@ -206,7 +206,7 @@ const ModelDisplaySkeleton = React.forwardRef<HTMLDivElement, ModelDisplaySkelet
     <div
       ref={ref}
       aria-hidden
-      className={cn('flex items-center gap-1 text-h6', className)}
+      className={cn('flex items-center gap-1 text-sm', className)}
       {...props}
     >
       {/* provider icon */}

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

@@ -119,7 +119,7 @@ function composeChipLabel(
           // against the caps' optical center (measured 9.1px above / 6.9px
           // below in the 32px Tag). Keep QuickActionChipSkeleton's lozenge bar
           // offset in lockstep.
-          'mr-2 inline-flex items-center rounded px-[5px] py-[3px] align-middle -translate-y-[1px] text-h6 font-bold uppercase',
+          'mr-2 inline-flex items-center rounded px-[5px] py-[3px] align-middle -translate-y-[1px] text-[10px] font-bold uppercase leading-none tracking-[0.08em]',
           lozenge.className,
         )}
         style={{ background: 'color-mix(in srgb, currentColor 14%, transparent)' }}

package/src/components/chat/source-action-button.tsx

@@ -67,14 +67,14 @@ const DENSITY_STYLES: Record<
     showLabel: true,
     iconSize: '!h-3 !w-3',
     className:
-      '!h-auto !p-0 text-h6 font-normal text-ods-text-secondary opacity-60 hover:bg-transparent hover:opacity-100 hover:text-ods-text-primary',
+      '!h-auto !p-0 text-xs font-normal text-ods-text-secondary opacity-60 hover:bg-transparent hover:opacity-100 hover:text-ods-text-primary',
   },
   'list-row': {
     size: 'small',
     showLabel: true,
     iconSize: '!h-3 !w-3',
     className:
-      '!h-auto !px-1.5 !py-0.5 text-h6 font-normal text-ods-text-secondary opacity-60 hover:opacity-100 hover:text-ods-text-primary hover:bg-ods-accent/10',
+      '!h-auto !px-1.5 !py-0.5 text-[11px] font-normal text-ods-text-secondary opacity-60 hover:opacity-100 hover:text-ods-text-primary hover:bg-ods-accent/10',
   },
 }
 

package/src/components/chat/tool-call-blocks.tsx

@@ -6,11 +6,13 @@ import { formatToolArgValue, formatToolResult } from "./utils/tool-call-helpers"
 /**
  * Monospace code body shared by ArgRow / ResultBlock.
  *
- * Uses the ODS `text-code` composite token (Azeret Mono 500, h6 responsive
- * scale, no transform) — the token this file was originally flagged for.
+ * NOTE: ODS exposes no mono/code typography token (only the composite
+ * `text-h1`–`text-h6` DM Sans / Azeret-Mono headings), so the 12px code size
+ * stays as `text-xs` here. Flagged for a future `text-code` token rather than
+ * forcing an h-class that would change the intended density.
  */
 const CODE_PRE_CLASS =
-  "bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] w-full max-h-64 overflow-auto text-code text-ods-text-primary whitespace-pre"
+  "bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] w-full max-h-64 overflow-auto text-xs leading-5 text-ods-text-primary font-mono whitespace-pre"
 
 /**
  * Single arg row: inline `key: value` or labeled `<pre>` block.

package/src/components/chat/utils/.chip-action-class.md

@@ -25,7 +25,7 @@ import { CHIP_ACTION_BUTTON_CLASS } from './chip-action-class'
 
 | Property | Value | Intent |
 |----------|-------|--------|
-| Font size | `text-h6` | Sub-UI-Kit density, fits chip action rows |
+| Font size | `text-[11px]` | Sub-UI-Kit density, fits chip action rows |
 | Padding | `px-2 py-1` | Tight, below standard `Button size="small"` |
 | Colors | `ods-text-secondary` / hover `ods-text-primary` | ODS token-based theming |
 | Background | `bg-transparent` / hover `ods-card-hover` | Subtle interactive feedback |

package/src/components/chat/utils/.chip-styles.md

@@ -17,9 +17,9 @@ Accepts a `ChipClassOptions` object and returns a composed Tailwind class string
 
 | Density | Sizing | Frame |
 |---------|--------|-------|
-| `chip` | `px-2 py-0.5 text-h6` | bordered card bg |
+| `chip` | `px-2 py-0.5 text-[11px]` | bordered card bg |
 | `list-row` | `px-3 py-2 text-sm` | bordered card bg |
-| `card-row` | `px-2 py-1 text-h6` | no border/bg |
+| `card-row` | `px-2 py-1 text-[11px]` | no border/bg |
 
 ## Usage Example
 

package/src/components/chat/utils/chip-action-class.ts

@@ -13,7 +13,7 @@
  * chip card's tertiary action row.
  */
 export const CHIP_ACTION_BUTTON_CLASS =
-  'text-h6 text-ods-text-secondary hover:text-ods-text-primary ' +
+  'text-[11px] font-medium text-ods-text-secondary hover:text-ods-text-primary ' +
   'bg-transparent hover:bg-ods-card-hover border border-ods-border rounded-md ' +
   'px-2 py-1 transition-colors focus-visible:outline-none focus-visible:ring-2 ' +
   'focus-visible:ring-ods-focus'

package/src/components/chat/utils/chip-styles.ts

@@ -36,8 +36,8 @@ export function chatChipClass({ tone, density = 'chip', extra }: ChipClassOption
   const sizeClass = density === 'list-row'
     ? 'px-3 py-2 text-sm gap-2'
     : density === 'card-row'
-      ? 'px-2 py-1 text-h6 gap-1.5'
-      : 'px-2 py-0.5 text-h6 gap-1.5'
+      ? 'px-2 py-1 text-[11px] gap-1.5'
+      : 'px-2 py-0.5 text-[11px] gap-1.5'
   // `card-row` is the "no-frame" variant — no border, no card bg, so it
   // sits cleanly under a card without visually wrapping it.
   const frameClass = density === 'card-row'

package/src/components/chat/utils/compact-card-classes.ts

@@ -56,15 +56,15 @@ export const COMPACT_CARD_TITLE =
 
 /** Subtitle text — 11px on a 16px line. */
 export const COMPACT_CARD_SUBTITLE =
-  'truncate text-h6 text-ods-text-secondary'
+  'truncate text-[11px] leading-4 text-ods-text-secondary'
 
 /** Summary text — same metrics as subtitle, dropped to 80% opacity. */
 export const COMPACT_CARD_SUMMARY =
-  'truncate text-h6 text-ods-text-secondary/80'
+  'truncate text-[11px] leading-4 text-ods-text-secondary/80'
 
 /** Meta-row variant — multi-part 11px metadata. */
 export const COMPACT_CARD_META_ROW =
-  'flex items-center gap-1.5 min-w-0 text-h6 text-ods-text-secondary'
+  'flex items-center gap-1.5 min-w-0 text-[11px] leading-4 text-ods-text-secondary'
 
 /** Non-breaking space — used as a fallback child so the row's height stays 16px. */
 export const COMPACT_CARD_ROW_FILLER = ' '

package/src/components/chevron-button.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Button } from "./ui/button";
+import { cn } from "../utils/cn";
+
+interface ChevronButtonProps {
+  isExpanded?: boolean;
+  className?: string;
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  backgroundColor?: string;
+  borderColor?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  /** Forwarded to the inner <button> for assistive tech. */
+  'aria-label'?: string;
+}
+
+export function ChevronButton({
+  isExpanded = false,
+  className,
+  size = 'icon',
+  backgroundColor = 'transparent',
+  borderColor = 'transparent',
+  onClick,
+  'aria-label': ariaLabel,
+}: ChevronButtonProps) {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  // Create dynamic styles for background and border with hover handling
+  const dynamicStyles = {
+    backgroundColor: isHovered 
+      ? 'transparent' // Transparent hover color
+      : (backgroundColor !== 'transparent' ? backgroundColor : 'transparent'),
+    borderColor: borderColor !== 'transparent' ? borderColor : 'transparent',
+    borderWidth: borderColor !== 'transparent' ? '1px' : undefined,
+    borderStyle: borderColor !== 'transparent' ? 'solid' : undefined,
+  } as React.CSSProperties;
+
+  return (
+    <Button
+      variant="transparent"
+      size="icon"
+      onClick={onClick}
+      aria-label={ariaLabel}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={cn(
+        "rounded-lg transition-all duration-200", 
+        size === 'icon' && "h-8 w-8 p-0",
+        size === 'default' && "h-10 w-10 p-0",
+        size === 'sm' && "h-6 w-6 p-0",
+        size === 'lg' && "h-12 w-12 p-0",
+        className
+      )}
+      style={dynamicStyles}
+    >
+      <ChevronDown 
+        className={cn(
+          "transition-transform text-white",
+          size === 'icon' && "h-4 w-4",
+          size === 'default' && "h-5 w-5",
+          size === 'sm' && "h-3 w-3",
+          size === 'lg' && "h-6 w-6",
+          isExpanded && "rotate-180"
+        )}
+      />
+    </Button>
+  );
+} 

package/src/components/command.tsx

@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-h6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -73,7 +73,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-h6"
+    className="py-6 text-center text-sm"
     {...props}
   />
 ))
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}

package/src/components/comment-card.tsx

@@ -90,7 +90,7 @@ export function CommentCard({
               />
               
               {/* Timestamp */}
-              <span className="text-h6 text-ods-text-secondary whitespace-nowrap flex-shrink-0">
+              <span className="font-['DM_Sans'] font-medium text-[14px] leading-[1.43] text-ods-text-secondary whitespace-nowrap flex-shrink-0">
                 {formatActivityTime(comment.createdAt)}
               </span>
             </>