From 3a73d1e53fce36eca28d336b84f36aa97e1ac8a6 Mon Sep 17 00:00:00 2001
From: "Joseph R. Quinn" <423821+quinnjr@users.noreply.github.com>
Date: Wed, 25 Feb 2026 10:25:11 -0500
Subject: [PATCH] refactor(dashboard): replace inline Tailwind chains with BEM
 component classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inline Tailwind utility chains scattered across 25 components made the
HTML hard to read and impossible to maintain consistently. Every button,
card header, and badge had its own hand-rolled utility soup, so visual
changes required hunting through dozens of files and there was no single
source of truth for what a "button" or "card" looked like.

Extract all recurring patterns into a BEM component library in app.css
using @apply, CSS nesting (Lightning CSS via Tailwind v4), and plain CSS
custom properties. No SCSS was introduced — Tailwind v4 with the vite
plugin handles nesting natively, avoiding SCSS/PostCSS import conflicts.

New BEM blocks:
- .badge (--running, --paused, --success, --error, --warning, --info,
  --primary) — replaces badge-running, badge-paused, etc.
- .btn (--sm, --md, --icon) × (--primary, --secondary, --ghost,
  --success, --danger) — single definition for all button variants
- .card, .card__header, .card__header-title, .card__body
- .form__label, .form__input, .form__textarea, .form__select
- .nav-tab (--main, --sub, --active) — replaces .main-tab and .mem-tab
- .mobile-menu, .mobile-menu--open, .mobile-menu__header,
  .mobile-menu__nav, .mobile-menu__nav-item (--active),
  .mobile-menu-overlay (--open) — replaces .mobile-nav-item + .open
- .alert (--success, --error, --warning, --info)
- .chat-bubble (--user, --assistant, --system)
- .token-health (--good, --warning, --expired)
- .pwa-banner, .pwa-banner__message, .pwa-banner__actions,
  .pwa-banner__install-btn, .pwa-banner__dismiss-btn
- .kg-canvas, .custom-scroll, .tab-scroll, .animate-subtle-pulse

All 25 component files updated to use the new class names. Inline utility
chains retained only where they express layout context unique to that
component rather than a reusable widget appearance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/dashboard/frontend/src/App.svelte         |  28 +-
 src/dashboard/frontend/src/app.css            | 355 ++++++++++++++----
 .../src/components/ActivityLog.svelte         |   4 +-
 .../frontend/src/components/ChatTab.svelte    |  16 +-
 .../src/components/ConversationHistory.svelte |  12 +-
 .../src/components/CredentialRow.svelte       |   6 +-
 .../frontend/src/components/GoalsTab.svelte   |  14 +-
 .../frontend/src/components/Header.svelte     |  24 +-
 .../src/components/KnowledgeGraphViz.svelte   |  10 +-
 .../src/components/KnowledgeTab.svelte        |   8 +-
 .../frontend/src/components/LiveFeed.svelte   |   2 +-
 .../src/components/LoginOverlay.svelte        |  27 +-
 .../src/components/MemoryPanel.svelte         |   8 +-
 .../src/components/OperationsTab.svelte       |  36 +-
 .../src/components/PendingActions.svelte      |  14 +-
 .../src/components/PersonaEditor.svelte       |  16 +-
 .../src/components/SecurityTab.svelte         |  15 +-
 .../src/components/SettingsTab.svelte         | 124 +++---
 .../frontend/src/components/SkillCard.svelte  |  32 +-
 .../src/components/SkillMarketplace.svelte    |  14 +-
 .../frontend/src/components/SkillsTab.svelte  |  16 +-
 .../frontend/src/components/StatsPanel.svelte |   4 +-
 .../frontend/src/components/ToolsTab.svelte   |   4 +-
 .../frontend/src/components/TrashTab.svelte   |  12 +-
 .../src/components/TwoFactorPanel.svelte      |  22 +-
 .../frontend/src/components/UsersPanel.svelte |  38 +-
 26 files changed, 516 insertions(+), 345 deletions(-)

diff --git a/src/dashboard/frontend/src/App.svelte b/src/dashboard/frontend/src/App.svelte
index 60704a5..d694de8 100644
--- a/src/dashboard/frontend/src/App.svelte
+++ b/src/dashboard/frontend/src/App.svelte
@@ -168,27 +168,27 @@
 <!-- Mobile menu overlay -->
 {#if dashboard.mobileMenuOpen}
     <div
-        class="mobile-menu-overlay open"
+        class="mobile-menu-overlay mobile-menu-overlay--open"
         onclick={() => dashboard.mobileMenuOpen = false}
         role="presentation"
     ></div>
-    <nav class="mobile-menu open">
-        <div class="flex items-center justify-between px-4 py-3 border-b border-border">
+    <nav class="mobile-menu mobile-menu--open">
+        <div class="mobile-menu__header">
             <span class="text-sm font-semibold text-primary-400">
                 <i class="fa-solid fa-robot mr-1"></i> {t('header.title')}
             </span>
             <button
                 onclick={() => dashboard.mobileMenuOpen = false}
-                class="p-1 text-text-muted hover:text-text"
+                class="btn btn--ghost btn--icon"
             >
                 <i class="fa-solid fa-xmark"></i>
             </button>
         </div>
-        <div class="py-2">
+        <div class="mobile-menu__nav">
             {#each tabs as tab}
                 <button
-                    class="mobile-nav-item"
-                    class:active={dashboard.currentTab === tab.id}
+                    class="mobile-menu__nav-item"
+                    class:mobile-menu__nav-item--active={dashboard.currentTab === tab.id}
                     onclick={() => switchTab(tab.id)}
                 >
                     <i class="fa-solid {tab.icon} w-5 text-center"></i>
@@ -210,21 +210,21 @@
 
     <!-- PWA install banner -->
     {#if showInstallBanner}
-        <div class="flex items-center justify-between gap-3 px-4 py-2.5 bg-primary-900/30 border-b border-primary-800/40">
-            <div class="flex items-center gap-2 text-sm text-primary-300">
+        <div class="pwa-banner">
+            <div class="pwa-banner__message">
                 <i class="fa-solid fa-download"></i>
                 <span>{t('pwa.install_hint')}</span>
             </div>
-            <div class="flex gap-2">
+            <div class="pwa-banner__actions">
                 <button
                     onclick={installPwa}
-                    class="px-3 py-1 text-xs font-medium rounded bg-primary-600 text-white hover:bg-primary-500 transition-colors"
+                    class="pwa-banner__install-btn"
                 >
                     {t('pwa.install')}
                 </button>
                 <button
                     onclick={dismissInstall}
-                    class="px-2 py-1 text-xs text-text-muted hover:text-text transition-colors"
+                    class="pwa-banner__dismiss-btn"
                 >
                     {t('pwa.dismiss')}
                 </button>
@@ -237,8 +237,8 @@
         <div class="hidden sm:flex border-b border-border mb-4 tab-scroll">
             {#each tabs as tab}
                 <button
-                    class="main-tab"
-                    class:active={dashboard.currentTab === tab.id}
+                    class="nav-tab nav-tab--main"
+                    class:nav-tab--active={dashboard.currentTab === tab.id}
                     onclick={() => switchTab(tab.id)}
                 >
                     <i class="fa-solid {tab.icon} mr-1.5"></i> {t('nav.' + tab.id)}
diff --git a/src/dashboard/frontend/src/app.css b/src/dashboard/frontend/src/app.css
index 1bdb069..4ce7c07 100644
--- a/src/dashboard/frontend/src/app.css
+++ b/src/dashboard/frontend/src/app.css
@@ -99,7 +99,23 @@
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
 }
 
-/* Custom scrollbar */
+/* ================================================================
+   Animations
+   ================================================================ */
+
+@keyframes subtle-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+.animate-subtle-pulse {
+    animation: subtle-pulse 2s ease-in-out infinite;
+}
+
+/* ================================================================
+   Custom Scrollbar Utility
+   ================================================================ */
+
 .custom-scroll::-webkit-scrollbar {
     width: 6px;
 }
@@ -113,126 +129,240 @@
     border-radius: 3px;
 }
 
-/* Badge states */
-.badge-running {
+/* ================================================================
+   Tab Scroll Container
+   ================================================================ */
+
+.tab-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+}
+
+.tab-scroll::-webkit-scrollbar {
+    display: none;
+}
+
+/* ================================================================
+   Badge Component
+   ================================================================ */
+
+.badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full font-medium;
+    font-size: 11px;
+}
+
+.badge--running {
     background: rgba(0, 150, 136, 0.15);
     color: var(--color-success-500);
 }
 
-.badge-paused {
+.badge--paused {
     background: rgba(255, 193, 7, 0.15);
     color: var(--color-warning-500);
 }
 
-/* Main tabs */
-.main-tab {
-    border: none;
-    border-radius: 0;
-    border-bottom: 2px solid transparent;
-    padding: 10px 20px;
-    font-size: 14px;
-    color: var(--color-text-muted);
-    background: transparent;
-    font-weight: 500;
-    cursor: pointer;
-    transition: color 0.15s;
-    white-space: nowrap;
+.badge--success { @apply bg-success-500/15 text-success-500; }
+.badge--error   { @apply bg-error-500/10 text-error-400; }
+.badge--warning { @apply bg-warning-500/15 text-warning-500; }
+.badge--info    { @apply bg-info-500/15 text-info-400; }
+.badge--primary { @apply bg-primary-950 text-primary-400; }
+
+/* ================================================================
+   Button Component
+   ================================================================ */
+
+.btn {
+    @apply inline-flex items-center justify-center border border-border rounded-md font-medium transition-colors cursor-pointer;
 }
 
-.main-tab.active {
-    color: var(--color-primary-500);
-    border-bottom-color: var(--color-primary-500);
+.btn:disabled {
+    @apply opacity-50 cursor-not-allowed;
 }
 
-.main-tab:hover {
-    background: transparent;
-    color: var(--color-text);
+/* Sizes */
+.btn--sm   { @apply px-3 py-1.5 text-xs; }
+.btn--md   { @apply px-4 py-2 text-sm; }
+.btn--icon { @apply p-2 text-sm; }
+
+/* Variants */
+.btn--primary {
+    @apply bg-primary-600 text-white border-transparent;
+}
+
+.btn--primary:hover:not(:disabled) {
+    @apply bg-primary-500;
+}
+
+.btn--secondary {
+    @apply bg-surface text-text-muted;
+}
+
+.btn--secondary:hover {
+    @apply bg-surface-elevated text-text;
+}
+
+.btn--ghost {
+    @apply bg-transparent border-transparent text-text-muted;
+}
+
+.btn--ghost:hover {
+    @apply text-text;
+}
+
+.btn--success {
+    @apply text-success-500;
+}
+
+.btn--success:hover {
+    @apply bg-success-500/10 border-success-500;
+}
+
+.btn--danger {
+    @apply text-error-500;
+}
+
+.btn--danger:hover {
+    @apply bg-error-500/10 border-error-500;
+}
+
+/* ================================================================
+   Card / Panel Component
+   ================================================================ */
+
+.card {
+    @apply bg-surface border border-border rounded-lg shadow-sm overflow-hidden;
+}
+
+.card__header {
+    @apply flex items-center justify-between px-4 py-3 border-b border-border;
+}
+
+.card__header-title {
+    @apply text-xs font-semibold uppercase tracking-wider text-text-muted;
+}
+
+.card__body {
+    @apply p-4;
+}
+
+/* ================================================================
+   Form Controls
+   ================================================================ */
+
+.form__label {
+    @apply block text-xs font-medium text-text-muted uppercase tracking-wide mb-1;
+}
+
+.form__input {
+    @apply w-full px-3 py-2 rounded-md border border-border bg-background text-text text-sm outline-none;
+}
+
+.form__input:focus {
+    @apply border-primary-500 ring-1 ring-primary-900;
 }
 
-/* Memory sub-tabs */
-.mem-tab {
+.form__input::placeholder {
+    @apply text-text-subtle;
+}
+
+.form__textarea {
+    @apply w-full px-3 py-2 rounded-md border border-border bg-background text-text text-sm outline-none resize-none;
+}
+
+.form__textarea:focus {
+    @apply border-primary-500 ring-1 ring-primary-900;
+}
+
+.form__textarea::placeholder {
+    @apply text-text-subtle;
+}
+
+.form__select {
+    @apply w-full px-3 py-2 rounded-md border border-border bg-background text-text text-sm outline-none;
+}
+
+.form__select:focus {
+    @apply border-primary-500 ring-1 ring-primary-900;
+}
+
+/* ================================================================
+   Nav Tab Component (replaces .main-tab and .mem-tab)
+   ================================================================ */
+
+.nav-tab {
     border: none;
     border-radius: 0;
     border-bottom: 2px solid transparent;
-    padding: 8px 12px;
-    font-size: 13px;
-    color: var(--color-text-muted);
     background: transparent;
+    font-weight: 500;
     cursor: pointer;
     transition: color 0.15s;
+    white-space: nowrap;
+    @apply text-text-muted;
 }
 
-.mem-tab.active {
-    color: var(--color-primary-500);
-    border-bottom-color: var(--color-primary-500);
-}
-
-.mem-tab:hover {
+.nav-tab:hover {
     background: transparent;
-    color: var(--color-text);
+    @apply text-text;
 }
 
-/* Pulse animation for active tool indicator */
-@keyframes subtle-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
-}
+.nav-tab--main { @apply py-2.5 px-5 text-sm; }
 
-.animate-subtle-pulse {
-    animation: subtle-pulse 2s ease-in-out infinite;
+.nav-tab--sub {
+    padding: 8px 12px;
+    font-size: 13px;
 }
 
-/* Mobile responsive tab bar */
-.tab-scroll {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-}
-.tab-scroll::-webkit-scrollbar {
-    display: none;
+.nav-tab--active {
+    @apply text-primary-500;
+    border-bottom-color: var(--color-primary-500);
 }
 
-/* Mobile hamburger menu overlay */
+/* ================================================================
+   Mobile Navigation
+   ================================================================ */
+
 .mobile-menu-overlay {
-    position: fixed;
-    inset: 0;
+    @apply fixed inset-0 z-40;
     background: rgba(0, 0, 0, 0.5);
-    z-index: 40;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;
 }
-.mobile-menu-overlay.open {
+
+.mobile-menu-overlay--open {
     opacity: 1;
     pointer-events: auto;
 }
 
 .mobile-menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
+    @apply fixed top-0 left-0 bottom-0 bg-surface border-r border-border z-50 overflow-y-auto;
     width: 280px;
     max-width: 85vw;
-    background: var(--color-surface);
-    border-right: 1px solid var(--color-border);
-    z-index: 50;
     transform: translateX(-100%);
     transition: transform 0.25s ease;
-    overflow-y: auto;
 }
-.mobile-menu.open {
+
+.mobile-menu--open {
     transform: translateX(0);
 }
 
-/* Mobile tab items in sidebar */
-.mobile-nav-item {
+.mobile-menu__header {
+    @apply flex items-center justify-between px-4 py-3 border-b border-border;
+}
+
+.mobile-menu__nav {
+    @apply py-2;
+}
+
+.mobile-menu__nav-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1.25rem;
     font-size: 0.9375rem;
-    color: var(--color-text-muted);
+    @apply text-text-muted;
     transition: color 0.15s, background 0.15s;
     cursor: pointer;
     border: none;
@@ -240,33 +370,92 @@
     width: 100%;
     text-align: left;
 }
-.mobile-nav-item:hover {
-    color: var(--color-text);
-    background: var(--color-surface-elevated);
+
+.mobile-menu__nav-item:hover {
+    @apply text-text bg-surface-elevated;
 }
-.mobile-nav-item.active {
-    color: var(--color-primary-500);
-    background: var(--color-surface-muted);
+
+.mobile-menu__nav-item--active {
+    @apply text-primary-500 bg-surface-muted;
     border-left: 3px solid var(--color-primary-500);
 }
 
-/* Knowledge graph canvas */
+/* ================================================================
+   Alert / Message Component
+   ================================================================ */
+
+.alert {
+    @apply rounded-md p-3 text-sm;
+}
+
+.alert--success { @apply bg-success-500/10 border border-success-500/30 text-success-500; }
+.alert--error   { @apply bg-error-500/10 border border-error-500/30 text-error-500; }
+.alert--warning { @apply bg-warning-500/10 border border-warning-500/30 text-warning-500; }
+.alert--info    { @apply bg-info-500/10 border border-info-500/30 text-info-500; }
+
+/* ================================================================
+   Chat Bubble Component
+   ================================================================ */
+
+.chat-bubble {
+    @apply rounded-lg px-3 py-2 text-sm;
+}
+
+.chat-bubble--user {
+    @apply bg-primary-600 text-white rounded-br-sm;
+}
+
+.chat-bubble--assistant {
+    @apply bg-surface-elevated border border-border rounded-bl-sm;
+}
+
+.chat-bubble--system {
+    @apply text-text-subtle italic bg-surface-muted rounded-full px-3 py-1;
+    font-size: 11px;
+}
+
+/* ================================================================
+   Knowledge Graph Canvas
+   ================================================================ */
+
 .kg-canvas {
-    width: 100%;
+    @apply w-full rounded-lg cursor-grab;
     height: 500px;
-    border-radius: var(--radius-lg);
-    cursor: grab;
 }
+
 .kg-canvas:active {
     cursor: grabbing;
 }
 
-/* Token health indicators */
-.token-health-good { color: var(--color-success-500); }
-.token-health-warning { color: var(--color-warning-500); }
-.token-health-expired { color: var(--color-error-500); }
+/* ================================================================
+   Token Health Indicators
+   ================================================================ */
+
+.token-health--good    { @apply text-success-500; }
+.token-health--warning { @apply text-warning-500; }
+.token-health--expired { @apply text-error-500; }
+
+/* ================================================================
+   PWA Install Banner
+   ================================================================ */
 
-/* PWA install banner */
-.pwa-install-btn {
+.pwa-banner {
+    @apply flex items-center justify-between gap-3 px-4 py-2.5 bg-primary-900/30 border-b border-primary-800/40;
+}
+
+.pwa-banner__message {
+    @apply flex items-center gap-2 text-sm text-primary-300;
+}
+
+.pwa-banner__actions {
+    @apply flex gap-2;
+}
+
+.pwa-banner__install-btn {
+    @apply px-3 py-1 text-xs font-medium rounded bg-primary-600 text-white hover:bg-primary-500 transition-colors;
     animation: subtle-pulse 3s ease-in-out 2;
 }
+
+.pwa-banner__dismiss-btn {
+    @apply px-2 py-1 text-xs text-text-muted hover:text-text transition-colors;
+}
diff --git a/src/dashboard/frontend/src/components/ActivityLog.svelte b/src/dashboard/frontend/src/components/ActivityLog.svelte
index fd50a9b..b0edd90 100644
--- a/src/dashboard/frontend/src/components/ActivityLog.svelte
+++ b/src/dashboard/frontend/src/components/ActivityLog.svelte
@@ -26,8 +26,8 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted border-b border-border">
+<section class="card">
+    <h2 class="card__header-title px-4 py-3 border-b border-border">
         <i class="fa-solid fa-list-check mr-1.5"></i> Activity Log
     </h2>
     <div class="p-3 max-h-96 overflow-y-auto custom-scroll">
diff --git a/src/dashboard/frontend/src/components/ChatTab.svelte b/src/dashboard/frontend/src/components/ChatTab.svelte
index dad34c5..1ed4b94 100644
--- a/src/dashboard/frontend/src/components/ChatTab.svelte
+++ b/src/dashboard/frontend/src/components/ChatTab.svelte
@@ -101,7 +101,7 @@
                 {#if msg.role === 'user'}
                     <div class="flex justify-end">
                         <div class="max-w-[70%] min-w-[120px]">
-                            <div class="bg-primary-600 text-white rounded-lg rounded-br-sm px-3 py-2 text-sm whitespace-pre-wrap break-words">
+                            <div class="chat-bubble chat-bubble--user whitespace-pre-wrap break-words">
                                 {msg.content}
                             </div>
                             <div class="text-[10px] text-text-subtle mt-0.5 text-right">
@@ -112,7 +112,7 @@
                 {:else if msg.role === 'assistant'}
                     <div class="flex justify-start">
                         <div class="max-w-[70%] min-w-[120px]">
-                            <div class="bg-surface-elevated border border-border rounded-lg rounded-bl-sm px-3 py-2 text-sm whitespace-pre-wrap break-words">
+                            <div class="chat-bubble chat-bubble--assistant whitespace-pre-wrap break-words">
                                 {msg.content}
                             </div>
                             <div class="text-[10px] text-text-subtle mt-0.5">
@@ -123,7 +123,7 @@
                 {:else}
                     <!-- system messages -->
                     <div class="flex justify-center">
-                        <div class="text-[11px] text-text-subtle italic px-3 py-1 bg-surface-muted rounded-full max-w-[80%] truncate">
+                        <div class="chat-bubble chat-bubble--system max-w-[80%] truncate">
                             {msg.content}
                         </div>
                     </div>
@@ -133,7 +133,7 @@
             {#if sending}
                 <div class="flex justify-start">
                     <div class="min-w-[120px] max-w-[70%]">
-                        <div class="bg-surface-elevated border border-border rounded-lg rounded-bl-sm px-3 py-2 text-sm text-text-muted">
+                        <div class="chat-bubble chat-bubble--assistant text-text-muted">
                             {#if liveFeed.activeTool}
                                 <i class="fa-solid fa-gear fa-spin mr-1.5 text-primary-500"></i>
                                 <span class="text-primary-400 font-mono">{liveFeed.activeTool}</span>
@@ -166,16 +166,12 @@
                 placeholder="Type a message..."
                 disabled={sending}
                 rows="1"
-                class="flex-1 px-3 py-2 rounded-md border border-border bg-background text-text text-sm outline-none
-                       focus:border-primary-500 focus:ring-1 focus:ring-primary-500/50 font-sans
-                       placeholder:text-text-subtle disabled:opacity-50 disabled:cursor-not-allowed resize-none"
+                class="form__textarea flex-1 font-sans disabled:opacity-50 disabled:cursor-not-allowed"
             ></textarea>
             <button
                 onclick={send}
                 disabled={sending || !input.trim()}
-                class="px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium
-                       hover:bg-primary-500 transition-colors
-                       disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+                class="btn btn--primary btn--md shrink-0"
             >
                 {#if sending}
                     <i class="fa-solid fa-circle-notch fa-spin"></i>
diff --git a/src/dashboard/frontend/src/components/ConversationHistory.svelte b/src/dashboard/frontend/src/components/ConversationHistory.svelte
index dea4551..32752d2 100644
--- a/src/dashboard/frontend/src/components/ConversationHistory.svelte
+++ b/src/dashboard/frontend/src/components/ConversationHistory.svelte
@@ -74,12 +74,12 @@
     load();
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-clock-rotate-left mr-1.5"></i> {t('history.title')}
         </h2>
-        <span class="text-xs text-text-muted pr-3">
+        <span class="text-xs text-text-muted">
             {t('history.total', { total })}
         </span>
     </div>
@@ -90,7 +90,7 @@
             bind:value={query}
             onkeyup={handleKey}
             placeholder={t('history.search')}
-            class="flex-1 px-2.5 py-1.5 border border-border rounded-md bg-background text-text text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-900"
+            class="form__input flex-1"
         />
         <div class="flex gap-1">
             {#each [['all', t('history.all_roles')], ['user', t('history.user_only')], ['assistant', t('history.assistant_only')], ['system', t('history.system_only')]] as [value, label]}
@@ -136,7 +136,7 @@
             <button
                 onclick={loadMore}
                 disabled={loading}
-                class="px-4 py-1.5 text-sm border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors disabled:opacity-50"
+                class="btn btn--secondary btn--md disabled:opacity-50"
             >
                 {#if loading}
                     <i class="fa-solid fa-spinner fa-spin mr-1"></i>
diff --git a/src/dashboard/frontend/src/components/CredentialRow.svelte b/src/dashboard/frontend/src/components/CredentialRow.svelte
index 5cc3bb2..ac11ef9 100644
--- a/src/dashboard/frontend/src/components/CredentialRow.svelte
+++ b/src/dashboard/frontend/src/components/CredentialRow.svelte
@@ -77,13 +77,13 @@
         bind:value={inputValue}
         onkeyup={handleKey}
         placeholder={placeholder()}
-        class="flex-1 px-2 py-1 border border-border rounded-md bg-background text-text text-xs font-mono outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-900 placeholder:text-text-subtle"
+        class="form__input flex-1 text-xs font-mono"
     />
     <div class="flex gap-1 shrink-0">
         <button
             onclick={save}
             title={t('common.save')}
-            class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface text-success-500 hover:bg-success-500/10 hover:border-success-500 transition-colors"
+            class="btn btn--success btn--sm"
         >
             <i class="fa-solid fa-floppy-disk"></i>
         </button>
@@ -91,7 +91,7 @@
             <button
                 onclick={remove}
                 title={t('common.delete')}
-                class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface text-error-500 hover:bg-error-500/10 hover:border-error-500 transition-colors"
+                class="btn btn--danger btn--sm"
             >
                 <i class="fa-solid fa-trash-can"></i>
             </button>
diff --git a/src/dashboard/frontend/src/components/GoalsTab.svelte b/src/dashboard/frontend/src/components/GoalsTab.svelte
index 04b4ed7..d3c2eb7 100644
--- a/src/dashboard/frontend/src/components/GoalsTab.svelte
+++ b/src/dashboard/frontend/src/components/GoalsTab.svelte
@@ -129,9 +129,9 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-bullseye mr-1.5"></i> {t('goals.title')}
         </h2>
         <div class="flex items-center gap-2 pr-3">
@@ -152,7 +152,7 @@
             </span>
             <button
                 onclick={load}
-                class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+                class="btn btn--secondary btn--sm"
             >
                 <i class="fa-solid fa-arrows-rotate mr-1"></i> {t('common.refresh')}
             </button>
@@ -225,20 +225,20 @@
                                     </button>
                                     <button
                                         onclick={() => updateStatus(goal.id, 'cancelled')}
-                                        class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface text-error-400 hover:bg-error-500/10 hover:border-error-500 transition-colors"
+                                        class="btn btn--danger btn--sm"
                                     >
                                         <i class="fa-solid fa-ban mr-1"></i>{t('common.cancel')}
                                     </button>
                                 {:else if goal.status === 'paused'}
                                     <button
                                         onclick={() => updateStatus(goal.id, 'active')}
-                                        class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface text-success-500 hover:bg-success-500/10 hover:border-success-500 transition-colors"
+                                        class="btn btn--success btn--sm"
                                     >
                                         <i class="fa-solid fa-play mr-1"></i>{t('goals.resume')}
                                     </button>
                                     <button
                                         onclick={() => updateStatus(goal.id, 'cancelled')}
-                                        class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface text-error-400 hover:bg-error-500/10 hover:border-error-500 transition-colors"
+                                        class="btn btn--danger btn--sm"
                                     >
                                         <i class="fa-solid fa-ban mr-1"></i>{t('common.cancel')}
                                     </button>
diff --git a/src/dashboard/frontend/src/components/Header.svelte b/src/dashboard/frontend/src/components/Header.svelte
index e01249c..b9c9d60 100644
--- a/src/dashboard/frontend/src/components/Header.svelte
+++ b/src/dashboard/frontend/src/components/Header.svelte
@@ -19,17 +19,17 @@
             disconnected = false;
 
             if (status.paused) {
-                statusClass = 'badge-paused';
+                statusClass = 'badge--paused';
                 statusIcon = 'fa-circle-pause';
                 statusText = t('header.paused');
             } else {
-                statusClass = 'badge-running';
+                statusClass = 'badge--running';
                 statusIcon = 'fa-circle-check';
                 statusText = t('header.running');
             }
         } catch {
             disconnected = true;
-            statusClass = 'text-error-500';
+            statusClass = 'badge--error';
             statusIcon = 'fa-circle-xmark';
             statusText = t('header.disconnected');
         }
@@ -67,7 +67,7 @@
     <div class="flex items-center gap-2 sm:gap-3">
         <!-- Mobile hamburger -->
         <button
-            class="sm:hidden p-2 -ml-1 text-text-muted hover:text-text transition-colors"
+            class="sm:hidden btn btn--ghost btn--icon -ml-1"
             onclick={() => dashboard.mobileMenuOpen = true}
             title={t('header.menu')}
         >
@@ -78,10 +78,10 @@
             <i class="fa-solid fa-robot mr-1"></i>
             <span class="hidden xs:inline">{t('header.title')}</span>
         </h1>
-        <span class="text-xs px-2 py-0.5 rounded-full font-medium {statusClass}">
+        <span class="badge {statusClass}">
             <i class="fa-solid {statusIcon} mr-1"></i><span class="hidden sm:inline">{statusText}</span>
         </span>
-        <span class="hidden md:inline-flex text-xs px-2 py-0.5 rounded-full font-medium bg-primary-950 text-primary-400">
+        <span class="hidden md:inline-flex badge badge--primary">
             <i class="fa-solid fa-screwdriver-wrench mr-1"></i>{t('header.tools_count', { count: toolsCount })}
         </span>
     </div>
@@ -89,7 +89,7 @@
         <!-- Theme toggle -->
         <button
             onclick={toggleTheme}
-            class="p-2 border border-border rounded-md bg-surface text-sm hover:bg-surface-elevated transition-colors text-text-muted"
+            class="btn btn--secondary btn--icon text-text-muted"
             title={dashboard.theme === 'dark' ? t('header.theme_light') : t('header.theme_dark')}
         >
             <i class="fa-solid {dashboard.theme === 'dark' ? 'fa-sun' : 'fa-moon'}"></i>
@@ -98,7 +98,7 @@
         <!-- Notification toggle -->
         <button
             onclick={requestNotifications}
-            class="p-2 border border-border rounded-md bg-surface text-sm hover:bg-surface-elevated transition-colors"
+            class="btn btn--secondary btn--icon"
             class:text-primary-400={dashboard.notificationsEnabled}
             class:text-text-muted={!dashboard.notificationsEnabled}
             title={dashboard.notificationsEnabled ? t('notifications.enabled') : t('notifications.enable')}
@@ -109,14 +109,14 @@
         {#if paused}
             <button
                 onclick={resume}
-                class="hidden sm:inline-flex px-4 py-2 border border-border rounded-md bg-surface text-sm hover:bg-surface-elevated transition-colors"
+                class="hidden sm:inline-flex btn btn--secondary btn--md"
             >
                 <i class="fa-solid fa-play mr-1"></i> {t('header.resume')}
             </button>
         {:else}
             <button
                 onclick={pause}
-                class="hidden sm:inline-flex px-4 py-2 border border-border rounded-md bg-surface text-sm hover:bg-surface-elevated transition-colors"
+                class="hidden sm:inline-flex btn btn--secondary btn--md"
             >
                 <i class="fa-solid fa-pause mr-1"></i> {t('header.pause')}
             </button>
@@ -124,7 +124,7 @@
 
         <button
             onclick={forceTick}
-            class="hidden sm:inline-flex px-4 py-2 border border-border rounded-md bg-surface text-sm hover:bg-surface-elevated transition-colors"
+            class="hidden sm:inline-flex btn btn--secondary btn--md"
         >
             <i class="fa-solid fa-bolt mr-1"></i> <span class="hidden lg:inline">{t('header.force_tick')}</span>
         </button>
@@ -141,7 +141,7 @@
 
         <button
             onclick={logout}
-            class="p-2 sm:px-4 sm:py-2 border border-border rounded-md bg-surface text-sm hover:bg-surface-elevated transition-colors text-text-muted"
+            class="btn btn--secondary btn--icon sm:px-4 sm:py-2 text-text-muted"
             title={t('header.sign_out')}
         >
             <i class="fa-solid fa-right-from-bracket"></i>
diff --git a/src/dashboard/frontend/src/components/KnowledgeGraphViz.svelte b/src/dashboard/frontend/src/components/KnowledgeGraphViz.svelte
index 6549520..ed94191 100644
--- a/src/dashboard/frontend/src/components/KnowledgeGraphViz.svelte
+++ b/src/dashboard/frontend/src/components/KnowledgeGraphViz.svelte
@@ -302,13 +302,13 @@
     <div class="flex items-center justify-between mb-2">
         <p class="text-xs text-text-subtle">{t('knowledge.graph_hint')}</p>
         <div class="flex gap-1">
-            <button onclick={() => zoom = Math.min(5, zoom * 1.3)} class="px-2 py-1 text-xs border border-border rounded bg-surface hover:bg-surface-elevated" title={t('knowledge.zoom_in')}>
+            <button onclick={() => zoom = Math.min(5, zoom * 1.3)} class="btn btn--secondary btn--icon" title={t('knowledge.zoom_in')}>
                 <i class="fa-solid fa-plus"></i>
             </button>
-            <button onclick={() => zoom = Math.max(0.2, zoom * 0.7)} class="px-2 py-1 text-xs border border-border rounded bg-surface hover:bg-surface-elevated" title={t('knowledge.zoom_out')}>
+            <button onclick={() => zoom = Math.max(0.2, zoom * 0.7)} class="btn btn--secondary btn--icon" title={t('knowledge.zoom_out')}>
                 <i class="fa-solid fa-minus"></i>
             </button>
-            <button onclick={resetView} class="px-2 py-1 text-xs border border-border rounded bg-surface hover:bg-surface-elevated" title={t('knowledge.reset_view')}>
+            <button onclick={resetView} class="btn btn--secondary btn--icon" title={t('knowledge.reset_view')}>
                 <i class="fa-solid fa-arrows-to-dot"></i>
             </button>
         </div>
@@ -316,7 +316,7 @@
 
     <canvas
         bind:this={canvas}
-        class="kg-canvas bg-surface-muted border border-border"
+        class="kg-canvas bg-surface-muted border border-border w-full"
         onmousedown={handleMouseDown}
         onmousemove={handleMouseMove}
         onmouseup={handleMouseUp}
@@ -339,7 +339,7 @@
         <div class="mt-3 p-3 rounded-lg bg-surface-elevated border border-border">
             <div class="flex items-center justify-between mb-1">
                 <span class="text-sm font-semibold text-text">{selectedNode.label}</span>
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full border border-border text-text-muted">{selectedNode.type}</span>
+                <span class="badge">{selectedNode.type}</span>
             </div>
             {#if selectedEdges.length > 0}
                 <div class="mt-2 space-y-1">
diff --git a/src/dashboard/frontend/src/components/KnowledgeTab.svelte b/src/dashboard/frontend/src/components/KnowledgeTab.svelte
index a1f1401..c736807 100644
--- a/src/dashboard/frontend/src/components/KnowledgeTab.svelte
+++ b/src/dashboard/frontend/src/components/KnowledgeTab.svelte
@@ -76,9 +76,9 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-diagram-project mr-1.5"></i> {t('knowledge.title')}
         </h2>
         <div class="flex items-center gap-2 pr-3">
@@ -131,7 +131,7 @@
             {#if viewingNeighbors}
                 <button
                     onclick={backToNodes}
-                    class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors mb-3"
+                    class="btn btn--secondary btn--sm mb-3"
                 >
                     <i class="fa-solid fa-arrow-left mr-1"></i> {t('knowledge.back')}
                 </button>
diff --git a/src/dashboard/frontend/src/components/LiveFeed.svelte b/src/dashboard/frontend/src/components/LiveFeed.svelte
index bc3bcbd..368f57e 100644
--- a/src/dashboard/frontend/src/components/LiveFeed.svelte
+++ b/src/dashboard/frontend/src/components/LiveFeed.svelte
@@ -109,7 +109,7 @@
     const isActive = $derived(liveFeed.isThinking || liveFeed.activeTool !== null);
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
+<section class="card">
     <div class="flex justify-between items-center border-b border-border">
         <button
             class="flex items-center gap-2 text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted hover:text-text transition-colors"
diff --git a/src/dashboard/frontend/src/components/LoginOverlay.svelte b/src/dashboard/frontend/src/components/LoginOverlay.svelte
index c810384..90d2d76 100644
--- a/src/dashboard/frontend/src/components/LoginOverlay.svelte
+++ b/src/dashboard/frontend/src/components/LoginOverlay.svelte
@@ -259,7 +259,7 @@
         </div>
 
         {#if error}
-            <div class="mb-4 px-3 py-2 rounded-md bg-error-950 border border-error-500/30 text-sm text-error-400">
+            <div class="alert alert--error mb-4">
                 <i class="fa-solid fa-circle-exclamation mr-1"></i> {error}
             </div>
         {/if}
@@ -304,7 +304,7 @@
                     {#if !showRecoveryInput}
                         <div>
                             <label class="block mb-3">
-                                <span class="text-xs font-medium text-text-muted uppercase tracking-wide">{t('login.authenticator_code')}</span>
+                                <span class="form__label">{t('login.authenticator_code')}</span>
                                 <input
                                     type="text"
                                     bind:value={totpCode}
@@ -323,8 +323,7 @@
                                 type="button"
                                 onclick={verifyTotp}
                                 disabled={loading || totpCode.trim().length !== 6}
-                                class="w-full px-4 py-2 rounded-md bg-primary-600 text-white font-medium text-sm
-                                       hover:bg-primary-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                class="btn btn--primary btn--md w-full disabled:opacity-50 disabled:cursor-not-allowed"
                             >
                                 {#if loading}
                                     <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('common.verifying')}
@@ -343,7 +342,7 @@
                     {:else}
                         <div>
                             <label class="block mb-3">
-                                <span class="text-xs font-medium text-text-muted uppercase tracking-wide">{t('login.recovery_code')}</span>
+                                <span class="form__label">{t('login.recovery_code')}</span>
                                 <input
                                     type="text"
                                     bind:value={recoveryCode}
@@ -361,8 +360,7 @@
                                 type="button"
                                 onclick={verifyTotp}
                                 disabled={loading || !recoveryCode.trim()}
-                                class="w-full px-4 py-2 rounded-md bg-primary-600 text-white font-medium text-sm
-                                       hover:bg-primary-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                class="btn btn--primary btn--md w-full disabled:opacity-50 disabled:cursor-not-allowed"
                             >
                                 {#if loading}
                                     <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('common.verifying')}
@@ -423,31 +421,27 @@
                 <form onsubmit={handleLogin}>
                     {#if multiUserMode}
                         <label class="block mb-3">
-                            <span class="text-xs font-medium text-text-muted uppercase tracking-wide">{t('login.username')}</span>
+                            <span class="form__label">{t('login.username')}</span>
                             <input
                                 type="text"
                                 bind:value={username}
                                 required
                                 autofocus
                                 disabled={loading}
-                                class="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-elevated text-text
-                                       placeholder-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary-500/50
-                                       disabled:opacity-50"
+                                class="form__input mt-1 disabled:opacity-50"
                                 placeholder={t('login.enter_username')}
                             />
                         </label>
                     {/if}
                     <label class="block mb-4">
-                        <span class="text-xs font-medium text-text-muted uppercase tracking-wide">{t('login.password')}</span>
+                        <span class="form__label">{t('login.password')}</span>
                         <input
                             type="password"
                             bind:value={password}
                             required
                             autofocus={!multiUserMode}
                             disabled={loading}
-                            class="mt-1 w-full px-3 py-2 rounded-md border border-border bg-surface-elevated text-text
-                                   placeholder-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary-500/50
-                                   disabled:opacity-50"
+                            class="form__input mt-1 disabled:opacity-50"
                             placeholder={t('login.enter_password_placeholder')}
                         />
                     </label>
@@ -455,8 +449,7 @@
                     <button
                         type="submit"
                         disabled={loading || !password}
-                        class="w-full px-4 py-2 rounded-md bg-primary-600 text-white font-medium text-sm
-                               hover:bg-primary-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                        class="btn btn--primary btn--md w-full disabled:opacity-50 disabled:cursor-not-allowed"
                     >
                         {#if loading}
                             <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('login.signing_in')}
diff --git a/src/dashboard/frontend/src/components/MemoryPanel.svelte b/src/dashboard/frontend/src/components/MemoryPanel.svelte
index e40f4f3..00164d3 100644
--- a/src/dashboard/frontend/src/components/MemoryPanel.svelte
+++ b/src/dashboard/frontend/src/components/MemoryPanel.svelte
@@ -60,15 +60,15 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted border-b border-border">
+<section class="card">
+    <h2 class="card__header-title px-4 py-3 border-b border-border">
         <i class="fa-solid fa-brain mr-1.5"></i> Memory
     </h2>
     <div class="flex px-4 border-b border-border">
         {#each memTabs as tab}
             <button
-                class="mem-tab"
-                class:active={dashboard.currentMemoryTab === tab.id}
+                class="nav-tab nav-tab--sub"
+                class:nav-tab--active={dashboard.currentMemoryTab === tab.id}
                 onclick={() => switchMemTab(tab.id)}
             >
                 <i class="fa-solid {tab.icon} mr-1"></i> {t('memory.' + tab.id)}
diff --git a/src/dashboard/frontend/src/components/OperationsTab.svelte b/src/dashboard/frontend/src/components/OperationsTab.svelte
index 081f46a..a60e553 100644
--- a/src/dashboard/frontend/src/components/OperationsTab.svelte
+++ b/src/dashboard/frontend/src/components/OperationsTab.svelte
@@ -315,7 +315,7 @@
                         </div>
                     {/if}
 
-                    <button class="btn-secondary text-sm mt-2" onclick={fetchHealth}>
+                    <button class="btn btn--secondary btn--sm mt-2" onclick={fetchHealth}>
                         <i class="fa-solid fa-rotate mr-1"></i> {t('common.refresh')}
                     </button>
                 </div>
@@ -334,7 +334,7 @@
                 {t('ops.prometheus_hint')}
             </p>
             <div class="mt-2">
-                <button class="btn-secondary text-sm" onclick={() => window.open('/metrics', '_blank')}>
+                <button class="btn btn--secondary btn--sm" onclick={() => window.open('/metrics', '_blank')}>
                     <i class="fa-solid fa-arrow-up-right-from-square mr-1"></i> {t('ops.view_raw_metrics')}
                 </button>
             </div>
@@ -355,9 +355,9 @@
                         {#if updateInfo.update_available}
                             <span class="text-sm text-muted">&rarr;</span>
                             <span class="font-mono text-green-400">v{updateInfo.latest_version}</span>
-                            <span class="bg-green-500/20 text-green-400 text-xs px-2 py-0.5 rounded">{t('ops.update_available')}</span>
+                            <span class="badge badge--success">{t('ops.update_available')}</span>
                         {:else}
-                            <span class="bg-surface text-muted text-xs px-2 py-0.5 rounded">{t('ops.up_to_date')}</span>
+                            <span class="badge">{t('ops.up_to_date')}</span>
                         {/if}
                     </div>
 
@@ -370,7 +370,7 @@
 
                     {#if updateInfo.update_available}
                         <div class="flex gap-2">
-                            <button class="btn-primary text-sm" onclick={applyUpdate} disabled={updateApplying}>
+                            <button class="btn btn--primary btn--md" onclick={applyUpdate} disabled={updateApplying}>
                                 {#if updateApplying}
                                     <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('ops.applying')}
                                 {:else}
@@ -378,7 +378,7 @@
                                 {/if}
                             </button>
                             {#if updateInfo.release_url}
-                                <a href={updateInfo.release_url} target="_blank" class="btn-secondary text-sm">
+                                <a href={updateInfo.release_url} target="_blank" class="btn btn--secondary btn--md">
                                     <i class="fa-solid fa-arrow-up-right-from-square mr-1"></i> {t('ops.view_release')}
                                 </a>
                             {/if}
@@ -390,7 +390,7 @@
                     <div class="bg-surface rounded p-2 text-sm text-muted">{updateMessage}</div>
                 {/if}
 
-                <button class="btn-secondary text-sm" onclick={checkForUpdate} disabled={updateLoading}>
+                <button class="btn btn--secondary btn--sm" onclick={checkForUpdate} disabled={updateLoading}>
                     {#if updateLoading}
                         <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('ops.checking')}
                     {:else}
@@ -413,7 +413,7 @@
                     <p class="text-xs text-muted mb-2">
                         Download a JSON export of all agent data (memory, activity, goals, cron jobs, stats).
                     </p>
-                    <button class="btn-primary text-sm" onclick={downloadBackup} disabled={backupLoading}>
+                    <button class="btn btn--primary btn--md" onclick={downloadBackup} disabled={backupLoading}>
                         {#if backupLoading}
                             <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('ops.exporting')}
                         {:else}
@@ -429,7 +429,7 @@
                     <p class="text-xs text-muted mb-2">
                         Upload a previously exported backup file. Existing data will be merged (INSERT OR REPLACE).
                     </p>
-                    <label class="btn-secondary text-sm inline-flex items-center cursor-pointer {restoreLoading ? 'opacity-50' : ''}">
+                    <label class="btn btn--secondary btn--md inline-flex items-center cursor-pointer {restoreLoading ? 'opacity-50' : ''}">
                         {#if restoreLoading}
                             <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('ops.restoring')}
                         {:else}
@@ -475,15 +475,15 @@
                         <!-- Add Peer -->
                         <div class="flex gap-2 items-end">
                             <div class="flex-1">
-                                <label class="text-xs text-muted block mb-1">{t('ops.add_peer')}</label>
+                                <label class="form__label">{t('ops.add_peer')}</label>
                                 <input
                                     type="text"
                                     bind:value={addPeerAddress}
                                     placeholder={t('ops.peer_placeholder')}
-                                    class="w-full bg-surface border border-border rounded px-3 py-1.5 text-sm font-mono"
+                                    class="form__input font-mono"
                                 />
                             </div>
-                            <button class="btn-primary text-sm" onclick={addPeer} disabled={addPeerLoading}>
+                            <button class="btn btn--primary btn--md" onclick={addPeer} disabled={addPeerLoading}>
                                 {#if addPeerLoading}
                                     <i class="fa-solid fa-spinner fa-spin mr-1"></i>
                                 {:else}
@@ -521,7 +521,7 @@
                         {/if}
                     {/if}
 
-                    <button class="btn-secondary text-sm" onclick={fetchFederation}>
+                    <button class="btn btn--secondary btn--sm" onclick={fetchFederation}>
                         <i class="fa-solid fa-rotate mr-1"></i> {t('common.refresh')}
                     </button>
                 </div>
@@ -560,7 +560,7 @@
                         {t('ops.switch_backend_hint')}
                     </p>
 
-                    <button class="btn-secondary text-sm" onclick={fetchBackends}>
+                    <button class="btn btn--secondary btn--sm" onclick={fetchBackends}>
                         <i class="fa-solid fa-rotate mr-1"></i> {t('common.refresh')}
                     </button>
                 </div>
@@ -607,7 +607,7 @@
                     </div>
                 </div>
             {:else}
-                <button class="btn-primary text-sm" onclick={() => { fetchSystemSpecs(); fetchRecommendations(); fetchOllamaStatus(); }}>
+                <button class="btn btn--primary btn--md" onclick={() => { fetchSystemSpecs(); fetchRecommendations(); fetchOllamaStatus(); }}>
                     <i class="fa-solid fa-wand-magic-sparkles mr-1"></i> {t('ops.advisor_detect')}
                 </button>
             {/if}
@@ -644,7 +644,7 @@
         </div>
 
         {#if configureMsg}
-            <div class="bg-green-500/10 border border-green-500/30 rounded p-3 text-sm text-green-400">
+            <div class="alert alert--success">
                 {configureMsg}
             </div>
         {/if}
@@ -660,7 +660,7 @@
                         <select
                             bind:value={useCaseFilter}
                             onchange={() => fetchRecommendations()}
-                            class="bg-surface border border-border rounded px-2 py-1 text-sm"
+                            class="form__select w-auto"
                         >
                             <option value="">{t('ops.advisor_all_use_cases')}</option>
                             <option value="general">{t('ops.advisor_uc_general')}</option>
@@ -669,7 +669,7 @@
                             <option value="chat">{t('ops.advisor_uc_chat')}</option>
                             <option value="multimodal">{t('ops.advisor_uc_multimodal')}</option>
                         </select>
-                        <button class="btn-secondary text-sm" onclick={fetchRecommendations}>
+                        <button class="btn btn--secondary btn--sm" onclick={fetchRecommendations}>
                             <i class="fa-solid fa-rotate mr-1"></i> {t('common.refresh')}
                         </button>
                     </div>
diff --git a/src/dashboard/frontend/src/components/PendingActions.svelte b/src/dashboard/frontend/src/components/PendingActions.svelte
index 8b3927e..5d22779 100644
--- a/src/dashboard/frontend/src/components/PendingActions.svelte
+++ b/src/dashboard/frontend/src/components/PendingActions.svelte
@@ -45,19 +45,19 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-clock-rotate-left mr-1.5"></i> {t('pending.title')}
         </h2>
         <div class="flex gap-1.5 pr-3">
             <button
                 onclick={approveAll}
-                class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface text-success-500 hover:bg-success-500/10 hover:border-success-500 transition-colors"
+                class="btn btn--success btn--sm"
             >{t('pending.approve_all')}</button>
             <button
                 onclick={rejectAll}
-                class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface text-error-500 hover:bg-error-500/10 hover:border-error-500 transition-colors"
+                class="btn btn--danger btn--sm"
             >{t('pending.reject_all')}</button>
         </div>
     </div>
@@ -76,13 +76,13 @@
                     <div class="flex gap-1.5 mt-2">
                         <button
                             onclick={() => approve(a.id)}
-                            class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface text-success-500 hover:bg-success-500/10 hover:border-success-500 transition-colors"
+                            class="btn btn--success btn--sm"
                         >
                             <i class="fa-solid fa-check mr-1"></i>{t('pending.approve')}
                         </button>
                         <button
                             onclick={() => reject(a.id)}
-                            class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface text-error-500 hover:bg-error-500/10 hover:border-error-500 transition-colors"
+                            class="btn btn--danger btn--sm"
                         >
                             <i class="fa-solid fa-xmark mr-1"></i>{t('pending.reject')}
                         </button>
diff --git a/src/dashboard/frontend/src/components/PersonaEditor.svelte b/src/dashboard/frontend/src/components/PersonaEditor.svelte
index 606e5b2..fe970c2 100644
--- a/src/dashboard/frontend/src/components/PersonaEditor.svelte
+++ b/src/dashboard/frontend/src/components/PersonaEditor.svelte
@@ -41,23 +41,22 @@
     onMount(loadPersona);
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4">
-    <div class="border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-masks-theater mr-1.5"></i> {t('persona.title')}
         </h2>
     </div>
-    <div class="p-4 space-y-3">
+    <div class="card__body space-y-3">
         <p class="text-xs text-text-subtle">{t('persona.personality_hint')}</p>
         <div>
-            <label class="text-xs font-medium text-text-muted uppercase tracking-wide mb-1 block">
+            <label class="form__label">
                 {t('persona.personality')}
             </label>
             <textarea
                 bind:value={personality}
                 rows="6"
-                class="w-full px-3 py-2 rounded-md border border-border bg-surface-elevated text-text text-sm
-                       placeholder-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary-500/50 resize-y font-sans"
+                class="form__textarea resize-y font-sans"
                 placeholder="You are a helpful, proactive AI assistant..."
             ></textarea>
         </div>
@@ -65,8 +64,7 @@
             <button
                 onclick={savePersona}
                 disabled={saving || !dirty}
-                class="px-4 py-2 rounded-md bg-primary-600 text-white font-medium text-sm
-                       hover:bg-primary-500 transition-colors disabled:opacity-50"
+                class="btn btn--primary btn--md disabled:opacity-50"
             >
                 {#if saving}
                     <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('persona.saving')}
diff --git a/src/dashboard/frontend/src/components/SecurityTab.svelte b/src/dashboard/frontend/src/components/SecurityTab.svelte
index e81d85e..9429b7b 100644
--- a/src/dashboard/frontend/src/components/SecurityTab.svelte
+++ b/src/dashboard/frontend/src/components/SecurityTab.svelte
@@ -204,7 +204,8 @@
             { id: '2fa' as const, label: t('security.twofa'), icon: 'fa-lock' },
         ] as section}
             <button
-                class="px-3 py-1.5 text-sm rounded-t transition-colors"
+                class="nav-tab nav-tab--sub px-3 py-1.5 text-sm rounded-t"
+                class:nav-tab--active={activeSection === section.id}
                 class:bg-card={activeSection === section.id}
                 class:text-heading={activeSection === section.id}
                 class:text-muted={activeSection !== section.id}
@@ -301,7 +302,7 @@
     <!-- Audit Trail Section -->
     {:else if activeSection === 'audit'}
         <div class="flex gap-2 mb-3">
-            <select class="bg-bg border border-border rounded px-2 py-1 text-sm" bind:value={auditFilter.event_type} onchange={() => loadAudit()}>
+            <select class="form__select" bind:value={auditFilter.event_type} onchange={() => loadAudit()}>
                 <option value="">{t('security.all_types')}</option>
                 <option value="tool_call">Tool Calls</option>
                 <option value="approval">Approvals</option>
@@ -313,11 +314,11 @@
             <input
                 type="text"
                 placeholder={t('security.filter')}
-                class="bg-bg border border-border rounded px-2 py-1 text-sm flex-1"
+                class="form__input flex-1"
                 bind:value={auditFilter.tool}
                 onkeyup={(e) => { if ((e as KeyboardEvent).key === 'Enter') loadAudit(); }}
             />
-            <button class="btn btn-sm" onclick={() => loadAudit()}>
+            <button class="btn btn--secondary btn--sm" onclick={() => loadAudit()}>
                 <i class="fa-solid fa-rotate mr-1"></i>{t('common.refresh')}
             </button>
         </div>
@@ -505,7 +506,7 @@
         <div class="space-y-3">
             <div class="flex items-center justify-between mb-2">
                 <h3 class="text-lg font-bold text-heading"><i class="fa-solid fa-lock mr-2"></i>{t('security.pending_challenges')}</h3>
-                <button class="btn btn-sm" onclick={() => load2FA()}>
+                <button class="btn btn--secondary btn--sm" onclick={() => load2FA()}>
                     <i class="fa-solid fa-rotate mr-1"></i>{t('common.refresh')}
                 </button>
             </div>
@@ -532,10 +533,10 @@
                                 </div>
                                 <p class="text-sm text-muted mt-1">{challenge.description}</p>
                                 <div class="flex gap-2 mt-2">
-                                    <button class="btn btn-sm bg-green-600 hover:bg-green-500 text-white" onclick={() => confirm2FA(challenge.id)}>
+                                    <button class="btn btn--success btn--sm" onclick={() => confirm2FA(challenge.id)}>
                                         <i class="fa-solid fa-check mr-1"></i>{t('common.confirm')}
                                     </button>
-                                    <button class="btn btn-sm bg-red-600 hover:bg-red-500 text-white" onclick={() => reject2FA(challenge.id)}>
+                                    <button class="btn btn--danger btn--sm" onclick={() => reject2FA(challenge.id)}>
                                         <i class="fa-solid fa-xmark mr-1"></i>{t('security.reject')}
                                     </button>
                                 </div>
diff --git a/src/dashboard/frontend/src/components/SettingsTab.svelte b/src/dashboard/frontend/src/components/SettingsTab.svelte
index 97e181d..b6a16e4 100644
--- a/src/dashboard/frontend/src/components/SettingsTab.svelte
+++ b/src/dashboard/frontend/src/components/SettingsTab.svelte
@@ -252,19 +252,19 @@
 <ConversationHistory />
 
 <!-- Messaging Platforms -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4 mt-4">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4 mt-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-tower-broadcast mr-1.5"></i> {t('settings.messaging')}
         </h2>
         <button
             onclick={loadConfig}
-            class="mr-3 px-2.5 py-1 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+            class="btn btn--secondary btn--sm"
         >
             <i class="fa-solid fa-arrows-rotate mr-1"></i> {t('common.refresh')}
         </button>
     </div>
-    <div class="p-4 space-y-4">
+    <div class="card__body space-y-4">
         {#if !msgConfig}
             <p class="text-text-subtle text-sm italic text-center py-2">{t('common.loading')}</p>
         {:else}
@@ -279,11 +279,11 @@
                         </div>
                     </div>
                     {#if msgConfig.telegram.enabled && msgConfig.telegram.connected}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-green-900/40 text-green-400 border-green-800/50">{t('common.connected')}</span>
+                        <span class="badge badge--success">{t('common.connected')}</span>
                     {:else if msgConfig.telegram.enabled}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-red-900/40 text-red-400 border-red-800/50">{t('common.disconnected')}</span>
+                        <span class="badge badge--error">{t('common.disconnected')}</span>
                     {:else}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-zinc-800/60 text-text-subtle border-border">{t('common.disabled')}</span>
+                        <span class="badge">{t('common.disabled')}</span>
                     {/if}
                 </div>
                 <div class="p-3 space-y-2 text-sm">
@@ -340,13 +340,13 @@
                         </div>
                     </div>
                     {#if !msgConfig.whatsapp.enabled}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-zinc-800/60 text-text-subtle border-border">{t('common.disabled')}</span>
+                        <span class="badge">{t('common.disabled')}</span>
                     {:else if msgConfig.whatsapp.bridge_status === 'connected'}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-green-900/40 text-green-400 border-green-800/50">{t('common.connected')}</span>
+                        <span class="badge badge--success">{t('common.connected')}</span>
                     {:else if msgConfig.whatsapp.bridge_status === 'pairing'}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-amber-900/40 text-amber-400 border-amber-800/50">{t('settings.pairing')}</span>
+                        <span class="badge badge--warning">{t('settings.pairing')}</span>
                     {:else}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-red-900/40 text-red-400 border-red-800/50">{msgConfig.whatsapp.bridge_status}</span>
+                        <span class="badge badge--error">{msgConfig.whatsapp.bridge_status}</span>
                     {/if}
                 </div>
                 <div class="p-3 space-y-2 text-sm">
@@ -400,7 +400,7 @@
                                 {/if}
                                 <button
                                     onclick={loadConfig}
-                                    class="mt-3 px-4 py-1.5 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+                                    class="btn btn--secondary btn--sm mt-3"
                                 >
                                     <i class="fa-solid fa-arrows-rotate mr-1"></i> {t('settings.refresh_qr')}
                                 </button>
@@ -433,13 +433,13 @@
 </section>
 
 <!-- Authentication / SSO -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4">
-    <div class="border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-shield-halved mr-1.5"></i> {t('settings.dashboard_auth')}
         </h2>
     </div>
-    <div class="p-4 space-y-4">
+    <div class="card__body space-y-4">
         {#if !authInfo}
             <p class="text-text-subtle text-sm italic text-center py-2">{t('common.loading')}</p>
         {:else}
@@ -452,9 +452,9 @@
                             <span class="text-sm font-medium text-text">{t('settings.password_login')}</span>
                         </div>
                         {#if authInfo.password_enabled}
-                            <span class="text-xs px-2 py-0.5 rounded-full border bg-green-900/40 text-green-400 border-green-800/50">{t('common.enabled')}</span>
+                            <span class="badge badge--success">{t('common.enabled')}</span>
                         {:else}
-                            <span class="text-xs px-2 py-0.5 rounded-full border bg-zinc-800/60 text-text-subtle border-border">{t('common.disabled')}</span>
+                            <span class="badge">{t('common.disabled')}</span>
                         {/if}
                     </div>
                     <div class="p-3 text-sm text-text-subtle">
@@ -474,11 +474,11 @@
                             <span class="text-sm font-medium text-text">{t('settings.sso_providers')}</span>
                         </div>
                         {#if authInfo.sso_providers.length > 0}
-                            <span class="text-xs px-2 py-0.5 rounded-full border bg-green-900/40 text-green-400 border-green-800/50">
+                            <span class="badge badge--success">
                                 {t('settings.sso_configured', { count: authInfo.sso_providers.length })}
                             </span>
                         {:else}
-                            <span class="text-xs px-2 py-0.5 rounded-full border bg-zinc-800/60 text-text-subtle border-border">{t('common.none')}</span>
+                            <span class="badge">{t('common.none')}</span>
                         {/if}
                     </div>
                     <div class="p-3">
@@ -488,7 +488,7 @@
                                     <div class="flex items-center gap-2 p-2 rounded-md bg-surface border border-border/50">
                                         <i class="{provider.icon} text-sm w-5 text-center"></i>
                                         <span class="text-sm text-text">{provider.name}</span>
-                                        <span class="text-xs px-1.5 py-0.5 rounded bg-primary-900/30 text-primary-400 border border-primary-800/30 ml-auto">SSO</span>
+                                        <span class="badge badge--primary ml-auto">SSO</span>
                                     </div>
                                 {/each}
                             </div>
@@ -502,11 +502,9 @@
             </div>
 
             {#if !authInfo.password_enabled && authInfo.sso_providers.length === 0}
-                <div class="p-3 rounded-lg bg-red-900/20 border border-red-800/40">
-                    <p class="text-sm text-red-400">
-                        <i class="fa-solid fa-triangle-exclamation mr-1"></i>
-                        {t('settings.lockout_warning')}
-                    </p>
+                <div class="alert alert--error">
+                    <i class="fa-solid fa-triangle-exclamation mr-1"></i>
+                    {t('settings.lockout_warning')}
                 </div>
             {/if}
 
@@ -528,25 +526,25 @@ sso_allowed_emails = ["you@example.com"]</code>
 </section>
 
 <!-- Two-Factor Authentication -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4">
-    <div class="border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-lock mr-1.5"></i> {t('settings.twofa')}
         </h2>
     </div>
-    <div class="p-4">
+    <div class="card__body">
         <TwoFactorPanel />
     </div>
 </section>
 
 <!-- OAuth Connections -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-link mr-1.5"></i> {t('settings.oauth')}
         </h2>
         {#if oauth}
-            <span class="text-xs text-text-muted pr-3">
+            <span class="text-xs text-text-muted">
                 {connectedProviders(oauth.providers).reduce((n, p) => n + p.accounts.length, 0)} account{connectedProviders(oauth.providers).reduce((n, p) => n + p.accounts.length, 0) !== 1 ? 's' : ''}
             </span>
         {/if}
@@ -568,7 +566,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                         <div class="flex items-center gap-2">
                             <i class="{provider.icon} text-sm w-5 text-center"></i>
                             <span class="text-sm font-medium text-text">{provider.name}</span>
-                            <span class="text-xs px-1.5 py-0.5 rounded-full bg-green-900/40 text-green-400 border border-green-800/50">
+                            <span class="badge badge--success">
                                 {provider.accounts.length}
                             </span>
                         </div>
@@ -577,7 +575,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                                 <button
                                     onclick={(e) => { e.stopPropagation(); refreshToken(provider.id); }}
                                     disabled={refreshing !== null}
-                                    class="px-2 py-0.5 text-xs border border-border rounded bg-surface hover:bg-surface-elevated transition-colors disabled:opacity-50"
+                                    class="btn btn--secondary btn--icon disabled:opacity-50"
                                     title={t('settings.refresh_all')}
                                 >
                                     <i class="fa-solid fa-arrows-rotate" class:fa-spin={refreshing === `${provider.id}:all`}></i>
@@ -586,7 +584,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                             <a
                                 href={provider.authorize_url}
                                 onclick={(e) => e.stopPropagation()}
-                                class="px-2 py-0.5 text-xs border border-border rounded bg-surface hover:bg-surface-elevated transition-colors text-text-muted"
+                                class="btn btn--secondary btn--icon text-text-muted"
                                 title={t('settings.add_account')}
                             >
                                 <i class="fa-solid fa-plus"></i>
@@ -608,15 +606,15 @@ sso_allowed_emails = ["you@example.com"]</code>
                                             <span class="text-sm text-text truncate">{acct.email}</span>
                                             <!-- Token health indicator -->
                                             {#if isExpired}
-                                                <span class="token-health-expired text-[10px]" title={t('oauth.health_expired')}>
+                                                <span class="token-health--expired text-[10px]" title={t('oauth.health_expired')}>
                                                     <i class="fa-solid fa-circle-xmark"></i>
                                                 </span>
                                             {:else if isExpiringSoon}
-                                                <span class="token-health-warning text-[10px]" title={t('oauth.health_warning')}>
+                                                <span class="token-health--warning text-[10px]" title={t('oauth.health_warning')}>
                                                     <i class="fa-solid fa-circle-exclamation"></i>
                                                 </span>
                                             {:else}
-                                                <span class="token-health-good text-[10px]" title={t('oauth.health_good')}>
+                                                <span class="token-health--good text-[10px]" title={t('oauth.health_good')}>
                                                     <i class="fa-solid fa-circle-check"></i>
                                                 </span>
                                             {/if}
@@ -665,7 +663,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                                         <button
                                             onclick={() => refreshToken(provider.id, acct.account)}
                                             disabled={refreshing !== null}
-                                            class="px-2 py-1 text-xs border border-border rounded bg-surface hover:bg-surface-elevated transition-colors disabled:opacity-50"
+                                            class="btn btn--secondary btn--icon disabled:opacity-50"
                                             title={t('common.refresh')}
                                         >
                                             <i class="fa-solid fa-arrows-rotate" class:fa-spin={refreshing === acct.account}></i>
@@ -694,7 +692,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                             {#if provider.configured}
                                 <a
                                     href={provider.authorize_url}
-                                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-surface hover:bg-surface-elevated hover:border-text-subtle/30 transition-colors text-text"
+                                    class="btn btn--secondary btn--sm text-text"
                                 >
                                     <i class="{provider.icon}"></i> {provider.name}
                                 </a>
@@ -719,13 +717,13 @@ sso_allowed_emails = ["you@example.com"]</code>
 </section>
 
 <!-- Language -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4">
-    <div class="border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-language mr-1.5"></i> {t('settings.language')}
         </h2>
     </div>
-    <div class="p-4 space-y-3">
+    <div class="card__body space-y-3">
         <p class="text-xs text-text-subtle">{t('settings.language_hint')}</p>
         <div class="flex items-center gap-3">
             <select
@@ -744,8 +742,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                         }).catch(() => {});
                     }
                 }}
-                class="px-3 py-2 rounded-md border border-border bg-surface-elevated text-text text-sm
-                       focus:outline-none focus:ring-2 focus:ring-primary-500/50"
+                class="form__select w-auto"
             >
                 {#each Object.entries(SUPPORTED_LOCALES) as [code, name]}
                     <option value={code}>{name}</option>
@@ -756,13 +753,13 @@ sso_allowed_emails = ["you@example.com"]</code>
 </section>
 
 <!-- Timezone & Locale -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mb-4">
-    <div class="border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mb-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-clock mr-1.5"></i> {t('settings.timezone_locale')}
         </h2>
     </div>
-    <div class="p-4 space-y-4">
+    <div class="card__body space-y-4">
         {#if tzInfo}
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                 <div class="p-3 rounded-lg bg-surface-elevated border border-border">
@@ -783,7 +780,7 @@ sso_allowed_emails = ["you@example.com"]</code>
             <div class="space-y-3">
                 <div>
                     <div class="flex items-center gap-2 mb-1">
-                        <span class="text-xs font-medium text-text-muted uppercase tracking-wide">{t('settings.timezone')}</span>
+                        <span class="form__label mb-0">{t('settings.timezone')}</span>
                         <button
                             onclick={detectBrowserTimezone}
                             class="text-[10px] px-1.5 py-0.5 rounded border border-border bg-surface-elevated text-text-muted hover:text-text transition-colors"
@@ -797,8 +794,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                             bind:value={selectedTimezone}
                             list="tz-list"
                             placeholder={tzInfo.system_timezone || 'UTC'}
-                            class="w-full px-3 py-2 rounded-md border border-border bg-surface-elevated text-text text-sm
-                                   placeholder-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
+                            class="form__input"
                         />
                         <datalist id="tz-list">
                             {#each commonTimezones as tz}
@@ -814,7 +810,7 @@ sso_allowed_emails = ["you@example.com"]</code>
 
                 <div>
                     <div class="flex items-center gap-2 mb-1">
-                        <span class="text-xs font-medium text-text-muted uppercase tracking-wide">{t('settings.locale')}</span>
+                        <span class="form__label mb-0">{t('settings.locale')}</span>
                         <button
                             onclick={detectBrowserLocale}
                             class="text-[10px] px-1.5 py-0.5 rounded border border-border bg-surface-elevated text-text-muted hover:text-text transition-colors"
@@ -826,8 +822,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                         type="text"
                         bind:value={selectedLocale}
                         placeholder={tzInfo.system_locale || 'en-US'}
-                        class="w-full px-3 py-2 rounded-md border border-border bg-surface-elevated text-text text-sm
-                               placeholder-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
+                        class="form__input"
                     />
                     <p class="text-xs text-text-subtle mt-1">{t('settings.locale_hint', { default: tzInfo.system_locale })}</p>
                 </div>
@@ -836,8 +831,7 @@ sso_allowed_emails = ["you@example.com"]</code>
                     <button
                         onclick={saveTimezone}
                         disabled={tzSaving}
-                        class="px-4 py-2 rounded-md bg-primary-600 text-white font-medium text-sm
-                               hover:bg-primary-500 transition-colors disabled:opacity-50"
+                        class="btn btn--primary btn--md disabled:opacity-50"
                     >
                         {#if tzSaving}
                             <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('common.saving')}
@@ -857,13 +851,13 @@ sso_allowed_emails = ["you@example.com"]</code>
 </section>
 
 <!-- Configuration Hint -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <div class="border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-circle-info mr-1.5"></i> {t('settings.config_reference')}
         </h2>
     </div>
-    <div class="p-4 space-y-3 text-xs text-text-subtle">
+    <div class="card__body space-y-3 text-xs text-text-subtle">
         <p>{t('settings.config_hint')}</p>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
             <div class="p-3 rounded bg-surface-elevated border border-border/50">
diff --git a/src/dashboard/frontend/src/components/SkillCard.svelte b/src/dashboard/frontend/src/components/SkillCard.svelte
index eb65db2..9c740e9 100644
--- a/src/dashboard/frontend/src/components/SkillCard.svelte
+++ b/src/dashboard/frontend/src/components/SkillCard.svelte
@@ -199,25 +199,25 @@
         </div>
         <div class="flex items-center gap-2">
             {#if skill.skill_type === 'daemon'}
-                <span class="text-[11px] px-2 py-0.5 rounded-full font-medium bg-primary-950 text-primary-400">
+                <span class="badge badge--primary">
                     <i class="fa-solid fa-server mr-1"></i>daemon
                 </span>
             {:else}
-                <span class="text-[11px] px-2 py-0.5 rounded-full font-medium bg-warning-500/15 text-warning-500">
+                <span class="badge badge--warning">
                     <i class="fa-solid fa-bolt mr-1"></i>oneshot
                 </span>
             {/if}
 
             {#if !skill.enabled}
-                <span class="text-[11px] px-2 py-0.5 rounded-full font-medium bg-text-subtle/10 text-text-subtle">
+                <span class="badge">
                     <i class="fa-solid fa-ban mr-1"></i>disabled
                 </span>
             {:else if skill.running}
-                <span class="text-[11px] px-2 py-0.5 rounded-full font-medium bg-success-500/15 text-success-500">
+                <span class="badge badge--success">
                     <i class="fa-solid fa-circle-check mr-1"></i>running
                 </span>
             {:else}
-                <span class="text-[11px] px-2 py-0.5 rounded-full font-medium bg-error-500/12 text-error-400">
+                <span class="badge badge--error">
                     <i class="fa-solid fa-circle-stop mr-1"></i>stopped
                 </span>
             {/if}
@@ -249,7 +249,7 @@
             <div class="flex items-center gap-2 px-4 py-2 border-b border-border">
                 <button
                     onclick={toggleEnabled}
-                    class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface transition-colors {skill.enabled ? 'hover:bg-error-500/10 hover:border-error-500 text-error-400' : 'hover:bg-success-500/10 hover:border-success-500 text-success-500'}"
+                    class="btn btn--sm {skill.enabled ? 'btn--danger' : 'btn--success'}"
                 >
                     {#if skill.enabled}
                         <i class="fa-solid fa-power-off mr-1"></i>{t('skills.disable')}
@@ -259,13 +259,13 @@
                 </button>
                 <button
                     onclick={restart}
-                    class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+                    class="btn btn--secondary btn--sm"
                 >
                     <i class="fa-solid fa-rotate-right mr-1"></i>{t('skills.restart')}
                 </button>
                 <button
                     onclick={loadDetail}
-                    class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+                    class="btn btn--secondary btn--sm"
                 >
                     <i class="fa-solid fa-arrows-rotate mr-1"></i>Refresh
                 </button>
@@ -273,7 +273,7 @@
                 <button
                     onclick={deleteSkill}
                     disabled={deleting}
-                    class="px-3 py-1.5 text-xs border border-error-500/40 rounded-md bg-surface text-error-400 hover:bg-error-500/10 hover:border-error-500 transition-colors disabled:opacity-50"
+                    class="btn btn--danger btn--sm disabled:opacity-50"
                 >
                     {#if deleting}
                         <i class="fa-solid fa-spinner fa-spin mr-1"></i>{t('skills.deleting')}
@@ -348,7 +348,7 @@
                                         <button
                                             onclick={() => deleteEnvVar(key)}
                                             title={t('common.delete')}
-                                            class="px-2 py-0.5 text-xs border border-border rounded bg-surface text-error-500 hover:bg-error-500/10 hover:border-error-500 transition-colors shrink-0"
+                                            class="btn btn--danger btn--sm shrink-0"
                                         >
                                             <i class="fa-solid fa-trash-can"></i>
                                         </button>
@@ -371,7 +371,7 @@
                                     />
                                     <button
                                         onclick={addEnvVar}
-                                        class="px-2.5 py-1 text-xs border border-border rounded bg-surface text-success-500 hover:bg-success-500/10 hover:border-success-500 transition-colors shrink-0"
+                                        class="btn btn--success btn--sm shrink-0"
                                     >
                                         <i class="fa-solid fa-plus mr-1"></i>{t('skills.add')}
                                     </button>
@@ -399,7 +399,7 @@
                                 </span>
                                 <button
                                     onclick={loadLog}
-                                    class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+                                    class="btn btn--secondary btn--sm"
                                 >
                                     <i class="fa-solid fa-arrows-rotate mr-1"></i>{t('common.refresh')}
                                 </button>
@@ -481,7 +481,7 @@
                                 <button
                                     onclick={saveManifest}
                                     disabled={manifestSaving}
-                                    class="px-3 py-1.5 text-xs border border-border rounded-md bg-surface text-success-500 hover:bg-success-500/10 hover:border-success-500 transition-colors disabled:opacity-50"
+                                    class="btn btn--success btn--sm disabled:opacity-50"
                                 >
                                     {#if manifestSaving}
                                         <i class="fa-solid fa-spinner fa-spin mr-1"></i>{t('common.saving')}
@@ -491,19 +491,19 @@
                                 </button>
                             </div>
                             {#if manifestError}
-                                <div class="text-xs text-error-400 mb-2 p-2 bg-error-500/10 border border-error-500/30 rounded">
+                                <div class="alert alert--error text-xs mb-2">
                                     <i class="fa-solid fa-triangle-exclamation mr-1"></i>{manifestError}
                                 </div>
                             {/if}
                             {#if manifestSuccess}
-                                <div class="text-xs text-success-500 mb-2 p-2 bg-success-500/10 border border-success-500/30 rounded">
+                                <div class="alert alert--success text-xs mb-2">
                                     <i class="fa-solid fa-check mr-1"></i>{manifestSuccess}
                                 </div>
                             {/if}
                             <textarea
                                 bind:value={manifestEdit}
                                 spellcheck="false"
-                                class="w-full h-[320px] bg-background border border-border rounded-md p-3 text-[12px] font-mono text-text outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-900 resize-y leading-relaxed"
+                                class="form__textarea h-[320px] text-[12px] font-mono focus:ring-1 focus:ring-primary-900 resize-y leading-relaxed"
                             ></textarea>
                         </div>
                     {/if}
diff --git a/src/dashboard/frontend/src/components/SkillMarketplace.svelte b/src/dashboard/frontend/src/components/SkillMarketplace.svelte
index 15c0542..48b635a 100644
--- a/src/dashboard/frontend/src/components/SkillMarketplace.svelte
+++ b/src/dashboard/frontend/src/components/SkillMarketplace.svelte
@@ -126,16 +126,16 @@
     }
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden mt-4">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card mt-4">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-store mr-1.5"></i> {t('marketplace.title')}
         </h2>
         <a
             href="https://github.com/topics/safeclaw-skill"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-xs text-primary-400 hover:text-primary-300 pr-3 transition-colors"
+            class="text-xs text-primary-400 hover:text-primary-300 transition-colors"
         >
             <i class="fa-brands fa-github mr-1"></i> {t('marketplace.browse_github')}
         </a>
@@ -146,7 +146,7 @@
             type="text"
             bind:value={searchQuery}
             placeholder={t('marketplace.search')}
-            class="flex-1 px-2.5 py-1.5 border border-border rounded-md bg-background text-text text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-900"
+            class="form__input flex-1"
         />
         <div class="flex gap-1 flex-wrap">
             {#each categories as cat}
@@ -189,11 +189,11 @@
                     </div>
                     <div class="flex flex-col items-end gap-1 shrink-0">
                         {#if installStatus[skill.name] === 'ok'}
-                            <span class="text-xs text-success-500 font-medium">
+                            <span class="badge badge--success">
                                 <i class="fa-solid fa-check mr-1"></i>{t('marketplace.installed')}
                             </span>
                         {:else if installStatus[skill.name] === 'error'}
-                            <span class="text-xs text-error-500">{t('marketplace.failed')}</span>
+                            <span class="badge badge--error">{t('marketplace.failed')}</span>
                         {:else}
                             <button
                                 onclick={() => installSkill(skill)}
diff --git a/src/dashboard/frontend/src/components/SkillsTab.svelte b/src/dashboard/frontend/src/components/SkillsTab.svelte
index b299c44..cb0131c 100644
--- a/src/dashboard/frontend/src/components/SkillsTab.svelte
+++ b/src/dashboard/frontend/src/components/SkillsTab.svelte
@@ -92,9 +92,9 @@
 </script>
 
 <!-- Skills List -->
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <div class="flex justify-between items-center border-b border-border">
-        <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted">
+<section class="card">
+    <div class="card__header">
+        <h2 class="card__header-title">
             <i class="fa-solid fa-puzzle-piece mr-1.5"></i> {t('skills.title')}
         </h2>
         <div class="flex items-center gap-2 pr-3">
@@ -109,7 +109,7 @@
             </button>
             <button
                 onclick={load}
-                class="px-2.5 py-1 text-xs border border-border rounded-md bg-surface hover:bg-surface-elevated transition-colors"
+                class="btn btn--secondary btn--sm"
             >
                 <i class="fa-solid fa-arrows-rotate mr-1"></i> {t('common.refresh')}
             </button>
@@ -151,14 +151,14 @@
                     type="text"
                     bind:value={importLocation}
                     placeholder={importSource === 'git' ? t('skills.git_placeholder') : importSource === 'url' ? t('skills.url_placeholder') : t('skills.path_placeholder')}
-                    class="w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-text font-mono outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-900 placeholder:text-text-subtle"
+                    class="form__input font-mono"
                 />
                 <div class="flex items-center gap-2">
                     <input
                         type="text"
                         bind:value={importName}
                         placeholder={t('skills.name_placeholder')}
-                        class="flex-1 px-3 py-2 text-sm border border-border rounded-md bg-background text-text outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-900 placeholder:text-text-subtle"
+                        class="form__input flex-1"
                     />
                     <button
                         onclick={importSkill}
@@ -175,12 +175,12 @@
             </div>
 
             {#if importError}
-                <div class="mt-2 text-xs text-error-400 p-2 bg-error-500/10 border border-error-500/30 rounded">
+                <div class="alert alert--error mt-2">
                     <i class="fa-solid fa-triangle-exclamation mr-1"></i>{importError}
                 </div>
             {/if}
             {#if importSuccess}
-                <div class="mt-2 text-xs text-success-500 p-2 bg-success-500/10 border border-success-500/30 rounded">
+                <div class="alert alert--success mt-2">
                     <i class="fa-solid fa-check mr-1"></i>{importSuccess}
                 </div>
             {/if}
diff --git a/src/dashboard/frontend/src/components/StatsPanel.svelte b/src/dashboard/frontend/src/components/StatsPanel.svelte
index dc11051..4cf2ddc 100644
--- a/src/dashboard/frontend/src/components/StatsPanel.svelte
+++ b/src/dashboard/frontend/src/components/StatsPanel.svelte
@@ -20,8 +20,8 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted border-b border-border">
+<section class="card">
+    <h2 class="card__header-title px-4 py-3 border-b border-border">
         <i class="fa-solid fa-chart-bar mr-1.5"></i> {t('stats.title')}
     </h2>
     <div class="p-3 max-h-96 overflow-y-auto custom-scroll">
diff --git a/src/dashboard/frontend/src/components/ToolsTab.svelte b/src/dashboard/frontend/src/components/ToolsTab.svelte
index 09de5bf..44c0a2e 100644
--- a/src/dashboard/frontend/src/components/ToolsTab.svelte
+++ b/src/dashboard/frontend/src/components/ToolsTab.svelte
@@ -22,8 +22,8 @@
     });
 </script>
 
-<section class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
-    <h2 class="text-xs font-semibold px-4 py-3 uppercase tracking-wider text-text-muted border-b border-border">
+<section class="card">
+    <h2 class="card__header-title px-4 py-3 border-b border-border">
         <i class="fa-solid fa-screwdriver-wrench mr-1.5"></i> {t('tools.title')}
     </h2>
     <div class="p-3 max-h-[600px] overflow-y-auto custom-scroll">
diff --git a/src/dashboard/frontend/src/components/TrashTab.svelte b/src/dashboard/frontend/src/components/TrashTab.svelte
index c8da334..e5b2098 100644
--- a/src/dashboard/frontend/src/components/TrashTab.svelte
+++ b/src/dashboard/frontend/src/components/TrashTab.svelte
@@ -141,7 +141,7 @@
 
 <section class="space-y-4">
     <!-- Header with stats -->
-    <div class="bg-surface border border-border rounded-lg shadow-sm p-4">
+    <div class="card card__body">
         <div class="flex items-center justify-between">
             <div class="flex items-center gap-3">
                 <h2 class="text-xs font-semibold uppercase tracking-wider text-text-muted">
@@ -187,12 +187,12 @@
 
     <!-- Notifications -->
     {#if error}
-        <div class="bg-red-500/10 border border-red-500/30 text-red-400 text-sm rounded-lg px-4 py-2">
+        <div class="alert alert--error">
             <i class="fa-solid fa-circle-exclamation mr-1.5"></i> {error}
         </div>
     {/if}
     {#if successMsg}
-        <div class="bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm rounded-lg px-4 py-2">
+        <div class="alert alert--success">
             <i class="fa-solid fa-check-circle mr-1.5"></i> {successMsg}
         </div>
     {/if}
@@ -211,7 +211,7 @@
     {/if}
 
     <!-- Items list -->
-    <div class="bg-surface border border-border rounded-lg shadow-sm overflow-hidden">
+    <div class="card">
         {#if loading && items.length === 0}
             <div class="p-8 text-center text-text-subtle text-sm">
                 <i class="fa-solid fa-spinner fa-spin mr-1.5"></i> {t('common.loading')}
@@ -255,14 +255,14 @@
                             </div>
                             <div class="flex items-center gap-1.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                                 <button
-                                    class="text-xs px-2.5 py-1.5 rounded bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 hover:text-emerald-300 transition-colors"
+                                    class="btn btn--success btn--sm"
                                     title={t('trash.restore_title')}
                                     onclick={() => restore(entry.id)}
                                 >
                                     <i class="fa-solid fa-rotate-left mr-1"></i> {t('trash.restore')}
                                 </button>
                                 <button
-                                    class="text-xs px-2.5 py-1.5 rounded bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 text-red-400 hover:text-red-300 transition-colors"
+                                    class="btn btn--danger btn--sm"
                                     title={t('trash.delete_permanent_title')}
                                     onclick={() => permanentDelete(entry.id, entry.name)}
                                 >
diff --git a/src/dashboard/frontend/src/components/TwoFactorPanel.svelte b/src/dashboard/frontend/src/components/TwoFactorPanel.svelte
index 769c6dc..119208f 100644
--- a/src/dashboard/frontend/src/components/TwoFactorPanel.svelte
+++ b/src/dashboard/frontend/src/components/TwoFactorPanel.svelte
@@ -253,7 +253,7 @@
 {:else if status}
     <div class="space-y-4">
         {#if message}
-            <div class="px-3 py-2 rounded-md text-sm {messageType === 'error' ? 'bg-red-900/20 border border-red-800/40 text-red-400' : 'bg-green-900/20 border border-green-800/40 text-green-400'}">
+            <div class="alert {messageType === 'error' ? 'alert--error' : 'alert--success'}">
                 <i class="fa-solid {messageType === 'error' ? 'fa-circle-exclamation' : 'fa-check-circle'} mr-1"></i>
                 {message}
             </div>
@@ -270,9 +270,9 @@
                     </div>
                 </div>
                 {#if status.totp_enabled}
-                    <span class="text-xs px-2 py-0.5 rounded-full border bg-green-900/40 text-green-400 border-green-800/50">{t('twofa.enabled_badge')}</span>
+                    <span class="badge badge--success">{t('twofa.enabled_badge')}</span>
                 {:else}
-                    <span class="text-xs px-2 py-0.5 rounded-full border bg-zinc-800/60 text-text-subtle border-border">{t('twofa.disabled_badge')}</span>
+                    <span class="badge">{t('twofa.disabled_badge')}</span>
                 {/if}
             </div>
             <div class="p-4">
@@ -283,7 +283,7 @@
                     </p>
                     <div class="flex gap-2 items-end">
                         <div>
-                            <label class="text-xs text-text-muted block mb-1">{t('twofa.totp_code')}</label>
+                            <label class="form__label">{t('twofa.totp_code')}</label>
                             <input
                                 type="text"
                                 bind:value={disableCode}
@@ -310,7 +310,7 @@
                     </p>
                     <button
                         onclick={startTotpSetup}
-                        class="px-4 py-2 text-sm rounded bg-primary-600 text-white hover:bg-primary-500 transition-colors"
+                        class="btn btn--primary btn--md"
                     >
                         <i class="fa-solid fa-shield-halved mr-1"></i> {t('twofa.setup_authenticator')}
                     </button>
@@ -376,7 +376,7 @@
                                 </button>
                                 <button
                                     onclick={() => { setupStep = 'idle'; totpSecret = ''; otpauthUri = ''; }}
-                                    class="px-3 py-1.5 text-sm rounded border border-border text-text-muted hover:bg-surface-elevated transition-colors"
+                                    class="btn btn--secondary btn--sm"
                                 >
                                     {t('common.cancel')}
                                 </button>
@@ -399,11 +399,11 @@
                         </div>
                     </div>
                     {#if status.passkey_count > 0}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-green-900/40 text-green-400 border-green-800/50">
+                        <span class="badge badge--success">
                             {t('twofa.registered', { count: status.passkey_count })}
                         </span>
                     {:else}
-                        <span class="text-xs px-2 py-0.5 rounded-full border bg-zinc-800/60 text-text-subtle border-border">{t('twofa.none_badge')}</span>
+                        <span class="badge">{t('twofa.none_badge')}</span>
                     {/if}
                 </div>
                 <div class="p-4">
@@ -434,18 +434,18 @@
                     <!-- Register new passkey -->
                     <div class="flex items-end gap-2">
                         <div class="flex-1">
-                            <label class="text-xs text-text-muted block mb-1">{t('twofa.passkey_name')}</label>
+                            <label class="form__label">{t('twofa.passkey_name')}</label>
                             <input
                                 type="text"
                                 bind:value={passkeyName}
                                 placeholder={t('twofa.passkey_placeholder')}
-                                class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm"
+                                class="form__input"
                             />
                         </div>
                         <button
                             onclick={registerPasskey}
                             disabled={registeringPasskey}
-                            class="px-4 py-1.5 text-sm rounded bg-primary-600 text-white hover:bg-primary-500 transition-colors disabled:opacity-50 whitespace-nowrap"
+                            class="btn btn--primary btn--md disabled:opacity-50 whitespace-nowrap"
                         >
                             {#if registeringPasskey}
                                 <i class="fa-solid fa-spinner fa-spin mr-1"></i> {t('twofa.registering')}
diff --git a/src/dashboard/frontend/src/components/UsersPanel.svelte b/src/dashboard/frontend/src/components/UsersPanel.svelte
index d8f77ec..3aa32ef 100644
--- a/src/dashboard/frontend/src/components/UsersPanel.svelte
+++ b/src/dashboard/frontend/src/components/UsersPanel.svelte
@@ -140,7 +140,7 @@
             <i class="fa-solid fa-users mr-1"></i> {t('users.title')}
         </h3>
         {#if isAdmin}
-            <button class="btn-primary text-sm" onclick={() => showCreateForm = !showCreateForm}>
+            <button class="btn btn--primary btn--sm" onclick={() => showCreateForm = !showCreateForm}>
                 <i class="fa-solid fa-plus mr-1"></i> {t('users.add_user')}
             </button>
         {/if}
@@ -156,43 +156,43 @@
             <h4 class="text-sm font-medium">{t('users.create_user')}</h4>
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.username')} *</label>
-                    <input type="text" bind:value={newUsername} placeholder="jdoe" class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm" />
+                    <label class="form__label">{t('users.username')} *</label>
+                    <input type="text" bind:value={newUsername} placeholder="jdoe" class="form__input" />
                 </div>
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.display_name')}</label>
-                    <input type="text" bind:value={newDisplayName} placeholder="Jane Doe" class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm" />
+                    <label class="form__label">{t('users.display_name')}</label>
+                    <input type="text" bind:value={newDisplayName} placeholder="Jane Doe" class="form__input" />
                 </div>
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.role')}</label>
-                    <select bind:value={newRole} class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm">
+                    <label class="form__label">{t('users.role')}</label>
+                    <select bind:value={newRole} class="form__select">
                         <option value="admin">Admin</option>
                         <option value="user">User</option>
                         <option value="viewer">Viewer</option>
                     </select>
                 </div>
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.password')}</label>
-                    <input type="password" bind:value={newPassword} class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm" />
+                    <label class="form__label">{t('users.password')}</label>
+                    <input type="password" bind:value={newPassword} class="form__input" />
                 </div>
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.email')}</label>
-                    <input type="email" bind:value={newEmail} placeholder="jane@example.com" class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm" />
+                    <label class="form__label">{t('users.email')}</label>
+                    <input type="email" bind:value={newEmail} placeholder="jane@example.com" class="form__input" />
                 </div>
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.telegram_id')}</label>
-                    <input type="text" bind:value={newTelegramId} placeholder="123456789" class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm" />
+                    <label class="form__label">{t('users.telegram_id')}</label>
+                    <input type="text" bind:value={newTelegramId} placeholder="123456789" class="form__input" />
                 </div>
                 <div>
-                    <label class="text-xs text-muted block mb-1">{t('users.whatsapp_id')}</label>
-                    <input type="text" bind:value={newWhatsappId} placeholder="+15551234567" class="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm" />
+                    <label class="form__label">{t('users.whatsapp_id')}</label>
+                    <input type="text" bind:value={newWhatsappId} placeholder="+15551234567" class="form__input" />
                 </div>
             </div>
             <div class="flex gap-2">
-                <button class="btn-primary text-sm" onclick={createUser} disabled={!newUsername.trim()}>
+                <button class="btn btn--primary btn--sm" onclick={createUser} disabled={!newUsername.trim()}>
                     <i class="fa-solid fa-check mr-1"></i> {t('users.create')}
                 </button>
-                <button class="btn-secondary text-sm" onclick={() => showCreateForm = false}>{t('common.cancel')}</button>
+                <button class="btn btn--secondary btn--sm" onclick={() => showCreateForm = false}>{t('common.cancel')}</button>
             </div>
         </div>
     {/if}
@@ -216,7 +216,7 @@
                                 <span class="text-xs text-muted font-mono">@{user.username}</span>
                                 <span class="px-1.5 py-0.5 rounded text-xs font-semibold {roleColor(user.role)}">{user.role}</span>
                                 {#if !user.enabled}
-                                    <span class="px-1.5 py-0.5 rounded text-xs bg-red-500/20 text-red-400">{t('users.disabled')}</span>
+                                    <span class="badge badge--error">{t('users.disabled')}</span>
                                 {/if}
                             </div>
                             <div class="flex gap-3 text-xs text-muted mt-0.5">
@@ -239,7 +239,7 @@
                             <select
                                 value={user.role}
                                 onchange={(e) => changeRole(user, (e.target as HTMLSelectElement).value)}
-                                class="bg-bg border border-border rounded px-2 py-1 text-xs"
+                                class="form__select w-auto px-2 py-1 text-xs"
                             >
                                 <option value="admin">Admin</option>
                                 <option value="user">User</option>