diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 3c3d90a37..03d309bac 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -20,7 +20,7 @@
   --text-xx-large: 2.5rem;
 
   /* Borders */
-  --border: 1px solid var(--color-subtle);
+  --border: 1px solid var(--color-ink-lighter);
 
   /* Shadows */
   --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
@@ -127,27 +127,28 @@
   --lch-pink-lighter: 92% 0.03 338;
   --lch-pink-lightest: 96% 0.02 336;
 
-
-
-
-  /* Color abstractions */
+  /* Named colors */
   --color-black: oklch(var(--lch-black));
   --color-white: oklch(var(--lch-white));
 
-  --color-canvas: oklch(var(--lch-white));
-
-  --color-ink: oklch(var(--lch-ink));
+  --color-ink: oklch(var(--lch-ink-darkest));
+  --color-ink-darkest: oklch(var(--lch-ink-darkest));
+  --color-ink-darker: oklch(var(--lch-ink-darker));
+  --color-ink-dark: oklch(var(--lch-ink-dark));
+  --color-ink-medium: oklch(var(--lch-ink-medium));
+  --color-ink-light: oklch(var(--lch-ink-light));
+  --color-ink-lighter: oklch(var(--lch-ink-lighter));
+  --color-ink-lightest: oklch(var(--lch-ink-lightest));
 
   --color-ink-inverted: oklch(var(--lch-ink-inverted));
 
+  /* Color abstractions */
+  --color-canvas: oklch(var(--lch-white));
+
   --color-negative: oklch(var(--lch-red-dark));
-  --color-positive: oklch(var(--lch-green-medium));
-  --color-positive-light: oklch(var(--lch-green-lightest));
+  --color-positive: oklch(var(--lch-green-dark));
 
   --color-link: oklch(var(--lch-blue-dark));
-  --color-subtle-light: oklch(var(--lch-ink-lightest));
-  --color-subtle: oklch(var(--lch-ink-lighter));
-  --color-subtle-dark: oklch(var(--lch-ink-medium));
   --color-selected: oklch(var(--lch-blue-lighter));
   --color-selected-dark: oklch(var(--lch-blue-light));
   --color-highlight: oklch(var(--lch-yellow-lighter));
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 08368757e..6bebd44d5 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -11,7 +11,7 @@
     --font-sans: system-ui;
     --font-serif: ui-serif, serif;
     --font-mono: ui-monospace, monospace;
-    --hover-color: var(--color-subtle-dark);
+    --hover-color: var(--color-ink-medium);
     --hover-size: 0.15rem;
     --hover-filter: brightness(1);
 
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index fea991bff..f96449aae 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -6,7 +6,7 @@
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
     border-radius: var(--btn-border-radius);
-    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
+    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-medium));
     color: var(--btn-color, var(--color-ink));
     cursor: pointer;
     display: inline-flex;
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 268d82463..a1fc317b9 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -10,7 +10,7 @@
   }
 
   .card-columns {
-    border-block-start: 1px solid var(--color-subtle);
+    border-block-start: 1px solid var(--color-ink-lighter);
     display: grid;
     grid-template-columns: repeat(2, 50%);
     margin: auto;
@@ -78,11 +78,11 @@
       --text-small: 1.1em;
 
       background-color: var(--color-canvas);
-      box-shadow: 0 0 0 1px var(--color-subtle);
+      box-shadow: 0 0 0 1px var(--color-ink-lighter);
       line-height: 1.2;
 
       @media (prefers-color-scheme: dark) {
-        box-shadow: 0 0 0 1px var(--color-subtle-dark);
+        box-shadow: 0 0 0 1px var(--color-ink-medium);
       }
 
       .avatar {
@@ -92,7 +92,7 @@
     }
 
     .card--drafted {
-      --card-color: var(--color-subtle-dark) !important;
+      --card-color: var(--color-ink-medium) !important;
 
       border-color: var(--card-color) !important;
       border-style: dashed !important;
@@ -124,7 +124,7 @@
   /* -------------------------------------------------------------------------- */
 
   .cards--closed {
-    border-block-start: 1px solid var(--color-subtle);
+    border-block-start: 1px solid var(--color-ink-lighter);
     justify-content: center;
     flex-direction: row;
     flex-wrap: wrap;
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index a39b8b5ef..226ddc59d 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -24,7 +24,7 @@
     }
 
     @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-subtle-dark);
+      --border-color: var(--color-ink-medium);
     }
   }
 
diff --git a/app/assets/stylesheets/comment-content.css b/app/assets/stylesheets/comment-content.css
index 9944ed45f..a11b8dbf8 100644
--- a/app/assets/stylesheets/comment-content.css
+++ b/app/assets/stylesheets/comment-content.css
@@ -27,7 +27,7 @@
     }
 
     :where(hr) {
-      border-color: var(--color-subtle-dark);
+      border-color: var(--color-ink-medium);
       border-style: var(--border-style, solid) none none;
       margin: 2lh auto;
     }
@@ -37,8 +37,8 @@
     }
 
     :is(pre, code, .pre, .code) {
-      background-color: var(--color-subtle-light);
-      border: 1px solid var(--color-subtle);
+      background-color: var(--color-ink-lightest);
+      border: 1px solid var(--color-ink-lighter);
       border-radius: 0.3em;
       font-family: var(--font-mono);
       font-size: 0.85em;
@@ -80,7 +80,7 @@
     }
 
     :where(table, th, td) {
-      border: 1px solid var(--color-subtle-dark);
+      border: 1px solid var(--color-ink-medium);
     }
 
     :where(table) {
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 2db3016db..a22069fc9 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -63,7 +63,7 @@
   }
 
   .comment__content {
-    background-color: var(--color-subtle-light);
+    background-color: var(--color-ink-lightest);
     border-radius: 0.2em;
     padding:
       var(--comment-padding-block)
diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index a1f6da0dc..291851b34 100644
--- a/app/assets/stylesheets/expander.css
+++ b/app/assets/stylesheets/expander.css
@@ -107,6 +107,6 @@
 
   &:hover,
   &:focus-visible {
-    background-color: oklch(var(--lch-ink-inverted) / 15%);
+    background-color: oklch(var(--lch-canvas) / 15%);
   }
 }
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index cf7c894f0..612a1b4a1 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -67,7 +67,7 @@
       block-size: 100%;
       border-block: 0;
       border-inline-end: 0;
-      border-inline-start: 1px solid var(--color-subtle);
+      border-inline-start: 1px solid var(--color-ink-lighter);
       content: "";
       display: inline-flex;
       inline-size: 0;
diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css
index 429c0de0b..810fc7b17 100644
--- a/app/assets/stylesheets/house.css
+++ b/app/assets/stylesheets/house.css
@@ -13,7 +13,7 @@
   /* Toolbar */
   house-md-toolbar {
     background-color: inherit;
-    border-block-end: 1px solid var(--color-subtle-dark);
+    border-block-end: 1px solid var(--color-ink-medium);
     border-radius: 0;
     color: currentColor;
     display: inline-flex;
@@ -47,7 +47,7 @@
       }
 
       &:is(:focus, :hover) {
-        background-color: var(--color-subtle);
+        background-color: var(--color-ink-lighter);
       }
 
       &:is(:active) {
@@ -139,7 +139,7 @@
   .md-progress-bar {
     -webkit-appearance: none;
     appearance: none;
-    background-color: var(--color-subtle);
+    background-color: var(--color-ink-lighter);
     border-radius: 0.5em;
     block-size: 1ex;
     display: block;
@@ -154,7 +154,7 @@
 
     &::-webkit-progress-bar {
       border-radius: 0.5em;
-      background-color: var(--color-subtle);
+      background-color: var(--color-ink-lighter);
     }
 
     &::-webkit-progress-inner-element {
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 781649ce5..341d9a059 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -4,7 +4,7 @@
     accent-color: var(--input-accent-color, var(--color-ink));
     background-color: var(--input-background, transparent);
     border-radius: var(--input-border-radius, 0.5em);
-    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
+    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
     color: var(--input-color, var(--color-ink));
     font-size: max(16px, 1em);
     inline-size: 100%;
@@ -148,7 +148,7 @@
   }
 
   .switch__btn {
-    background-color: var(--color-subtle-dark);
+    background-color: var(--color-ink-medium);
     border-radius: 2em;
     cursor: pointer;
     inset: 0;
@@ -168,7 +168,7 @@
     }
 
     .switch__input:disabled + & {
-      background-color: var(--color-subtle-dark) !important;
+      background-color: var(--color-ink-medium) !important;
       cursor: not-allowed;
     }
 
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index c38100393..adbccc90f 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -53,7 +53,7 @@
         }
 
         a:not([class]) {
-          background-color: var(--color-subtle-light);
+          background-color: var(--color-ink-lightest);
           border-radius: 2em;
           color: var(--color-ink);
           font-weight: 500;
@@ -62,7 +62,7 @@
 
           @media (hover: hover) {
             &:hover {
-              background-color: var(--color-subtle);
+              background-color: var(--color-ink-lighter);
               text-decoration: none;
             }
           }
diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index a9cef43ad..a8e41db2b 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -2,7 +2,7 @@
   .lightbox {
     --backdrop-speed: 150ms;
 
-    background-color: oklch(var(--lch-ink-inverted) / 0.66);
+    background-color: oklch(var(--lch-canvas) / 0.66);
     block-size: 100dvh;
     border: 0;
     inline-size: 100dvw;
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index bf8575ed4..a1bb0f911 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -46,11 +46,11 @@
     padding: var(--padding);
 
     @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-subtle-dark);
+      --border-color: var(--color-ink-medium);
     }
 
     .notificiations-list--read & {
-      --border-color: var(--color-subtle);
+      --border-color: var(--color-ink-lighter);
 
       box-shadow: none !important;
     }
@@ -78,8 +78,8 @@
 
     @media (hover: hover) {
       &:hover {
-        --btn-background: var(--color-subtle-dark);
-        --btn-border-color: var(--color-subtle-dark);
+        --btn-background: var(--color-ink-medium);
+        --btn-border-color: var(--color-ink-medium);
 
         scale: 1;
 
diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 8b3c23151..863445f5c 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -1,7 +1,7 @@
 @layer components {
   .panel {
     background-color: var(--color-canvas);
-    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
+    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
     border-radius: var(--panel-border-radius, 1em);
     color: var(--color-ink);
     inline-size: var(--panel-size, 60ch);
@@ -9,7 +9,7 @@
     padding: var(--panel-padding, calc(var(--block-space) * 2));
 
     @media (prefers-color-scheme: dark) {
-      --panel-border-color: var(--color-subtle-dark);
+      --panel-border-color: var(--color-ink-medium);
     }
   }
 }
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 5c8ec1b95..a9bccdf4d 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -17,7 +17,7 @@
   }
 
   .popup__item {
-    --btn-background: var(--color-subtle-light);
+    --btn-background: var(--color-ink-lightest);
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
     --btn-font-weight: 500;
@@ -29,7 +29,7 @@
 
     &::after {
       border-radius: var(--btn-border-radius);
-      border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle));
+      border: var(--btn-border-size) solid var(--btn-border-color, var(--color-ink-lighter));
       content: "";
       display: block;
       inline-size: calc(100% - var(--btn-padding) * 2);
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 9c0a4e410..7414bbcd8 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -1,7 +1,7 @@
 @layer components {
   .reactions {
     --column-gap: 0.4ch;
-    --reaction-border-color: var(--color-subtle);
+    --reaction-border-color: var(--color-ink-lighter);
     --row-gap: 0;
 
     margin-block-start: calc(var(--block-space-half) / 2);
@@ -30,7 +30,7 @@
 
     @media (any-hover: hover) {
       &:where(:not(:active):hover) {
-        --reaction-border-color: var(--color-subtle-dark);
+        --reaction-border-color: var(--color-ink-medium);
 
         box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
       }
@@ -52,7 +52,7 @@
 
     @media (any-hover: hover) {
       &:where(:not(:active):hover) {
-        --reaction-border-color: var(--color-subtle-dark);
+        --reaction-border-color: var(--color-ink-medium);
       }
     }
   }
diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css
index 0e518edff..7ddc2cf42 100644
--- a/app/assets/stylesheets/syntax.css
+++ b/app/assets/stylesheets/syntax.css
@@ -39,7 +39,7 @@
     }
 
     .gr {
-      color: var(--color-subtle-light);
+      color: var(--color-ink-lightest);
     }
 
     .gd {
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index cf60ed210..9bae337d7 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -13,7 +13,7 @@
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-black);
-      border-block-start: 1px solid var(--color-subtle-dark);
+      border-block-start: 1px solid var(--color-ink-medium);
     }
 
     .terminal__input {
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 3ddbfb2ee..94a2badd7 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -16,7 +16,7 @@
   .txt-ink { color: var(--color-ink); }
   .txt-reversed { color: var(--color-ink-inverted); }
   .txt-negative { color: var(--color-negative); }
-  .txt-subtle { color: var(--color-subtle-dark); }
+  .txt-subtle { color: var(--color-ink-medium); }
   .txt-alert { color: var(--color-marker); }
   .txt-undecorated { text-decoration: none; }
   .txt-tight-lines { line-height: 1.2; }
@@ -149,7 +149,7 @@
   .fill { background-color: var(--color-canvas); }
   .fill-black { background-color: var(--color-ink); }
   .fill-white { background-color: var(--color-ink-inverted); }
-  .fill-shade { background-color: var(--color-subtle-light); }
+  .fill-shade { background-color: var(--color-ink-lightest); }
   .fill-selected { background-color: var(--color-selected); }
   .fill-highlight { background-color: var(--color-highlight); }
   .fill-transparent { background-color: transparent; }
@@ -157,10 +157,10 @@
   .translucent { opacity: var(--opacity, 0.66); }
 
   /* Borders */
-  .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
-  .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
-  .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
-  .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
+  .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
+  .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
+  .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
+  .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
   .borderless { border: 0; }
 
   /* Border radius */
diff --git a/app/views/collections/_access_toggle.erb b/app/views/collections/_access_toggle.erb
index aee7bb248..4e7171e07 100644
--- a/app/views/collections/_access_toggle.erb
+++ b/app/views/collections/_access_toggle.erb
@@ -9,7 +9,7 @@
     </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">
 
   <%= icon_tag "check", class: "toggler__visible-when-on" %>
 
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
index a31b65d2b..970d1d3f9 100644
--- a/app/views/collections/edit.html.erb
+++ b/app/views/collections/edit.html.erb
@@ -35,7 +35,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" } %>
@@ -44,7 +44,7 @@
           </label>
         </li>
 
-        <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
+        <hr class="separator--horizontal full-width" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
 
         <% if User.active.count > 20 %>
           <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 8bcd35e80..86ba20d61 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -19,7 +19,7 @@
 <div class="events__container align-start gap">
   <div class="txt-align-start">
     <h2 class="txt-normal txt-uppercase txt-nowrap">Custom views</h2>
-    <div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
+    <div style="border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: var(--block-space-half);">
       <% @filters.each do |filter| %>
         <h3 class="txt-small margin-block-end-half txt-tight-lines">
           <%= link_to filter.summary, cards_path(**filter.as_params) %>
@@ -43,7 +43,7 @@
       <% end %>
     </div>
 
-    <div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
+    <div style="border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: var(--block-space-half);">
       <% @collections.each do |collection| %>
         <h3 class="txt-small margin-block-end-half txt-tight-lines"><%= link_to collection.name, cards_path(collection_ids: [ collection ]) %></h3>
       <% end %>
diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb
index e20219364..c81aaf436 100644
--- a/app/views/filters/_dialog.html.erb
+++ b/app/views/filters/_dialog.html.erb
@@ -31,7 +31,7 @@
       <% end %>
     </div>
 
-    <%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-subtle)" do %>
+    <%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-ink-lighter)" do %>
       <% Array(params[:terms]).each do |term| %>
         <%= hidden_field_tag "terms[]", term, id: nil %>
       <% end %>
diff --git a/app/views/notifications/settings/_collection.html.erb b/app/views/notifications/settings/_collection.html.erb
index ad680363a..eb28e7ce8 100644
--- a/app/views/notifications/settings/_collection.html.erb
+++ b/app/views/notifications/settings/_collection.html.erb
@@ -4,7 +4,7 @@
       <%= collection.name %>
     </h2>
 
-    <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 class="switch flex-item-no-shrink">
       <%= access_involvement_advance_button(collection, user) %>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 0ca56680c..a89e94c86 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -2,7 +2,7 @@
   <h1>All tags</h1>
   <ul class="txt-align-start">
     <% @tags.each do |tag| %>
-      <li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-subtle)">
+      <li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-ink-lighter)">
         <span>
           <strong class="txt-nowrap"><%= tag.title %></strong>
         </span>
diff --git a/app/views/users/_user.html.erb b/app/views/users/_user.html.erb
index 950df8ccc..09374b344 100644
--- a/app/views/users/_user.html.erb
+++ b/app/views/users/_user.html.erb
@@ -5,7 +5,7 @@
     <%= link_to user.name, user, class: "txt-ink btn btn--plain" %>
   </strong>
 
-  <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">
 
   <%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %>
     <label class="btn txt-small flex-item-no-shrink" for="<%= dom_id(user, :role) %>" arial-label="Role: <%= user.admin? ? "Administrator" : "Member" %>">
diff --git a/app/views/workflows/_workflow.html.erb b/app/views/workflows/_workflow.html.erb
index 6ec1e289f..5cbf7d3e3 100644
--- a/app/views/workflows/_workflow.html.erb
+++ b/app/views/workflows/_workflow.html.erb
@@ -8,7 +8,7 @@
       <% end %>
     </div>
 
-    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
+    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">
 
     <div class="flex flex-column gap margin-block-start">
       <%= turbo_frame_tag dom_id(workflow, :stages) do %>