diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index f5f164164..b00fa22ab 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -20,78 +20,253 @@
   --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-always-black) / 0.02),
-            0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
-            0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
-            0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
-            0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
-            0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
+  --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
+            0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.2),
+            0 .4em 2.4em -1em oklch(var(--lch-black) / 0.3),
+            0 .4em .8em -1.2em oklch(var(--lch-black) / 0.4),
+            0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.5),
+            0 1.2em 1.6em -2em oklch(var(--lch-black) / 0.6);
 
   /* Components */
   --btn-size: 2.65em;
 
-  /* Color values */
-  --lch-black: 27.13% 0.1035 284.77;
+  /* OKLCH colors: Fixed */
+  --lch-black: 0% 0 0;
   --lch-white: 100% 0 0;
-  --lch-gray-light: 96% 0.005 96;
-  --lch-gray: 92% 0.005 96;
-  --lch-gray-dark: 75% 0.005 96;
-  --lch-blue: 54% 0.15 255;
-  --lch-blue-light: 95% 0.03 255;
-  --lch-blue-dark: 80% 0.08 255;
-  --lch-golden: 83% 0.1128 72.43;
-  --lch-orange: 70% 0.2 44;
-  --lch-red: 51% 0.2 31;
-  --lch-green: 65.59% 0.234 142.49;
-  --lch-green-light: 95% 0.03 142.49;
-  --lch-yellow: 92.62% 0.1 91.5;
-  --lch-always-black: 0% 0 0;
-  --lch-always-white: 100% 0 0;
-  --lch-light-blue: 84.94% 0.048 216.62;
 
-  /* Color abstractions */
-  --color-negative: oklch(var(--lch-red));
-  --color-positive: oklch(var(--lch-green));
-  --color-positive-light: oklch(var(--lch-green-light));
-  --color-bg: oklch(var(--lch-white));
-  --color-ink: oklch(var(--lch-black));
-  --color-ink-reversed: oklch(var(--lch-white));
-  --color-link: oklch(var(--lch-blue));
-  --color-subtle-light: oklch(var(--lch-gray-light));
-  --color-subtle: oklch(var(--lch-gray));
-  --color-subtle-dark: oklch(var(--lch-gray-dark));
-  --color-selected: oklch(var(--lch-blue-light));
-  --color-selected-dark: oklch(var(--lch-blue-dark));
-  --color-highlight: oklch(var(--lch-yellow));
-  --color-marker: oklch(var(--lch-orange));
-  --color-always-black: oklch(var(--lch-always-black));
-  --color-always-white: oklch(var(--lch-always-white));
-  --color-container: oklch(var(--lch-light-blue));
-  --color-golden: oklch(var(--lch-golden));
+  /* OKLCH colors: Light mode */
+  --lch-canvas: var(--lch-white);
+  --lch-ink-inverted: var(--lch-white);
+
+  --lch-ink-darkest: 26% 0.05 264;
+  --lch-ink-darker: 40% 0.026 262;
+  --lch-ink-dark: 57% 0.014 260;
+  --lch-ink-medium: 70% 0.008 258;
+  --lch-ink-light: 84% 0.005 256;
+  --lch-ink-lighter: 92% 0.003 254;
+  --lch-ink-lightest: 96% 0.002 252;
+
+  --lch-uncolor-darkest: 26% 0.018 40;
+  --lch-uncolor-darker: 40% 0.03 50;
+  --lch-uncolor-dark: 57% 0.04 60;
+  --lch-uncolor-medium: 70% 0.044 70;
+  --lch-uncolor-light: 84% 0.028 80;
+  --lch-uncolor-lighter: 92% 0.014 90;
+  --lch-uncolor-lightest: 96% 0.012 100;
+
+  --lch-red-darkest: 26% 0.105 34;
+  --lch-red-darker: 40% 0.154 36;
+  --lch-red-dark: 59% 0.19 38;
+  --lch-red-medium: 70.4% 0.19 40;
+  --lch-red-light: 84% 0.07 42;
+  --lch-red-lighter: 92% 0.03 44;
+  --lch-red-lightest: 96% 0.013 46;
+
+  --lch-yellow-darkest: 26% 0.0729 40;
+  --lch-yellow-darker: 40% 0.12 50;
+  --lch-yellow-dark: 58% 0.156 60;
+  --lch-yellow-medium: 76% 0.17 70;
+  --lch-yellow-light: 84% 0.12 80;
+  --lch-yellow-lighter: 92% 0.076 90;
+  --lch-yellow-lightest: 96% 0.034 100;
+
+  --lch-lime-darkest: 26% 0.064 109;
+  --lch-lime-darker: 40% 0.101 110;
+  --lch-lime-dark: 56.5% 0.142 111;
+  --lch-lime-medium: 71% 0.158 112;
+  --lch-lime-light: 84% 0.08 113;
+  --lch-lime-lighter: 92% 0.046 114;
+  --lch-lime-lightest: 96% 0.034 115;
+
+  --lch-green-darkest: 26% 0.071 149;
+  --lch-green-darker: 40% 0.12 148;
+  --lch-green-dark: 55% 0.162 147;
+  --lch-green-medium: 70% 0.19 146;
+  --lch-green-light: 84% 0.07 145;
+  --lch-green-lighter: 92% 0.044 144;
+  --lch-green-lightest: 96% 0.022 143;
+
+  --lch-aqua-darkest: 26% 0.059 214;
+  --lch-aqua-darker: 40% 0.093 212;
+  --lch-aqua-dark: 55.5% 0.122 210;
+  --lch-aqua-medium: 70% 0.13 208;
+  --lch-aqua-light: 84% 0.04 206;
+  --lch-aqua-lighter: 92% 0.02 204;
+  --lch-aqua-lightest: 96% 0.012 202;
+
+  --lch-blue-darkest: 26% 0.126 264;
+  --lch-blue-darker: 40% 0.166 262;
+  --lch-blue-dark: 57% 0.19 260;
+  --lch-blue-medium: 70% 0.169 258;
+  --lch-blue-light: 84% 0.06 256;
+  --lch-blue-lighter: 92% 0.026 254;
+  --lch-blue-lightest: 96% 0.016 252;
+
+  --lch-violet-darkest: 26% 0.148 292;
+  --lch-violet-darker: 40% 0.2 290;
+  --lch-violet-dark: 58% 0.216 288;
+  --lch-violet-medium: 70% 0.178 286;
+  --lch-violet-light: 84% 0.07 284;
+  --lch-violet-lighter: 92% 0.03 282;
+  --lch-violet-lightest: 96% 0.015 280;
+
+  --lch-purple-darkest: 26% 0.131 314;
+  --lch-purple-darker: 40% 0.178 312;
+  --lch-purple-dark: 58% 0.21 310;
+  --lch-purple-medium: 70% 0.22 308;
+  --lch-purple-light: 84% 0.07 306;
+  --lch-purple-lighter: 92% 0.03 304;
+  --lch-purple-lightest: 96% 0.019 302;
+
+  --lch-pink-darkest: 26% 0.12 348;
+  --lch-pink-darker: 40% 0.16 346;
+  --lch-pink-dark: 59% 0.188 344;
+  --lch-pink-medium: 70% 0.198 342;
+  --lch-pink-light: 84% 0.07 340;
+  --lch-pink-lighter: 92% 0.03 338;
+  --lch-pink-lightest: 96% 0.02 336;
+
+  /* Colors: Named */
+  --color-black: oklch(var(--lch-black));
+  --color-white: oklch(var(--lch-white));
+
+  --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));
+
+  /* Colors: Abstractions */
+  --color-canvas: oklch(var(--lch-canvas));
+  --color-negative: oklch(var(--lch-red-dark));
+  --color-positive: oklch(var(--lch-green-dark));
+  --color-link: oklch(var(--lch-blue-dark));
+  --color-selected: oklch(var(--lch-blue-lighter));
+  --color-selected-dark: oklch(var(--lch-blue-light));
+  --color-highlight: oklch(var(--lch-yellow-lighter));
+  --color-marker: oklch(var(--lch-red-medium));
+  --color-container: oklch(var(--lch-aqua-light));
+  --color-terminal-bg: oklch(var(--lch-blue-darkest));
+  --color-terminal-text: oklch(var(--lch-green-medium));
+
+  /* Colors: Cards */
+  --color-card-1: oklch(var(--lch-ink-dark));
+  --color-card-2: oklch(var(--lch-uncolor-dark));
+  --color-card-3: oklch(var(--lch-yellow-dark));
+  --color-card-4: oklch(var(--lch-lime-dark));
+  --color-card-5: oklch(var(--lch-aqua-dark));
+  --color-card-6: oklch(var(--lch-blue-dark));
+  --color-card-7: oklch(var(--lch-violet-dark));
+  --color-card-8: oklch(var(--lch-purple-dark));
+  --color-card-9: oklch(var(--lch-pink-dark));
 
   @media (prefers-color-scheme: dark) {
-    --lch-black: 100% 0 0;
-    --lch-white: 0% 0 0;
-    --lch-gray-light: 25.2% 0 0;
-    --lch-gray: 30.12% 0 0;
-    --lch-gray-dark: 44.95% 0 0;
-    --lch-blue: 72.25% 0.16 248;
-    --lch-blue-light: 28.11% 0.053 248;
-    --lch-blue-dark: 42.25% 0.07 248;
-    --lch-red: 73.8% 0.184 29.18;
-    --lch-green: 75% 0.21 141.89;
-    --lch-green-light: 28.11% 0.02 142.49;
-    --lch-yellow: 40.9% 0.06 88.9;
-    --lch-light-blue: 20.62% 0.048 216.62;
+    --lch-canvas: 20% 0.0195 232.58;
+    --lch-ink-inverted: var(--lch-black);
 
-    --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42),
-              0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
-              0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
-              0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
-              0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
-              0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
+    --lch-ink-darkest: 96.02% 0.0034 260;
+    --lch-ink-darker: 86% 0.0061 260;
+    --lch-ink-dark: 73.97% 0.009 260;
+    --lch-ink-medium: 62% 0.0122 260;
+    --lch-ink-light: 40% 0.0148 260;
+    --lch-ink-lighter: 30% 0.0178 260;
+    --lch-ink-lightest: 25% 0.0204 260;
+
+    --lch-uncolor-darkest: 96.09% 0.0076 100;
+    --lch-uncolor-darker: 86% 0.021 90;
+    --lch-uncolor-dark: 73.93% 0.041 80;
+    --lch-uncolor-medium: 62% 0.0552 70;
+    --lch-uncolor-light: 40% 0.0387 60;
+    --lch-uncolor-lighter: 30% 0.012 50;
+    --lch-uncolor-lightest: 25% 0.0017 40;
+
+    --lch-red-darkest: 95.85% 0.0218 46;
+    --lch-red-darker: 86% 0.086 44;
+    --lch-red-dark: 73.95% 0.139 42;
+    --lch-red-medium: 62% 0.154 40;
+    --lch-red-light: 40% 0.088 38;
+    --lch-red-lighter: 30% 0.032 36;
+    --lch-red-lightest: 25% 0.011 34;
+
+    --lch-yellow-darkest: 96% 0.056 100;
+    --lch-yellow-darker: 86% 0.103 90;
+    --lch-yellow-dark: 74.06% 0.136 80;
+    --lch-yellow-medium: 62.1% 0.146 70;
+    --lch-yellow-light: 40% 0.0736 60;
+    --lch-yellow-lighter: 30% 0.026 50;
+    --lch-yellow-lightest: 25% 0.01 40;
+
+    --lch-lime-darkest: 96.04% 0.066 115;
+    --lch-lime-darker: 86% 0.098 114;
+    --lch-lime-dark: 73.97% 0.121 113;
+    --lch-lime-medium: 62% 0.128 112;
+    --lch-lime-light: 40% 0.0637 111;
+    --lch-lime-lighter: 30% 0.024 110;
+    --lch-lime-lightest: 25% 0.012 109;
+
+    --lch-green-darkest: 96.12% 0.035 143;
+    --lch-green-darker: 86% 0.082 144;
+    --lch-green-dark: 73.99% 0.117 145;
+    --lch-green-medium: 62% 0.1261 146;
+    --lch-green-light: 40% 0.065 147;
+    --lch-green-lighter: 30% 0.03 148;
+    --lch-green-lightest: 25% 0.018 149;
+
+    --lch-aqua-darkest: 96.15% 0.0244 202;
+    --lch-aqua-darker: 86% 0.06 204;
+    --lch-aqua-dark: 73.92% 0.095 206;
+    --lch-aqua-medium: 62% 0.106 208;
+    --lch-aqua-light: 40% 0.0594 210;
+    --lch-aqua-lighter: 30% 0.028 212;
+    --lch-aqua-lightest: 25% 0.017 214;
+
+    --lch-blue-darkest: 95.93% 0.0217 252;
+    --lch-blue-darker: 86% 0.068 254;
+    --lch-blue-dark: 74% 0.1293 256;
+    --lch-blue-medium: 62% 0.159 258;
+    --lch-blue-light: 40% 0.094 260;
+    --lch-blue-lighter: 30% 0.0452 262;
+    --lch-blue-lightest: 25% 0.0318 264;
+
+    --lch-violet-darkest: 95.97% 0.019 280;
+    --lch-violet-darker: 86% 0.068 282;
+    --lch-violet-dark: 74.08% 0.142 284;
+    --lch-violet-medium: 62% 0.184 286;
+    --lch-violet-light: 40% 0.108 288;
+    --lch-violet-lighter: 30% 0.048 290;
+    --lch-violet-lightest: 25% 0.025 292;
+
+    --lch-purple-darkest: 95.99% 0.0217 302;
+    --lch-purple-darker: 86% 0.068 304;
+    --lch-purple-dark: 73.98% 0.141 306;
+    --lch-purple-medium: 62% 0.177 308;
+    --lch-purple-light: 40% 0.099 310;
+    --lch-purple-lighter: 30% 0.04 312;
+    --lch-purple-lightest: 25% 0.017 314;
+
+    --lch-pink-darkest: 95.84% 0.0308 336;
+    --lch-pink-darker: 86% 0.074 338;
+    --lch-pink-dark: 74.04% 0.1294 340;
+    --lch-pink-medium: 62% 0.166 342;
+    --lch-pink-light: 40% 0.085 344;
+    --lch-pink-lighter: 30% 0.03 346;
+    --lch-pink-lightest: 25% 0.011 348;
+
+    --color-container: oklch(var(--lch-aqua-lighter));
+
+    --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
+              0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
+              0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
+              0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8),
+              0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
+              0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
   }
 }
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 001fd58dd..faaba06c9 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -11,14 +11,14 @@
     --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);
 
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: none;
-    background: var(--color-bg);
+    background: var(--color-canvas);
     color: var(--color-ink);
     font-family: var(--font-sans);
     interpolate-size: allow-keywords;
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 210c81bd7..6ec87c99a 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -4,9 +4,9 @@
     --btn-border-radius: 2em;
 
     align-items: center;
-    background-color: var(--btn-background, var(--color-bg));
+    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-light));
     color: var(--btn-color, var(--color-ink));
     cursor: pointer;
     display: inline-flex;
@@ -112,7 +112,7 @@
 
     &:has(input:checked)  {
       --btn-background: var(--color-ink);
-      --btn-color: var(--color-ink-reversed);
+      --btn-color: var(--color-ink-inverted);
       --outline-color: var(--color-ink);
 
       .checked {
@@ -137,13 +137,13 @@
   /* Variants */
   .btn--link {
     --btn-background: var(--color-link);
-    --btn-color: var(--color-ink-reversed);
+    --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-link);
   }
 
   .btn--negative {
     --btn-background: var(--color-negative);
-    --btn-color: var(--color-ink-reversed);
+    --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-negative);
   }
 
@@ -163,7 +163,7 @@
 
   .btn--positive {
     --btn-background: var(--color-positive);
-    --btn-color: var(--color-ink-reversed);
+    --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-positive);
   }
 
@@ -173,12 +173,12 @@
 
   .btn--reversed {
     --btn-background: var(--color-ink);
-    --btn-color: var(--color-bg);
+    --btn-color: var(--color-canvas);
     --outline-color: var(--color-ink);
   }
 
   :is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
-    --btn-border-color: var(--color-bg);
+    --btn-border-color: var(--color-canvas);
   }
 
   .btn--success {
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 0b193b0d5..4311f1007 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;
@@ -77,14 +77,10 @@
       --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
-      background-color: var(--color-bg);
-      box-shadow: 0 0 0 1px var(--color-subtle);
+      background-color: var(--color-canvas);
+      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);
-      }
-
       .avatar {
         block-size: 2.75em;
         inline-size: 2.75em;
@@ -92,7 +88,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;
@@ -125,7 +121,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/card-perma.css b/app/assets/stylesheets/card-perma.css
index e9db1f020..28dd20768 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -4,7 +4,7 @@
   .card-perma {
     --actions-block-inset: 1.5rem;
     --actions-inline-inset: 4rem;
-    --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
+    --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
     --padding-inline: calc(var(--block-space-double) + var(--block-space));
     --padding-block: calc(var(--block-space-double) + var(--block-space-half));
 
@@ -96,7 +96,7 @@
 
       &:has(input:checked)  {
         --btn-background: var(--card-color);
-        --btn-color: var(--color-ink-reversed);
+        --btn-color: var(--color-ink-inverted);
       }
     }
   }
@@ -111,7 +111,7 @@
 
     .btn:not(.popup__item, .btn--plain, .btn--reversed) {
       --btn-background: var(--card-color);
-      --btn-color: var(--color-ink-reversed);
+      --btn-color: var(--color-ink-inverted);
     }
 
     .btn--plain {
@@ -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 adc0dca20..e47603142 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -7,7 +7,7 @@
     --border-size: 0;
 
     aspect-ratio: var(--card-aspect-ratio, auto);
-    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
+    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
     border-radius: 0.5em;
     box-shadow: var(--shadow);
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -22,21 +22,27 @@
     .avatar {
       --avatar-size: 2.75em;
     }
-
-    @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-subtle-dark);
-    }
   }
 
   .card--golden.card--doing {
-    --border-color: var(--color-bg) !important;
+    --border-color: var(--color-canvas) !important;
+    --lch-golden: var(--lch-yellow-light);
 
-    background-color: var(--color-bg);
-    background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
+    background-color: var(--color-canvas);
+    background-image: linear-gradient(60deg,
+      oklch(var(--lch-golden) / 0.35) 0%,
+      oklch(var(--lch-golden) / 0.15) 20%,
+      oklch(var(--lch-golden) / 0) 60%,
+      oklch(var(--lch-golden) / 0.5) 100%
+    );
     box-shadow:
-      0 0 0.5em 0.2em var(--color-golden),
-      0 0 1em 0.4em var(--color-golden) !important;
-    outline: 1px solid var(--color-golden);
+      0 0 0.5em 0.2em oklch(var(--lch-golden) / 0.35),
+      0 0 1em 0.4em oklch(var(--lch-golden) / 0.35) !important;
+    outline: 1px solid oklch(var(--lch-golden) / 0.35);
+
+    @media (prefers-color-scheme: dark) {
+      --lch-golden: var(--lch-blue-medium);
+    }
   }
 
   .card__background {
@@ -165,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;
     
@@ -225,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);
@@ -250,7 +256,7 @@
   }
 
   .card__closed-title {
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
     font-size: 1.5em;
     font-weight: 900;
     line-height: 1.2;
diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css
index 7b6ff640f..a0dd8e2af 100644
--- a/app/assets/stylesheets/color-picker.css
+++ b/app/assets/stylesheets/color-picker.css
@@ -2,34 +2,17 @@
   --panel-border-color: var(--card-color);
   --panel-border-radius: 2em;
   --panel-border-size: 2px;
-  --panel-padding: 0.5em 0.7em;
+  --panel-padding: 0.5em;
   --panel-size: auto;
 
   inline-size: auto !important;
-  inset: 0 auto auto 0;
+  inset: 50% auto auto calc(-1 * var(--panel-padding));
   max-inline-size: var(--panel-size) !important;
   position: absolute;
+  translate: 0 -50%;
   z-index: 2;
 
   &[open] {
     display: flex;
   }
-
-  .color-picker__color {
-    --btn-size: 2em;
-  }
-}
-
-.color-picker__button {
-  font-size: 0.75em;
-
-  .cards & {
-    display: none;
-  }
-
-  + .panel {
-    --panel-size: auto;
-
-    inset: 0 0 auto auto;
-  }
 }
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 32043d88a..9fc3f9ac2 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/dialog.css b/app/assets/stylesheets/dialog.css
index ea7e10e15..93d40ee1d 100644
--- a/app/assets/stylesheets/dialog.css
+++ b/app/assets/stylesheets/dialog.css
@@ -15,7 +15,7 @@
         transform var(--speed);
 
     &::backdrop {
-      background-color: var(--color-always-black);
+      background-color: var(--color-black);
       opacity: 0;
       transform: scale(1);
       transition:
diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index ac3fc2a9b..849540e5b 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -16,7 +16,7 @@
   }
 
   .events__day-header {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     block-size: var(--grid-lines);
     display: block;
     position: relative;
@@ -24,7 +24,7 @@
   }
 
   .events__day-header-content {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     display: inline-flex;
     font-size: 0.8em;
     inset: calc(var(--grid-lines) - 1em) auto -1em;
@@ -54,7 +54,7 @@
 
   .events--none {
     background-color: var(--color-container);
-    border-block-start: var(--grid-lines) solid var(--color-bg);
+    border-block-start: var(--grid-lines) solid var(--color-canvas);
     padding-block: 3em;
     margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto;
   }
diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index e7be6c769..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-white) / 15%);
+    background-color: oklch(var(--lch-canvas) / 15%);
   }
 }
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index e374ca3d0..139a3a8ce 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/flash.css b/app/assets/stylesheets/flash.css
index 8e5d08d67..8eaddb0aa 100644
--- a/app/assets/stylesheets/flash.css
+++ b/app/assets/stylesheets/flash.css
@@ -12,7 +12,7 @@
     animation: appear-then-fade 3s 300ms both;
     background-color: var(--flash-background, var(--color-ink));
     border-radius: 4em;
-    color: var(--flash-color, var(--color-ink-reversed));
+    color: var(--flash-color, var(--color-ink-inverted));
     display: inline-flex;
     font-size: var(--font-size-medium);
     margin: 0 auto;
diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css
index 66dbdddf1..4ab37ba0e 100644
--- a/app/assets/stylesheets/house.css
+++ b/app/assets/stylesheets/house.css
@@ -15,7 +15,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;
@@ -49,7 +49,7 @@
       }
 
       &:is(:focus, :hover) {
-        background-color: var(--color-subtle);
+        background-color: var(--color-ink-lighter);
       }
 
       &:is(:active) {
@@ -94,7 +94,7 @@
 
     &[status="failed"] {
       background-color: var(--color-negative);
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       font-weight: bold;
       padding: 0.5em;
     }
@@ -113,13 +113,13 @@
     cursor: pointer;
 
     house-md-upload[status="failed"] & {
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       display: inline-block;
     }
 
     &::before {
       content: '×';
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       font-size: 24px;
       font-weight: bold;
       position: absolute;
@@ -140,7 +140,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;
@@ -155,7 +155,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 35854aac6..6b412707b 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%;
@@ -96,7 +96,7 @@
     }
 
     option {
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       color: var(--color-ink);
     }
   }
@@ -140,7 +140,7 @@
     &:has(:focus-visible) {
       .switch__btn {
         box-shadow:
-          0 0 0 var(--outline-size) var(--color-bg),
+          0 0 0 var(--outline-size) var(--color-canvas),
           0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
       }
     }
@@ -153,7 +153,7 @@
   }
 
   .switch__btn {
-    background-color: var(--color-subtle-dark);
+    background-color: var(--color-ink-medium);
     border-radius: 2em;
     cursor: pointer;
     inset: 0;
@@ -161,7 +161,7 @@
     transition: 150ms ease;
 
     &::before {
-      background-color: var(--color-ink-reversed);
+      background-color: var(--color-ink-inverted);
       block-size: 1.35em;
       border-radius: 50%;
       content: "";
@@ -173,7 +173,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 6dabfefc4..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-white) / 0.66);
+    background-color: oklch(var(--lch-canvas) / 0.66);
     block-size: 100dvh;
     border: 0;
     inline-size: 100dvw;
diff --git a/app/assets/stylesheets/markdown-content.css b/app/assets/stylesheets/markdown-content.css
index 9d094aade..7a67ec288 100644
--- a/app/assets/stylesheets/markdown-content.css
+++ b/app/assets/stylesheets/markdown-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/notifications.css b/app/assets/stylesheets/notifications.css
index bc95412d7..43dd95d5e 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;
     }
@@ -62,7 +62,7 @@
 
   .notification__unread_indicator {
     --btn-background: var(--color-marker);
-    --btn-border-color: var(--color-bg);
+    --btn-border-color: var(--color-canvas);
     --btn-icon-size: 0.7em;
     --btn-padding: 0;
     --btn-size: 1.2em;
@@ -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 3d4620288..19609aced 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -1,16 +1,12 @@
 @layer components {
   .panel {
-    background-color: var(--color-bg);
-    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
+    background-color: var(--color-canvas);
+    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);
     max-inline-size: 100%;
     padding: var(--panel-padding, calc(var(--block-space) * 2));
-
-    @media (prefers-color-scheme: dark) {
-      --panel-border-color: var(--color-subtle-dark);
-    }
   }
 
   .panels--two-up {
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index 50da7657e..8756e2391 100644
--- a/app/assets/stylesheets/pins.css
+++ b/app/assets/stylesheets/pins.css
@@ -30,7 +30,7 @@
       --block-space-half: 0.5em;
       --text-xx-large: 2em;
 
-      border: 1px solid var(--color-bg);
+      border: 1px solid var(--color-canvas);
       view-transition-name: unset !important;
     }
 
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 21c8780de..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);
 
@@ -40,7 +40,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;
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 0fb7e193b..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 {
@@ -83,7 +83,7 @@
     }
 
     .err {
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       background-color: var(--markup-deleted);
     }
 
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index d431d3cfa..cd310c2c1 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -2,8 +2,8 @@
   .terminal {
     --row-gap: 0.2lh;
 
-    background-color: var(--color-ink);
-    color: var(--color-positive);
+    background-color: var(--color-terminal-bg);
+    color: var(--color-terminal-text);
     font-family: var(--font-mono);
     font-size: var(--text-normal);
     inset: auto 0 0 0;
@@ -12,29 +12,29 @@
     z-index: 1;
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-always-black);
-      border-block-start: 1px solid var(--color-subtle-dark);
+      background-color: var(--color-black);
+      border-block-start: 1px solid var(--color-ink-lighter);
     }
 
     .terminal__input {
       --input-border-color: transparent;
       --input-border-radius: 0.3em;
       --hover-color: transparent;
-      --input-color: var(--color-positive);
+      --input-color: var(--color-terminal-text);
       --outline-size: 0;
       --outline-color: transparent;
 
-      accent-color: var(--color-positive);
-      caret-color: var(--color-positive);
+      accent-color: var(--color-terminal-text);
+      caret-color: var(--color-terminal-text);
       font-family: inherit;
 
       &::placeholder {
-        color: var(--color-always-white);
+        color: var(--color-white);
         opacity: 0.5;
       }
 
       .terminal__link & {
-        color: var(--color-always-white);
+        color: var(--color-white);
         opacity: 0.5;
       }
     }
@@ -43,7 +43,7 @@
   .terminal__link {
     --hover-size: 0;
 
-    color: var(--color-positive);
+    color: var(--color-terminal-text);
   }
 
   .terminal__menu {
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index c37c6ae9c..ecd042d1c 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -61,11 +61,11 @@
 
   .tray__actions {
     --border-style: dashed;
-    --border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink));
+    --border-color: color-mix(in srgb, var(--color-white) 40%, var(--color-ink));
     --hover-size: 0;
 
     align-items: center;
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
     display: flex;
     gap: var(--inline-space-half);
     justify-content: space-between;
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 7c50c3b9d..a07d98422 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -14,9 +14,9 @@
   .txt-align-end { text-align: end; }
 
   .txt-ink { color: var(--color-ink); }
-  .txt-reversed { color: var(--color-ink-reversed); }
+  .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; }
@@ -148,10 +148,10 @@
   .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }
 
   /* Fills */
-  .fill { background-color: var(--color-bg); }
+  .fill { background-color: var(--color-canvas); }
   .fill-black { background-color: var(--color-ink); }
-  .fill-white { background-color: var(--color-ink-reversed); }
-  .fill-shade { background-color: var(--color-subtle-light); }
+  .fill-white { background-color: var(--color-ink-inverted); }
+  .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; }
@@ -159,10 +159,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/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index d1f525da6..f69b7ff7c 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -20,7 +20,7 @@
   .workflow-stage--current {
     --btn-background: var(--card-color);
 
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
 
     @media (hover: hover) {
       &:hover {
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/_access_toggle.erb b/app/views/collections/_access_toggle.erb
index e08f1dc85..06609a1fe 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 margin-inline-end" %>
 
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
index 62d50298e..c7d03827d 100644
--- a/app/views/collections/edit.html.erb
+++ b/app/views/collections/edit.html.erb
@@ -33,10 +33,10 @@
   <div class="panel shadow center flex flex-column">
     <%= render "collections/edit/auto_close", collection: @collection %>
 
-    <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-subtle);" aria-hidden="true" />
+    <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
     <%= render "collections/edit/workflows", collection: @collection %>
 
-    <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle); margin-block-start: auto;" aria-hidden="true" />
+    <hr class="separator--horizontal full-width" style="--border-color: var(--color-ink-medium); margin-block-start: auto;" aria-hidden="true" />
 
     <%= form_with model: @collection, class: "txt-align-center", method: :delete do |form| %>
       <%= form.button class: "btn txt-negative borderless txt-small", data: { turbo_confirm: "Are you sure you want to permanently delete this Collection?" } do %>
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,
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..f6972731d 100644
--- a/app/views/workflows/_workflow.html.erb
+++ b/app/views/workflows/_workflow.html.erb
@@ -8,9 +8,9 @@
       <% 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">
+    <div class="flex flex-column gap-half margin-block-start">
       <%= turbo_frame_tag dom_id(workflow, :stages) do %>
         <%= render partial: "workflows/stages/stage", collection: workflow.stages %>
 
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index f2b6e3160..b51ae516d 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -1,14 +1,21 @@
 <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
-  <button class="btn btn--reversed txt-x-small" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
+  <button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
     <%= icon_tag "art" %>
     <span class="for-screen-reader">Change color</span>
   </button>
 
   <dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <form method="dialog">
+      <button class="btn txt-small" title="Close (esc)">
+        <%= icon_tag "remove" %>
+        <span class="for-screen-reader">Close</span>
+      </button>
+    </form>
+
     <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
       <% Card::COLORS.each do |color| %>
         <span class="color-picker__color">
-          <label class="btn btn--circle" style="--btn-background: <%= color %>" title="<%= color %>">
+          <label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
             <%= form.radio_button :color, color %>
             <%= icon_tag "check", class: "checked" %>
             <span class="for-screen-reader"><%= color %></span>
@@ -16,12 +23,5 @@
         </span>
       <% end %>
     <% end %>
-
-    <form method="dialog">
-      <button class="btn txt-small" title="Close (esc)">
-        <%= icon_tag "remove" %>
-        <span class="for-screen-reader">Close</span>
-      </button>
-    </form>
   </dialog>
 </div>
diff --git a/public/406-unsupported-browser.html b/public/406-unsupported-browser.html
index 4af2887d3..f78ac9454 100644
--- a/public/406-unsupported-browser.html
+++ b/public/406-unsupported-browser.html
@@ -12,17 +12,17 @@
     }
 
     body {
-      --lch-black: 0% 0 0;
-      --lch-gray: 75% 0.005 96;
-      --lch-white: 100% 0 0;
+      --lch-ink: 0% 0 0;
+      --lch-ink-lighter: 75% 0.005 96;
+      --lch-ink-inverted: 100% 0 0;
 
-      --color-border: oklch(var(--lch-gray));
-      --color-bg: oklch(var(--lch-white));
-      --color-text: oklch(var(--lch-black));
+      --color-border: oklch(var(--lch-ink-lighter));
+      --color-canvas: oklch(var(--lch-ink-inverted));
+      --color-text: oklch(var(--lch-ink));
 
       --btn-size: 2.65em;
 
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       block-size: 100dvh;
       color: var(--color-text);
       display: grid;
@@ -32,9 +32,9 @@
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
       @media (prefers-color-scheme: dark) {
-        --lch-black: 100% 0 0;
-        --lch-gray: 44.95% 0 0;
-        --lch-white: 0% 0 0;
+        --lch-ink: 100% 0 0;
+        --lch-ink-lighter: 45% 0 0;
+        --lch-ink-inverted: 0% 0 0;
       }
     }
 
@@ -65,12 +65,12 @@
       inline-size: 30dvh;
 
       svg {
-        fill: var(--color-bg);
+        fill: var(--color-canvas);
         grid-area: 1/1;
         max-inline-size: 66%;
 
         @media (prefers-color-scheme: dark) {
-          fill: var(--color-bg);
+          fill: var(--color-canvas);
         }
       }
     }
@@ -91,7 +91,7 @@
     .btn {
       align-items: center;
       aspect-ratio: 1;
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       block-size: var(--btn-size);
       border-radius: 50%;
       border: 1px solid var(--color-border);