diff --git a/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx b/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
index 7e5309b4e..b349eca73 100644
--- a/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
+++ b/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
@@ -39,16 +39,16 @@ export function EditProfileIdentityCard({
         />
       </div>
       <div className="mb-4">
-        <label className="block text-sm font-medium text-kodo-content-dim mb-2">
+        <label className="block text-sm font-medium text-muted-foreground mb-2">
           Bio
         </label>
         <textarea
-          className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-24"
+          className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]"
           value={formData.bio}
           onChange={(e) => setFormField('bio', e.target.value)}
           maxLength={500}
         />
-        <p className="text-xs text-kodo-content-dim text-right mt-1">
+        <p className="text-xs text-muted-foreground text-right mt-1">
           {formData.bio.length}/500
         </p>
       </div>
diff --git a/apps/web/src/components/studio/ai-tools-view/AIToolsViewSkeleton.tsx b/apps/web/src/components/studio/ai-tools-view/AIToolsViewSkeleton.tsx
index d46115c45..842d0f041 100644
--- a/apps/web/src/components/studio/ai-tools-view/AIToolsViewSkeleton.tsx
+++ b/apps/web/src/components/studio/ai-tools-view/AIToolsViewSkeleton.tsx
@@ -6,16 +6,16 @@ export function AIToolsViewSkeleton() {
     <div className="h-full flex flex-col gap-6 animate-fadeIn">
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="p-4 rounded-xl border border-kodo-steel bg-kodo-graphite">
+          <div key={i} className="p-4 rounded-xl border border-border bg-muted">
             <div className="w-10 h-10 rounded-lg bg-muted animate-pulse mb-3" />
             <div className="h-4 w-24 rounded bg-muted animate-pulse mb-2" />
             <div className="h-3 w-full rounded bg-muted animate-pulse" />
           </div>
         ))}
       </div>
-      <div className="flex-1 flex flex-col justify-center items-center min-h-layout-page-sm rounded-xl border border-kodo-steel p-8">
+      <div className="flex-1 flex flex-col justify-center items-center min-h-layout-page-sm rounded-xl border border-border p-8">
         <div className="w-full max-w-md space-y-4">
-          <div className="h-24 rounded-xl border-2 border-dashed border-kodo-steel bg-kodo-ink/50 animate-pulse" />
+          <div className="h-24 rounded-xl border-2 border-dashed border-border bg-card/50 animate-pulse" />
           <div className="h-4 w-64 mx-auto rounded bg-muted animate-pulse" />
         </div>
       </div>