🖌️ Muse: Elevate from Developer UI - Replaced Gray with Slate

.Jules/muse.md

@@ -36,3 +36,7 @@
 - **Modals:** Upgraded all modals (`GroceryCatalog`, `ShoppingSettings`, `AddMeal`) to use glassmorphism (`bg-white/95 backdrop-blur-xl`) and softer inputs (`bg-slate-50/50`).
 - **Shopping List:** Softened swipe actions to pastel red/emerald. Converted chips to pill-shaped glass elements.
 - **Buttons:** Replaced flat brand buttons with glassmorphism variants (`shadow-sm`, `ring-1 ring-black/5`).
+
+## 2025-05-26 - Grey to Slate Palette Polish
+**Critique:** Components across the application (Budgets, Habits, Settings, Modals) were relying on the default "Gray" (`gray-50`, `gray-100`, etc.) palette. This created a "Developer UI" look that felt generic, flat, and lacked the sophisticated, cooler temperature required for a premium aesthetic.
+**Polish:** Applied a comprehensive color pass shifting from generic `gray-*` to the more refined `slate-*` palette across all utility classes (`bg-`, `text-`, `border-`, `ring-`, `divide-`). This unifies the visual temperature with existing components and enhances the overall "Muse" aesthetic.

components/budget/BudgetAccounts.tsx

@@ -488,7 +488,7 @@ const BudgetAccounts: React.FC = () => {
                 </Button>
               )}
 
-              <div className="h-px bg-gray-100 my-2" />
+              <div className="h-px bg-slate-100 my-2" />
 
               {/* Delete Action */}
               <Button

components/budget/BudgetBuckets.tsx

@@ -390,7 +390,7 @@ const BudgetBuckets: React.FC = () => {
               >
                 Edit Transaction
               </Button>
-              <div className="h-px bg-gray-100 my-2" />
+              <div className="h-px bg-slate-100 my-2" />
               <Button
                 variant="ghost-destructive"
                 className="w-full justify-start text-lg py-4"

components/budget/BudgetHistory.tsx

@@ -146,7 +146,7 @@ const BudgetHistory: React.FC = () => {
               onClick={() => toggleExpand(group.periodId)}
               className="w-full text-left"
             >
-              <div className="p-4 bg-white hover:bg-gray-50 transition-colors">
+              <div className="p-4 bg-white hover:bg-slate-50 transition-colors">
                 <div className="flex justify-between items-center mb-2">
                   <div>
                     <h3 className="font-bold text-brand-800 text-lg">

components/budget/RecurringBillsModal.tsx

@@ -119,7 +119,7 @@ const RecurringBillsModal: React.FC<RecurringBillsModalProps> = ({ isOpen, onClo
         </div>
         <button
           onClick={onClose}
-          className="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100"
+          className="p-2 text-slate-400 hover:text-slate-600 rounded-full hover:bg-slate-100"
           aria-label="Close drawer"
         >
           <X size={20} />

components/budget/SavedViewChips.tsx

@@ -130,7 +130,7 @@ const SavedViewChips: React.FC<SavedViewChipsProps> = ({ householdId, currentFil
           <button
             type="button"
             onClick={() => setIsSaving(false)}
-            className="p-1 text-gray-400 hover:text-gray-600"
+            className="p-1 text-slate-400 hover:text-slate-600"
             aria-label="Cancel save view"
           >
             <X size={12} />

components/budget/TransactionMasterList.tsx

@@ -772,7 +772,7 @@ const TransactionMasterList: React.FC = () => {
               >
                 Split Transaction
               </Button>
-              <div className="h-px bg-gray-100 my-2" />
+              <div className="h-px bg-slate-100 my-2" />
               <Button
                 variant="ghost-destructive"
                 className="w-full justify-start text-lg py-4"
@@ -798,7 +798,7 @@ const TransactionMasterList: React.FC = () => {
         <div className="space-y-4 pt-2">
           <FilterControls {...filterProps} layout="stack" />
 
-          <div className="pt-4 space-y-3 border-t border-gray-100">
+          <div className="pt-4 space-y-3 border-t border-slate-100">
             {/* Export Button */}
             <Button
                variant="primary"

components/habits/HabitCard.tsx

@@ -236,7 +236,7 @@ const HabitCard: React.FC<HabitCardProps> = ({ habit, dragHandle }) => {
             {isPositive && habit.streakDays >= 2 && (
               <span className={cn(
                 "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xxs font-bold transition-colors",
-                habit.streakDays >= 3 ? "bg-orange-100 text-orange-600" : "bg-gray-100 text-gray-500"
+                habit.streakDays >= 3 ? "bg-orange-100 text-orange-600" : "bg-slate-100 text-slate-500"
               )}>
                 <Flame size={10} fill={habit.streakDays >= 3 ? "currentColor" : "none"} />
                 {habit.streakDays} Day{habit.streakDays !== 1 ? 's' : ''}
@@ -372,7 +372,7 @@ const HabitCard: React.FC<HabitCardProps> = ({ habit, dragHandle }) => {
               Repair Streak ({freezeBank?.tokens})
             </Button>
           )}
-          <div className="h-px bg-gray-100 my-2" />
+          <div className="h-px bg-slate-100 my-2" />
           <Button
             variant="ghost-destructive"
             className="w-full justify-start text-lg py-4"

components/layout/ProfileMenu.tsx

@@ -81,7 +81,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ isOpen, onClose, anchorRef })
   return (
     <div
       ref={menuRef}
-      className="absolute top-14 right-4 z-dropdown w-64 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-200 origin-top-right"
+      className="absolute top-14 right-4 z-dropdown w-64 bg-white rounded-xl shadow-xl border border-slate-100 overflow-hidden animate-in fade-in zoom-in-95 duration-200 origin-top-right"
       role="menu"
       aria-label="Profile Menu"
     >
@@ -116,14 +116,14 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ isOpen, onClose, anchorRef })
             navigate('/settings');
             onClose();
           }}
-          className="w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-brand-700 rounded-lg transition-colors text-left"
+          className="w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-brand-700 rounded-lg transition-colors text-left"
           role="menuitem"
         >
           <Settings className="w-4 h-4" />
           Settings
         </button>
 
-        <hr className="my-1 border-gray-100" />
+        <hr className="my-1 border-slate-100" />
 
         <button
           onClick={handleLogout}

components/meals/MealPlanTab.tsx

@@ -586,14 +586,14 @@ const MealPlanTab: React.FC = () => {
                                         <div className="flex flex-row sm:flex-col gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
                                             <button
                                                 onClick={() => handleEditMealPlanItem(planItem, linkedMeal ?? undefined)}
-                                                className="p-3 sm:p-1.5 text-gray-400 hover:text-brand-600 hover:bg-brand-50 rounded-lg transition-colors active:scale-95"
+                                                className="p-3 sm:p-1.5 text-slate-400 hover:text-brand-600 hover:bg-brand-50 rounded-lg transition-colors active:scale-95"
                                                 aria-label={`Edit ${mealName}`}
                                             >
                                                 <Edit2 className="w-5 h-5 sm:w-4 sm:h-4" />
                                             </button>
                                             <button
                                                 onClick={() => deleteMealPlanItem(planItem.id)}
-                                                className="p-3 sm:p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors active:scale-95"
+                                                className="p-3 sm:p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors active:scale-95"
                                                 aria-label={`Delete ${mealName}`}
                                             >
                                                 <Trash2 className="w-5 h-5 sm:w-4 sm:h-4" />
@@ -604,9 +604,9 @@ const MealPlanTab: React.FC = () => {
                             }) : (
                                 <div
                                     onClick={() => handleAddMealToDate(day)}
-                                    className="border-2 border-dashed border-gray-100 rounded-xl p-4 text-center cursor-pointer hover:border-brand-200 hover:bg-brand-50/50 transition-all group"
+                                    className="border-2 border-dashed border-slate-100 rounded-xl p-4 text-center cursor-pointer hover:border-brand-200 hover:bg-brand-50/50 transition-all group"
                                 >
-                                    <p className="text-sm text-gray-400 group-hover:text-brand-500 font-medium">No meals planned</p>
+                                    <p className="text-sm text-slate-400 group-hover:text-brand-500 font-medium">No meals planned</p>
                                 </div>
                             )}
                         </div>

components/meals/ShoppingItemRow.tsx

@@ -110,7 +110,7 @@ const ShoppingItemRowComponent: React.FC<ShoppingItemRowProps> = ({ item, stores
         {isReorderable && (
             <div
                 onPointerDown={(e) => dragControls.start(e)}
-                className="touch-none cursor-grab active:cursor-grabbing p-1 text-gray-400 hover:text-gray-600"
+                className="touch-none cursor-grab active:cursor-grabbing p-1 text-slate-400 hover:text-slate-600"
                 aria-label="Drag to reorder"
             >
                 <GripVertical size={20} />
@@ -124,7 +124,7 @@ const ShoppingItemRowComponent: React.FC<ShoppingItemRowProps> = ({ item, stores
                 "w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0",
                 item.isPurchased
                     ? "bg-green-500 border-green-500 text-white"
-                    : "border-gray-300 hover:border-brand-500 text-transparent"
+                    : "border-slate-300 hover:border-brand-500 text-transparent"
             )}
         >
             <Check size={14} strokeWidth={3} />

components/meals/ShoppingListTab.tsx

@@ -424,7 +424,7 @@ const ShoppingListTab: React.FC = () => {
                 <button
                     type="submit"
                     disabled={!newItemText.trim()}
-                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-brand-800 text-white rounded-lg hover:bg-brand-900 disabled:opacity-50 disabled:bg-gray-300 transition-colors"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-brand-800 text-white rounded-lg hover:bg-brand-900 disabled:opacity-50 disabled:bg-slate-300 transition-colors"
                 >
                     <Plus size={18} />
                 </button>