diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index cd4973c7f..28dd20768 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -121,7 +121,7 @@
     }
 
     .btn--reversed {
-      --btn-background: var(--color-bg);
+      --btn-background: var(--color-canvas);
       --btn-color: var(--card-color);
     }
   }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index fb8465e31..e47603142 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -171,7 +171,7 @@
     --btn-icon-size: 1em;
     --card-padding-block: calc(var(--block-space) * 1.25);
 
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-bg));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
     color: var(--btn-color);
     font-weight: 700;
     
@@ -231,7 +231,7 @@
   .card__closed {
     align-items: center;
     aspect-ratio: 8/5;
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     border: var(--block-space-half) solid var(--card-color);
     border-radius: 0.2em;
     color: var(--card-color);
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index e8d396a59..6b412707b 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -96,7 +96,7 @@
     }
 
     option {
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       color: var(--color-ink);
     }
   }
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 3013ac534..99615c0e7 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -24,7 +24,7 @@
   }
 
   .popup__group {
-    background: var(--color-subtle-light);
+    background: var(--color-ink-lightest);
     max-inline-size: 100%;
     padding-inline: var(--inline-space);
 
diff --git a/app/views/cards/_messages.html.erb b/app/views/cards/_messages.html.erb
index 35f0cd586..fa554e2fb 100644
--- a/app/views/cards/_messages.html.erb
+++ b/app/views/cards/_messages.html.erb
@@ -16,7 +16,7 @@
     </div>
 
     <div class="txt-align-center full-width flex flex-column margin-block-start-double">
-      <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-subtle)">
+      <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
       <%= button_to_delete_card(@card) %>
     </div>
   </div>
diff --git a/app/views/collections/edit/_users.html.erb b/app/views/collections/edit/_users.html.erb
index bc3530419..dd03f506d 100644
--- a/app/views/collections/edit/_users.html.erb
+++ b/app/views/collections/edit/_users.html.erb
@@ -10,7 +10,7 @@
         <div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
       </div>
 
-      <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
+      <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
 
       <label for="collection_all_access" class="switch">
         <%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
@@ -19,7 +19,7 @@
       </label>
     </li>
 
-    <hr class="separator--horizontal margin-inline" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
+    <hr class="separator--horizontal margin-inline" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
 
     <% if User.active.count > 20 %>
       <div class="pad-inline">
diff --git a/app/views/events/event/_layout.html.erb b/app/views/events/event/_layout.html.erb
index acfbf7494..44e9e526a 100644
--- a/app/views/events/event/_layout.html.erb
+++ b/app/views/events/event/_layout.html.erb
@@ -1,6 +1,6 @@
 <%= link_to event.notifiable_target,
       class: "event event--#{ event.action } panel center center-block flex-inline align-start justify-start gap position-relative",
-      style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-bg));
+      style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
   color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));",
       data: { related_element_target: "related",
             related_element_group_value: card.id,