Complete visual redesign: solid dark cards, purple accent, iOS-like

- All pages use new design system (card, section-label, btn-accent)
- No more glassmorphism — clean solid surfaces
- Cron, Soul, Config, Skills detail all restyled
- Consistent typography and spacing throughout

app/config/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Settings, Cpu, Globe, Wrench, Radio } from "lucide-react";
+import { Settings } from "lucide-react";
 import { useConfig, useHealth } from "@/lib/hooks";
 
 export default function ConfigPage() {
@@ -9,7 +9,6 @@ export default function ConfigPage() {
 
   const online = health?.status === "ok";
   const cfg = config?.config || {};
-
   const terminal = cfg.terminal as Record<string, unknown> | undefined;
   const memory = cfg.memory as Record<string, unknown> | undefined;
   const display = cfg.display as Record<string, unknown> | undefined;
@@ -17,52 +16,47 @@ export default function ConfigPage() {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between">
-        <Settings size={20} style={{ color: "#6b7280" }} />
+        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Config</h1>
-        <h1 className="text-xl font-bold text-zinc-300">Config</h1>
+        <div className="flex items-center gap-1.5">
-        <div className="ml-auto flex items-center gap-1.5">
+          <div className="w-2 h-2 rounded-full" style={{ background: online ? "#34c759" : "#ff3b30" }} />
-          <div
+          <span className="text-[12px]" style={{ color: online ? "#34c759" : "#ff3b30" }}>
-            className="w-2 h-2 rounded-full"
+            {online ? "Online" : "Offline"}
-            style={{ background: online ? "#22c55e" : "#ef4444" }}
+          </span>
-          />
-          <span className="text-xs text-zinc-500">{online ? "Connected" : "Offline"}</span>
         </div>
       </div>
 
       {isLoading ? (
         <div className="space-y-3">
           {[...Array(4)].map((_, i) => (
-            <div key={i} className="glass p-4 animate-pulse">
+            <div key={i} className="card p-4 animate-pulse">
-              <div className="h-4 bg-white/[0.06] rounded w-1/2 mb-2" />
+              <div className="h-4 rounded w-1/2 mb-2" style={{ background: "var(--bg-hover)" }} />
-              <div className="h-3 bg-white/[0.06] rounded w-3/4" />
+              <div className="h-3 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
             </div>
           ))}
         </div>
       ) : (
         <div className="space-y-3">
-          <ConfigSection icon={Cpu} label="Model" color="#f59e0b" items={[
+          <Section label="Model" items={[
             ["Model", config?.model || "—"],
             ["Provider", config?.provider || "custom"],
             ["Base URL", config?.base_url || "—"],
           ]} />
-
+          <Section label="Terminal" items={[
-          <ConfigSection icon={Wrench} label="Terminal" color="#38bdf8" items={[
             ["Backend", String(terminal?.backend || "local")],
             ["Timeout", String(terminal?.timeout || 180) + "s"],
             ["Persistent shell", String(terminal?.persistent_shell ?? true)],
           ]} />
-
+          <Section label="Memory" items={[
-          <ConfigSection icon={Radio} label="Memory" color="#a78bfa" items={[
             ["Enabled", String(memory?.memory_enabled ?? true)],
             ["Memory limit", String(memory?.memory_char_limit || 2200) + " chars"],
             ["User limit", String(memory?.user_char_limit || 1375) + " chars"],
           ]} />
-
+          <Section label="Display" items={[
-          <ConfigSection icon={Globe} label="Display" color="#22c55e" items={[
             ["Personality", String(display?.personality || "default")],
             ["Streaming", String(display?.streaming ?? true)],
             ["Skin", String(display?.skin || "default")],
-            ...(tts ? [["TTS provider", String(tts.provider || "—")] as [string, string]] : []),
+            ...(tts ? [["TTS", String(tts.provider || "—")] as [string, string]] : []),
           ]} />
         </div>
       )}
@@ -70,28 +64,15 @@ export default function ConfigPage() {
   );
 }
 
-function ConfigSection({
+function Section({ label, items }: { label: string; items: [string, string][] }) {
-  icon: Icon,
-  label,
-  color,
-  items,
-}: {
-  icon: typeof Cpu;
-  label: string;
-  color: string;
-  items: [string, string][];
-}) {
   return (
-    <div className="glass p-4">
+    <div className="card p-4">
-      <div className="flex items-center gap-2 mb-3">
+      <div className="section-label mb-3">{label}</div>
-        <Icon size={16} style={{ color }} />
+      <div className="space-y-2">
-        <span className="text-sm font-medium text-zinc-200">{label}</span>
-      </div>
-      <div className="space-y-1.5">
         {items.map(([k, v]) => (
-          <div key={k} className="flex justify-between text-xs">
+          <div key={k} className="flex justify-between text-[13px]">
-            <span className="text-zinc-500">{k}</span>
+            <span style={{ color: "var(--text-2)" }}>{k}</span>
-            <span className="text-zinc-300 font-mono truncate ml-4 max-w-[60%] text-right">{v}</span>
+            <span className="font-mono truncate ml-4 max-w-[60%] text-right" style={{ color: "var(--text-1)" }}>{v}</span>
           </div>
         ))}
       </div>

app/cron/page.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Timer, Play, Pause, RefreshCw, ChevronRight } from "lucide-react";
+import { Timer, Play, RefreshCw } from "lucide-react";
-import Link from "next/link";
 import { timeAgo } from "@/lib/utils";
 
 interface CronJob {
@@ -19,14 +18,15 @@ interface CronJob {
   run_count?: number;
   last_run?: string;
   next_run?: string;
-  created_at?: string;
 }
 
 export default function CronPage() {
   const [jobs, setJobs] = useState<CronJob[]>([]);
   const [loading, setLoading] = useState(true);
+  const [triggering, setTriggering] = useState<string | null>(null);
 
   const load = () => {
+    setLoading(true);
     fetch("/cron/jobs")
       .then((r) => r.json())
       .then((d) => setJobs(d.jobs || []))
@@ -37,8 +37,10 @@ export default function CronPage() {
   useEffect(() => { load(); }, []);
 
   const trigger = async (id: string) => {
-    await fetch(`/cron/jobs/${id}/run`, { method: "POST" });
+    setTriggering(id);
-    load();
+    await fetch("/cron/jobs/" + id + "/run", { method: "POST" });
+    setTriggering(null);
+    setTimeout(load, 1000);
   };
 
   const active = jobs.filter((j) => j.status === "active" || j.status === "enabled");
@@ -48,15 +50,8 @@ export default function CronPage() {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Cron Jobs</h1>
-          <Timer size={20} style={{ color: "#f59e0b" }} />
+        <button onClick={load} className="p-2 rounded-xl active:scale-95" style={{ color: "var(--text-2)" }}>
-          <h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>Cron Jobs</h1>
-        </div>
-        <button
-          onClick={load}
-          className="p-2 rounded-xl active:scale-95 transition-all"
-          style={{ color: "#f59e0b" }}
-        >
           <RefreshCw size={16} />
         </button>
       </div>
@@ -64,81 +59,67 @@ export default function CronPage() {
       {loading ? (
         <div className="space-y-2">
           {[...Array(3)].map((_, i) => (
-            <div key={i} className="glass p-4 animate-pulse">
+            <div key={i} className="card p-4 animate-pulse">
-              <div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
+              <div className="h-4 rounded w-3/4 mb-2" style={{ background: "var(--bg-hover)" }} />
-              <div className="h-3 bg-white/[0.06] rounded w-1/2" />
+              <div className="h-3 rounded w-1/2" style={{ background: "var(--bg-hover)" }} />
             </div>
           ))}
         </div>
       ) : jobs.length === 0 ? (
-        <div className="glass p-6 text-center text-sm text-zinc-500">
+        <div className="py-12 text-center">
-          No cron jobs configured
+          <Timer size={32} className="mx-auto mb-3" style={{ color: "var(--text-3)" }} />
+          <p className="text-sm" style={{ color: "var(--text-3)" }}>No cron jobs</p>
         </div>
       ) : (
-        <div className="space-y-4">
+        <div className="space-y-5">
-          {active.length > 0 && (
+          {active.length > 0 && <JobSection label="Active" jobs={active} onTrigger={trigger} triggering={triggering} />}
-            <Section label="Active" jobs={active} onTrigger={trigger} />
+          {paused.length > 0 && <JobSection label="Paused" jobs={paused} onTrigger={trigger} triggering={triggering} />}
-          )}
+          {other.length > 0 && <JobSection label="Other" jobs={other} onTrigger={trigger} triggering={triggering} />}
-          {paused.length > 0 && (
-            <Section label="Paused" jobs={paused} onTrigger={trigger} />
-          )}
-          {other.length > 0 && (
-            <Section label="Other" jobs={other} onTrigger={trigger} />
-          )}
         </div>
       )}
     </div>
   );
 }
 
-function Section({ label, jobs, onTrigger }: { label: string; jobs: CronJob[]; onTrigger: (id: string) => void }) {
+function JobSection({ label, jobs, onTrigger, triggering }: { label: string; jobs: CronJob[]; onTrigger: (id: string) => void; triggering: string | null }) {
   return (
     <div>
-      <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2 px-1">
+      <div className="section-label mb-2">{label} ({jobs.length})</div>
-        {label} ({jobs.length})
+      <div className="space-y-2">
-      </h2>
-      <div className="space-y-1.5">
         {jobs.map((j) => (
-          <CronCard key={j.id} job={j} onTrigger={() => onTrigger(j.id)} />
+          <div key={j.id} className="card p-4">
+            <div className="flex items-start justify-between gap-2 mb-2">
+              <div className="flex-1 min-w-0">
+                <div className="text-[14px] line-clamp-1" style={{ color: "var(--text-1)" }}>
+                  {j.name || j.prompt.slice(0, 60)}
+                </div>
+                <div className="text-[12px] font-mono mt-0.5" style={{ color: "var(--text-3)" }}>{j.schedule}</div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <div
+                  className="w-2 h-2 rounded-full"
+                  style={{ background: j.status === "active" || j.status === "enabled" ? "#34c759" : "var(--text-3)" }}
+                />
+                <button
+                  onClick={() => onTrigger(j.id)}
+                  disabled={triggering === j.id}
+                  className="p-1.5 rounded-lg active:bg-white/[0.04] disabled:opacity-30"
+                  style={{ color: "var(--accent)" }}
+                >
+                  <Play size={14} />
+                </button>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 text-[11px]" style={{ color: "var(--text-3)" }}>
+              <span>→ {j.deliver}</span>
+              {j.skills && j.skills.length > 0 && (
+                <span style={{ color: "var(--accent)", opacity: 0.6 }}>{j.skills.join(", ")}</span>
+              )}
+              {j.last_run && <span className="ml-auto">last: {timeAgo(new Date(j.last_run).getTime() / 1000)}</span>}
+            </div>
+          </div>
         ))}
       </div>
     </div>
   );
 }
-
-function CronCard({ job, onTrigger }: { job: CronJob; onTrigger: () => void }) {
-  const isActive = job.status === "active" || job.status === "enabled";
-  return (
-    <div className="glass p-4">
-      <div className="flex items-start justify-between gap-2 mb-2">
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-zinc-200 line-clamp-1">
-            {job.name || job.prompt.slice(0, 60)}
-          </div>
-          <div className="text-xs text-zinc-500 font-mono mt-0.5">{job.schedule}</div>
-        </div>
-        <div className="flex items-center gap-1.5 shrink-0">
-          <div
-            className="w-2 h-2 rounded-full"
-            style={{ background: isActive ? "#22c55e" : "#6b7280" }}
-          />
-          <button
-            onClick={onTrigger}
-            className="p-1.5 rounded-lg active:bg-white/[0.06]"
-            style={{ color: "#f59e0b" }}
-            title="Run now"
-          >
-            <Play size={14} />
-          </button>
-        </div>
-      </div>
-      <div className="flex items-center gap-3 text-[11px] text-zinc-500">
-        <span>→ {job.deliver}</span>
-        {job.skills && job.skills.length > 0 && (
-          <span className="text-purple-400/60">{job.skills.join(", ")}</span>
-        )}
-        {job.last_run && <span className="ml-auto">last: {timeAgo(new Date(job.last_run).getTime() / 1000)}</span>}
-      </div>
-    </div>
-  );
-}

app/skills/[name]/page.tsx

@@ -12,53 +12,42 @@ export default function SkillDetailPage({ params }: { params: Promise<{ name: st
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
-        <Link href="/skills" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
+        <Link href="/skills" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
-          <ArrowLeft size={20} className="text-zinc-400" />
+          <ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
         </Link>
-        <h1 className="text-base font-semibold text-zinc-200">{name}</h1>
+        <h1 className="text-[15px] font-medium" style={{ color: "var(--text-1)" }}>{name}</h1>
       </div>
 
       {isLoading ? (
-        <div className="glass p-4 animate-pulse space-y-2">
+        <div className="card p-4 animate-pulse space-y-2">
-          <div className="h-4 bg-white/[0.06] rounded w-full" />
+          <div className="h-4 rounded w-full" style={{ background: "var(--bg-hover)" }} />
-          <div className="h-4 bg-white/[0.06] rounded w-3/4" />
+          <div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
-          <div className="h-4 bg-white/[0.06] rounded w-1/2" />
         </div>
       ) : data ? (
         <>
-          {/* Linked files */}
           {data.linked_files && Object.keys(data.linked_files).length > 0 && (
-            <div className="glass p-3">
+            <div className="card p-3">
-              <div className="text-xs font-medium text-zinc-400 mb-2 flex items-center gap-1.5">
+              <div className="text-[11px] font-medium mb-2 flex items-center gap-1.5" style={{ color: "var(--text-2)" }}>
                 <Folder size={12} /> Linked Files
               </div>
-              <div className="space-y-1">
+              {Object.entries(data.linked_files).map(([dir, files]) =>
-                {Object.entries(data.linked_files).map(([dir, files]) =>
+                (files as string[]).map((f) => (
-                  (files as string[]).map((f) => (
+                  <div key={dir + "/" + f} className="flex items-center gap-2 text-[12px] py-0.5" style={{ color: "var(--text-3)" }}>
-                    <div
+                    <FileText size={11} />
-                      key={`${dir}/${f}`}
+                    <span className="font-mono">{dir}/{f}</span>
-                      className="flex items-center gap-2 text-xs text-zinc-500 py-0.5"
+                  </div>
-                    >
+                ))
-                      <FileText size={11} />
+              )}
-                      <span className="font-mono">{dir}/{f}</span>
-                    </div>
-                  ))
-                )}
-              </div>
             </div>
           )}
-
+          <div className="card p-4">
-          {/* Skill content */}
+            <pre className="text-[13px] whitespace-pre-wrap leading-relaxed font-sans overflow-x-auto" style={{ color: "var(--text-1)" }}>
-          <div className="glass p-4">
-            <pre className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed font-sans overflow-x-auto">
               {data.content}
             </pre>
           </div>
         </>
       ) : (
-        <div className="glass p-6 text-center text-sm text-zinc-500">
+        <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>Skill not found</p>
-          Skill not found
-        </div>
       )}
     </div>
   );

app/soul/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Sparkles, Save, RotateCcw } from "lucide-react";
+import { Save, RotateCcw } from "lucide-react";
 
 export default function SoulPage() {
   const [content, setContent] = useState("");
@@ -36,46 +36,44 @@ export default function SoulPage() {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>SOUL.md</h1>
-          <Sparkles size={20} style={{ color: "#ec4899" }} />
-          <h1 className="text-xl font-bold" style={{ color: "#ec4899" }}>SOUL.md</h1>
-        </div>
         <div className="flex items-center gap-2">
           {dirty && (
-            <button
+            <button onClick={() => setContent(original)} className="p-2 rounded-xl active:scale-95" style={{ color: "var(--text-3)" }}>
-              onClick={() => setContent(original)}
-              className="p-2 rounded-xl active:scale-95 text-zinc-500"
-            >
               <RotateCcw size={16} />
             </button>
           )}
           <button
             onClick={save}
             disabled={!dirty || saving}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium transition-all disabled:opacity-30"
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all disabled:opacity-20"
-            style={{ background: "rgba(236,72,153,0.15)", color: "#ec4899" }}
+            style={{ background: "var(--accent-dim)", color: "var(--accent)" }}
           >
             <Save size={14} />
-            {saving ? "Saving..." : saved ? "Saved!" : "Save"}
+            {saving ? "Saving..." : saved ? "Saved" : "Save"}
           </button>
         </div>
       </div>
 
-      <p className="text-xs text-zinc-500">
+      <p className="text-[12px]" style={{ color: "var(--text-3)" }}>
-        Persona file loaded fresh each message. Edit to change how Hermes communicates.
+        Persona file. Loaded fresh each message.
       </p>
 
       {loading ? (
-        <div className="glass p-4 animate-pulse space-y-2">
+        <div className="card p-4 animate-pulse space-y-2">
-          <div className="h-4 bg-white/[0.06] rounded w-full" />
+          <div className="h-4 rounded w-full" style={{ background: "var(--bg-hover)" }} />
-          <div className="h-4 bg-white/[0.06] rounded w-3/4" />
+          <div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
-          <div className="h-4 bg-white/[0.06] rounded w-1/2" />
         </div>
       ) : (
         <textarea
           value={content}
           onChange={(e) => setContent(e.target.value)}
-          className="w-full min-h-[60vh] p-4 rounded-2xl text-sm text-zinc-300 bg-white/[0.04] border border-white/[0.08] outline-none focus:border-white/[0.15] resize-none font-mono leading-relaxed transition-colors"
+          className="w-full min-h-[60vh] p-4 rounded-2xl text-[13px] resize-none font-mono leading-relaxed outline-none transition-colors"
+          style={{
+            background: "var(--bg-raised)",
+            border: "1px solid var(--border)",
+            color: "var(--text-1)",
+          }}
           spellCheck={false}
         />
       )}