diff --git a/src/page/me/chat-list.tsx b/src/page/me/chat-list.tsx
index cb735ac..74e3e56 100644
--- a/src/page/me/chat-list.tsx
+++ b/src/page/me/chat-list.tsx
@@ -10,7 +10,6 @@ interface SuggestionCard {
   title: string;
   body: string;
   icon: React.ComponentType<{ className?: string }>;
-  gradient: string;
 }
 
 const SUGGESTIONS: SuggestionCard[] = [
@@ -18,25 +17,21 @@ const SUGGESTIONS: SuggestionCard[] = [
     title: "Code Review",
     body: "Review my pull request for bugs and improvements",
     icon: Code2,
-    gradient: "from-emerald-500/10 to-emerald-500/[0.02]",
   },
   {
     title: "Debug Help",
     body: "Help me diagnose this failing test case",
     icon: Bug,
-    gradient: "from-amber-500/10 to-amber-500/[0.02]",
   },
   {
     title: "Explain Code",
     body: "Explain how this algorithm works step by step",
     icon: Lightbulb,
-    gradient: "from-violet-500/10 to-violet-500/[0.02]",
   },
   {
     title: "Refactor",
     body: "Suggest refactoring for better readability",
     icon: Wand2,
-    gradient: "from-sky-500/10 to-sky-500/[0.02]",
   },
 ];
 
@@ -118,7 +113,7 @@ export default function MeChatListPage() {
                 whileHover={{ scale: 1.02, transition: { duration: 0.15 } }}
                 whileTap={{ scale: 0.98 }}
                 type="button"
-                className={`group cursor-pointer rounded-xl border border-border/40 bg-gradient-to-br ${suggestion.gradient} px-4 py-3.5 text-left transition-all duration-200 hover:border-border/80 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+                className="group cursor-pointer rounded-xl border border-border/40 bg-card px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow,transform] duration-200 hover:border-border/80 hover:bg-muted/30 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={() => handleQuickStart(suggestion.title, suggestion.body)}
                 aria-label={`${suggestion.title}: ${suggestion.body}`}
               >
diff --git a/src/page/me/overview/activity.tsx b/src/page/me/overview/activity.tsx
index f7c7efd..e12c885 100644
--- a/src/page/me/overview/activity.tsx
+++ b/src/page/me/overview/activity.tsx
@@ -81,7 +81,7 @@ export function ActivityFeed({ relationCounts }: { relationCounts: { followers:
                 {new Date(apply.updated_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
               </p>
             </div>
-            <span className="font-mono text-[10px] uppercase tracking-wider text-amber-600 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5">
+            <span className="rounded-md border border-warning/20 bg-warning/10 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-warning">
               Pending
             </span>
           </div>
diff --git a/src/page/settings/security.tsx b/src/page/settings/security.tsx
index 5d0dce3..d90193b 100644
--- a/src/page/settings/security.tsx
+++ b/src/page/settings/security.tsx
@@ -32,7 +32,7 @@ function TwoFactorSection() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            <Shield className="size-4 text-green-600" />
+            <Shield className="size-4 text-success" />
             Two-factor authentication enabled
           </CardTitle>
           <CardDescription>Your account is protected with 2FA</CardDescription>
@@ -51,7 +51,7 @@ function TwoFactorSection() {
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
-          <ShieldOff className="size-4 text-amber-600" />
+          <ShieldOff className="size-4 text-warning" />
           Two-factor authentication
         </CardTitle>
         <CardDescription>Add an extra layer of security to your account</CardDescription>
@@ -138,7 +138,7 @@ function EmailSection() {
           </form>
         )}
         {changeEmail.isSuccess && (
-          <p className="mt-4 text-sm text-green-600">Verification email sent. Check your inbox.</p>
+          <p className="mt-4 text-sm text-success">Verification email sent. Check your inbox.</p>
         )}
         {changeEmail.isError && (
           <p className="mt-4 text-sm text-destructive">Failed to change email. Please try again.</p>
diff --git a/src/page/workspace/create.tsx b/src/page/workspace/create.tsx
index 49231e8..a580dfb 100644
--- a/src/page/workspace/create.tsx
+++ b/src/page/workspace/create.tsx
@@ -68,10 +68,10 @@ export function CreateWorkspaceDialog({
       <DialogTrigger render={children as React.ReactElement} />
       <DialogContent className="sm:max-w-md p-6">
         <DialogHeader>
-          <DialogTitle className="text-lg font-semibold text-zinc-950">
+          <DialogTitle className="text-lg font-semibold text-foreground">
             Create a new workspace
           </DialogTitle>
-          <DialogDescription className="text-base text-zinc-500">
+          <DialogDescription className="text-sm text-muted-foreground">
             Workspaces organize your projects, repositories, and team collaboration.
           </DialogDescription>
         </DialogHeader>
@@ -81,28 +81,30 @@ export function CreateWorkspaceDialog({
           onSubmit={(event) => void handleSubmit(event)}
         >
           <div className="space-y-2">
-            <Label className="text-sm font-semibold text-zinc-950" htmlFor="wk-name">
+            <Label className="text-sm font-semibold text-foreground" htmlFor="wk-name">
               Name
             </Label>
             <Input
-              className="h-12 rounded-xl border-zinc-300 bg-zinc-50 text-base"
+              autoComplete="off"
+              className="h-11 rounded-xl border-input bg-background text-sm"
               id="wk-name"
               name="name"
               placeholder="e.g. my-project"
               required
               autoFocus
             />
-            <p className="text-sm text-zinc-400">
+            <p className="text-xs text-muted-foreground/70">
               This will be used as your workspace URL. Use lowercase letters, numbers, and hyphens.
             </p>
           </div>
 
           <div className="space-y-2">
-            <Label className="text-sm font-semibold text-zinc-950" htmlFor="wk-description">
+            <Label className="text-sm font-semibold text-foreground" htmlFor="wk-description">
               Description
             </Label>
             <Textarea
-              className="min-h-24 rounded-xl border-zinc-300 bg-zinc-50 text-base"
+              autoComplete="off"
+              className="min-h-24 rounded-xl border-input bg-background text-sm"
               id="wk-description"
               name="description"
               placeholder="What is this workspace about?"
@@ -110,14 +112,14 @@ export function CreateWorkspaceDialog({
           </div>
 
           {error && (
-            <p className="rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
+            <p aria-live="polite" className="rounded-xl bg-destructive/10 px-4 py-3 text-sm font-medium text-destructive">
               {error}
             </p>
           )}
 
-          <DialogFooter className="-mx-6 -mb-6 rounded-b-xl border-t border-zinc-200 bg-zinc-50 px-6 py-4 sm:flex-row sm:justify-end">
+          <DialogFooter className="-mx-6 -mb-6 rounded-b-xl border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end">
             <Button
-              className="h-11 rounded-xl bg-zinc-950 px-5 text-base text-white shadow-inner shadow-white/10 hover:bg-zinc-800"
+              className="h-10 rounded-xl px-5 text-sm"
               disabled={submitting}
               type="submit"
             >
diff --git a/src/page/workspace/repositories.tsx b/src/page/workspace/repositories.tsx
index dbb44f0..c34ac8b 100644
--- a/src/page/workspace/repositories.tsx
+++ b/src/page/workspace/repositories.tsx
@@ -102,19 +102,20 @@ function RepoListView({
     <>
       <div className="flex items-center justify-between">
         <h1 className="font-heading text-lg font-bold text-foreground">Repositories</h1>
-        <Button className="h-8 rounded px-3 text-[13px]" onClick={onCreate}>
+        <Button className="h-9 rounded-xl px-3 text-[13px]" onClick={onCreate}>
           <Plus className="size-3.5 mr-1" />
           New repo
         </Button>
       </div>
 
-      <div className="mt-6 rounded-md border border-border overflow-hidden">
-        <div className="flex items-center gap-2 bg-muted/50 px-3 py-2 border-b border-border">
+      <div className="mt-6 overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+        <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2">
           <span className="font-mono text-[11px] text-muted-foreground">{repos.length} repositories</span>
           <div className="ml-auto relative">
             <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
             <Input
-              className="h-7 w-52 rounded-sm border-border bg-card pl-7 text-[12px]"
+              autoComplete="off"
+              className="h-8 w-52 rounded-lg border-border bg-background pl-7 text-[12px]"
               placeholder="Filter repos..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -250,11 +251,11 @@ function RepoCreateView({
       </p>
 
       {/* Mode tabs */}
-      <div className="mt-5 flex gap-1 rounded-lg bg-muted/50 p-1">
+      <div className="mt-5 flex gap-1 rounded-xl bg-muted/50 p-1">
         {modeTabs.map((tab) => (
           <button
             className={cn(
-              "flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors",
+              "flex flex-1 items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors",
               mode === tab.key
                 ? "bg-background text-foreground shadow-sm"
                 : "text-muted-foreground hover:text-foreground",
@@ -330,7 +331,7 @@ function RepoCreateView({
             ].map((opt) => (
               <button
                 className={cn(
-                  "flex items-start gap-2 rounded-md border p-3 text-left transition-colors",
+                  "flex items-start gap-2 rounded-xl border p-3 text-left transition-colors",
                   visibility === opt.value
                     ? "border-primary bg-primary/5"
                     : "border-border hover:border-muted-foreground/30",
@@ -398,7 +399,7 @@ function RepoCreateView({
         )}
 
         {error && (
-          <p className="rounded-md bg-destructive/5 px-3 py-2 text-[12px] text-destructive">{error}</p>
+          <p aria-live="polite" className="rounded-xl bg-destructive/10 px-3 py-2 text-[12px] text-destructive">{error}</p>
         )}
 
         {/* Actions */}