diff --git a/app/components/DS/buttonish.rb b/app/components/DS/buttonish.rb
index e85169191..bd8894be6 100644
--- a/app/components/DS/buttonish.rb
+++ b/app/components/DS/buttonish.rb
@@ -17,15 +17,15 @@ class DS::Buttonish < DesignSystemComponent
       icon_classes: "text-secondary"
     },
     outline_destructive: {
-      container_classes: "text-destructive border border-secondary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      container_classes: "text-destructive border border-secondary bg-transparent hover:bg-container-inset-hover",
       icon_classes: "text-secondary"
     },
     ghost: {
-      container_classes: "text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      container_classes: "text-primary bg-transparent hover:bg-container-inset-hover",
       icon_classes: "text-secondary"
     },
     icon: {
-      container_classes: "hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      container_classes: "hover:bg-container-inset-hover",
       icon_classes: "text-secondary"
     },
     icon_inverse: {
diff --git a/app/javascript/controllers/password_validator_controller.js b/app/javascript/controllers/password_validator_controller.js
index 4de9c6fd1..76cca812e 100644
--- a/app/javascript/controllers/password_validator_controller.js
+++ b/app/javascript/controllers/password_validator_controller.js
@@ -52,11 +52,11 @@ export default class extends Controller {
     // Update block lines sequentially based on total requirements met
     this.blockLineTargets.forEach((line, index) => {
       if (index < requirementsMet) {
-        line.classList.remove("bg-gray-200");
+        line.classList.remove("bg-surface-inset");
         line.classList.add("bg-green-600");
       } else {
         line.classList.remove("bg-green-600");
-        line.classList.add("bg-gray-200");
+        line.classList.add("bg-surface-inset");
       }
     });
   }
diff --git a/app/views/accounts/_tax_treatment_badge.html.erb b/app/views/accounts/_tax_treatment_badge.html.erb
index 070e870ba..cd3823271 100644
--- a/app/views/accounts/_tax_treatment_badge.html.erb
+++ b/app/views/accounts/_tax_treatment_badge.html.erb
@@ -9,7 +9,7 @@
   when :tax_advantaged
     "bg-purple-500/10 text-purple-600 theme-dark:text-purple-400"
   else
-    "bg-gray-500/10 text-secondary"
+    "bg-gray-tint-10 text-secondary"
   end
 %>
 <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium <%= badge_classes %>" title="<%= t("accounts.tax_treatment_descriptions.#{treatment}") %>">
diff --git a/app/views/accounts/new/_container.html.erb b/app/views/accounts/new/_container.html.erb
index 67697da50..387a59f14 100644
--- a/app/views/accounts/new/_container.html.erb
+++ b/app/views/accounts/new/_container.html.erb
@@ -2,7 +2,7 @@
 
 <%= render DS::Dialog.new do |dialog| %>
   <div class="flex flex-col relative" data-controller="list-keyboard-navigation">
-    <div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-gray-800 flex items-center justify-between gap-2">
+    <div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-primary flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
         <% if back_path %>
           <%= render DS::Link.new(
diff --git a/app/views/accounts/new/_method_selector.html.erb b/app/views/accounts/new/_method_selector.html.erb
index f98fef36c..ac3c31909 100644
--- a/app/views/accounts/new/_method_selector.html.erb
+++ b/app/views/accounts/new/_method_selector.html.erb
@@ -10,7 +10,7 @@
          <% end %>
        <% end %>>
     <%# Manual entry option %>
-    <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" do %>
+    <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-secondary px-2 hover:bg-surface rounded-lg p-2" do %>
       <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
         <%= icon("keyboard") %>
       </span>
diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb
index 76de75102..a36407a1f 100644
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -44,7 +44,7 @@
               data: { controller: "auto-submit-form" } do |form| %>
         <div class="flex gap-2 mb-4">
           <div class="grow">
-            <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
+            <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:border-primary">
               <%= icon("search") %>
               <%= hidden_field_tag :account_id, @account.id %>
               <%= form.search_field :search,
diff --git a/app/views/budget_categories/_allocation_progress.erb b/app/views/budget_categories/_allocation_progress.erb
index af854fe00..bd162f5e0 100644
--- a/app/views/budget_categories/_allocation_progress.erb
+++ b/app/views/budget_categories/_allocation_progress.erb
@@ -5,7 +5,7 @@
     <% if budget.available_to_allocate.negative? %>
       <div class="rounded-full w-1.5 h-1.5 bg-red-500"></div>
     <% else %>
-      <div class="rounded-full w-1.5 h-1.5 <%= budget.allocated_spending > 0 ? "bg-gray-900" : "bg-gray-100" %>"></div>
+      <div class="rounded-full w-1.5 h-1.5 <%= budget.allocated_spending > 0 ? "bg-inverse" : "bg-surface-inset" %>"></div>
     <% end %>
 
     <% if budget.available_to_allocate.negative? %>
@@ -23,11 +23,11 @@
     </p>
   </div>
 
-  <div class="relative h-1.5 rounded-2xl bg-gray-100">
+  <div class="relative h-1.5 rounded-2xl bg-surface-inset">
     <% if budget.available_to_allocate.negative? %>
       <div class="absolute inset-0 bg-red-500 rounded-2xl" style="width: 100%;"></div>
     <% else %>
-      <div class="absolute inset-0 bg-gray-900 rounded-2xl" style="width: <%= budget.allocated_percent %>%;"></div>
+      <div class="absolute inset-0 bg-inverse rounded-2xl" style="width: <%= budget.allocated_percent %>%;"></div>
     <% end %>
   </div>
 
diff --git a/app/views/budget_categories/_budget_category.html.erb b/app/views/budget_categories/_budget_category.html.erb
index fc93282af..ff209f009 100644
--- a/app/views/budget_categories/_budget_category.html.erb
+++ b/app/views/budget_categories/_budget_category.html.erb
@@ -68,7 +68,7 @@
             <%= format_money(budget_category.budgeted_spending_money) %>
           </span>
           <% if budget_category.inherits_parent_budget? %>
-            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-gray-500/5 text-secondary"><%= t("reports.budget_performance.shared") %></span>
+            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-gray-tint-5 text-secondary"><%= t("reports.budget_performance.shared") %></span>
           <% end %>
         </div>
         <% if budget_category.suggested_daily_spending.present? %>
diff --git a/app/views/budgets/_budget_donut.html.erb b/app/views/budgets/_budget_donut.html.erb
index 8879d9bfc..8e0520b37 100644
--- a/app/views/budgets/_budget_donut.html.erb
+++ b/app/views/budgets/_budget_donut.html.erb
@@ -4,7 +4,7 @@
   <div data-donut-chart-target="contentContainer" class="flex justify-center items-center h-full">
     <div data-donut-chart-target="defaultContent" class="flex flex-col items-center">
       <% if budget.initialized? %>
-        <div class="text-gray-600 text-sm mb-2">
+        <div class="text-secondary text-sm mb-2">
           <span>Spent</span>
         </div>
 
diff --git a/app/views/categories/_form.html.erb b/app/views/categories/_form.html.erb
index 1f3e5fbeb..1577f8eb4 100644
--- a/app/views/categories/_form.html.erb
+++ b/app/views/categories/_form.html.erb
@@ -14,7 +14,7 @@
           <div class="fixed right-0 sm:right-auto mx-2 sm:ml-8 sm:mr-0 mt-2 z-50 bg-container p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit" data-category-target="popup">
             <div class="flex gap-2 flex-col mb-4" data-category-target="selection" style="<%= "display:none;" if @category.subcategory? %>">
               <div data-category-target="pickerSection"></div>
-              <h4 class="text-gray-500 text-sm">Color</h4>
+              <h4 class="text-secondary text-sm">Color</h4>
               <div class="flex flex-wrap md:flex-nowrap gap-2 items-center" data-category-target="colorsSection">
                 <% Category::COLORS.each do |color| %>
                   <label class="relative">
diff --git a/app/views/chats/_ai_consent.html.erb b/app/views/chats/_ai_consent.html.erb
index 305847922..d71023d81 100644
--- a/app/views/chats/_ai_consent.html.erb
+++ b/app/views/chats/_ai_consent.html.erb
@@ -5,7 +5,7 @@
 
   <h3 class="text-sm font-medium text-primary mb-1 -mt-2 text-center">Enable AI Chats</h3>
 
-  <p class="text-gray-600 mb-4 text-sm text-center">
+  <p class="text-secondary mb-4 text-sm text-center">
     <% if Current.user.ai_available? %>
       AI chat can answer financial questions and provide insights based on your data. To use this feature you'll need to explicitly enable it.
     <% else %>
diff --git a/app/views/chats/_ai_greeting.html.erb b/app/views/chats/_ai_greeting.html.erb
index e04b9bc51..ad10d9cd0 100644
--- a/app/views/chats/_ai_greeting.html.erb
+++ b/app/views/chats/_ai_greeting.html.erb
@@ -30,7 +30,7 @@
         <% questions.each do |question| %>
           <button data-action="chat#submitSampleQuestion"
                   data-chat-question-param="<%= question[:text] %>"
-                  class="w-fit flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
+                  class="w-fit flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-surface-inset">
             <%= icon(question[:icon]) %> <%= question[:text] %>
           </button>
         <% end %>
diff --git a/app/views/coinstats_items/new.html.erb b/app/views/coinstats_items/new.html.erb
index 955c7a2cb..40b90570b 100644
--- a/app/views/coinstats_items/new.html.erb
+++ b/app/views/coinstats_items/new.html.erb
@@ -54,7 +54,7 @@
 
               <div class="flex justify-end">
                 <%= form.submit t(".link_wallet_submit"),
-                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
               </div>
             <% end %>
           </section>
@@ -91,7 +91,7 @@
 
               <div class="flex justify-end">
                 <%= form.submit t(".link_exchange_submit"),
-                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
               </div>
             <% end %>
           </section>
diff --git a/app/views/enable_banking_items/new.html.erb b/app/views/enable_banking_items/new.html.erb
index f7e99cf3d..4e0376c8b 100644
--- a/app/views/enable_banking_items/new.html.erb
+++ b/app/views/enable_banking_items/new.html.erb
@@ -41,7 +41,7 @@
                     <% if item.session_valid? %>
                     <%= button_to sync_enable_banking_item_path(item),
                                     method: :post,
-                                    class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-gray-50 transition-colors",
+                                    class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-surface-inset transition-colors",
                                     data: { turbo: false } do %>
                         Sync
                     <% end %>
@@ -54,7 +54,7 @@
                     <% end %>
                     <% else %>
                     <%= link_to select_bank_enable_banking_item_path(item),
-                                class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
+                                class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-inverse button-bg-primary hover:button-bg-primary-hover transition-colors",
                                 data: { turbo_frame: "modal" } do %>
                         Connect Bank
                     <% end %>
@@ -75,7 +75,7 @@
                 <div class="flex justify-center pt-2">
                 <%= button_to new_connection_enable_banking_item_path(item_for_new_connection),
                                 method: :post,
-                                class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
+                                class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover transition-colors",
                                 data: { turbo_frame: "modal" } do %>
                     <%= icon "plus", size: "sm" %>
                     Add Connection
diff --git a/app/views/family_merchants/merge.html.erb b/app/views/family_merchants/merge.html.erb
index 77d6ba84f..d2fca9c7d 100644
--- a/app/views/family_merchants/merge.html.erb
+++ b/app/views/family_merchants/merge.html.erb
@@ -13,7 +13,7 @@
         <div class="max-h-64 overflow-y-auto space-y-1 border border-secondary rounded-lg p-2">
           <% @merchants.each do |merchant| %>
             <label class="flex items-center gap-2 p-2 hover:bg-surface-hover rounded cursor-pointer">
-              <%= check_box_tag "source_ids[]", merchant.id, false, class: "rounded border-gray-300" %>
+              <%= check_box_tag "source_ids[]", merchant.id, false, class: "rounded border-secondary" %>
               <span class="text-sm text-primary"><%= merchant.name %></span>
               <% if merchant.is_a?(ProviderMerchant) %>
                 <span class="text-xs text-subdued">(<%= merchant.source&.titleize %>)</span>
diff --git a/app/views/import/cleans/show.html.erb b/app/views/import/cleans/show.html.erb
index 3fcbf8143..14941acf8 100644
--- a/app/views/import/cleans/show.html.erb
+++ b/app/views/import/cleans/show.html.erb
@@ -34,7 +34,7 @@
       </div>
 
       <div class="flex justify-center w-full md:w-auto">
-        <div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium w-full md:w-auto">
+        <div class="bg-surface-inset rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium w-full md:w-auto">
           <%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg flex-1 md:flex-auto text-center #{params[:view] != 'errors' ? 'bg-container' : ''}" %>
           <%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg flex-1 md:flex-auto text-center #{params[:view] == 'errors' ? 'bg-container' : ''}" %>
         </div>
diff --git a/app/views/import/confirms/show.html.erb b/app/views/import/confirms/show.html.erb
index 269aca93e..1c89375be 100644
--- a/app/views/import/confirms/show.html.erb
+++ b/app/views/import/confirms/show.html.erb
@@ -44,7 +44,7 @@
       <% @import.mapping_steps.each_with_index do |step_mapping_class, idx| %>
         <% is_active = step_idx == idx %>
 
-        <%= link_to url_for(step: idx + 1), class: "w-5 h-[3px] #{is_active ? 'bg-gray-900' : 'bg-gray-100'} rounded-xl hover:bg-gray-300 transition-colors duration-200" do %>
+        <%= link_to url_for(step: idx + 1), class: "w-5 h-[3px] #{is_active ? 'bg-inverse hover:bg-inverse-hover' : 'bg-surface-inset hover:bg-surface-inset-hover'} rounded-xl transition-colors duration-200" do %>
           <span class="sr-only">Step <%= idx + 1 %></span>
         <% end %>
       <% end %>
diff --git a/app/views/imports/_importing.html.erb b/app/views/imports/_importing.html.erb
index 43d61f540..546701705 100644
--- a/app/views/imports/_importing.html.erb
+++ b/app/views/imports/_importing.html.erb
@@ -2,7 +2,7 @@
 
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
-    <div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
+    <div class="mx-auto bg-gray-tint-5 h-8 w-8 rounded-full flex items-center justify-center">
       <%= icon "loader", class: "animate-pulse" %>
     </div>
 
diff --git a/app/views/imports/_pdf_import.html.erb b/app/views/imports/_pdf_import.html.erb
index f565e8274..068d55da9 100644
--- a/app/views/imports/_pdf_import.html.erb
+++ b/app/views/imports/_pdf_import.html.erb
@@ -16,14 +16,14 @@
       <div class="bg-container border border-primary rounded-xl p-4 space-y-4">
         <div class="space-y-2">
           <h2 class="font-medium text-primary"><%= t("imports.pdf_import.document_type_label") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg">
             <%= t("imports.document_types.#{import.document_type}", default: import.document_type&.humanize || t("imports.pdf_import.unknown_document_type", default: "Unknown")) %>
           </p>
         </div>
 
         <div class="space-y-2">
           <h2 class="font-medium text-primary"><%= t("imports.pdf_import.transactions_extracted", default: "Transactions Extracted") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg">
             <%= t("imports.pdf_import.transactions_extracted_count", count: import.rows_count, default: "%{count} transactions") %>
           </p>
         </div>
@@ -63,7 +63,7 @@
       </div>
 
     <% elsif import.importing? || import.pending? %>
-      <div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
+      <div class="mx-auto bg-gray-tint-5 h-8 w-8 rounded-full flex items-center justify-center">
         <%= icon "loader", class: "animate-pulse" %>
       </div>
 
@@ -92,7 +92,7 @@
 
       <div class="space-y-2 flex flex-col">
         <%= render DS::Link.new(text: t("imports.pdf_import.try_again"), href: new_import_path, variant: "primary", full_width: true) %>
-        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-gray-200 hover:bg-gray-300" %>
+        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-surface-inset hover:bg-surface-inset-hover" %>
       </div>
 
     <% elsif import.complete? && import.ai_processed? %>
@@ -108,14 +108,14 @@
       <div class="bg-container border border-primary rounded-xl p-4 space-y-4">
         <div class="space-y-2">
           <h2 class="font-medium text-primary"><%= t("imports.pdf_import.document_type_label") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg">
             <%= t("imports.document_types.#{import.document_type}", default: import.document_type&.humanize || t("imports.pdf_import.unknown_document_type", default: "Unknown")) %>
           </p>
         </div>
 
         <div class="space-y-2">
           <h2 class="font-medium text-primary"><%= t("imports.pdf_import.summary_label") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg whitespace-pre-wrap">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg whitespace-pre-wrap">
             <%= import.ai_summary %>
           </p>
         </div>
@@ -127,7 +127,7 @@
 
       <div class="space-y-2 flex flex-col">
         <%= render DS::Link.new(text: t("imports.pdf_import.back_to_imports"), href: imports_path, variant: "primary", full_width: true) %>
-        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-gray-200 hover:bg-gray-300" %>
+        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-surface-inset hover:bg-surface-inset-hover" %>
       </div>
 
     <% else %>
diff --git a/app/views/imports/_table.html.erb b/app/views/imports/_table.html.erb
index 8de7cea31..87978afeb 100644
--- a/app/views/imports/_table.html.erb
+++ b/app/views/imports/_table.html.erb
@@ -2,10 +2,10 @@
 <div class="bg-container-inset rounded-xl overflow-hidden md:mx-auto p-4">
   <% if caption %>
     <div class="flex items-center mb-4">
-      <div class="text-gray-500 mr-2">
+      <div class="text-secondary mr-2">
         <%= inline_svg_tag "icon-csv.svg", class: "w-4 h-4" %>
       </div>
-      <h2 class="text-sm text-gray-500 font-medium"><%= caption %></h2>
+      <h2 class="text-sm text-secondary font-medium"><%= caption %></h2>
     </div>
   <% end %>
   <div class="inline-block min-w-fit sm:w-full rounded-lg shadow-border-xs text-sm bg-container">
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
index 33d07ddfd..84d235a15 100644
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -112,8 +112,8 @@
             <%= render "imports/import_option",
               type: "TransactionImport",
               icon_name: "bar-chart-2",
-              icon_bg_class: "bg-gray-500/5",
-              icon_text_class: "text-gray-400",
+              icon_bg_class: "bg-gray-tint-5",
+              icon_text_class: "text-subdued",
               label: t(".import_ynab"),
               enabled: false,
               disabled_message: t(".coming_soon") %>
diff --git a/app/views/layouts/auth.html.erb b/app/views/layouts/auth.html.erb
index c02ee861f..271abef83 100644
--- a/app/views/layouts/auth.html.erb
+++ b/app/views/layouts/auth.html.erb
@@ -26,7 +26,7 @@
                 <%= tag.span t("layouts.auth.no_account", product_name: product_name), class: "text-secondary" %> <%= link_to t("layouts.auth.sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>
               </p>
             <% elsif controller_name == "registrations" %>
-              <p class="text-sm text-center text-gray-600 hidden md:block">
+              <p class="text-sm text-center text-secondary hidden md:block">
                 <%= t("layouts.auth.existing_account") %> <%= link_to t("layouts.auth.sign_in"), new_session_path, class: "font-medium text-primary hover:underline transition" %>
               </p>
             <% end %>
diff --git a/app/views/layouts/shared/_breadcrumbs.html.erb b/app/views/layouts/shared/_breadcrumbs.html.erb
index 665fa4bea..bbe191b28 100644
--- a/app/views/layouts/shared/_breadcrumbs.html.erb
+++ b/app/views/layouts/shared/_breadcrumbs.html.erb
@@ -7,11 +7,11 @@
     <% end %>
 
     <% if path.present? && index < breadcrumbs.size - 1 %>
-      <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
+      <%= link_to name, path, class: "text-sm text-secondary font-medium" %>
     <% elsif index == breadcrumbs.size - 1 %>
       <span class="text-primary font-medium text-sm"><%= name %></span>
     <% else %>
-      <span class="text-sm text-gray-500 font-medium"><%= name %></span>
+      <span class="text-sm text-secondary font-medium"><%= name %></span>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/layouts/shared/_page_header.html.erb b/app/views/layouts/shared/_page_header.html.erb
index 018195fe0..622820cab 100644
--- a/app/views/layouts/shared/_page_header.html.erb
+++ b/app/views/layouts/shared/_page_header.html.erb
@@ -4,7 +4,7 @@
     <div class="space-y-1">
       <h1 class="text-3xl font-medium text-primary"><%= title %></h1>
       <% if local_assigns[:subtitle].present? %>
-        <p class="text-gray-500"><%= subtitle %></p>
+        <p class="text-secondary"><%= subtitle %></p>
       <% end %>
     </div>
   <% end %>
diff --git a/app/views/lunchflow_items/_api_error.html.erb b/app/views/lunchflow_items/_api_error.html.erb
index 1a1b49b3e..cec9db68c 100644
--- a/app/views/lunchflow_items/_api_error.html.erb
+++ b/app/views/lunchflow_items/_api_error.html.erb
@@ -24,7 +24,7 @@
 
         <div class="mt-4">
           <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                       data: { turbo: false } do %>
             Check Provider Settings
           <% end %>
diff --git a/app/views/lunchflow_items/_setup_required.html.erb b/app/views/lunchflow_items/_setup_required.html.erb
index 8776d7406..b205ef4bd 100644
--- a/app/views/lunchflow_items/_setup_required.html.erb
+++ b/app/views/lunchflow_items/_setup_required.html.erb
@@ -23,7 +23,7 @@
 
         <div class="mt-4">
           <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                       data: { turbo: false } do %>
             Go to Provider Settings
           <% end %>
diff --git a/app/views/mercury_items/_api_error.html.erb b/app/views/mercury_items/_api_error.html.erb
index bca14207b..4e4124635 100644
--- a/app/views/mercury_items/_api_error.html.erb
+++ b/app/views/mercury_items/_api_error.html.erb
@@ -25,7 +25,7 @@
 
         <div class="mt-4">
           <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                       data: { turbo: false } do %>
             Check Provider Settings
           <% end %>
diff --git a/app/views/mercury_items/_setup_required.html.erb b/app/views/mercury_items/_setup_required.html.erb
index b8f576022..069847729 100644
--- a/app/views/mercury_items/_setup_required.html.erb
+++ b/app/views/mercury_items/_setup_required.html.erb
@@ -23,7 +23,7 @@
 
         <div class="mt-4">
           <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                       data: { turbo: false } do %>
             Go to Provider Settings
           <% end %>
diff --git a/app/views/mfa/new.html.erb b/app/views/mfa/new.html.erb
index c8ad0892f..65d56380f 100644
--- a/app/views/mfa/new.html.erb
+++ b/app/views/mfa/new.html.erb
@@ -27,7 +27,7 @@
                  autocomplete="off"
                  value="<%= Current.user.otp_secret %>"
                  class="text-sm bg-container px-2 py-1 rounded border border-secondary w-96 font-mono">
-          <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
+          <button data-action="clipboard#copy" class="text-secondary hover:text-primary">
             <span data-clipboard-target="iconDefault">
               <%= icon "copy" %>
             </span>
diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb
index 426a8451d..1f33f1154 100644
--- a/app/views/password_resets/new.html.erb
+++ b/app/views/password_resets/new.html.erb
@@ -16,6 +16,6 @@
     href: new_session_path,
     variant: :secondary,
     full_width: true,
-    class: "bg-white hover:bg-gray-100"
+    class: "bg-container hover:bg-surface-inset"
   ) %>
 </div>
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
index 08aa1c720..7d9a7b25e 100644
--- a/app/views/registrations/new.html.erb
+++ b/app/views/registrations/new.html.erb
@@ -53,7 +53,7 @@
             action: "input->password-validator#validate"
           } %>
       <button type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-secondary hover:text-primary focus:outline-none"
               data-action="click->password-visibility#toggle">
         <div data-password-visibility-target="showIcon">
           <%= icon("eye") %>
@@ -65,10 +65,10 @@
     </div>
 
     <div class="flex gap-4 my-4">
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
     </div>
 
     <div class="space-y-1 my-4">
diff --git a/app/views/shared/_badge.html.erb b/app/views/shared/_badge.html.erb
index 56e099cb3..810a5fc08 100644
--- a/app/views/shared/_badge.html.erb
+++ b/app/views/shared/_badge.html.erb
@@ -10,7 +10,7 @@
               when "warning"
                 "bg-orange-500/5 text-orange-500"
               else
-                "bg-gray-500/5 text-secondary"
+                "bg-gray-tint-5 text-secondary"
               end
 
     p ? "#{classes} animate-pulse" : classes
diff --git a/app/views/sophtron_items/_setup_required.html.erb b/app/views/sophtron_items/_setup_required.html.erb
index b74b9dacc..9c759597f 100644
--- a/app/views/sophtron_items/_setup_required.html.erb
+++ b/app/views/sophtron_items/_setup_required.html.erb
@@ -23,7 +23,7 @@
 
         <div class="mt-4">
           <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                       data: { turbo: false } do %>
             <%= t("sophtron_items.sophtron_setup_required.go_to_provider_settings") %>
           <% end %>
diff --git a/app/views/transfer_matches/new.html.erb b/app/views/transfer_matches/new.html.erb
index 2a7c99f8a..d6f8a765b 100644
--- a/app/views/transfer_matches/new.html.erb
+++ b/app/views/transfer_matches/new.html.erb
@@ -9,7 +9,7 @@
         ) do |f| %>
       <section class="space-y-4">
         <div class="space-y-2">
-          <h2 class="text-sm font-medium text-gray-700">
+          <h2 class="text-sm font-medium text-secondary">
             <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
           </h2>
 
@@ -36,7 +36,7 @@
 
       <section class="space-y-4">
         <div class="space-y-2">
-          <h2 class="text-sm font-medium text-gray-700">
+          <h2 class="text-sm font-medium text-secondary">
             <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
           </h2>
 
diff --git a/app/views/valuations/index.html.erb b/app/views/valuations/index.html.erb
index 427714e32..c20fa26ff 100644
--- a/app/views/valuations/index.html.erb
+++ b/app/views/valuations/index.html.erb
@@ -4,7 +4,7 @@
       <%= tag.h2 t(".valuations"), class: "font-medium text-lg" %>
       <%= link_to new_valuation_path(@account),
                   data:  { turbo_frame: dom_id(@account.entries.valuations.new) },
-                  class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
+                  class: "flex gap-1 font-medium items-center bg-surface-inset text-primary p-2 rounded-lg" do %>
         <span class="text-primary">
           <%= icon("plus", color: "current") %>
         </span>