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

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

@@ -258,7 +258,7 @@ export function ContactForm({
             </h2>
           )}
           {subtitle && (
-            <p className="text-h4 text-ods-text-primary">
+            <p className="font-['DM_Sans'] font-medium text-[16px] md:text-[18px] leading-[24px] 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-h6 mt-1">
+                  <span id="name-error" className="text-ods-error text-xs font-['DM_Sans'] 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-h6 mt-1">
+                  <span id="email-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
                     {errors.email.message}
                   </span>
                 )}
@@ -378,7 +378,7 @@ export function ContactForm({
                   )}
                 />
                 {errors.companySize && (
-                  <span id="companySize-error" className="text-ods-error text-h6 mt-1">
+                  <span id="companySize-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
                     {errors.companySize.message}
                   </span>
                 )}
@@ -410,7 +410,7 @@ export function ContactForm({
                   )}
                 />
                 {errors.referralSource && (
-                  <span id="referralSource-error" className="text-ods-error text-h6 mt-1">
+                  <span id="referralSource-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
                     {errors.referralSource.message}
                   </span>
                 )}
@@ -447,7 +447,7 @@ export function ContactForm({
               )}
             />
             {errors.helpCategory && (
-              <span id="helpCategory-error" className="text-ods-error text-h6 mt-1">
+              <span id="helpCategory-error" className="text-ods-error text-xs font-['DM_Sans'] 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-h6 mt-1">
+              <span id="message-error" className="text-ods-error text-xs font-['DM_Sans'] mt-1">
                 {errors.message.message}
               </span>
             )}
@@ -494,7 +494,7 @@ export function ContactForm({
                 onAddFiles={attachments.addFiles}
                 disabled={isSubmitting}
               />
-              <span className="text-h6 text-ods-text-secondary">
+              <span className="text-xs 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="text-h6 text-ods-text-secondary text-center md:text-left">
+            <p className="font-['DM_Sans'] text-ods-text-secondary text-xs md:text-sm leading-relaxed 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-h6 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-sm 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-h6 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-sm 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-h6 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-sm 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-h6 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-sm 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-h6 font-semibold text-foreground",
+      "px-2 py-1.5 text-sm 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-ods-text-muted focus-visible:ring-ods-accent",
+  "placeholder:text-[#767676] focus-visible:ring-[#FFC008]",
   "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="text-h5 font-semibold text-ods-text-secondary">
+        <Label className="font-['Azeret_Mono'] text-[12px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-secondary uppercase">
           {label}
         </Label>
       )}

package/src/components/dialog.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+interface DialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+}
+
+const Dialog: React.FC<DialogProps> = ({ open, onOpenChange, children }) => {
+  console.log('Dialog render - open:', open);
+  if (!open) return null
+  
+  return (
+    <div 
+      className="fixed inset-0 z-[9999] bg-black/80 backdrop-blur-sm"
+      onClick={() => onOpenChange?.(false)}
+      style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 }}
+    >
+      {children}
+    </div>
+  )
+}
+
+const DialogTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ children, ...props }, ref) => (
+  <button ref={ref} {...props}>
+    {children}
+  </button>
+))
+DialogTrigger.displayName = "DialogTrigger"
+
+const DialogPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>
+}
+
+const DialogClose = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ children, ...props }, ref) => (
+  <button ref={ref} {...props}>
+    {children}
+  </button>
+))
+DialogClose.displayName = "DialogClose"
+
+const DialogOverlay = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-[9999] bg-black/80 backdrop-blur-sm",
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = "DialogOverlay"
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  onCloseClick?: () => void
+}
+
+const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, onCloseClick, ...props }, ref) => {
+    console.log('DialogContent render');
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-[10000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-300 bg-white p-6 shadow-lg rounded-lg",
+          className,
+        )}
+        style={{ 
+          position: 'fixed', 
+          left: '50%', 
+          top: '50%', 
+          transform: 'translate(-50%, -50%)', 
+          zIndex: 10000,
+          backgroundColor: 'white',
+          border: '2px solid gray'
+        }}
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+      >
+        {children}
+        <button 
+          onClick={onCloseClick}
+          type="button"
+          className="absolute right-4 top-4 rounded-sm opacity-70 text-gray-500 transition-opacity hover:opacity-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </button>
+      </div>
+    )
+  }
+)
+DialogContent.displayName = "DialogContent"
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center md:text-left", className)} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse md:flex-row md:justify-end md:space-x-2", className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h2
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight text-black", className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-gray-600", className)} {...props} />
+))
+DialogDescription.displayName = "DialogDescription"
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

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-h3 text-ods-text-primary">
+                <h2 className="text-xl font-semibold 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-h5 font-semibold text-ods-text-secondary">
+                            <h3 className="text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em]">
                               {sidebarLabel}
                             </h3>
                             <MultiLevelNavigation
@@ -369,7 +369,7 @@ function DocViewerContent({
                         renderSkeleton(selectedNodeDocType)
                       ) : !content ? (
                         <div className="text-center py-16">
-                          <p className="text-h4 text-ods-text-secondary">{resolvedEmptyText}</p>
+                          <p className="text-xl 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-h5 font-semibold text-ods-text-secondary mb-4">
+                          <h3 className="text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em] mb-4">
                             ON THIS PAGE
                           </h3>
                           <StickySectionNav

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-ods-bg-hover focus:bg-ods-bg-hover data-[state=open]:bg-ods-bg-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-ods-border bg-ods-card p-1 text-ods-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-ods-border bg-ods-card p-1 text-ods-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-ods-accent" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-ods-text-secondary",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-ods-border", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-ods-text-secondary opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

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-h6 transition-colors ${
+            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium 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="text-h6 font-semibold text-ods-text-primary truncate">
+          <span className="font-sans text-base 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-h3 text-ods-text-primary">
+          <h3 className="text-lg font-semibold text-ods-text-primary">
             {fileName || 'File'}
           </h3>
-          <div className="flex items-center justify-center gap-3 mt-2 text-h6 text-ods-text-secondary">
+          <div className="flex items-center justify-center gap-3 mt-2 text-sm text-ods-text-secondary">
             {mimeType && <span>{mimeType}</span>}
             {typeof fileSize === 'number' && <span>{formatFileSize(fileSize)}</span>}
           </div>

package/src/components/embeds/google-sheets-viewer.tsx

@@ -30,7 +30,7 @@ export function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleShee
       <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">
           <GoogleSheetsIcon className="w-5 h-5 shrink-0" />
-          <h2 className="text-h3 text-ods-text-primary truncate">{displayName}</h2>
+          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
         </div>
         <Button
           variant="outline"

package/src/components/embeds/linkedin-embed-client.tsx

@@ -46,7 +46,7 @@ export function LinkedInEmbedClient({ url, height = 600 }: LinkedInEmbedProps) {
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-card border border-ods-border text-ods-text-primary rounded-md text-h6 hover:bg-ods-bg-hover transition-colors"
+            className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-card border border-ods-border text-ods-text-primary rounded-md text-sm font-medium hover:bg-ods-bg-secondary transition-colors"
           >
             <LinkedinIcon className="w-4 h-4" />
             <span>View on LinkedIn</span>
@@ -84,12 +84,12 @@ export function LinkedInEmbedClient({ url, height = 600 }: LinkedInEmbedProps) {
           onLoad={() => setLoaded(true)}
         />
       </div>
-      <div className="px-4 py-3 bg-ods-bg-surface border-t border-ods-border">
+      <div className="px-4 py-3 bg-ods-bg-secondary border-t border-ods-border">
         <a
           href={url}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center space-x-2 text-ods-accent hover:text-ods-accent/80 transition-colors text-h6"
+          className="inline-flex items-center space-x-2 text-ods-accent hover:text-ods-accent/80 transition-colors text-sm font-medium"
         >
           <ExternalLink className="w-4 h-4" />
           <span>View on LinkedIn</span>