diff --git a/.changeset/poster-label-ink.md b/.changeset/poster-label-ink.md
new file mode 100644
index 00000000..7b8ac947
--- /dev/null
+++ b/.changeset/poster-label-ink.md
@@ -0,0 +1,5 @@
+---
+"material-theme-builder": patch
+---
+
+Write each poster label in the M3 role it is paired with -- `primary` in `on-primary`, `on-primary` in `primary`, the surface family in `on-surface`, tones 80 and up in black and the rest in white -- as Material Theme Builder's poster does, instead of white in `mix-blend-mode: difference`.
diff --git a/src/Mtb.stories.helpers.tsx b/src/Mtb.stories.helpers.tsx
index 492571af..08954e4a 100644
--- a/src/Mtb.stories.helpers.tsx
+++ b/src/Mtb.stories.helpers.tsx
@@ -104,46 +104,52 @@ function TailwindCustomColors() {
   return (
     <div className="flex flex-col gap-(--gap2)">
       <div className="grid grid-cols-4">
-        <div className="h-(--cell) bg-myCustomColor1" title="myCustomColor1">
+        <div
+          className="h-(--cell) bg-myCustomColor1 text-on-myCustomColor1"
+          title="myCustomColor1"
+        >
           <p>MyCustomColor1</p>
         </div>
         <div
-          className="h-(--cell) bg-on-myCustomColor1"
+          className="h-(--cell) bg-on-myCustomColor1 text-myCustomColor1"
           title="on-myCustomColor1"
         >
           <p>On MyCustomColor1</p>
         </div>
         <div
-          className="h-(--cell) bg-myCustomColor1-container"
+          className="h-(--cell) bg-myCustomColor1-container text-on-myCustomColor1-container"
           title="myCustomColor1-container"
         >
           <p>MyCustomColor1 Container</p>
         </div>
         <div
-          className="h-(--cell) bg-on-myCustomColor1-container"
+          className="h-(--cell) bg-on-myCustomColor1-container text-myCustomColor1-container"
           title="on-myCustomColor1-container"
         >
           <p>On MyCustomColor1 Container</p>
         </div>
       </div>
       <div className="grid grid-cols-4">
-        <div className="h-(--cell) bg-myCustomColor2" title="myCustomColor2">
+        <div
+          className="h-(--cell) bg-myCustomColor2 text-on-myCustomColor2"
+          title="myCustomColor2"
+        >
           <p>MyCustomColor2</p>
         </div>
         <div
-          className="h-(--cell) bg-on-myCustomColor2"
+          className="h-(--cell) bg-on-myCustomColor2 text-myCustomColor2"
           title="on-myCustomColor2"
         >
           <p>On MyCustomColor2</p>
         </div>
         <div
-          className="h-(--cell) bg-myCustomColor2-container"
+          className="h-(--cell) bg-myCustomColor2-container text-on-myCustomColor2-container"
           title="myCustomColor2-container"
         >
           <p>MyCustomColor2 Container</p>
         </div>
         <div
-          className="h-(--cell) bg-on-myCustomColor2-container"
+          className="h-(--cell) bg-on-myCustomColor2-container text-myCustomColor2-container"
           title="on-myCustomColor2-container"
         >
           <p>On MyCustomColor2 Container</p>
@@ -195,37 +201,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Primary</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-primary-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-primary-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-primary-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-primary-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-primary-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-primary-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-primary-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-primary-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-primary-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-primary-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-primary-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-primary-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -235,37 +241,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Secondary</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-secondary-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-secondary-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-secondary-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-secondary-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-secondary-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-secondary-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-secondary-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-secondary-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-secondary-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-secondary-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-secondary-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-secondary-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -275,37 +281,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Tertiary</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-tertiary-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-tertiary-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-tertiary-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-tertiary-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-tertiary-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-tertiary-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-tertiary-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-tertiary-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-tertiary-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-tertiary-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-tertiary-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-tertiary-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -315,37 +321,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Error</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-error-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-error-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-error-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-error-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-error-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-error-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-error-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-error-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-error-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-error-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-error-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-error-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -355,37 +361,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Neutral</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-neutral-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-neutral-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-neutral-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-neutral-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-neutral-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-neutral-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-neutral-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-neutral-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-neutral-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-neutral-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-neutral-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -395,37 +401,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Neutral Variant</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-neutral-variant-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-neutral-variant-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-neutral-variant-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-neutral-variant-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-neutral-variant-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-neutral-variant-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-neutral-variant-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-neutral-variant-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-neutral-variant-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-neutral-variant-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-neutral-variant-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-neutral-variant-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -435,37 +441,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">myCustomColor1</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-myCustomColor1-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-myCustomColor1-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-myCustomColor1-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-myCustomColor1-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-myCustomColor1-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-myCustomColor1-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-myCustomColor1-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-myCustomColor1-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-myCustomColor1-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-myCustomColor1-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-myCustomColor1-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor1-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
@@ -475,37 +481,37 @@ export function TailwindScheme() {
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">myCustomColor2</h4>
             <div className="grid grid-cols-11 rounded-md overflow-hidden">
-              <div className="bg-myCustomColor2-50 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-50 text-black aspect-square flex items-center justify-center text-center text-xs">
                 50
               </div>
-              <div className="bg-myCustomColor2-100 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-100 text-black aspect-square flex items-center justify-center text-center text-xs">
                 100
               </div>
-              <div className="bg-myCustomColor2-200 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-200 text-black aspect-square flex items-center justify-center text-center text-xs">
                 200
               </div>
-              <div className="bg-myCustomColor2-300 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-300 text-white aspect-square flex items-center justify-center text-center text-xs">
                 300
               </div>
-              <div className="bg-myCustomColor2-400 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-400 text-white aspect-square flex items-center justify-center text-center text-xs">
                 400
               </div>
-              <div className="bg-myCustomColor2-500 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-500 text-white aspect-square flex items-center justify-center text-center text-xs">
                 500
               </div>
-              <div className="bg-myCustomColor2-600 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-600 text-white aspect-square flex items-center justify-center text-center text-xs">
                 600
               </div>
-              <div className="bg-myCustomColor2-700 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-700 text-white aspect-square flex items-center justify-center text-center text-xs">
                 700
               </div>
-              <div className="bg-myCustomColor2-800 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-800 text-white aspect-square flex items-center justify-center text-center text-xs">
                 800
               </div>
-              <div className="bg-myCustomColor2-900 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-900 text-white aspect-square flex items-center justify-center text-center text-xs">
                 900
               </div>
-              <div className="bg-myCustomColor2-950 aspect-square flex items-center justify-center text-center text-xs">
+              <div className="bg-myCustomColor2-950 text-white aspect-square flex items-center justify-center text-center text-xs">
                 950
               </div>
             </div>
diff --git a/src/Scheme.tsx b/src/Scheme.tsx
index 82b9d809..da8b6860 100644
--- a/src/Scheme.tsx
+++ b/src/Scheme.tsx
@@ -173,10 +173,82 @@ const twClasses = {
   surfaceTint: "bg-surface-tint",
 } satisfies Record<TokenName, string>;
 
+/**
+ * The role each swatch's label is written in -- its M3 pair, the way the
+ * official app's poster does it: `primary` reads in `on-primary` and
+ * `on-primary` in `primary`; the surface family reads in `on-surface`, and
+ * the inks (`on-surface`, `outline`) in `surface`. `scrim` and `shadow` are
+ * black in both schemes, so their label is plain white, as in the app.
+ *
+ * The fixed accents are not on the app's poster; they follow the same pairing.
+ */
+const ink = {
+  primary: "onPrimary",
+  onPrimary: "primary",
+  primaryContainer: "onPrimaryContainer",
+  onPrimaryContainer: "primaryContainer",
+  secondary: "onSecondary",
+  onSecondary: "secondary",
+  secondaryContainer: "onSecondaryContainer",
+  onSecondaryContainer: "secondaryContainer",
+  tertiary: "onTertiary",
+  onTertiary: "tertiary",
+  tertiaryContainer: "onTertiaryContainer",
+  onTertiaryContainer: "tertiaryContainer",
+
+  error: "onError",
+  onError: "error",
+  errorContainer: "onErrorContainer",
+  onErrorContainer: "errorContainer",
+
+  primaryFixed: "onPrimaryFixed",
+  primaryFixedDim: "onPrimaryFixed",
+  onPrimaryFixed: "primaryFixed",
+  onPrimaryFixedVariant: "primaryFixed",
+  secondaryFixed: "onSecondaryFixed",
+  secondaryFixedDim: "onSecondaryFixed",
+  onSecondaryFixed: "secondaryFixed",
+  onSecondaryFixedVariant: "secondaryFixed",
+  tertiaryFixed: "onTertiaryFixed",
+  tertiaryFixedDim: "onTertiaryFixed",
+  onTertiaryFixed: "tertiaryFixed",
+  onTertiaryFixedVariant: "tertiaryFixed",
+
+  surfaceDim: "onSurface",
+  surface: "onSurface",
+  surfaceBright: "onSurface",
+  surfaceContainerLowest: "onSurface",
+  surfaceContainerLow: "onSurface",
+  surfaceContainer: "onSurface",
+  surfaceContainerHigh: "onSurface",
+  surfaceContainerHighest: "onSurface",
+  onSurface: "surface",
+  onSurfaceVariant: "surfaceVariant",
+  outline: "surface",
+  outlineVariant: "onSurface",
+
+  inverseSurface: "inverseOnSurface",
+  inverseOnSurface: "inverseSurface",
+  inversePrimary: "onSurface",
+  scrim: "white",
+  shadow: "white",
+
+  background: "onBackground",
+  onBackground: "background",
+  surfaceVariant: "onSurfaceVariant",
+  surfaceTint: "onPrimary",
+} satisfies Record<TokenName, TokenName | "white">;
+
+/** The CSS color a label is written in, from the role it is paired with. */
+function inkOf(role: TokenName | "white"): string {
+  return role === "white" ? "white" : `var(--md-sys-color-${kebabCase(role)})`;
+}
+
 /**
  * One color cell: the role as `title`, its human name as label, the color
  * itself from `var(--md-sys-color-<role>)` — or from the Tailwind utility when
- * under a `tw` `Scheme`.
+ * under a `tw` `Scheme`. The label is written in the role's pair (`ink`),
+ * always from the var: `tw` is about the `bg-*` utilities resolving.
  */
 function Swatch({
   role,
@@ -195,11 +267,11 @@ function Swatch({
     <div
       title={name}
       className={classNames(tw && twClasses[role], className)}
-      style={
-        tw
-          ? style
-          : { backgroundColor: `var(--md-sys-color-${name})`, ...style }
-      }
+      style={{
+        ...(!tw && { backgroundColor: `var(--md-sys-color-${name})` }),
+        color: inkOf(ink[role]),
+        ...style,
+      }}
       {...props}
     >
       {children ?? <p>{startCase(role)}</p>}
@@ -235,8 +307,6 @@ function PosterStyle({ notext }: { notext?: boolean }) {
 
           p {
             font-family: sans-serif;
-            color: white;
-            mix-blend-mode: difference;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -292,6 +362,34 @@ const themeStyles = {
   },
 } satisfies Record<"light" | "dark", CSSProperties>;
 
+/**
+ * One cell of a custom color's row: the `--md-sys-color-<name>` token as its
+ * color, its `label` written in the `ink` token -- its pair, as `ink` maps
+ * the standard roles.
+ */
+function CustomSwatch({
+  name,
+  ink,
+  label,
+}: {
+  name: string;
+  ink: string;
+  label: string;
+}) {
+  return (
+    <div
+      title={name}
+      style={{
+        ...cell,
+        backgroundColor: `var(--md-sys-color-${name})`,
+        color: `var(--md-sys-color-${ink})`,
+      }}
+    >
+      <p>{label}</p>
+    </div>
+  );
+}
+
 /**
  * The four roles the current spec no longer lists, as an extra row under
  * `on-surface` — `background`, `on-background`, `surface-variant` and
@@ -644,54 +742,30 @@ export function Scheme({
         }
         {customColors && customColors.length > 0 && (
           <div style={column("var(--gap2)")}>
-            {customColors?.map((customColor) => (
-              <div key={customColor.name} style={grid(4)}>
-                <Foo>
-                  <FooTop
-                    title={kebabCase(customColor.name)}
-                    style={{
-                      ...cell,
-                      backgroundColor: `var(--md-sys-color-${kebabCase(customColor.name)})`,
-                    }}
-                  >
-                    <p>{upperFirst(customColor.name)}</p>
-                  </FooTop>
-                </Foo>
-                <Foo>
-                  <FooTop
-                    title={`on-${kebabCase(customColor.name)}`}
-                    style={{
-                      ...cell,
-                      backgroundColor: `var(--md-sys-color-on-${kebabCase(customColor.name)})`,
-                    }}
-                  >
-                    <p>On {upperFirst(customColor.name)}</p>
-                  </FooTop>
-                </Foo>
-                <Foo>
-                  <FooTop
-                    title={`${kebabCase(customColor.name)}-container`}
-                    style={{
-                      ...cell,
-                      backgroundColor: `var(--md-sys-color-${kebabCase(customColor.name)}-container)`,
-                    }}
-                  >
-                    <p>{upperFirst(customColor.name)} Container</p>
-                  </FooTop>
-                </Foo>
-                <Foo>
-                  <FooTop
-                    title={`on-${kebabCase(customColor.name)}-container`}
-                    style={{
-                      ...cell,
-                      backgroundColor: `var(--md-sys-color-on-${kebabCase(customColor.name)}-container)`,
-                    }}
-                  >
-                    <p>On {upperFirst(customColor.name)} Container</p>
-                  </FooTop>
-                </Foo>
-              </div>
-            ))}
+            {customColors.map((customColor) => {
+              const name = kebabCase(customColor.name);
+              const label = upperFirst(customColor.name);
+              return (
+                <div key={customColor.name} style={grid(4)}>
+                  <CustomSwatch name={name} ink={`on-${name}`} label={label} />
+                  <CustomSwatch
+                    name={`on-${name}`}
+                    ink={name}
+                    label={`On ${label}`}
+                  />
+                  <CustomSwatch
+                    name={`${name}-container`}
+                    ink={`on-${name}-container`}
+                    label={`${label} Container`}
+                  />
+                  <CustomSwatch
+                    name={`on-${name}-container`}
+                    ink={`${name}-container`}
+                    label={`On ${label} Container`}
+                  />
+                </div>
+              );
+            })}
           </div>
         )}
 
@@ -753,6 +827,7 @@ export function Shades({
                     alignItems: "center",
                     justifyContent: "center",
                     backgroundColor: `var(--md-ref-palette-${isCustom ? kebabCase(name) : name}-${tone})`,
+                    color: tone >= 80 ? "black" : "white",
                   }}
                 >
                   <p>{tone}</p>