From 01847f5263919d1e486ed571a96e4aa761d1ec81 Mon Sep 17 00:00:00 2001
From: Josh Pigford <josh@joshpigford.com>
Date: Thu, 10 Apr 2025 10:55:27 -0500
Subject: [PATCH] Initial rough pass on colors

---
 .cursor/rules/ui-ux-design-guidelines.mdc     |  2 +-
 app/assets/tailwind/maybe-design-system.css   | 54 +++++++++++++++++--
 app/helpers/forms_helper.rb                   |  2 +-
 app/helpers/menus_helper.rb                   |  2 +-
 .../account/entries/_entry_group.html.erb     |  2 +-
 app/views/account/entries/_loading.html.erb   |  2 +-
 app/views/account/holdings/index.html.erb     |  4 +-
 app/views/account/transactions/_form.html.erb |  2 +-
 .../account/transactions/bulk_edit.html.erb   |  2 +-
 app/views/account/valuations/index.html.erb   |  4 +-
 .../accounts/_account_sidebar_tabs.html.erb   |  2 +-
 .../accounts/_accountable_group.html.erb      |  6 +--
 app/views/accounts/_summary_card.html.erb     |  2 +-
 app/views/accounts/index/_account_groups.erb  |  2 +-
 .../accounts/index/_manual_accounts.html.erb  |  2 +-
 app/views/accounts/show/_activity.html.erb    |  8 +--
 app/views/accounts/show/_chart.html.erb       |  2 +-
 app/views/accounts/show/_menu.html.erb        |  2 +-
 app/views/accounts/show/_tab.html.erb         |  2 +-
 .../_budget_category.html.erb                 |  2 +-
 app/views/budget_categories/index.html.erb    |  2 +-
 app/views/budgets/_budget_categories.html.erb |  2 +-
 app/views/budgets/_picker.html.erb            |  2 +-
 app/views/budgets/show.html.erb               | 12 ++---
 app/views/categories/_category.html.erb       |  4 +-
 .../categories/_category_list_group.html.erb  |  2 +-
 app/views/categories/_form.html.erb           |  2 +-
 app/views/categories/_menu.html.erb           |  2 +-
 app/views/categories/_ruler.html.erb          |  2 +-
 app/views/categories/index.html.erb           |  2 +-
 app/views/category/deletions/new.html.erb     |  4 +-
 app/views/category/dropdowns/_row.html.erb    |  2 +-
 app/views/category/dropdowns/show.html.erb    |  2 +-
 app/views/chats/_ai_consent.html.erb          |  8 +--
 app/views/chats/_ai_greeting.html.erb         |  2 +-
 app/views/chats/edit.html.erb                 |  2 +-
 app/views/chats/index.html.erb                |  6 +--
 app/views/import/cleans/show.html.erb         | 12 ++---
 app/views/import/confirms/_mappings.html.erb  |  2 +-
 app/views/import/uploads/show.html.erb        |  2 +-
 app/views/imports/_import.html.erb            |  2 +-
 app/views/imports/_ready.html.erb             |  4 +-
 app/views/imports/_table.html.erb             |  2 +-
 app/views/imports/index.html.erb              |  4 +-
 app/views/imports/new.html.erb                |  2 +-
 app/views/invite_codes/index.html.erb         |  2 +-
 app/views/layouts/application.html.erb        |  6 +--
 app/views/layouts/auth.html.erb               |  2 +-
 app/views/layouts/settings.html.erb           |  2 +-
 .../layouts/shared/_breadcrumbs.html.erb      |  2 +-
 .../layouts/shared/_page_header.html.erb      |  2 +-
 app/views/layouts/sidebar/_nav_item.html.erb  |  4 +-
 app/views/merchants/_merchant.html.erb        |  4 +-
 app/views/merchants/_ruler.html.erb           |  2 +-
 app/views/merchants/index.html.erb            |  4 +-
 app/views/messages/_chat_form.html.erb        |  2 +-
 app/views/onboardings/preferences.html.erb    |  2 +-
 app/views/onboardings/profile.html.erb        |  4 +-
 app/views/pages/changelog.html.erb            |  2 +-
 app/views/pages/dashboard.html.erb            |  4 +-
 .../pages/dashboard/_balance_sheet.html.erb   |  6 +--
 app/views/pages/early_access.html.erb         |  4 +-
 app/views/pages/feedback.html.erb             |  2 +-
 app/views/plaid_items/_plaid_item.html.erb    |  4 +-
 app/views/settings/_section.html.erb          |  2 +-
 .../settings/_settings_nav_item.html.erb      |  2 +-
 .../_settings_nav_link_large.html.erb         |  2 +-
 app/views/settings/billings/show.html.erb     |  2 +-
 app/views/settings/profiles/show.html.erb     |  4 +-
 app/views/settings/securities/show.html.erb   |  2 +-
 app/views/shared/_app_version.html.erb        |  2 +-
 app/views/shared/_drawer.html.erb             |  2 +-
 app/views/shared/_modal.html.erb              |  2 +-
 app/views/shared/_notification.html.erb       |  4 +-
 app/views/shared/_pagination.html.erb         |  2 +-
 app/views/shared/_subscribe_modal.html.erb    |  4 +-
 app/views/shared/_syncing_notice.html.erb     |  2 +-
 app/views/tag/deletions/new.html.erb          |  4 +-
 app/views/tags/_ruler.html.erb                |  2 +-
 app/views/tags/_tag.html.erb                  |  4 +-
 app/views/tags/index.html.erb                 |  4 +-
 app/views/transactions/_summary.html.erb      |  2 +-
 app/views/transactions/index.html.erb         |  2 +-
 .../transactions/searches/_menu.html.erb      |  4 +-
 app/views/transfers/_form.html.erb            |  2 +-
 .../user_messages/_user_message.html.erb      |  2 +-
 app/views/users/_user_menu.html.erb           |  2 +-
 87 files changed, 179 insertions(+), 135 deletions(-)

diff --git a/.cursor/rules/ui-ux-design-guidelines.mdc b/.cursor/rules/ui-ux-design-guidelines.mdc
index 430959d6..49bf9faf 100644
--- a/.cursor/rules/ui-ux-design-guidelines.mdc
+++ b/.cursor/rules/ui-ux-design-guidelines.mdc
@@ -15,7 +15,7 @@ The codebase uses TailwindCSS v4.x (the newest version) with a custom design sys
 
 - Always start by referencing [maybe-design-system.css](mdc:app/assets/tailwind/maybe-design-system.css) to see the base primitives, functional tokens, and component tokens we use in the codebase
 - Always prefer using the functional "tokens" defined in @maybe-design-system.css when possible.
-  - Example 1: use `text-primary` rather than `text-gray-900`
+  - Example 1: use `text-primary` rather than `text-primary`
   - Example 2: use `bg-container` rather than `bg-white`
   - Example 3: use `border border-primary` rather than `border border-gray-200` 
 - Never create new styles in [maybe-design-system.css](mdc:app/assets/tailwind/maybe-design-system.css) or [application.css](mdc:app/assets/tailwind/application.css) without explicitly receiving permission to do so
diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index 65772d05..49d7265b 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/app/assets/tailwind/maybe-design-system.css
@@ -275,46 +275,90 @@
 
 @utility bg-surface {
   @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-black;
+  }
 }
 
 @utility bg-surface-hover {
   @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
 }
 
 @utility bg-surface-inset {
   @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-900;
+  }
 }
 
 @utility bg-surface-inset-hover {
   @apply bg-gray-200;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
 }
 
 @utility bg-container {
   @apply bg-white;
+
+  @variant theme-dark {
+    @apply bg-gray-900;
+  }
 }
 
 @utility bg-container-hover {
   @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
 }
 
 @utility bg-container-inset {
   @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
 }
 
 @utility bg-container-inset-hover {
   @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-700;
+  }
 }
 
 @utility bg-inverse {
   @apply bg-gray-800;
+
+  @variant theme-dark {
+    @apply bg-white;
+  }
 }
 
 @utility bg-inverse-hover {
   @apply bg-gray-700;
+
+  @variant theme-dark {
+    @apply bg-gray-100;
+  }
 }
 
 @utility bg-overlay {
-  @apply bg-alpha-black-200;
+  background-color: rgba(var(--color-gray-100), 0.5);
+
+  @variant theme-dark {
+    background-color: var(--color-alpha-black-900);
+  }
 }
 
 @utility border-primary {
@@ -363,15 +407,15 @@
   }
   
   .btn--secondary {
-    @apply bg-gray-50 hover:bg-gray-100 text-gray-900;
+    @apply bg-gray-50 hover:bg-gray-100 text-primary;
   }
   
   .btn--outline {
-    @apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
+    @apply border border-alpha-black-200 text-primary hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
   }
   
   .btn--ghost {
-    @apply border border-transparent text-gray-900 hover:bg-gray-100;
+    @apply border border-transparent text-primary hover:bg-surface-inset-hover;
   }
 
   .btn--destructive {
@@ -421,7 +465,7 @@
   }
   
   .form-field__radio {
-    @apply text-gray-900;
+    @apply text-primary;
   }
   
   .form-field__submit {
diff --git a/app/helpers/forms_helper.rb b/app/helpers/forms_helper.rb
index 55c8c74c..0f0c8f40 100644
--- a/app/helpers/forms_helper.rb
+++ b/app/helpers/forms_helper.rb
@@ -30,7 +30,7 @@ end
 
   private
     def radio_tab_contents(label:, icon:)
-      tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm") do
+      tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued group-has-checked:bg-container group-has-checked:text-gray-800 group-has-checked:shadow-sm") do
         concat lucide_icon(icon, class: "w-5 h-5")
         concat tag.span(label, class: "group-has-checked:font-semibold")
       end
diff --git a/app/helpers/menus_helper.rb b/app/helpers/menus_helper.rb
index f903d8ec..34134888 100644
--- a/app/helpers/menus_helper.rb
+++ b/app/helpers/menus_helper.rb
@@ -38,7 +38,7 @@ module MenusHelper
     end
 
     def contextual_menu_content(&block)
-      tag.div class: "min-w-[200px] p-1 z-50 shadow-border-xs bg-white rounded-lg hidden",
+      tag.div class: "min-w-[200px] p-1 z-50 shadow-border-xs bg-container rounded-lg hidden",
                data: { menu_target: "content" } do
         capture(&block)
       end
diff --git a/app/views/account/entries/_entry_group.html.erb b/app/views/account/entries/_entry_group.html.erb
index 7a08bcf7..20ed2e45 100644
--- a/app/views/account/entries/_entry_group.html.erb
+++ b/app/views/account/entries/_entry_group.html.erb
@@ -21,7 +21,7 @@
       </div>
     <% end %>
   </div>
-  <div class="bg-white shadow-border-xs rounded-md divide-y divide-alpha-black-50">
+  <div class="bg-container shadow-border-xs rounded-md divide-y divide-alpha-black-50">
     <%= content %>
   </div>
 </div>
diff --git a/app/views/account/entries/_loading.html.erb b/app/views/account/entries/_loading.html.erb
index e5496bb7..cb9276b5 100644
--- a/app/views/account/entries/_loading.html.erb
+++ b/app/views/account/entries/_loading.html.erb
@@ -1,4 +1,4 @@
-<div class="bg-white space-y-4 p-5 shadow-border-xs rounded-xl">
+<div class="bg-container space-y-4 p-5 shadow-border-xs rounded-xl">
   <div class="p-5 flex justify-center items-center">
     <%= tag.p t(".loading"), class: "text-secondary animate-pulse text-sm" %>
   </div>
diff --git a/app/views/account/holdings/index.html.erb b/app/views/account/holdings/index.html.erb
index 6b80ab59..49e393d9 100644
--- a/app/views/account/holdings/index.html.erb
+++ b/app/views/account/holdings/index.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@account, "holdings") do %>
-  <div class="bg-white space-y-4 p-5 rounded-xl shadow-border-xs">
+  <div class="bg-container space-y-4 p-5 rounded-xl shadow-border-xs">
     <div class="flex items-center justify-between">
       <%= tag.h2 t(".holdings"), class: "font-medium text-lg" %>
       <%= link_to new_account_trade_path(account_id: @account.id),
@@ -20,7 +20,7 @@
         <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
       </div>
 
-      <div class="rounded-lg bg-white shadow-border-xs">
+      <div class="rounded-lg bg-container shadow-border-xs">
         <%= render "account/holdings/cash", account: @account %>
 
         <%= render "account/holdings/ruler" %>
diff --git a/app/views/account/transactions/_form.html.erb b/app/views/account/transactions/_form.html.erb
index 8ca19c39..fd8d404c 100644
--- a/app/views/account/transactions/_form.html.erb
+++ b/app/views/account/transactions/_form.html.erb
@@ -8,7 +8,7 @@
     <fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
       <%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil? %>
       <%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow" %>
-      <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
+      <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued group-has-checked:bg-container group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
         <%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
         <%= tag.span t(".transfer") %>
       <% end %>
diff --git a/app/views/account/transactions/bulk_edit.html.erb b/app/views/account/transactions/bulk_edit.html.erb
index ed9a6194..c42faf50 100644
--- a/app/views/account/transactions/bulk_edit.html.erb
+++ b/app/views/account/transactions/bulk_edit.html.erb
@@ -1,7 +1,7 @@
 <%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
   <dialog data-controller="modal"
           data-action="mousedown->modal#clickOutside"
-    class="bg-white shadow-border-xs rounded-2xl max-h-[calc(100vh-32px)] h-full max-w-[480px] w-full mt-4 mr-4 ml-auto">
+    class="bg-container shadow-border-xs rounded-2xl max-h-[calc(100vh-32px)] h-full max-w-[480px] w-full mt-4 mr-4 ml-auto">
     <%= styled_form_with url: bulk_update_account_transactions_path, scope: "bulk_update", class: "h-full", data: { turbo_frame: "_top" } do |form| %>
       <div class="flex h-full flex-col justify-between p-4 gap-4">
         <div>
diff --git a/app/views/account/valuations/index.html.erb b/app/views/account/valuations/index.html.erb
index 0d859559..fd344c85 100644
--- a/app/views/account/valuations/index.html.erb
+++ b/app/views/account/valuations/index.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@account, "valuations") do %>
-  <div class="bg-white space-y-4 p-5 shadow-border-xs rounded-xl">
+  <div class="bg-container space-y-4 p-5 shadow-border-xs rounded-xl">
     <div class="flex items-center justify-between">
       <%= tag.h2 t(".valuations"), class: "font-medium text-lg" %>
       <%= link_to new_account_valuation_path(@account),
@@ -18,7 +18,7 @@
         <%= tag.div class: "col-span-1" %>
       </div>
 
-      <div class="rounded-lg bg-white shadow-border-xs">
+      <div class="rounded-lg bg-container shadow-border-xs">
         <%= turbo_frame_tag dom_id(@account.entries.account_valuations.new) %>
 
         <% if @entries.any? %>
diff --git a/app/views/accounts/_account_sidebar_tabs.html.erb b/app/views/accounts/_account_sidebar_tabs.html.erb
index 764ca6af..49d6ebaf 100644
--- a/app/views/accounts/_account_sidebar_tabs.html.erb
+++ b/app/views/accounts/_account_sidebar_tabs.html.erb
@@ -24,7 +24,7 @@
   class="space-y-3"
   data-controller="tabs"
   data-tabs-local-storage-key-value="account-sidebar-tabs"
-  data-tabs-active-class="bg-white shadow-sm text-primary"
+  data-tabs-active-class="bg-surface shadow-sm text-primary"
   data-tabs-inactive-class="text-secondary"
   data-tabs-default-tab-value="assets-tab">
   <div class="bg-surface-inset rounded-lg p-1 flex">
diff --git a/app/views/accounts/_accountable_group.html.erb b/app/views/accounts/_accountable_group.html.erb
index b240a557..b9676a9a 100644
--- a/app/views/accounts/_accountable_group.html.erb
+++ b/app/views/accounts/_accountable_group.html.erb
@@ -11,7 +11,7 @@
 
       <%= turbo_frame_tag "#{account_group.key}_sparkline", src: accountable_sparkline_path(account_group.key), loading: "lazy" do %>
         <div class="flex items-center w-8 h-4 ml-auto">
-          <div class="w-6 h-px bg-gray-200"></div>
+          <div class="w-6 h-px bg-surface-inset"></div>
         </div>
       <% end %>
     </div>
@@ -23,7 +23,7 @@
         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
 
         <div class="min-w-0 grow">
-          <%= tag.p account.name, class: "text-sm font-medium mb-0.5 truncate" %>
+          <%= tag.p account.name, class: "text-sm text-primary font-medium mb-0.5 truncate" %>
           <%= tag.p account.subtype&.humanize.presence || account_group.name, class: "text-sm text-secondary truncate" %>
         </div>
 
@@ -32,7 +32,7 @@
 
           <%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy" do %>
             <div class="flex items-center w-8 h-5 ml-auto">
-              <div class="w-6 h-px bg-gray-200"></div>
+              <div class="w-6 h-px bg-surface-inset"></div>
             </div>
           <% end %>
         </div>
diff --git a/app/views/accounts/_summary_card.html.erb b/app/views/accounts/_summary_card.html.erb
index 384c1c8e..fe327728 100644
--- a/app/views/accounts/_summary_card.html.erb
+++ b/app/views/accounts/_summary_card.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (title:, content:) %>
 
-<div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+<div class="rounded-xl bg-container shadow-xs border border-alpha-black-25 p-4">
   <h4 class="text-secondary text-sm"><%= title %></h4>
   <p class="text-xl font-medium text-primary">
     <%= content %>
diff --git a/app/views/accounts/index/_account_groups.erb b/app/views/accounts/index/_account_groups.erb
index a5665690..18119975 100644
--- a/app/views/accounts/index/_account_groups.erb
+++ b/app/views/accounts/index/_account_groups.erb
@@ -8,7 +8,7 @@
       <p><%= accounts.count %></p>
       <p class="ml-auto"><%= totals_by_currency(collection: accounts, money_method: :balance_money) %></p>
     </div>
-    <div class="bg-white">
+    <div class="bg-container">
       <% accounts.each do |account| %>
         <%= render account %>
       <% end %>
diff --git a/app/views/accounts/index/_manual_accounts.html.erb b/app/views/accounts/index/_manual_accounts.html.erb
index 9f3d34ed..b20c400e 100644
--- a/app/views/accounts/index/_manual_accounts.html.erb
+++ b/app/views/accounts/index/_manual_accounts.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (accounts:) %>
 
-<details open class="group bg-white p-4 shadow-border-xs rounded-xl">
+<details open class="group bg-container p-4 shadow-border-xs rounded-xl">
   <summary class="flex items-center gap-2 focus-visible:outline-hidden">
     <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
 
diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb
index e882e4c6..f11602d5 100644
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (account:) %>
 
 <%= turbo_frame_tag dom_id(account, "entries") do %>
-  <div class="bg-white p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
+  <div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
     <div class="flex items-center justify-between mb-4">
       <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
       <% unless @account.plaid_account_id.present? %>
@@ -10,7 +10,7 @@
             <%= lucide_icon("plus", class: "w-4 h-4") %>
             <%= tag.span t(".new") %>
           </button>
-          <div data-menu-target="content" class="z-10 hidden bg-white rounded-lg border border-alpha-black-25 shadow-xs p-1">
+          <div data-menu-target="content" class="z-10 hidden bg-container rounded-lg border border-alpha-black-25 shadow-xs p-1">
             <%= link_to new_account_valuation_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
               <%= lucide_icon("circle-dollar-sign", class: "text-secondary w-5 h-5") %>
               <%= tag.span t(".new_balance"), class: "text-sm" %>
@@ -74,7 +74,7 @@
         </div>
 
         <div>
-          <div class="rounded-tl-lg rounded-tr-lg bg-white border-alpha-black-25 shadow-xs">
+          <div class="rounded-tl-lg rounded-tr-lg bg-container border-alpha-black-25 shadow-xs">
             <div class="space-y-4">
               <% calculator = Account::BalanceTrendCalculator.for(@entries) %>
               <%= entries_by_date(@entries) do |entries| %>
@@ -85,7 +85,7 @@
             </div>
           </div>
 
-          <div class="p-4 bg-white rounded-bl-lg rounded-br-lg">
+          <div class="p-4 bg-container rounded-bl-lg rounded-br-lg">
             <%= render "shared/pagination", pagy: @pagy %>
           </div>
         </div>
diff --git a/app/views/accounts/show/_chart.html.erb b/app/views/accounts/show/_chart.html.erb
index 47c91fb0..9910fee0 100644
--- a/app/views/accounts/show/_chart.html.erb
+++ b/app/views/accounts/show/_chart.html.erb
@@ -3,7 +3,7 @@
 <% period =  @period || Period.last_30_days %>
 <% default_value_title = account.asset? ? t(".balance") : t(".owed") %>
 
-<div id="<%= dom_id(account, :chart) %>" class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg space-y-2">
+<div id="<%= dom_id(account, :chart) %>" class="bg-container shadow-xs rounded-xl border border-alpha-black-25 rounded-lg space-y-2">
   <div class="flex justify-between px-4 pt-4 mb-2">
     <div class="space-y-2">
       <div class="flex items-center gap-1">
diff --git a/app/views/accounts/show/_menu.html.erb b/app/views/accounts/show/_menu.html.erb
index 57241528..c5c9549a 100644
--- a/app/views/accounts/show/_menu.html.erb
+++ b/app/views/accounts/show/_menu.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (account:) %>
 
 <%= contextual_menu do %>
-  <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+  <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
     <% if account.plaid_account_id.present? %>
       <%= link_to accounts_path,
                       data: { turbo_frame: :_top },
diff --git a/app/views/accounts/show/_tab.html.erb b/app/views/accounts/show/_tab.html.erb
index 36b63fcc..000f9743 100644
--- a/app/views/accounts/show/_tab.html.erb
+++ b/app/views/accounts/show/_tab.html.erb
@@ -5,5 +5,5 @@
             data: { turbo: false },
             class: [
               "px-2 py-1.5 rounded-md border border-transparent",
-              "bg-white shadow-xs border-alpha-black-50": is_selected
+              "bg-container shadow-xs border-alpha-black-50": is_selected
             ] %>
diff --git a/app/views/budget_categories/_budget_category.html.erb b/app/views/budget_categories/_budget_category.html.erb
index 2528b89e..0c850678 100644
--- a/app/views/budget_categories/_budget_category.html.erb
+++ b/app/views/budget_categories/_budget_category.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (budget_category:) %>
 
 <%= turbo_frame_tag dom_id(budget_category), class: "w-full" do %>
-  <%= link_to budget_budget_category_path(budget_category.budget, budget_category), class: "group w-full p-4 flex items-center gap-3 bg-white", data: { turbo_frame: "drawer" } do %>
+  <%= link_to budget_budget_category_path(budget_category.budget, budget_category), class: "group w-full p-4 flex items-center gap-3 bg-container", data: { turbo_frame: "drawer" } do %>
 
     <% if budget_category.initialized? %>
       <div class="w-10 h-10 group-hover:scale-105 transition-all duration-300">
diff --git a/app/views/budget_categories/index.html.erb b/app/views/budget_categories/index.html.erb
index 93d1f2a9..4d38f594 100644
--- a/app/views/budget_categories/index.html.erb
+++ b/app/views/budget_categories/index.html.erb
@@ -16,7 +16,7 @@
 
     <div class="mx-auto max-w-lg">
       <% if @budget.family.categories.empty? %>
-        <div class="bg-white shadow-border-xs rounded-lg p-4">
+        <div class="bg-container shadow-border-xs rounded-lg p-4">
           <%= render "budget_categories/no_categories" %>
         </div>
       <% else %>
diff --git a/app/views/budgets/_budget_categories.html.erb b/app/views/budgets/_budget_categories.html.erb
index ea3995c5..e9ff5f11 100644
--- a/app/views/budgets/_budget_categories.html.erb
+++ b/app/views/budgets/_budget_categories.html.erb
@@ -9,7 +9,7 @@
     <p class="ml-auto">Amount</p>
   </div>
 
-  <div class="bg-white py-1 shadow-border-xs rounded-md">
+  <div class="bg-container py-1 shadow-border-xs rounded-md">
     <% if budget.family.categories.expenses.empty? %>
       <div class="py-8">
         <%= render "budget_categories/no_categories" %>
diff --git a/app/views/budgets/_picker.html.erb b/app/views/budgets/_picker.html.erb
index 8fb4bd54..aca22c0b 100644
--- a/app/views/budgets/_picker.html.erb
+++ b/app/views/budgets/_picker.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (family:, year:) %>
 
 <%= turbo_frame_tag "budget_picker" do %>
-  <div class="bg-white shadow-border-xs p-3 rounded-xl space-y-4">
+  <div class="bg-container shadow-border-xs p-3 rounded-xl space-y-4">
     <div class="flex items-center gap-2 justify-between">
       <% last_month_of_previous_year = Date.new(year - 1, 12, 1) %>
 
diff --git a/app/views/budgets/show.html.erb b/app/views/budgets/show.html.erb
index ec502726..b2323bb8 100644
--- a/app/views/budgets/show.html.erb
+++ b/app/views/budgets/show.html.erb
@@ -7,7 +7,7 @@
 
   <div class="flex items-start gap-4">
     <div class="w-[300px] space-y-4">
-      <div class="h-[300px] bg-white rounded-xl shadow-border-xs p-8">
+      <div class="h-[300px] bg-container rounded-xl shadow-border-xs p-8">
         <% if @budget.available_to_allocate.negative? %>
           <%= render "budgets/over_allocation_warning", budget: @budget %>
         <% else %>
@@ -25,7 +25,7 @@
                         budget_path(@budget, tab: "budgeted"),
                         class: class_names(
                           base_classes,
-                          "bg-white shadow-xs text-primary": selected_tab == "budgeted",
+                          "bg-container shadow-xs text-primary": selected_tab == "budgeted",
                           "text-secondary": selected_tab != "budgeted"
                         ) %>
 
@@ -33,23 +33,23 @@
                         budget_path(@budget, tab: "actuals"),
                         class: class_names(
                           base_classes,
-                          "bg-white shadow-xs text-primary": selected_tab == "actuals",
+                          "bg-container shadow-xs text-primary": selected_tab == "actuals",
                           "text-secondary": selected_tab != "actuals"
                         ) %>
           </div>
 
-          <div class="bg-white rounded-xl shadow-border-xs">
+          <div class="bg-container rounded-xl shadow-border-xs">
             <%= render selected_tab == "budgeted" ? "budgets/budgeted_summary" : "budgets/actuals_summary", budget: @budget %>
           </div>
         <% else %>
-          <div class="bg-white rounded-xl shadow-border-xs">
+          <div class="bg-container rounded-xl shadow-border-xs">
             <%= render "budgets/actuals_summary", budget: @budget %>
           </div>
         <% end %>
       </div>
     </div>
 
-    <div class="grow bg-white rounded-xl shadow-border-xs p-4">
+    <div class="grow bg-container rounded-xl shadow-border-xs p-4">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-lg font-medium">Categories</h2>
 
diff --git a/app/views/categories/_category.html.erb b/app/views/categories/_category.html.erb
index 187979a0..d3e25261 100644
--- a/app/views/categories/_category.html.erb
+++ b/app/views/categories/_category.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (category:) %>
 
-<div id="<%= dom_id(category) %>" class="flex justify-between items-center px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-white">
+<div id="<%= dom_id(category) %>" class="flex justify-between items-center px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-container">
   <div class="flex w-full items-center gap-2.5">
     <% if category.subcategory? %>
       <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-subdued ml-2" %>
@@ -10,7 +10,7 @@
   </div>
   <div class="justify-self-end">
     <%= contextual_menu do %>
-      <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+      <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
         <%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>
 
         <% if category.transactions.any? %>
diff --git a/app/views/categories/_category_list_group.html.erb b/app/views/categories/_category_list_group.html.erb
index fa7ae241..649ed872 100644
--- a/app/views/categories/_category_list_group.html.erb
+++ b/app/views/categories/_category_list_group.html.erb
@@ -7,7 +7,7 @@
     <p><%= categories.count %></p>
   </div>
 
-  <div class="shadow-border-xs rounded-md bg-white">
+  <div class="shadow-border-xs rounded-md bg-container">
     <div class="overflow-hidden rounded-md">
       <% Category::Group.for(categories).each_with_index do |group, idx| %>
         <%= render group.category %>
diff --git a/app/views/categories/_form.html.erb b/app/views/categories/_form.html.erb
index 29989991..1fb8c237 100644
--- a/app/views/categories/_form.html.erb
+++ b/app/views/categories/_form.html.erb
@@ -11,7 +11,7 @@
           <%= icon("pen", size: "sm") %>
         </summary>
 
-        <div class=" absolute z-50 bg-white p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit left-66 top-24">
+        <div class=" absolute z-50 bg-container p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit left-66 top-24">
           <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>
diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb
index ff098cb0..83532011 100644
--- a/app/views/categories/_menu.html.erb
+++ b/app/views/categories/_menu.html.erb
@@ -5,7 +5,7 @@
     <%= render partial: "categories/badge", locals: { category: transaction.category } %>
   </button>
   <div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
-    <div class="w-80 text-sm font-semibold leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+    <div class="w-80 text-sm font-semibold leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
       <%= turbo_frame_tag "category_dropdown", src: category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
         <div class="p-6 flex items-center justify-center">
           <p class="text-sm text-secondary animate-pulse"><%= t(".loading") %></p>
diff --git a/app/views/categories/_ruler.html.erb b/app/views/categories/_ruler.html.erb
index fc1d8ce9..600fcda1 100644
--- a/app/views/categories/_ruler.html.erb
+++ b/app/views/categories/_ruler.html.erb
@@ -1,3 +1,3 @@
-<div class="bg-white">
+<div class="bg-container">
   <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
 </div>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
index ca5121a6..21ecc95a 100644
--- a/app/views/categories/index.html.erb
+++ b/app/views/categories/index.html.erb
@@ -8,7 +8,7 @@
   <% end %>
 </header>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
   <% if @categories.any? %>
     <div class="space-y-4">
       <% if @categories.incomes.any? %>
diff --git a/app/views/category/deletions/new.html.erb b/app/views/category/deletions/new.html.erb
index 67575498..7c337ccf 100644
--- a/app/views/category/deletions/new.html.erb
+++ b/app/views/category/deletions/new.html.erb
@@ -4,7 +4,7 @@
                        data: {
                          turbo: false,
                          controller: "deletion",
-                         deletion_dangerous_action_class: "form-field__submit bg-white text-red-600 border hover:bg-red-50",
+                         deletion_dangerous_action_class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
                          deletion_safe_action_class: "form-field__submit border border-transparent",
                          deletion_submit_text_when_not_replacing_value: t(".delete_and_leave_uncategorized", category_name: @category.name),
                          deletion_submit_text_when_replacing_value: t(".delete_and_recategorize", category_name: @category.name) } do |f| %>
@@ -15,7 +15,7 @@
                             { data: { deletion_target: "replacementField", action: "deletion#updateSubmitButton" } } %>
 
     <%= f.submit t(".delete_and_leave_uncategorized", category_name: @category.name),
-                 class: "form-field__submit bg-white text-red-600 border hover:bg-red-50",
+                 class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
                  data: { deletion_target: "submitButton" } %>
   <% end %>
 <% end %>
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index 7ca38d66..5501c137 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -25,7 +25,7 @@
   <% end %>
 
   <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+    <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
       <%= link_to edit_category_path(category),
             class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg",
             data: { turbo_frame: :modal } do %>
diff --git a/app/views/category/dropdowns/show.html.erb b/app/views/category/dropdowns/show.html.erb
index 722fab82..f7ef3114 100644
--- a/app/views/category/dropdowns/show.html.erb
+++ b/app/views/category/dropdowns/show.html.erb
@@ -1,7 +1,7 @@
 <%= turbo_frame_tag "category_dropdown" do %>
   <div class="flex flex-col relative" data-controller="list-filter">
     <div class="grow p-1.5">
-      <div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
+      <div class="relative flex items-center bg-container border border-gray-200 rounded-lg">
         <input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
         <%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
       </div>
diff --git a/app/views/chats/_ai_consent.html.erb b/app/views/chats/_ai_consent.html.erb
index 1fc2c722..bec613ef 100644
--- a/app/views/chats/_ai_consent.html.erb
+++ b/app/views/chats/_ai_consent.html.erb
@@ -1,17 +1,17 @@
 <div class="flex flex-col items-center justify-start h-full p-6 text-center">
-  <div class="border border-gray-200 rounded-lg p-4 bg-white">
-    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+  <div class="border border-gray-200 rounded-lg p-4 bg-container">
+    <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
       <%= icon("sparkles") %>
     </div>
 
-    <h3 class="text-lg font-medium text-gray-900 mb-2">Enable Personal Finance AI</h3>
+    <h3 class="text-lg font-medium text-primary mb-2">Enable Personal Finance AI</h3>
 
     <p class="text-gray-600 mb-6 text-sm">
       <% if Current.user.ai_available? %>
         Our personal finance AI can help answer questions about your finances and provide insights based on your data.
         To use this feature, you'll need to explicitly enable it.
       <% else %>
-        To use the AI assistant, you need to set the <code class="bg-gray-100 px-1 py-0.5 rounded font-mono text-xs">OPENAI_ACCESS_TOKEN</code>
+        To use the AI assistant, you need to set the <code class="bg-surface-inset px-1 py-0.5 rounded font-mono text-xs">OPENAI_ACCESS_TOKEN</code>
         environment variable in your self-hosted instance.
       <% end %>
     </p>
diff --git a/app/views/chats/_ai_greeting.html.erb b/app/views/chats/_ai_greeting.html.erb
index 688cfd3a..b13f7022 100644
--- a/app/views/chats/_ai_greeting.html.erb
+++ b/app/views/chats/_ai_greeting.html.erb
@@ -5,7 +5,7 @@
     <p>Hey <%= Current.user&.first_name || "there" %>! I'm an AI built by Maybe to help with your finances. I have access to the web and your account data.</p>
 
     <p>
-      You can use <span class="bg-white border border-gray-200 px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
+      You can use <span class="bg-container border border-gray-200 px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
     </p>
 
     <div class="space-y-3">
diff --git a/app/views/chats/edit.html.erb b/app/views/chats/edit.html.erb
index 0c165ec5..a7fa70ae 100644
--- a/app/views/chats/edit.html.erb
+++ b/app/views/chats/edit.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@chat, :title), class: "block" do %>
-  <% bg_class = params[:ctx] == "chat" ? "bg-white" : "bg-container-inset" %>
+  <% bg_class = params[:ctx] == "chat" ? "bg-container" : "bg-container-inset" %>
   <%= styled_form_with model: @chat,
                        class: class_names("p-1 rounded-md font-medium text-primary w-full", bg_class),
                        data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "blur" } do |f| %>
diff --git a/app/views/chats/index.html.erb b/app/views/chats/index.html.erb
index bdb16b9d..23702931 100644
--- a/app/views/chats/index.html.erb
+++ b/app/views/chats/index.html.erb
@@ -15,11 +15,11 @@
           <%= render @chats %>
         </div>
       <% else %>
-        <div class="text-center py-12 bg-white rounded-lg border border-gray-200">
-          <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+        <div class="text-center py-12 bg-container rounded-lg border border-gray-200">
+          <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
             <%= icon("message-square", size: "lg") %>
           </div>
-          <h3 class="text-lg font-medium text-gray-900 mb-1">No chats yet</h3>
+          <h3 class="text-lg font-medium text-primary mb-1">No chats yet</h3>
           <p class="text-gray-500 mb-4">Start a new conversation with the AI assistant</p>
           <%= link_to "Start a chat", new_chat_path, class: "inline-flex items-center gap-2 py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
         </div>
diff --git a/app/views/import/cleans/show.html.erb b/app/views/import/cleans/show.html.erb
index a5b71e3f..c0e91b32 100644
--- a/app/views/import/cleans/show.html.erb
+++ b/app/views/import/cleans/show.html.erb
@@ -11,7 +11,7 @@
   </div>
 
   <% if @import.cleaned? %>
-    <div class="bg-white border border-tertiary rounded-lg p-3 flex items-center justify-between">
+    <div class="bg-container border border-tertiary rounded-lg p-3 flex items-center justify-between">
       <div class="flex items-center gap-2">
         <%= lucide_icon "check-circle", class: "w-4 h-4 text-green-500" %>
         <p class="text-green-500">Your data has been cleaned</p>
@@ -20,7 +20,7 @@
       <%= link_to "Next step", import_confirm_path(@import), class: "btn btn--primary" %>
     </div>
   <% else %>
-    <div class="bg-white border border-tertiary rounded-lg p-3 flex items-center justify-between">
+    <div class="bg-container border border-tertiary rounded-lg p-3 flex items-center justify-between">
       <div class="flex items-center gap-2">
         <%= lucide_icon "alert-triangle", class: "w-4 h-4 text-red-500" %>
         <p class="text-red-500 text-sm"><%= t(".errors_notice") %></p>
@@ -28,8 +28,8 @@
 
       <div class="flex justify-center">
         <div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
-          <%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg #{params[:view] != 'errors' ? 'bg-white' : ''}" %>
-          <%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg #{params[:view] == 'errors' ? 'bg-white' : ''}" %>
+          <%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg #{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 #{params[:view] == 'errors' ? 'bg-container' : ''}" %>
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@
         <% end %>
       </div>
 
-      <div class="bg-white shadow-border-xs rounded-xl divide-y divide-alpha-black-200">
+      <div class="bg-container shadow-border-xs rounded-xl divide-y divide-alpha-black-200">
         <% @rows.each do |row| %>
           <%= render "import/rows/form", row: row %>
         <% end %>
@@ -52,7 +52,7 @@
   </div>
 
   <div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full p-12">
-    <div class="shadow-border-xs rounded-lg p-3 max-w-2xl mx-auto bg-white">
+    <div class="shadow-border-xs rounded-lg p-3 max-w-2xl mx-auto bg-container">
       <%= render "shared/pagination", pagy: @pagy %>
     </div>
   </div>
diff --git a/app/views/import/confirms/_mappings.html.erb b/app/views/import/confirms/_mappings.html.erb
index 0f07eb2f..4c353f95 100644
--- a/app/views/import/confirms/_mappings.html.erb
+++ b/app/views/import/confirms/_mappings.html.erb
@@ -29,7 +29,7 @@
 
     <div class="shadow-border-xs rounded-md divide-y divide-alpha-black-100 text-sm">
       <% mappings.sort_by(&:key).each do |mapping| %>
-        <div class="px-5 py-3 bg-white first:rounded-tl-xl first:rounded-tr-xl last:rounded-bl-xl last:rounded-br-xl">
+        <div class="px-5 py-3 bg-container first:rounded-tl-xl first:rounded-tr-xl last:rounded-bl-xl last:rounded-br-xl">
           <%= render partial: "import/mappings/form", locals: { mapping: mapping } %>
         </div>
       <% end %>
diff --git a/app/views/import/uploads/show.html.erb b/app/views/import/uploads/show.html.erb
index fdcf787a..6a4054be 100644
--- a/app/views/import/uploads/show.html.erb
+++ b/app/views/import/uploads/show.html.erb
@@ -11,7 +11,7 @@
       <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
-    <div data-controller="tabs" data-tabs-active-class="bg-white" data-tabs-default-tab-value="csv-paste-tab">
+    <div data-controller="tabs" data-tabs-active-class="bg-container" data-tabs-default-tab-value="csv-paste-tab">
       <div class="flex justify-center mb-4">
         <div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
           <button type="button" data-id="csv-paste-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
diff --git a/app/views/imports/_import.html.erb b/app/views/imports/_import.html.erb
index 26c77ee9..2b84bd53 100644
--- a/app/views/imports/_import.html.erb
+++ b/app/views/imports/_import.html.erb
@@ -37,7 +37,7 @@
   </div>
 
   <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+    <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
       <%= link_to import_path(import),
                     class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
         <%= lucide_icon "eye", class: "w-5 h-5 text-secondary" %>
diff --git a/app/views/imports/_ready.html.erb b/app/views/imports/_ready.html.erb
index 8f4dc517..11728337 100644
--- a/app/views/imports/_ready.html.erb
+++ b/app/views/imports/_ready.html.erb
@@ -12,11 +12,11 @@
       <p class="justify-self-end">count</p>
     </div>
 
-    <div class="bg-white shadow-border-xs rounded-lg text-sm">
+    <div class="bg-container shadow-border-xs rounded-lg text-sm">
       <% import.dry_run.each do |key, count| %>
         <% resource = dry_run_resource(key) %>
 
-        <div class="flex items-center justify-between gap-2 bg-white px-5 py-3 rounded-tl-lg rounded-tr-lg">
+        <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-tl-lg rounded-tr-lg">
           <div class="flex items-center gap-3">
             <div class="<%= resource.bg_class %> w-8 h-8 rounded-full flex justify-center items-center">
               <%= lucide_icon resource.icon, class: "#{resource.text_class} w-5 h-5 shrink-0" %>
diff --git a/app/views/imports/_table.html.erb b/app/views/imports/_table.html.erb
index c327a530..e210aa5c 100644
--- a/app/views/imports/_table.html.erb
+++ b/app/views/imports/_table.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (headers: [], rows: [], caption: nil) %>
 <div class="overflow-x-auto">
-  <div class="border border-secondary rounded-md shadow-border-xs text-sm bg-white w-full">
+  <div class="border border-secondary rounded-md shadow-border-xs text-sm bg-container w-full">
     <div class="grid border-b border-b-alpha-black-200" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
       <% headers.each_with_index do |header, index| %>
         <div class="
diff --git a/app/views/imports/index.html.erb b/app/views/imports/index.html.erb
index 9c488e38..1b8c9fcc 100644
--- a/app/views/imports/index.html.erb
+++ b/app/views/imports/index.html.erb
@@ -7,14 +7,14 @@
   <% end %>
 </div>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
   <% if @imports.empty? %>
     <%= render partial: "imports/empty" %>
   <% else %>
     <div class="rounded-xl bg-gray-25 p-1">
       <h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
 
-      <div class="border border-alpha-black-100 rounded-lg bg-white shadow-xs">
+      <div class="border border-alpha-black-100 rounded-lg bg-container shadow-xs">
         <%= render partial: "imports/import", collection: @imports.ordered %>
       </div>
     </div>
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
index 751ead07..7d755873 100644
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -13,7 +13,7 @@
 
     <div class="rounded-xl bg-gray-25 p-1">
       <h3 class="uppercase text-secondary text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
-      <ul class="bg-white shadow-border-xs rounded-lg">
+      <ul class="bg-container shadow-border-xs rounded-lg">
         <li>
           <% if @pending_import.present? && (params[:type].nil? || params[:type] == @pending_import.type) %>
             <%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
diff --git a/app/views/invite_codes/index.html.erb b/app/views/invite_codes/index.html.erb
index 32ab048d..ad27bc18 100644
--- a/app/views/invite_codes/index.html.erb
+++ b/app/views/invite_codes/index.html.erb
@@ -3,7 +3,7 @@
   <% if @invite_codes.present? %>
     <%= render @invite_codes %>
   <% else %>
-    <div class="flex flex-col items-center w-full h-64 bg-white text-center justify-center">
+    <div class="flex flex-col items-center w-full h-64 bg-container text-center justify-center">
       <%= lucide_icon "binary", class: "w-6 h-6 text-sm text-secondary" %>
       <p class="text-base pt-4"><%= t(".no_invite_codes") %></p>
       <p class="text-sm text-secondary pt-2 w-2/3"><%= t(".invite_code_description") %></p>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 356484ee..2162245a 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <%= render "layouts/shared/htmldoc" do %>
   <% sidebar_config = app_sidebar_config(Current.user) %>
 
-  <div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-gray-50"
+  <div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface"
        data-controller="sidebar"
        data-sidebar-user-id-value="<%= Current.user.id %>"
        data-sidebar-config-value="<%= sidebar_config.to_json %>">
@@ -12,7 +12,7 @@
       </button>
 
       <%# Mobile only account sidebar groups %>
-      <%= tag.div class: class_names("hidden bg-gray-50 z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300"),
+      <%= tag.div class: class_names("hidden bg-surface z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300"),
                   data: { sidebar_target: "leftPanelMobile" } do %>
         <div id="account-sidebar-tabs">
           <div class="mb-4">
@@ -108,7 +108,7 @@
       <% end %>
     </div>
 
-    <nav class="lg:hidden bg-white shrink-0 z-10 pb-2">
+    <nav class="lg:hidden bg-container shrink-0 z-10 pb-2">
       <ul class="flex items-center justify-around gap-1">
         <li>
           <%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
diff --git a/app/views/layouts/auth.html.erb b/app/views/layouts/auth.html.erb
index f6fd8f2e..26d19f33 100644
--- a/app/views/layouts/auth.html.erb
+++ b/app/views/layouts/auth.html.erb
@@ -1,6 +1,6 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex flex-col h-dvh">
-    <div class="flex flex-col h-screen px-6 py-12 bg-gray-25">
+    <div class="flex flex-col h-screen px-6 py-12 bg-surface">
       <div class="grow flex flex-col justify-center">
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <div class="flex justify-center mb-6">
diff --git a/app/views/layouts/settings.html.erb b/app/views/layouts/settings.html.erb
index 2868d6cd..cfaffa14 100644
--- a/app/views/layouts/settings.html.erb
+++ b/app/views/layouts/settings.html.erb
@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex h-full bg-gray-25">
+  <div class="flex h-full bg-surface">
     <div class="p-4 w-96 shrink-0 h-full overflow-y-auto">
       <%= render "settings/settings_nav" %>
     </div>
diff --git a/app/views/layouts/shared/_breadcrumbs.html.erb b/app/views/layouts/shared/_breadcrumbs.html.erb
index 0f3045fe..ea310d47 100644
--- a/app/views/layouts/shared/_breadcrumbs.html.erb
+++ b/app/views/layouts/shared/_breadcrumbs.html.erb
@@ -16,7 +16,7 @@
       <% if path.present? && index < breadcrumbs.size - 1 %>
         <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
       <% elsif index == breadcrumbs.size - 1 %>
-        <span class="text-gray-900 font-medium text-sm"><%= name %></span>
+        <span class="text-primary font-medium text-sm"><%= name %></span>
       <% else %>
         <span class="text-sm text-gray-500 font-medium"><%= name %></span>
       <% end %>
diff --git a/app/views/layouts/shared/_page_header.html.erb b/app/views/layouts/shared/_page_header.html.erb
index 1f6e5409..018195fe 100644
--- a/app/views/layouts/shared/_page_header.html.erb
+++ b/app/views/layouts/shared/_page_header.html.erb
@@ -2,7 +2,7 @@
 <header class="space-y-6">
   <% if local_assigns[:title].present? %>
     <div class="space-y-1">
-      <h1 class="text-3xl font-medium text-gray-900"><%= title %></h1>
+      <h1 class="text-3xl font-medium text-primary"><%= title %></h1>
       <% if local_assigns[:subtitle].present? %>
         <p class="text-gray-500"><%= subtitle %></p>
       <% end %>
diff --git a/app/views/layouts/sidebar/_nav_item.html.erb b/app/views/layouts/sidebar/_nav_item.html.erb
index a4dbb6c7..90736f66 100644
--- a/app/views/layouts/sidebar/_nav_item.html.erb
+++ b/app/views/layouts/sidebar/_nav_item.html.erb
@@ -2,9 +2,9 @@
 
 <%= link_to path, class: "space-y-1 lg:py-1 group block" do %>
   <div class="grow flex flex-col lg:flex-row gap-1 items-center">
-    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-gray-900" => page_active?(path)) %>
+    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-container-inset" => page_active?(path)) %>
 
-    <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-white shadow-xs text-primary" : "group-hover:bg-gray-100 text-secondary") do %>
+    <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-container-inset shadow-xs text-primary" : "group-hover:bg-container-inset-hover text-secondary") do %>
       <%= icon(icon_key) %>
     <% end %>
   </div>
diff --git a/app/views/merchants/_merchant.html.erb b/app/views/merchants/_merchant.html.erb
index 12e23c6c..6c930ead 100644
--- a/app/views/merchants/_merchant.html.erb
+++ b/app/views/merchants/_merchant.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (merchant:) %>
 
-<div class="flex justify-between items-center p-4 bg-white">
+<div class="flex justify-between items-center p-4 bg-container">
   <div class="flex w-full items-center gap-2.5">
     <% if merchant.icon_url %>
       <div class="w-8 h-8 rounded-full flex justify-center items-center">
@@ -16,7 +16,7 @@
   </div>
   <div class="justify-self-end">
     <%= contextual_menu do %>
-      <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+      <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
         <%= contextual_menu_modal_action_item t(".edit"), edit_merchant_path(merchant) %>
 
         <%= contextual_menu_destructive_item t(".delete"),
diff --git a/app/views/merchants/_ruler.html.erb b/app/views/merchants/_ruler.html.erb
index 70442f58..530d99eb 100644
--- a/app/views/merchants/_ruler.html.erb
+++ b/app/views/merchants/_ruler.html.erb
@@ -1,3 +1,3 @@
-<div class="bg-white">
+<div class="bg-container">
   <div class="h-px bg-alpha-black-50 ml-14 mr-6"></div>
 </div>
diff --git a/app/views/merchants/index.html.erb b/app/views/merchants/index.html.erb
index 55b1a080..371129bd 100644
--- a/app/views/merchants/index.html.erb
+++ b/app/views/merchants/index.html.erb
@@ -7,7 +7,7 @@
   <% end %>
 </header>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
   <% if @merchants.any? %>
     <div class="rounded-xl bg-gray-25 space-y-1 p-1">
       <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
@@ -16,7 +16,7 @@
         <p><%= @merchants.count %></p>
       </div>
 
-      <div class="border border-alpha-black-25 rounded-md bg-white shadow-border-xs">
+      <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
         <div class="overflow-hidden rounded-md">
           <%= render partial: @merchants, spacer_template: "merchants/ruler" %>
         </div>
diff --git a/app/views/messages/_chat_form.html.erb b/app/views/messages/_chat_form.html.erb
index 152309e0..ef7b8ec2 100644
--- a/app/views/messages/_chat_form.html.erb
+++ b/app/views/messages/_chat_form.html.erb
@@ -4,7 +4,7 @@
   <% model = chat && chat.persisted? ? [chat, Message.new] : Chat.new %>
 
   <%= form_with model: model,
-                class: "flex flex-col gap-2 bg-white px-2 py-1.5 rounded-lg shadow-border-xs",
+                class: "flex flex-col gap-2 bg-container px-2 py-1.5 rounded-lg shadow-border-xs",
                 data: { chat_target: "form" } do |f| %>
 
     <%# In the future, this will be a dropdown with different AI models %>
diff --git a/app/views/onboardings/preferences.html.erb b/app/views/onboardings/preferences.html.erb
index 87306ae3..ac719a0f 100644
--- a/app/views/onboardings/preferences.html.erb
+++ b/app/views/onboardings/preferences.html.erb
@@ -9,7 +9,7 @@
       </div>
 
       <div class="p-1 bg-alpha-black-25 mb-2 rounded-lg">
-        <div class="bg-white p-4 rounded-lg flex gap-8 shadow-border-xs">
+        <div class="bg-container p-4 rounded-lg flex gap-8 shadow-border-xs">
           <div class="space-y-2">
             <%= tag.p t(".example"), class: "text-secondary text-sm" %>
             <%= tag.p format_money(Money.new(2325.25, params[:currency] || @user.family.currency)), class: "text-primary font-medium text-2xl" %>
diff --git a/app/views/onboardings/profile.html.erb b/app/views/onboardings/profile.html.erb
index 82313e88..20f19d31 100644
--- a/app/views/onboardings/profile.html.erb
+++ b/app/views/onboardings/profile.html.erb
@@ -18,8 +18,8 @@
         </div>
 
         <div class="flex justify-between items-center gap-4 mb-4">
-          <%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name"), container_class: "bg-white w-1/2", required: true %>
-          <%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name"), container_class: "bg-white w-1/2", required: true %>
+          <%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name"), container_class: "bg-container w-1/2", required: true %>
+          <%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name"), container_class: "bg-container w-1/2", required: true %>
         </div>
         <% unless @invitation %>
           <div class="space-y-4 mb-4">
diff --git a/app/views/pages/changelog.html.erb b/app/views/pages/changelog.html.erb
index 650f2f65..359e05bc 100644
--- a/app/views/pages/changelog.html.erb
+++ b/app/views/pages/changelog.html.erb
@@ -1,6 +1,6 @@
 <%= content_for :page_title, t(".title") %>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4 grow overflow-y-auto">
+<div class="bg-container shadow-border-xs rounded-xl p-4 grow overflow-y-auto">
   <div class="flex justify-between gap-4 mb-12 last:mb-0">
     <div class="w-1/3">
       <div class="px-3 flex items-center gap-3">
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 820abfa9..6bd53031 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -1,12 +1,12 @@
 <% content_for :page_header do %>
   <div class="space-y-1 mb-6">
-    <h1 class="text-3xl font-medium text-gray-900">Welcome back, <%= Current.user.first_name %></h1>
+    <h1 class="text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
     <p class="text-gray-500">Here's what's happening with your finances</p>
   </div>
 <% end %>
 
 <div class="w-full space-y-6 pb-24">
-  <section class="bg-white py-4 rounded-xl shadow-border-xs">
+  <section class="bg-container py-4 rounded-xl shadow-border-xs">
     <%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @balance_sheet.net_worth_series(period: @period), period: @period } %>
   </section>
 
diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index 82491b13..edb913b0 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -2,7 +2,7 @@
 
 <div class="space-y-4">
   <% balance_sheet.classification_groups.each do |classification_group| %>
-    <div class="bg-white shadow-border-xs rounded-xl space-y-4 p-4">
+    <div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
       <h2 class="text-lg font-medium"><%= classification_group.display_name %></h2>
 
       <% if classification_group.account_groups.any? %>
@@ -36,10 +36,10 @@
             </div>
           </div>
 
-          <div class="shadow-border-xs rounded-lg bg-white">
+          <div class="shadow-border-xs rounded-lg bg-container">
             <% classification_group.account_groups.each do |account_group| %>
               <details class="group rounded-lg open:bg-surface font-medium text-sm">
-                <summary class="cursor-pointer p-4 group-open:bg-surface bg-white rounded-lg flex items-center justify-between">
+                <summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
                   <div class="flex items-center gap-4">
                     <%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
 
diff --git a/app/views/pages/early_access.html.erb b/app/views/pages/early_access.html.erb
index 2c0cf49d..1d2954b7 100644
--- a/app/views/pages/early_access.html.erb
+++ b/app/views/pages/early_access.html.erb
@@ -30,7 +30,7 @@
           <p class="text-base text-subdued">There <%= @invite_codes_count == 1 ? "is" : "are" %> <span class="text-white"><%= @invite_codes_count %> invite <%= "code".pluralize(@invite_codes_count) %></span> remaining.</p>
           <div class="bg-gray-900 border border-gray-800 p-2 rounded-xl my-4">
             <p class="text-sm text-subdued mt-1 mb-3 sm:mb-4">Your invite code is <span class="font-mono text-white"><%= @invite_code.token %></span></p>
-            <p><%= link_to "Sign up with this code", new_registration_path(invite: @invite_code.token), class: "block w-full bg-white text-black py-2 px-3 rounded-lg no-underline text-sm sm:text-base hover:bg-gray-200 transition duration-150" %></p>
+            <p><%= link_to "Sign up with this code", new_registration_path(invite: @invite_code.token), class: "block w-full bg-container text-black py-2 px-3 rounded-lg no-underline text-sm sm:text-base hover:bg-gray-200 transition duration-150" %></p>
           </div>
 
           <p class="text-sm text-subdued">You may need to refresh the page to get a new invite code if someone else claimed it before you.</p>
@@ -43,7 +43,7 @@
           </p>
         <% else %>
           <p class="text-base text-subdued mb-6 sm:mb-8">Sorry, there are <span class="text-white">no invite codes</span> remaining. Join our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank", class: "text-white hover:text-gray-300" %> to get notified when new invite codes are available.</p>
-          <p><%= link_to "Join Discord server", "https://link.maybe.co/discord", target: "_blank", class: "bg-white text-black px-3 py-2 rounded-md no-underline text-base hover:bg-gray-200 transition duration-150" %></p>
+          <p><%= link_to "Join Discord server", "https://link.maybe.co/discord", target: "_blank", class: "bg-container text-black px-3 py-2 rounded-md no-underline text-base hover:bg-gray-200 transition duration-150" %></p>
         <% end %>
       </div>
     </div>
diff --git a/app/views/pages/feedback.html.erb b/app/views/pages/feedback.html.erb
index b043f930..15ecf01a 100644
--- a/app/views/pages/feedback.html.erb
+++ b/app/views/pages/feedback.html.erb
@@ -1,6 +1,6 @@
 <%= content_for :page_title, "Feedback" %>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
   <h2 class="text-lg font-medium text-primary mb-1">Leave feedback</h2>
   <p class="text-sm text-secondary mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
   <div class="flex gap-2">
diff --git a/app/views/plaid_items/_plaid_item.html.erb b/app/views/plaid_items/_plaid_item.html.erb
index ee009eef..bd6b20f8 100644
--- a/app/views/plaid_items/_plaid_item.html.erb
+++ b/app/views/plaid_items/_plaid_item.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (plaid_item:) %>
 
 <%= tag.div id: dom_id(plaid_item) do %>
-  <details open class="group bg-white p-4 shadow-border-xs rounded-xl">
+  <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
     <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
       <div class="flex items-center gap-2">
         <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
@@ -96,7 +96,7 @@
         <% end %>
 
         <%= contextual_menu do %>
-          <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+          <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
             <%= button_to plaid_item_path(plaid_item),
                       method: :delete,
                       class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
diff --git a/app/views/settings/_section.html.erb b/app/views/settings/_section.html.erb
index 0b0f58ef..01ed0e95 100644
--- a/app/views/settings/_section.html.erb
+++ b/app/views/settings/_section.html.erb
@@ -1,5 +1,5 @@
 <%# locals: (title:, subtitle: nil, content:) %>
-<section class="bg-white shadow-border-xs rounded-xl p-4 space-y-4">
+<section class="bg-container shadow-border-xs rounded-xl p-4 space-y-4">
   <div>
     <h2 class="text-lg font-medium text-primary"><%= title %></h2>
     <% if subtitle.present? %>
diff --git a/app/views/settings/_settings_nav_item.html.erb b/app/views/settings/_settings_nav_item.html.erb
index 1af9fdaf..b63f246a 100644
--- a/app/views/settings/_settings_nav_item.html.erb
+++ b/app/views/settings/_settings_nav_item.html.erb
@@ -2,7 +2,7 @@
 
 <%= link_to path, class: class_names(
   "flex items-center gap-2 btn btn--ghost",
-  page_active?(path) ? "text-primary bg-white shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
+  page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
 ), aria: { current: ("page" if page_active?(path)) } do %>
   <%= lucide_icon(icon, class: "w-5 h-5") if icon %>
   <%= name %>
diff --git a/app/views/settings/_settings_nav_link_large.html.erb b/app/views/settings/_settings_nav_link_large.html.erb
index beced3cd..ce74f2f9 100644
--- a/app/views/settings/_settings_nav_link_large.html.erb
+++ b/app/views/settings/_settings_nav_link_large.html.erb
@@ -1,5 +1,5 @@
 <%# locals: path, direction, title %>
-<%= link_to path, class: "w-full bg-white hover:bg-gray-50 rounded-xl border border-alpha-black-25 shadow-xs p-4 flex items-center justify-between" do %>
+<%= link_to path, class: "w-full bg-container hover:bg-gray-50 rounded-xl border border-alpha-black-25 shadow-xs p-4 flex items-center justify-between" do %>
   <% if direction == 'previous' %>
     <div class="w-5 h-5 text-secondary">
       <%= lucide_icon("arrow-left") %>
diff --git a/app/views/settings/billings/show.html.erb b/app/views/settings/billings/show.html.erb
index cd284f83..e683efa1 100644
--- a/app/views/settings/billings/show.html.erb
+++ b/app/views/settings/billings/show.html.erb
@@ -2,7 +2,7 @@
 
 <%= settings_section title: t(".subscription_title"), subtitle: t(".subscription_subtitle") do %>
   <div class="space-y-4">
-    <div class="p-3 shadow-border-xs bg-white rounded-lg flex justify-between items-center">
+    <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
           <%= lucide_icon "gem", class: "w-5 h-5 text-secondary" %>
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index 29a2f239..80275352 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/app/views/settings/profiles/show.html.erb
@@ -38,7 +38,7 @@
         <p class="uppercase text-xs text-secondary font-medium"><%= Current.family.name %> &middot; <%= Current.family.users.size %></p>
       </div>
       <% @users.each do |user| %>
-        <div class="flex gap-2 items-center bg-white p-4 border border-alpha-black-25 rounded-lg">
+        <div class="flex gap-2 items-center bg-container p-4 border border-alpha-black-25 rounded-lg">
           <div class="w-9 h-9 shrink-0">
             <%= render "settings/user_avatar", user: user %>
           </div>
@@ -65,7 +65,7 @@
       <% end %>
       <% if @pending_invitations.any? %>
         <% @pending_invitations.each do |invitation| %>
-          <div class="flex gap-2 items-center justify-between bg-white p-4 border border-alpha-black-25 rounded-lg">
+          <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>
diff --git a/app/views/settings/securities/show.html.erb b/app/views/settings/securities/show.html.erb
index 716c36b9..0530e48c 100644
--- a/app/views/settings/securities/show.html.erb
+++ b/app/views/settings/securities/show.html.erb
@@ -2,7 +2,7 @@
 
 <%= settings_section title: t(".mfa_title"), subtitle: t(".mfa_description") do %>
   <div class="space-y-4">
-    <div class="p-3 shadow-border-xs bg-white rounded-lg flex justify-between items-center">
+    <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
           <%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>
diff --git a/app/views/shared/_app_version.html.erb b/app/views/shared/_app_version.html.erb
index 7bf79bca..d8bc02ca 100644
--- a/app/views/shared/_app_version.html.erb
+++ b/app/views/shared/_app_version.html.erb
@@ -1,3 +1,3 @@
-<div class="flex items-center py-0.5 px-0.5 gap-1 fixed right-1 top-1 shadow-xs border border-alpha-black-50 rounded-md bg-white">
+<div class="flex items-center py-0.5 px-0.5 gap-1 fixed right-1 top-1 shadow-xs border border-alpha-black-50 rounded-md bg-container">
   <p class="text-xs text-secondary pl-2">Version: <%= Maybe.version.to_release_tag %></p>
 </div>
diff --git a/app/views/shared/_drawer.html.erb b/app/views/shared/_drawer.html.erb
index 4da7ccb0..40311258 100644
--- a/app/views/shared/_drawer.html.erb
+++ b/app/views/shared/_drawer.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (content:, reload_on_close: false) %>
 
 <%= turbo_frame_tag "drawer" do %>
-  <dialog class="ml-auto bg-white shadow-border-xs rounded-2xl max-w-[480px] h-full w-full mt-4 mr-4 focus-visible:outline-hidden"
+  <dialog class="ml-auto bg-container shadow-border-xs rounded-2xl max-w-[480px] h-full w-full mt-4 mr-4 focus-visible:outline-hidden"
     data-controller="modal"
     data-action="mousedown->modal#clickOutside"
     data-modal-reload-on-close-value="<%= reload_on_close %>">
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
index 2eb1b693..83cfe4b6 100644
--- a/app/views/shared/_modal.html.erb
+++ b/app/views/shared/_modal.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (content:, classes:) -%>
 <%= turbo_frame_tag "modal" do %>
-  <dialog class="m-auto bg-white shadow-border-xs rounded-2xl max-w-[580px] w-min-content h-fit overflow-visible <%= classes %>" data-controller="modal" data-action="mousedown->modal#clickOutside">
+  <dialog class="m-auto bg-container shadow-border-xs rounded-2xl max-w-[580px] w-min-content h-fit overflow-visible <%= classes %>" data-controller="modal" data-action="mousedown->modal#clickOutside">
     <div class="flex flex-col">
       <%= content %>
     </div>
diff --git a/app/views/shared/_notification.html.erb b/app/views/shared/_notification.html.erb
index fbf4e2c9..c714bf34 100644
--- a/app/views/shared/_notification.html.erb
+++ b/app/views/shared/_notification.html.erb
@@ -3,7 +3,7 @@
 <% type = type.to_sym %>
 <% action = "animationend->element-removal#remove" if type == :notice %>
 
-<%= tag.div class: "flex gap-3 rounded-lg border bg-white p-4 group max-w-80 shadow-xs border-alpha-black-25",
+<%= tag.div class: "flex gap-3 rounded-lg border bg-container p-4 group max-w-80 shadow-xs border-alpha-black-25",
             data: {
               controller: "element-removal",
               action: action
@@ -32,7 +32,7 @@
           <circle class="origin-center -rotate-90 animate-[stroke-fill_2.2s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
         </svg>
         <div class="absolute -top-2 -right-2">
-          <%= lucide_icon "x", class: "w-5 h-5 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" } %>
+          <%= lucide_icon "x", class: "w-5 h-5 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>
       </div>
     <% elsif type.to_sym == :alert %>
diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
index 04685600..8535443a 100644
--- a/app/views/shared/_pagination.html.erb
+++ b/app/views/shared/_pagination.html.erb
@@ -26,7 +26,7 @@
         <% elsif series_item.is_a?(String) %>
           <%= link_to pagy_url_for(pagy, series_item),
                 data: { turbo_frame: :_top },
-                class: "rounded-md px-2 py-1 bg-white border border-alpha-black-25 shadow-xs inline-flex items-center text-sm font-medium text-primary" do %>
+                class: "rounded-md px-2 py-1 bg-container border border-alpha-black-25 shadow-xs inline-flex items-center text-sm font-medium text-primary" do %>
             <%= series_item %>
           <% end %>
         <% elsif series_item == :gap %>
diff --git a/app/views/shared/_subscribe_modal.html.erb b/app/views/shared/_subscribe_modal.html.erb
index 4063a195..3afedaab 100644
--- a/app/views/shared/_subscribe_modal.html.erb
+++ b/app/views/shared/_subscribe_modal.html.erb
@@ -1,6 +1,6 @@
-<div data-controller="modal" data-modal-open-value="true" class="h-full flex items-center justify-center bg-white/90" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+<div data-controller="modal" data-modal-open-value="true" class="h-full flex items-center justify-center bg-container/90" aria-labelledby="modal-title" role="dialog" aria-modal="true">
   <div class="w-[400px] rounded-xl relative overflow-hidden">
-    <div class="bg-white shadow-border-xs rounded-xl relative z-10">
+    <div class="bg-container shadow-border-xs rounded-xl relative z-10">
       <div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.svg") %>'); background-size: cover; background-position: center top;">
         <div class="text-center rounded-xl" style="background-image: linear-gradient(to bottom, rgba(197,161,119,0.15) 0%, rgba(255,255,255,0.8) 30%, white 40%);">
           <div class="p-4 pt-2 rounded-xl">
diff --git a/app/views/shared/_syncing_notice.html.erb b/app/views/shared/_syncing_notice.html.erb
index 8458a423..07e163bf 100644
--- a/app/views/shared/_syncing_notice.html.erb
+++ b/app/views/shared/_syncing_notice.html.erb
@@ -1,4 +1,4 @@
-<%= tag.div id: "syncing-notice", class: "flex gap-3 rounded-lg border bg-white p-4 group w-full shadow-xs border-alpha-black-25" do %>
+<%= tag.div id: "syncing-notice", class: "flex gap-3 rounded-lg border bg-container p-4 group w-full shadow-xs border-alpha-black-25" do %>
   <div class="h-5 w-5 shrink-0 p-px text-white">
     <%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
   </div>
diff --git a/app/views/tag/deletions/new.html.erb b/app/views/tag/deletions/new.html.erb
index 8d6dd067..afcd2d29 100644
--- a/app/views/tag/deletions/new.html.erb
+++ b/app/views/tag/deletions/new.html.erb
@@ -4,7 +4,7 @@
                        data: {
                          turbo: false,
                          controller: "deletion",
-                         deletion_dangerous_action_class: "form-field__submit bg-white text-red-600 border hover:bg-red-50",
+                         deletion_dangerous_action_class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
                          deletion_safe_action_class: "form-field__submit border border-transparent",
                          deletion_submit_text_when_not_replacing_value: t(".delete_and_leave_uncategorized", tag_name: @tag.name),
                          deletion_submit_text_when_replacing_value: t(".delete_and_recategorize", tag_name: @tag.name) } do |f| %>
@@ -15,7 +15,7 @@
                             { data: { deletion_target: "replacementField", action: "deletion#updateSubmitButton" } } %>
 
     <%= f.submit t(".delete_and_leave_uncategorized", tag_name: @tag.name),
-                 class: "form-field__submit bg-white text-red-600 border hover:bg-red-50",
+                 class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
                  data: { deletion_target: "submitButton" } %>
   <% end %>
 <% end %>
diff --git a/app/views/tags/_ruler.html.erb b/app/views/tags/_ruler.html.erb
index fc1d8ce9..600fcda1 100644
--- a/app/views/tags/_ruler.html.erb
+++ b/app/views/tags/_ruler.html.erb
@@ -1,3 +1,3 @@
-<div class="bg-white">
+<div class="bg-container">
   <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
 </div>
diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb
index 22a68f0a..96c61dea 100644
--- a/app/views/tags/_tag.html.erb
+++ b/app/views/tags/_tag.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (tag:) %>
 
-<div id="<%= dom_id(tag) %>" class="flex justify-between items-center p-4 bg-white">
+<div id="<%= dom_id(tag) %>" class="flex justify-between items-center p-4 bg-container">
   <div class="flex w-full items-center gap-2.5">
     <%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
     <p class="text-primary text-sm truncate">
@@ -9,7 +9,7 @@
   </div>
   <div class="justify-self-end">
     <%= contextual_menu do %>
-      <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+      <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
         <%= contextual_menu_modal_action_item t(".edit"), edit_tag_path(tag) %>
 
         <% if tag.transactions.any? %>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 2001e4d9..5ebf870c 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -7,7 +7,7 @@
   <% end %>
 </header>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
   <% if @tags.any? %>
     <div class="rounded-xl bg-gray-25 space-y-1 p-1">
       <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
@@ -16,7 +16,7 @@
         <p><%= @tags.count %></p>
       </div>
 
-      <div class="border border-alpha-black-25 rounded-md bg-white shadow-border-xs">
+      <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
         <div class="overflow-hidden rounded-md">
           <%= render partial: @tags, spacer_template: "tags/ruler" %>
         </div>
diff --git a/app/views/transactions/_summary.html.erb b/app/views/transactions/_summary.html.erb
index 428e425d..e5d675ed 100644
--- a/app/views/transactions/_summary.html.erb
+++ b/app/views/transactions/_summary.html.erb
@@ -1,5 +1,5 @@
 <%# locals: (totals:) %>
-<div class="grid grid-cols-3 bg-white rounded-xl shadow-border-xs divide-x divide-alpha-black-100">
+<div class="grid grid-cols-3 bg-container rounded-xl shadow-border-xs divide-x divide-alpha-black-100">
   <div class="p-4 space-y-2">
     <p class="text-sm text-secondary">Total transactions</p>
     <p class="text-primary font-medium text-xl" id="total-transactions"><%= totals.transactions_count.round(0) %></p>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index e6772607..bca23049 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -7,7 +7,7 @@
        data-controller="bulk-select"
        data-bulk-select-singular-label-value="<%= t(".transaction") %>"
        data-bulk-select-plural-label-value="<%= t(".transactions") %>"
-       class="flex flex-col bg-white rounded-xl shadow-border-xs p-4">
+       class="flex flex-col bg-container rounded-xl shadow-border-xs p-4">
     <%= render "transactions/searches/search" %>
 
     <div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
diff --git a/app/views/transactions/searches/_menu.html.erb b/app/views/transactions/searches/_menu.html.erb
index 15ae8bd8..f83d83d2 100644
--- a/app/views/transactions/searches/_menu.html.erb
+++ b/app/views/transactions/searches/_menu.html.erb
@@ -6,7 +6,7 @@
   data-controller="tabs"
   data-tabs-active-class="bg-gray-25 text-primary"
   data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
-  class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 shadow-border-xs bg-white rounded-lg">
+  class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 shadow-border-xs bg-container rounded-lg">
   <div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-secondary border-r border-r-alpha-black-100">
     <% transaction_search_filters.each do |filter| %>
       <button
@@ -30,7 +30,7 @@
       <% end %>
     </div>
 
-    <div class="flex justify-between items-center gap-2 bg-white p-3">
+    <div class="flex justify-between items-center gap-2 bg-container p-3">
       <div>
         <% if @q.present? %>
           <%= link_to t(".clear_filters"), transactions_path(clear_filters: true), class: "btn btn--ghost" %>
diff --git a/app/views/transfers/_form.html.erb b/app/views/transfers/_form.html.erb
index ba33db30..9f05a104 100644
--- a/app/views/transfers/_form.html.erb
+++ b/app/views/transfers/_form.html.erb
@@ -18,7 +18,7 @@
         <%= tag.span t(".income") %>
       <% end %>
 
-      <%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued bg-white text-gray-800 shadow-sm" do %>
+      <%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued bg-container text-gray-800 shadow-sm" do %>
         <%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
         <%= tag.span t(".transfer") %>
       <% end %>
diff --git a/app/views/user_messages/_user_message.html.erb b/app/views/user_messages/_user_message.html.erb
index cccf99ad..0b7ac62e 100644
--- a/app/views/user_messages/_user_message.html.erb
+++ b/app/views/user_messages/_user_message.html.erb
@@ -1,5 +1,5 @@
 <%# locals: (user_message:) %>
 
-<div id="<%= dom_id(user_message) %>" class="bg-gray-100 px-3 py-2 rounded-lg max-w-[85%] w-fit ml-auto mb-6">
+<div id="<%= dom_id(user_message) %>" class="bg-surface-inset px-3 py-2 rounded-lg max-w-[85%] w-fit ml-auto mb-6">
   <div class="prose prose--ai-chat"><%= markdown(user_message.content) %></div>
 </div>
diff --git a/app/views/users/_user_menu.html.erb b/app/views/users/_user_menu.html.erb
index 8abe7c3a..27831283 100644
--- a/app/views/users/_user_menu.html.erb
+++ b/app/views/users/_user_menu.html.erb
@@ -7,7 +7,7 @@
     </div>
   </button>
 
-  <div data-menu-target="content" class="hidden absolute w-[276px] z-10 divide-y divide-alpha-black-100 bg-white rounded-xl shadow-border-sm">
+  <div data-menu-target="content" class="hidden absolute w-[276px] z-10 divide-y divide-alpha-black-100 bg-container rounded-xl shadow-border-sm">
     <div class="px-4 py-3 flex items-center gap-3">
       <div class="w-9 h-9 shrink-0">
         <%= render "settings/user_avatar", user: user, variant: :small, lazy: true %>