diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 3dbe697a3..5252d7c47 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -34,8 +34,9 @@
   --btn-size: 2.65em;
 
   /* Color values */
-  --lch-black: 27.13% 0.1035 284.77;
-  --lch-white: 100% 0 0;
+  --lch-ink: 27.13% 0.1035 284.77;
+  --lch-ink-inverted: 100% 0 0;
+
   --lch-gray-light: 96% 0.005 96;
   --lch-gray: 92% 0.005 96;
   --lch-gray-dark: 75% 0.005 96;
@@ -53,12 +54,14 @@
   --lch-light-blue: 84.94% 0.048 216.62;
 
   /* Color abstractions */
+  --color-ink: oklch(var(--lch-ink));
+  --color-ink-inverted: oklch(var(--lch-ink-inverted));
+  --color-canvas: oklch(var(--lch-ink-inverted));
+
+
   --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));
@@ -73,8 +76,8 @@
   --color-golden: oklch(var(--lch-golden));
 
   @media (prefers-color-scheme: dark) {
-    --lch-black: 100% 0 0;
-    --lch-white: 0% 0 0;
+    --lch-ink: 100% 0 0;
+    --lch-ink-inverted: 0% 0 0;
     --lch-gray-light: 25.2% 0 0;
     --lch-gray: 30.12% 0 0;
     --lch-gray-dark: 44.95% 0 0;
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 9301bbc61..08368757e 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -18,7 +18,7 @@
     -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..fea991bff 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -4,7 +4,7 @@
     --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));
     color: var(--btn-color, var(--color-ink));
@@ -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 022201a26..268d82463 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -77,7 +77,7 @@
       --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       box-shadow: 0 0 0 1px var(--color-subtle);
       line-height: 1.2;
 
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index af825bb32..77be4096d 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));
 
@@ -87,7 +87,7 @@
 
       &:has(input:checked)  {
         --btn-background: var(--card-color);
-        --btn-color: var(--color-ink-reversed);
+        --btn-color: var(--color-ink-inverted);
       }
     }
   }
@@ -102,7 +102,7 @@
 
     .btn:not(.popup__item, .btn--plain) {
       --btn-background: var(--card-color);
-      --btn-color: var(--color-ink-reversed);
+      --btn-color: var(--color-ink-inverted);
     }
 
     .btn--plain {
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 6f869df5c..304ac51c2 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));
@@ -29,9 +29,9 @@
   }
 
   .card--golden.card--doing {
-    --border-color: var(--color-bg) !important;
+    --border-color: var(--color-canvas) !important;
 
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     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%);
     box-shadow:
       0 0 0.5em 0.2em var(--color-golden),
@@ -203,7 +203,7 @@
   }
 
   .card__closed-title {
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
     font-size: var(--text-rel-large);
     font-weight: 900;
     text-shadow:
diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 0b19fe853..dd2e8dc80 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -17,7 +17,7 @@
   }
 
   .events__day-header {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     block-size: var(--grid-lines);
     display: block;
     position: relative;
@@ -25,7 +25,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;
@@ -55,7 +55,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..a1f6da0dc 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-ink-inverted) / 15%);
   }
 }
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 30982ad76..429c0de0b 100644
--- a/app/assets/stylesheets/house.css
+++ b/app/assets/stylesheets/house.css
@@ -93,7 +93,7 @@
 
     &[status="failed"] {
       background-color: var(--color-negative);
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       font-weight: bold;
       padding: 0.5em;
     }
@@ -112,13 +112,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;
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 5e3ba772c..781649ce5 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -135,7 +135,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);
       }
     }
@@ -156,7 +156,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: "";
diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index 6dabfefc4..a9cef43ad 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-ink-inverted) / 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 d8779c2e6..bf8575ed4 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -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;
diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 108d7c42a..8b3c23151 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -1,6 +1,6 @@
 @layer components {
   .panel {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
     border-radius: var(--panel-border-radius, 1em);
     color: var(--color-ink);
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index e42f2d3e7..b8e44d7e2 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);
     }
 
     .card__collection {
diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css
index 0fb7e193b..0e518edff 100644
--- a/app/assets/stylesheets/syntax.css
+++ b/app/assets/stylesheets/syntax.css
@@ -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/trays.css b/app/assets/stylesheets/trays.css
index c37c6ae9c..806ea2d61 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -65,7 +65,7 @@
     --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 6ec13a630..3ddbfb2ee 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -14,7 +14,7 @@
   .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-alert { color: var(--color-marker); }
@@ -146,9 +146,9 @@
   .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-white { background-color: var(--color-ink-inverted); }
   .fill-shade { background-color: var(--color-subtle-light); }
   .fill-selected { background-color: var(--color-selected); }
   .fill-highlight { background-color: var(--color-highlight); }
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index d69dbfe3b..ce36985de 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 {
@@ -33,7 +33,7 @@
 
       background: var(--card-color);
       border-radius: 0.2em;
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
     }
   }
 }
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index 58f84eb8f..0f55d47be 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -3,7 +3,7 @@
 
 <%= link_to link,
       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/public/406-unsupported-browser.html b/public/406-unsupported-browser.html
index 4af2887d3..93c900dad 100644
--- a/public/406-unsupported-browser.html
+++ b/public/406-unsupported-browser.html
@@ -12,17 +12,17 @@
     }
 
     body {
-      --lch-black: 0% 0 0;
+      --lch-ink: 0% 0 0;
       --lch-gray: 75% 0.005 96;
-      --lch-white: 100% 0 0;
+      --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-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-gray: 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);