From 4b37e9fa84d259852818bbf982a83614f3699338 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 13:09:04 -0800
Subject: [PATCH] style: Clean up typography across all pages

- Remove italic styling from headers throughout app
- Reduce excessive font-black to font-bold
- Clean up tracking-widest to tracking-wider
- Normalize button styling across pages
---
 frontend/src/pages/AuditLogPage.tsx          | 14 ++++++-------
 frontend/src/pages/BatchDetailPage.tsx       | 20 +++++++++---------
 frontend/src/pages/BatchesPage.tsx           | 22 ++++++++++----------
 frontend/src/pages/MetrcDashboardPage.tsx    |  2 +-
 frontend/src/pages/RoomDetailPage.tsx        |  8 +++----
 frontend/src/pages/RoomsPage.tsx             | 22 ++++++++++----------
 frontend/src/pages/SuppliesPage.tsx          | 12 +++++------
 frontend/src/pages/TasksPage.tsx             |  2 +-
 frontend/src/pages/VisitorManagementPage.tsx |  6 +++---
 9 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/AuditLogPage.tsx b/frontend/src/pages/AuditLogPage.tsx
index 4a3a816..cce8f59 100644
--- a/frontend/src/pages/AuditLogPage.tsx
+++ b/frontend/src/pages/AuditLogPage.tsx
@@ -165,10 +165,10 @@ export default function AuditLogPage() {
             {/* Header section */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                 <div className="space-y-1">
-                    <h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
+                    <h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
                         System Ledger
                     </h1>
-                    <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-bold uppercase tracking-widest">
+                    <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-medium">
                         <ShieldCheck size={14} className="text-[var(--color-accent)]" />
                         <span>High-fidelity audit trail • Compliant with Title 21 CFR Part 11</span>
                     </div>
@@ -276,7 +276,7 @@ export default function AuditLogPage() {
                                 {/* Property Diff Visualization */}
                                 <div className="space-y-4">
                                     <div className="flex items-center justify-between">
-                                        <h4 className="text-[10px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest border-l-2 border-emerald-500 pl-2">State Transition Map</h4>
+                                        <h4 className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider border-l-2 border-emerald-500 pl-2">State Transition Map</h4>
                                     </div>
 
                                     {selectedLog.changes && Object.keys(selectedLog.changes).length > 0 ? (
@@ -309,7 +309,7 @@ export default function AuditLogPage() {
 
                             {/* Modal Footer */}
                             <div className="p-4 bg-slate-900/60 border-t border-slate-800 flex justify-end">
-                                <button className="text-[10px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)] transition-colors flex items-center gap-2">
+                                <button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider hover:text-[var(--color-primary)] transition-colors flex items-center gap-2">
                                     Verify with Blockchain Ledger <Shield size={12} />
                                 </button>
                             </div>
@@ -332,8 +332,8 @@ function MetricMini({ label, value, icon: Icon, color }: any) {
     return (
         <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between group">
             <div className="space-y-1">
-                <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</p>
-                <div className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{value}</div>
+                <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
+                <div className="text-xl font-bold text-[var(--color-text-primary)]">{value}</div>
             </div>
             <div className={cn("p-2.5 rounded-lg border", colorClasses[color])}>
                 <Icon size={16} />
@@ -345,7 +345,7 @@ function MetricMini({ label, value, icon: Icon, color }: any) {
 function ModalMeta({ label, value }: any) {
     return (
         <div className="space-y-1">
-            <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</p>
+            <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
             <p className="text-xs font-bold text-white font-mono">{value}</p>
         </div>
     );
diff --git a/frontend/src/pages/BatchDetailPage.tsx b/frontend/src/pages/BatchDetailPage.tsx
index 2b14529..5f1482d 100644
--- a/frontend/src/pages/BatchDetailPage.tsx
+++ b/frontend/src/pages/BatchDetailPage.tsx
@@ -78,7 +78,7 @@ export default function BatchDetailPage() {
                                 {batch.stage}
                             </span>
                         </div>
-                        <div className="flex items-center gap-6 mt-4 text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
+                        <div className="flex items-center gap-6 mt-4 text-xs font-medium text-[var(--color-text-tertiary)]">
                             <div className="flex items-center gap-2">
                                 <Sprout size={14} className="text-[var(--color-primary)]" />
                                 <span>{batch.strain}</span>
@@ -199,7 +199,7 @@ export default function BatchDetailPage() {
                             {activeTab === 'overview' && (
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                     <Card className="p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] space-y-6">
-                                        <h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">Quick Actions</h4>
+                                        <h4 className="text-xs font-medium text-[var(--color-text-tertiary)]">Quick Actions</h4>
                                         <div className="grid grid-cols-2 gap-3">
                                             <ActionButton label="Log Feeding" icon={Droplets} />
                                             <ActionButton label="IPM Action" icon={Bug} />
@@ -209,7 +209,7 @@ export default function BatchDetailPage() {
                                     </Card>
 
                                     <Card className="p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] space-y-6">
-                                        <h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">Integration Hub</h4>
+                                        <h4 className="text-xs font-medium text-[var(--color-text-tertiary)]">Integration Hub</h4>
                                         <div className="space-y-4">
                                             <IntegrationItem name="METRC" status="Connected" time="Sync 2m ago" />
                                             <IntegrationItem name="DLI Monitor" status="Active" time="840 umol/m2" />
@@ -219,7 +219,7 @@ export default function BatchDetailPage() {
 
                                     <Card className="md:col-span-2 p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
                                         <div className="flex items-center justify-between mb-6">
-                                            <h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] text-left">Recent Activity</h4>
+                                            <h4 className="text-xs font-medium text-[var(--color-text-tertiary)] text-left">Recent Activity</h4>
                                             <button className="text-[10px] font-bold text-[var(--color-primary)] uppercase tracking-widest hover:underline">View All Log</button>
                                         </div>
                                         <div className="space-y-4">
@@ -248,10 +248,10 @@ export default function BatchDetailPage() {
                             {activeTab === 'environment' && (
                                 <Card className="p-8 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
                                     <div className="flex items-center justify-between mb-8">
-                                        <h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">Sensor Rollups</h4>
+                                        <h4 className="text-xs font-medium text-[var(--color-text-tertiary)]">Sensor Rollups</h4>
                                         <div className="flex items-center gap-2">
-                                            <button className="px-3 py-1.5 rounded-lg bg-[var(--color-bg-tertiary)] text-[10px] font-bold uppercase tracking-widest">24h</button>
-                                            <button className="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest">7d</button>
+                                            <button className="px-3 py-1.5 rounded-lg bg-[var(--color-bg-tertiary)] text-[10px] font-medium">24h</button>
+                                            <button className="px-3 py-1.5 rounded-lg text-[10px] font-medium">7d</button>
                                         </div>
                                     </div>
                                     <div className="h-[400px] w-full bg-slate-50/50 dark:bg-slate-900/50 rounded-2xl border border-[var(--color-border-subtle)] flex items-center justify-center text-[var(--color-text-tertiary)]">
@@ -285,7 +285,7 @@ export default function BatchDetailPage() {
                                     </div>
 
                                     <Card className="p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
-                                        <h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] mb-6">Traceability History</h4>
+                                        <h4 className="text-xs font-medium text-[var(--color-text-tertiary)] mb-6">Traceability History</h4>
                                         <div className="space-y-0.5">
                                             {[1, 2, 3].map(i => (
                                                 <div key={i} className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors">
@@ -318,7 +318,7 @@ function KPICard({ label, value, trend, status, icon: Icon }: any) {
                         <Icon size={14} className="text-[var(--color-text-tertiary)]" />
                         <span className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</span>
                     </div>
-                    <div className="text-2xl font-black italic tracking-tighter text-[var(--color-text-primary)]">
+                    <div className="text-2xl font-bold text-[var(--color-text-primary)]">
                         {value}
                     </div>
                 </div>
@@ -391,7 +391,7 @@ function ActionButton({ label, icon: Icon }: any) {
     return (
         <button className="flex flex-col items-center justify-center p-4 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-[var(--color-border-subtle)]/50 hover:border-emerald-500/50 hover:bg-[var(--color-primary)]/10 transition-all group">
             <Icon size={20} className="text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)] mb-2 transition-colors" />
-            <span className="text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">{label}</span>
+            <span className="text-[10px] font-medium text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">{label}</span>
         </button>
     );
 }
diff --git a/frontend/src/pages/BatchesPage.tsx b/frontend/src/pages/BatchesPage.tsx
index da19a65..7a6219c 100644
--- a/frontend/src/pages/BatchesPage.tsx
+++ b/frontend/src/pages/BatchesPage.tsx
@@ -196,16 +196,16 @@ export default function BatchesPage() {
             {/* Page Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                 <div className="space-y-1">
-                    <h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
+                    <h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
                         Production Inventory
                     </h1>
-                    <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-bold uppercase tracking-widest">
+                    <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-medium">
                         <ShieldCheck size={14} className="text-[var(--color-primary)]" />
                         <span>{batches.length} Active Batches • METRC Integrated</span>
                     </div>
                 </div>
 
-                <button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg shadow-emerald-500/20 transition-all uppercase tracking-widest">
+                <button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all">
                     <Plus size={18} />
                     New Batch
                 </button>
@@ -215,8 +215,8 @@ export default function BatchesPage() {
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Total Batches</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{batches.length}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Total Batches</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{batches.length}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-[var(--color-accent)]/5 text-[var(--color-accent)] border-blue-500/10">
                         <Activity size={16} />
@@ -224,8 +224,8 @@ export default function BatchesPage() {
                 </Card>
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">In Flower</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{flowerCount}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">In Flower</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{flowerCount}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-purple-500/5 text-purple-500 border-purple-500/10">
                         <Flower size={16} />
@@ -233,8 +233,8 @@ export default function BatchesPage() {
                 </Card>
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">In Veg</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{vegCount}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">In Veg</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{vegCount}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-[var(--color-primary)]/5 text-[var(--color-primary)] border-emerald-500/10">
                         <Leaf size={16} />
@@ -242,8 +242,8 @@ export default function BatchesPage() {
                 </Card>
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Total Plants</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{totalPlants.toLocaleString()}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Total Plants</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{totalPlants.toLocaleString()}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-[var(--color-error)]/5 text-[var(--color-error)] border-rose-500/10">
                         <BarChart3 size={16} />
diff --git a/frontend/src/pages/MetrcDashboardPage.tsx b/frontend/src/pages/MetrcDashboardPage.tsx
index ad75b6e..0168990 100644
--- a/frontend/src/pages/MetrcDashboardPage.tsx
+++ b/frontend/src/pages/MetrcDashboardPage.tsx
@@ -223,7 +223,7 @@ export default function MetrcDashboardPage() {
                         key={tab}
                         onClick={() => setActiveTab(tab as any)}
                         className={cn(
-                            "px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
+                            "px-6 py-2 rounded-lg text-xs font-medium transition-all",
                             activeTab === tab
                                 ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                 : "text-[var(--color-text-tertiary)] hover:text-slate-600 dark:hover:text-slate-200"
diff --git a/frontend/src/pages/RoomDetailPage.tsx b/frontend/src/pages/RoomDetailPage.tsx
index 43ea29f..6c229db 100644
--- a/frontend/src/pages/RoomDetailPage.tsx
+++ b/frontend/src/pages/RoomDetailPage.tsx
@@ -77,7 +77,7 @@ export default function RoomDetailPage() {
                                 {room.type} Phase
                             </span>
                         </div>
-                        <div className="flex items-center gap-6 mt-4 text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
+                        <div className="flex items-center gap-6 mt-4 text-xs font-medium text-[var(--color-text-tertiary)]">
                             <div className="flex items-center gap-2">
                                 <Layers size={14} className="text-[var(--color-text-tertiary)]" />
                                 <span>{room.sqft?.toLocaleString()} SQFT</span>
@@ -181,7 +181,7 @@ export default function RoomDetailPage() {
                                             </div>
                                         </div>
                                         <div className="text-right">
-                                            <div className="px-2 py-0.5 rounded bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-[10px] font-bold uppercase tracking-widest border border-emerald-500/20 mb-2 inline-block">
+                                            <div className="px-2 py-0.5 rounded bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-[10px] font-medium border border-emerald-500/20 mb-2 inline-block">
                                                 {batch.stage}
                                             </div>
                                             <div className="flex items-center gap-1.5 text-[11px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-tighter">
@@ -193,7 +193,7 @@ export default function RoomDetailPage() {
                             ))}
                             <button className="flex flex-col items-center justify-center p-8 rounded-2xl border-2 border-dashed border-[var(--color-border-subtle)] text-[var(--color-text-tertiary)] hover:border-emerald-500 hover:text-[var(--color-primary)] transition-all">
                                 <Plus size={24} className="mb-2" />
-                                <span className="text-xs font-bold uppercase tracking-widest">Transfer New Batch</span>
+                                <span className="text-xs font-medium">Transfer New Batch</span>
                             </button>
                         </div>
                     )}
@@ -253,7 +253,7 @@ function MetricCard({ icon: Icon, label, value, unit, color, data }: {
                         <span className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-[0.15em]">{label}</span>
                     </div>
                     <div className="flex items-baseline gap-1">
-                        <span className="text-2xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{value}</span>
+                        <span className="text-2xl font-bold text-[var(--color-text-primary)]">{value}</span>
                         <span className="text-xs font-bold text-[var(--color-text-tertiary)]">{unit}</span>
                     </div>
                 </div>
diff --git a/frontend/src/pages/RoomsPage.tsx b/frontend/src/pages/RoomsPage.tsx
index ab05f24..432153e 100644
--- a/frontend/src/pages/RoomsPage.tsx
+++ b/frontend/src/pages/RoomsPage.tsx
@@ -49,17 +49,17 @@ export default function RoomsPage() {
             {/* Page Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                 <div className="space-y-1">
-                    <h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
+                    <h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
                         Cultivation Zones
                     </h1>
-                    <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-bold uppercase tracking-widest">
+                    <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-medium">
                         <ShieldCheck size={14} className="text-[var(--color-primary)]" />
                         <span>{rooms.length} Active Zones • Environmental Controls Active</span>
                     </div>
                 </div>
 
                 {isManager && (
-                    <button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg shadow-emerald-500/20 transition-all uppercase tracking-widest">
+                    <button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all">
                         <Plus size={18} />
                         Add Zone
                     </button>
@@ -70,8 +70,8 @@ export default function RoomsPage() {
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Total Zones</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{rooms.length}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Total Zones</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{rooms.length}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-[var(--color-accent)]/5 text-[var(--color-accent)] border-blue-500/10">
                         <Home size={16} />
@@ -79,8 +79,8 @@ export default function RoomsPage() {
                 </Card>
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Veg Rooms</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{vegCount}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Veg Rooms</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{vegCount}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-[var(--color-primary)]/5 text-[var(--color-primary)] border-emerald-500/10">
                         <Leaf size={16} />
@@ -88,8 +88,8 @@ export default function RoomsPage() {
                 </Card>
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Flower Rooms</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{flowerCount}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Flower Rooms</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{flowerCount}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-purple-500/5 text-purple-500 border-purple-500/10">
                         <Flower size={16} />
@@ -97,8 +97,8 @@ export default function RoomsPage() {
                 </Card>
                 <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
                     <div className="space-y-1">
-                        <p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Active Batches</p>
-                        <p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{totalBatches}</p>
+                        <p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Active Batches</p>
+                        <p className="text-xl font-bold text-[var(--color-text-primary)]">{totalBatches}</p>
                     </div>
                     <div className="p-2.5 rounded-lg border bg-[var(--color-warning)]/5 text-[var(--color-warning)] border-amber-500/10">
                         <Activity size={16} />
diff --git a/frontend/src/pages/SuppliesPage.tsx b/frontend/src/pages/SuppliesPage.tsx
index 8f2c073..ace6d37 100644
--- a/frontend/src/pages/SuppliesPage.tsx
+++ b/frontend/src/pages/SuppliesPage.tsx
@@ -197,7 +197,7 @@ export default function SuppliesPage() {
                         <button
                             onClick={(e) => { e.stopPropagation(); handleMarkOrdered(item.id); }}
                             className={cn(
-                                "text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-lg border transition-all",
+                                "text-[10px] font-medium px-3 py-1.5 rounded-lg border transition-all",
                                 item.lastOrdered && new Date(item.lastOrdered).toDateString() === new Date().toDateString()
                                     ? "bg-emerald-50 text-[var(--color-primary)] border-emerald-100"
                                     : "bg-rose-50 text-rose-600 border-rose-100 hover:bg-rose-100"
@@ -254,7 +254,7 @@ export default function SuppliesPage() {
                     <div className="flex justify-between items-start">
                         <div>
                             <p className={cn(
-                                "text-[10px] font-bold uppercase tracking-widest mb-1",
+                                "text-[10px] font-medium mb-1",
                                 shoppingListCount > 0 ? "text-[var(--color-error)]" : "text-[var(--color-primary)]"
                             )}>
                                 Shortages Detected
@@ -290,7 +290,7 @@ export default function SuppliesPage() {
                         <button
                             onClick={() => setView('all')}
                             className={cn(
-                                "px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
+                                "px-6 py-2 rounded-lg text-xs font-medium transition-all",
                                 view === 'all'
                                     ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                     : "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
@@ -301,7 +301,7 @@ export default function SuppliesPage() {
                         <button
                             onClick={() => setView('shopping')}
                             className={cn(
-                                "px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all relative",
+                                "px-6 py-2 rounded-lg text-xs font-medium transition-all relative",
                                 view === 'shopping'
                                     ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                     : "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
@@ -315,7 +315,7 @@ export default function SuppliesPage() {
                         <button
                             onClick={() => setCategoryFilter('ALL')}
                             className={cn(
-                                "px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border",
+                                "px-4 py-2 rounded-lg text-[10px] font-medium transition-all border",
                                 categoryFilter === 'ALL'
                                     ? "bg-indigo-500 text-white border-indigo-500"
                                     : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] border-[var(--color-border-subtle)]"
@@ -328,7 +328,7 @@ export default function SuppliesPage() {
                                 key={cat}
                                 onClick={() => setCategoryFilter(cat)}
                                 className={cn(
-                                    "px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap",
+                                    "px-4 py-2 rounded-lg text-[10px] font-medium transition-all border whitespace-nowrap",
                                     categoryFilter === cat
                                         ? "bg-indigo-500 text-white border-indigo-500"
                                         : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] border-[var(--color-border-subtle)]"
diff --git a/frontend/src/pages/TasksPage.tsx b/frontend/src/pages/TasksPage.tsx
index 4de7d73..d5116ca 100644
--- a/frontend/src/pages/TasksPage.tsx
+++ b/frontend/src/pages/TasksPage.tsx
@@ -126,7 +126,7 @@ export default function TasksPage() {
                     </Card>
 
                     <Card className="p-4 bg-[var(--color-bg-tertiary)]/50 border-[var(--color-border-subtle)] border-dashed">
-                        <p className="text-[10px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-widest leading-relaxed">
+                        <p className="text-[10px] text-[var(--color-text-tertiary)] font-medium leading-relaxed">
                             <AlertCircle size={10} className="inline mr-1 mb-0.5" />
                             System Note:
                         </p>
diff --git a/frontend/src/pages/VisitorManagementPage.tsx b/frontend/src/pages/VisitorManagementPage.tsx
index ed3a3c7..b10f201 100644
--- a/frontend/src/pages/VisitorManagementPage.tsx
+++ b/frontend/src/pages/VisitorManagementPage.tsx
@@ -137,7 +137,7 @@ export default function VisitorManagementPage() {
                 <div className="flex justify-end gap-2">
                     <button
                         onClick={(e) => { e.stopPropagation(); handleCheckOut(v); }}
-                        className="text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 transition-all"
+                        className="text-[10px] font-medium px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 transition-all"
                     >
                         Sign Out
                     </button>
@@ -261,7 +261,7 @@ export default function VisitorManagementPage() {
                                 key={tab.id}
                                 onClick={() => setActiveTab(tab.id as TabType)}
                                 className={cn(
-                                    "px-5 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all flex items-center gap-2",
+                                    "px-5 py-2 rounded-lg text-xs font-medium transition-all flex items-center gap-2",
                                     activeTab === tab.id
                                         ? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
                                         : "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
@@ -396,7 +396,7 @@ export default function VisitorManagementPage() {
                                 ))}
                                 <button className="card border-dashed p-8 flex flex-col items-center justify-center gap-3 text-[var(--color-text-tertiary)] hover:text-indigo-500 hover:border-indigo-500/50 transition-all">
                                     <Plus className="animate-pulse" />
-                                    <span className="text-xs font-bold uppercase tracking-widest">Register Access Zone</span>
+                                    <span className="text-xs font-medium">Register Access Zone</span>
                                 </button>
                             </motion.div>
                         )}