diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index 72fa70258..3d868c741 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -56,7 +56,7 @@
   }
 
   .hw-combobox__label {
-    @apply block text-xs text-gray-500 peer-disabled:text-gray-400;
+    @apply block text-xs text-secondary peer-disabled:text-subdued;
   }
   
   .hw-combobox__option {
@@ -155,12 +155,12 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: #d6d6d6;
+    background: var(--color-gray-300);
     border-radius: 10px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: #a6a6a6;
+    background: var(--color-gray-400);
   }  
 }
 
@@ -170,12 +170,12 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #d6d6d6;
+    background: var(--color-gray-300);
     border-radius: 10px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: #a6a6a6;
+    background: var(--color-gray-400);
   }
 }
 
diff --git a/app/views/doorkeeper/applications/_form.html.erb b/app/views/doorkeeper/applications/_form.html.erb
index 4cc71b3d8..cb9bc6be6 100644
--- a/app/views/doorkeeper/applications/_form.html.erb
+++ b/app/views/doorkeeper/applications/_form.html.erb
@@ -4,7 +4,7 @@
   <% end %>
 
   <div class="form-group row">
-    <%= f.label :name, class: "col-sm-2 col-form-label font-weight-bold" %>
+    <%= f.label :name, class: "col-sm-2 col-form-label font-bold" %>
     <div class="col-sm-10">
       <%= f.text_field :name, class: "form-control #{ 'is-invalid' if application.errors[:name].present? }", required: true %>
       <%= doorkeeper_errors_for application, :name %>
@@ -12,7 +12,7 @@
   </div>
 
   <div class="form-group row">
-    <%= f.label :redirect_uri, class: "col-sm-2 col-form-label font-weight-bold" %>
+    <%= f.label :redirect_uri, class: "col-sm-2 col-form-label font-bold" %>
     <div class="col-sm-10">
       <%= f.text_area :redirect_uri, class: "form-control #{ 'is-invalid' if application.errors[:redirect_uri].present? }" %>
       <%= doorkeeper_errors_for application, :redirect_uri %>
@@ -29,7 +29,7 @@
   </div>
 
   <div class="form-group row">
-    <%= f.label :confidential, class: "col-sm-2 form-check-label font-weight-bold" %>
+    <%= f.label :confidential, class: "col-sm-2 form-check-label font-bold" %>
     <div class="col-sm-10">
       <%= f.check_box :confidential, class: "checkbox #{ 'is-invalid' if application.errors[:confidential].present? }" %>
       <%= doorkeeper_errors_for application, :confidential %>
@@ -40,7 +40,7 @@
   </div>
 
   <div class="form-group row">
-    <%= f.label :scopes, class: "col-sm-2 col-form-label font-weight-bold" %>
+    <%= f.label :scopes, class: "col-sm-2 col-form-label font-bold" %>
     <div class="col-sm-10">
       <%= f.text_field :scopes, class: "form-control #{ 'has-error' if application.errors[:scopes].present? }" %>
       <%= doorkeeper_errors_for application, :scopes %>
diff --git a/app/views/doorkeeper/applications/show.html.erb b/app/views/doorkeeper/applications/show.html.erb
index 53e84c785..fcd32a692 100644
--- a/app/views/doorkeeper/applications/show.html.erb
+++ b/app/views/doorkeeper/applications/show.html.erb
@@ -5,14 +5,14 @@
 <div class="row">
   <div class="col-md-8">
     <h4><%= t(".application_id") %>:</h4>
-    <p><code class="bg-light" id="application_id"><%= @application.uid %></code></p>
+    <p><code class="bg-surface" id="application_id"><%= @application.uid %></code></p>
 
     <h4><%= t(".secret") %>:</h4>
     <p>
-      <code class="bg-light" id="secret">
+      <code class="bg-surface" id="secret">
         <% secret = flash[:application_secret].presence || @application.plaintext_secret %>
         <% if secret.blank? && Doorkeeper.config.application_secret_hashed? %>
-          <span class="bg-light font-italic text-uppercase text-muted"><%= t(".secret_hashed") %></span>
+          <span class="bg-surface italic uppercase text-subdued"><%= t(".secret_hashed") %></span>
         <% else %>
           <%= secret %>
         <% end %>
@@ -21,17 +21,17 @@
 
     <h4><%= t(".scopes") %>:</h4>
     <p>
-      <code class="bg-light" id="scopes">
+      <code class="bg-surface" id="scopes">
         <% if @application.scopes.present? %>
           <%= @application.scopes %>
         <% else %>
-          <span class="bg-light font-italic text-uppercase text-muted"><%= t(".not_defined") %></span>
+          <span class="bg-surface italic uppercase text-subdued"><%= t(".not_defined") %></span>
         <% end %>
       </code>
     </p>
 
     <h4><%= t(".confidential") %>:</h4>
-    <p><code class="bg-light" id="confidential"><%= @application.confidential? %></code></p>
+    <p><code class="bg-surface" id="confidential"><%= @application.confidential? %></code></p>
 
     <h4><%= t(".callback_urls") %>:</h4>
 
@@ -40,7 +40,7 @@
         <% @application.redirect_uri.split.each do |uri| %>
           <tr>
             <td>
-              <code class="bg-light"><%= uri %></code>
+              <code class="bg-surface"><%= uri %></code>
             </td>
             <td>
               <%= link_to t("doorkeeper.applications.buttons.authorize"), oauth_authorization_path(client_id: @application.uid, redirect_uri: uri, response_type: "code", scope: @application.scopes), class: "btn btn-success", target: "_blank" %>
@@ -49,7 +49,7 @@
         <% end %>
       </table>
     <% else %>
-      <span class="bg-light font-italic text-uppercase text-muted"><%= t(".not_defined") %></span>
+      <span class="bg-surface italic uppercase text-subdued"><%= t(".not_defined") %></span>
     <% end %>
   </div>
 
diff --git a/app/views/pages/privacy.html.erb b/app/views/pages/privacy.html.erb
index 303f18766..01b472540 100644
--- a/app/views/pages/privacy.html.erb
+++ b/app/views/pages/privacy.html.erb
@@ -5,7 +5,7 @@
     <div class="bg-container border border-primary rounded-xl p-6 sm:p-8 shadow-sm">
       <div class="text-center">
         <h1 class="text-xl sm:text-2xl font-bold text-primary mb-4"><%= t(".heading") %></h1>
-        <p class="text-sm sm:text-base text-muted"><%= t(".placeholder") %></p>
+        <p class="text-sm sm:text-base text-subdued"><%= t(".placeholder") %></p>
       </div>
     </div>
   </div>
diff --git a/app/views/pages/redis_configuration_error.html.erb b/app/views/pages/redis_configuration_error.html.erb
index 53c43387f..a95e00862 100644
--- a/app/views/pages/redis_configuration_error.html.erb
+++ b/app/views/pages/redis_configuration_error.html.erb
@@ -9,7 +9,7 @@
           <%= icon "alert-triangle", class: "w-8 h-8 text-red-600" %>
         </div>
         <h1 class="text-xl sm:text-2xl font-bold text-primary mb-2">Redis Configuration Required</h1>
-        <p class="text-sm sm:text-base text-muted">Your self-hosted Sure installation needs Redis to be properly configured.</p>
+        <p class="text-sm sm:text-base text-subdued">Your self-hosted Sure installation needs Redis to be properly configured.</p>
       </div>
 
       <!-- Explanation -->
@@ -36,14 +36,14 @@
             target: "_blank",
             rel: "noopener noreferrer"
           ) %>
-          <p class="text-sm text-muted">Follow our complete Docker setup guide to configure Redis</p>
+          <p class="text-sm text-subdued">Follow our complete Docker setup guide to configure Redis</p>
         </div>
       </div>
 
       <!-- Secondary CTA -->
       <div class="pt-6 border-t border-primary">
         <div class="text-center space-y-3">
-          <p class="text-sm text-muted">Once you've configured Redis, refresh this page to continue.</p>
+          <p class="text-sm text-subdued">Once you've configured Redis, refresh this page to continue.</p>
           <%= render DS::Button.new(
             text: "Refresh Page",
             variant: "secondary",
diff --git a/app/views/pages/terms.html.erb b/app/views/pages/terms.html.erb
index 303f18766..01b472540 100644
--- a/app/views/pages/terms.html.erb
+++ b/app/views/pages/terms.html.erb
@@ -5,7 +5,7 @@
     <div class="bg-container border border-primary rounded-xl p-6 sm:p-8 shadow-sm">
       <div class="text-center">
         <h1 class="text-xl sm:text-2xl font-bold text-primary mb-4"><%= t(".heading") %></h1>
-        <p class="text-sm sm:text-base text-muted"><%= t(".placeholder") %></p>
+        <p class="text-sm sm:text-base text-subdued"><%= t(".placeholder") %></p>
       </div>
     </div>
   </div>
diff --git a/app/views/reports/print.html.erb b/app/views/reports/print.html.erb
index 3add245f0..1de2a4cd2 100644
--- a/app/views/reports/print.html.erb
+++ b/app/views/reports/print.html.erb
@@ -52,7 +52,7 @@
           savings_rate = @summary_metrics[:current_income].amount > 0 ? ((@summary_metrics[:net_savings].amount / @summary_metrics[:current_income].amount) * 100).round(0) : 0
         %>
         <% if savings_rate != 0 %>
-          <span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.summary.of_income", percent: savings_rate) %></span>
+          <span class="tufte-metric-card-change text-secondary"><%= t("reports.print.summary.of_income", percent: savings_rate) %></span>
         <% end %>
         <% if has_sparkline_data?(@trends_data) %>
           <svg width="60" height="20" viewBox="0 0 60 20" style="display:block;margin-top:6px;">
@@ -65,7 +65,7 @@
         <div class="tufte-metric-card tufte-metric-card-sm">
           <span class="tufte-metric-card-label"><%= t("reports.print.summary.budget") %></span>
           <span class="tufte-metric-card-value"><%= @summary_metrics[:budget_percent] %>%</span>
-          <span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.summary.used") %></span>
+          <span class="tufte-metric-card-change text-secondary"><%= t("reports.print.summary.used") %></span>
         </div>
       <% end %>
     </div>
@@ -213,12 +213,12 @@
         <div class="tufte-metric-card tufte-metric-card-sm">
           <span class="tufte-metric-card-label"><%= t("reports.print.investments.contributions") %></span>
           <span class="tufte-metric-card-value tufte-income"><%= format_money(@investment_metrics[:period_contributions]) %></span>
-          <span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.investments.this_period") %></span>
+          <span class="tufte-metric-card-change text-secondary"><%= t("reports.print.investments.this_period") %></span>
         </div>
         <div class="tufte-metric-card tufte-metric-card-sm">
           <span class="tufte-metric-card-label"><%= t("reports.print.investments.withdrawals") %></span>
           <span class="tufte-metric-card-value tufte-expense"><%= format_money(@investment_metrics[:period_withdrawals]) %></span>
-          <span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.investments.this_period") %></span>
+          <span class="tufte-metric-card-change text-secondary"><%= t("reports.print.investments.this_period") %></span>
         </div>
       </div>
 
diff --git a/app/views/settings/providers/_mercury_panel.html.erb b/app/views/settings/providers/_mercury_panel.html.erb
index 18e199c0b..660c279e9 100644
--- a/app/views/settings/providers/_mercury_panel.html.erb
+++ b/app/views/settings/providers/_mercury_panel.html.erb
@@ -16,7 +16,7 @@
       <li><strong>Base URL:</strong> Mercury API URL (optional, defaults to https://api.mercury.com/api/v1)</li>
     </ul>
 
-    <p class="text-sm text-muted-foreground mt-2">
+    <p class="text-sm text-subdued mt-2">
       <strong>Note:</strong> For sandbox testing, use <code>https://api-sandbox.mercury.com/api/v1</code> as the Base URL.
       Mercury requires IP whitelisting - make sure to add your IP in the Mercury dashboard.
     </p>