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

package/src/components/ui/service-card.tsx

@@ -61,14 +61,14 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
             {resolvedIcon}
           </div>
           <div className="min-w-0">
-            <div className="text-xl font-semibold text-ods-text-primary truncate" title={title}>{title}</div>
+            <div className="text-h3 text-ods-text-primary truncate" title={title}>{title}</div>
             {subtitle && (
-              <div className="text-sm text-ods-text-secondary truncate" title={subtitle}>{subtitle}</div>
+              <div className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{subtitle}</div>
             )}
           </div>
         </div>
         {tag && (
-          <div className="px-3 py-1 rounded-full bg-ods-bg text-ods-text-primary text-xs font-semibold whitespace-nowrap self-start border border-ods-border">
+          <div className="px-3 py-1 rounded-full bg-ods-bg text-ods-text-primary text-h6 font-semibold whitespace-nowrap self-start border border-ods-border">
             {tag.label}
           </div>
         )}
@@ -101,7 +101,7 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
   return (
     <div className="flex items-center gap-3 min-w-0">
       {row.label && (
-        <div className="w-20 md:w-24 shrink-0 text-sm font-medium text-ods-text-primary">{row.label}</div>
+        <div className="w-20 md:w-24 shrink-0 text-h6 text-ods-text-primary">{row.label}</div>
       )}
       <div className={cn('flex-1 h-12 rounded-md border border-ods-border bg-ods-bg px-3 md:px-4 flex items-center justify-between min-w-0', row.monospace ? 'font-mono' : '')}>
         <div className="truncate text-ods-text-primary min-w-0" title={typeof row.value === 'string' ? row.value : undefined}>{displayValue}</div>

package/src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-[9997] bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[9997] bg-ods-overlay  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -108,7 +108,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn("text-h3 text-foreground", className)}
     {...props}
   />
 ))
@@ -120,7 +120,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-h6 text-muted-foreground", className)}
     {...props}
   />
 ))

package/src/components/ui/simple-markdown-renderer.tsx

@@ -698,7 +698,7 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
                   style={{
                     fontFamily: "JetBrains Mono', 'SF Mono', Consolas, monospace",
                     background: 'transparent',
-                    color: 'var(--ods-text-primary)',
+                    color: 'var(--color-text-primary)',
                   }}
                   {...props}
                 >
@@ -724,7 +724,7 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
 
     // --- blockquote ---
     blockquote: ({ children }: any) => (
-      <blockquote className="border-l-4 border-ods-accent ml-0 pl-6 my-8 py-4 rounded-r-lg bg-ods-bg-secondary">
+      <blockquote className="border-l-4 border-ods-accent ml-0 pl-6 my-8 py-4 rounded-r-lg bg-ods-bg-surface">
         <div className={cn('font-sans leading-relaxed text-ods-text-secondary', textSizes.blockquote)}>
           {children}
         </div>
@@ -760,7 +760,7 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
         return (
           <span className="text-ods-accent cursor-not-allowed">
             {children}
-            <sup className="ml-1 text-xs font-bold text-ods-attention-red-error">[BROKEN]</sup>
+            <sup className="ml-1 text-xs font-bold text-ods-error">[BROKEN]</sup>
           </span>
         );
       }
@@ -898,7 +898,7 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
       </div>
     ),
     thead: ({ children }: any) => (
-      <thead className="bg-ods-bg-secondary">{children}</thead>
+      <thead className="bg-ods-bg-surface">{children}</thead>
     ),
     th: ({ children }: any) => (
       <th className={cn('px-2 md:px-4 py-3 text-left font-semibold text-ods-accent border-r last:border-r-0 break-words border-ods-border', textSizes.th)}>

package/src/components/ui/square-avatar.tsx

@@ -9,6 +9,9 @@ interface SquareAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   src?: string;
   alt?: string;
   size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Exact pixel size (width & height). Overrides the `size` bucket dimensions —
+   *  for callers with a numeric-px API (e.g. UserDisplay/MSPDisplay). */
+  sizePx?: number;
   fallback?: string;
   variant?: 'square' | 'round';
   /** Override the initials-fallback styling (font size/color). Merged over the
@@ -18,7 +21,7 @@ interface SquareAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarProps>(
-  ({ className, src, alt, size = 'md', fallback, variant = 'square', initialsClassName, ...props }, ref) => {
+  ({ className, src, alt, size = 'md', sizePx, fallback, variant = 'square', initialsClassName, style, ...props }, ref) => {
     const sizeClasses = {
       sm: 'h-8 w-8',
       md: 'h-10 w-10',
@@ -26,7 +29,7 @@ const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarPro
       xl: 'h-16 w-16'
     };
 
-    const sizePx = {
+    const sizePxBySize = {
       sm: 32,
       md: 40,
       lg: 48,
@@ -42,10 +45,11 @@ const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarPro
       <div
         className={cn(
           "relative flex items-center justify-center shrink-0 overflow-hidden border border-ods-border bg-ods-bg",
-          sizeClasses[size],
+          sizePx === undefined && sizeClasses[size],
           variantClasses[variant],
           className
         )}
+        style={sizePx === undefined ? style : { width: sizePx, height: sizePx, ...style }}
         ref={ref}
         {...props}
       >
@@ -71,8 +75,8 @@ const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarPro
             className="absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover"
             src={src}
             alt={alt || ''}
-            width={sizePx[size]}
-            height={sizePx[size]}
+            width={sizePx ?? sizePxBySize[size]}
+            height={sizePx ?? sizePxBySize[size]}
             onError={(e) => {
               e.currentTarget.style.display = 'none';
               const el = e.currentTarget.previousElementSibling as HTMLElement;

package/src/components/ui/status-badge.tsx

@@ -5,26 +5,26 @@ import { cn } from '../../utils/cn';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const statusBadgeVariants = cva(
-  "inline-flex items-center justify-center rounded font-mono font-medium uppercase tracking-wide",
+  "inline-flex items-center justify-center rounded",
   {
     variants: {
       variant: {
-        card: "px-3 py-1.5 text-sm",
-        button: "px-2 py-0.5 text-[10px] leading-none",
+        card: "px-3 py-1.5 text-h5",
+        button: "px-2 py-0.5 text-h5",
       },
       colorScheme: {
         cyan: "bg-[var(--ods-flamingo-cyan-base)] text-ods-text-on-accent",
         pink: "bg-[var(--ods-flamingo-pink-base)] text-ods-text-on-accent",
-        yellow: "bg-[var(--ods-flamingo-yellow-base)] text-ods-text-on-accent border border-[var(--ods-system-greys-black)]",
-        green: "bg-[var(--ods-flamingo-green-base)] text-ods-text-on-accent",
-        purple: "bg-[var(--ods-flamingo-purple-base)] text-ods-text-on-accent",
-        success: "bg-[var(--ods-attention-green-success-secondary)] text-[var(--ods-attention-green-success)]",
-        error: "bg-[var(--ods-attention-red-error-secondary)] text-[var(--ods-attention-red-error)]",
-        warning: "bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)]",
-        default: "bg-ods-bg-secondary text-ods-text-primary",
+        yellow: "bg-ods-accent text-ods-text-on-accent border border-[var(--ods-system-greys-black)]",
+        green: "bg-ods-success text-ods-text-on-accent",
+        purple: "bg-ods-flamingo-pink text-ods-text-on-accent",
+        success: "bg-ods-success-secondary text-ods-success",
+        error: "bg-ods-error-secondary text-ods-error",
+        warning: "bg-ods-warning-secondary text-ods-warning",
+        default: "bg-ods-bg-surface text-ods-text-primary",
         // Border-only variants (no background) - for task type badges
         accentBorder: "bg-transparent border-2 text-ods-accent border-ods-accent",
-        errorBorder: "bg-transparent border-2 text-[var(--ods-attention-red-error)] border-[var(--ods-attention-red-error)]",
+        errorBorder: "bg-transparent border-2 text-ods-error border-ods-error",
         whiteBorder: "bg-transparent border-2 text-ods-text-primary border-ods-text-primary",
       },
     },

package/src/components/ui/status-indicator.tsx

@@ -10,15 +10,15 @@ export function StatusIndicator({ status, label, href }: StatusIndicatorProps) {
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'success':
-        return 'bg-green-400 text-green-400';
+        return 'bg-ods-success text-ods-success';
       case 'pending':
-        return 'bg-orange-400 text-orange-400';
+        return 'bg-ods-warning text-ods-warning';
       case 'error':
-        return 'bg-red-400 text-red-400';
+        return 'bg-ods-error text-ods-error';
       case 'missing':
-        return 'bg-orange-400 text-orange-400';
+        return 'bg-ods-warning text-ods-warning';
       default:
-        return 'bg-gray-400 text-gray-400';
+        return 'bg-ods-text-muted text-ods-text-muted';
     }
   };
 
@@ -28,7 +28,7 @@ export function StatusIndicator({ status, label, href }: StatusIndicatorProps) {
   const content = (
     <div className="flex items-center gap-1.5">
       <div className={`h-3 w-3 rounded-full ${dotColor}`} />
-      <span className={`text-xs font-['DM_Sans'] font-medium ${textColor}`}>
+      <span className={`text-h6 ${textColor}`}>
         {label}
       </span>
     </div>

package/src/components/ui/tab-content.tsx

@@ -31,7 +31,7 @@ export function TabContent({
       ) : (
         <div className={cn(minHeight, "flex items-center justify-center")}>
           <div className="text-center">
-            <h3 className="text-lg font-semibold text-ods-text-primary mb-2">
+            <h3 className="text-h3 text-ods-text-primary mb-2">
               {emptyStateTitle}
             </h3>
             <p className="text-ods-text-secondary">

package/src/components/ui/tab-navigation.tsx

@@ -247,7 +247,7 @@ export function TabNavigation({
                         "absolute right-0 top-[-3px] w-3 h-3 rounded-full border-2 border-ods-bg",
                         tab.indicator === 'error' && 'bg-ods-error',
                         tab.indicator === 'warning' && 'bg-ods-accent',
-                        tab.indicator === 'success' && 'bg-green-500'
+                        tab.indicator === 'success' && 'bg-ods-success'
                       )} />
                     )}
                   </div>
@@ -258,7 +258,7 @@ export function TabNavigation({
                     "w-3 h-3 shrink-0 rounded-full border-2 border-ods-bg",
                     tab.indicator === 'error' && 'bg-ods-error',
                     tab.indicator === 'warning' && 'bg-ods-accent',
-                    tab.indicator === 'success' && 'bg-green-500'
+                    tab.indicator === 'success' && 'bg-ods-success'
                   )} />
                 ) : null}
 

package/src/components/ui/table/table-column-filter-dropdown.tsx

@@ -42,7 +42,7 @@ export function TableColumnFilterDropdown({
           className="flex items-center gap-1.5 rounded px-1 py-0.5 cursor-pointer hover:bg-ods-bg-active transition-all duration-200"
           aria-label={`Filter by ${columnLabel}`}
         >
-          <span className="font-medium text-[12px] leading-[16px] uppercase text-ods-text-secondary select-none">
+          <span className="text-h5 text-ods-text-secondary select-none">
             {columnLabel}
           </span>
           <Filter02Icon

package/src/components/ui/table/table-description-cell.tsx

@@ -33,7 +33,7 @@ export function TableDescriptionCell({
       <div className="flex flex-col justify-center">
         <span
           className={cn(
-            "font-['DM_Sans'] font-medium text-[16px] leading-[20px] text-ods-text-secondary break-words",
+            "text-h6 text-ods-text-secondary break-words",
             maxLines === 1 && "truncate",
             maxLines === 2 && "line-clamp-2",
             maxLines === 3 && "line-clamp-3",

package/src/components/ui/table/table-timestamp-cell.tsx

@@ -74,7 +74,7 @@ export function TableTimestampCell({
       <span className="text-h4 text-ods-text-primary truncate">
         {displayTimestamp}
       </span>
-      <span className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate">
+      <span className="text-h6 text-ods-text-secondary truncate">
         {idLabel ? `${idLabel}: ${id}` : id}
       </span>
     </div>

package/src/components/ui/table/table.tsx

@@ -203,7 +203,7 @@ export function Table<T = any>({
       {/* Toolbar for bulk actions */}
       {showToolbar && bulkActions && selectedRows.length > 0 && (
         <div className="flex items-center justify-between bg-ods-card border border-ods-border rounded-[6px] p-3 mb-2">
-          <span className="text-ods-text-secondary text-sm">
+          <span className="text-ods-text-secondary text-h6">
             {selectedRows.length} item{selectedRows.length !== 1 ? 's' : ''} selected
           </span>
           <div className="flex gap-2">
@@ -213,7 +213,7 @@ export function Table<T = any>({
                 onClick={() => action.onClick(selectedRows)}
                 disabled={action.requiresSelection && selectedRows.length === 0}
                 className={cn(
-                  "px-3 py-1.5 text-sm rounded border transition-colors",
+                  "px-3 py-1.5 text-h6 rounded border transition-colors",
                   "bg-ods-card border-ods-border hover:bg-ods-bg-active text-ods-text-primary",
                   action.className
                 )}

package/src/components/ui/tabs.tsx

@@ -39,7 +39,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-h6 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}

package/src/components/ui/tag-search-input.tsx

@@ -177,7 +177,7 @@ export function TagSearchInput<T = string>({
                 className={cn(
                   "flex items-center h-8 px-2",
                   "bg-ods-card border border-ods-border rounded-[6px]",
-                  "font-mono text-[14px] font-medium leading-5 text-ods-text-secondary uppercase tracking-[-0.28px]",
+                  "text-h5 text-ods-text-secondary",
                   "hover:bg-ods-bg-hover transition-colors cursor-pointer",
                 )}
               >

package/src/components/ui/tag.tsx

@@ -16,54 +16,54 @@ const tagVariants = cva(
       // is the Figma "Feature Item" chip (48px, h3 bold body label) used by
       // chip groups acting as tabs (OpenFrame categories).
       size: {
-        default: "text-h5 h-8 gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-xsf)]",
+        default: "text-h5 h-8 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-xsf)]",
         large: "text-h3 font-bold h-12 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]",
       },
       variant: {
         primary: [
-          "bg-[var(--ods-open-yellow-base)] text-[var(--ods-system-greys-black)]",
-          "hover:bg-[var(--ods-open-yellow-hover)] active:bg-[var(--ods-open-yellow-action)]",
+          "bg-ods-accent text-ods-text-on-accent",
+          "hover:bg-ods-accent-hover active:bg-ods-accent-active",
         ],
         outline: [
-          "bg-[var(--ods-system-greys-black)] text-[var(--ods-system-greys-white)] border border-[var(--ods-system-greys-soft-grey)]",
-          "hover:bg-[var(--ods-system-greys-black-hover)] hover:border-[var(--ods-system-greys-soft-grey-hover)]",
-          "active:bg-[var(--ods-system-greys-black-action)] active:border-[var(--ods-system-greys-soft-grey-action)]",
+          "bg-ods-card text-ods-text-primary border border-ods-border",
+          "hover:bg-ods-bg-hover hover:border-ods-border-hover",
+          "active:bg-ods-bg-active active:border-ods-border-active",
         ],
         success: [
-          "bg-[var(--ods-attention-green-success-secondary)] text-[var(--ods-attention-green-success)]",
-          "hover:bg-[#385029] active:bg-[#425a33]",
+          "bg-ods-success-secondary text-ods-success",
+          "hover:bg-ods-success-secondary-hover active:bg-ods-success-secondary-active",
         ],
         warning: [
-          "bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)]",
-          "hover:bg-[#544729] active:bg-[#5e5133]",
+          "bg-ods-warning-secondary text-ods-warning",
+          "hover:bg-ods-warning-secondary-hover active:bg-ods-warning-secondary-active",
         ],
         error: [
-          "bg-[var(--ods-attention-red-error-secondary)] text-[var(--ods-attention-red-error)]",
-          "hover:bg-[#542b2b] active:bg-[#5e3535]",
+          "bg-ods-error-secondary text-ods-error",
+          "hover:bg-ods-error-secondary-hover active:bg-ods-error-secondary-active",
         ],
         critical: [
-          "bg-[var(--ods-attention-red-error)] text-[var(--ods-attention-red-error-secondary)]",
-          "hover:bg-[var(--ods-attention-red-error-hover)] active:bg-[var(--ods-attention-red-error-action)]",
+          "bg-ods-error text-ods-error-secondary",
+          "hover:bg-ods-error-hover active:bg-ods-error-active",
         ],
         grey: [
-          "bg-[var(--ods-system-greys-soft-grey)] text-[var(--ods-system-greys-grey)]",
-          "hover:bg-[var(--ods-system-greys-soft-grey-hover)] active:bg-[var(--ods-system-greys-soft-grey-action)]",
+          "bg-ods-bg-surface text-ods-text-secondary",
+          "hover:bg-ods-bg-surface-hover active:bg-ods-bg-surface-active",
         ],
         // Active/selected chip state (Figma "Feature Item" active): pink
         // border + pink-secondary fill. A dedicated variant (not appended
         // utilities) so its own hover rules win — the outline variant's
         // hover:bg/hover:border would otherwise repaint an active chip grey.
         selected: [
-          "bg-[var(--ods-flamingo-pink-secondary)] text-[var(--ods-system-greys-white)] border border-[var(--ods-flamingo-pink-base)]",
-          "hover:bg-[var(--ods-flamingo-pink-secondary-hover)] hover:border-[var(--ods-flamingo-pink-base)]",
-          "active:bg-[var(--ods-flamingo-pink-secondary-action)]",
+          "bg-ods-flamingo-pink-secondary text-ods-text-primary border border-ods-flamingo-pink",
+          "hover:bg-ods-flamingo-pink-secondary-hover hover:border-ods-flamingo-pink",
+          "active:bg-ods-flamingo-pink-secondary-active",
         ],
         // Cyan twin of `selected` (Mingo's accent) — same active-chip skin in the
         // cyan theme so agent chip groups can match their own accent.
         selectedCyan: [
-          "bg-[var(--ods-flamingo-cyan-secondary)] text-[var(--ods-system-greys-white)] border border-[var(--ods-flamingo-cyan-base)]",
-          "hover:bg-[var(--ods-flamingo-cyan-secondary-hover)] hover:border-[var(--ods-flamingo-cyan-base)]",
-          "active:bg-[var(--ods-flamingo-cyan-secondary-action)]",
+          "bg-ods-flamingo-cyan-secondary text-ods-text-primary border border-ods-flamingo-cyan",
+          "hover:bg-ods-flamingo-cyan-secondary-hover hover:border-ods-flamingo-cyan",
+          "active:bg-ods-flamingo-cyan-secondary-active",
         ],
         // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
         // mono uppercase) so the tag-editor chips render identically to the public
@@ -82,7 +82,7 @@ const tagVariants = cva(
 )
 
 const disabledTagClasses = [
-  "bg-[var(--ods-system-greys-soft-grey)] text-[var(--ods-system-greys-grey)]",
+  "bg-ods-bg-surface text-ods-text-secondary",
   "border-transparent",
   "cursor-not-allowed",
   "pointer-events-none",

package/src/components/ui/tags-input.tsx

@@ -66,7 +66,7 @@ export function TagsInput({
   return (
     <div className={cn("space-y-2", className)}>
       {label && (
-        <label className="font-['DM_Sans'] text-[16px] font-medium text-ods-text-primary">
+        <label className="text-h6 text-ods-text-primary">
           {label}
         </label>
       )}
@@ -121,7 +121,7 @@ export function TagsInput({
       )}
       
       {maxTags && (
-        <p className="text-xs text-ods-text-secondary">
+        <p className="text-h6 text-ods-text-secondary">
           {value.length}/{maxTags} tags
         </p>
       )}

package/src/components/ui/ticket-status-tag.tsx

@@ -42,7 +42,7 @@ const STATUS_CONFIG: Record<TicketStatus, TicketStatusConfig> = {
   RESOLVED: {
     label: 'Resolved',
     variant: 'outline',
-    icon: <CheckCircleIcon size={16} color="var(--ods-attention-green-success)" />,
+    icon: <CheckCircleIcon size={16} color="var(--color-success)" />,
   },
   ARCHIVED: {
     label: 'Archived',

package/src/components/ui/toaster.tsx

@@ -59,12 +59,12 @@ function ToastHeader({
         <span className={cn('size-[9px] rounded-full', dotColorByVariant[variant])} />
       </div>
 
-      <div className="flex min-w-0 flex-1 flex-col justify-center font-['DM_Sans'] font-medium">
+      <div className="flex min-w-0 flex-1 flex-col justify-center">
         {title ? (
-          <p className="truncate pr-5 text-[18px] leading-6 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p>
+          <p className="truncate pr-5 text-h4 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p>
         ) : null}
         {description ? (
-          <p className="text-[14px] leading-5 text-ods-text-secondary line-clamp-3" title={typeof description === 'string' ? description : undefined}>{description}</p>
+          <p className="text-h6 text-ods-text-secondary line-clamp-3" title={typeof description === 'string' ? description : undefined}>{description}</p>
         ) : null}
       </div>
 
@@ -206,7 +206,7 @@ export function CommandApprovalToast({
       >
         <div className="overflow-hidden">
           <div className="flex h-11 w-full items-center gap-2 border-b border-ods-border bg-ods-card px-3 py-2">
-            <p className="min-w-0 flex-1 truncate font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-primary" title={command}>
+            <p className="min-w-0 flex-1 truncate text-h6 text-ods-text-primary" title={command}>
               {command}
             </p>
             {toolType ? <ToolIcon toolType={toolType} size={16} /> : null}
@@ -214,7 +214,7 @@ export function CommandApprovalToast({
 
           <div className="flex flex-col gap-2 bg-ods-bg p-3">
             {approvalDescription ? (
-              <p className="font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-secondary">
+              <p className="text-h6 text-ods-text-secondary">
                 {approvalDescription}
               </p>
             ) : null}
@@ -223,7 +223,7 @@ export function CommandApprovalToast({
                 type="button"
                 onClick={handleApprove}
                 tabIndex={expanded ? 0 : -1}
-                className="flex flex-1 items-center justify-center rounded-md bg-ods-accent px-2 py-2 font-['Azeret_Mono'] text-[14px] font-medium uppercase tracking-[-0.28px] text-ods-text-on-accent transition-colors hover:bg-ods-accent-hover active:bg-ods-accent-active"
+                className="flex flex-1 items-center justify-center rounded-md bg-ods-accent px-2 py-2 text-h5 text-ods-text-on-accent transition-colors hover:bg-ods-accent-hover active:bg-ods-accent-active"
               >
                 {approveLabel}
               </button>
@@ -231,7 +231,7 @@ export function CommandApprovalToast({
                 type="button"
                 onClick={handleReject}
                 tabIndex={expanded ? 0 : -1}
-                className="flex flex-1 items-center justify-center rounded-md border border-ods-border bg-ods-card px-2 py-2 font-['Azeret_Mono'] text-[14px] font-medium uppercase tracking-[-0.28px] text-ods-text-primary transition-colors hover:bg-ods-bg-hover"
+                className="flex flex-1 items-center justify-center rounded-md border border-ods-border bg-ods-card px-2 py-2 text-h5 text-ods-text-primary transition-colors hover:bg-ods-bg-hover"
               >
                 {rejectLabel}
               </button>
@@ -244,7 +244,7 @@ export function CommandApprovalToast({
         <button
           type="button"
           onClick={() => setExpanded(true)}
-          className="flex w-full items-center gap-2 bg-ods-card px-3 py-2 text-left font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-primary transition-colors hover:bg-ods-bg-hover"
+          className="flex w-full items-center gap-2 bg-ods-card px-3 py-2 text-left text-h6 text-ods-text-primary transition-colors hover:bg-ods-bg-hover"
           aria-expanded={false}
         >
           <span className="flex-1">Show Command</span>

package/src/components/ui/toggle.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../utils/cn"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-ods-accent data-[state=on]:text-ods-text-on-accent",
+  "inline-flex items-center justify-center rounded-md text-h6 transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-ods-accent data-[state=on]:text-ods-text-on-accent",
   {
     variants: {
       variant: {

package/src/components/ui/tooltip.tsx

@@ -26,7 +26,7 @@ const TooltipContent = React.forwardRef<
       className={cn(
         // `max-h` uses Radix's available-height var so tall content scrolls inside
         // the tooltip instead of overflowing off-screen (only engages on overflow).
-        "z-[1400] max-h-[var(--radix-popper-available-height)] overflow-y-auto rounded-md bg-ods-card border border-ods-border px-3 py-2 text-sm text-ods-text-primary shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[1400] max-h-[var(--radix-popper-available-height)] overflow-y-auto rounded-md bg-ods-card border border-ods-border px-3 py-2 text-h6 text-ods-text-primary shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/components/user-display.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { cn } from "../utils/cn";
-import { SquareAvatar } from './square-avatar';
+import { getProxiedImageUrl } from '../utils/image-proxy';
+import { SquareAvatar } from './ui/square-avatar';
 
 interface UserDisplayProps {
   name: string;
@@ -25,18 +26,23 @@ interface UserDisplayProps {
 export function UserDisplay({ name, avatarUrl, subtitle, size = 32, shape = 'square', compact = false, className }: UserDisplayProps) {
   return (
     <div className={cn('flex items-center gap-2 min-w-0', className)}>
-      <SquareAvatar src={avatarUrl ?? undefined} fallbackName={name} size={size} shape={shape} />
+      <SquareAvatar
+        src={avatarUrl ? getProxiedImageUrl(avatarUrl) || avatarUrl : undefined}
+        fallback={name}
+        alt={name}
+        sizePx={size}
+        variant={shape}
+      />
       <div className="min-w-0 flex-1">
         <p className={cn(
-          "font-['DM_Sans'] text-ods-text-primary truncate",
-          compact ? 'text-xs leading-4 font-medium' : 'text-lg leading-[22px]',
+          "text-ods-text-primary truncate",
+          compact ? 'text-h6' : 'text-h4',
         )}>
           {name}
         </p>
         {subtitle && (
           <span className={cn(
-            "font-['DM_Sans'] text-ods-text-secondary truncate block",
-            compact ? 'text-xs leading-4 font-medium' : 'text-md leading-[16px]',
+            "text-h6 text-ods-text-secondary truncate block",
           )}>
             {subtitle}
           </span>

package/src/components/user-summary-stub.tsx

@@ -196,7 +196,7 @@ export function UserSummary({
               {/* top part */}
           {authProviders && authProviders.length > 0 && (
                 <div className="flex items-center gap-2">
-              <span className="text-xs text-ods-text-secondary whitespace-nowrap select-none">
+              <span className="text-h6 text-ods-text-secondary whitespace-nowrap select-none">
                 Authorized by
               </span>
               <div className="flex items-center gap-2">
@@ -211,7 +211,7 @@ export function UserSummary({
 
               {/* bottom part - Edit button would go here */}
           {showEditButton && (
-                <div className="text-xs text-ods-text-secondary">Edit Profile</div>
+                <div className="text-h6 text-ods-text-secondary">Edit Profile</div>
               )}
             </div>
           )}
@@ -223,7 +223,7 @@ export function UserSummary({
         <div className="flex md:hidden items-center justify-between w-full gap-4">
           {authProviders && authProviders.length > 0 && (
             <div className="flex items-center gap-2">
-              <span className="text-xs text-ods-text-secondary whitespace-nowrap select-none">Authorized by</span>
+              <span className="text-h6 text-ods-text-secondary whitespace-nowrap select-none">Authorized by</span>
               <div className="flex items-center gap-2">
                 {authProviders.map((p) => (
                   <div key={p} className="flex items-center justify-center w-4 h-4">
@@ -235,7 +235,7 @@ export function UserSummary({
           )}
 
           {showEditButton && (
-            <div className="text-xs text-ods-text-secondary">Edit Profile</div>
+            <div className="text-h6 text-ods-text-secondary">Edit Profile</div>
           )}
         </div>
       )}

package/src/components/vendor-display-button.tsx

@@ -50,7 +50,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
             </span>
           </div>
         )}
-        <span className="text-sm font-medium text-ods-text-primary">
+        <span className="text-h6 text-ods-text-primary">
           {vendor.title}
         </span>
       </button>
@@ -75,7 +75,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
         </div>
       ) : (
         <div className="w-8 h-8 bg-ods-border border border-ods-border rounded-lg flex items-center justify-center flex-shrink-0">
-          <span className="text-ods-text-primary text-[12px] font-medium">
+          <span className="text-ods-text-primary text-h6">
             {vendor.title.charAt(0)}
           </span>
         </div>

package/src/components/vendor-icon.tsx

@@ -80,7 +80,7 @@ export function VendorIcon({
         />
       ) : (
         <div className={cn(
-          'flex items-center justify-center text-xs font-medium uppercase',
+          'flex items-center justify-center text-h6 uppercase',
           backgroundStyle === 'white' ? 'text-[#333333]' : 'text-ods-text-secondary'
         )}>
           {vendor.title?.substring(0, 2) || '??'}