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

package/src/components/loading/page-layout-skeleton.tsx

@@ -12,7 +12,7 @@ interface PageLayoutSkeletonProps {
  */
 export function AnnouncementBarSkeleton() {
   return (
-    <div className="bg-[#2A2A2A] relative w-full animate-pulse">
+    <div className="bg-ods-skeleton relative w-full animate-pulse">
       <div className="flex flex-row items-center relative w-full">
         <div className="box-border flex flex-row gap-4 md:gap-6 items-center justify-start pl-4 md:pl-6 pr-12 md:pr-16 py-3 md:py-4 relative w-full">
           {/* Logo skeleton */}
@@ -40,7 +40,7 @@ export function HeaderSkeleton() {
     <header className="sticky top-0 z-40 w-full flex items-center justify-between border-b border-ods-border bg-ods-card backdrop-blur-sm bg-ods-card/95 px-4 md:px-[80px] py-3 md:py-[12px] animate-pulse">
       {/* Left: Logo skeleton */}
       <div className="flex items-center justify-start flex-1 min-w-0">
-        <div className="w-[110px] h-[26px] md:w-[137px] md:h-8 bg-[#2A2A2A] rounded"></div>
+        <div className="w-[110px] h-[26px] md:w-[137px] md:h-8 bg-ods-skeleton rounded"></div>
       </div>
 
       {/* Center: Navigation skeleton - hidden on mobile, visible on desktop */}
@@ -327,15 +327,15 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                 <div className="flex flex-col gap-3">
                   <div className="flex flex-col gap-2">
                     {/* Large title skeleton */}
-                    <div className="h-12 md:h-16 lg:h-20 bg-[#2A2A2A] rounded animate-pulse w-80 max-w-full"></div>
+                    <div className="h-12 md:h-16 lg:h-20 bg-ods-skeleton rounded animate-pulse w-80 max-w-full"></div>
                     {/* Category text */}
-                    <div className="h-5 md:h-6 bg-[#2A2A2A] rounded animate-pulse w-32"></div>
+                    <div className="h-5 md:h-6 bg-ods-skeleton rounded animate-pulse w-32"></div>
                   </div>
                   
                   {/* Pricing tags */}
                   <div className="flex items-center gap-2">
-                    <div className="h-8 bg-[#2A2A2A] rounded animate-pulse w-20"></div>
-                    <div className="h-8 bg-[#2A2A2A] rounded animate-pulse w-16"></div>
+                    <div className="h-8 bg-ods-skeleton rounded animate-pulse w-20"></div>
+                    <div className="h-8 bg-ods-skeleton rounded animate-pulse w-16"></div>
                   </div>
                 </div>
               </div>
@@ -343,7 +343,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
               {/* Vendor Image Display Skeleton */}
               <div className="w-full h-[300px] md:h-[400px] lg:h-[500px] bg-ods-card border border-ods-border rounded-lg animate-pulse mb-2"></div>
               <div className="text-center">
-                <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-24 mx-auto"></div>
+                <div className="h-4 bg-ods-skeleton rounded animate-pulse w-24 mx-auto"></div>
               </div>
             </div>
 
@@ -363,10 +363,10 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                 <div className="border border-ods-border rounded-lg overflow-hidden">
                   {/* Header */}
                   <div className="bg-ods-card p-4 flex items-center gap-3">
-                    <div className="w-8 h-8 bg-[#2A2A2A] rounded animate-pulse"></div>
+                    <div className="w-8 h-8 bg-ods-skeleton rounded animate-pulse"></div>
                     <div className="flex flex-col gap-1">
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-20"></div>
-                      <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-12"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse w-20"></div>
+                      <div className="h-6 bg-ods-skeleton rounded animate-pulse w-12"></div>
                     </div>
                   </div>
                   
@@ -374,10 +374,10 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                   <div className="p-4 space-y-3">
                     {Array.from({ length: 4 }).map((_, i) => (
                       <div key={i} className="flex items-center gap-3">
-                        <div className="w-6 h-6 bg-[#2A2A2A] rounded animate-pulse"></div>
+                        <div className="w-6 h-6 bg-ods-skeleton rounded animate-pulse"></div>
                         <div className="flex items-end gap-1">
-                          <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-12"></div>
-                          <div className="h-3 bg-[#2A2A2A] rounded animate-pulse w-8"></div>
+                          <div className="h-4 bg-ods-skeleton rounded animate-pulse w-12"></div>
+                          <div className="h-3 bg-ods-skeleton rounded animate-pulse w-8"></div>
                         </div>
                       </div>
                     ))}
@@ -395,11 +395,11 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
 
             {/* Alternatives Container */}
             <div className="flex flex-col gap-6 mb-20">
-              <div className="h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-48"></div>
+              <div className="h-8 md:h-10 bg-ods-skeleton rounded animate-pulse w-48"></div>
               
               {/* Open Source Alternatives */}
               <div className="flex flex-col gap-4">
-                <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-48"></div>
+                <div className="h-5 bg-ods-skeleton rounded animate-pulse w-48"></div>
                 <div className="flex flex-wrap gap-2">
                   {Array.from({ length: 6 }).map((_, i) => (
                     <div key={i} className="h-10 bg-ods-card border border-ods-border rounded-lg animate-pulse w-24"></div>
@@ -409,7 +409,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
 
               {/* Commercial Alternatives */}
               <div className="flex flex-col gap-4">
-                <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-52"></div>
+                <div className="h-5 bg-ods-skeleton rounded animate-pulse w-52"></div>
                 <div className="flex flex-wrap gap-2">
                   {Array.from({ length: 4 }).map((_, i) => (
                     <div key={i} className="h-10 bg-ods-card border border-ods-border rounded-lg animate-pulse w-28"></div>
@@ -420,28 +420,28 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
 
             {/* About Section */}
             <div className="flex flex-col gap-6 mb-20">
-              <div className="h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-64"></div>
+              <div className="h-8 md:h-10 bg-ods-skeleton rounded animate-pulse w-64"></div>
               
               <div className="bg-ods-card border border-ods-border rounded-lg p-6 md:p-8">
                 <div className="space-y-4">
-                  <div className="h-6 bg-[#2A2A2A] rounded animate-pulse"></div>
-                  <div className="h-6 bg-[#2A2A2A] rounded animate-pulse"></div>
-                  <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-5/6"></div>
-                  <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-4/5"></div>
+                  <div className="h-6 bg-ods-skeleton rounded animate-pulse"></div>
+                  <div className="h-6 bg-ods-skeleton rounded animate-pulse"></div>
+                  <div className="h-6 bg-ods-skeleton rounded animate-pulse w-5/6"></div>
+                  <div className="h-6 bg-ods-skeleton rounded animate-pulse w-4/5"></div>
                 </div>
               </div>
             </div>
 
             {/* Key Features Section */}
             <div className="flex flex-col gap-6 mb-20">
-              <div className="h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-72"></div>
+              <div className="h-8 md:h-10 bg-ods-skeleton rounded animate-pulse w-72"></div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {Array.from({ length: 6 }).map((_, i) => (
                   <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-4 flex gap-4">
-                    <div className="w-12 h-12 bg-[#2A2A2A] rounded flex-shrink-0 animate-pulse"></div>
+                    <div className="w-12 h-12 bg-ods-skeleton rounded flex-shrink-0 animate-pulse"></div>
                     <div className="flex-1 space-y-2">
-                      <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-3/4"></div>
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse"></div>
+                      <div className="h-5 bg-ods-skeleton rounded animate-pulse w-3/4"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse"></div>
                     </div>
                   </div>
                 ))}
@@ -450,30 +450,30 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
 
             {/* Pros and Cons Section */}
             <div className="flex flex-col gap-6 mb-20">
-              <div className="h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-80"></div>
+              <div className="h-8 md:h-10 bg-ods-skeleton rounded animate-pulse w-80"></div>
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 {/* Pros Column */}
                 <div className="flex flex-col gap-6">
-                  <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-16"></div>
+                  <div className="h-5 bg-ods-skeleton rounded animate-pulse w-16"></div>
                   {Array.from({ length: 3 }).map((_, i) => (
                     <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-4 flex gap-3">
                       <div className="w-12 h-12 bg-ods-bg border border-ods-border rounded flex-shrink-0 animate-pulse"></div>
                       <div className="flex-1 space-y-2">
-                        <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-2/3"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse"></div>
+                        <div className="h-5 bg-ods-skeleton rounded animate-pulse w-2/3"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse"></div>
                       </div>
                     </div>
                   ))}
                 </div>
                 {/* Cons Column */}
                 <div className="flex flex-col gap-6">
-                  <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-16"></div>
+                  <div className="h-5 bg-ods-skeleton rounded animate-pulse w-16"></div>
                   {Array.from({ length: 3 }).map((_, i) => (
                     <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-4 flex gap-3">
                       <div className="w-12 h-12 bg-ods-bg border border-ods-border rounded flex-shrink-0 animate-pulse"></div>
                       <div className="flex-1 space-y-2">
-                        <div className="h-5 bg-[#2A2A2A] rounded animate-pulse w-2/3"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse"></div>
+                        <div className="h-5 bg-ods-skeleton rounded animate-pulse w-2/3"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse"></div>
                       </div>
                     </div>
                   ))}
@@ -483,7 +483,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
 
             {/* Alternatives Section */}
             <div className="flex flex-col gap-6 mb-20">
-              <div className="h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-72"></div>
+              <div className="h-8 md:h-10 bg-ods-skeleton rounded animate-pulse w-72"></div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {Array.from({ length: 6 }).map((_, i) => (
                   <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-6 space-y-4">
@@ -491,34 +491,34 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                     <div className="flex items-start gap-4">
                       <div className="w-16 h-16 bg-ods-bg border border-ods-border rounded-lg animate-pulse flex-shrink-0"></div>
                       <div className="flex-1 space-y-2">
-                        <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-3/4"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-1/2"></div>
+                        <div className="h-6 bg-ods-skeleton rounded animate-pulse w-3/4"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-1/2"></div>
                       </div>
-                      <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-20"></div>
+                      <div className="h-6 bg-ods-skeleton rounded animate-pulse w-20"></div>
                     </div>
                     
                     {/* Description */}
                     <div className="space-y-2">
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse"></div>
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-5/6"></div>
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-4/5"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse w-5/6"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse w-4/5"></div>
                     </div>
                     
                     {/* Footer */}
                     <div className="flex items-center justify-between pt-2 border-t border-ods-border">
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-16"></div>
-                      <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-20"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse w-16"></div>
+                      <div className="h-4 bg-ods-skeleton rounded animate-pulse w-20"></div>
                     </div>
                   </div>
                 ))}
               </div>
               {/* Show All Button */}
-              <div className="h-12 bg-[#2A2A2A] rounded-md animate-pulse"></div>
+              <div className="h-12 bg-ods-skeleton rounded-md animate-pulse"></div>
             </div>
 
             {/* Comments Section */}
             <div className="flex flex-col gap-6 mb-20">
-              <div className="h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-64"></div>
+              <div className="h-8 md:h-10 bg-ods-skeleton rounded animate-pulse w-64"></div>
               
               {/* Comment Form Skeleton */}
               <div className="space-y-3">
@@ -526,24 +526,24 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                   <div className="flex-1 bg-ods-bg border border-ods-border rounded-lg overflow-hidden">
                     {/* Title Section */}
                     <div className="border-b border-ods-border p-3">
-                      <div className="h-3 bg-[#2A2A2A] rounded animate-pulse w-8 mb-2"></div>
-                      <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-full"></div>
+                      <div className="h-3 bg-ods-skeleton rounded animate-pulse w-8 mb-2"></div>
+                      <div className="h-6 bg-ods-skeleton rounded animate-pulse w-full"></div>
                     </div>
                     
                     {/* Description Section */}
                     <div className="p-3">
-                      <div className="h-3 bg-[#2A2A2A] rounded animate-pulse w-16 mb-2"></div>
+                      <div className="h-3 bg-ods-skeleton rounded animate-pulse w-16 mb-2"></div>
                       <div className="space-y-2">
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-full"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-3/4"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-1/2"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-full"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-3/4"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-1/2"></div>
                       </div>
                     </div>
                   </div>
                   
                   {/* Send Button */}
                   <div className="flex items-stretch">
-                    <div className="h-[120px] w-20 bg-[#2A2A2A] rounded-lg animate-pulse"></div>
+                    <div className="h-[120px] w-20 bg-ods-skeleton rounded-lg animate-pulse"></div>
                   </div>
                 </div>
               </div>
@@ -557,22 +557,22 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                       <div className="flex items-center gap-2">
                         {/* User Info */}
                         <div className="flex items-center gap-2 bg-ods-card border border-ods-border rounded-lg py-2 px-3">
-                          <div className="w-8 h-8 bg-[#2A2A2A] rounded-lg animate-pulse"></div>
-                          <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-20"></div>
+                          <div className="w-8 h-8 bg-ods-skeleton rounded-lg animate-pulse"></div>
+                          <div className="h-4 bg-ods-skeleton rounded animate-pulse w-20"></div>
                         </div>
                         
                         {/* Timestamp */}
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-12"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-12"></div>
                       </div>
                     </div>
                     
                     {/* Comment Content */}
                     <div className="space-y-2">
-                      <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-2/3"></div>
+                      <div className="h-6 bg-ods-skeleton rounded animate-pulse w-2/3"></div>
                       <div className="space-y-1">
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-full"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-4/5"></div>
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-3/5"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-full"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-4/5"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-3/5"></div>
                       </div>
                     </div>
                   </div>
@@ -597,10 +597,10 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
               <div className="border border-ods-border rounded-lg overflow-hidden">
                 {/* Header */}
                 <div className="bg-ods-card p-4 flex items-center gap-3">
-                  <div className="w-8 h-8 bg-[#2A2A2A] rounded animate-pulse"></div>
+                  <div className="w-8 h-8 bg-ods-skeleton rounded animate-pulse"></div>
                   <div className="flex flex-col gap-1">
-                    <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-20"></div>
-                    <div className="h-6 bg-[#2A2A2A] rounded animate-pulse w-12"></div>
+                    <div className="h-4 bg-ods-skeleton rounded animate-pulse w-20"></div>
+                    <div className="h-6 bg-ods-skeleton rounded animate-pulse w-12"></div>
                   </div>
                 </div>
                 
@@ -608,10 +608,10 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
                 <div className="p-4 space-y-3">
                   {Array.from({ length: 4 }).map((_, i) => (
                     <div key={i} className="flex items-center gap-3">
-                      <div className="w-6 h-6 bg-[#2A2A2A] rounded animate-pulse"></div>
+                      <div className="w-6 h-6 bg-ods-skeleton rounded animate-pulse"></div>
                       <div className="flex items-end gap-1">
-                        <div className="h-4 bg-[#2A2A2A] rounded animate-pulse w-12"></div>
-                        <div className="h-3 bg-[#2A2A2A] rounded animate-pulse w-8"></div>
+                        <div className="h-4 bg-ods-skeleton rounded animate-pulse w-12"></div>
+                        <div className="h-3 bg-ods-skeleton rounded animate-pulse w-8"></div>
                       </div>
                     </div>
                   ))}
@@ -710,7 +710,7 @@ export function SlackCommunitySkeleton() {
         
         {/* Title Skeleton */}
         <div className="w-full">
-          <div className="h-8 md:h-12 lg:h-14 bg-[#2A2A2A] rounded-lg animate-pulse max-w-md"></div>
+          <div className="h-8 md:h-12 lg:h-14 bg-ods-skeleton rounded-lg animate-pulse max-w-md"></div>
         </div>
 
         {/* Content Area - Channel List + Chat Interface */}
@@ -722,21 +722,21 @@ export function SlackCommunitySkeleton() {
               {/* Header */}
               <div className="flex flex-col gap-2">
                 <div className="flex items-center justify-between">
-                  <div className="h-4 bg-[#2A2A2A] rounded w-24"></div>
-                  <div className="h-3 bg-[#2A2A2A] rounded w-16"></div>
+                  <div className="h-4 bg-ods-skeleton rounded w-24"></div>
+                  <div className="h-3 bg-ods-skeleton rounded w-16"></div>
                 </div>
-                <div className="h-3 bg-[#2A2A2A] rounded w-32"></div>
+                <div className="h-3 bg-ods-skeleton rounded w-32"></div>
               </div>
 
               {/* Channels */}
               <div className="flex flex-col gap-1">
-                <div className="h-3 bg-[#2A2A2A] rounded w-16 mb-2"></div>
+                <div className="h-3 bg-ods-skeleton rounded w-16 mb-2"></div>
                 {Array.from({ length: 5 }).map((_, i) => (
                   <div key={i} className="flex items-center gap-2 px-2 py-3 min-h-[48px]">
-                    <div className="w-4 h-4 bg-[#2A2A2A] rounded"></div>
+                    <div className="w-4 h-4 bg-ods-skeleton rounded"></div>
                     <div className="flex-1">
-                      <div className="h-3 bg-[#2A2A2A] rounded w-24 mb-1"></div>
-                      <div className="h-2 bg-[#2A2A2A] rounded w-16"></div>
+                      <div className="h-3 bg-ods-skeleton rounded w-24 mb-1"></div>
+                      <div className="h-2 bg-ods-skeleton rounded w-16"></div>
                     </div>
                   </div>
                 ))}
@@ -746,12 +746,12 @@ export function SlackCommunitySkeleton() {
               <div className="border-t border-ods-border pt-3 mt-2">
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <div className="h-3 bg-[#2A2A2A] rounded w-16"></div>
-                    <div className="h-3 bg-[#2A2A2A] rounded w-8"></div>
+                    <div className="h-3 bg-ods-skeleton rounded w-16"></div>
+                    <div className="h-3 bg-ods-skeleton rounded w-8"></div>
                   </div>
                   <div className="flex justify-between">
-                    <div className="h-3 bg-[#2A2A2A] rounded w-20"></div>
-                    <div className="h-3 bg-[#2A2A2A] rounded w-8"></div>
+                    <div className="h-3 bg-ods-skeleton rounded w-20"></div>
+                    <div className="h-3 bg-ods-skeleton rounded w-8"></div>
                   </div>
                 </div>
               </div>
@@ -764,23 +764,23 @@ export function SlackCommunitySkeleton() {
             {/* Header */}
             <div className="flex items-center justify-between p-4 md:p-6 border-b border-ods-border bg-ods-bg h-[56px] md:h-[60px] flex-shrink-0">
               <div className="flex items-center gap-2">
-                <div className="h-3 md:h-4 bg-[#2A2A2A] rounded w-3 md:w-4"></div>
-                <div className="h-3 md:h-4 bg-[#2A2A2A] rounded w-24 md:w-32"></div>
+                <div className="h-3 md:h-4 bg-ods-skeleton rounded w-3 md:w-4"></div>
+                <div className="h-3 md:h-4 bg-ods-skeleton rounded w-24 md:w-32"></div>
               </div>
-              <div className="h-3 bg-[#2A2A2A] rounded w-12 md:w-16"></div>
+              <div className="h-3 bg-ods-skeleton rounded w-12 md:w-16"></div>
             </div>
 
             {/* Messages */}
             <div className="flex-1 bg-ods-bg p-4 md:p-6 space-y-3 md:space-y-4 overflow-hidden min-h-[280px] md:min-h-[320px] lg:min-h-[420px]">
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className="flex gap-2 md:gap-3">
-                  <div className="w-10 h-10 md:w-12 md:h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0"></div>
+                  <div className="w-10 h-10 md:w-12 md:h-12 bg-ods-skeleton rounded-lg flex-shrink-0"></div>
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-1">
-                      <div className="h-3 bg-[#2A2A2A] rounded w-16 md:w-20"></div>
-                      <div className="h-3 bg-[#2A2A2A] rounded w-12 md:w-16"></div>
+                      <div className="h-3 bg-ods-skeleton rounded w-16 md:w-20"></div>
+                      <div className="h-3 bg-ods-skeleton rounded w-12 md:w-16"></div>
                     </div>
-                    <div className="h-3 md:h-4 bg-[#2A2A2A] rounded w-full"></div>
+                    <div className="h-3 md:h-4 bg-ods-skeleton rounded w-full"></div>
                   </div>
                 </div>
               ))}
@@ -789,7 +789,7 @@ export function SlackCommunitySkeleton() {
             {/* Input Area */}
             <div className="p-4 md:p-6 border-t border-ods-border bg-ods-card h-[72px] md:h-[80px] flex-shrink-0">
               <div className="flex items-end gap-3 justify-center md:justify-end">
-                <div className="h-10 md:h-12 bg-[#2A2A2A] rounded-lg w-28 md:w-32"></div>
+                <div className="h-10 md:h-12 bg-ods-skeleton rounded-lg w-28 md:w-32"></div>
               </div>
             </div>
           </div>

package/src/components/loading/unified-skeleton.tsx

@@ -42,7 +42,7 @@ export function UnifiedSkeleton({
   'aria-label': ariaLabel,
   ...props
 }: UnifiedSkeletonProps) {
-  const baseClasses = "bg-[#2A2A2A]"
+  const baseClasses = "bg-ods-skeleton"
   
   const variantClasses = {
     default: "rounded-md",

package/src/components/loading/users-grid-skeleton.tsx

@@ -10,10 +10,10 @@ export function UsersGridSkeleton({ rows = 10, className }: Props) {
   return (
     <div className={cn('overflow-x-auto rounded-lg border border-ods-border bg-ods-card animate-pulse', className)}>
       <table className="min-w-full divide-y divide-ods-border">
-        <thead className="bg-[#2A2A2A]">
+        <thead className="bg-ods-skeleton">
           <tr>
             {['Name', 'Email', 'Role', 'Created', 'Last Sign-In'].map((h) => (
-              <th key={h} className="px-4 py-3 text-left text-[12px] font-medium text-ods-text-primary font-['DM_Sans']">{h}</th>
+              <th key={h} className="px-4 py-3 text-left text-h6 text-ods-text-primary">{h}</th>
             ))}
           </tr>
         </thead>

package/src/components/logs-list.tsx

@@ -29,7 +29,7 @@ const LogCard: React.FC<{
       <div
         className={cn(
           'box-border flex gap-3 items-start py-2 px-1 relative rounded w-full',
-          'hover:bg-[#2a2a2a]/50 transition-colors cursor-pointer'
+          'hover:bg-ods-bg-hover/50 transition-colors cursor-pointer'
         )}
         onClick={onClick}
         role="button"
@@ -44,11 +44,11 @@ const LogCard: React.FC<{
         <LogSeverityDot severity={log.severity} size="md" />
         
         <div className="flex-1 min-w-0 space-y-1">
-          <p className="font-['DM_Sans'] font-medium text-[14px] leading-5 text-white">
+          <p className="text-h6 text-ods-text-primary">
             {log.title}
           </p>
           <div className="flex items-center gap-2">
-            <p className="font-['Azeret_Mono'] font-normal text-[13px] leading-4 text-ods-text-secondary uppercase tracking-wider">
+            <p className="text-h5 text-ods-text-secondary">
               {formatTimestamp(log.timestamp)}
             </p>
             {log.toolType && (
@@ -60,7 +60,7 @@ const LogCard: React.FC<{
       
       {showConnector && !isLast && (
         <div 
-          className="absolute bg-[#3a3a3a] left-[15px] w-[2px]"
+          className="absolute bg-ods-border left-[15px] w-[2px]"
           style={{ 
             top: '28px',
             bottom: '-10px'
@@ -103,14 +103,14 @@ export const LogsList = React.forwardRef<
       <div 
         ref={ref}
         className={cn(
-          'bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-4',
+          'bg-ods-card border border-ods-border rounded-lg p-4',
           'flex items-center justify-center',
           getContainerClasses(),
           className
         )}
         style={getContainerStyles()}
       >
-        <div className="text-[#666666] text-sm font-['DM_Sans']">Loading logs...</div>
+        <div className="text-ods-text-muted text-h6">Loading logs...</div>
       </div>
     )
   }
@@ -120,14 +120,14 @@ export const LogsList = React.forwardRef<
       <div 
         ref={ref}
         className={cn(
-          'bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-4',
+          'bg-ods-card border border-ods-border rounded-lg p-4',
           'flex items-center justify-center',
           getContainerClasses(),
           className
         )}
         style={getContainerStyles()}
       >
-        <div className="text-[#666666] text-sm font-['DM_Sans']">{emptyMessage}</div>
+        <div className="text-ods-text-muted text-h6">{emptyMessage}</div>
       </div>
     )
   }

package/src/components/media-carousel.tsx

@@ -180,14 +180,14 @@ export const MediaCarousel = memo(function MediaCarousel({
   const renderImageUnavailable = (failedUrl: string) => (
     <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-ods-card px-6 text-center">
       <ImageOffIcon className="size-8 text-ods-text-secondary" />
-      <p className="text-ods-text-secondary text-sm max-w-md">
+      <p className="text-ods-text-secondary text-h6 max-w-md">
         This image is no longer available at the original URL.
       </p>
       <Link
         href={failedUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-ods-accent text-sm underline break-all"
+        className="text-ods-accent text-h6 underline break-all"
       >
         Open link
       </Link>
@@ -201,7 +201,7 @@ export const MediaCarousel = memo(function MediaCarousel({
     if (!rawSrc) {
       return (
         <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-ods-card px-6 text-center">
-          <p className="text-ods-text-secondary text-sm max-w-md">No image URL for this slide.</p>
+          <p className="text-ods-text-secondary text-h6 max-w-md">No image URL for this slide.</p>
         </div>
       );
     }
@@ -296,7 +296,7 @@ export const MediaCarousel = memo(function MediaCarousel({
             <Button
               variant="transparent"
               onClick={prevSlide}
-              className="absolute left-3 top-1/2 h-auto md:h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-black/70 z-10"
+              className="absolute left-3 top-1/2 h-auto md:h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-ods-text-on-dark opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-black/70 z-10"
               aria-label="Previous media"
             >
               <ChevronLeftIcon />
@@ -305,7 +305,7 @@ export const MediaCarousel = memo(function MediaCarousel({
             <Button
               variant="transparent"
               onClick={nextSlide}
-              className="absolute right-3 top-1/2 h-auto md:h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-black/70 z-10"
+              className="absolute right-3 top-1/2 h-auto md:h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-ods-text-on-dark opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-black/70 z-10"
               aria-label="Next media"
             >
               <ChevronRightIcon />
@@ -334,8 +334,8 @@ export const MediaCarousel = memo(function MediaCarousel({
                   className={cn(
                     "size-2 rounded-full transition-colors duration-150",
                     isActive
-                      ? "bg-[var(--ods-flamingo-pink-base)]"
-                      : "bg-[var(--ods-system-greys-soft-grey)] hover:bg-[var(--ods-system-greys-soft-grey-hover)]"
+                      ? "bg-ods-flamingo-pink"
+                      : "bg-ods-bg-surface hover:bg-ods-bg-surface-hover"
                   )}
                 />
               </Button>

package/src/components/metric-value.tsx

@@ -15,9 +15,9 @@ interface MetricValueProps {
  */
 export function MetricValue({ value, label, className }: MetricValueProps) {
   return (
-    <div className={cn('flex items-end gap-2 whitespace-nowrap font-["DM_Sans"] text-lg leading-[24px] text-ods-text-primary', className)}>
+    <div className={cn('flex items-end gap-2 whitespace-nowrap text-h4 text-ods-text-primary', className)}>
       {value}
-      <span className="text-sm text-ods-text-secondary">
+      <span className="text-h6 text-ods-text-secondary">
         {label}
       </span>
     </div>

package/src/components/msp-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 MSPDisplayProps {
   name: string;
@@ -14,7 +15,12 @@ interface MSPDisplayProps {
 export function MSPDisplay({ name, logoUrl, size = 40, className }: MSPDisplayProps) {
   return (
     <div className={cn('flex items-center gap-2 min-w-0', className)}>
-      <SquareAvatar src={logoUrl ?? undefined} fallbackName={name} size={size} />
+      <SquareAvatar
+        src={logoUrl ? getProxiedImageUrl(logoUrl) || logoUrl : undefined}
+        fallback={name}
+        alt={name}
+        sizePx={size}
+      />
       <h2 className="truncate pl-2">
         {name}
       </h2>