diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 48ae0ca2..4012ce2f 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -50,6 +50,14 @@ body {
   .text-fluid-xl {
     font-size: clamp(1.5rem, 5cqi, 2.25rem);
   }
+
+  .card-title {
+    @apply text-base font-black text-slate-100 tracking-tight;
+  }
+  
+  .card-subtitle {
+     @apply text-[10px] font-bold text-slate-500 uppercase tracking-[0.08em] mt-0.5;
+  }
 }
 
 /* Safe Area Insets for Modern Mobile Devices (iOS Notch/Home Bar) */
diff --git a/frontend/app/inventory/page.tsx b/frontend/app/inventory/page.tsx
index 3640a916..297f7dd9 100644
--- a/frontend/app/inventory/page.tsx
+++ b/frontend/app/inventory/page.tsx
@@ -312,8 +312,8 @@ export default function InventoryPage() {
                     <Layers size={20} />
                   </div>
                    <div className="text-left">
-                     <h3 className="font-bold text-lg">{cat}</h3>
-                     <p className="text-xs font-bold text-slate-400 mt-1 uppercase tracking-tight">
+                     <h3 className="card-title text-base sm:text-lg">{cat}</h3>
+                     <p className="card-subtitle tracking-tight">
                         {inventory.filter(i => i.category === cat).length} Item types in stock
                      </p>
                    </div>
@@ -354,8 +354,8 @@ export default function InventoryPage() {
                             <Package size={14} />
                           </div>
                            <div className="truncate">
-                             <h4 className="font-bold text-slate-200 truncate">{item.name}</h4>
-                             <p className="text-xs text-slate-400 truncate mt-1">{item.specs}</p>
+                             <h4 className="card-title truncate">{item.name}</h4>
+                             <p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
                            </div>
                         </div>
                         <div className="text-right shrink-0">
diff --git a/frontend/app/logs/page.tsx b/frontend/app/logs/page.tsx
index 904188bf..a47d3011 100644
--- a/frontend/app/logs/page.tsx
+++ b/frontend/app/logs/page.tsx
@@ -216,13 +216,13 @@ export default function LogsPage() {
                     </div>
                     
                     <div className="flex-1 min-w-0">
-                      <h3 className="text-base font-bold text-slate-100 group-hover:text-primary transition-colors truncate">
+                      <h3 className="card-title group-hover:text-primary transition-colors truncate">
                          {log.resolved_name}
                       </h3>
-                      <div className="flex items-center gap-2 mt-0.5">
-                        <span className="text-[11px] font-bold text-slate-400 uppercase tracking-tight shrink-0">{log.username || 'System'}</span>
-                        <span className="w-1 h-1 rounded-full bg-slate-800 shrink-0" />
-                        <span className="text-[11px] text-slate-400 font-medium tabular-nums truncate">
+                      <div className="flex items-center gap-2">
+                        <span className="card-subtitle mt-0 shrink-0">{log.username || 'System'}</span>
+                        <span className="w-1 h-1 rounded-full bg-slate-800 shrink-0 mt-1" />
+                        <span className="card-subtitle mt-0 lowercase opacity-80 truncate">
                           {new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · {new Date(log.timestamp).toLocaleDateString()}
                         </span>
                       </div>
diff --git a/frontend/components/admin/CategoryManager.tsx b/frontend/components/admin/CategoryManager.tsx
index 59b4615b..d55d670d 100644
--- a/frontend/components/admin/CategoryManager.tsx
+++ b/frontend/components/admin/CategoryManager.tsx
@@ -43,8 +43,8 @@ export default function CategoryManager({
          {categories.map(cat => (
            <div key={cat.id} className="p-4 bg-slate-950/40 border border-slate-800/50 rounded-2xl flex items-center justify-between group hover:border-primary/40 transition-all">
              <div className="min-w-0 pr-4">
-               <p className="text-sm font-bold text-slate-200 group-hover:text-primary transition-colors">{cat.name}</p>
-               <p className="text-xs text-slate-500 font-medium mt-0.5">{cat.description || 'General storage'}</p>
+               <p className="card-title group-hover:text-primary transition-colors">{cat.name}</p>
+               <p className="card-subtitle">{cat.description || 'General storage'}</p>
              </div>
              <div className="flex gap-1 shrink-0">
                 <button 
diff --git a/frontend/components/admin/IdentityManager.tsx b/frontend/components/admin/IdentityManager.tsx
index f36e9ce2..7494869b 100644
--- a/frontend/components/admin/IdentityManager.tsx
+++ b/frontend/components/admin/IdentityManager.tsx
@@ -51,8 +51,8 @@ export default function IdentityManager({
                 {user.role === 'admin' ? <Shield size={16} /> : <User size={16} />}
               </div>
               <div className="min-w-0">
-                <p className="text-sm font-bold text-slate-200 truncate">{user.username}</p>
-                <p className="text-[11px] text-slate-400 font-bold tracking-tight capitalize">{user.role}</p>
+                <p className="card-title truncate">{user.username}</p>
+                <p className="card-subtitle">{user.role}</p>
               </div>
             </div>
             <div className="flex items-center gap-1.5 ml-2">
diff --git a/frontend/components/admin/LdapManager.tsx b/frontend/components/admin/LdapManager.tsx
index bc0c9b48..a7071813 100644
--- a/frontend/components/admin/LdapManager.tsx
+++ b/frontend/components/admin/LdapManager.tsx
@@ -37,8 +37,8 @@ export default function LdapManager({
             <Power size={14} />
           </div>
           <div>
-            <p className="text-xs font-bold text-slate-200 tracking-tight leading-none">Ldap Authorization</p>
-            <p className={cn("text-[11px] font-bold mt-1.5", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-slate-500")}>
+            <p className="card-title leading-none">Ldap Authorization</p>
+            <p className={cn("card-subtitle mt-1", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-slate-500")}>
               {ldapConfig.ldap_enabled ? "External Directory Active" : "Internal Authentication Only"}
             </p>
           </div>
@@ -124,8 +124,8 @@ export default function LdapManager({
             <Lock size={14} />
           </div>
           <div>
-            <p className="text-xs font-bold text-slate-200 tracking-tight leading-none">Use Tls</p>
-            <p className={cn("text-[11px] font-bold mt-1.5", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-500")}>
+            <p className="card-title leading-none">Use Tls</p>
+            <p className={cn("card-subtitle mt-1", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-500")}>
               {ldapConfig.use_tls ? "Encrypted Channel" : "Standard Link"}
             </p>
           </div>