apteva 0.4.41 → 0.4.48

package/src/web/components/auth/CreateAccountStep.tsx

@@ -75,13 +75,13 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
   return (
     <>
       <h2 className="text-2xl font-semibold mb-2">Create your account</h2>
-      <p className="text-[#666] mb-6">
+      <p className="text-[var(--color-text-muted)] mb-6">
         Set up your admin account to get started with apteva.
       </p>
 
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
-          <label htmlFor="username" className="block text-sm text-[#888] mb-1">
+          <label htmlFor="username" className="block text-sm text-[var(--color-text-secondary)] mb-1">
             Username
           </label>
           <input
@@ -92,13 +92,13 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
             placeholder="Choose a username"
             autoFocus
             required
-            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+            className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)]"
           />
-          <p className="text-xs text-[#666] mt-1">3-20 characters, letters, numbers, underscore</p>
+          <p className="text-xs text-[var(--color-text-muted)] mt-1">3-20 characters, letters, numbers, underscore</p>
         </div>
 
         <div>
-          <label htmlFor="password" className="block text-sm text-[#888] mb-1">
+          <label htmlFor="password" className="block text-sm text-[var(--color-text-secondary)] mb-1">
             Password
           </label>
           <input
@@ -108,13 +108,13 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
             onChange={e => setPassword(e.target.value)}
             placeholder="Enter a password"
             required
-            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+            className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)]"
           />
-          <p className="text-xs text-[#666] mt-1">Min 8 characters, uppercase, lowercase, number</p>
+          <p className="text-xs text-[var(--color-text-muted)] mt-1">Min 8 characters, uppercase, lowercase, number</p>
         </div>
 
         <div>
-          <label htmlFor="confirmPassword" className="block text-sm text-[#888] mb-1">
+          <label htmlFor="confirmPassword" className="block text-sm text-[var(--color-text-secondary)] mb-1">
             Confirm Password
           </label>
           <input
@@ -124,7 +124,7 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
             onChange={e => setConfirmPassword(e.target.value)}
             placeholder="Confirm your password"
             required
-            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+            className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)]"
           />
         </div>
 
@@ -132,14 +132,14 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
           <button
             type="button"
             onClick={() => setShowEmail(true)}
-            className="text-sm text-[#666] hover:text-[#888] transition"
+            className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition"
           >
             + Add email for password recovery (optional)
           </button>
         ) : (
           <div>
-            <label htmlFor="email" className="block text-sm text-[#888] mb-1">
-              Email <span className="text-[#666]">(optional)</span>
+            <label htmlFor="email" className="block text-sm text-[var(--color-text-secondary)] mb-1">
+              Email <span className="text-[var(--color-text-muted)]">(optional)</span>
             </label>
             <input
               id="email"
@@ -147,9 +147,9 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
               value={email}
               onChange={e => setEmail(e.target.value)}
               placeholder="For password recovery only"
-              className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+              className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)]"
             />
-            <p className="text-xs text-[#666] mt-1">Only used for password recovery, never shared</p>
+            <p className="text-xs text-[var(--color-text-muted)] mt-1">Only used for password recovery, never shared</p>
           </div>
         )}
 
@@ -162,13 +162,13 @@ export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
         <button
           type="submit"
           disabled={loading || !username || !password || !confirmPassword}
-          className="w-full bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
+          className="w-full bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
         >
           {loading ? "Creating account..." : "Create Account"}
         </button>
       </form>
 
-      <p className="text-xs text-[#666] mt-4 text-center">
+      <p className="text-xs text-[var(--color-text-muted)] mt-4 text-center">
         This will be your admin account with full access to apteva.
       </p>
     </>

package/src/web/components/auth/LoginPage.tsx

@@ -23,24 +23,24 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex items-center justify-center p-8">
+    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] flex items-center justify-center p-8">
       <div className="w-full max-w-md">
         {/* Logo */}
         <div className="text-center mb-8">
           <div className="flex items-center justify-center gap-2 mb-2">
-            <span className="text-[#f97316] text-3xl">&gt;_</span>
+            <span className="text-[var(--color-accent)] text-3xl">&gt;_</span>
             <span className="text-3xl tracking-wider">apteva</span>
           </div>
-          <p className="text-[#666]">Run AI agents locally</p>
+          <p className="text-[var(--color-text-muted)]">Run AI agents locally</p>
         </div>
 
-        <div className="bg-[#111] rounded-lg border border-[#1a1a1a] p-8">
+        <div className="bg-[var(--color-surface)] card p-8">
           <h2 className="text-2xl font-semibold mb-2">Welcome back</h2>
-          <p className="text-[#666] mb-6">Sign in to continue to apteva</p>
+          <p className="text-[var(--color-text-muted)] mb-6">Sign in to continue to apteva</p>
 
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label htmlFor="username" className="block text-sm text-[#888] mb-1">
+              <label htmlFor="username" className="block text-sm text-[var(--color-text-secondary)] mb-1">
                 Username
               </label>
               <input
@@ -51,12 +51,12 @@ export function LoginPage() {
                 placeholder="Enter your username"
                 autoFocus
                 required
-                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)]"
               />
             </div>
 
             <div>
-              <label htmlFor="password" className="block text-sm text-[#888] mb-1">
+              <label htmlFor="password" className="block text-sm text-[var(--color-text-secondary)] mb-1">
                 Password
               </label>
               <input
@@ -66,7 +66,7 @@ export function LoginPage() {
                 onChange={e => setPassword(e.target.value)}
                 placeholder="Enter your password"
                 required
-                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)]"
               />
             </div>
 
@@ -79,7 +79,7 @@ export function LoginPage() {
             <button
               type="submit"
               disabled={loading || !username || !password}
-              className="w-full bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
+              className="w-full bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
             >
               {loading ? "Signing in..." : "Sign In"}
             </button>

package/src/web/components/common/LoadingSpinner.tsx

@@ -7,7 +7,7 @@ interface LoadingSpinnerProps {
 
 export function LoadingSpinner({ message = "Loading...", fullScreen = false }: LoadingSpinnerProps) {
   const content = (
-    <div className="flex items-center gap-3 text-[#666]">
+    <div className="flex items-center gap-3 text-[var(--color-text-muted)]">
       <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
         <circle
           className="opacity-25"
@@ -30,7 +30,7 @@ export function LoadingSpinner({ message = "Loading...", fullScreen = false }: L
 
   if (fullScreen) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex items-center justify-center">
+      <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] flex items-center justify-center">
         {content}
       </div>
     );

package/src/web/components/common/Modal.tsx

@@ -8,7 +8,7 @@ interface ModalProps {
 export function Modal({ children, onClose }: ModalProps) {
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#111] rounded p-6 w-full max-w-xl lg:max-w-2xl border border-[#1a1a1a] max-h-[90vh] overflow-y-auto">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-xl lg:max-w-2xl max-h-[90vh] overflow-y-auto">
         {children}
       </div>
     </div>
@@ -37,22 +37,22 @@ export function ConfirmModal({
 }: ConfirmModalProps) {
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-sm">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm">
         {title && <h3 className="font-medium mb-2">{title}</h3>}
-        <p className="text-sm text-[#ccc] mb-4">{message}</p>
+        <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
         <div className="flex gap-2">
           <button
             onClick={onCancel}
-            className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+            className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] btn px-4 py-2 transition"
           >
             {cancelText}
           </button>
           <button
             onClick={onConfirm}
-            className={`flex-1 text-sm text-white px-4 py-2 rounded transition ${
+            className={`flex-1 text-sm text-white px-4 py-2 btn transition ${
               confirmVariant === "danger"
                 ? "bg-red-500 hover:bg-red-600"
-                : "bg-[#f97316] hover:bg-[#ea580c]"
+                : "bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]"
             }`}
           >
             {confirmText}
@@ -93,17 +93,17 @@ export function AlertModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-sm text-center">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm text-center">
         <div
           className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 ${iconColors[variant]}`}
         >
           <span className="text-xl">{icons[variant]}</span>
         </div>
         {title && <h3 className="font-medium mb-2">{title}</h3>}
-        <p className="text-sm text-[#ccc] mb-4">{message}</p>
+        <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
         <button
           onClick={onClose}
-          className="w-full text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+          className="w-full text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 btn transition"
         >
           {buttonText}
         </button>

package/src/web/components/common/Select.tsx

@@ -35,14 +35,14 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className={`w-full bg-[#0a0a0a] border border-[#222] rounded ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[#f97316] text-[#e0e0e0] hover:border-[#333] transition`}
+        className={`w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] btn ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)] hover:border-[var(--color-border-light)] transition`}
       >
-        <span className={selectedOption ? "text-[#e0e0e0]" : "text-[#666]"}>
+        <span className={selectedOption ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}>
           {selectedOption ? (
             <>
               {selectedOption.label}
               {selectedOption.recommended && (
-                <span className="text-[#f97316] text-xs ml-2">(Recommended)</span>
+                <span className="text-[var(--color-accent)] text-xs ml-2">(Recommended)</span>
               )}
             </>
           ) : placeholder}
@@ -51,7 +51,7 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
       </button>
 
       {isOpen && (
-        <div className="absolute z-50 w-full min-w-max mt-1 bg-[#111] border border-[#222] rounded shadow-lg max-h-60 overflow-y-auto scrollbar-hide">
+        <div className="absolute z-50 w-full min-w-max mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] shadow-lg max-h-60 overflow-y-auto scrollbar-hide" style={{ borderRadius: "var(--radius-button)" }}>
           {options.map((option) => (
             <button
               key={option.value}
@@ -60,18 +60,18 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
                 onChange(option.value);
                 setIsOpen(false);
               }}
-              className={`w-full ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between hover:bg-[#1a1a1a] transition ${
-                option.value === value ? "bg-[#1a1a1a] text-[#f97316]" : "text-[#e0e0e0]"
+              className={`w-full ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between hover:bg-[var(--color-surface-raised)] transition ${
+                option.value === value ? "bg-[var(--color-surface-raised)] text-[var(--color-accent)]" : "text-[var(--color-text)]"
               }`}
             >
               <span>
                 {option.label}
                 {option.recommended && (
-                  <span className="text-[#f97316] text-xs ml-2">(Recommended)</span>
+                  <span className="text-[var(--color-accent)] text-xs ml-2">(Recommended)</span>
                 )}
               </span>
               {option.value === value && (
-                <svg className="w-4 h-4 text-[#f97316]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-4 h-4 text-[var(--color-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                 </svg>
               )}
@@ -86,7 +86,7 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
 function ChevronIcon({ isOpen }: { isOpen: boolean }) {
   return (
     <svg
-      className={`w-4 h-4 text-[#666] transition-transform ${isOpen ? "rotate-180" : ""}`}
+      className={`w-4 h-4 text-[var(--color-text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`}
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"

package/src/web/components/connections/ConnectionsPage.tsx

@@ -21,22 +21,22 @@ export function ConnectionsPage() {
         <div className="flex items-center justify-between mb-6">
           <div>
             <h1 className="text-2xl font-semibold mb-1">Connections</h1>
-            <p className="text-[#666]">
+            <p className="text-[var(--color-text-muted)]">
               Manage external app connections, triggers, and webhooks.
             </p>
           </div>
         </div>
 
         {/* Tabs */}
-        <div className="flex gap-1 mb-6 bg-[#111] border border-[#1a1a1a] rounded-lg p-1 w-fit">
+        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] card p-1 w-fit">
           {tabs.map(tab => (
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
               className={`px-4 py-2 rounded text-sm font-medium transition ${
                 activeTab === tab.id
-                  ? "bg-[#1a1a1a] text-white"
-                  : "text-[#666] hover:text-[#888]"
+                  ? "bg-[var(--color-surface-raised)] text-white"
+                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
               }`}
             >
               {tab.label}

package/src/web/components/connections/IntegrationsTab.tsx

@@ -66,23 +66,23 @@ export function IntegrationsTab() {
 
   return (
     <div>
-      <p className="text-sm text-[#666] mb-4">
+      <p className="text-sm text-[var(--color-text-muted)] mb-4">
         Connect external apps via OAuth or API Key. Connected apps can be used for triggers and MCP integrations.
       </p>
 
       {/* Provider Selector — only show if multiple configured */}
       {providers.length > 1 && (
         <div className="flex items-center gap-2 mb-4">
-          <span className="text-xs text-[#666]">Provider:</span>
-          <div className="flex gap-1 bg-[#111] border border-[#1a1a1a] rounded-lg p-0.5">
+          <span className="text-xs text-[var(--color-text-muted)]">Provider:</span>
+          <div className="flex gap-1 bg-[var(--color-surface)] card p-0.5">
             {providers.map(p => (
               <button
                 key={p.id}
                 onClick={() => setSelectedProvider(p.id)}
                 className={`px-3 py-1 rounded text-xs font-medium transition ${
                   selectedProvider === p.id
-                    ? "bg-[#1a1a1a] text-white"
-                    : "text-[#666] hover:text-[#888]"
+                    ? "bg-[var(--color-surface-raised)] text-white"
+                    : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
                 }`}
               >
                 {p.name}
@@ -93,9 +93,9 @@ export function IntegrationsTab() {
       )}
 
       {providers.length === 0 ? (
-        <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-8 text-center">
-          <p className="text-[#666]">No integration providers configured.</p>
-          <p className="text-sm text-[#555] mt-1">Add API keys for Composio or AgentDojo in Settings.</p>
+        <div className="bg-[var(--color-surface)] card p-8 text-center">
+          <p className="text-[var(--color-text-muted)]">No integration providers configured.</p>
+          <p className="text-sm text-[var(--color-text-faint)] mt-1">Add API keys for Composio or AgentDojo in Settings.</p>
         </div>
       ) : (
         <IntegrationsPanel
@@ -109,15 +109,15 @@ export function IntegrationsTab() {
       {/* Trigger Types Panel */}
       {browsingToolkit && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-[#111] border border-[#333] rounded-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
-            <div className="p-4 border-b border-[#1a1a1a] flex items-center justify-between">
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
+            <div className="p-4 border-b border-[var(--color-border)] flex items-center justify-between">
               <div>
                 <h3 className="font-medium">Trigger Types</h3>
-                <p className="text-xs text-[#666]">{browsingToolkit}</p>
+                <p className="text-xs text-[var(--color-text-muted)]">{browsingToolkit}</p>
               </div>
               <button
                 onClick={() => { setBrowsingToolkit(null); setTriggerTypes([]); }}
-                className="text-[#666] hover:text-white transition text-lg px-2"
+                className="text-[var(--color-text-muted)] hover:text-white transition text-lg px-2"
               >
                 x
               </button>
@@ -125,28 +125,28 @@ export function IntegrationsTab() {
 
             <div className="flex-1 overflow-auto p-4">
               {typesLoading ? (
-                <div className="text-center py-8 text-[#666]">Loading trigger types...</div>
+                <div className="text-center py-8 text-[var(--color-text-muted)]">Loading trigger types...</div>
               ) : triggerTypes.length === 0 ? (
-                <div className="text-center py-8 text-[#666]">
+                <div className="text-center py-8 text-[var(--color-text-muted)]">
                   No trigger types available for this app.
                 </div>
               ) : (
                 <div className="space-y-2">
                   {triggerTypes.map(tt => (
-                    <div key={tt.slug} className="bg-[#0a0a0a] border border-[#1a1a1a] rounded-lg p-3">
+                    <div key={tt.slug} className="bg-[var(--color-bg)] card p-3">
                       <div className="flex items-start gap-3">
                         {tt.logo ? (
                           <img src={tt.logo} alt={tt.toolkit_name} className="w-6 h-6 rounded object-contain flex-shrink-0 mt-0.5" />
                         ) : (
-                          <div className="w-6 h-6 rounded bg-[#1a1a1a] flex items-center justify-center text-[10px] flex-shrink-0 mt-0.5">
+                          <div className="w-6 h-6 rounded bg-[var(--color-surface-raised)] flex items-center justify-center text-[10px] flex-shrink-0 mt-0.5">
                             {tt.toolkit_name?.[0]?.toUpperCase() || "?"}
                           </div>
                         )}
                         <div className="flex-1 min-w-0">
                           <div className="text-sm font-medium">{tt.name}</div>
-                          <div className="text-xs text-[#666] mt-0.5">{tt.description}</div>
+                          <div className="text-xs text-[var(--color-text-muted)] mt-0.5">{tt.description}</div>
                           <div className="flex items-center gap-2 mt-1.5">
-                            <span className="text-[10px] bg-[#1a1a1a] text-[#555] px-1.5 py-0.5 rounded font-mono">
+                            <span className="text-[10px] bg-[var(--color-surface-raised)] text-[var(--color-text-faint)] px-1.5 py-0.5 rounded font-mono">
                               {tt.slug}
                             </span>
                             <span className={`text-[10px] px-1.5 py-0.5 rounded ${

package/src/web/components/connections/OverviewTab.tsx

@@ -55,7 +55,7 @@ export function OverviewTab() {
   }, [authFetch, currentProjectId]);
 
   if (loading) {
-    return <div className="text-center py-12 text-[#666]">Loading...</div>;
+    return <div className="text-center py-12 text-[var(--color-text-muted)]">Loading...</div>;
   }
 
   const enabledSubs = subscriptions.filter(s => s.enabled);
@@ -73,9 +73,9 @@ export function OverviewTab() {
 
       {/* Subscriptions */}
       <section>
-        <h3 className="text-sm font-medium text-[#888] mb-3">Subscriptions ({subscriptions.length})</h3>
+        <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">Subscriptions ({subscriptions.length})</h3>
         {subscriptions.length === 0 ? (
-          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6 text-center text-[#666] text-sm">
+          <div className="bg-[var(--color-surface)] card p-6 text-center text-[var(--color-text-muted)] text-sm">
             No subscriptions yet. Go to the Triggers tab to create one.
           </div>
         ) : (
@@ -83,27 +83,27 @@ export function OverviewTab() {
             {subscriptions.map(sub => {
               const agent = agentMap.get(sub.agent_id);
               return (
-                <div key={sub.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-3 flex items-center gap-3">
-                  <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[#555]"}`} />
+                <div key={sub.id} className="bg-[var(--color-surface)] card p-3 flex items-center gap-3">
+                  <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[var(--color-text-faint)]"}`} />
                   <div className="flex-1 min-w-0">
                     <div className="text-sm font-medium truncate">
                       {sub.trigger_slug.replace(/_/g, " ").replace(/-/g, " ")}
                     </div>
-                    <div className="text-xs text-[#666]">
+                    <div className="text-xs text-[var(--color-text-muted)]">
                       {sub.trigger_instance_id
                         ? `ID: ${sub.trigger_instance_id.slice(0, 12)}...`
                         : "All instances"
                       }
                     </div>
                   </div>
-                  <div className="text-xs text-[#888] flex-shrink-0">
-                    <span className="text-[#555]">&rarr;</span>{" "}
-                    <span className="text-[#f97316]">{agent?.name || "Unknown Agent"}</span>
+                  <div className="text-xs text-[var(--color-text-secondary)] flex-shrink-0">
+                    <span className="text-[var(--color-text-faint)]">&rarr;</span>{" "}
+                    <span className="text-[var(--color-accent)]">{agent?.name || "Unknown Agent"}</span>
                   </div>
                   <span className={`text-xs px-2 py-0.5 rounded flex-shrink-0 ${
                     sub.enabled
                       ? "bg-green-500/10 text-green-400"
-                      : "bg-[#1a1a1a] text-[#555]"
+                      : "bg-[var(--color-surface-raised)] text-[var(--color-text-faint)]"
                   }`}>
                     {sub.enabled ? "active" : "disabled"}
                   </span>
@@ -127,9 +127,9 @@ function StatCard({
   valueColor?: string;
 }) {
   return (
-    <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
-      <div className="text-xs text-[#666] mb-1">{label}</div>
-      <div className={`text-2xl font-bold ${valueColor || "text-[#e0e0e0]"}`}>
+    <div className="bg-[var(--color-surface)] card p-4">
+      <div className="text-xs text-[var(--color-text-muted)] mb-1">{label}</div>
+      <div className={`text-2xl font-bold ${valueColor || "text-[var(--color-text)]"}`}>
         {value}
       </div>
     </div>