diff --git a/app/views/chats/_ai_consent.html.erb b/app/views/chats/_ai_consent.html.erb
index f3a97c3e..e96d2570 100644
--- a/app/views/chats/_ai_consent.html.erb
+++ b/app/views/chats/_ai_consent.html.erb
@@ -18,7 +18,7 @@
     <%= form_with url: user_path(Current.user), method: :patch, class: "w-full", data: { turbo: false } do |form| %>
       <%= form.hidden_field "user[ai_enabled]", value: true %>
       <%= form.hidden_field "user[redirect_to]", value: "home" %>
-      <%= form.submit "Enable Maybe AI", class: "cursor-pointer hover:bg-black w-full py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
+      <%= form.submit "Enable Maybe AI", class: "cursor-pointer hover:bg-inverse-hover w-full py-2 px-4 bg-inverse fg-inverse rounded-lg text-sm font-medium" %>
     <% end %>
   <% end %>
 
diff --git a/app/views/holdings/_missing_price_tooltip.html.erb b/app/views/holdings/_missing_price_tooltip.html.erb
index e24fa310..f2f59201 100644
--- a/app/views/holdings/_missing_price_tooltip.html.erb
+++ b/app/views/holdings/_missing_price_tooltip.html.erb
@@ -4,7 +4,7 @@
     <%= tag.span t(".missing_data"), class: "font-normal text-xs" %>
   </div>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
-    <div class="text-white">
+    <div class="fg-inverse">
       <%= t(".description") %>
     </div>
   </div>
diff --git a/app/views/investments/_value_tooltip.html.erb b/app/views/investments/_value_tooltip.html.erb
index 62615d76..0cdeee27 100644
--- a/app/views/investments/_value_tooltip.html.erb
+++ b/app/views/investments/_value_tooltip.html.erb
@@ -3,14 +3,14 @@
 <div data-controller="tooltip" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
   <%= icon("info", size: "sm") %>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
-    <div class="text-white">
+    <div class="fg-inverse">
       <%= t(".total_value_tooltip") %>
     </div>
     <div class="flex pt-3">
       <div class="text-gray-300">
         <%= t(".cash") %>
       </div>
-      <div class="text-white ml-auto">
+      <div class="fg-inverse ml-auto">
         <%= tag.p format_money(cash, precision: 0) %>
       </div>
     </div>
@@ -18,18 +18,18 @@
       <div class="text-gray-300">
         <%= t(".holdings") %>
       </div>
-      <div class="text-white ml-auto">
+      <div class="fg-inverse ml-auto">
         <%= tag.p format_money(holdings, precision: 0) %>
       </div>
     </div>
 
-    <hr class="my-2 border-gray-500">
+    <hr class="my-2 border-secondary">
 
     <div class="flex">
       <div class="text-gray-300">
         <%= t(".total") %>
       </div>
-      <div class="text-white font-bold ml-auto">
+      <div class="fg-inverse font-bold ml-auto">
         <%= tag.p format_money(balance, precision: 0) %>
       </div>
     </div>
diff --git a/app/views/invitations/new.html.erb b/app/views/invitations/new.html.erb
index 6d1c2cbc..71e4d624 100644
--- a/app/views/invitations/new.html.erb
+++ b/app/views/invitations/new.html.erb
@@ -17,7 +17,7 @@
         { label: t(".role_label") } %>
 
       <div class="w-full">
-        <%= form.submit t(".submit"), class: "bg-gray-900 text-white rounded-lg px-4 py-2 w-full" %>
+        <%= form.submit t(".submit"), class: "bg-inverse fg-inverse rounded-lg px-4 py-2 w-full" %>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/pages/changelog.html.erb b/app/views/pages/changelog.html.erb
index 0756ca5c..d401f0d8 100644
--- a/app/views/pages/changelog.html.erb
+++ b/app/views/pages/changelog.html.erb
@@ -5,7 +5,7 @@
     <div class="w-full md:w-1/3">
       <div class="md:px-3 flex items-center gap-3">
         <% if @release_notes[:avatar].present? %>
-          <div class="text-white shrink-0 w-9 h-9">
+          <div class="fg-inverse shrink-0 w-9 h-9">
             <%= image_tag @release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
           </div>
         <% else %>
diff --git a/app/views/settings/hostings/_danger_zone_settings.html.erb b/app/views/settings/hostings/_danger_zone_settings.html.erb
index 6c96415e..18cfd4d0 100644
--- a/app/views/settings/hostings/_danger_zone_settings.html.erb
+++ b/app/views/settings/hostings/_danger_zone_settings.html.erb
@@ -7,12 +7,12 @@
       </div>
       <%=
             button_to t("settings.hostings.show.clear_cache"), clear_cache_settings_hosting_path, method: :delete,
-              class: "w-full md:w-auto bg-orange-500 text-white text-sm font-medium rounded-lg px-4 py-2",
+              class: "w-full md:w-auto bg-yellow-600 fg-inverse text-sm font-medium rounded-lg px-4 py-2",
               data: { turbo_confirm: {
                 title: t("settings.hostings.show.confirm_clear_cache.title"),
                 body: t("settings.hostings.show.confirm_clear_cache.body"),
                 accept: t("settings.hostings.show.clear_cache"),
-                acceptClass: "w-full bg-orange-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                acceptClass: "w-full bg-yellow-600 fg-inverse rounded-xl text-center p-[10px] border mb-2"
               }}
       %>
     </div>
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index 0819252b..ceb6a36c 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/app/views/settings/profiles/show.html.erb
@@ -67,7 +67,7 @@
           <div class="flex gap-2 items-center justify-between bg-container p-4 border border-alpha-black-25 rounded-lg">
             <div class="flex gap-2 items-center">
               <div class="w-9 h-9 shrink-0">
-                <div class="text-white w-full h-full bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
+                <div class="fg-inverse w-full h-full bg-surface-inset rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
               </div>
               <div class="flex">
                 <p class="text-primary font-medium text-sm"><%= invitation.email %></p>
diff --git a/app/views/shared/_text_tooltip.erb b/app/views/shared/_text_tooltip.erb
index f6823c80..a576b114 100644
--- a/app/views/shared/_text_tooltip.erb
+++ b/app/views/shared/_text_tooltip.erb
@@ -1,5 +1,5 @@
 <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm px-1.5 py-1 rounded-md">
-  <div class="text-white font-normal max-w-[200px]">
+  <div class="fg-inverse font-normal max-w-[200px]">
     <%= tooltip_text %>
   </div>
 </div>
diff --git a/app/views/shared/notifications/_cta.html.erb b/app/views/shared/notifications/_cta.html.erb
index 456cae73..c428b66d 100644
--- a/app/views/shared/notifications/_cta.html.erb
+++ b/app/views/shared/notifications/_cta.html.erb
@@ -3,7 +3,7 @@
 <div id="cta">
   <%= tag.div class: "relative flex gap-3 rounded-lg bg-container p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %>
     <div class="h-5 w-5 shrink-0 p-px text-primary">
-      <div class="flex h-full items-center justify-center rounded-full bg-success text-white">
+      <div class="flex h-full items-center justify-center rounded-full bg-success fg-inverse">
         <%= icon "check", size: "xs", color: "current" %>
       </div>
     </div>
diff --git a/app/views/shared/notifications/_notice.html.erb b/app/views/shared/notifications/_notice.html.erb
index a542e729..5081cfc9 100644
--- a/app/views/shared/notifications/_notice.html.erb
+++ b/app/views/shared/notifications/_notice.html.erb
@@ -31,6 +31,6 @@
   </div>
 
   <div class="absolute -top-2 -right-2">
-    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
+    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-container text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
   </div>
 <% end %>