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

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-xs font-medium text-ods-text-primary">
+        <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">
           {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 font-medium text-ods-text-primary">
+        <span className="truncate text-h4 text-ods-text-primary">
           {title}
         </span>
         {description ? (

package/src/components/chat/mingo-welcome.tsx

@@ -10,10 +10,6 @@ import { Button } from '../ui/button'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import {
-  Rocket01Icon,
-  BracketCurlyIcon,
-  SearchIcon,
-  LayersIcon,
   CompassIcon,
   Arrow01DownIcon,
   AlertCircleIcon,
@@ -24,17 +20,6 @@ import {
 // Types
 // =============================================================================
 
-/** A single capability cell in the 2-up feature grid. */
-export interface MingoFeatureCard {
-  /** Stable React key. */
-  id: string
-  /** Leading 16×16 icon (monochrome `ods-text-secondary`). */
-  icon?: React.ReactNode
-  /** Caption text. Line breaks (`\n`) are honoured (`whitespace-pre-line`)
-   *  so the two-line wrap stays fixed regardless of panel width. */
-  text: React.ReactNode
-}
-
 /** "New to OpenFrame?" one-time notification config. `null` hides the card. */
 export interface MingoWelcomePromo {
   title: React.ReactNode
@@ -57,14 +42,10 @@ export interface MingoQuickAction {
 }
 
 export interface MingoWelcomeProps {
-  /** First name woven into the greeting. Empty/undefined → no-name variant. */
-  userName?: string
-  /** Greeting heading. Defaults to `Hey{, name}, I'm Mingo`. */
+  /** Greeting heading. Defaults to `Hey, I'm Mingo`. */
   title?: React.ReactNode
   /** Greeting sub-line under the heading. */
   subtitle?: React.ReactNode
-  /** 2-up capability grid. Defaults to the four OpenFrame highlights. */
-  featureCards?: ReadonlyArray<MingoFeatureCard>
   /** One-time "New to OpenFrame?" notification below the grid. `null` hides
    *  it; omitting falls back to the OpenFrame default (only rendered when
    *  `onStartGuideChat` is wired, i.e. Guide mode exists to advertise). */
@@ -102,10 +83,6 @@ export interface MingoWelcomeProps {
   loadError?: boolean
   /** Retry handler for the `loadError` state. */
   onRetry?: () => void
-  /** Whether the dialog history has a search bar — when true, the loading
-   *  skeleton includes a search-bar placeholder so it matches the loaded
-   *  layout. Ignored once `dialogHistory` is provided. */
-  historySearchable?: boolean
   /** When provided, renders the "Start Guide Chat" chip (the only wired
    *  action — switches the host chat to Guide mode) and enables the default
    *  promo notification. When omitted, both are suppressed. */
@@ -121,29 +98,6 @@ export interface MingoWelcomeProps {
 const DEFAULT_SUBTITLE =
   'Ready to help with your technical tasks. What can I do for you?'
 
-const DEFAULT_FEATURE_CARDS: ReadonlyArray<MingoFeatureCard> = [
-  {
-    id: 'answers',
-    icon: <Rocket01Icon size={16} />,
-    text: 'Get instant answers about\ndevices, tickets, and clients',
-  },
-  {
-    id: 'scripts',
-    icon: <BracketCurlyIcon size={16} />,
-    text: 'Run scripts and queries\nthrough natural language',
-  },
-  {
-    id: 'summarize',
-    icon: <SearchIcon size={16} />,
-    text: 'Summarize long ticket\nthreads or activity history',
-  },
-  {
-    id: 'delegate',
-    icon: <LayersIcon size={16} />,
-    text: 'Delegate tasks, let Mingo\nwork in the background',
-  },
-]
-
 const DEFAULT_PROMO: MingoWelcomePromo = {
   title: 'New to OpenFrame?',
   description: 'Start a Guide Chat to learn how it works and how to set it up.',
@@ -156,13 +110,12 @@ const DEFAULT_PROMO_STORAGE_KEY = 'mingo-welcome:promo-dismissed'
 // =============================================================================
 
 /**
- * MingoWelcome — Figma node `7532:222444`.
+ * MingoWelcome — Figma node `113:69208`.
  *
  * Default (Mingo-mode) chat empty state: a vertically-centred greeting that
- * grows to fill available height, then a pinned stack of a 2-up capability
- * grid, an optional one-time "New to OpenFrame?" notification, and a
- * quick-action chip row. The Guide-mode empty state keeps the slash-command
- * onboarding list.
+ * grows to fill available height, then a pinned stack of an optional one-time
+ * "New to OpenFrame?" notification and a quick-action chip row. The Guide-mode
+ * empty state keeps the slash-command onboarding list.
  *
  * Content is configurable (props) with OpenFrame defaults so the kit stays
  * platform-agnostic. The "Start Guide Chat" chip is the only wired action —
@@ -171,10 +124,8 @@ const DEFAULT_PROMO_STORAGE_KEY = 'mingo-welcome:promo-dismissed'
  * storage so it shows only until the user closes it once.
  */
 export function MingoWelcome({
-  userName,
   title,
   subtitle = DEFAULT_SUBTITLE,
-  featureCards = DEFAULT_FEATURE_CARDS,
   promo,
   promoStorageKey = DEFAULT_PROMO_STORAGE_KEY,
   promoStorage = 'local',
@@ -186,12 +137,12 @@ export function MingoWelcome({
   isLoadingHistory = false,
   loadError = false,
   onRetry,
-  historySearchable = false,
   onStartGuideChat,
   className,
 }: MingoWelcomeProps) {
-  const heading =
-    title ?? (userName ? `Hey ${userName}, I'm Mingo` : "Hey, I'm Mingo")
+  // Greeting never weaves the user's name in — always the plain "Hey, I'm
+  // Mingo" (design node 113:69208). A host `title` override still wins.
+  const heading = title ?? "Hey, I'm Mingo"
 
   // `promo` omitted → fall back to the OpenFrame default, but only when guide
   // mode exists to advertise (otherwise the notification points nowhere).
@@ -236,10 +187,6 @@ export function MingoWelcome({
   // only while content is hidden in that direction).
   const { scrollRef, fadeTop, fadeBottom, update: updateScrollFade } = useScrollFade<HTMLDivElement>()
 
-  const cellCount = featureCards.length
-  // Last row's first index — used to drop the bottom divider on the final row.
-  const lastRowStart = cellCount - ((cellCount % 2) || 2)
-
   // While we don't yet know whether the user is new or returning (first page
   // loading, or it errored with nothing cached), suppress the pinned region —
   // the "New to OpenFrame?" promo + quick-action chips. Showing them over the
@@ -284,7 +231,7 @@ export function MingoWelcome({
           )}
         </div>
       ) : isLoadingHistory ? (
-        <MingoChatHistorySkeleton searchable={historySearchable} />
+        <MingoChatHistorySkeleton />
       ) : (
       <>
       {/* Scrollable region — only the greeting + grid scroll; the notification
@@ -309,46 +256,18 @@ export function MingoWelcome({
           eyesColor="var(--ods-flamingo-cyan-base)"
           cornerColor="var(--ods-flamingo-cyan-base)"
         />
-        <div className="flex w-full flex-col gap-1">
-          <p className="text-h4 text-ods-text-primary">{heading}</p>
-          <p className="text-h6 text-ods-text-secondary">{subtitle}</p>
+        <div className="flex w-full flex-col gap-[var(--spacing-system-l)]">
+          <p className="text-h2 text-ods-text-primary">{heading}</p>
+          <p className="text-h4 text-ods-text-secondary">{subtitle}</p>
         </div>
       </div>
-
-      {/* 2-up capability grid. `shrink-0` keeps every cell at its natural
-          height so the bottom row is never clipped (the root scrolls instead).
-          Cells share the lighter `ods-card` surface; 1px `ods-border` dividers
-          (right on the left column, bottom on every row but the last) draw the
-          inner cross. Captions use explicit `\n` breaks (`whitespace-pre-line`)
-          so the two-line wrap is fixed and never reflows with panel width. */}
-      {cellCount > 0 && (
-        <div className="grid shrink-0 grid-cols-2 overflow-hidden rounded-md border border-ods-border bg-ods-card">
-          {featureCards.map((card, i) => (
-            <div
-              key={card.id}
-              className={cn(
-                'flex flex-col items-center justify-center gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)] text-center',
-                i % 2 === 0 && 'border-r border-ods-border',
-                i < lastRowStart && 'border-b border-ods-border',
-              )}
-            >
-              {card.icon ? (
-                <span className="flex size-4 shrink-0 items-center justify-center text-ods-text-primary">
-                  {card.icon}
-                </span>
-              ) : null}
-              <p className="text-h4 text-ods-text-secondary whitespace-pre-line">
-                {card.text}
-              </p>
-            </div>
-          ))}
-        </div>
-      )}
       </div>
 
-      {/* Edge scroll-fades — visible only when content is hidden beyond them. */}
-      <ScrollFadeOverlay edge="top" visible={fadeTop} color="var(--color-bg-card)" className="h-12" />
-      <ScrollFadeOverlay edge="bottom" visible={fadeBottom} color="var(--color-bg-card)" className="h-12" />
+      {/* Edge scroll-fades — visible only when content is hidden beyond them.
+          Fade into the panel's dark `ods-bg` surface (the default color), matching
+          the black Mingo welcome background (node 113:69208). */}
+      <ScrollFadeOverlay edge="top" visible={fadeTop} className="h-12" />
+      <ScrollFadeOverlay edge="bottom" visible={fadeBottom} className="h-12" />
       </div>
       </>
       ))}

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-sm',
+          'text-h6',
           className,
         )}
         {...props}
@@ -84,11 +84,11 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
             {icon}
           </span>
         )}
-        <span className="font-dm-sans font-medium">
+        <span className="font-body">
           {name}
         </span>
         {contextWindow != null && (
-          <span className="font-dm-sans text-xs opacity-70 ml-auto">
+          <span className="text-h6 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="font-dm-sans text-xs font-semibold text-ods-text-primary mb-2">
+          <div className="text-h6 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 font-dm-sans text-xs text-ods-text-secondary">
+            <div className="mt-2 pt-2 border-t border-ods-border text-h6 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 font-dm-sans text-xs">
+    <div className="flex items-center justify-between py-1 text-h6">
       <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-sm', className)}
+      className={cn('flex items-center gap-1 text-h6', 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-[10px] font-bold uppercase leading-none tracking-[0.08em]',
+          'mr-2 inline-flex items-center rounded px-[5px] py-[3px] align-middle -translate-y-[1px] text-h6 font-bold uppercase',
           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-xs font-normal text-ods-text-secondary opacity-60 hover:bg-transparent hover:opacity-100 hover:text-ods-text-primary',
+      '!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',
   },
   'list-row': {
     size: 'small',
     showLabel: true,
     iconSize: '!h-3 !w-3',
     className:
-      '!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',
+      '!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',
   },
 }
 

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

@@ -6,13 +6,11 @@ import { formatToolArgValue, formatToolResult } from "./utils/tool-call-helpers"
 /**
  * Monospace code body shared by ArgRow / ResultBlock.
  *
- * 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.
+ * Uses the ODS `text-code` composite token (Azeret Mono 500, h6 responsive
+ * scale, no transform) — the token this file was originally flagged for.
  */
 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-xs leading-5 text-ods-text-primary font-mono whitespace-pre"
+  "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"
 
 /**
  * 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-[11px]` | Sub-UI-Kit density, fits chip action rows |
+| Font size | `text-h6` | 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-[11px]` | bordered card bg |
+| `chip` | `px-2 py-0.5 text-h6` | bordered card bg |
 | `list-row` | `px-3 py-2 text-sm` | bordered card bg |
-| `card-row` | `px-2 py-1 text-[11px]` | no border/bg |
+| `card-row` | `px-2 py-1 text-h6` | 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-[11px] font-medium text-ods-text-secondary hover:text-ods-text-primary ' +
+  'text-h6 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-[11px] gap-1.5'
-      : 'px-2 py-0.5 text-[11px] gap-1.5'
+      ? 'px-2 py-1 text-h6 gap-1.5'
+      : 'px-2 py-0.5 text-h6 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-[11px] leading-4 text-ods-text-secondary'
+  'truncate text-h6 text-ods-text-secondary'
 
 /** Summary text — same metrics as subtitle, dropped to 80% opacity. */
 export const COMPACT_CARD_SUMMARY =
-  'truncate text-[11px] leading-4 text-ods-text-secondary/80'
+  'truncate text-h6 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-[11px] leading-4 text-ods-text-secondary'
+  'flex items-center gap-1.5 min-w-0 text-h6 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/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-sm 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-h6 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-sm"
+    className="py-6 text-center text-h6"
     {...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-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",
+      "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",
       className
     )}
     {...props}

package/src/components/comment-card.tsx

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

package/src/components/contact/contact-form.tsx

@@ -258,7 +258,7 @@ export function ContactForm({
             </h2>
           )}
           {subtitle && (
-            <p className="font-['DM_Sans'] font-medium text-[16px] md:text-[18px] leading-[24px] text-ods-text-primary">
+            <p className="text-h4 text-ods-text-primary">
               {subtitle}
             </p>
           )}
@@ -320,7 +320,7 @@ export function ContactForm({
                   className="bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12"
                 />
                 {errors.name && (
-                  <span id="name-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
+                  <span id="name-error" className="text-ods-error text-h6 mt-1">
                     {errors.name.message}
                   </span>
                 )}
@@ -341,7 +341,7 @@ export function ContactForm({
                   className="bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12"
                 />
                 {errors.email && (
-                  <span id="email-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
+                  <span id="email-error" className="text-ods-error text-h6 mt-1">
                     {errors.email.message}
                   </span>
                 )}
@@ -378,7 +378,7 @@ export function ContactForm({
                   )}
                 />
                 {errors.companySize && (
-                  <span id="companySize-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
+                  <span id="companySize-error" className="text-ods-error text-h6 mt-1">
                     {errors.companySize.message}
                   </span>
                 )}
@@ -410,7 +410,7 @@ export function ContactForm({
                   )}
                 />
                 {errors.referralSource && (
-                  <span id="referralSource-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
+                  <span id="referralSource-error" className="text-ods-error text-h6 mt-1">
                     {errors.referralSource.message}
                   </span>
                 )}
@@ -447,7 +447,7 @@ export function ContactForm({
               )}
             />
             {errors.helpCategory && (
-              <span id="helpCategory-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
+              <span id="helpCategory-error" className="text-ods-error text-h6 mt-1">
                 {errors.helpCategory.message}
               </span>
             )}
@@ -468,7 +468,7 @@ export function ContactForm({
               className="bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary h-full flex-grow"
             />
             {errors.message && (
-              <span id="message-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
+              <span id="message-error" className="text-ods-error text-h6 mt-1">
                 {errors.message.message}
               </span>
             )}
@@ -494,7 +494,7 @@ export function ContactForm({
                 onAddFiles={attachments.addFiles}
                 disabled={isSubmitting}
               />
-              <span className="text-xs text-ods-text-secondary">
+              <span className="text-h6 text-ods-text-secondary">
                 Attach files (optional)
               </span>
             </div>
@@ -503,7 +503,7 @@ export function ContactForm({
 
         <div className="flex flex-col md:flex-row gap-4 md:gap-6 items-center justify-end w-full pt-2 mt-auto">
           {footerText && (
-            <p className="font-['DM_Sans'] text-ods-text-secondary text-xs md:text-sm leading-relaxed text-center md:text-left">
+            <p className="text-h6 text-ods-text-secondary text-center md:text-left">
               {footerText}
             </p>
           )}

package/src/components/context-menu.tsx

@@ -27,7 +27,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -120,7 +120,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -144,7 +144,7 @@ const ContextMenuLabel = React.forwardRef<
   <ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      "px-2 py-1.5 text-h6 font-semibold text-foreground",
       inset && "pl-8",
       className
     )}

package/src/components/date-time-picker.tsx

@@ -25,7 +25,7 @@ const inputClassName = cn(
   "disabled:cursor-not-allowed disabled:opacity-50 touch-manipulation",
   // Admin theme colors
   "bg-ods-card border-ods-border text-ods-text-primary",
-  "placeholder:text-[#767676] focus-visible:ring-[#FFC008]",
+  "placeholder:text-ods-text-muted focus-visible:ring-ods-accent",
   "md:text-sm text-base" // Mobile zoom prevention
 );
 
@@ -44,7 +44,7 @@ export function DateTimePicker({
   return (
     <div className={cn("space-y-2", className)}>
       {label && (
-        <Label className="font-['Azeret_Mono'] text-[12px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-secondary uppercase">
+        <Label className="text-h5 font-semibold text-ods-text-secondary">
           {label}
         </Label>
       )}

package/src/components/docs/doc-viewer.tsx

@@ -291,7 +291,7 @@ function DocViewerContent({
           {error && (
             <div className="flex justify-center">
               <div className="rounded-lg border bg-ods-card p-8 text-center max-w-md border-ods-border">
-                <h2 className="text-xl font-semibold text-ods-text-primary">
+                <h2 className="text-h3 text-ods-text-primary">
                   Error Loading Documents
                 </h2>
                 <p className="mt-2 text-ods-text-secondary">{error}. Please try again later.</p>
@@ -322,7 +322,7 @@ function DocViewerContent({
                       <PersistentSidebar isLoading={false}>
                         <div className="hidden lg:block">
                           <div className="space-y-4">
-                            <h3 className="text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em]">
+                            <h3 className="text-h5 font-semibold text-ods-text-secondary">
                               {sidebarLabel}
                             </h3>
                             <MultiLevelNavigation
@@ -369,7 +369,7 @@ function DocViewerContent({
                         renderSkeleton(selectedNodeDocType)
                       ) : !content ? (
                         <div className="text-center py-16">
-                          <p className="text-xl text-ods-text-secondary">{resolvedEmptyText}</p>
+                          <p className="text-h4 text-ods-text-secondary">{resolvedEmptyText}</p>
                         </div>
                       ) : (
                         renderedContent
@@ -406,7 +406,7 @@ function DocViewerContent({
                     !isLoadingContent && (
                       <div className="hidden lg:block">
                         <div className="sticky top-24">
-                          <h3 className="text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em] mb-4">
+                          <h3 className="text-h5 font-semibold text-ods-text-secondary mb-4">
                             ON THIS PAGE
                           </h3>
                           <StickySectionNav

package/src/components/embeds/figma-embed.tsx

@@ -57,7 +57,7 @@ function SlidesViewToggle({
             key={key}
             value={key}
             aria-label={label}
-            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium transition-colors ${
+            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-h6 transition-colors ${
               active
                 ? 'bg-ods-accent text-ods-text-on-accent'
                 : 'text-ods-text-secondary hover:text-ods-text-primary hover:bg-ods-bg-hover'
@@ -106,7 +106,7 @@ export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedP
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-2 min-w-0">
           <FigmaIcon className="w-5 h-5 shrink-0" />
-          <span className="font-sans text-base font-semibold text-ods-text-primary truncate">
+          <span className="text-h6 font-semibold text-ods-text-primary truncate">
             {heading}
           </span>
         </div>

package/src/components/embeds/file-download-card.tsx

@@ -30,10 +30,10 @@ export function FileDownloadCard({
       <div className="bg-ods-card border border-ods-border rounded-xl p-8 max-w-md w-full text-center space-y-4">
         <FileText className="w-16 h-16 text-ods-text-secondary mx-auto" />
         <div>
-          <h3 className="text-lg font-semibold text-ods-text-primary">
+          <h3 className="text-h3 text-ods-text-primary">
             {fileName || 'File'}
           </h3>
-          <div className="flex items-center justify-center gap-3 mt-2 text-sm text-ods-text-secondary">
+          <div className="flex items-center justify-center gap-3 mt-2 text-h6 text-ods-text-secondary">
             {mimeType && <span>{mimeType}</span>}
             {typeof fileSize === 'number' && <span>{formatFileSize(fileSize)}</span>}
           </div>